From 55d898cd429aa4393e6ace9609bc0eebd6201fc8 Mon Sep 17 00:00:00 2001 From: Sakurasan <26715255+Sakurasan@users.noreply.github.com> Date: Tue, 29 Sep 2026 00:25:18 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E6=A0=8F=E6=94=B9=20xLog=20=E9=A3=8E=E6=A0=BC=EF=BC=9ASVG=20?= =?UTF-8?q?=E7=BA=BF=E6=80=A7=E5=9B=BE=E6=A0=87=E6=8C=89=E9=92=AE=EF=BC=88?= =?UTF-8?q?=E5=8A=A0=E7=B2=97/=E6=96=9C=E4=BD=93/=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E7=BA=BF/=E4=BB=A3=E7=A0=81/=E6=A0=87=E9=A2=98/=E5=BC=95?= =?UTF-8?q?=E7=94=A8/=E5=88=97=E8=A1=A8/=E4=BB=BB=E5=8A=A1/=E5=88=86?= =?UTF-8?q?=E9=9A=94=E7=BA=BF/=E9=93=BE=E6=8E=A5/=E5=9B=BE=E7=89=87/?= =?UTF-8?q?=E6=97=A5=E6=9C=9F=EF=BC=89=EF=BC=8C32px=20=E5=9C=86=E8=A7=92?= =?UTF-8?q?=E3=80=81=E6=82=AC=E5=81=9C=E5=87=BA=E5=BA=95=E6=A1=86=EF=BC=8C?= =?UTF-8?q?=E6=9B=BF=E4=BB=A3=E6=96=87=E6=9C=AC=20chip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/admin/EditorView.vue | 50 +++++++++++++++++++++---------- frontend/src/styles.css | 18 ++++++----- 2 files changed, 46 insertions(+), 22 deletions(-) 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;