xiaozhang/zhibo

Fork 0

cxytw 40a95ee5da 管理端界面优化

2025-12-26 17:58:59 +08:00

17 KiB

Raw Blame History

管理端 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 { width: 206px; }  // 展开状态
.layout-aside-width64 { width: 64px; }         // 收起状态
.layout-aside-width1 { width: 0px; }           // 隐藏状态

// 移动端适配
@media (max-width: 1000px) {
  // 自动切换为 defaults 布局
  // 侧边栏自动收起
}

三、组件设计规范

3.1 卡片组件 (el-card)

<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)

<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)

<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)

<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)

<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)

<!-- 状态标签 -->
<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 标准列表页模板

<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页面模板

<template>
  <div>
    <!-- 数据概览卡片 -->
    <base-info />
    
    <!-- 快捷入口网格 -->
    <grid-menu class="mb14" />
    
    <!-- 数据图表 -->
    <user-overview />
    <visit-chart />
    <user-chart class="mb20" />
  </div>
</template>

4.3 详情页模板

<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布局工具类

// 基础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 字体族

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 字重规范

.f-w-500 { font-weight: 500; }  // 标题
font-weight: 400;                // 正文（默认）

八、按钮规范

8.1 按钮类型

<!-- 主要按钮 -->
<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

<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图标

<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 个公共组件：

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

StatusTag 组件

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

DataPagination 组件

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

组件路径：src/components/common/

10.3 样式优化建议

统一CSS变量命名

// 建议统一前缀
--admin-color-primary
--admin-color-success
--admin-color-warning
--admin-color-danger

抽取公共样式

// 建议创建 common.scss
.page-container { ... }
.search-card { ... }
.data-table { ... }
.dialog-form { ... }

移除冗余样式

删除未使用的 iView 相关样式
合并重复的间距类定义

十一、设计规范检查清单

页面开发检查项

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

样式检查项

主题色使用 CSS 变量
字体大小符合规范
间距使用工具类
响应式适配正常

十二、总结

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

色彩体系：以蓝色为主色调，配合绿/橙/红辅助色
布局结构：左侧菜单 + 顶部导航 + 主内容区
组件规范：统一使用 Element UI 组件
间距系统：基于 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 类型定义报错

17 KiB Raw Blame History Unescape Escape

管理端 UI 界面设计报告

一、设计规范总览

1.1 技术框架

1.2 设计主题色

二、布局设计规范

2.1 整体布局结构

2.2 布局模式

2.3 响应式断点

三、组件设计规范

3.1 卡片组件 (el-card)

3.2 表单组件 (el-form)

3.3 表格组件 (el-table)

3.4 分页组件 (el-pagination)

3.5 弹窗组件 (el-dialog)

3.6 标签组件 (el-tag)

四、页面模板规范

4.1 标准列表页模板

4.2 Dashboard页面模板

4.3 详情页模板

五、间距规范

5.1 外边距 (margin)

5.2 内边距 (padding)

六、Flex布局工具类

七、字体规范

7.1 字体族

7.2 字号规范

7.3 字重规范

八、按钮规范

8.1 按钮类型

8.2 按钮尺寸

九、图标规范

9.1 Element Icons

9.2 自定义SVG图标

十、现有问题与优化建议

10.1 设计一致性问题

10.2 缺失的公共组件

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

SearchForm 组件

StatusTag 组件

DataPagination 组件

10.3 样式优化建议

十一、设计规范检查清单

页面开发检查项

样式检查项

十二、总结

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

13.1 新增公共组件

13.2 优化的界面

13.3 兼容性修复

17 KiB

Raw Blame History