# 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`。

### 抽屉内容示例
- 对象名称/标题
- 基本信息（描述列表或表单）
- 关联信息（应用、账号、标签、会话等）
- 底部：保存 / 取消 / 删除