fix: 优化新版前端图标和侧边栏选中态

docs/project_context.md

@@ -1,5 +1,12 @@
 # 项目上下文记录
 
+## 2026-05-15：优化新版前端图标和侧边栏选中态
+
+- `frontend/src/composables/pageHeader.ts` 的页头动作图标从 emoji 字符串改为 Vue 组件，页面按钮统一传入 `@vicons/ionicons5` 图标组件，构建后随前端资源本地打包，适合内网运行。
+- `AppShell.vue` 的折叠侧边栏按钮、主题切换按钮和各页面页头动作已移除 emoji 图标；当前前端源码中仅保留主品牌图标 `📊`。
+- `styles.css` 优化侧边栏菜单选中态：展开态使用浅色背景、品牌色描边和左侧短标记，折叠态收敛为居中的 40px 图标块，避免选中背景过宽。
+- 本次只执行 `npm run build` 做构建验证，未按用户要求启动浏览器或 headless Chrome。
+
 ## 2026-05-15：修复新版前端夜间模式组件颜色
 
 - 新增 `frontend/src/composables/theme.ts` 作为前端共享主题状态，统一读写 `localStorage.theme` 并同步 `document.documentElement[data-theme]`。

frontend/src/AppShell.vue

@@ -30,7 +30,7 @@
     <n-layout>
       <n-layout-header bordered class="topbar page-header">
         <button class="sidebar-toggle" type="button" title="展开/收起侧边栏" @click="toggleSidebar">
-          ☰
+          <n-icon><MenuOutline /></n-icon>
         </button>
         <div class="page-header-content">
           <h1>{{ currentTitle }}</h1>
@@ -53,14 +53,14 @@
               @click="runHeaderAction(action)"
             >
               <template v-if="actionIcon(action)" #icon>
-                <span class="button-emoji">{{ actionIcon(action) }}</span>
+                <n-icon><component :is="actionIcon(action)" /></n-icon>
               </template>
               {{ actionLabel(action) }}
             </n-button>
           </template>
 
           <button class="theme-toggle" type="button" title="切换主题" @click="toggleTheme">
-            <span>🌓</span>
+            <n-icon><MoonOutline /></n-icon>
           </button>
           <button class="restart-btn" type="button" title="重启服务" @click="restartService">
             <n-icon><PowerOutline /></n-icon>
