feat(ui): visual polish — SVG nav icons, empty states, badges, cards (v1.15)

docs/user-stories.md

@@ -5,6 +5,8 @@
 > **v1.13（2026-08-17）· UI 演化约束：尽量少用弹窗 / modal.** 新增「UI 约定」章节（§1.1）：优先行内（inline）交互（行内展开表单 / 可折叠面板 / 就地编辑），弹窗仅限真正需要聚焦 / 阻塞的场景（如删除确认），**禁止弹窗嵌套**；存量 modal（充值 topup-modal、申请加额 raise-modal、模型消费 chat-modal）标记改造优先级，后续迭代分批改为行内形态。部门添加/编辑已由弹层改为**行内展开表单**（`#dept-form-card`）。
 >
 > **v1.14（2026-08-17）· 充值 / 加额改行内（P1 完成）.** 按 UI 美化与 UE 优化 rant（`2026-08-17T15:50:05`）「少弹窗改造（优先）」：充值（原 topup-modal）与申请加额（原 raise-modal）改为钱包页**行内展开卡片**（`#topup-card` / `#raise-card`，点按钮原地展开、两卡互斥、取消即收起），替代弹层；P1 存量 modal 清零，仅剩 P2 模型消费聊天（chat-modal）。
+>
+> **v1.15（2026-08-17）· A 视觉美化（rant `2026-08-17T15:50:05`）.** 侧边栏导航 emoji → **统一内联 SVG 线性图标**（同尺寸、currentColor、hover/active 态）；卡片 hover 微交互（阴影/边框轻提升）；表格斑马纹 + 行 hover 高亮；**空状态组件**（图标 + 文案 + 行动按钮：市场清除筛选 / 共享上架新 key / 设置生成 key / 部门清除搜索）；状态徽章加**语义色点**（ok/warn/danger/dim 一眼可辨）；响应式加固（窄屏侧边栏折叠配合 SVG 图标、表格横向滚动）。
 > **v1.12（2026-08-17）· 移除「组织设置 Organization settings」表单.** 组织管理页只保留部门列表（部门 CRUD + 每月点数分配），删除底部「组织设置」表单（组织名称 / 默认成员配额 / 开关）。「关闭外部注册」属**部署配置项，不在 UI 中设置**（US-16 标注）；「成员自助申请加额需管理员审批」开关移除后，申请加额流程**默认需审批**（US-20 说明）。
 > **v1.11（2026-08-17）· 管理视图移除独立「Key 池」管理，统一走「上架 key」.** 管理员与普通用户一样通过**共享管理页「上架新 key」**（选厂商 → Plan → 模型、填 key、声明额度、可用时间段）配置上游 key——企业场景下管理员上架、员工消费，本质上就是 key 池；不再有独立的管理员 Key 池界面。移除 Admin「Key 池」tab（成员管理 / 用量报表 / 组织管理 / 平台运营保留）。「Key 池」保留为**数据层概念**（平台持有的上游 key 集合，见 docs/architecture.md 4.2）。更新 US-12 / 企业流程 / 对齐表。
 > **v1.10（2026-08-17）· 上架表单"可用时间段"结构化.** 上架 key 的可用时间段改为**正式字段**（星期多选 + 起止时间，可多选；留空 = 全天不限），后端可解析生效；**备注只作纯文本**，不承载任何逻辑。共享列表展示可用时间段（如「周一~周五 09:00-18:00」），未设置显示「全天」。更新 US-8 / US-9 AC。

ui/README.md

@@ -61,12 +61,19 @@ python3 -m http.server 8000 --directory ui
 ```
 ui/
 ├── index.html        # 入口（登录页 + 应用外壳 + 全部视图）
-├── css/style.css     # 设计系统（深色主题 · 强调色 #4ecdc4 · 响应式预留）
+├── css/style.css     # 设计系统（深色主题 · 强调色 #4ecdc4 · 响应式预留 · v1.15 视觉美化）
 ├── js/data.js        # 内嵌 mock 数据（模型价格、交易、共享、成员等）
-├── js/app.js         # 交互逻辑（导航、筛选、表单、分页、Toast）
+├── js/app.js         # 交互逻辑（导航、筛选、表单、分页、Toast；v1.15 内联 SVG 图标 + 空状态组件）
 └── README.md         # 本文件
 ```
 
