48 lines
2.0 KiB
Markdown
48 lines
2.0 KiB
Markdown
# admin-web 视图重构指南
|
||
|
||
## 目标
|
||
把现有 Element Plus 页面统一为新的 Sino-MCI 设计语言：现代、统一、操作便捷、信息密度高。
|
||
|
||
## 设计参考
|
||
参考原型：`.stitch/designs/sino-mci-prototype.html`
|
||
|
||
## 通用规范
|
||
|
||
### 页面结构
|
||
1. 顶部工具栏：左侧放搜索/筛选，右侧放唯一主操作按钮（新增/创建/测试发送等）。
|
||
2. 内容区：白色卡片（`el-card` 或自定义 `.bg-white rounded-xl border`）包裹表格。
|
||
3. 表格：
|
||
- 删除无意义复选框；
|
||
- 删除每行多个操作按钮；
|
||
- 行可点击，点击后从右侧滑出抽屉（`el-drawer`）查看/编辑详情；
|
||
- 保留状态开关、标签等必要展示字段；
|
||
- 需要时显示分页（`el-pagination`）。
|
||
4. 新增用弹窗（`el-dialog`），编辑用抽屉，保持两者形式统一：标题栏 + 表单 + 底部确认/取消。
|
||
|
||
### 视觉
|
||
- 主色：`#2563EB`
|
||
- 背景：`#F8FAFC`
|
||
- 卡片/表面：`#FFFFFF`，圆角 12px，边框 `#E2E8F0`
|
||
- 文字主色：`#0F172A`，次要：`#64748B`
|
||
- 字号：正文 14px，标题 16-18px，辅助 12-13px
|
||
- 间距：页面内边距 24px，卡片内部 16-20px
|
||
|
||
### 交互
|
||
- 行 hover 变灰（`hover:bg-slate-50` 等效样式）。
|
||
- 按钮层级：主操作 `type="primary"`，次级 `link` 或默认。
|
||
- 删除操作放在抽屉底部或二次确认弹窗中，不要直接显示在列表行。
|
||
- 状态变更尽量使用行内 `el-switch`，切换后调用 API 并刷新列表。
|
||
|
||
### 代码约束
|
||
- 保留原有 API 调用和业务逻辑，只改模板和样式。
|
||
- 使用 `<script setup lang="ts">`。
|
||
- 继续使用 Element Plus 组件，不引入新依赖。
|
||
- 每个视图文件底部使用 `<style scoped>` 自定义局部样式，避免污染全局。
|
||
- TypeScript 编译不能报错；重构后应能通过 `npm run build`。
|
||
|
||
### 抽屉内容示例
|
||
- 对象名称/标题
|
||
- 基本信息（描述列表或表单）
|
||
- 关联信息（应用、账号、标签、会话等）
|
||
- 底部：保存 / 取消 / 删除
|