diff --git a/doc/design-spec.md b/doc/design-spec.md index 582f544..7259744 100644 --- a/doc/design-spec.md +++ b/doc/design-spec.md @@ -18,7 +18,7 @@ | --- | --- | --- | --- | | 第 13 章 | 操作栏按钮(表格行内操作) | `doc/operation-buttons-spec.html` | `.btn.<变体>` + `.op-btn-cell`(24px 胶囊) | | 第 14 章 | 表格标签(状态/来源/类型) | `doc/tags-spec.html` | `.tag.<变体>`(20px 软底胶囊) | -| 第 15 章 | 表格顶部工具栏按钮(图标型 · 无背景色) | `doc/toolbar-buttons-spec.html` | `.tool-btn`(38×38 卡片底+细边框,图标即语义) | +| 第 15 章 | 表格顶部工具栏按钮(图标型 · 无背景色) | `doc/toolbar-buttons-spec.html` | `.tool-btn`(36×36 卡片底+细边框,与筛选 tabs 同高,图标即语义) | > 编码铁律:以上三类 UI 一律使用全局声明的类,禁止组件 scoped 自写样式(el-table 单元格/工具栏内元素不携带 data-v,scoped 规则会失效);同列同档、同工具栏同规格。 @@ -390,7 +390,7 @@ services: ### 15.1 通用形态 | 属性 | 值 | 说明 | | --- | --- | --- | -| 尺寸 | `width: 38px; height: 38px` | 方形按钮,与左下角筛选 tabs(36px)同档高度,工具栏左右两侧高度协调 | +| 尺寸 | `width: 36px; height: 36px` | 方形按钮,与左下角筛选 tabs(36px)**完全同高**,工具栏左右两侧齐平 | | 圆角 | `border-radius: 12px` | squircle 小圆角,区别于表格内 99px 胶囊 | | 图标 | emoji,`font-size: 18px; line-height: 1` 居中 | 纯图标、无文字;一个按钮一个 emoji;emoji 由内部 `` 承载,便于 running 时仅图标旋转 | | 底色 | **`var(--card)` + `1px solid var(--line)` 细边框** | **无彩色背景**;卡片底+细边框是唯一形态(浅色=白底暖边,暗色=暖黑底深边,对应参考截图的暗色「半透明深底+细边」) | diff --git a/doc/toolbar-buttons-spec.html b/doc/toolbar-buttons-spec.html index a6bf592..a94b2f9 100644 --- a/doc/toolbar-buttons-spec.html +++ b/doc/toolbar-buttons-spec.html @@ -34,7 +34,7 @@ .sec-desc { color:var(--dim); font-size:12.5px; margin-bottom:18px; } /* —— 统一工具栏按钮(与 base.css .tool-btn 目标一致:无背景色) —— */ .tool-btn { - width:38px; height:38px; + width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; border-radius:12px; @@ -109,14 +109,14 @@

表格顶部工具栏按钮设计规范 Icon Toolbar Buttons · 无背景色

-

基线问题:表格顶部右上角「抓榜 / 拉取 / 新增用户」按钮与左下角筛选 tabs 高度不一、文字按钮与图标按钮混用、橙渐变 / 蓝软底彩色背景参差。统一走全局 .tool-btn:图标 + tooltip + 无彩色背景,全部同构为「卡片底 + 细边框」,38×38 / 圆角 12px。

+

基线问题:表格顶部右上角「抓榜 / 拉取 / 新增用户」按钮与左下角筛选 tabs 高度不一、文字按钮与图标按钮混用、橙渐变 / 蓝软底彩色背景参差。统一走全局 .tool-btn:图标 + tooltip + 无彩色背景,全部同构为「卡片底 + 细边框」,36×36 / 圆角 12px(与筛选 tabs 同高)。

15.1 通用形态 · 规格速览
-
squircle 小圆角 · 38×38 · 无背景色 · emoji 图标 · 悬停出 tooltip
+
squircle 小圆角 · 36×36 · 无背景色 · emoji 图标 · 悬停出 tooltip
-
尺寸 38×38px与左下角筛选 tabs(36px)同档高度,两侧高度协调
+
尺寸 36×36px与左下角筛选 tabs(36px)完全同高,两侧齐平
圆角 12pxsquircle 小圆角,区别于表格内 99px 胶囊
底色 无背景色卡片底 + 1px 细边框,唯一形态,不设彩色背景变体
图标 emoji 18px纯图标无文字;由内部 span.ico 承载,便于仅图标旋转
@@ -138,7 +138,7 @@ ⚙️
-
全部同构:卡片底 + 细边框 + emoji 18px + 圆角 12px + 38×38。悬停任意按钮查看 tooltip 与 hover 效果。
+
全部同构:卡片底 + 细边框 + emoji 18px + 圆角 12px + 36×36。悬停任意按钮查看 tooltip 与 hover 效果。
@@ -233,11 +233,11 @@
✕ 彩色背景变体
🔄 抓榜📥 拉取橙渐变 / 蓝软底,与统一样式冲突
✕ 文字长按钮
➕ 新增用户占位大、与其他图标按钮高度不一
-
✕ 尺寸 / 圆角不一
🔄📥同工具栏必须 38×38 / 12px 圆角
+
✕ 尺寸 / 圆角不一
🔄📥同工具栏必须 36×36 / 12px 圆角
-

Verdaccio Mate · 表格顶部工具栏按钮设计规范 v3(无背景色 · 38×38 · 仅图标旋转) · 与 doc/design-spec.md 第 15 章配套

+

Verdaccio Mate · 表格顶部工具栏按钮设计规范 v4(无背景色 · 36×36 与tabs同高 · 仅图标旋转) · 与 doc/design-spec.md 第 15 章配套