# 管理端 UI 界面设计报告

> 📝 更新时间：2025-12-26

## 一、设计规范总览

### 1.1 技术框架
| 项目 | 技术选型 |
|------|----------|
| UI框架 | Element UI 2.15.6 |
| CSS预处理 | Sass/SCSS |
| 图标 | Element Icons + 自定义SVG |
| 图表 | ECharts 4.2.1 |
| 布局 | Flex弹性布局 |

### 1.2 设计主题色

**主色调**
| 变量名 | 色值 | 说明 |
|--------|------|------|
| `--prev-color-primary` | #1890ff | 主题蓝 |
| `--prev-color-Auxiliary-color` | #19be6b | 辅助绿（成功） |
| `--prev-color-warning-color` | #ff7d00 | 警告橙 |
| `--prev-color-prompt-color` | #f56464 | 提示红（危险） |

**文字颜色**
| 变量名 | 色值 | 说明 |
|--------|------|------|
| `--prev-color-text-primary` | #606266 | 主要文字 |
| `--prev-color-text-regular` | #303133 | 常规文字 |
| `--prev-color-text-secondary` | #909399 | 次要文字 |
| `--prev-color-text-placeholder` | #c0c4cc | 占位文字 |

**背景色**
| 变量名 | 色值 | 说明 |
|--------|------|------|
| `--prev-bg-main-color` | #f0f2f5 | 主背景 |
| `--prev-bg-white` | #ffffff | 白色背景 |
| `--prev-bg-menuBar` | #282c34 | 菜单栏背景 |

**边框色**
| 变量名 | 色值 | 说明 |
|--------|------|------|
| `--prev-border-color-base` | #dcdfe6 | 基础边框 |
| `--prev-border-color-light` | #e4e7ed | 浅色边框 |

---

## 二、布局设计规范

### 2.1 整体布局结构
```
┌─────────────────────────────────────────────────────┐
│                    顶部导航栏 (50px)                  │
├──────────┬──────────────────────────────────────────┤
│          │                                          │
│  侧边栏   │              主内容区域                   │
│  (206px) │         (padding: 14px)                  │
│          │                                          │
│          │  ┌────────────────────────────────────┐  │
│          │  │         搜索筛选区域                 │  │
│          │  │      (el-card + el-form)           │  │
│          │  └────────────────────────────────────┘  │
│          │                                          │
│          │  ┌────────────────────────────────────┐  │
│          │  │         数据表格区域                 │  │
│          │  │         (el-table)                 │  │
│          │  └────────────────────────────────────┘  │
│          │                                          │
│          │  ┌────────────────────────────────────┐  │
│          │  │         分页组件                    │  │
│          │  │      (el-pagination)               │  │
│          │  └────────────────────────────────────┘  │
│          │                                          │
└──────────┴──────────────────────────────────────────┘
```

### 2.2 布局模式
项目支持4种布局模式：
- `defaults` - 默认布局（左侧菜单）
- `classic` - 经典布局
- `transverse` - 横向布局（顶部菜单）
- `columns` - 分栏布局

### 2.3 响应式断点

**侧边栏宽度**
| 类名 | 宽度 | 状态 |
|------|------|------|
| `.layout-aside-width-default` | 206px | 展开状态 |
| `.layout-aside-width64` | 64px | 收起状态 |
| `.layout-aside-width1` | 0px | 隐藏状态 |

**移动端适配**：当屏幕宽度小于 1000px 时，自动切换为 defaults 布局，侧边栏自动收起。

---

## 三、组件设计规范

### 3.1 卡片组件 (el-card)
```vue
<el-card shadow="never" class="ivu-mt" :body-style="{ padding: 0 }">
  <div class="padding-add">
    <!-- 内容区域 padding: 20px 20px 0 -->
  </div>
</el-card>
```

**样式规范：**
- 无边框：`border: none`
- 无阴影：`shadow="never"`
- 圆角：`border-radius: 4px`
- 内边距：`padding: 20px 20px 0`

### 3.2 表单组件 (el-form)
```vue
<el-form inline size="small" :model="searchForm" label-width="75px">
  <el-form-item label="关键词：">
    <el-input v-model="searchForm.keywords" 
              placeholder="请输入" 
              clearable 
              class="selWidth" />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    <el-button @click="handleReset">重置</el-button>
  </el-form-item>
</el-form>
```

**样式规范：**
- 尺寸：`size="small"`
- 输入框高度：`32px`
- 输入框宽度：`.selWidth { width: 150px~200px }`
- 标签宽度：`75px~100px`
- 字体大小：`12px`

