diff --git a/frontend/src/admin/EditorView.vue b/frontend/src/admin/EditorView.vue index 536ca93..14e4939 100644 --- a/frontend/src/admin/EditorView.vue +++ b/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: 'i', label: 'I', title: '斜体', run: tbItalic, italic: true, show: mode.value === 'md' }, - { key: 's', label: 'S', title: '删除线', run: tbStrike, show: mode.value === 'md' }, - { key: 'code', label: '<>', title: '行内代码', run: tbCode, mono: true, show: mode.value === 'md' }, - { key: 'cb', label: '```', title: '代码块', run: tbCodeBlock, mono: true, show: mode.value === 'md' } + { key: 'b', title: '加粗', run: tbBold, show: mode.value === 'md', + icon: 'M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z', fill: true }, + { key: 'i', title: '斜体', run: tbItalic, show: mode.value === 'md', + icon: 'M19 4h-9M14 20H5M15 4L9 20' }, + { 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: 'ul', label: '•', title: '无序列表', run: tbUl, show: mode.value === 'md' }, - { key: 'ol', label: '1.', title: '有序列表', run: tbOl, show: mode.value === 'md' }, - { key: 'task', label: '☐', title: '任务列表', run: tbTask, show: mode.value === 'md' }, - { key: 'hr', label: '—', title: '分隔线', run: tbHr, show: mode.value === 'md' } + { key: 'q', title: '引用', run: tbQuote, 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: 'ul', title: '无序列表', run: tbUl, show: mode.value === 'md', + icon: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01' }, + { 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: 'img', label: '🖼', title: '图片', run: openImage, show: mode.value === 'md' }, - { key: 'date', label: '📅', title: '插入今天日期', run: insertDate, show: mode.value === 'md' } + { key: 'link', title: '链接', run: openLink, 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: '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 }} + > + + {{ it.label }} + diff --git a/frontend/src/styles.css b/frontend/src/styles.css index e0b79d6..1bf8309 100644 --- a/frontend/src/styles.css +++ b/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; - height: 28px; +/* xLog 式工具栏按钮:方形圆角、线性图标、悬停出底框 */ +.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.mono {font-family: var(--mono); - font-size: 11.5px;} +.tb-btn svg {width: 17px; + height: 17px;} +.tb-text {font-family: var(--mono); + font-size: 11.5px; + font-weight: 700; + color: inherit;} .tb-popover {display: flex; gap: 6px; padding: 8px;