# 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
**状态**: 执行中