### 3.3 表格组件 (el-table)
```vue
<el-table :data="tableData" v-loading="loading" border size="mini">
  <el-table-column prop="id" label="ID" width="80" align="center" />
  <el-table-column prop="name" label="名称" min-width="120" />
  <el-table-column label="状态" width="100" align="center">
    <template slot-scope="scope">
      <el-tag :type="scope.row.status ? 'success' : 'danger'">
        {{ scope.row.status ? '启用' : '禁用' }}
      </el-tag>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="150" align="center" fixed="right">
    <template slot-scope="scope">
      <el-button type="primary" size="mini">编辑</el-button>
      <el-button type="danger" size="mini">删除</el-button>
    </template>
  </el-table-column>
</el-table>
```

**样式规范：**
- 尺寸：`size="mini"`
- 边框：`border`
- 表头背景：`#f2f6ff` (主题色浅色)
- 表头高度：`48px`
- 行高：`padding: 6px 0`
- 字体大小：`12px`
- 边框颜色：`#f5f5f5`

### 3.4 分页组件 (el-pagination)
```vue
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="searchForm.page"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="searchForm.limit"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  background
/>
```

**样式规范：**
- 位置：右对齐 `.acea-row.row-right`
- 上边距：`margin-top: 22px`
- 激活页码：圆角 `2px`，主题色背景

### 3.5 弹窗组件 (el-dialog)
```vue
<el-dialog 
  :title="dialogTitle" 
  :visible.sync="dialogVisible" 
  width="540px"
  :close-on-click-modal="false"
>
  <el-form :model="form" label-width="100px">
    <!-- 表单内容 -->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleSubmit">保存</el-button>
    <el-button @click="dialogVisible = false">返回</el-button>
  </div>
</el-dialog>
```

**样式规范：**
- 宽度：`500px~700px`（常用540px）
- 圆角：`6px`
- 标题：`14px`，`font-weight: 500`
- 头部边框：`border-bottom: 1px solid #eee`
- 内容区最大高度：`670px`
- 内边距：`padding: 30px 24px 0 24px`

### 3.6 标签组件 (el-tag)
```vue
<!-- 状态标签 -->
<el-tag type="success">启用</el-tag>
<el-tag type="danger">禁用</el-tag>
<el-tag type="warning">待处理</el-tag>
<el-tag type="info">已完成</el-tag>

<!-- 自定义样式标签 -->
<el-tag class="notStartTag tag-background">未开始</el-tag>  <!-- 红色边框 -->
<el-tag class="doingTag tag-background">进行中</el-tag>     <!-- 橙色边框 -->
<el-tag class="endTag tag-background">已结束</el-tag>       <!-- 灰色边框 -->
```

---

## 四、页面模板规范

### 4.1 标准列表页模板
```vue
<template>
  <div class="divBox">
    <!-- 搜索区域 -->
    <el-card shadow="never" class="ivu-mt">
      <div class="padding-add">
        <el-form inline size="small" :model="searchForm" class="mb20">
          <!-- 搜索表单项 -->
        </el-form>
        
        <!-- 操作按钮 -->
        <div class="mb20">
          <el-button type="primary" size="small" @click="handleAdd">+ 添加</el-button>
        </div>
        
        <!-- 数据表格 -->
        <el-table :data="tableData" v-loading="loading" border>
          <!-- 表格列 -->
        </el-table>
        
        <!-- 分页 -->
        <div class="acea-row row-right page mt20">
          <el-pagination ... />
        </div>
      </div>
    </el-card>
    
    <!-- 弹窗 -->
    <el-dialog ...>
      <!-- 弹窗内容 -->
    </el-dialog>
  </div>
</template>
```

### 4.2 Dashboard页面模板
```vue
<template>
  <div>
    <!-- 数据概览卡片 -->
    <base-info />
    
    <!-- 快捷入口网格 -->
    <grid-menu class="mb14" />
    
    <!-- 数据图表 -->
    <user-overview />
    <visit-chart />
    <user-chart class="mb20" />
  </div>
</template>
```

### 4.3 详情页模板
```vue
<template>
  <div class="divBox">
    <el-card shadow="never">
      <div class="padding-add">
        <!-- 页面头部 -->
        <el-page-header @back="goBack" content="详情页标题" />
        
        <!-- 详情内容 -->
        <el-descriptions :column="2" border class="mt20">
          <el-descriptions-item label="字段名">值</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>
```

---

## 五、间距规范

### 5.1 外边距 (margin)

