venue-operations-research-frontend-page-component-checklist.md 18.9 KB

Raw Blame History Permalink



场馆运营反馈调研平台前端页面与组件功能清单

更新时间：2026-04-09

适用对象：产品设计、前端设计、Pencil 画板规划

文档类型：说明 + 参考清单  


1. 文档目标

本文档用于在进行 Pencil 前端设计前，先统一当前项目的前端页面范围、页面职责、组件清单、关键交互、状态反馈与接口依赖。

这份清单以当前仓库代码为准，目标不是重新定义产品，而是把已经存在的页面结构和业务动作整理成可设计、可拆板、可继续扩展的界面说明。


2. 设计范围

当前 Web 前端主工作台共包含 6 个一级页面：


首页 Dashboard
任务中心
爬虫管理
引擎工作台
报告中心
配置中心


当前不在本轮设计主范围内的页面：


登录 / 注册 / 用户中心
权限管理
独立的竞品对比详情页
独立的数据详情页 / 证据详情页
独立的报告模板管理页


说明：以上能力在产品文档中有延展方向，但当前代码中尚未形成独立页面入口，因此建议不要在第一轮 Pencil 主流程中额外扩展。


3. 当前信息架构


3.1 一级路由


路由
页面名称
主要目标


/dashboard
首页 Dashboard
总览系统、研究任务、引擎、报告状态


/tasks
任务中心
创建、编辑、切换研究任务，查看任务与报告列表


/crawler
爬虫管理
平台登录、采集参数配置、执行与排障


/engines
引擎工作台
切换 Insight / Media / Query / Forum，查看运行输出


/reports
报告中心
生成报告、查看任务历史、预览与下载


/settings
配置中心
维护数据库、模型、搜索和网络配置


3.2 全局业务主链路

当前前端承载的主业务流程为：


在任务中心创建或切换研究任务
把研究任务同步到爬虫侧，准备平台采集
在爬虫管理中完成登录检查、登录、采集任务启动
在引擎工作台中向多引擎分发研究指令并查看运行输出
在报告中心生成、查看和下载最终报告


因此在视觉设计上，建议将整个系统理解为一个“多阶段工作台”，而不是多个彼此独立的后台页面。


4. 全局框架组件

全局框架由 WorkbenchFrame 承载，是所有页面的统一壳层。


4.1 全局壳层


组件 / 区块
作用
设计要点


左侧边栏 Sidebar
一级导航、品牌信息、当前研究对象摘要
需要固定、清晰、支持桌面与移动端切换


顶部栏 Topbar
当前页面标题、系统状态、全局操作按钮
强调系统状态与高频动作


主内容区 RouterView
承载 6 个一级页面
页面切换要明显但不过度花哨


移动端抽屉导航
在窄屏下替代左侧边栏
需要保留导航信息密度但避免拥挤


4.2 全局高频动作


动作
说明


刷新状态
刷新研究、爬虫、引擎、报告等整体状态


启动系统
启动 Insight / Media / Query 等运行环境


打开配置中心
快速进入系统配置页


关闭系统
停止工作台相关运行状态


4.3 全局状态反馈

设计中需要统一这些状态表达方式：


系统已启动 / 等待启动
任务运行中 / 空闲可操作
成功 / 运行中 / 风险 / 错误
空状态
加载中
保存中
生成中


建议在 Pencil 中优先定义一套统一的状态标签、按钮层级和卡片视觉规范，后续各页面复用。


5. 页面清单总览


页面
页面目标
页面级主组件
关键接口


Dashboard
汇总当前研究、爬虫、引擎、报告的总览状态
Hero、指标卡、当前任务卡、引擎卡、最近任务列表、报告状态卡
研究任务、爬虫状态、系统状态、报告状态


任务中心
统一管理研究任务与报告任务，并承载研究任务编辑
研究任务表格、报告任务表格、研究任务工作区

