310 lines
9.2 KiB
Markdown
310 lines
9.2 KiB
Markdown
# 固定资产管理系统 - 前端视觉重构台账
|
||
|
||
**重构日期**: 2026-03-17
|
||
**重构范围**: 全站前端视觉统一（24个页面）+ 移动端全面优化
|
||
**版本**: v2.0
|
||
|
||
---
|
||
|
||
## 一、重构概述
|
||
|
||
本次重构将项目前端视觉全面统一，建立了严格的视觉规范体系，确保所有页面风格一致、排版协调，并全面适配移动端。
|
||
|
||
### 核心目标
|
||
1. **统一页面结构** - 所有页面遵循相同的布局层次
|
||
2. **统一组件样式** - 按钮、输入框、卡片等组件完全一致
|
||
3. **统一响应式策略** - 移动端/桌面端切换时机一致
|
||
4. **优化空间利用** - 筛选栏、统计卡片等布局紧凑高效
|
||
|
||
---
|
||
|
||
## 二、关键文件清单
|
||
|
||
### 核心样式系统（1个）
|
||
| 文件路径 | 说明 | 变更类型 |
|
||
|---------|------|---------|
|
||
| `frontend/src/style.css` | 全局样式系统 | 全面重写 |
|
||
|
||
### 布局框架（1个）
|
||
| 文件路径 | 说明 | 变更类型 |
|
||
|---------|------|---------|
|
||
| `frontend/src/layouts/MainLayout.vue` | 侧边栏+顶部导航布局 | 结构调整 |
|
||
|
||
### 页面组件（24个）
|
||
| 模块 | 文件路径 | 变更类型 |
|
||
|------|---------|---------|
|
||
| 登录 | `views/Login.vue` | 样式统一 |
|
||
| 首页 | `views/dashboard/Dashboard.vue` | 结构重构 |
|
||
| 资产列表 | `views/equipment/EquipmentList.vue` | 结构重构 |
|
||
| 资产表单 | `views/equipment/EquipmentForm.vue` | 结构重构 |
|
||
| 借用列表 | `views/borrow/BorrowList.vue` | 结构重构 |
|
||
| 扫码借出 | `views/borrow/BorrowScan.vue` | 样式统一 |
|
||
| 扫码归还 | `views/borrow/ReturnScan.vue` | 样式统一 |
|
||
| 统计分析 | `views/statistics/Statistics.vue` | 结构重构 |
|
||
| 站内消息 | `views/notifications/NotificationCenter.vue` | 结构重构 |
|
||
| 设置主框架 | `views/settings/Settings.vue` | 结构重构 |
|
||
| 站点设置 | `views/settings/components/SiteSettings.vue` | 样式统一 |
|
||
| 用户管理 | `views/settings/components/UserManagement.vue` | 结构重构 |
|
||
| 人员管理 | `views/settings/components/PersonManagement.vue` | 结构重构 |
|
||
| 部门管理 | `views/settings/components/DepartmentManagement.vue` | 结构重构 |
|
||
| 资产类型 | `views/settings/components/AssetTypeManagement.vue` | 样式统一 |
|
||
| 地址管理 | `views/settings/components/StorageLocationManagement.vue` | 样式统一 |
|
||
| 维修管理 | `views/settings/components/MaintenanceManagement.vue` | 结构重构 |
|
||
| 报废管理 | `views/settings/components/DisposalManagement.vue` | 结构重构 |
|
||
| 操作日志 | `views/settings/components/OperationLogList.vue` | 结构重构 |
|
||
| 组织同步 | `views/settings/components/HrSyncManagement.vue` | 样式统一 |
|
||
| **盘点模块** ||
|
||
| 盘点列表 | `views/inventory/InventoryList.vue` | 结构重构 |
|
||
| 新建盘点 | `views/inventory/InventoryCreate.vue` | 结构重构 |
|
||
| 盘点详情 | `views/inventory/InventoryDetail.vue` | 结构重构 |
|
||
| 手机盘点 | `views/inventory/PublicInventoryTask.vue` | 结构重构 |
|
||
|
||
**总计**: 24 个页面文件
|
||
|
||
---
|
||
|
||
## 三、页面结构模板
|
||
|
||
### 3.1 标准列表页结构
|
||
|
||
```vue
|
||
<template>
|
||
<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 class="page-meta">...</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 筛选区域 -->
|
||
<section class="card">
|
||
<div class="filter-bar">
|
||
<div class="filter-bar__inputs">
|
||
<!-- 筛选输入框和按钮放在同一行 -->
|
||
<input class="input" />
|
||
<select class="select">...</select>
|
||
<button class="btn-secondary text-sm">重置</button>
|
||
<button class="btn-primary text-sm">查询</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据列表 -->
|
||
<section class="card">
|
||
<div class="list-header">
|
||
<h3 class="section-title">列表标题</h3>
|
||
</div>
|
||
|
||
<!-- 移动端(<768px)：卡片列表 -->
|
||
<div class="mobile-card-list md:hidden">
|
||
<article class="mobile-card">...</article>
|
||
</div>
|
||
|
||
<!-- 桌面端(>=768px)：表格 -->
|
||
<div class="hidden md:block">
|
||
<table class="data-table">...</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
### 3.2 双统计卡片布局（2个卡片时使用）
|
||
|
||
```vue
|
||
<!-- 不要：使用 page-meta-grid（适合3个卡片） -->
|
||
<div class="page-meta-grid">
|
||
<div class="page-meta">...</div>
|
||
<div class="page-meta">...</div>
|
||
</div>
|
||
|
||
<!-- 要：使用 flex 布局 -->
|
||
<div class="flex gap-3">
|
||
<div class="page-meta" style="min-width: 120px;">
|
||
<p class="page-meta__label">标签1</p>
|
||
<p class="page-meta__value">值1</p>
|
||
</div>
|
||
<div class="page-meta" style="min-width: 120px;">
|
||
<p class="page-meta__label">标签2</p>
|
||
<p class="page-meta__value">值2</p>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 四、组件类名速查表
|
||
|
||
### 按钮
|
||
```vue
|
||
<button class="btn-primary">主要按钮</button>
|
||
<button class="btn-secondary">次要按钮</button>
|
||
<button class="btn-danger">危险按钮</button>
|
||
<button class="btn-icon"><Icon /></button>
|
||
|
||
<!-- 移动端小尺寸 -->
|
||
<button class="btn-primary text-xs sm:text-sm">保存</button>
|
||
```
|
||
|
||
### 表单
|
||
```vue
|
||
<div class="field-grid">
|
||
<div class="field-stack">
|
||
<label class="field-label">字段名</label>
|
||
<input class="input" />
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### 卡片
|
||
```vue
|
||
<section class="card">...</section>
|
||
<div class="panel">...</div>
|
||
```
|
||
|
||
### 标签
|
||
```vue
|
||
<span class="badge badge-success">成功</span>
|
||
<span class="badge badge-warning">警告</span>
|
||
<span class="badge badge-error">错误</span>
|
||
<span class="badge badge-neutral">中性</span>
|
||
```
|
||
|
||
### 移动端卡片列表
|
||
```vue
|
||
<div class="mobile-card-list md:hidden">
|
||
<article class="mobile-card">
|
||
<div class="mobile-card__row">
|
||
<p class="text-sm font-semibold text-text-primary">标题</p>
|
||
<span class="badge badge-success">状态</span>
|
||
</div>
|
||
<div class="mobile-card__meta">
|
||
<div>
|
||
<p class="mobile-card__label">标签</p>
|
||
<p class="mobile-card__value">值</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 五、移动端优化记录
|
||
|
||
### 5.1 页面移动端适配详情
|
||
|
||
| 页面 | 优化内容 |
|
||
|------|---------|
|
||
| `Dashboard.vue` | 最近借用记录添加 `mobile-card-list`；统计卡片使用 `grid-cols-2` |
|
||
| `Statistics.vue` | 高价值资产添加 `mobile-card-list`；筛选区域使用 `filter-bar__inputs` 网格布局 |
|
||
| `EquipmentList.vue` | 筛选按钮移入 `filter-bar__inputs`；移动端按钮文字简化 |
|
||
| `NotificationCenter.vue` | 统计卡片改为 `flex` 布局；按钮文字简化 |
|
||
| `Settings.vue` | 统计卡片改为 `flex` 布局 |
|
||
| `BorrowList.vue` | 筛选栏改为 `filter-bar__inputs` 网格布局 |
|
||
| `AssetTypeManagement.vue` | 筛选栏改为 `filter-bar__inputs` 网格布局 |
|
||
| `StorageLocationManagement.vue` | 筛选栏改为 `filter-bar__inputs` 网格布局 |
|
||
| `PersonManagement.vue` | 筛选栏改为 `filter-bar__inputs` 网格布局 |
|
||
| `DepartmentManagement.vue` | 筛选栏改为 `filter-bar__inputs` 网格布局；下拉选项文字简化 |
|
||
| 其他设置页面 | 按钮添加 `text-xs sm:text-sm`，文字简化 |
|
||
|
||
### 5.2 按钮文字简化规范
|
||
|
||
| 桌面端 | 移动端 |
|
||
|-------|--------|
|
||
| 全部标记已读 | 全标已读 |
|
||
| 刷新预览 | 刷新 |
|
||
| 立即同步 | 同步 |
|
||
| 通过审批 | 通过 |
|
||
| 驳回申请 | 驳回 |
|
||
| 完成维修 | 完成 |
|
||
| 取消维修 | 取消 |
|
||
| 完成处置 | 完成 |
|
||
| 新增使用者 | 新增 |
|
||
| 下载导入模板 | 下载模板 |
|
||
| 查看配件 N | 配件(N) |
|
||
| 收起配件 | 收起 |
|
||
| 打印标签 | 标签 |
|
||
| 更多筛选 | 更多 |
|
||
| 更多操作 | 操作 |
|
||
| 应用筛选 | 筛选 |
|
||
|
||
### 5.3 移动端样式覆盖（style.css 末尾添加）
|
||
|
||
```css
|
||
/* 按钮尺寸优化 */
|
||
@media (max-width: 767px) {
|
||
.btn-primary, .btn-secondary, .btn-danger {
|
||
min-height: 40px;
|
||
padding: 0.5rem 0.875rem;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
/* 徽章防止压缩成圆 */
|
||
@media (max-width: 767px) {
|
||
.badge {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
padding: 0.25rem 0.5rem;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
/* 卡片紧凑模式 */
|
||
@media (max-width: 767px) {
|
||
.card { padding: 12px; }
|
||
.page-title { font-size: 20px; }
|
||
.page-meta { padding: 12px; }
|
||
}
|
||
|
||
/* iOS 防缩放 */
|
||
@media (max-width: 767px) {
|
||
.input, .select, textarea.input {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
/* 筛选栏网格布局 */
|
||
.filter-bar__inputs {
|
||
display: grid;
|
||
gap: 12px;
|
||
flex: 1;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 六、参考文档
|
||
|
||
- **视觉规范**: `前端视觉规范.md` - 颜色、间距、字体等设计令牌
|
||
- **示例页面**:
|
||
- 列表页: `views/equipment/EquipmentList.vue`
|
||
- 表单页: `views/equipment/EquipmentForm.vue`
|
||
- 设置页: `views/settings/components/UserManagement.vue`
|
||
|
||
---
|
||
|
||
### 断点说明
|
||
|
||
本项目实际代码使用 `md` (768px) 作为列表切换断点：
|
||
|
||
| 断点 | 范围 | 用途 |
|
||
|------|------|------|
|
||
| `md` | >= 768px | 列表切换：卡片 ↔ 表格 |
|
||
| `lg` | >= 1024px | 页面布局调整 |
|
||
|
||
**注意**：主视觉规范文档使用 640px 作为移动端分界，但代码实现统一使用 768px (`md`) 进行列表切换。
|
||
|
||
---
|
||
|
||
**文档版本**: v2.0
|
||
**最后更新**: 2026-03-17
|
||
**维护者**: Claude
|