| 类名 | 值 | 用途 |
|------|-----|------|
| `.mt5` | margin-top: 5px | - |
| `.mt10` | margin-top: 10px | - |
| `.mt14` | margin-top: 14px | 卡片间距 |
| `.mt20` | margin-top: 20px | 常用间距 |
| `.mt30` | margin-top: 30px | - |
| `.mb5` | margin-bottom: 5px | - |
| `.mb10` | margin-bottom: 10px | - |
| `.mb14` | margin-bottom: 14px | - |
| `.mb15` | margin-bottom: 15px | - |
| `.mb20` | margin-bottom: 20px | 表单/按钮下间距 |
| `.mb30` | margin-bottom: 30px | - |
| `.ml10` | margin-left: 10px | - |
| `.ml20` | margin-left: 20px | - |
| `.mr10` | margin-right: 10px | - |
| `.mr14` | margin-right: 14px | - |
| `.mr20` | margin-right: 20px | - |

### 5.2 内边距 (padding)

| 类名 | 值 | 用途 |
|------|-----|------|
| `.padding-add` | padding: 20px 20px 0 | 卡片内容区 |
| `.p20` | padding: 20px | - |
| `.p30` | padding: 30px | - |
| `.px20` | padding: 0 20px | - |
| `.px35` | padding: 0 35px | - |

---

## 六、Flex布局工具类

| 类名组合 | 效果 |
|----------|------|
| `.acea-row` | display: flex; flex-wrap: wrap |
| `.acea-row.row-middle` | 垂直居中 (align-items: center) |
| `.acea-row.row-top` | 顶部对齐 (align-items: flex-start) |
| `.acea-row.row-bottom` | 底部对齐 (align-items: flex-end) |
| `.acea-row.row-center` | 水平居中 (justify-content: center) |
| `.acea-row.row-left` | 左对齐 (justify-content: flex-start) |
| `.acea-row.row-right` | 右对齐 (justify-content: flex-end) |
| `.acea-row.row-between` | 两端对齐 (justify-content: space-between) |
| `.acea-row.row-around` | 均匀分布 (justify-content: space-around) |
| `.acea-row.row-center-wrapper` | 水平垂直居中 |
| `.acea-row.row-between-wrapper` | 两端对齐+垂直居中 |

---

## 七、字体规范

### 7.1 字体族

```
Helvetica Neue, Helvetica, PingFang SC, 
Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif
```

### 7.2 字号规范
| 用途 | 字号 | 类名 |
|------|------|------|
| 页面标题 | 18px | `.f-s-18` |
| 卡片标题 | 14px | `.font14` |
| 正文内容 | 12px | `.font12` |
| 表格内容 | 12px | - |
| 表单标签 | 12px | - |
| 辅助说明 | 12px | `.desc` |

### 7.3 字重规范

| 用途 | 字重 |
|------|------|
| 标题 | font-weight: 500 (`.f-w-500`) |
| 正文 | font-weight: 400 (默认) |

---

## 八、按钮规范

### 8.1 按钮类型
```vue
<!-- 主要按钮 -->
<el-button type="primary" size="small">主要操作</el-button>

<!-- 成功按钮 -->
<el-button type="success" size="small">成功操作</el-button>

<!-- 警告按钮 -->
<el-button type="warning" size="small">警告操作</el-button>

<!-- 危险按钮 -->
<el-button type="danger" size="small">危险操作</el-button>

<!-- 默认按钮 -->
<el-button size="small">默认操作</el-button>

<!-- 文字按钮 -->
<el-button type="text" size="small">文字按钮</el-button>
```

### 8.2 按钮尺寸
- 表格内操作：`size="mini"`
- 搜索/表单：`size="small"`
- 页面主操作：默认尺寸

---

## 九、图标规范

### 9.1 Element Icons
```vue
<i class="el-icon-search"></i>      <!-- 搜索 -->
<i class="el-icon-plus"></i>        <!-- 添加 -->
<i class="el-icon-edit"></i>        <!-- 编辑 -->
<i class="el-icon-delete"></i>      <!-- 删除 -->
<i class="el-icon-refresh"></i>     <!-- 刷新 -->
<i class="el-icon-arrow-down"></i>  <!-- 展开 -->
<i class="el-icon-arrow-up"></i>    <!-- 收起 -->
```

### 9.2 自定义SVG图标
```vue
<svg-icon icon-class="icon-name" />
```

---

## 十、现有问题与优化建议

### 10.1 设计一致性问题

| 问题 | 现状 | 建议 |
|------|------|------|
| 按钮样式不统一 | 部分用 `type="text"`，部分用 `size="mini"` | 统一为表格内 `mini`，表单 `small` |
| 弹窗宽度不一致 | 500px/540px/600px/700px 混用 | 统一为 540px（小）/ 700px（大） |
| 搜索框宽度不一致 | 150px/180px/200px 混用 | 统一为 180px |
| 间距类名混乱 | `mt20`/`mt-20`/`margin-top: 20px` 混用 | 统一使用工具类 |

