11 KiB
11 KiB
固定资产管理系统 - 前端视觉规范
1. 设计原则
1.1 核心理念
- 极简主义：去除多余装饰，保持界面清爽
- 一致性：所有页面使用统一的组件和样式
- 可读性：文字清晰，层级分明
- 深色主题：统一的深色背景，保护视力
1.2 禁止事项
- ❌ 不要使用渐变色按钮（除非特殊强调）
- ❌ 不要使用圆角过大的元素（保持 8-16px）
- ❌ 不要使用阴影过重的卡片
- ❌ 不要在同一页面混用不同的间距（统一使用 gap-4/gap-6）
- ❌ 不要添加过多的说明文字（只保留必要的）
2. 颜色系统
2.1 背景色（Background）
--bg-primary: #0d0d0d /* 页面主背景 */
--bg-secondary: #141414 /* 卡片背景 */
--bg-tertiary: #1a1a1a /* 次级背景 */
--bg-elevated: #242424 /* 输入框、浮层背景 */
--bg-hover: #2a2a2a /* 悬停状态 */
使用规范：
- 页面背景：
bg-bg-primary - 卡片容器：
bg-bg-secondary - 输入框、选择框：
bg-bg-elevated - 悬停效果：
hover:bg-bg-hover
2.2 文字色（Text）
--text-primary: #ffffff /* 主标题、重要文字 */
--text-secondary: #a1a1a1 /* 正文、描述 */
--text-tertiary: #6e6e6e /* 辅助文字、占位符 */
使用规范：
- 页面标题：
text-text-primary - 正文内容：
text-text-secondary - 提示文字、时间戳：
text-text-tertiary
2.3 边框色（Border）
--border-color: #2a2a2a /* 默认边框 */
--border-hover: #3a3a3a /* 悬停边框 */
使用规范：
- 所有边框统一使用：
border-border - 悬停状态：
hover:border-border-hover
2.4 强调色（Accent）
--accent-primary: #10a37f /* 主按钮、链接 */
--accent-primary-hover: #0d8c6d /* 按钮悬停 */
--accent-secondary: #19c59f /* 次要强调 */
使用规范：
- 主按钮背景：
bg-accent-primary - 链接文字：
text-accent-primary - 悬停状态：
hover:bg-accent-primary-hover
2.5 状态色（Status）
--status-success: #10a37f /* 成功、可用 */
--status-warning: #f59e0b /* 警告、借出 */
--status-error: #ef4444 /* 错误、删除 */
--status-neutral: #6b7280 /* 中性、禁用 */
使用规范：
- 成功状态：
text-status-success/bg-status-success/15 - 警告状态：
text-status-warning/bg-status-warning/15 - 错误状态：
text-status-error/bg-status-error/15
3. 组件规范
3.1 按钮（Button）
主按钮（Primary）
<button class="btn-primary">确认</button>
样式特征：
- 背景：
bg-accent-primary - 文字：白色
- 圆角：
8px - 高度：
44px - 阴影：
0 8px 24px rgba(16, 163, 127, 0.22)
次要按钮（Secondary）
<button class="btn-secondary">取消</button>
样式特征：
- 背景：
bg-bg-elevated - 边框：
1px solid border-color - 文字：
text-text-secondary - 圆角：
8px - 高度：
44px
图标按钮（Icon Button）
<button class="btn-icon">
<svg>...</svg>
</button>
禁止：
- ❌ 不要使用
btn-apple-primary/btn-apple-secondary（已废弃）
3.2 输入框（Input）
文本输入
<input type="text" class="input" placeholder="请输入..." />
样式特征：
- 背景：
bg-bg-elevated - 边框：
1px solid border-color - 圆角：
8px - 高度：
44px - 内边距：
10px 14px - 聚焦：
border-accent-primary
选择框（Select）
<select class="select">
<option>选项</option>
</select>
禁止：
- ❌ 不要使用
input-apple（已废弃）
3.3 卡片（Card）
标准卡片
<section class="card">
<h3 class="section-title">标题</h3>
<!-- 内容 -->
</section>
样式特征：
- 背景：
bg-bg-secondary - 边框：
1px solid border-color - 圆角：
12px（移动端8px） - 内边距：
16px（移动端12px） - 阴影：
0 16px 44px rgba(0, 0, 0, 0.18)
面板（Panel）
<div class="panel">内容</div>
样式特征：
- 背景：
bg-bg-elevated - 边框：
1px solid border-color - 圆角：
12px - 内边距：
12px
禁止：
- ❌ 不要使用
card-apple（已废弃）
3.4 标签（Badge）
<span class="badge badge-success">成功</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-error">错误</span>
<span class="badge badge-neutral">中性</span>
样式特征：
- 圆角：
9999px（全圆角） - 内边距：
2px 8px - 字体大小：
12px
3.5 表格（Table）
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th>列标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
</table>
</div>
样式特征：
- 表头背景：
bg-bg-tertiary - 表头文字：
text-text-tertiary，大写，字间距0.05em - 行分隔线：
border-border - 悬停：
hover:bg-bg-hover
4. 布局规范
4.1 页面结构
<div class="space-y-6">
<!-- 页面头部 -->
<section class="page-header">
<div>
<p class="page-kicker">英文标签</p>
<h2 class="page-title">页面标题</h2>
</div>
<div class="page-meta-grid">
<!-- 统计卡片 -->
</div>
</section>
<!-- 内容区域 -->
<section class="card">
<!-- 内容 -->
</section>
</div>
4.2 间距规范
- 大区块间距：
space-y-6（24px） - 卡片内间距：
gap-4（16px） - 表单字段间距：
gap-4（16px） - 按钮组间距：
gap-3（12px） - 文字行间距：
mt-1、mt-2（4px、8px）
4.3 响应式断点
| 断点 | 范围 | 用途 |
|---|---|---|
md |
>= 768px | 列表切换：卡片 ↔ 表格 |
lg |
>= 1024px | 页面布局调整 |
说明：项目代码统一使用 md (768px) 作为移动端/桌面端列表切换断点。
移动端适配原则（< 768px）：
- 卡片内边距减小到
12px - 圆角减小到
8px - 表格转为卡片列表
- 按钮全宽显示
5. 字体规范
5.1 字体大小
| 级别 | 类名 | 大小 | 用途 |
|---|---|---|---|
| 页面标题 | text-2xl font-semibold |
24px | 页面主标题 |
| 区块标题 | text-xl font-semibold |
20px | 卡片标题 |
| 小节标题 | text-lg font-semibold |
18px | 子区块标题 |
| 正文 | text-sm |
14px | 普通文字 |
| 辅助文字 | text-xs |
12px | 标签、时间戳 |
| 大数字 | text-2xl font-semibold |
24px | 统计数据 |
5.2 字体粗细
- 标题：
font-semibold（600） - 正文：
font-normal（400） - 强调：
font-medium（500）
5.3 字间距
- 英文标签：
tracking-wider，大写 - 数字：
font-mono
6. 页面头部规范
6.1 标准页面头部
<section class="page-header">
<div>
<p class="page-kicker">英文标签</p>
<h2 class="page-title">页面标题</h2>
</div>
<div class="page-meta-grid">
<div class="page-meta">
<p class="page-meta__label">标签</p>
<p class="page-meta__value">数值</p>
</div>
</div>
</section>
样式特征：
- Kicker：
text-xs，text-text-tertiary，大写，字间距0.1em - 标题：
text-2xl font-semibold，text-text-primary - 元信息卡片：
bg-bg-elevated，圆角12px
6.2 禁止
- ❌ 不要在页面头部添加
page-subtitle（已废弃） - ❌ 不要使用
surface-note说明框（已废弃）
7. 表单规范
7.1 表单字段
<div class="field-stack">
<label class="field-label">字段标签</label>
<input type="text" class="input" placeholder="提示文字" />
<p class="field-hint">辅助说明（可选）</p>
</div>
样式特征：
- 标签：
text-sm font-semibold，text-text-primary - 输入框：
input类 - 提示：
text-xs，text-text-tertiary
7.2 表单布局
<div class="field-grid">
<!-- 两列布局 -->
</div>
<div class="field-grid--3">
<!-- 三列布局 -->
</div>
8. 快速参考
8.1 常用类名速查
/* 按钮 */
btn-primary, btn-secondary, btn-icon
/* 输入 */
input, select
/* 卡片 */
card, panel, card-elevated
/* 文字颜色 */
text-text-primary, text-text-secondary, text-text-tertiary
/* 背景颜色 */
bg-bg-primary, bg-bg-secondary, bg-bg-elevated
/* 边框 */
border-border
/* 状态 */
badge-success, badge-warning, badge-error, badge-neutral
text-status-success, text-status-warning, text-status-error
/* 布局 */
page-header, page-meta, page-meta-grid
section-title, field-stack, field-grid
8.2 已废弃类名（禁止使用）
btn-apple-primary, btn-apple-secondary
input-apple, card-apple
text-apple-*, bg-apple-*
text-system-label-*, bg-system-gray-*, border-system-gray-*
rounded-apple
surface-note, page-subtitle, section-subtitle
9. 示例代码
9.1 列表页面模板
<template>
<div class="space-y-6">
<!-- 页面头部 -->
<section class="page-header">
<div>
<p class="page-kicker">List</p>
<h2 class="page-title">列表标题</h2>
</div>
</section>
<!-- 筛选区 -->
<section class="card">
<div class="grid gap-4 md:grid-cols-3">
<input type="text" class="input" placeholder="搜索..." />
<select class="select">
<option>全部</option>
</select>
<div class="flex gap-3">
<button class="btn-secondary">重置</button>
<button class="btn-primary">查询</button>
</div>
</div>
</section>
<!-- 数据表格 -->
<section class="card">
<div class="table-container">
<table class="data-table">
<!-- 表格内容 -->
</table>
</div>
</section>
</div>
</template>
9.2 表单页面模板
<template>
<div class="form-shell">
<section class="form-hero">
<div class="field-grid">
<div class="field-stack">
<label class="field-label">字段名 *</label>
<input type="text" class="input" required />
</div>
</div>
</section>
<section class="form-panel">
<div class="form-panel__header">
<h3 class="form-panel__title">区块标题</h3>
</div>
<div class="field-grid">
<!-- 表单字段 -->
</div>
</section>
</div>
</template>
10. 检查清单
在提交代码前，请确认：
- 没有使用已废弃的类名
- 按钮使用
btn-primary/btn-secondary - 输入框使用
input/select - 卡片使用
card/panel - 颜色使用
text-text-*/bg-bg-* - 边框使用
border-border - 没有多余的说明文字
- 移动端样式已测试
- 间距统一使用
gap-4/gap-6
最后更新： 2026-03-17 版本： v1.0