WuYongJie/GuDingZiChan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
GuDingZiChan/深色主题改造总结.md

16 KiB
Raw Blame History

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

改造概述

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

一、全局样式配置

1.1 CSS 变量定义 (style.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)

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

使用示例：

<!-- 主按钮 -->
<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缩放)

使用示例：

<!-- 文本输入 -->
<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

常用布局模式：

<!-- 筛选器 - 移动端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 资产状态

<!-- 可用 -->
<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 启用/停用状态

<!-- 启用 -->
<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 父/子资产标签

<!-- 父资产 -->
<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 深色主题配置

// 图表背景透明
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' }
}

五、弹窗/模态框规范

<!-- 弹窗遮罩 -->
<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>

六、表格样式规范

<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>

七、表单输入规范

<!-- 文本输入 -->
<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>

八、页面头部规范

<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
改造范围: 前端全部页面
设计风格: 深色极简风格（青绿色系强调色）