15 KiB
15 KiB
Tenant Web 设计系统
适用范围：
web/tenant当前版本：2026-07-27
实现来源：
src/styles/main.css、src/views/Layout.vue、src/views/dashboard/DashboardPage.vue
1. 设计定位
租户端采用一套轻量、明亮、低对比度的现代控制台设计语言，核心视觉方向为：
- 冷白蓝雾背景，避免传统后台常见的纯灰或纯白大面积铺底。
- 青绿色作为品牌主色，冰青、天蓝、靛蓝、暖橙和珊瑚粉作为功能辅助色，与落地页保持一致。
- 参考 macOS Liquid Glass 的视觉特征，以半透明材质、环境色折射、镜面高光和柔和阴影表现层级。
- 卡片边界尽量通过透明度、内高光和冷色阴影区分，避免使用过深边框。
- 信息密度保持适中，使用大圆角、充足留白和紧凑的数据排版。
- 动效服务于状态反馈，不使用持续、强烈或影响阅读的装饰动画。
2. 核心视觉原则
2.1 环境先于玻璃
液态玻璃必须建立在具有细微颜色变化的环境背景上。纯白背景没有足够的信息可供玻璃层模糊和折射，因此页面背景及侧栏内部均使用低透明度环境光晕。
2.2 玻璃以中性色为主
玻璃主体保持冷白透明，青绿、青色和少量靛蓝只用于边缘折射或局部光晕，不应形成明显的彩色实心区域。
2.3 层级由材质区分
页面层级按以下顺序增强：
- 页面背景：冷白底色与极淡 Mesh Gradient。
- 大面积容器：低透明度玻璃与背景模糊。
- 普通卡片：更高白色透明度、细描边和轻量阴影。
- 激活与悬浮状态：镜面高光、内阴影、边缘虹彩和更明显的悬浮阴影。
2.4 色彩承担语义
- 青绿：品牌、主要操作、当前状态。
- 天蓝：请求、数据、信息类功能。
- 冰青：Token、连接、实时状态。
- 绿色：成功、安全、余额正常。
- 暖橙：提醒、费用、需要关注。
- 红色：错误、危险、超额。
- 粉色：模型、内容或次级强调。
3. 色彩系统
3.1 品牌主色
主色使用与落地页一致的 Teal 色阶，默认品牌色为 Primary 500。
| Token | 色值 | 建议用途 |
|---|---|---|
primary-50 |
#F0FDFA |
浅色选中背景、图标底色 |
primary-100 |
#CCFBF1 |
聚焦环、浅色悬停 |
primary-200 |
#99F6E4 |
浅色边框 |
primary-300 |
#5EEAD4 |
装饰、高亮边缘 |
primary-400 |
#2DD4BF |
次级品牌强调 |
primary-500 |
#14B8A6 |
默认品牌色、主要按钮 |
primary-600 |
#0D9488 |
按钮悬停、链接 |
primary-700 |
#0F766E |
按压状态、强调文字 |
primary-800 |
#115E59 |
深色品牌元素 |
primary-900 |
#134E4A |
高对比品牌文字 |
primary-950 |
#042F2E |
极深品牌背景 |
品牌渐变：
linear-gradient(135deg, #14b8a6, #0d9488)
3.2 功能辅助色
| Token | 色值 | 语义 |
|---|---|---|
accent-blue |
#3B82F6 |
数据、请求、信息 |
accent-cyan |
#06B6D4 |
Token、连接、实时状态 |
accent-green |
#10B981 |
成功、安全、正常 |
accent-amber |
#F59E0B |
费用、提醒、关注 |
accent-pink |
#EC4899 |
模型、内容、次级强调 |
accent-violet |
#8B5CF6 |
品牌扩展、智能能力 |
辅助色应优先用于小面积元素，例如图标磁贴、图表线条、状态点和数据趋势。避免在大面积容器中使用高饱和纯色。
3.3 中性色
中性色沿用 Slate/Gray 体系：
| 用途 | 推荐颜色 |
|---|---|
| 页面主标题 | slate-900 / #0F172A |
| 卡片标题 | slate-800 / #1E293B |
| 正文 | slate-600 / #475569 |
| 次级说明 | slate-400 / #94A3B8 |
| 禁用与占位 | slate-300 / #CBD5E1 |
| 分隔线 | slate-100 或白色透明边框 |
正文不建议使用纯黑 #000000，以保持整体柔和度。
3.4 页面背景
基础背景：
#F6F8FC
环境 Mesh Gradient：
radial-gradient(at 12% 8%, rgba(20, 184, 166, 0.09) 0, transparent 36%),
radial-gradient(at 72% 0%, rgba(6, 182, 212, 0.07) 0, transparent 40%),
radial-gradient(at 95% 70%, rgba(20, 184, 166, 0.055) 0, transparent 38%),
radial-gradient(at 45% 100%, rgba(99, 102, 241, 0.035) 0, transparent 42%)
背景光晕只用于提供环境色，不应成为页面的视觉主体。
4. 液态玻璃系统
4.1 基础玻璃令牌
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-bg-strong: rgba(255, 255, 255, 0.84);
--glass-bg-subtle: rgba(255, 255, 255, 0.62);
--glass-border: rgba(255, 255, 255, 0.82);
--glass-blur: 28px;
--glass-saturate: 1.18;
--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
4.2 普通玻璃容器
适用于顶栏、悬浮工具栏和大面积弱层级容器：
- 背景：
rgba(255, 255, 255, 0.62)。 - 模糊：
blur(28px)。 - 饱和度：
saturate(1.18)。 - 描边：半透明白色。
- 阴影：冷色、低透明度、大扩散范围。
4.3 卡片玻璃
普通内容卡片使用较高的不透明度：
- 背景：
rgba(255, 255, 255, 0.84)。 - 普通卡片圆角：
20px。 - 登录、主图表等重点卡片圆角：
24px。 - 描边：
rgba(255, 255, 255, 0.82)。 - 阴影：
0 10px 34px rgba(91, 104, 151, 0.08)。 - 内高光：
inset 0 1px 0 rgba(255, 255, 255, 0.9)。
卡片不使用厚重灰色边框。悬停时只允许轻微上移，并适度增强阴影。
4.4 侧栏环境玻璃
侧栏不是纯白色容器，而是带有轻微环境色的独立玻璃层：
background:
radial-gradient(circle at 4% 7%, rgba(6, 182, 212, 0.13), transparent 31%),
radial-gradient(circle at 105% 62%, rgba(20, 184, 166, 0.11), transparent 35%),
radial-gradient(circle at 28% 106%, rgba(45, 212, 191, 0.10), transparent 30%),
rgba(250, 252, 255, 0.62);
backdrop-filter: blur(32px) saturate(1.35);
这些环境色为菜单选中项提供可模糊和折射的内容，同时仍保持侧栏接近冷白色。
4.5 菜单选中玻璃
菜单选中态采用接近 macOS Liquid Glass 的纯 CSS 近似效果：
- 中性半透明白色为主体。
- 左下角冰青、右下角青绿作为极淡折射色。
blur(26px) saturate(1.7) brightness(1.06)增强背景折射。- 顶部椭圆形高光模拟镜面反射。
- 底部
1px虹彩线模拟玻璃边缘色散。 - 多层内阴影模拟玻璃厚度和弧面。
- 外阴影表现轻微悬浮，不使用强烈光晕。
所有菜单项默认保留 1px 透明边框，选中时只替换边框颜色，避免状态切换造成布局偏移。
纯 CSS 无法实现真实的动态光线折射。若未来需要内容随背景实时扭曲，应使用 SVG displacement filter 或 WebGL shader。
5. 圆角系统
| 层级 | 圆角 | 使用场景 |
|---|---|---|
| 小 | 8px |
标签、紧凑按钮、序号 |
| 中 | 12px |
输入框、小图标容器 |
| 常规 | 15px–16px |
菜单项、普通按钮 |
| 面板 | 16px |
表格、筛选栏、紧凑内部面板 |
| 卡片 | 20px |
普通内容卡片、数据卡片 |
| 重点卡片 | 24px |
登录卡片、主图表和大型展示卡片 |
| 容器 | 28px |
主侧栏、大型玻璃容器 |
| 胶囊 | 9999px |
搜索框、状态标签、圆形操作区 |
同一区域内圆角应呈现明确层级：外层容器圆角最大，内部元素依次减小。
6. 阴影系统
| Token | 配方 | 用途 |
|---|---|---|
shadow-glass-sm |
0 8px 24px rgba(76, 91, 142, 0.08) |
顶栏、轻量浮层 |
shadow-glass |
0 18px 55px rgba(76, 91, 142, 0.11) |
大型玻璃容器 |
shadow-card |
冷色外阴影 + 白色内高光 | 普通卡片 |
shadow-card-hover |
0 18px 48px rgba(91, 104, 151, 0.14) |
卡片悬停 |
shadow-glow |
青绿色柔光 | 品牌图标和少量强调 |
阴影颜色使用蓝灰或品牌色透明值，不使用纯黑重阴影。
7. 字体与排版
字体栈：
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'PingFang SC',
'Hiragino Sans GB',
'Microsoft YaHei',
sans-serif
推荐排版层级：
| 类型 | 建议规格 |
|---|---|
| 页面标题 | 28px，700，紧凑字距 |
| 区块标题 | 16px，600 |
| 卡片关键数据 | 28px–30px，700，等宽数字 |
| 正文 | 14px，400–500 |
| 次级说明 | 12px，400 |
| 辅助标签 | 10px–11px，500–700 |
金额、百分比、Token 和请求数量应使用 tabular-nums，防止数字变化时宽度跳动。
8. 图标与渐变磁贴
图标以线性 SVG 为主，常规尺寸为 16px–20px。统计卡片和快捷入口可使用渐变图标磁贴：
| 类型 | 渐变方向 |
|---|---|
| Violet | #8E7DFF → #6D5CE7 |
| Blue | #5DB9FF → #3889EB |
| Cyan | #48D5D5 → #22B3BD |
| Green | #64DCB0 → #2CB887 |
| Amber | #FFC861 → #F0A335 |
| Pink | #FF8EB5 → #EB6394 |
磁贴应使用白色内高光和低透明度同色阴影，避免使用纯色平面图标块。
9. 图表配色
推荐图表序列：
#14B8A6 青绿，主数据
#06B6D4 冰青，次数据
#6366F1 靛蓝
#F59E0B 暖橙
#EC4899 珊瑚粉
#3B82F6 天蓝
#10B981 薄荷绿
#EF4444 珊瑚红
图表使用规范：
- 主曲线使用青绿，第二曲线使用天蓝或冰青。
- 填充区域透明度控制在
0.04–0.12。 - 网格线使用低透明度 Slate 色。
- Tooltip 使用深蓝灰半透明背景，不使用纯黑。
- 环形图扇区之间使用半透明白色描边，保持玻璃环境下的分离度。
10. 动效规范
基础动效时长：
- 快速反馈：
180ms–200ms。 - 页面与卡片进入：
300ms。 - 图表加载：约
650ms。 - 持续装饰动画：应谨慎使用，并控制在低频、低幅度范围。
推荐缓动：
ease-out
允许的悬停变化：
- 上移
1px–3px。 - 轻微增强阴影。
- 提升玻璃背景白色透明度。
- 图标或文字改变为品牌色。
禁止通过增加边框宽度、内边距或字体粗细改变元素尺寸，避免页面发生布局抖动。
所有非必要动画必须兼容：
@media (prefers-reduced-motion: reduce)
11. 响应式规范
< 1024px：侧栏使用抽屉模式，完全移出视口并显示遮罩。>= 1024px：侧栏固定悬浮，主内容根据展开状态调整左边距。- 指标卡：手机单列、平板双列、宽屏四列。
- 图表区：常规屏幕单列，超宽屏采用主趋势图与占比图组合布局。
- 快捷操作：根据容器宽度使用两列或三列。
- 顶栏搜索框在小屏幕隐藏，保留关键操作按钮。
12. 可访问性与降级
- 玻璃背景上的正文必须保持足够对比度，正文不使用低于
slate-500的颜色。 - 状态不能只依赖颜色表达，应同时提供图标、文字或百分比。
- 交互元素应提供清晰的键盘聚焦环。
- 不支持
backdrop-filter时，玻璃组件降级为高不透明度白色背景。 - 禁用状态降低透明度，但仍应保留可读文字。
- 动画应支持
prefers-reduced-motion。
13. 使用建议
推荐
- 使用透明白色、内高光和冷色阴影建立材质层次。
- 让背景保留极淡的环境色，为玻璃提供折射内容。
- 使用青绿色表达品牌和主要状态。
- 使用功能色区分数据类别和业务状态。
- 保持大圆角、低对比边界和充足留白。
避免
- 避免大面积高饱和青绿渐变。
- 避免纯黑阴影、纯黑正文和深灰粗边框。
- 避免在同一视图中使用过多发光元素。
- 避免所有卡片都设置悬浮动画，静态信息卡可保持稳定。
- 避免只有透明白色、没有环境色的“假玻璃”效果。
- 避免通过选中态边框改变元素实际尺寸。
14. 实现位置
| 内容 | 文件 |
|---|---|
| 全局主题、色彩和玻璃组件 | src/styles/main.css |
| 租户端侧栏与顶栏 | src/views/Layout.vue |
| 仪表盘信息架构与数据卡片 | src/views/dashboard/DashboardPage.vue |
| 趋势图 | src/components/charts/TokenTrendChart.vue |
| 模型费用环形图 | src/components/charts/ModelDistChart.vue |
后续新增页面应优先复用全局 .card、.glass、.glass-card、.sidebar-link、按钮和输入框样式，避免在页面内部重新定义相似但不一致的颜色与材质配方。
15. 表格规范
租户端表格统一使用 .table-container 和 .table，列表分页使用 .table-pagination。
15.1 表格容器
- 圆角：
16px。 - 背景：半透明冷白玻璃，叠加极淡的冰青和青绿环境光。
- 模糊：
blur(22px) saturate(1.2)。 - 描边：半透明白色，不使用传统灰色实线外框。
- 阴影：冷色轻阴影与顶部内高光。
- 横向滚动条使用冰青到青绿的渐变滑块，宽表格在移动端保持横向滚动。
当表格已经位于带有 overflow-hidden 的卡片内部时，使用 .table-container-flush 移除重复的圆角、描边和阴影。
15.2 表头
- 高度由
14px上下内边距构成。 - 字号：
12px。 - 字重：
650。 - 文字颜色：
#64748B。 - 背景：冷白玻璃叠加低透明度冰青到青绿渐变。
- 使用顶部镜面高光和底部柔和分隔线表现玻璃厚度。
- 相邻表头之间使用短竖向渐变分隔，不使用贯穿整行的深色边框。
- 表头内容默认不换行，长表格通过横向滚动查看。
15.3 数据行
- 单元格默认背景为低透明度白色。
- 偶数行使用极淡蓝灰背景，形成弱斑马纹。
- 行分隔线使用低透明度 Slate 色。
- 悬停或行内元素获得焦点时，整行显示冰青至淡青绿的液态渐变。
- 悬停行首显示
3px青绿色内侧指示条。 - 数字统一使用
tabular-nums，避免金额和计数变化造成宽度跳动。 - 表格内普通链接使用
primary-600，悬停时切换为primary-800。
15.4 行内操作
- 操作按钮优先使用小尺寸幽灵按钮。
- 默认背景保持透明或极淡白色。
- 悬停时增加白色玻璃背景、浅色描边和轻量阴影。
- 状态使用圆角徽章，不通过纯文本颜色单独表达。
- 危险操作继续使用红色语义，但避免大面积红色按钮。
15.5 分页栏
- 使用
.table-pagination与表格卡片连接。 - 背景为冷白半透明渐变，与表头形成上下呼应。
- 顶部分隔使用白色透明边缘，而不是旧式灰色边框。
- 翻页按钮使用小型玻璃按钮，悬停时显示品牌色。
- 禁用按钮降低对比度并移除阴影。
- 手机端允许分页信息和按钮自动换行。
15.6 使用示例
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>名称</th>
<th>状态</th>
<th class="text-right">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td><span class="badge badge-success">正常</span></td>
<td class="text-right"><button class="btn btn-ghost btn-sm">查看</button></td>
</tr>
</tbody>
</table>
</div>
<div class="table-pagination">
<span>共 {{ total }} 条记录</span>
<div class="flex items-center gap-2">
<button class="btn btn-ghost btn-sm">上一页</button>
<span>{{ page }} / {{ totalPages }}</span>
<button class="btn btn-ghost btn-sm">下一页</button>
</div>
</div>