# 固定资产管理系统 - 深色极简主题改造总结

## 改造概述

本次改造将原有的暖色调主题全面升级为深色极简风格，遵循 Apple Design 设计规范，使用深色背景、高对比度文字和统一的圆角设计。

---

## 一、全局样式配置

### 1.1 CSS 变量定义 (style.css)

```css
/* 深色主题 - 背景色 */
--bg-primary: #0d0d0d;
--bg-secondary: #141414;
--bg-tertiary: #1a1a1a;
--bg-elevated: #242424;
--bg-hover: #2a2a2a;

/* 文字色 */
--text-primary: #ffffff;
--text-secondary: #a1a1a1;
--text-tertiary: #6e6e6e;

/* 边框 */
--border-color: #2a2a2a;
--border-hover: #3a3a3a;

/* 强调色 - 青绿色系 */
--accent-primary: #10a37f;
--accent-primary-hover: #0d8c6d;
--accent-secondary: #19c59f;

/* 状态色 */
--status-success: #10a37f;
--status-warning: #f59e0b;
--status-error: #ef4444;
--status-info: #3b82f6;
```

### 1.2 Tailwind 配置 (tailwind.config.js)

```javascript
colors: {
  'bg': {
    'primary': '#0d0d0d',
    'secondary': '#141414',
    'tertiary': '#1a1a1a',
    'elevated': '#242424',
    'hover': '#2a2a2a',
  },
  'text': {
    'primary': '#ffffff',
    'secondary': '#a1a1a1',
    'tertiary': '#6e6e6e',
  },
  'border': '#2a2a2a',
  'accent': {
    'primary': '#10a37f',
    'hover': '#0d8c6d',
    'secondary': '#19c59f',
  },
  'status': {
    'success': '#10a37f',
    'warning': '#f59e0b',
    'error': '#ef4444',
    'info': '#3b82f6',
  }
}
```

### 1.3 样式类命名规范

**重要：统一使用以下类名，避免混用多套命名体系**

| 类名 | 用途 | 样式说明 |
|------|------|----------|
| `card` / `card-apple` | 卡片容器 | 圆角16px，深色背景，细边框 |
| `input` / `input-apple` | 输入框 | 圆角8px，深色背景，聚焦时青绿边框 |
| `select` | 选择框 | 圆角8px，深色背景，带下拉箭头 |
| `btn-primary` / `btn-apple-primary` | 主按钮 | 青绿色背景，白色文字，圆角8px |
| `btn-secondary` / `btn-apple-secondary` | 次按钮 | 深色背景，灰色边框，圆角8px |
| `btn-icon` | 图标按钮 | 圆形，透明背景 |
| `badge` | 状态标签 | 圆角，带背景色 |

### 1.4 按钮规范

**尺寸规范：**
- 高度：44px (min-height)
- 内边距：px-4 py-2.5
- 圆角：8px (radius-md)
- 字体：text-sm
- 按钮间距：gap-2

**使用示例：**
```vue
<!-- 主按钮 -->
<button class="btn-primary text-sm">确认</button>

<!-- 次按钮 -->
<button class="btn-secondary text-sm">取消</button>

<!-- 按钮组 -->
<div class="flex flex-wrap gap-2">
  <button class="btn-primary text-sm">保存</button>
  <button class="btn-secondary text-sm">取消</button>
</div>
```

### 1.5 输入框规范

**尺寸规范：**
- 高度：44px (min-height)
- 内边距：py-2.5 px-3.5 (桌面端), py-3 px-3.5 (移动端)
- 圆角：8px (radius-md)
- 字体：text-sm (桌面端), text-base (移动端防止iOS缩放)

**使用示例：**
```vue
<!-- 文本输入 -->
<input type="text" class="input" placeholder="请输入" />

<!-- 选择框 -->
<select class="select">
  <option value="">请选择</option>
</select>

<!-- 日期选择 -->
<input type="date" class="input" />
```

### 1.6 响应式布局规范

**断点定义：**
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px

**常用布局模式：**

```vue
<!-- 筛选器 - 移动端1列，平板2列，桌面4列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
  <input class="input" />
  <select class="select"></select>
  <input class="input" />
  <button class="btn-secondary w-full sm:w-auto">重置</button>
</div>

<!-- 工具栏 - 移动端垂直排列，桌面水平排列 -->
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
  <div class="flex flex-wrap items-center gap-2">
    <!-- 左侧按钮 -->
  </div>
  <div class="flex flex-wrap items-center gap-2">
    <!-- 右侧按钮 -->
  </div>
</div>

<!-- 页面头部 - 移动端垂直，桌面水平 -->
<section class="page-header">
  <!-- 自动响应式 -->
</section>
```