/api/research/*、/api/search、报告状态接口


爬虫管理
完成平台登录、采集配置、执行控制和排障
平台条、控制表单、状态面板、排障助手、历史记录
/api/crawler/*


引擎工作台
查看各分析引擎运行状态和日志输出
引擎切换卡、引擎页签、运行区、Forum 流、控制台

/api/system/*、/api/status、/api/output/*、/api/forum/log


报告中心
生成报告并完成预览、下载和历史回看
模板输入框、任务板、预览区
/api/report/*


配置中心
维护环境变量配置
配置分组折叠面板、字段表单
/api/config


6. 各页面功能清单


6.1 首页 Dashboard


页面目标

把当前系统的关键状态集中收敛到一个“总控台”视图中，方便快速判断下一步该去哪个工作区继续操作。


页面模块


模块
功能说明
组件来源


页面 Hero 区
说明当前工作台价值，并提供跳转按钮
DashboardView.vue


指标卡网格
展示当前研究对象、采集状态、引擎状态、报告进度
overviewMetrics


当前研究任务卡
展示当前激活任务摘要、研究重点、辅助信息

activeTask、summaryItems


引擎状态卡
展示 Insight / Media / Query / Forum 当前状态与入口
engineOverview


最近研究任务列表
展示近期任务，便于快速切换上下文
recentResearchTasks


报告交付状态卡
展示当前报告任务进度与最近报告任务列表

currentReportTask、recentReports


核心动作


跳转到任务中心
跳转到爬虫管理
跳转到报告中心
跳转到引擎工作台


必要状态


有当前研究任务 / 无当前研究任务
有报告任务 / 无报告任务
引擎运行中 / 未运行
报告处理中 / 已完成 / 待生成


设计建议


Dashboard 不宜做成复杂的数据大屏，它更像“下一步操作导航页”。
信息密度要高，但避免过多图表，因为当前代码主要是状态摘要，不是 BI 展示。
建议在视觉上明确区分“当前任务”和“历史列表”。


6.2 任务中心


页面目标

统一承载研究任务的创建、编辑、切换与搜索发起，同时并排提供研究任务列表和报告任务列表。


页面模块


模块
功能说明
组件来源


顶部 Banner
说明任务中心职责，并显示任务统计
TaskCenterView.vue


研究任务表格
展示全部研究任务、状态、最近更新时间，并支持切换当前任务
ResearchTaskTable.vue


报告任务表格
展示报告任务、进度、状态与下载入口
ReportTaskTable.vue


研究任务工作区
当前研究任务的主编辑区
ResearchWorkspace.vue


研究任务表单
编辑场馆名称、城市、类型、研究重点、观察周期、竞品、补充要求
ResearchTaskForm.vue


研究指令栏
编辑或确认生成后的研究指令，并触发研究
ResearchTaskForm.vue


当前任务信息卡
展示当前任务摘要与结构化摘要项
ResearchTaskPanels.vue


最近任务历史卡
快速从历史任务中切换上下文
ResearchTaskPanels.vue


研究任务表单字段


字段
说明


场馆名称
研究对象名称


所在城市
研究对象城市


场馆类型
如博物馆、艺术馆等


研究重点
当前研究主目标


观察周期
数据观察时间范围


竞品 / 标杆场馆
对比对象，支持多行输入


研究补充要求
补充约束、特别关注点


研究指令
对引擎分发的最终查询文本


核心动作


保存研究任务
激活某个历史任务
同步当前任务到爬虫配置
分发研究指令到引擎
在报告任务表格中查看或下载报告


必要状态


草稿态
保存中
任务已激活
无任务空状态
报告列表为空
搜索 / 研究触发中


设计建议


这是核心业务页面，建议优先设计桌面版。
左右并列的双表格 + 下方编辑工作区是当前代码结构，建议保留。
研究任务表单适合使用“分组表单 + 命令栏”的层次，而不是单纯长表单。


6.3 爬虫管理


页面目标

将平台登录、采集模式配置、执行状态、异常恢复和历史记录整合为一页可操作的采集控制台。


页面模块


模块
功能说明
组件来源


顶部统计卡
显示当前平台、登录状态、推荐下一步、平台记录数
CrawlerManagementView.vue


平台切换条
切换小红书、抖音、快手、B站、微博、贴吧、知乎等平台
CrawlerPlatformStrip.vue


采集中心主面板
承载工作流说明、平台提示、恢复入口、采集控制表单、状态面板
CrawlerPanel.vue


工作流步骤条
呈现当前阶段，例如登录准备、登录中、采集中等
CrawlerControlForm.vue


平台能力说明卡
展示该平台可用登录方式、可用采集模式
CrawlerControlForm.vue


平台概览卡
展示登录状态、当前采集模式、结果落盘策略
CrawlerControlForm.vue


恢复历史配置卡
恢复最近登录配置或最近采集配置
CrawlerControlForm.vue


登录与采集控制表单
编辑平台、登录方式、采集方式、目标内容、采集范围与保存方式
CrawlerControlForm.vue


二维码 / 登录面板
展示二维码登录区或登录空状态说明
CrawlerStatusDeck.vue


实时输出面板
展示最近日志
CrawlerStatusDeck.vue


最近记录面板
展示登录、采集、异常中断等历史记录
CrawlerStatusDeck.vue


登录排障助手
针对当前平台给出恢复建议与快捷动作
CrawlerManagementView.vue


当前平台记录
聚焦当前平台的历史记录
CrawlerManagementView.vue


采集控制核心字段


字段
说明


平台
当前操作的平台


登录方式
二维码 / 手机号 / Cookie


采集模式
关键词搜索 / 指定内容详情 / 创作者主页


保存方式
PostgreSQL / MySQL / JSON / CSV / Excel / SQLite


关键词
搜索模式目标


内容 ID / URL
详情模式目标


创作者 ID / URL
创作者模式目标


Cookie
Cookie 登录凭据


手机号
手机号登录凭据


起始页
采集起始页码


最大内容数
最大抓取内容量


最大评论数
最大抓取评论量


是否无头模式
Headless / Headed


评论抓取开关
是否抓取评论


二级评论开关
是否抓取二级评论


关键动作


检查登录状态
启动登录流程
取消登录流程
启动采集任务
停止采集任务
恢复最近登录配置
恢复最近采集配置
应用排障建议动作
从研究任务同步默认配置


必要状态


平台未登录
平台已登录
登录中
二维码待扫描
可启动采集
采集中
表单校验失败
存在异常恢复建议
面板折叠 / 展开


设计建议


该页面状态最复杂，建议至少设计 4 个关键状态稿：


未登录空态
二维码登录态
已登录可采集态
采集中带日志态


二维码区、排障区、日志区要区分视觉优先级。
表单字段较多，建议在 Pencil 中考虑分组或分栏，而不是单列堆叠到底。


6.4 引擎工作台


页面目标

保留现有多引擎工作方式，提供引擎切换、运行状态查看、Forum 讨论流查看和控制台日志查看。


页面模块


模块
功能说明
组件来源


引擎切换卡组
顶部显示每个引擎的状态和地址
EngineWorkspaceView.vue


页面头部工具区
显示系统状态、刷新日志、分发研究指令
EngineWorkbench.vue


引擎页签
Insight / Media / Query / Forum 切换
EngineTabs.vue


引擎运行区
当引擎运行时嵌入 iframe
EngineWorkbench.vue


Forum 消息流
展示 Forum Host 与各引擎的讨论消息
EngineWorkbench.vue


引擎空状态区
当引擎未运行时给出提示
EngineWorkbench.vue


控制台输出区
展示当前引擎日志文本
EngineConsole.vue


核心动作


切换活动引擎
刷新当前日志
分发研究指令


必要状态


系统未启动
引擎未启动
引擎运行中
Forum 有消息 / 无消息
控制台有日志 / 无日志


设计建议


该页面重点不是做复杂交互，而是清晰表达“当前看的是哪个引擎、当前是否在运行、当前输出了什么”。
对 Forum 建议设计为时间流式消息卡片；对其他引擎建议用嵌入区 + 下方日志区的层次。
必须考虑 iframe 区的大尺寸占位感，避免页面视觉过碎。


6.5 报告中心


页面目标

把报告模板输入、任务生成、历史任务查看、预览与下载集中在同一页面完成。


页面模块


模块
功能说明
组件来源


顶部 Banner
说明报告中心职责，并显示报告统计
ReportCenterView.vue


页面头部操作区
显示引擎输入是否就绪、刷新状态、生成报告
ReportStudio.vue


自定义模板输入框
可输入自定义报告模板文本
ReportStudio.vue


报告任务板
展示全部报告任务并支持选中当前任务
ReportTaskBoard.vue


单任务下载动作
对已完成任务下载 HTML / MD / PDF
ReportTaskBoard.vue


报告预览区
通过 iframe 预览当前任务结果
ReportPreview.vue


核心动作


刷新报告状态
生成新报告
切换查看历史任务
下载 HTML
下载 Markdown
下载 PDF


必要状态


报告引擎未初始化
引擎输入未就绪
生成中
有历史任务 / 无历史任务
当前任务可预览 / 不可预览
已完成可下载


设计建议


建议设计为左侧任务列表、右侧预览的大工作区。
“生成中”状态要足够明确，因为这是用户等待感最强的页面。
模板输入区不宜过度抢视觉焦点，但要足够可编辑。


6.6 配置中心


页面目标

集中维护数据库、模型服务、搜索能力与网络相关配置，并支持刷新和保存。


页面模块


模块
功能说明
组件来源


页面说明区
说明配置中心定位
ConfigCenterView.vue


配置总面板
承载配置列表
ConfigCenterPanel.vue


刷新 / 保存按钮组
刷新配置或保存配置
ConfigCenterPanel.vue


信息提示条
说明敏感字段和生效方式
ConfigCenterPanel.vue


折叠分组
按分组管理配置字段
ConfigCenterPanel.vue


配置输入字段
文本框 / 密码框
ConfigCenterPanel.vue


当前配置分组


分组
包含内容


数据库

DB_* 相关字段


Insight / Media / Query
三个引擎模型接入配置


Report / Forum / Optimizer
报告、主持人、关键词优化器模型配置


搜索与网络
搜索工具类型与外部服务 API Key


核心动作


加载配置
更新单字段
保存配置


必要状态


加载中
保存中
敏感字段掩码显示
分组展开 / 收起


设计建议


该页要突出“运维感”和“可编辑性”，不需要过于花哨。
建议强化字段分组、字段说明和按钮层级。
可以在 Pencil 中预留“保存成功反馈”和“字段校验提示”的位置，即使当前代码未深度实现。


7. 页面共用组件清单

以下组件建议优先在 Pencil 中抽象为共用设计资产。


组件
用途
出现页面


左侧导航项
一级导航
全局


顶部状态标签
系统启动、任务运行等状态
全局


页面 SectionHeading
页面级标题、描述、操作区
任务中心、爬虫管理、引擎工作台、报告中心


Metric Card
指标摘要卡
Dashboard


Surface Card
通用卡片容器
多页面


Status Chip / Tag
成功、运行、错误、中性状态
多页面


Empty State
空任务、空报告、空日志、空预览
多页面


表格组件
任务和报告列表
任务中心


表单字段组
输入、下拉、文本域、数字输入、开关
任务中心、爬虫管理、配置中心


日志流 / 控制台
长文本输出
爬虫管理、引擎工作台


任务列表卡
左侧选择式列表
报告中心


预览框
iframe 预览区
引擎工作台、报告中心


8. 关键接口映射

这一部分用于帮助设计时理解“哪些页面是静态展示，哪些页面会频繁刷新状态”。


页面
主要接口


任务中心

/api/research/options、/api/research/tasks、/api/research/tasks/{id}/activate、/api/search


爬虫管理

/api/crawler/options、/api/crawler/state、/api/crawler/login/check、/api/crawler/login/start、/api/crawler/login/cancel、/api/crawler/start、/api/crawler/stop


引擎工作台

/api/system/status、/api/system/start、/api/system/shutdown、/api/status、/api/output/{app}、/api/forum/log


报告中心

/api/report/status、/api/report/tasks、/api/report/generate、/api/report/result/{task_id}、/api/report/download/{task_id}、/api/report/export/md/{task_id}、/api/report/export/pdf/{task_id}


配置中心
/api/config


9. Pencil 设计拆板建议

为了提高第一轮设计效率，建议至少先出以下 10 张画板：


全局工作台桌面壳层
全局工作台移动端壳层
Dashboard 总览页
任务中心页
爬虫管理页：未登录态
爬虫管理页：二维码登录 / 采集中态
引擎工作台页：Forum 讨论态
引擎工作台页：普通引擎运行态
报告中心页：生成中与已完成态
配置中心页


如果要进一步沉淀设计系统，可再补：


状态标签与按钮规范页
表单组件规范页
卡片与空状态规范页


10. 建议的设计优先级


P0


全局壳层
任务中心
爬虫管理
报告中心


P1


Dashboard
引擎工作台
配置中心


原因：P0 页面直接覆盖“建任务、采集、出报告”的主链路，最先影响产品可用性。


11. 结论

当前项目的前端不是传统的信息展示后台，而是围绕“研究任务 -> 采集 -> 多引擎分析 -> 报告交付”组织起来的工作台。

因此在 Pencil 设计时，最重要的不是单页视觉差异，而是以下三点：


全局状态表达要统一
主链路页面之间的上下文切换要顺滑
复杂状态页，尤其是爬虫管理和报告中心，要优先设计关键状态而不是只画默认态


如果后续需要，我可以继续基于这份文档，进一步帮你拆成：


页面线框图清单
组件层级树
Pencil 画板命名方案
每个页面的低保真线框说明