multi-platform-media-manage/docs/UI-FUNCTIONAL-REQUIREMENTS.md

智媒通 — 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 弹窗