# 智媒通 — UI 界面功能需求描述文档

> 基于前端源码 `client/src/views/`、`client/src/components/`、`client/src/router/index.ts` 实际页面梳理，仅描述当前已实现的功能。

---

## 1. 页面总览

当前系统共 **16 个页面**，分布在 **8 个功能模块** 中。

| 模块 | 页面 | 路由 | 源文件 |
|------|------|------|--------|
| 认证/初始化 | 服务器配置 | `/server-config` | `views/ServerConfig/index.vue` |
| | 登录 | `/login` | `views/Login/index.vue` |
| | 注册 | `/register` | `views/Register/index.vue` |
| 看板 | 数据看板 | `/` | `views/Dashboard/index.vue` |
| 账号管理 | 账号管理 | `/accounts` | `views/Accounts/index.vue` |
| 作品管理 | 作品管理 | `/works` | `views/Works/index.vue` |
| 发布管理 | 发布管理 | `/publish` | `views/Publish/index.vue` |
| 评论管理 | 评论管理 | `/comments` | `views/Comments/index.vue` |
| 定时任务 | 定时任务 | `/schedule` | `views/Schedule/index.vue` |
| 数据分析 | 数据总览 | `/analytics/overview` | `views/Analytics/Overview/index.vue` |
| | 平台分析 | `/analytics/platform` | `views/Analytics/Platform/index.vue` |
| | 平台详情 | `/analytics/platform-detail/:platform` | `views/Analytics/PlatformDetail/index.vue` |
| | 账号分析 | `/analytics/account` | `views/Analytics/Account/index.vue` |
| | 作品分析 | `/analytics/work` | `views/Analytics/Work/index.vue` |
| 系统管理 | 系统设置 | `/settings` | `views/Settings/index.vue` |
| | 个人中心 | `/profile` | `views/Profile/index.vue` |

---

## 2. 公共组件

| 组件 | 源文件 | 用途 |
|------|--------|------|
| MainLayout | `layouts/MainLayout.vue` | 主布局壳：侧边栏导航 + 内容区 + 标签页系统 |
| BrowserTab | `components/BrowserTab.vue` | 内嵌浏览器标签页，用于平台扫码登录 |
| CaptchaDialog | `components/CaptchaDialog.vue` | 验证码弹窗 |
| TaskProgressDialog | `components/TaskProgressDialog.vue` | 后台任务进度弹窗 |

---

## 3. 功能模块详细描述

---

### 3.1 服务器配置（ServerConfig）

**路由**: `/server-config` | **认证**: 无

首次启动或服务未配置时显示。居中卡片布局，自定义无边框标题栏（最小化/最大化/关闭按钮）。

- 展示服务端地址和 Python 服务地址（由 Electron 启动时自动配置，只读）
- "返回" 按钮
- Electron 环境下额外显示启动日志区域，可点击"打开日志文件"

---

### 3.2 登录（Login）

**路由**: `/login` | **认证**: 无

居中卡片布局，自定义无边框标题栏，背景有圆形装饰。

**登录方式切换**：密码登录 / 手机验证码登录（两个 Tab）

**密码登录表单**：
- 用户名或邮箱（Input，前缀 User 图标）
- 密码（Input password，前缀 Lock 图标，可切换显示）
- 记住我（Checkbox）
- 登录按钮（primary）

**手机验证码登录表单**：
- 手机号（Input，前缀 Phone 图标）
- 验证码（Input + "获取验证码"按钮）
- 登录按钮

底部"还没有账号？立即注册"链接跳转 `/register`。

---

### 3.3 注册（Register）

**路由**: `/register` | **认证**: 无

布局风格与登录页一致。

**注册表单**：
- 用户名（必填，3-50 字符）
- 邮箱（选填，邮箱格式校验）
- 密码（必填，至少 6 字符）
- 确认密码（必填，需与密码一致）
- 注册按钮

底部"已有账号？返回登录"链接跳转 `/login`。

