WuYongJie/GuDingZiChan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
GuDingZiChan/项目交接文档.md

7.4 KiB
Raw Permalink Blame History

固定资产管理系统 - 前端视觉改造交接文档

📋 项目概述

本次改造将原系统的视觉风格从暖色调转变为深色极简主题，统一了全站的样式规范，并移除了大量不必要的说明文字。

🎨 主题变更

颜色系统

变更前（暖色调）

  • 主背景：#fbf3ea（米黄色）
  • 卡片背景：#fffefc（米白色）
  • 强调色：#b45f4d（红褐色）

变更后（深色主题）

--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      /* 边框 */
--accent-primary: #10a37f    /* 强调色 - 青绿 */

📁 修改文件清单

1. 核心样式文件

文件 修改内容
frontend/src/style.css 新增深色主题 CSS 变量和组件类
frontend/tailwind.config.js 配置深色主题颜色映射

2. 布局组件

文件 修改内容
frontend/src/components/MainLayout.vue 深色主题适配，侧边栏和导航栏样式
frontend/src/components/GlobalSearch.vue 搜索组件深色主题
frontend/src/components/StatCard.vue 统计卡片深色主题

3. 页面文件

核心页面

  • frontend/src/views/Login.vue - 登录页深色主题
  • frontend/src/views/dashboard/Dashboard.vue - 仪表盘深色主题 + 移除说明文字
  • frontend/src/views/equipment/EquipmentList.vue - 资产列表深色主题 + 样式标准化
  • frontend/src/views/equipment/EquipmentForm.vue - 资产表单深色主题 + 样式标准化

借还管理

  • frontend/src/views/borrow/BorrowList.vue - 借还列表深色主题 + 移除说明文字
  • frontend/src/views/borrow/BorrowScan.vue - 扫码借出深色主题 + 移除说明文字
  • frontend/src/views/borrow/ReturnScan.vue - 扫码归还深色主题 + 移除说明文字

统计报表

  • frontend/src/views/statistics/Statistics.vue - 统计页面深色主题 + 移除说明文字

系统设置

  • frontend/src/views/settings/Settings.vue - 设置首页深色主题 + 移除说明文字
  • frontend/src/views/settings/components/SiteSettings.vue - 站点设置深色主题
  • frontend/src/views/settings/components/DepartmentManagement.vue - 部门管理深色主题 + 样式标准化 + 移除说明文字
  • frontend/src/views/settings/components/AssetTypeManagement.vue - 资产类型深色主题 + 样式标准化
  • frontend/src/views/settings/components/StorageLocationManagement.vue - 存放地址深色主题 + 样式标准化
  • frontend/src/views/settings/components/PersonManagement.vue - 使用者管理深色主题 + 移除说明文字
  • frontend/src/views/settings/components/UserManagement.vue - 用户管理深色主题 + 移除说明文字
  • frontend/src/views/settings/components/HrSyncManagement.vue - 组织同步深色主题 + 移除说明文字
  • frontend/src/views/settings/components/MaintenanceManagement.vue - 维修管理深色主题 + 移除说明文字
  • frontend/src/views/settings/components/DisposalManagement.vue - 报废管理深色主题 + 移除说明文字
  • frontend/src/views/settings/components/OperationLogList.vue - 操作日志深色主题 + 移除说明文字

4. 功能组件

文件 修改内容
frontend/src/components/BarcodePrint.vue 二维码打印样式重新设计（横向60x40mm标签）
frontend/src/components/CameraScannerModal.vue 扫码弹窗扩大摄像头区域 + 精简说明

🔧 样式标准化工作

1. 统一类名替换

将分散的 Apple 风格类名统一为标准类名：

旧类名（已废弃） 新类名（标准）
btn-apple-primary btn-primary
btn-apple-secondary btn-secondary
input-apple input
card-apple card
text-apple-footnote text-xs
text-apple-body text-sm
text-apple-title text-xl font-semibold
text-apple-large-title text-2xl font-semibold
text-system-label-primary text-text-primary
text-system-label-secondary text-text-secondary
text-system-label-tertiary text-text-tertiary
bg-system-gray-6 bg-bg-elevated
border-system-gray-5 border-border
rounded-apple rounded-lg

2. 移除说明文字

移除了以下文件中的说明性文字：

  • surface-note 提示框
  • page-subtitle 页面副标题
  • page-meta__subvalue 统计卡片副标题
  • form-panel__desc 表单描述
  • 各处的帮助提示文字

📝 新增规范文档

1. 视觉规范文档

文件： 前端视觉规范.md

包含内容：

  • 设计原则
  • 颜色系统详细定义
  • 组件规范（按钮、输入框、卡片等）
  • 布局规范
  • 字体规范
  • 快速参考表
  • 示例代码模板

2. 深色主题总结（早期版本）

文件： 深色主题改造总结.md

🎯 关键设计决策

1. 二维码打印标签

  • 尺寸：60mm x 40mm 横向
  • DPI：300
  • 颜色：纯黑白（无灰色）
  • 内容：公司名称、资产名称、资产编码、资产归属、大二维码
  • 字体：加粗，大号以确保打印清晰

2. 扫码界面

  • 摄像头区域扩大到 50-60vh
  • 精简了所有说明文字
  • 只保留标题、摄像头、操作按钮、手动输入

3. 移动端适配

  • 卡片内边距减小到 12px
  • 圆角减小到 8px
  • 表格转为卡片列表
  • 按钮在移动端全宽显示

⚠️ 注意事项

1. 禁止使用的类名

以下类名已废弃，不要再使用：

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

2. 推荐使用的类名

/* 按钮 */
btn-primary, btn-secondary, btn-icon

/* 输入 */
input, select

/* 卡片 */
card, panel

/* 颜色 */
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
text-status-success, text-status-warning, text-status-error

3. 间距规范

  • 大区块间距：space-y-6（24px）
  • 卡片内间距：gap-4（16px）
  • 按钮组间距：gap-3（12px）

🔍 验证检查清单

在继续开发前，请确认：

  • 所有页面使用统一的深色主题
  • 没有使用已废弃的类名
  • 按钮使用 btn-primary / btn-secondary
  • 输入框使用 input / select
  • 卡片使用 card / panel
  • 颜色使用 text-text-* / bg-bg-*
  • 没有多余的说明文字
  • 移动端样式已测试

📞 后续开发建议

  1. 保持风格一致：所有新页面必须遵循 前端视觉规范.md
  2. 复用现有组件：优先使用已定义的组件类（card、btn-primary等）
  3. 避免重复造轮子：参考已有页面的实现方式
  4. 移动端优先：新功能必须考虑移动端适配

交接日期： 2026-03-17 交接人： Claude 接收人： 下一个 Agent