207 lines
4.9 KiB
Markdown
207 lines
4.9 KiB
Markdown
# 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
|
||
**状态**: 执行中
|