---

### 3.4 数据看板（Dashboard）

**路由**: `/` | **认证**: 需要

页面头部：标题 "数据看板" + "刷新数据"按钮。

**统计卡片**：一行多列，每个卡片包含图标（带背景色）+ 数值 + 标签。

**平台账号状态**：
- 账号列表，每项显示：头像(44x44 Avatar)、账号名、平台名、状态 Tag（`active`=绿色"正常"，其他=红色"已过期"）
- 空状态显示 "暂无账号" + "添加账号"按钮
- 右上角"管理账号"链接 -> `/accounts`

**最近发布任务**：
- 任务列表，显示标题、目标平台、状态
- 空状态显示 "暂无任务" + "创建任务"按钮
- 右上角"查看全部"链接 -> `/publish`

**数据趋势图表**：
- ECharts 图表，支持时间范围选择
- 展示播放量/点赞/评论等趋势数据

---

### 3.5 账号管理（Accounts）

**路由**: `/accounts` | **认证**: 需要

**头部操作**：
- "管理分组" 按钮 -> 打开分组管理弹窗
- "刷新所有" 按钮（无账号时 disabled）
- "浏览器登录" primary 按钮 -> 打开平台选择弹窗

**筛选栏**：
- 平台下拉（各支持平台列表）
- 分组下拉（用户创建的分组）
- 刷新按钮

**账号表格**（el-table）：

| 列 | 说明 |
|----|------|
| 账号 | 头像(40x40) + 账号名 |
| 平台 | 平台名称 Tag |
| 粉丝数 | 格式化数字 |
| 作品数 | 整数 |
| 登录状态 | Tag（正常/已过期） |
| Cookie 过期时间 | 日期 |
| 分组 | 分组名称 |
| 操作 | 编辑 / 删除 / 同步作品 / 同步评论 等 |

**浏览器登录流程**：
1. 选择平台 -> 2. 打开 BrowserTab 内嵌浏览器 -> 3. 用户扫码/密码登录 -> 4. 自动提取 Cookie 保存 -> 5. 关闭标签页刷新列表

**分组管理弹窗**：
- 分组列表展示
- 新增 / 编辑 / 删除分组

---

### 3.6 作品管理（Works）

**路由**: `/works` | **认证**: 需要

**头部统计**：总作品数、总播放量、总点赞数。

**筛选栏**：
- 选择账号（Select，展示账号名+平台）
- 平台（Select）
- 状态（Select）：已发布 / 审核中 / 未通过 / 草稿 / 已删除
- 搜索关键词（Input，回车触发）
- "搜索" 按钮
- "同步作品" / "停止同步" 按钮（互斥显示，根据 taskStore.runningSyncWorksTask）
- "同步评论" 按钮

**作品卡片网格**（非表格，卡片布局）：
- 封面图（加载失败显示占位图）
- 标题（截断）
- 平台 Tag
- 数据信息（播放、点赞、评论，格式化显示）
- 发布时间
- 点击卡片打开详情弹窗

**作品详情弹窗**：完整信息 + 数据统计 + 关联评论列表 + 同步评论操作。

空状态：`el-empty` + "同步作品"按钮。

---

### 3.7 发布管理（Publish）

**路由**: `/publish` | **认证**: 需要

**头部操作**：
- 搜索框（搜索标题/文件名，回车触发，可清除）
- 刷新按钮
- "新建发布" primary 按钮 -> 打开创建弹窗

**任务表格**（el-table）：

| 列 | 说明 |
|----|------|
| 视频 | 标题 + 视频文件名 |
| 平台/渠道 | 目标平台 Tag 列表 |
| 目标账号 | 数量 + 成功(绿色Tag)/失败(红色Tag) 计数 |
| 状态 | Tag |
| 操作 | 查看详情 / 删除 |

**创建发布任务弹窗**：
- 选择视频（上传或选择已有）
- 填写信息（标题、描述、标签、封面）
- 选择平台（多选）
- 选择账号（按平台选择，支持多选）
- 高级选项（定时发布时间等）

