From 6741920446526b2be6b9478b953808b38ed0aa34 Mon Sep 17 00:00:00 2001 From: MIST <52695829+MISTLXC@users.noreply.github.com> Date: Fri, 3 Jul 2026 10:43:44 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=A4=8D=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E7=9B=AE=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=B1=82=E7=BA=A7=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E6=8C=89=E9=92=AE=E6=96=87=E5=AD=97=E6=BA=A2=E5=87=BA?= =?UTF-8?q?=E4=B8=8E=E6=AF=94=E4=BE=8B=E5=A4=B1=E8=B0=83=20(#476)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 问题 「设置 → 工具目录」页面中，核心工具 / 扩展工具表格操作列的「→ 扩展」「← 核心」文字按钮渲染异常：文字溢出按钮边界，与同行的编辑、删除图标按钮高度不一致，整体比例失调。 ### 原因 该按钮同时挂载 .row-btn （30×30px 图标按钮）和 .tier-btn （文字按钮）两个 CSS 类。 .tier-btn 仅重置了 width: auto ，但未重置 height: 30px ，且缺少 line-height 和 hover 背景色，导致 12px 文字被压在 30px 矮盒内无法正常居中渲染。 ### 修复 mateclaw-ui/src/views/Tools.vue — .tier-btn 样式： 属性 修复前 修复后 height 继承 30px （隐式，无声明） 30px （显式，与编辑/删除按钮统一） line-height 无 30px （文字垂直居中） hover background 无 var(--mc-bg-sunken) （hover 有视觉反馈） ### 影响范围 - 仅影响 Tools.vue 中 .tier-btn 的渲染样式 - 不涉及逻辑、API、后端代码 - 无需跑测试 --- mateclaw-ui/src/views/Tools.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mateclaw-ui/src/views/Tools.vue b/mateclaw-ui/src/views/Tools.vue index d9cd30fa..c59d457a 100644 --- a/mateclaw-ui/src/views/Tools.vue +++ b/mateclaw-ui/src/views/Tools.vue @@ -274,8 +274,8 @@ async function toggleTool(tool: Tool) { .tools-section-title { font-size: 15px; font-weight: 700; color: var(--mc-text-primary); } .tools-section-count { font-size: 12px; font-weight: 600; color: var(--mc-text-secondary); background: var(--mc-bg-muted); padding: 2px 8px; border-radius: 10px; } .tools-section-hint { font-size: 12px; color: var(--mc-text-tertiary); } -.tier-btn { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--mc-text-secondary); } -.tier-btn:hover { color: var(--mc-primary); border-color: var(--mc-primary); } +.tier-btn { width: auto; height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; line-height: 30px; white-space: nowrap; color: var(--mc-text-secondary); } +.tier-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); border-color: var(--mc-primary); } .tier-locked { display: inline-flex; align-items: center; padding: 0 8px; font-size: 11px; color: var(--mc-text-tertiary); cursor: help; } .btn-primary { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); } .btn-primary:hover { background: var(--mc-primary-hover); }