编辑器工具栏改 xLog 风格：SVG 线性图标按钮（加粗/斜体/删除线/代码/标题/引用/列表/任务/分隔线/链接/图片/日期），32px 圆角、悬停出底框，替代文本 chip

frontend/src/admin/EditorView.vue

@@ -807,11 +807,16 @@ const tbGroups = computed(() => [
   {
     label: '格式',
     items: [
-      { key: 'b', label: 'B', title: '加粗', run: tbBold, show: mode.value === 'md' },
+      { key: 'b', title: '加粗', run: tbBold, show: mode.value === 'md',
-      { key: 'i', label: 'I', title: '斜体', run: tbItalic, italic: true, show: mode.value === 'md' },
+        icon: 'M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z', fill: true },
-      { key: 's', label: 'S', title: '删除线', run: tbStrike, show: mode.value === 'md' },
+      { key: 'i', title: '斜体', run: tbItalic, show: mode.value === 'md',
-      { key: 'code', label: '<>', title: '行内代码', run: tbCode, mono: true, show: mode.value === 'md' },
+        icon: 'M19 4h-9M14 20H5M15 4L9 20' },
-      { key: 'cb', label: '```', title: '代码块', run: tbCodeBlock, mono: true, show: mode.value === 'md' }
+      { key: 's', title: '删除线', run: tbStrike, show: mode.value === 'md',
+        icon: 'M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16' },
+      { key: 'code', title: '行内代码', run: tbCode, show: mode.value === 'md',
+        icon: 'M16 18l6-6-6-6M8 6l-6 6 6 6' },
+      { key: 'cb', title: '代码块', run: tbCodeBlock, show: mode.value === 'md',
+        icon: 'M9 10l-2 2.5L9 15M15 10l2 2.5-2 2.5M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z' }
     ]
   },
   {
@@ -819,19 +824,27 @@ const tbGroups = computed(() => [
     items: [
       { key: 'h2', label: 'H2', title: '二级标题', run: tbH2, show: mode.value === 'md' },
       { key: 'h3', label: 'H3', title: '三级标题', run: tbH3, show: mode.value === 'md' },
-      { key: 'q', label: '"', title: '引用', run: tbQuote, show: mode.value === 'md' },
+      { key: 'q', title: '引用', run: tbQuote, show: mode.value === 'md',
-      { key: 'ul', label: '•', title: '无序列表', run: tbUl, show: mode.value === 'md' },
+        icon: 'M3 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2H4c-1.25 0-2 .75-2 1.97V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .01-1 1.03V20c0 1 0 1 1 1zM15 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2h-4c-1.25 0-2 .75-2 1.97V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .01-1 1.03V20c0 1 0 1 1 1z', fill: true },
-      { key: 'ol', label: '1.', title: '有序列表', run: tbOl, show: mode.value === 'md' },
+      { key: 'ul', title: '无序列表', run: tbUl, show: mode.value === 'md',
-      { key: 'task', label: '☐', title: '任务列表', run: tbTask, show: mode.value === 'md' },
+        icon: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01' },
-      { key: 'hr', label: '—', title: '分隔线', run: tbHr, show: mode.value === 'md' }
+      { key: 'ol', title: '有序列表', run: tbOl, show: mode.value === 'md',
+        icon: 'M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1' },
+      { key: 'task', title: '任务列表', run: tbTask, show: mode.value === 'md',
+        icon: 'M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11' },
+      { key: 'hr', title: '分隔线', run: tbHr, show: mode.value === 'md',
+        icon: 'M5 12h14' }
     ]
   },
   {
     label: '插入',
     items: [
-      { key: 'link', label: '🔗', title: '链接', run: openLink, show: mode.value === 'md' },
+      { key: 'link', title: '链接', run: openLink, show: mode.value === 'md',
-      { key: 'img', label: '🖼', title: '图片', run: openImage, show: mode.value === 'md' },
+        icon: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' },
-      { key: 'date', label: '📅', title: '插入今天日期', run: insertDate, show: mode.value === 'md' }
+      { key: 'img', title: '图片', run: openImage, show: mode.value === 'md',
+        icon: 'M21 15l-5-5L5 21M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM8.5 8.5h.01' },
+      { key: 'date', title: '插入今天日期', run: insertDate, show: mode.value === 'md',
+        icon: 'M16 2v4M8 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z' }
     ]
   }
 ])
@@ -905,11 +918,18 @@ const tbGroups = computed(() => [
               :key="it.key"
               type="button"
               class="tb-btn"
-              :class="{ italic: it.italic, mono: it.mono }"
               :title="it.title"
               :aria-label="it.title"
               @click="it.run()"
-            >{{ it.label }}</button>
+            >
+              <svg v-if="it.icon" viewBox="0 0 24 24" aria-hidden="true"
+                :fill="it.fill ? 'currentColor' : 'none'"
+                :stroke="it.fill ? 'none' : 'currentColor'" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path :d="it.icon" />
+              </svg>
+              <span v-else class="tb-text">{{ it.label }}</span>
+            </button>
           </div>
         </div>
 

frontend/src/styles.css

@@ -888,12 +888,13 @@ html.topbar-hidden {--topbar-h: 0px;}
   color: var(--admin-muted);
   margin-right: 4px;
   text-transform: uppercase;}
-.tb-btn {width: 28px;
+/* xLog 式工具栏按钮：方形圆角、线性图标、悬停出底框 */
-  height: 28px;
+.tb-btn {width: 32px;
+  height: 32px;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: 6px;
   background: transparent;
-  color: var(--admin-ink-soft);
+  color: var(--admin-muted);
   cursor: pointer;
   font-size: 12.5px;
   display: inline-flex;
@@ -906,9 +907,12 @@ html.topbar-hidden {--topbar-h: 0px;}
   border-color: var(--admin-line);
   color: var(--admin-ink);}
 }
-.tb-btn.italic {font-style: italic;}
+.tb-btn svg {width: 17px;
-.tb-btn.mono {font-family: var(--mono);
+  height: 17px;}
-  font-size: 11.5px;}
+.tb-text {font-family: var(--mono);
+  font-size: 11.5px;
+  font-weight: 700;
+  color: inherit;}
 .tb-popover {display: flex;
   gap: 6px;
   padding: 8px;