@@ -89,6 +89,8 @@ import {
   ConstructOutline,
   FileTrayFullOutline,
   LogOutOutline,
+  MenuOutline,
+  MoonOutline,
   PowerOutline,
   ServerOutline,
   SettingsOutline
@@ -203,7 +205,7 @@ function actionLabel(action: PageHeaderAction) {
 }
 
 function actionIcon(action: PageHeaderAction) {
-  return resolveHeaderValue(action.icon, '');
+  return resolveHeaderValue(action.icon) ?? null;
 }
 
 function actionTitle(action: PageHeaderAction) {

frontend/src/components/DatabasePanel.vue

@@ -122,6 +122,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useDialog, useMessage } from 'naive-ui';
 import type { DataTableColumns } from 'naive-ui';
+import { TrashOutline } from '@vicons/ionicons5';
 
 import { apiGet, apiPost, download } from '../api/client';
 import type { ApiMessage, DatabaseInfo, TableData, TableInfo } from '../types';
@@ -165,7 +166,7 @@ onMounted(() => {
       {
         key: 'drop-all-tables',
         label: '删除全部表',
-        icon: '🗑️',
+        icon: TrashOutline,
         type: 'error',
         variant: 'solid',
         disabled: computed(() => tables.value.length === 0),

frontend/src/components/HistoryPanel.vue

@@ -3,7 +3,7 @@
     <n-spin v-if="loading" class="page-loading" />
 
     <div v-else-if="records.length === 0" class="empty-state history-empty-state">
-      <span class="empty-icon">📭</span>
+      <n-icon class="empty-icon"><FileTrayOutline /></n-icon>
       <p>暂无处理记录</p>
     </div>
 
@@ -53,6 +53,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useDialog, useMessage } from 'naive-ui';
+import { FileTrayOutline, RefreshOutline, TrashOutline } from '@vicons/ionicons5';
 
 import { apiGet, apiPost } from '../api/client';
 import type { CacheSize, HistoryDetail, HistoryRecord } from '../types';
@@ -73,11 +74,11 @@ const hasRecords = computed(() => records.value.length > 0);
 onMounted(() => {
   setPageHeader({
     actions: [
-      { key: 'refresh-history', label: '刷新', icon: '🔄', loading, onClick: loadHistory },
+      { key: 'refresh-history', label: '刷新', icon: RefreshOutline, loading, onClick: loadHistory },
       {
         key: 'clear-history',
         label: '清空历史',
-        icon: '🗑️',
+        icon: TrashOutline,
         type: 'error',
         variant: 'solid',
         disabled: computed(() => !hasRecords.value),

frontend/src/components/ScriptPanel.vue

@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
 import { useMessage } from 'naive-ui';
+import { BrushOutline, PlayOutline, SaveOutline } from '@vicons/ionicons5';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
@@ -96,9 +97,25 @@ onMounted(async () => {
     subtitle: computed(() => scriptPath.value || 'ReportScript.sql'),
     actions: [
       { key: 'script-modified', kind: 'text', label: modifiedText },
-      { key: 'save-script', label: computed(() => (isModified.value ? '保存 *' : '保存')), icon: '💾', type: 'primary', variant: 'solid', loading: saving, onClick: saveScript },
+      {
-      { key: 'format-script', label: '格式化', icon: '✨', onClick: formatScript },
+        key: 'save-script',
-      { key: 'run-script', label: '运行脚本', icon: '▶️', type: 'success', variant: 'solid', loading: executing, onClick: executeScript }
+        label: computed(() => (isModified.value ? '保存 *' : '保存')),
+        icon: SaveOutline,
+        type: 'primary',
+        variant: 'solid',
+        loading: saving,
+        onClick: saveScript
+      },
+      { key: 'format-script', label: '格式化', icon: BrushOutline, onClick: formatScript },
+      {
+        key: 'run-script',
+        label: '运行脚本',
+        icon: PlayOutline,
+        type: 'success',
+        variant: 'solid',
+        loading: executing,
+        onClick: executeScript
+      }
     ]
   });
 

frontend/src/components/SettingsPanel.vue

@@ -136,7 +136,9 @@
             class="field-remove-button"
             @click="removeFieldMapping(index)"
           >
-            ×
+            <template #icon>
+              <n-icon><CloseOutline /></n-icon>
+            </template>
           </n-button>
 
           <div class="field-mapping-header">
@@ -188,6 +190,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { useMessage, type SelectOption } from 'naive-ui';
+import { CloseOutline, CloudDownloadOutline, CloudUploadOutline } from '@vicons/ionicons5';
 
 import { apiGet, apiPost, downloadGet, upload } from '../api/client';
 import type { ApiMessage, AppConfig } from '../types';
@@ -251,8 +254,8 @@ const visibleFieldMappings = computed(() => {
 onMounted(() => {
   setPageHeader({
     actions: [
-      { key: 'download-config', label: '下载配置', icon: '📥', onClick: downloadConfig },
+      { key: 'download-config', label: '下载配置', icon: CloudDownloadOutline, onClick: downloadConfig },
-      { key: 'upload-config', label: '上传配置', icon: '📤', onClick: () => configInput.value?.click() }
+      { key: 'upload-config', label: '上传配置', icon: CloudUploadOutline, onClick: () => configInput.value?.click() }
     ]
   });
   void loadConfig();

frontend/src/composables/pageHeader.ts

@@ -1,11 +1,11 @@
-import { shallowReactive, unref, type Ref } from 'vue';
+import { shallowReactive, unref, type Component, type Ref } from 'vue';
 
 type HeaderValue<T> = T | Ref<T> | (() => T);
 
 export interface PageHeaderAction {
   key: string;
   label: HeaderValue<string>;
-  icon?: HeaderValue<string>;
+  icon?: HeaderValue<Component>;
   title?: HeaderValue<string>;
   kind?: 'button' | 'text';
   type?: 'default' | 'primary' | 'success' | 'warning' | 'error';
@@ -33,7 +33,9 @@ export function resetPageHeader() {
   pageHeader.actions = [];
 }
 
-export function resolveHeaderValue<T>(value: HeaderValue<T> | undefined, fallback: T): T {
+export function resolveHeaderValue<T>(value: HeaderValue<T> | undefined): T | undefined;
+export function resolveHeaderValue<T>(value: HeaderValue<T> | undefined, fallback: T): T;
+export function resolveHeaderValue<T>(value: HeaderValue<T> | undefined, fallback?: T): T | undefined {
   if (typeof value === 'function') {
     return (value as () => T)();
   }

frontend/src/styles.css

@@ -196,14 +196,15 @@ select {
 
 .app-menu {
   flex: 1;
-  padding: 12px 8px;
+  padding: 16px 8px;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 .app-menu .n-menu-item-content {
+  position: relative;
   height: 40px;
-  margin-bottom: 2px;
+  margin-bottom: 4px;
   padding: 0 16px !important;
   color: var(--td-text-color-secondary);
   border-radius: var(--td-radius-default);
@@ -216,14 +217,50 @@ select {
 }
 
 .app-menu .n-menu-item-content:hover {
-  color: var(--td-text-color-primary);
+  color: var(--td-brand-color);
   background: var(--td-bg-color-container-hover);
 }
 
 .app-menu .n-menu-item-content--selected {
   color: var(--td-brand-color);
-  font-weight: 500;
+  font-weight: 600;
   background: var(--td-brand-color-light);
+  box-shadow: inset 0 0 0 1px var(--td-brand-color-focus);
+}
+
+.app-menu .n-menu-item-content--selected::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 6px;
+  width: 3px;
+  background: var(--td-brand-color);
+  border-radius: 3px;
+}
+
+.app-menu .n-menu-item-content--selected .n-menu-item-content__icon {
+  color: var(--td-brand-color);
+}
+
+.n-layout-sider--collapsed .app-menu {
+  padding: 16px 8px;
+}
+
+.n-layout-sider--collapsed .app-menu .n-menu-item-content {
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 4px;
+  padding: 0 !important;
+}
+
+.n-layout-sider--collapsed .app-menu .n-menu-item-content--selected::before {
+  display: none;
+}
+
+.n-layout-sider--collapsed .app-menu .n-menu-item-content__icon {
+  margin-right: 0 !important;
 }
 
 .sider-footer {
@@ -257,9 +294,14 @@ select {
 }
 
 .sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  width: 32px;
+  height: 32px;
   margin-top: 2px;
-  padding: 8px;
+  padding: 0;
   color: var(--td-text-color-secondary);
   font-size: 18px;
   line-height: 1;
@@ -306,19 +348,15 @@ select {
   white-space: nowrap;
 }
 
-.button-emoji {
-  display: inline-block;
-  line-height: 1;
-}
-
 .theme-toggle,
 .restart-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  width: 32px;
   height: 32px;
-  padding: 0 12px;
+  padding: 0;
   color: var(--td-text-color-primary);
   font-size: 14px;
   white-space: nowrap;
@@ -344,6 +382,8 @@ select {
   background: var(--td-error-color-light);
 }
 
+.sidebar-toggle svg,
+.theme-toggle svg,
 .restart-btn svg {
   display: block;
   width: 16px;
@@ -828,6 +868,9 @@ select {
 }
 
 .empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 42px;
   line-height: 1;
 }