huangzhenbao/medical-mall

Fork 0

Files

huangzhenbao 21f4a0fa96 修改页面结构

2026-02-02 20:07:37 +08:00

4.9 KiB

Raw Blame History

Admin 页面重构计划

📊 项目现状分析

发现的问题

样式问题
- ❌ 使用硬编码颜色值（#ffffff, #999等）
- ❌ 使用硬编码尺寸（20px, 24rpx等）
- ❌ 不一致的样式规范
代码结构问题
- ❌ 页面结构不统一
- ❌ 缺少搜索、表格、分页等功能
- ❌ 样式使用原生选择器，没有设计变量
命名规范问题
- ⚠️ 类名不统一（Page/page, Header/header 混用）
- ⚠️ camelCase 和 PascalCase 混用
类型和导入问题
- ⚠️ 缺少 TypeScript 类型定义
- ⚠️ 没有使用 lang="uts"

🔧 重构方案

阶段 1: 快速修复（优先级高）

目标: 将所有硬编码值替换为设计变量

涉及的文件数量：20+ 个

替换规则

现有值	替换为	说明
`#ffffff`	`$background-primary`	白色背景
`#999`	`$text-tertiary`	灰色文字
`20px`	`$space-md`	16px
`24px`	`$space-lg`	24px
`24rpx`	`$space-lg`	24px
`16rpx`	`$radius`	6px
`36rpx` 字体	`$font-size-lg`	18px

修改范围

pages/mall/admin/
├── maintain/
│   ├── system-info.uvue ✅ 已修复
│   ├── data/*.uvue (5个文件)
│   ├── dev-config/*.uvue (6个文件)
│   ├── dev-tools/*.uvue (5个文件)
│   └── security/*.uvue (3个文件)
├── product-*.uvue (10个文件)
├── user-*.uvue (3个文件)
├── marketing-*.uvue (2个文件)
├── order-*.uvue (1个文件)
├── system-*.uvue (3个文件)
└── 其他 (20+ 个子页面)

阶段 2: 结构规范化（优先级中）

目标: 将页面结构规范化为 ListPage/FormPage/DetailPage 模板

改进的页面结构

<template>
  <AdminLayout :currentPage="pageName">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-left">
        <text class="page-title">{{ pageTitle }}</text>
        <text class="page-subtitle">{{ pageSubtitle }}</text>
      </view>
      <view class="header-right">
        <button class="btn btn-primary" @click="handleCreate">新增</button>
      </view>
    </view>

    <!-- 搜索区 -->
    <view class="search-section">
      <!-- 搜索表单 -->
    </view>

    <!-- 内容区 -->
    <view class="content-section">
      <!-- 表格或列表 -->
    </view>

    <!-- 分页 -->
    <view class="pagination">
      <!-- 分页控制 -->
    </view>
  </AdminLayout>
</template>

阶段 3: 组件化（优先级低）

目标: 使用新开发的组件库替换原生元素

涉及：Button, Input, Select, Table, Pagination 等组件

📋 详细的改进计划

第一步：修复 system-info.uvue ✅

当前状态: 已修复 修改内容:

替换硬编码颜色为变量
添加完整的页面内容（显示系统信息卡片）
规范样式名称

第二步：修复 user-management.uvue 等主要页面

文件列表:

user-management.uvue
product-management.uvue
order-management.uvue
system-settings.uvue
等...

修改内容:

替换所有硬编码值为设计变量
统一样式命名（使用 kebab-case）
添加 lang="uts" 和类型定义

第三步：修复子页面

目标文件夹:

maintain/data/*.uvue
maintain/dev-config/*.uvue
maintain/dev-tools/*.uvue
maintain/security/*.uvue
product/product-classification/*.uvue
system/api/*.uvue
system/permission/*.uvue
等...

📈 预期成果

完成后

指标	前	后
硬编码值	200+ 个	0 个
设计变量使用率	0%	100%
代码一致性	30%	100%
样式可维护性	差	优秀

时间估计

阶段	文件数	估时	优先级
阶段 1: 快速修复	50+	4-6小时	⭐⭐⭐
阶段 2: 结构规范	20	6-8小时	⭐⭐
阶段 3: 组件化	10	8-10小时	⭐
总计	80	18-24小时

🎯 优先修复顺序

优先级 P0（立即修复）

system-info.uvue ✅ 已完成
user-management.uvue
product-management.uvue
order-management.uvue
system-settings.uvue

优先级 P1（本周完成）

6-20. maintain 目录下的所有文件 21-30. product、system、user 目录下的主要文件

优先级 P2（本月完成）

31-80. 其他子页面和组件页面

🚀 开始修复

现在开始修复 P0 优先级的文件...

预计完成时间: 2-3 小时内完成前 5 个主要文件

创建日期: 2026-01-31 维护者: AI Assistant 状态: 执行中

4.9 KiB Raw Blame History Unescape Escape