WuYongJie/GuDingZiChan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
GuDingZiChan/前端视觉重构台账.md
WuYongJie ceacc2f98d 完善组织同步盘点与资产迁移链路
2026-03-23 11:54:41 +08:00

9.2 KiB
Raw Permalink Blame History

固定资产管理系统 - 前端视觉重构台账

重构日期: 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 标准列表页结构

<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个卡片时使用）

<!-- 不要：使用 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>

四、组件类名速查表

按钮

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

表单

<div class="field-grid">
  <div class="field-stack">
    <label class="field-label">字段名</label>
    <input class="input" />
  </div>
</div>

卡片

<section class="card">...</section>
<div class="panel">...</div>

标签

<span class="badge badge-success">成功</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-error">错误</span>
<span class="badge badge-neutral">中性</span>

移动端卡片列表

<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 末尾添加）

/* 按钮尺寸优化 */
@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