2.0 KiB
2.0 KiB
admin-web 视图重构指南
目标
把现有 Element Plus 页面统一为新的 Sino-MCI 设计语言：现代、统一、操作便捷、信息密度高。
设计参考
参考原型：.stitch/designs/sino-mci-prototype.html
通用规范
页面结构
- 顶部工具栏：左侧放搜索/筛选，右侧放唯一主操作按钮（新增/创建/测试发送等）。
- 内容区：白色卡片（
el-card或自定义.bg-white rounded-xl border）包裹表格。 - 表格：
- 删除无意义复选框；
- 删除每行多个操作按钮；
- 行可点击，点击后从右侧滑出抽屉（
el-drawer）查看/编辑详情； - 保留状态开关、标签等必要展示字段；
- 需要时显示分页（
el-pagination）。
- 新增用弹窗（
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。
抽屉内容示例
- 对象名称/标题
- 基本信息（描述列表或表单）
- 关联信息（应用、账号、标签、会话等）
- 底部：保存 / 取消 / 删除