+## 视觉约定（v1.15，rant 2026-08-17T15:50:05 A 视觉美化）
+
+- 侧边栏导航图标用**统一内联 SVG**（线性风格、同尺寸、currentColor，禁用 emoji 散落）；
+- 卡片 hover 阴影/边框轻提升；表格**斑马纹 + 行 hover 高亮**；
+- 空状态统一 `empty-state` 组件（图标 + 文案 + 行动按钮），禁用裸文本占位；
+- 状态徽章统一带**语义色点**（ok/warn/danger/dim），配色与 `badge.*` 类一致。
+
 ## 数据说明
 
 - 点数规则与机制细节见 `docs/user-stories.md`（v1.8：机制说明不再进入面向用户的界面文案）；UI 只呈现结果（余额数字、模型价格点数、交易金额/类型/状态、可用/繁忙）

ui/css/style.css

@@ -111,9 +111,13 @@ select.input option { background: var(--bg-card); }
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 20px;
+  transition: border-color .18s ease, box-shadow .18s ease;
 }
 .card h3 { font-size: 15px; margin-bottom: 14px; color: var(--text); }
 
+/* 卡片 hover 微交互（rant 15:50:05 A.3：阴影/边框轻提升） */
+.card:hover { border-color: #3a4a63; box-shadow: 0 12px 30px rgba(0,0,0,.38); }
+
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
@@ -161,16 +165,26 @@ select.input option { background: var(--bg-card); }
   white-space: nowrap;
 }
 .table td { padding: 10px 12px; border-bottom: 1px solid rgba(42,51,66,.5); white-space: nowrap; }
+/* 斑马纹（rant 15:50:05 A.3：行 hover 高亮保留，hover 覆盖斑马纹） */
+.table tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
 .table tbody tr:hover { background: var(--bg-hover); }
 
 .badge {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: 2px 10px;
   border-radius: 999px;
   font-size: 12px;
   border: 1px solid var(--border);
   color: var(--text-dim);
 }
+/* 语义色点（rant 15:50:05 A.5：状态徽章配色统一、一眼可辨） */
+.badge::before {
+  content: "";
+  width: 6px; height: 6px; border-radius: 50%;
+  background: currentColor; opacity: .85; flex-shrink: 0;
+}
 .badge.ok { color: var(--ok); border-color: rgba(62,207,142,.4); background: rgba(62,207,142,.08); }
 .badge.warn { color: var(--warn); border-color: rgba(229,180,91,.4); background: rgba(229,180,91,.08); }
 .badge.danger { color: var(--danger); border-color: rgba(229,102,106,.4); background: rgba(229,102,106,.08); }
@@ -291,6 +305,21 @@ select.input option { background: var(--bg-card); }
 }
 .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #7ee8b8); border-radius: 999px; }
 
+/* 空状态（rant 15:50:05 A.4：图标 + 文案 + 可选行动按钮） */
+.empty-state {
+  display: flex; flex-direction: column; align-items: center;
+  gap: 8px; padding: 40px 16px; text-align: center;
+  color: var(--text-dim);
+}
+.empty-state .es-ico { width: 40px; height: 40px; color: var(--text-mute); opacity: .75; }
+.empty-state p { font-size: 13px; }
+.empty-state p.muted { font-size: 12px; }
+.empty-state .btn { margin-top: 8px; }
+.empty-state.compact { padding: 16px 8px; }
+.empty-state.compact .es-ico { width: 26px; height: 26px; }
+.empty-cell { padding: 0 !important; }
+.empty-cell .empty-state { padding: 36px 16px; }
+
 /* ---------- 登录页 ---------- */
 
 .login-view {
@@ -357,7 +386,8 @@ select.input option { background: var(--bg-card); }
   color: var(--text-dim); cursor: pointer; font-size: 13.5px;
   border: none; background: transparent; text-align: left; width: 100%;
 }
-.nav-item .ico { width: 18px; text-align: center; font-size: 15px; }
+.nav-item .ico { width: 18px; text-align: center; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
+.nav-item .ico svg { width: 18px; height: 18px; display: block; }
 .nav-tag {
   margin-left: auto;
   font-size: 10px;