MemeMind 前端需求文档

## 1. 文档目的本文档用于明确 MemeMind 项目前端系统的业务目标、用户角色、页面结构、功能需求、交互规则、接口规范、非功能需求与验收标准为前端开发、联调、测试和项目答辩提供统一依据。文档覆盖两个端1. **用户主站前端**2. **后台管理前端**## 2. 项目背景与建设目标MemeMind 是一个基于人工智能的网络热梗百科网站目标是自动发现新热梗、生成结构化词条并提供高效、直观、可持续更新的前台展示与后台运营能力。根据任务书前端需要承接最终用户访问体验和管理员运营效率两大职责一方面支持搜索、浏览、查看词条与热门趋势另一方面支持审核、编辑、统计与反馈处理。前端建设目标如下1. 为普通用户提供“**快查、好看、易懂**”的热梗百科浏览体验。2. 为管理员提供“**高效审核、可追溯编辑、可量化运营**”的管理工作台。3. 在课程实训可实现范围内优先保证核心业务闭环完整而不是堆砌复杂功能。4. 满足任务书中给出的性能与稳定性指标。## 3. 设计原则### 3.1 产品原则1. **内容优先**词条信息比装饰更重要所有页面优先突出“释义、来源、场景、示例”。2. **搜索优先**用户最核心动作是“搜一个梗”因此搜索框、搜索建议、结果筛选必须是一级能力。3. **趋势可感知**热门榜单、传播热度、时间线要让用户快速感知“这个梗为什么火、最近火不火”。4. **后台高效率**审核、编辑、驳回必须少步骤、少跳转、强反馈。5. **可扩展**为后续接入更多平台来源、更多标签体系、更多审核规则预留扩展位。### 3.2 工程原则1. 页面路由、组件、接口、状态管理分层清晰。2. 统一使用 REST 风格接口命名、统一返回结构、统一错误码、统一分页规则。REST 风格资源路径、方法和命名一致性是企业级 API 设计的通用要求。3. API 文档采用 OpenAPI 思路组织按 path operation 管理。4. 列表类接口统一支持分页、筛选、排序。分页参数设计可参考成熟 REST 文档里的 page / per_page 思路。5. 首页、详情页、后台数据看板做代码分割与懒加载控制首屏体积符合 web.dev 推荐的性能优化思路。## 4. 用户角色与使用场景### 4.1 用户角色#### 4.1.1 游客用户未登录即可访问主站的大多数内容包括首页、搜索、热门榜、分类页、词条详情页。#### 4.1.2 登录用户可选增强若后续实现登录可用于收藏、反馈、历史记录、个性化推荐。#### 4.1.3 管理员进入后台管理系统执行词条审核、词条编辑、统计查看、反馈处理、审计查询等操作。任务书明确后台必须提供审核、编辑、统计、反馈处理等面板。## 5. 产品信息架构### 5.1 主站信息架构- 首页- 搜索结果页- 词条详情页- 热门榜单页- 分类/标签浏览页- 词条时间线页可并入详情页- 反馈提交页- 关于/说明页### 5.2 后台信息架构- 后台首页 / 数据看板- 待审核词条列表- 词条审核详情- 词条编辑页- 已发布词条管理- 标签/分类管理- 用户反馈处理- 操作日志 / 审计日志- 系统设置可选## 6. 技术方案建议前端建议采用以下方案Ant Design Pro 强调企业级 React 管理台脚手架react-admin 强调面向 REST/GraphQL 的管理界面Tabler 与 AdminLTE 强调成熟后台页面组件与响应式布局。### 6.1 建议栈- 框架Vue 3 或 React 二选一- 语言TypeScript- 构建Vite- 路由Vue Router / React Router- 状态管理Pinia / Zustand / Redux Toolkit- UI 组件库Element Plus若用 Vue或 Ant Design若用 React- 图表ECharts- HTTPAxios- 富文本/Markdown 渲染MarkdownIt 或类似方案### 6.2 推荐落地选择**主站Vue 3 TypeScript Vite Element Plus****后台同栈复用单仓双布局**## 7. 核心业务对象前端主要围绕以下数据实体展开### 7.1 词条 Entry- id- title梗名称- alias别名/俗称- summary简要释义- meaning详细释义- origin来源与背景- scenarios使用场景- examples典型示例语句数组- relatedEntries相关梗列表- category归属圈子- sourcePlatforms来源平台数组- heatScore传播热度- trendStatus上升/平稳/下降- timeline发展时间线- tags标签数组- coverImage封面图- statusdraft / pending / approved / rejected / published- reviewer- reviewComment- createdAt- updatedAt- publishedAt- viewCount- searchCount### 7.2 榜单 RankItem- entryId- title- rank- heatScore- viewDelta- searchDelta- sourcePlatforms- updatedAt### 7.3 反馈 Feedback- id- type纠错 / 补充 / 举报 / 建议- content- contact- targetEntryId- status- createdAt- processedAt### 7.4 审计日志 AuditLog- id- operator- action- targetType- targetId- detail- createdAt## 8. 主站前端功能需求### 8.1 首页#### 8.1.1 页面目标首页承担三件事1. 告诉用户这是“AI 热梗百科”2. 让用户立即搜索3. 展示当前最热、最新、最值得看的内容#### 8.1.2 页面模块1. 顶部导航栏2. 站点 Logo 与 Slogan3. 全局搜索框4. 热门搜索词5. 热门榜单 Top106. 最新收录词条7. 分类入口8. 今日趋势 / 热度卡片9. 页脚说明#### 8.1.3 交互要求- 搜索框支持输入联想、回车搜索、清空。- 点击热门词跳转详情页或搜索结果页。- 榜单支持“24h / 7天 / 本月”切换。- 最新收录列表支持分页或“查看更多”。- 分类入口点击后进入分类页。- 首页首屏必须在 2 秒内完成主要内容可见符合任务书要求。#### 8.1.4 验收标准- 用户 3 秒内能看懂产品用途。- 首页可直接完成搜索入口触达。- Lighthouse 性能目标不低于 80。### 8.2 搜索结果页#### 8.2.1 页面目标支持用户通过关键词快速查找相关热梗词条。#### 8.2.2 核心功能1. 关键词搜索2. 模糊匹配3. 搜索建议4. 结果高亮5. 条件筛选6. 排序切换7. 空结果提示8. 热门推荐补位#### 8.2.3 筛选条件- 平台来源- 时间范围- 归属圈子- 热度区间- 是否已审核发布#### 8.2.4 排序方式- 综合相关度- 最新发布- 热度最高- 浏览量最高#### 8.2.5 结果项展示每个结果项需展示- 词条名称- 简短释义- 标签- 来源平台- 热度值- 发布时间- 匹配片段高亮#### 8.2.6 交互要求- 输入时触发联想建议减少用户无效输入。搜索建议与自动补全是成熟搜索体验中的常见增强方式。- 筛选条件变化后无需整页刷新。- 列表切页保持查询条件不丢失。- URL 应保存 query 和 filter便于分享和回退。#### 8.2.7 性能要求任务书要求在百万级数据量以内搜索响应时间小于 1 秒前端必须配合实现- 搜索输入防抖 300ms- 本地缓存最近搜索参数- 首屏只加载当前页结果- 分页懒加载或页码切换### 8.3 词条详情页#### 8.3.1 页面目标完整展示一个热梗的结构化百科信息。#### 8.3.2 需要展示的字段依据任务书详情页必须完整承接 AI 生成的结构化结果至少包括- 释义- 来源与背景- 使用场景- 典型示例语句- 相关梗关联- 归属圈子- 传播热度#### 8.3.3 详情页模块1. 词条标题区2. 标签区3. 基础摘要卡片4. 释义区5. 来源与背景区6. 使用场景区7. 典型示例区8. 相关梗推荐区9. 热度趋势区10. 发展时间线区11. 反馈纠错入口#### 8.3.4 交互要求- 示例内容支持展开/收起。- 时间线支持按阶段展开。- 相关梗点击后无缝跳转。- 反馈按钮支持提交纠错或补充建议。- 若内容尚未完全审核可显示“内容由 AI 生成并经人工审核”标识。#### 8.3.5 可视化要求- 热度趋势以折线图或柱状图展示。- 时间线以纵向时间轴展示。- 结构化字段缺失时要展示兜底文案不允许页面断裂。### 8.4 热门榜单页#### 8.4.1 页面目标展示当前热门梗排行体现“趋势感”。#### 8.4.2 功能要求- 支持 24h / 7天 / 30天 榜单切换- 支持按平台筛选- 支持查看上升/下降趋势- 支持点击进入详情页- 显示更新时间#### 8.4.3 展示字段- 排名- 词条名- 热度值- 热度变化- 来源平台- 浏览量- 搜索量#### 8.4.4 任务约束任务书要求榜单需根据访问量、搜索量和全网热度动态更新周期不超过 1 小时前端需要展示更新时间并在过期时提示“数据更新中”。### 8.5 分类/标签浏览页#### 8.5.1 页面目标支持用户按主题浏览而不只是搜索。#### 8.5.2 分类维度根据任务书可优先实现- 平台来源- 流行时间- 标签体系尽量覆盖 90% 以上已入库词条#### 8.5.3 页面模块- 左侧分类导航- 右侧词条卡片区- 标签云- 当前筛选面包屑- 排序切换### 8.6 反馈功能#### 8.6.1 功能目标允许用户对词条提出纠错、补充和举报。#### 8.6.2 表单字段- 反馈类型- 关联词条- 反馈内容- 联系方式可选#### 8.6.3 交互要求- 提交成功后提示反馈已记录- 对重复提交做节流处理- 对敏感词和超长内容进行前端初筛## 9. 后台管理前端需求### 9.1 后台首页 / 数据看板#### 9.1.1 页面目标为管理员提供项目运行总览。#### 9.1.2 必备指标根据任务书至少包括- 每日新增词条数- 词条总库数- 热门词条 Top10- 待审核词条数数据更新延迟小于 15 分钟#### 9.1.3 页面模块- 指标统计卡片- 近 7 天新增趋势图- 热门词条排行榜- 待审核列表快捷入口- 用户反馈待处理数- 最近操作日志### 9.2 待审核词条列表#### 9.2.1 功能目标支持管理员快速处理 AI 生成词条。#### 9.2.2 列表字段- 词条标题- 候选来源平台- 生成时间- 热度值- 风险标记- 当前状态- 操作按钮#### 9.2.3 支持操作- 查看详情- 通过- 驳回- 编辑后通过- 批量通过- 批量驳回#### 9.2.4 筛选条件- 时间范围- 平台来源- 热度区间- 风险等级- 状态#### 9.2.5 运营指标任务书要求单个词条审核/处理平均时间不超过 2 分钟因此后台列表必须支持- 行内快捷操作- 抽屉预览- 常用驳回理由模板- 批量审核### 9.3 词条审核详情页#### 9.3.1 页面布局左侧展示 AI 原始生成结果右侧展示结构化表单与审核意见区。#### 9.3.2 功能要求- 查看完整词条内容- 查看来源摘要- 查看关联热度信息- 编辑字段内容- 填写审核备注- 通过/驳回- 记录操作日志#### 9.3.3 审核状态流转pending → approved / rejectedapproved → publishedrejected 可重新编辑后再次提交### 9.4 词条编辑页#### 9.4.1 功能目标允许管理员修正 AI 自动生成内容。#### 9.4.2 可编辑字段- 标题- 摘要- 释义- 来源与背景- 使用场景- 示例- 标签- 分类- 相关梗- 封面图- 发布时间#### 9.4.3 编辑增强- Markdown 编辑- 实时预览- 自动保存草稿- 字段合法性校验- 版本对比可选### 9.5 用户反馈处理页#### 9.5.1 列表字段- 反馈类型- 关联词条- 反馈内容- 提交时间- 处理状态- 处理人#### 9.5.2 操作- 标记已处理- 转为词条修订任务- 忽略- 回复说明可选### 9.6 审计日志页任务书要求所有审核编辑操作留痕审计日志完整度 100%。因此后台必须提供操作日志页至少支持- 按操作者筛选- 按动作筛选- 按时间筛选- 查看具体变更内容## 10. 页面级路由设计### 10.1 主站路由- /- /search- /entry/:id- /rankings- /categories- /tags/:tag- /feedback- /about### 10.2 后台路由- /admin/login- /admin- /admin/reviews- /admin/reviews/:id- /admin/entries- /admin/entries/:id/edit- /admin/feedbacks- /admin/logs- /admin/settings## 11. 前后端接口规范### 11.1 统一规范#### 11.1.1 基础路径- 前台 API/api/v1- 后台 API/api/v1/admin#### 11.1.2 返回结构json{code: 0,message: ok,data: {},traceId: 20260329-xxxx}#### 11.1.3 分页结构json{code: 0,message: ok,data: {list: [],page: 1,pageSize: 20,total: 268,totalPages: 14}}#### 11.1.4 错误码建议- 0成功- 40001参数错误- 40101未登录- 40301无权限- 40401资源不存在- 40901状态冲突- 42901请求频繁- 50001服务内部错误#### 11.1.5 通用请求头- Authorization: Bearer token后台使用- Content-Type: application/json## 12. 详细接口清单下面这部分你可以直接当“前端接口需求”交给后端同学。### 12.1 首页相关接口#### 12.1.1 获取首页聚合数据**GET** /api/v1/home**说明**返回首页需要的聚合内容减少前端多次请求。**响应示例**json{code: 0,message: ok,data: {hotSearches: [xxs行为, 电子斗蛐蛐, 已老实求放过],topRanks: [],latestEntries: [],categories: [],dailyStats: {entryCount: 1234,newCount24h: 32},updatedAt: 2026-03-29T10:00:00Z}}#### 12.1.2 获取热门搜索词**GET** /api/v1/search/hot**query 参数**- limit: number#### 12.1.3 获取首页最新词条**GET** /api/v1/entries/latest**query 参数**- page- pageSize### 12.2 搜索相关接口#### 12.2.1 搜索建议**GET** /api/v1/search/suggest**query 参数**- q: string用户输入关键词- limit: number默认 10**返回字段**- keyword- typeentry / tag / category- entryId若命中词条则返回#### 12.2.2 全文搜索词条**GET** /api/v1/search**query 参数**- q: string- page: number- pageSize: number- platform: string可选- category: string可选- tag: string可选- sortBy: relevance / newest / hottest / views- startDate: string- endDate: string**响应 data**json{list: [{id: 1,title: xx,summary: xx,tags: [A, B],platforms: [微博, B站],heatScore: 98.7,publishedAt: 2026-03-28T09:00:00Z,highlight: {summary: 这里有em关键词/em高亮}}],page: 1,pageSize: 20,total: 200}#### 12.2.3 记录搜索行为**POST** /api/v1/search/log**请求体**json{keyword: xx,source: home,resultCount: 20}**说明**用于后端计算热门榜单与搜索量。### 12.3 词条相关接口#### 12.3.1 获取词条详情**GET** /api/v1/entries/{id}**响应字段**- id- title- alias- summary- meaning- origin- scenarios- examples- relatedEntries- category- tags- sourcePlatforms- heatScore- trendStatus- timeline- viewCount- publishedAt- updatedAt#### 12.3.2 获取相关梗**GET** /api/v1/entries/{id}/related**query 参数**- limit#### 12.3.3 获取词条热度趋势**GET** /api/v1/entries/{id}/trend**query 参数**- range: 24h / 7d / 30d**响应字段**json{points: [{time: 2026-03-28,heatScore: 82,viewCount: 1200,searchCount: 230}]}#### 12.3.4 记录词条浏览**POST** /api/v1/entries/{id}/view**说明**详情页打开时上报。#### 12.3.5 获取词条时间线**GET** /api/v1/entries/{id}/timeline**响应字段**json{list: [{stage: 萌芽期,date: 2026-03-10,description: 首次出现于...}]}### 12.4 榜单相关接口#### 12.4.1 获取热门榜单**GET** /api/v1/rankings**query 参数**- type: hot / rising / searched- range: 24h / 7d / 30d- platform: string- limit: number**响应字段**- rank- entryId- title- heatScore- heatDelta- viewCount- searchCount- platforms- updatedAt### 12.5 分类标签相关接口#### 12.5.1 获取分类列表**GET** /api/v1/categories#### 12.5.2 按分类获取词条**GET** /api/v1/categories/{id}/entries**query 参数**- page- pageSize- sortBy#### 12.5.3 获取标签列表**GET** /api/v1/tags#### 12.5.4 按标签获取词条**GET** /api/v1/tags/{name}/entries### 12.6 反馈相关接口#### 12.6.1 提交反馈**POST** /api/v1/feedbacks**请求体**json{type: correction,targetEntryId: 123,content: 这个梗来源描述有误,contact: xxxqq.com}#### 12.6.2 获取反馈提交结果**GET** /api/v1/feedbacks/{id}### 12.7 后台认证接口#### 12.7.1 管理员登录**POST** /api/v1/admin/auth/login**请求体**json{username: admin,password: ******}**响应**json{code: 0,message: ok,data: {token: jwt-token,userInfo: {id: 1,name: 管理员,role: admin}}}#### 12.7.2 获取当前管理员信息**GET** /api/v1/admin/auth/me#### 12.7.3 退出登录**POST** /api/v1/admin/auth/logout### 12.8 后台审核接口#### 12.8.1 获取待审核词条列表**GET** /api/v1/admin/reviews**query 参数**- page- pageSize- status- platform- riskLevel- keyword- startDate- endDate#### 12.8.2 获取审核详情**GET** /api/v1/admin/reviews/{id}#### 12.8.3 通过词条**POST** /api/v1/admin/reviews/{id}/approve**请求体**json{comment: 内容完整审核通过}#### 12.8.4 驳回词条**POST** /api/v1/admin/reviews/{id}/reject**请求体**json{reason: 来源不清晰示例不充分}#### 12.8.5 编辑并提交审核结果**PUT** /api/v1/admin/reviews/{id}**请求体**传完整词条表单对象。#### 12.8.6 批量审核**POST** /api/v1/admin/reviews/batch**请求体**json{ids: [1, 2, 3],action: approve,comment: 批量审核通过}### 12.9 后台词条管理接口#### 12.9.1 获取词条列表**GET** /api/v1/admin/entries#### 12.9.2 获取词条详情**GET** /api/v1/admin/entries/{id}#### 12.9.3 更新词条**PUT** /api/v1/admin/entries/{id}#### 12.9.4 删除词条**DELETE** /api/v1/admin/entries/{id}#### 12.9.5 发布词条**POST** /api/v1/admin/entries/{id}/publish#### 12.9.6 撤回词条**POST** /api/v1/admin/entries/{id}/unpublish### 12.10 后台统计接口#### 12.10.1 获取看板总览**GET** /api/v1/admin/dashboard/overview**响应字段**- totalEntries- newEntriesToday- pendingReviewCount- feedbackPendingCount- topHotEntries- updateTime#### 12.10.2 获取新增趋势**GET** /api/v1/admin/dashboard/trend**query 参数**- range: 7d / 30d#### 12.10.3 获取热门 Top10**GET** /api/v1/admin/dashboard/top-entries### 12.11 后台反馈接口#### 12.11.1 获取反馈列表**GET** /api/v1/admin/feedbacks#### 12.11.2 获取反馈详情**GET** /api/v1/admin/feedbacks/{id}#### 12.11.3 处理反馈**POST** /api/v1/admin/feedbacks/{id}/process**请求体**json{status: processed,note: 已转交词条编辑}### 12.12 后台审计接口#### 12.12.1 获取操作日志**GET** /api/v1/admin/logs**query 参数**- operator- action- startDate- endDate- page- pageSize## 13. 前端状态与交互规范### 13.1 通用状态每个页面必须明确 5 类状态- 加载中- 空数据- 成功展示- 接口失败- 无权限/未登录### 13.2 搜索页交互细则- 输入少于 2 个字符时不发请求- 输入后 300ms 防抖- 回车触发正式搜索- 点击 suggestion 可直接跳详情或带 query 搜索- 搜索失败时展示重试按钮### 13.3 列表页交互细则- 统一支持页码切换- 支持 pageSize 切换- 切换筛选后重置到第一页- 批量操作前必须二次确认### 13.4 表单页交互细则- 必填项前置标识- 保存按钮在表单变更前禁用- 提交中禁用重复点击- 提交成功后明确 toast 提示## 14. 非功能需求### 14.1 性能要求根据任务书与 web.dev 的性能预算实践前端应设置明确预算并纳入构建流程首页和详情页作为核心页面必须优先控制首屏资源体积、接口数量和同步渲染开销。建议量化如下- 首页首屏接口数 ≤ 5- 首页首屏 JS 压缩后 ≤ 300KB- 首页 LCP ≤ 2.5s- 详情页首屏渲染 ≤ 2s- 图片懒加载- 图表模块按需加载- 后台看板异步加载非核心卡片### 14.2 兼容性要求- 浏览器Chrome、Edge、Firefox 最新两个大版本- 分辨率1440、1280、1024 宽度适配- 后台优先 PC 端- 主站至少兼容手机竖屏浏览### 14.3 安全性要求- 后台路由必须鉴权- token 过期自动跳转登录- 所有富文本输出做 XSS 过滤- 表单输入长度与敏感词前置校验- 错误信息不暴露后端堆栈### 14.4 可维护性要求- 组件命名统一- API 模块集中管理- 枚举、类型、常量统一目录维护- 页面埋点统一封装## 15. 埋点与数据采集需求为了支撑热门榜单和可用性分析前端需采集以下行为- 首页曝光- 搜索提交- 搜索建议点击- 词条详情浏览- 相关梗点击- 榜单点击- 反馈提交- 管理员审核通过/驳回/编辑埋点字段建议- eventName- page- userRole- entryId- keyword- timestamp## 16. 验收标准### 16.1 主站验收1. 首页、搜索、详情、榜单、分类功能完整可用。2. 词条详情完整展示任务书要求字段。3. 搜索支持模糊匹配与筛选。4. 热门榜单能展示动态更新时间。5. 支持至少 10000 条数据稳定浏览检索。### 16.2 后台验收1. 后台登录可用。2. 待审核、编辑、统计、反馈处理、审计日志全部具备。3. 审核操作可追踪可留痕。4. 看板可展示关键指标且数据更新延迟符合任务书要求。### 16.3 性能验收1. 首页与详情页 Lighthouse ≥ 80。2. 页面平均加载时间 ≤ 2 秒。3. 搜索结果响应在演示环境下保持流畅。## 17. 开发优先级建议### P0 必做- 首页- 搜索结果页- 词条详情页- 热门榜单页- 分类浏览页- 后台登录- 待审核列表- 审核详情- 词条编辑- 数据看板- 反馈处理### P1 应做- 搜索建议- 时间线可视化- 审计日志页- 批量审核- URL 状态同步### P2 可选增强- 收藏功能- 深色模式- 个性化推荐- 多语言- 富文本差异对比