From 41a4d997fd8f59b5da5dbfe9f64e0b381ae1db7b Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Fri, 27 Mar 2026 15:49:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0UI=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                      | 14 +---
 frontend/src/components/FileExplorer.vue  | 44 +----------
 frontend/src/components/MessageBubble.vue | 32 +-------
 frontend/src/components/MessageInput.vue  | 16 +---
 frontend/src/components/ModalDialog.vue   | 13 +--
 frontend/src/components/SettingsPanel.vue | 36 +--------
 frontend/src/components/Sidebar.vue       | 48 ++----------
 frontend/src/components/StatsPanel.vue    | 36 +--------
 frontend/src/styles/global.css            | 96 +++++++++++++++++++++++
 9 files changed, 123 insertions(+), 212 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 65d0380..483b174 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -30,7 +30,7 @@
           :project-name="currentProject.name"
         />
       </div>
-      <div v-else class="explorer-body explorer-empty">
+      <div v-else class="explorer-body empty-state">
         <span v-html="icons.folderLg" style="color: var(--text-tertiary); opacity: 0.5;" />
         <p>当前对话未关联项目</p>
       </div>
@@ -653,17 +653,7 @@ onMounted(() => {
   display: flex;
 }
 
-.explorer-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  color: var(--text-tertiary);
-  font-size: 14px;
-}
-
-/* modal-overlay, modal-content, btn-icon, form-group, modal-footer, btn-secondary, btn-primary now in global.css */
+/* explorer-empty now uses global .empty-state */
 
 .create-modal {
   background: var(--bg-primary);
diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index 589cd5b..569f260 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -15,15 +15,15 @@
         </div>
       </div>
 
-      <div v-if="loadingTree" class="explorer-loading">
+      <div v-if="loadingTree" class="empty-state">
         <span class="spinner" v-html="icons.spinnerMd" />
       </div>
 
-      <div v-else-if="treeItems.length === 0" class="explorer-empty">
+      <div v-else-if="treeItems.length === 0" class="empty-state">
         空项目
       </div>
 
-      <div v-else class="tree-container">
+      <div v-else class="scrollbar-thin" style="flex: 1; padding: 4px 0;">
         <FileTreeItem
           v-for="item in treeItems"
           :key="item.path"
@@ -80,7 +80,7 @@
     </div>
 
     <!-- Empty state -->
-    <div v-else class="viewer-placeholder">
+    <div v-else class="empty-state">
       <span v-html="icons.fileLg" style="color: var(--text-tertiary); opacity: 0.5;" />
       <span>选择文件以预览</span>
     </div>
@@ -311,31 +311,6 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 
-.tree-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.tree-container::-webkit-scrollbar {
-  width: 4px;
-}
-
-.tree-container::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 2px;
-}
-
-.explorer-loading,
-.explorer-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  color: var(--text-tertiary);
-  font-size: 13px;
-}
-
 /* -- Viewer -- */
 .file-viewer {
   flex: 1;
@@ -400,17 +375,6 @@ onUnmounted(() => {
   font-size: 13px;
 }
 
-.viewer-placeholder {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  color: var(--text-tertiary);
-  font-size: 13px;
-}
-
 /* -- Code pane -- */
 .code-pane {
   flex: 1;
diff --git a/frontend/src/components/MessageBubble.vue b/frontend/src/components/MessageBubble.vue
index c1e7f82..b7eae68 100644
--- a/frontend/src/components/MessageBubble.vue
+++ b/frontend/src/components/MessageBubble.vue
@@ -30,13 +30,13 @@
       <div class="message-footer">
         <span class="token-count" v-if="tokenCount">{{ tokenCount }} tokens</span>
         <span class="message-time">{{ formatTime(createdAt) }}</span>
-        <button v-if="role === 'assistant'" class="btn-regenerate" @click="$emit('regenerate')" title="重新生成">
+        <button v-if="role === 'assistant'" class="ghost-btn success" @click="$emit('regenerate')" title="重新生成">
           <span v-html="icons.regenerate" />
         </button>
-        <button v-if="role === 'assistant'" class="btn-copy" @click="copyContent" title="复制">
+        <button v-if="role === 'assistant'" class="ghost-btn accent" @click="copyContent" title="复制">
           <span v-html="icons.copy" />
         </button>
-        <button v-if="deletable" class="btn-delete-msg" @click="$emit('delete')" title="删除">
+        <button v-if="deletable" class="ghost-btn danger" @click="$emit('delete')" title="删除">
           <span v-html="icons.trash" />
         </button>
       </div>
@@ -140,32 +140,6 @@ function copyContent() {
   color: var(--text-tertiary);
 }
 
-.btn-regenerate,
-.btn-copy,
-.btn-delete-msg {
-  background: none;
-  border: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.15s;
-  display: flex;
-  align-items: center;
-}
 
-.btn-regenerate:hover {
-  color: var(--success-color);
-  background: var(--success-bg);
-}
 
-.btn-copy:hover {
-  color: var(--accent-primary);
-  background: var(--accent-primary-light);
-}
-
-.btn-delete-msg:hover {
-  color: var(--danger-color);
-  background: var(--danger-bg);
-}
 </style>
diff --git a/frontend/src/components/MessageInput.vue b/frontend/src/components/MessageInput.vue
index b2a3bee..9e90e3d 100644
--- a/frontend/src/components/MessageInput.vue
+++ b/frontend/src/components/MessageInput.vue
@@ -5,7 +5,7 @@
       <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
         <span class="file-icon">{{ getFileIcon(file.extension) }}</span>
         <span class="file-name">{{ file.name }}</span>
-        <button class="btn-remove-file" @click="removeFile(index)" title="移除">
+        <button class="ghost-btn danger btn-remove-file" @click="removeFile(index)" title="移除">
           <span v-html="icons.close" />
         </button>
       </div>
@@ -213,25 +213,11 @@ defineExpose({ focus })
 }
 
 .btn-remove-file {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 18px;
   height: 18px;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.15s;
   padding: 0;
 }
 
-.btn-remove-file:hover {
-  background: var(--danger-bg);
-  color: var(--danger-color);
-}
-
 .input-container {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/ModalDialog.vue b/frontend/src/components/ModalDialog.vue
index 3b431df..3ce52cc 100644
--- a/frontend/src/components/ModalDialog.vue
+++ b/frontend/src/components/ModalDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="modal-fade">
+    <Transition name="fade">
       <div v-if="state.visible" class="modal-overlay" @click.self="onCancel" @keydown.escape="onCancel">
         <div class="modal-dialog" role="dialog" :aria-modal="true">
           <h3 class="modal-title">{{ state.title }}</h3>
@@ -128,13 +128,6 @@ watch(() => state.visible, (v) => {
   opacity: 0.85;
 }
 
-/* Transitions */
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.2s;
-}
-.modal-fade-enter-from,
-.modal-fade-leave-to {
-  opacity: 0;
-}
+
+
 </style>
diff --git a/frontend/src/components/SettingsPanel.vue b/frontend/src/components/SettingsPanel.vue
index 3d22625..dda6268 100644
--- a/frontend/src/components/SettingsPanel.vue
+++ b/frontend/src/components/SettingsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="settings-panel">
-    <div class="settings-header">
-      <div class="settings-title">
+    <div class="panel-header">
+      <div class="panel-title">
         <span v-html="icons.settings" />
         <h4>会话设置</h4>
       </div>
@@ -215,37 +215,7 @@ onMounted(loadModels)
   flex-direction: column;
 }
 
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.settings-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-primary);
-}
-
-.settings-title svg {
-  color: var(--text-tertiary);
-}
-
-.settings-title h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-/* tab styles now in global.css */
+/* panel-header, panel-title, header-actions now in global.css */
 
 .settings-body {
   flex: 1;
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 61d5f85..9a31bef 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -15,21 +15,21 @@
           <span class="project-name">{{ group.name }}</span>
           <span class="conv-count">{{ group.conversations.length }}</span>
           <button
-            class="btn-group-action"
+            class="ghost-btn"
             title="新建对话"
             @click.stop="$emit('createInProject', { id: group.id, name: group.name })"
           >
             <span v-html="icons.plus" />
           </button>
           <button
-            class="btn-group-action"
+            class="ghost-btn"
             title="浏览文件"
             @click.stop="$emit('browseProject', { id: group.id, name: group.name })"
           >
             <span v-html="icons.folder" />
           </button>
           <button
-            class="btn-group-action btn-delete-project"
+            class="ghost-btn danger btn-delete-project"
             title="删除项目"
             @click.stop="$emit('deleteProject', { id: group.id, name: group.name })"
           >
@@ -50,7 +50,7 @@
                 <span>{{ conv.message_count || 0 }} 条消息 · {{ formatTime(conv.updated_at) }}</span>
               </div>
             </div>
-            <button class="btn-delete" @click.stop="$emit('delete', conv.id)" title="删除">
+            <button class="ghost-btn danger btn-delete" @click.stop="$emit('delete', conv.id)" title="删除">
               <span v-html="icons.trash" />
             </button>
           </div>
@@ -64,7 +64,7 @@
           <span class="standalone-icon" v-html="icons.chat" />
           <span class="conv-count">{{ groupedData.standalone.length }}</span>
           <button
-            class="btn-group-action"
+            class="ghost-btn"
             title="新建对话"
             @click.stop="$emit('createInProject', { id: null, name: null })"
           >
@@ -87,7 +87,7 @@
                 <span>{{ conv.message_count || 0 }} 条消息 · {{ formatTime(conv.updated_at) }}</span>
               </div>
             </div>
-            <button class="btn-delete" @click.stop="$emit('delete', conv.id)" title="删除">
+            <button class="ghost-btn danger btn-delete" @click.stop="$emit('delete', conv.id)" title="删除">
               <span v-html="icons.trash" />
             </button>
           </div>
@@ -229,10 +229,6 @@ function onScroll(e) {
   padding: 0 16px 16px;
 }
 
-.conversation-list::-webkit-scrollbar {
-  width: 4px;
-}
-
 .conversation-list::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb-sidebar);
   border-radius: 2px;