**任务状态**：待发布 -> 发布中 -> 已完成/失败

---

### 3.8 评论管理（Comments）

**路由**: `/comments` | **认证**: 需要

**头部统计**：未读数、待回复数。

**当前作品信息卡**（条件显示，从作品页跳转时）：
- 封面缩略图 + 标题 + 平台 Tag + 发布时间 + 评论数
- "查看全部评论"链接清除作品筛选

**筛选栏**：
- 选择作品（Select，filterable）
- 账号（Select）
- 状态（Select）：未读 / 已读
- 搜索关键词（Input）
- "搜索" 按钮
- "全部标记已读" 按钮

**评论列表**（非表格，列表布局）：
- 头像(40x40) + 昵称 + 时间 + 未读Tag
- 评论正文
- 所属作品信息（未按作品筛选时显示）
- 操作：回复 / 标记已读

**回复功能**：点击展开回复输入框，提交后调用后端 API。

---

### 3.9 定时任务（Schedule）

**路由**: `/schedule` | **认证**: 需要

**头部**：标题 + "创建任务" primary 按钮。

**任务表格**（el-table）：

| 列 | 宽度 | 说明 |
|----|------|------|
| 任务名称 | min 160px | 文本 |
| 任务类型 | 120px | Tag |
| 执行时间 | 160px | HH:mm |
| 重复 | 140px | 文本 |
| 状态 | 100px | Switch（启用/停用） |
| 下次执行 | 170px | 日期 / "已停用" |
| 操作 | 150px fixed | 编辑 / 删除 |

**创建/编辑任务弹窗**（520px Dialog）：
- 任务名称（Input）
- 任务类型（Select）：同步评论 / 同步作品 / 刷新账号
- 执行时间（TimePicker，HH:mm）
- 重复类型（Radio）：不重复 / 每天 / 每周 / 每月
- 具体日期（每周显示周一~周日，每月显示 1~31 日）

---

### 3.10 数据分析（Analytics）

**路由**: `/analytics`（含子路由）| **认证**: 需要

5 个子页面，均有日期范围筛选（开始日期 + 结束日期）和快捷按钮（昨天 / 近 7 天 / 近 30 天 / 本月 / 上月），均支持"导出数据"。

---

#### 3.10.1 数据总览（AnalyticsOverview）

`/analytics/overview`（默认子页面）

- 筛选：分组 + 平台 + 刷新数据
- 提示文字："昨日数据一般平台会在中午12点到下午2点更新，建议2点后查询"
- 统计卡片行（账号数、粉丝总量等）
- 搜索框（搜索账号名，回车触发）
- 数据表格：各账号核心指标，支持分页

---

#### 3.10.2 平台分析（AnalyticsPlatform）

`/analytics/platform`

- 数据表格：各平台汇总指标（播放/阅读量、点赞、评论、收藏等）
- 每行包含平台图标 + 平台名称
- 支持点击平台名跳转平台详情

---

#### 3.10.3 平台详情（AnalyticsPlatformDetail）

`/analytics/platform-detail/:platform`

- 额外筛选：平台选择
- 汇总统计卡片（该平台总量指标）
- 按日期维度的详细数据表格
- 图表可视化（ECharts 折线图/柱状图）

---

#### 3.10.4 账号分析（AnalyticsAccount）

`/analytics/account`

- 额外筛选：分组 + 平台
- 数据表格：各账号按时间范围的核心指标
- 支持分页

---

#### 3.10.5 作品分析（AnalyticsWork）

`/analytics/work`

- 额外筛选：多选账号（collapse-tags）
- 汇总统计卡片
- 数据表格：作品级别详细数据
- 支持分页

---

### 3.11 系统设置（Settings）

**路由**: `/settings` | **认证**: 需要

Tab 页切换，共 5 个 Tab。

#### Tab 1: 基础设置（name: `basic`）