### 1.7 移动端适配要点

**输入框：**
- 字体大小必须 >= 16px，防止 iOS 自动缩放
- 增加触摸区域，padding 适当加大

**按钮：**
- 使用 text-sm 保持统一高度
- 全宽按钮在移动端使用 `w-full sm:w-auto`

**间距：**
- 移动端使用 gap-2 替代 gap-3/gap-4
- 卡片内边距使用 p-4 或 p-5

**表格：**
- 移动端使用卡片列表替代表格
- 使用 `hidden md:block` 和 `md:hidden` 切换显示

---

## 二、已改造页面清单

### 2.1 核心页面

| 文件路径 | 状态 | 主要改造内容 |
|----------|------|--------------|
| `src/layouts/MainLayout.vue` | ✅ 完成 | 深色侧边栏、导航菜单 |
| `src/views/Login.vue` | ✅ 完成 | 深色登录表单、玻璃态效果 |
| `src/views/dashboard/Dashboard.vue` | ✅ 完成 | 统计卡片、数据表格 |
| `src/views/equipment/EquipmentList.vue` | ✅ 完成 | 资产列表、筛选器、批量操作弹窗 |
| `src/views/borrow/BorrowList.vue` | ✅ 完成 | 借还记录表格、状态标签 |
| `src/views/borrow/BorrowScan.vue` | ✅ 完成 | 扫码借出界面 |
| `src/views/borrow/ReturnScan.vue` | ✅ 完成 | 扫码归还界面 |
| `src/views/statistics/Statistics.vue` | ✅ 完成 | 图表、统计卡片（含ECharts深色配置） |

### 2.2 设置页面

| 文件路径 | 状态 | 主要改造内容 |
|----------|------|--------------|
| `src/views/settings/Settings.vue` | ✅ 完成 | 设置主页布局 |
| `src/views/settings/components/SiteSettings.vue` | ✅ 完成 | 站点信息表单 |
| `src/views/settings/components/UserManagement.vue` | ✅ 完成 | 用户管理表格 |
| `src/views/settings/components/PersonManagement.vue` | ✅ 完成 | 使用者管理 |
| `src/views/settings/components/StorageLocationManagement.vue` | ✅ 完成 | 地址管理 |
| `src/views/settings/components/AssetTypeManagement.vue` | ✅ 完成 | 资产类型管理 |
| `src/views/settings/components/DepartmentManagement.vue` | ✅ 完成 | 部门树形表格 |
| `src/views/settings/components/MaintenanceManagement.vue` | ✅ 完成 | 维修记录 |
| `src/views/settings/components/DisposalManagement.vue` | ✅ 完成 | 报废管理 |
| `src/views/settings/components/OperationLogList.vue` | ✅ 完成 | 操作日志 |

### 2.3 全局组件

| 文件路径 | 状态 | 主要改造内容 |
|----------|------|--------------|
| `src/components/StatCard.vue` | ✅ 完成 | 统计卡片组件 |
| `src/components/GlobalSearch.vue` | ✅ 完成 | 全局搜索下拉框 |
| `src/components/BarcodePrint.vue` | ✅ 完成 | 二维码打印 |
| `src/components/MountHistory.vue` | ✅ 完成 | 挂载历史 |
| `src/components/MountManager.vue` | ✅ 完成 | 挂载管理 |

---

## 三、状态标签颜色规范

### 3.1 资产状态

```vue
<!-- 可用 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-apple-green/15 text-apple-green">可用</span>

<!-- 已借出 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-apple-orange/15 text-apple-orange">已借出</span>

<!-- 维护中 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-apple-red/15 text-apple-red">维护中</span>

<!-- 待报废 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-apple-yellow/15 text-apple-yellow">待报废</span>

<!-- 已报废 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-system-gray-6 text-system-label-tertiary">已报废</span>
```

### 3.2 启用/停用状态

```vue
<!-- 启用 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-apple-green/15 text-apple-green">启用</span>

<!-- 停用 -->
<span class="rounded-apple px-3 py-1 text-apple-footnote bg-system-gray-6 text-system-label-tertiary">停用</span>
```

### 3.3 父/子资产标签

```vue
<!-- 父资产 -->
<span class="rounded-apple px-2 py-0.5 text-apple-footnote bg-apple-blue/15 text-apple-blue">父</span>

<!-- 子资产 -->
<span class="rounded-apple px-2 py-0.5 text-apple-footnote bg-system-gray-6 text-system-label-secondary">子</span>
```

