600 lines
17 KiB
Markdown
600 lines
17 KiB
Markdown
# 管理端 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 设计主题色
|
||
```scss
|
||
// 主色调
|
||
--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 响应式断点
|
||
```scss
|
||
// 侧边栏宽度
|
||
.layout-aside-width-default { width: 206px; } // 展开状态
|
||
.layout-aside-width64 { width: 64px; } // 收起状态
|
||
.layout-aside-width1 { width: 0px; } // 隐藏状态
|
||
|
||
// 移动端适配
|
||
@media (max-width: 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)
|
||
```scss
|
||
.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)
|
||
```scss
|
||
.padding-add { padding: 20px 20px 0; } // 卡片内容区
|
||
.p20 { padding: 20px; }
|
||
.p30 { padding: 30px; }
|
||
.px20 { padding: 0 20px; }
|
||
.px35 { padding: 0 35px; }
|
||
```
|
||
|
||
---
|
||
|
||
## 六、Flex布局工具类
|
||
|
||
```scss
|
||
// 基础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 {
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 两端对齐居中
|
||
.acea-row.row-between-wrapper {
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 七、字体规范
|
||
|
||
### 7.1 字体族
|
||
```scss
|
||
font-family: 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 字重规范
|
||
```scss
|
||
.f-w-500 { font-weight: 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 类型定义报错
|