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

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: 'run-script', label: '运行脚本', icon: '▶️', type: 'success', variant: 'solid', loading: executing, onClick: executeScript }
+      {
+        key: 'save-script',
+        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: 'upload-config', label: '上传配置', icon: '📤', onClick: () => configInput.value?.click() }
+      { key: 'download-config', label: '下载配置', icon: CloudDownloadOutline, onClick: downloadConfig },
+      { key: 'upload-config', label: '上传配置', icon: CloudUploadOutline, onClick: () => configInput.value?.click() }
     ]
   });
   void loadConfig();