---

## 四、ECharts 深色主题配置

```javascript
// 图表背景透明
theme: 'dark',
backgroundColor: 'transparent',

// 文字颜色
textStyle: {
  color: '#98989d'
},

// 坐标轴颜色
axisLine: {
  lineStyle: { color: '#3a3a3c' }
},
axisLabel: {
  color: '#98989d'
},

// 分割网格
splitLine: {
  lineStyle: { color: '#2c2c2e' }
},

// 提示框
tooltip: {
  backgroundColor: 'rgba(42, 42, 42, 0.95)',
  borderColor: '#3a3a3c',
  textStyle: { color: '#ffffff' }
}
```

---

## 五、弹窗/模态框规范

```vue
<!-- 弹窗遮罩 -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <!-- 弹窗内容 -->
  <div class="bg-system-background-primary rounded-apple p-6 w-96 shadow-apple-xl">
    <h3 class="text-apple-title text-system-label-primary mb-4">标题</h3>
    <!-- 表单内容 -->
    <div class="flex justify-end gap-3 mt-6">
      <button class="btn-apple-secondary">取消</button>
      <button class="btn-apple-primary">确认</button>
    </div>
  </div>
</div>
```

---

## 六、表格样式规范

```vue
<table class="w-full">
  <thead>
    <tr class="border-b border-system-gray-5 text-left text-apple-footnote text-system-label-tertiary">
      <th class="py-3 px-4">列标题</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b border-system-gray-6 text-system-label-primary text-apple-body">
      <td class="py-3 px-4">单元格内容</td>
    </tr>
  </tbody>
</table>
```

---

## 七、表单输入规范

```vue
<!-- 文本输入 -->
<div>
  <label class="block text-apple-body text-system-label-primary mb-2">标签</label>
  <input type="text" class="input-apple" placeholder="提示文字" />
</div>

<!-- 下拉选择 -->
<div>
  <label class="block text-apple-body text-system-label-primary mb-2">标签</label>
  <select class="input-apple">
    <option value="">请选择</option>
  </select>
</div>

<!-- 文本域 -->
<div>
  <label class="block text-apple-body text-system-label-primary mb-2">标签</label>
  <textarea class="input-apple" rows="3"></textarea>
</div>
```

---

## 八、页面头部规范

```vue
<section class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
  <div>
    <p class="text-apple-footnote text-system-label-secondary uppercase tracking-wider">英文标题</p>
    <h2 class="text-apple-large-title text-system-label-primary mt-1">中文标题</h2>
    <p class="text-apple-body text-system-label-secondary mt-2">副标题描述</p>
  </div>
  
  <!-- 统计卡片 -->
  <div class="flex gap-4">
    <div class="card-apple p-4 min-w-[120px]">
      <p class="text-apple-footnote text-system-label-secondary">标签</p>
      <p class="text-apple-title text-system-label-primary mt-1">数值</p>
    </div>
  </div>
</section>
```

---

## 九、待确认/待完善事项

1. **资产编辑页面** (`EquipmentEdit.vue`) - 需要检查是否已应用深色主题
2. **资产新增页面** - 需要检查是否已应用深色主题
3. **响应式适配** - 已在主要页面添加移动端适配，但可能需要进一步测试
4. **打印样式** - 二维码打印页面可能需要单独的打印媒体查询

---

## 十、快速参考：常用类名速查

### 布局
- `space-y-6` - 垂直间距
- `flex flex-wrap items-center justify-between gap-4` - 工具栏布局
- `grid grid-cols-1 md:grid-cols-3 gap-4` - 响应式网格

### 颜色
- `text-system-label-primary` - 主文字（白）
- `text-system-label-secondary` - 次级文字（灰）
- `text-system-label-tertiary` - 三级文字（深灰）
- `bg-system-background-primary` - 主背景
- `bg-system-gray-6` - 深色背景

### 组件
- `card-apple` - 卡片
- `input-apple` - 输入框
- `btn-apple-primary` - 主按钮
- `btn-apple-secondary` - 次按钮
- `rounded-apple` - 圆角

---

## 十一、样式系统规范化（2026-03-17更新）

### 11.1 问题发现
- 样式类命名混乱：`btn-primary` 与 `btn-apple-primary` 混用
- 按钮/输入框尺寸不统一
- 移动端适配不完善

### 11.2 规范化措施