@@ -297,16 +293,8 @@ function onScroll(e) {
 }
 
 .btn-group-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
-  border: none;
-  background: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: 4px;
   flex-shrink: 0;
   transition: all 0.15s;
   opacity: 0.5;
@@ -316,15 +304,10 @@ function onScroll(e) {
   opacity: 1;
 }
 
-.btn-group-action:hover {
-  color: var(--accent-primary);
-  background: var(--accent-primary-light);
-  opacity: 1;
-}
-
 .btn-delete-project:hover {
   color: var(--danger-color);
   background: var(--danger-bg);
+  opacity: 1;
 }
 
 .conversation-item {
@@ -369,24 +352,12 @@ function onScroll(e) {
 
 .btn-delete {
   opacity: 0;
-  background: none;
-  border: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.15s;
-  flex-shrink: 0;
 }
 
 .conversation-item:hover .btn-delete {
   opacity: 1;
 }
 
-.btn-delete:hover {
-  color: var(--danger-color);
-  background: var(--danger-bg);
-}
 
 .loading-more,
 .empty-hint {
@@ -407,16 +378,13 @@ function onScroll(e) {
 }
 
 .btn-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 36px;
   height: 36px;
+  border-radius: 8px;
   border: none;
   background: none;
   color: var(--text-tertiary);
   cursor: pointer;
-  border-radius: 8px;
   transition: all 0.15s;
 }
 
diff --git a/frontend/src/components/StatsPanel.vue b/frontend/src/components/StatsPanel.vue
index 8988cba..593b4f7 100644
--- a/frontend/src/components/StatsPanel.vue
+++ b/frontend/src/components/StatsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="stats-panel">
-    <div class="stats-header">
-      <div class="stats-title">
+    <div class="panel-header">
+      <div class="panel-title">
         <span v-html="icons.stats" />
         <h4>使用统计</h4>
       </div>
@@ -324,37 +324,7 @@ onMounted(loadStats)
   padding: 0;
 }
 
-.stats-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.stats-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-primary);
-}
-
-.stats-title svg {
-  color: var(--text-tertiary);
-}
-
-.stats-title h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-/* tab styles now in global.css */
+/* panel-header, panel-title, header-actions now in global.css */
 
 .stats-loading {
   display: flex;
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index c933622..42f35c2 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -751,5 +751,101 @@ input[type="range"]::-moz-range-thumb {
   color: var(--danger-color);
 }
 
+/* ============ Ghost Button (base for small icon buttons) ============ */
+.ghost-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.15s;
+}
+
+.ghost-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.ghost-btn.danger:hover {
+  background: var(--danger-bg);
+  color: var(--danger-color);
+}
+
+.ghost-btn.accent:hover {
+  background: var(--accent-primary-light);
+  color: var(--accent-primary);
+}
+
+.ghost-btn.success:hover {
+  background: var(--success-bg);
+  color: var(--success-color);
+}
+
+/* ============ Empty / Loading State ============ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 12px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+
+/* ============ Thin Scrollbar (4px) ============ */
+.scrollbar-thin {
+  overflow-y: auto;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 2px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ============ Panel Header (title + actions) ============ */
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary);
+}
+
+.panel-title svg {
+  color: var(--text-tertiary);
+}
+
+.panel-title h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+