### 10.2 缺失的公共组件

建议抽取以下公共组件：

```
components/
├── SearchForm/          # 通用搜索表单 ✅ 已创建
│   └── index.vue
├── DataTable/           # 通用数据表格
│   └── index.vue
├── PageHeader/          # 页面头部（已有）
│   └── index.vue
├── StatusTag/           # 状态标签 ✅ 已创建
│   └── index.vue
├── ActionButtons/       # 操作按钮组
│   └── index.vue
├── ConfirmDialog/       # 确认弹窗
│   └── index.vue
└── DataPagination/      # 分页组件 ✅ 已创建
    └── index.vue
```

### 10.3 新增公共组件 (2025-12-26)

本次优化新增了 3 个公共组件：

#### SearchForm 组件
```vue
<!-- 使用示例 -->
<search-form :form="searchForm" @search="handleSearch" @reset="handleReset">
  <el-form-item label="关键词">
    <el-input v-model="searchForm.keyword" />
  </el-form-item>
</search-form>
```

#### StatusTag 组件
```vue
<!-- 使用示例 -->
<status-tag :status="row.status" type="enable" />  <!-- 启用/禁用 -->
<status-tag :status="row.status" type="process" /> <!-- 待处理/已处理 -->
<status-tag :status="row.status" type="audit" />   <!-- 审核状态 -->
```

#### DataPagination 组件
```vue
<!-- 使用示例 -->
<data-pagination 
  :page.sync="searchForm.page" 
  :limit.sync="searchForm.limit" 
  :total="total"
  @size-change="getList"
  @current-change="getList"
/>
```

组件路径：`src/components/common/`

### 10.3 样式优化建议

1. **统一CSS变量命名**
```scss
// 建议统一前缀
--admin-color-primary
--admin-color-success
--admin-color-warning
--admin-color-danger
```

2. **抽取公共样式**
```scss
// 建议创建 common.scss
.page-container { ... }
.search-card { ... }
.data-table { ... }
.dialog-form { ... }
```

3. **移除冗余样式**
- 删除未使用的 iView 相关样式
- 合并重复的间距类定义

---

## 十一、设计规范检查清单

### 页面开发检查项
- [ ] 使用 `el-card` 包裹内容区域
- [ ] 搜索表单使用 `inline` + `size="small"`
- [ ] 表格使用 `border` + `size="mini"`
- [ ] 分页使用 `background` 样式
- [ ] 弹窗宽度为 540px 或 700px
- [ ] 按钮间距使用 `mr10` 或 `mr14`
- [ ] 卡片间距使用 `mt14`
- [ ] 表单下间距使用 `mb20`

### 样式检查项
- [ ] 主题色使用 CSS 变量
- [ ] 字体大小符合规范
- [ ] 间距使用工具类
- [ ] 响应式适配正常

---

## 十二、总结

本管理端UI设计基于 Element UI，整体风格简洁专业。主要特点：

1. **色彩体系**：以蓝色为主色调，配合绿/橙/红辅助色
2. **布局结构**：左侧菜单 + 顶部导航 + 主内容区
3. **组件规范**：统一使用 Element UI 组件
4. **间距系统**：基于 5px 倍数的间距体系

**待改进项**：
- 统一组件尺寸和间距
- ~~抽取更多公共组件~~ ✅ 已完成部分
- 完善响应式适配
- 清理冗余样式代码

---

## 十三、优化记录 (2025-12-26)

### 13.1 新增公共组件
| 组件 | 路径 | 功能 |
|------|------|------|
| SearchForm | `components/common/SearchForm.vue` | 通用搜索表单 |
| StatusTag | `components/common/StatusTag.vue` | 状态标签（多种预设） |
| DataPagination | `components/common/DataPagination.vue` | 分页组件 |

### 13.2 优化的界面
| 界面 | 优化内容 |
|------|----------|
| withdraw/index.vue | Tab切换：待审核/已审核 |
| appeal/index.vue | 完整申诉管理功能 |
| certification/index.vue | 认证审核+统计卡片 |
| fans/index.vue | 粉丝管理功能 |
| comment/index.vue | Tab切换：动态/直播/商品评论 |
| newtask/index.vue | 社会动态管理 |

### 13.3 兼容性修复
- 将 ES2020 可选链语法 `?.` 改为兼容写法
- 修复 jsconfig.json 类型定义报错