**统一按钮尺寸：**
- 高度统一为 44px
- 圆角统一为 8px
- 所有按钮添加 `text-sm`
- 按钮间距统一为 `gap-2`

**统一输入框尺寸：**
- 高度统一为 44px
- 圆角统一为 8px
- 移动端字体大小 >= 16px 防止缩放

**响应式布局优化：**
- 筛选器：`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3`
- 工具栏：`flex-col lg:flex-row`
- 页面头部：自动响应式

### 11.3 已修复文件

| 文件 | 修复内容 |
|------|----------|
| style.css | 统一按钮/输入框尺寸，添加移动端适配 |
| EquipmentList.vue | 优化筛选器和工具栏布局 |
| BorrowList.vue | 优化筛选器和按钮布局 |
| BorrowScan.vue | 统一按钮尺寸 |
| ReturnScan.vue | 统一按钮尺寸 |
| Statistics.vue | 统一按钮尺寸 |
| Dashboard.vue | 统一按钮尺寸 |

---

## 十二、文件变更记录

| 日期 | 文件 | 变更类型 | 说明 |
|------|------|----------|------|
| 2026-03-16 | style.css | 修改 | 添加深色主题CSS变量 |
| 2026-03-16 | tailwind.config.js | 修改 | 配置深色主题颜色 |
| 2026-03-16 | MainLayout.vue | 重写 | 深色侧边栏 |
| 2026-03-16 | Login.vue | 重写 | 深色登录页 |
| 2026-03-16 | Dashboard.vue | 重写 | 深色仪表盘 |
| 2026-03-16 | EquipmentList.vue | 重写 | 深色资产列表 |
| 2026-03-16 | BorrowList.vue | 重写 | 深色借还记录 |
| 2026-03-16 | BorrowScan.vue | 重写 | 深色扫码借出 |
| 2026-03-16 | ReturnScan.vue | 重写 | 深色扫码归还 |
| 2026-03-16 | Statistics.vue | 重写 | 深色统计页 |
| 2026-03-16 | Settings.vue + components | 重写 | 深色设置页 |
| 2026-03-16 | GlobalSearch.vue | 修改 | 更新搜索下拉样式 |
| 2026-03-16 | BarcodePrint.vue | 新增 | 二维码打印组件 |
| 2026-03-17 | style.css | 修改 | 规范化样式系统 |
| 2026-03-17 | EquipmentList.vue | 修改 | 优化响应式布局 |
| 2026-03-17 | BorrowList.vue | 修改 | 优化响应式布局 |
| 2026-03-17 | BorrowScan.vue | 修改 | 统一按钮尺寸 |
| 2026-03-17 | ReturnScan.vue | 修改 | 统一按钮尺寸 |
| 2026-03-17 | Statistics.vue | 修改 | 统一按钮尺寸 |
| 2026-03-17 | Dashboard.vue | 修改 | 统一按钮尺寸 |

---

## 十三、样式系统使用规范

### 必须遵守的规则

1. **按钮类名**：统一使用 `btn-primary` 或 `btn-apple-primary`（两者等价）
2. **按钮尺寸**：必须添加 `text-sm` 保持高度一致
3. **按钮间距**：使用 `gap-2` 而非 `gap-3` 或 `gap-4`
4. **输入框类名**：统一使用 `input` 或 `input-apple`（两者等价）
5. **筛选器布局**：使用 `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3`
6. **工具栏布局**：使用 `flex-col lg:flex-row lg:items-center lg:justify-between`
7. **移动端按钮**：使用 `w-full sm:w-auto` 实现全宽到自适应的切换

### 禁止的做法

- ❌ 不要混用 `gap-2` 和 `gap-3`/`gap-4`
- ❌ 不要在按钮上使用不同的高度
- ❌ 不要在移动端使用小于 16px 的输入框字体
- ❌ 不要创建新的样式类名，优先使用现有规范

---

## 十四、后续Agent工作建议

1. **检查未规范化的页面**：搜索 `gap-3`、`gap-4` 在按钮组中的使用
2. **测试移动端体验**：在真实移动设备上测试所有页面
3. **检查编辑页面**：确认 `EquipmentEdit.vue` 等编辑页面是否已应用规范
4. **完善细节**：微调各页面的间距、对齐等细节
5. **添加主题切换**：如需支持亮色/深色切换，可添加主题切换功能

---

**文档版本**: v2.0  
**创建日期**: 2026-03-16  
**最后更新**: 2026-03-17  
**改造范围**: 前端全部页面  
**设计风格**: 深色极简风格（青绿色系强调色）