This commit is contained in:
2026-02-03 21:35:57 +08:00
parent 93b42a277a
commit 3922409a25
105 changed files with 14758 additions and 5861 deletions

View File

@@ -0,0 +1,206 @@
# Admin 页面重构计划
## 📊 项目现状分析
### 发现的问题
1. **样式问题**
- ❌ 使用硬编码颜色值(#ffffff, #999等
- ❌ 使用硬编码尺寸20px, 24rpx等
- ❌ 不一致的样式规范
2. **代码结构问题**
- ❌ 页面结构不统一
- ❌ 缺少搜索、表格、分页等功能
- ❌ 样式使用原生选择器,没有设计变量
3. **命名规范问题**
- ⚠️ 类名不统一Page/page, Header/header 混用)
- ⚠️ camelCase 和 PascalCase 混用
4. **类型和导入问题**
- ⚠️ 缺少 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 模板
#### 改进的页面结构
```uvue
<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立即修复
1. system-info.uvue ✅ 已完成
2. user-management.uvue
3. product-management.uvue
4. order-management.uvue
5. system-settings.uvue
### 优先级 P1本周完成
6-20. maintain 目录下的所有文件
21-30. product、system、user 目录下的主要文件
### 优先级 P2本月完成
31-80. 其他子页面和组件页面
---
## 🚀 开始修复
现在开始修复 P0 优先级的文件...
**预计完成时间**: 2-3 小时内完成前 5 个主要文件
---
**创建日期**: 2026-01-31
**维护者**: AI Assistant
**状态**: 执行中