coder/ai-chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 搜索按钮移到顶部header，和新建按钮并列

Browse Source
This commit is contained in:
hubian
2026-04-26 17:50:04 +08:00
parent 6349cc70ae
commit d550461e0b
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
www/app.js
View File

@@ -74,9 +74,14 @@ function showConversationList() {
<span class="logo">🤖</span> <span class="logo">🤖</span>
<h1>AI助手</h1> <h1>AI助手</h1>
</div> </div>
<button class="new-chat-btn-header" id="newChatBtn" title="新建对话"> <div class="header-actions">
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> <button class="header-btn search-toggle-btn" id="searchToggleBtn" title="搜索">
</button> <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
</button>
<button class="header-btn new-chat-btn-header" id="newChatBtn" title="新建对话">
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
</button>
</div>
</header> </header>
<div class="list-content"> <div class="list-content">
@@ -128,12 +133,6 @@ function showConversationList() {
<div class="search-results" id="searchResults"></div> <div class="search-results" id="searchResults"></div>
</div> </div>
<!-- 底部工具栏 -->
<div class="list-footer">
<button class="footer-btn search-toggle-btn" id="searchToggleBtn">
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
<span>搜索</span>
</button>
</div> </div>
</div> </div>
`; `;

6
www/index.html
View File

@@ -8,12 +8,12 @@
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
<title>AI助手</title> <title>AI助手</title>
<link rel="stylesheet" href="style.css?v=2.5.0"> <link rel="stylesheet" href="style.css?v=2.5.2">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="marked.min.js?v=2.5.0"></script> <script src="marked.min.js?v=2.5.2"></script>
<script src="app.js?v=2.5.0"></script> <script src="app.js?v=2.5.2"></script>
</body> </body>
</html> </html>

27
www/style.css
View File

@@ -66,14 +66,13 @@ body {
font-weight: 600; font-weight: 600;
} }
.list-content { .header-actions {
flex: 1; display: flex;
padding: 16px; align-items: center;
overflow-y: auto; gap: 8px;
} }
/* Header 中的新建对话按钮 - 美化版 */ .header-btn {
.new-chat-btn-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -90,7 +89,7 @@ body {
overflow: hidden; overflow: hidden;
} }
.new-chat-btn-header::before { .header-btn::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
@@ -99,25 +98,31 @@ body {
transition: opacity 0.25s; transition: opacity 0.25s;
} }
.new-chat-btn-header:hover { .header-btn:hover {
transform: scale(1.08); transform: scale(1.08);
box-shadow: 0 4px 16px rgba(102,126,234,0.4), 0 2px 8px rgba(0,0,0,0.2); box-shadow: 0 4px 16px rgba(102,126,234,0.4), 0 2px 8px rgba(0,0,0,0.2);
color: #5a67d8; color: #5a67d8;
} }
.new-chat-btn-header:hover::before { .header-btn:hover::before {
opacity: 1; opacity: 1;
} }
.new-chat-btn-header:active { .header-btn:active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 1px 4px rgba(0,0,0,0.2); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
} }
.new-chat-btn-header svg { .header-btn svg {
filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3)); filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3));
} }
.list-content {
flex: 1;
padding: 16px;
overflow-y: auto;
}
/* 原样式保留（备用） */ /* 原样式保留（备用） */
.new-chat-btn { .new-chat-btn {
display: flex; display: flex;