| 配置项 | 控件 | 说明 |
|--------|------|------|
| 开放注册 | Switch | 是否允许新用户自行注册 |
| 默认用户角色 | Select | 运营 / 编辑 / 管理员 |

"保存设置"按钮。

#### Tab 2: 发布代理（name: `publish-proxy`）

| 配置项 | 控件 | 说明 |
|--------|------|------|
| 神龙产品Key | Input | 发布时代理 IP 用的 Key |
| 签名 | Input password | show-password，代理服务签名 |

"保存配置" / "刷新"按钮。

#### Tab 3: Python 服务（name: `python-service`）

| 配置项 | 控件 | 说明 |
|--------|------|------|
| 服务地址 | Input | 如 `http://localhost:5005` |

"保存配置" / "刷新" / "测试连接"按钮。测试结果以 `el-alert` 显示成功/失败。

#### Tab 4: 用户管理（name: `users`）

**用户表格**：

| 列 | 说明 |
|----|------|
| 用户名 | — |
| 邮箱 | — |
| 角色 | Tag（运营/编辑/管理员） |
| 状态 | Tag（正常-绿/禁用-红） |
| 操作 | 编辑 / 删除（不可删除自己） |

**新增用户弹窗**（480px）：用户名（必填 3-50 字符）、密码（必填 >=6 字符）、邮箱（选填）、角色（Select）。

**编辑用户弹窗**（480px）：用户名（disabled）、新密码（留空不修改）、邮箱、角色、状态（正常/禁用）。

#### Tab 5: 系统状态（name: `status`）

`el-descriptions` 展示：
- 数据库连接状态（已连接/未连接）
- Redis 连接状态（已连接/未连接）
- 在线用户数
- 总用户数
- 平台账号数
- 发布任务数
- 运行时间

---

### 3.12 个人中心（Profile）

**路由**: `/profile` | **认证**: 需要

两栏布局（左 8 / 右 16）。

**左栏 - 个人信息卡**：
- 头像 100x100，点击可上传更换
- 用户名、角色 Tag、注册时间、上次登录时间

**右栏 - 两个 Tab**：

Tab "基本信息"：昵称 Input + 邮箱 Input + "保存修改"按钮。

Tab "修改密码"：当前密码 + 新密码（>=6 字符）+ 确认密码（需一致）+ "修改密码"按钮。

---

## 4. 全局交互规范

### 4.1 窗口

- 无边框自定义标题栏（最小化/最大化/关闭）
- 系统托盘支持（最小化到托盘，后台运行）
- `Ctrl+W` 关闭当前标签页
- 标签页右键菜单

### 4.2 路由守卫

- 未配置服务器 -> 跳转 `/server-config`
- 未登录 -> 跳转 `/login`
- 已登录访问登录/注册 -> 跳转 `/`
- 服务未就绪时阻塞导航（登录/注册/服务器配置除外），100ms 轮询等待

### 4.3 通用 UI 模式

| 场景 | 实现 |
|------|------|
| 加载中 | `v-loading` 指令 / 按钮 `:loading` 属性 |
| 空数据 | `el-empty` + 引导操作按钮 |
| 成功提示 | `ElMessage.success` |
| 错误提示 | `ElMessage.error` |
| 危险操作确认 | `ElMessageBox.confirm` |
| 表单校验 | `el-form` + `rules`，字段级红色提示 |
| 分页 | `el-pagination`，支持每页条数选择 |

### 4.4 实时通信

WebSocket 事件（Server -> Client）：

| 事件 | 用途 |
|------|------|
| `TASK_CREATED` | 新任务创建 |
| `TASK_PROGRESS` | 任务进度更新 -> TaskProgressDialog 展示 |
| `TASK_COMPLETED` | 任务完成 |
| `TASK_FAILED` | 任务失败 |
| `CAPTCHA_REQUIRED` | 需要验证码 -> CaptchaDialog 弹窗 |