【生活娱乐赛道】胡桃木 — ACG 爱好者的二次元聚集地
类别：TRAE AI 创造力大赛 - TRAE 官方中文社区 | 标签：生活娱乐 ｜标题：【生活娱乐赛道】胡桃木社区 — ACG 爱好者的二次元聚集地 ｜ 作者：邱息 ｜ 开发周期：2026-06-21 ~ 2026-08-06（46 天，初赛 25 天 + 复赛 21 天）
技术栈：Vue 3.4 + Vite 5 + TypeScript 5 + Element Plus + Pinia + Tailwind CSS ｜ Spring Boot 3.2 + JPA + MySQL 8.0 + Redis 6.0 + JWT + Spring Security ｜ Docker Compose + Nginx
开发工具：TRAE IDE / TRAE WORK（全程 TRAE 开发）
一、自我介绍
我是邱息，15 岁，一名热爱 ACGN 文化的少年独立开发者。从小泡在动漫、游戏、小说构筑的幻想世界里，长大后依然沉迷于此。作为一个每天都在「找好东西看」的重度二次元用户，我太懂「想讨论新番要开 N 个 App、翻来覆去切」的痛苦了，于是决定亲手为同好们搭一个属于自己的小天地 —— 胡桃木。
Vibe Coding 编程 1.3 年，一个人包揽前端 Vue、后端 Spring、Docker 部署全套，46 天从零把这个社区从空目录搭成一个完整可上线的产品。
二、产品简介
初赛帖链接： 【生活娱乐赛道】胡桃木 — 属于二次元爱好者的清新交流社区
2.1 是什么
胡桃木（Hutaomu） 是一个面向 ACGN 爱好者的完整、可真实运营的全栈社区系统（Web 端响应式，移动端浏览器自适应）。它将同人创作、动漫讨论、百科资料、音乐分享、社区交友、AI 助手等二次元核心需求聚合在一个入口，不再让用户在多个 App 之间疲于切换。
与初赛 Demo 相比，它不再只是一个「证明创意能跑通」的原型，而是一个功能齐全、体验稳定、安全可上线的正式产品 —— 有完整的账号安全体系（注销、改密、双验证、SSRF/XSS/CORS 安全审计）、有真正解决「番剧搜不全/封面加载不出」问题的本地动漫全库索引、有实时动态热词、有自动回复、有上传进度条、有流畅的页面过渡动画。
2.2 面向谁
- 14–35 岁的 ACGN 文化爱好者：追番党、二游玩家、轻小说读者、术力口 P 主、V 家粉丝
- 内容创作者：同人画师、Cos、文手、UP 主、视频创作者、Wiki 词条编辑者
- 资深爱好者：需要一个干净的地方整理收藏的番剧资料、写角色分析长文、存手办返图、认识品味相似的同好
典型使用场景：
- 周末想追番 → 打开胡桃木动漫板块，用「综合热度排序」挑最近 5 年内的热门口碑番，点进详情看评分分布和 Staff 阵容
- 看完新番一肚子话想说 → 到「动漫安利」板块发长文讨论，用 Markdown 插图插表格，和同好评论盖楼
- 整理喜欢的角色资料 → 建一个 Wiki 词条，写 InfoBox 资料卡、上传角色图、其他用户可以合并提交修改，贡献者头像堆叠显示
- 放着 BGM 刷社区 → 右下角 mini 音乐播放器常驻，歌单来源于 Meting API，封面自动抓，歌词模式支持背景虚化
- 画了新同人图想分享 → 画廊模块批量上传（带进度条），标签分类，一键收藏/点赞/转发
三、功能说明
胡桃木的功能已经完整覆盖一个垂直社区应该有的全部模块，以下是 11 大核心功能的详细说明：
3.1 完整账号与安全体系
不再是「注册登录」的简单 Demo，而是有一套完整的账号生命周期管理：
- 注册 / 登录 / 退出：邮箱验证码注册、登录密码 bcrypt 哈希、异地登录 IP 记录、Token 存入 Redis 支持服务端主动失效（90 天有效期，<45 天自动续期）
- OOBE 新用户引导：首次注册 6 步引导（欢迎 → 外观主题选择 → 字体字号 → 兴趣板块 → 头像昵称 → 通知隐私），二次元主题默认置顶并设为全站默认，亮暗模式用扁平线性 Sunny/Moon 图标切换 + View Transition 擦除动效，步骤卡片切换有高度+淡入并行动画，支持从设置页重新进入
- 密码管理：忘记密码（邮箱验证码重置）、修改密码（原密码 或 邮箱验证码双路验证）
- 注销账号：软删除 + 匿名化策略，保留用户发布的所有内容（帖子/评论/画廊等）但账号清空、无法再登录；注销需登录密码 + 邮箱验证码双重确认，验证码异步发送不阻塞弹窗
- 头像封面上传裁剪：圆形头像裁剪、横向封面裁剪，带实时进度条和失败错误提示
- 关注与粉丝体系：单向关注、粉丝列表、关注列表、关注后触发创作者自动回复（一次性欢迎私信，标注「自动回复」标签在气泡下方辅助信息行）
3.2 内容创作：帖子 · 画廊 · 视频 · Wiki 四种发布形态
内容是社区的灵魂，胡桃木为四种典型内容提供了四种量身定制的发布体验，且四个发布页在移动端都有统一的固定底部操作栏（左边「取消」，右边「保存为草稿 + 发布」）：
① 帖子发布（长文 / 讨论）：
- Markdown WYSIWYG 所见即所得编辑器，格式工具栏：粗体/斜体/删除线/标题/H1~H6/列表/有序/引用/代码块/分割线/表格/任务列表
- 工具栏优化：格式行隐藏原生滚动条、支持左右滚动箭头 + 鼠标滚轮横向滑动；媒体按钮（图片/视频/链接/表情）固定在桌面端右侧、移动端正文上方，「插入链接」使用 Element Plus 弹窗 + 格式校验
- 5 秒自动保存草稿，指示器位于工具栏右侧分隔线后，有进度环反馈
- 发布前必填项校验（板块 / 标题 / 正文）：缺失时自动滚动到该字段 + 红色描边呼吸动画高亮 3 次后淡出（第 3 次约 0.43s 渐隐），填写后自动清除高亮
- 板块选择 + 封面上传（裁剪模式 / 自定义模式，带进度条）+ 定时发布（7 天内）+ 评论开关 + 草稿保存
② 画廊发布（多图 / 手办返图 / 同人图）：
- 多图批量上传（带进度条），移动端 3 列网格 / 平板 4 列 / 桌面 5 列
- 每张图支持单独裁剪对齐，整体排序拖拽
- 标签分类 + NSFW 开关（默认隐藏缩略图模糊）
③ 视频发布（二创 / PV / AMV）：
- 视频文件（≤100MB）+ 封面图双进度条（上传视频 0–60% + 上传封面 60–85%），发布阶段沿用原有进度
- 标题 + 简介 Markdown + 所属板块 + 标签
- 视频详情页：点赞收藏按钮做明显大胶囊按钮（已态红色点赞 / 橙色收藏高亮），头像与名字点击可进作者主页
- 独立视频点赞表与收藏表（避免与帖子/画廊 ID 冲突），删除视频时自动清理点赞与收藏记录
④ Wiki 词条创建（资料百科）：
- 左 InfoBox 右正文的经典百科布局，移动端自适应堆叠
- InfoBox 支持任意键值对、日期 / 数字 / 链接类型字段
- 合并提交设置：下拉选择合并周期与阈值，el-select 弹层挂载到 body 不被卡片裁剪
- 合并贡献者：词条顶部显示发布者头像 + 合并贡献者堆叠头像（仿萌娘百科，紧凑重叠 -space-x-10px），超过 10 个显示「+N」圆形指示器，贡献者与发布者同一次接口返回同步加载，不做后期请求；贡献者头像为纯展示（去掉 hover 放大 / 点击跳转），鼠标悬停才显示用户名
- 模块级缓存：同一会话内查看同词条不重复请求
3.3 社交互动：评论 · 点赞 · 收藏 · 转发 · 私信
评论系统：层级嵌套（最多 3 层 + thread line 竖线连接线），第 1 层默认展开 2 条 + 分页加载更多，第 2 层及更深默认折叠，支持评论点赞与回复，跨帖子 / 画廊 / 视频 / Wiki 四类内容共用同一套 CommentList 组件与同一套后端 API
点赞 / 收藏 / 转发：
- 帖子 / 画廊 / 视频三类内容各有独立点赞表（避免 ID 冲突），点赞数实时自增/自减 + 通知作者
- 收藏目标类型统一扩展为
post / gallery / video，收藏夹统一管理 - 转发支持：帖子 → 帖子 / 私信 → 帖子（私信转发默认进「动态」板块，不硬编码板块 ID）
私信聊天：
- 在线状态指示、固定头部与输入区（移动端外布局 fixed，防止键盘顶起时滚动错位）、聊天图片上传进度条
- 消息分页：首屏加载最近 50 条，滚动到顶部加载更早消息；增量轮询按 afterId 只拉新消息，按 5 秒间隔提高角标实时性
- 角标本地持久化：本机已读的会话重启浏览器不再重复显示角标；进入聊天立即 markRead 清除红点；聊天过程中新 AI 回复也触发 markRead，避免离开聊天角标残留
body { overscroll-behavior-y: none }禁用移动端下拉刷新，防止固定头部被拖拽错位
通知系统：点赞通知 / 评论通知 / 关注通知 / 系统通知 四类分类，未读红点，点击跳转自动消除，目标类型支持 POST / GALLERY / VIDEO / COMMENT / USER 全部可跳
3.4 动漫板块（核心特色 · 复赛大幅升级）
动漫板块是胡桃木最花功夫打磨的模块，复赛阶段从「调用 Bangumi API 的简单展示层」升级为「自建本地全库索引 + 真实热度算法 + 敏感内容过滤 + 镜像可配置」的完整资料系统：
① 自建本地动漫全库索引：
- 自建
bangumi_anime_index表，以 Bangumi ID 为主键，同步type=2动画，突破 Bangumi 搜索接口 1000 条上限 - 管理员后台「一键同步 BGM 全库」按钮：后台单线程 Executor 异步执行，不阻塞 HTTP；每 2 秒轮询进度显示进度条；支持中途「停止同步」按钮
- 列表页优先查本地索引，索引为空时自动回退实时 API（保证冷启动也有内容）
② 综合排序 = 真实热门 + 口碑兜底：
- 不再是「单纯评分高优先」的误导排名，综合排序算法改为
collect_count desc（Bangumi 中文社区收藏数 = 真实国内热度）→rating desc（评分兜底保证好看） - 时间窗限定为「当前年 + 前 4 个自然年」（例：2026 年看 2022–2026），避免十年前老番霸榜；但用户主动搜索关键词时不做时间过滤（旧番也能搜到）
- 排序选项精简为仅 3 个：综合排序 / 评分最高 / 人气最高，下拉框用 Element Plus el-select 沉稳风格（主题色边框、圆角 lg）
③ 筛选体系完整落地：
- 地区筛选： 日漫 / 国漫 / 美漫，默认日漫
- 类型筛选：仅保留 TV / 剧场版 / OVA / WEB，默认 TV
- 状态筛选：全部 / 连载中 / 已完结 / 未开播
- 题材 / 风格 / 来源 / 受众：后端 JPA Specification 动态模糊匹配
tags+meta_tags，多选 AND（同时选中「芳文社」+「音乐」就是芳文社的音乐番） - 卡片上的题材标签可点击：点击标签自动加入筛选并刷新列表
④ 敏感内容 SQL 层过滤 + 扩充词库：
- 本地索引查询在 SQL 层直接用 LIKE 排除中日文敏感关键词命中的条目，切换任意筛选都不会刷出 18+成人 违禁内容
⑤ 图片 CDN 镜像可配置 + 列表详情统一重写：
- Admin管理员 后台新增「Bangumi 图片 CDN 镜像地址」输入项，保存时自动清空
bangumi:*Redis 缓存，改镜像立即生效无需重新同步 - 列表页与详情页 cover 全部走同一套
rewriteImage重写逻辑，不再出现「列表破图详情正常」的数据源不一致问题 - ImageProxyController 下载图片指数退避重试 3 次（300ms → 600ms → 1200ms），封面抓取成功率从 47% 提升到 97%，失败前端兜底默认封面
3.5 Wiki 百科系统
胡桃木 Wiki 是一套完整的社区协作百科，不是只读资料库：
自研 Markdown 渲染引擎（从初赛沿用并继续优化）：
- 支持表格、嵌套列表、多行引用、任务列表、代码块语法高亮、图片画廊与灯箱（←→ 键盘导航、ESC 关闭、滚轮缩放 + 拖拽平移）、动态目录、锚点跳转
- 属性转义加固：图片 alt/url/thumbUrl、普通链接 href、video src/poster 全部 escapeHtml，onerror 改为固定静态文案防存储型 XSS
- 普通外部链接不跳外部站，走内部导航（防止用户跳出社区）
协作编辑模型：
- 词条创建者为发布者，其他用户提交「合并修改请求」
- 合并周期与阈值可配置（如：3 个相同修改自动合并 / 24 小时自动合并）
- 贡献者堆叠展示 + 计数，仿萌娘百科视觉风格
- 图片支持放大缩小拖拽平移，满足看设定图、人设图的需求
3.6 AI 助手 · 胡桃木酱
社区内置官方 AI Bot「胡桃木酱」，作为引导与闲聊伙伴，消息走 SSE 流式推送，聊天界面支持：
- 文字流式打字机效果，逐字出现不白屏等整段
- 卡片回复（推荐帖子、推荐番剧、推荐词条）独立渲染
- 轮询 + SSE 双通道保新消息，增量拉取不重刷历史
- 多设备浏览器共用同一套后端会话，消息跨端同步
3.7 音乐播放器（常驻 mini 条）
右下角常驻 mini 播放器控制条，可拖拽把手调整位置，支持展开态全屏面板：
- 歌单来源：Meting 在线 API，后台可配置歌单来源 ID
- 自动过滤 VIP / 试听歌曲：源返回需付费的条目自动跳过，不强行播几秒就切
- 音频代理：手动跟随 Meting 返回的 302 重定向（每跳 SSRF 校验，最多 5 跳），透传状态码与 Range 头，保证浏览器端进度条可拖动
- 封面图片：走 Meting 封面 API + ImageProxy 指数退避重试 + 前端兜底默认封面，封面成功率 97%
- 播放模式：顺序 / 随机 / 单曲循环；上一首 / 下一首 / 暂停；音量控制
- localStorage 歌单缓存 + 当前播放进度 + 播放列表，刷新即恢复
3.8 全局搜索 + 热门动态热词
统一搜索入口（顶部 Header 搜索框 + 发现页热门话题 + 动漫页内部搜索 + 板块内搜索）：
- 五类内容统一覆盖：帖子 / 画廊 / 视频 / Wiki / 用户
- 搜索标签容器：横向滚动 + 隐藏滚动条（
flex-nowrap + overflow-x-auto），选择板块筛选时搜索框不折叠 - 搜索结果关键词高亮
- 搜索历史：localStorage 最多 20 条，可逐条删除或一键清空
- 搜索下拉：无结果时不显示空白面板，仅输入有结果 / 无输入显示热门搜索 / 加载中时才弹出
热门搜索动态热词：
- 后端
GET /search/hot：统计最近 N 天action='search'行为日志，同一用户同一关键词只计 1 次（防刷），按去重用户数降序 TopN 返回 - 过滤规则：仅展示 4 个；跳过用户名搜索；过滤纯数字 / 单字符 / 测试占位词；minCount ≥ 5 才上榜（避免 1–2 人搜索就刷屏）
- 发现页「热门话题」区块：前三名带「热」标 + 排名序号 + 「X 人搜索」人数，与 Header 搜索下拉同数据源
3.9 主题与个性化 · 二次元主题默认置顶
全站提供 6 套完整主题 + 亮暗模式 + 字体字号切换，二次元动漫壁纸主题设为全站默认并在所有选择位置置顶：
- 二次元（acg，默认置顶）：动漫动态壁纸，可选 5 张切换 / 自动切换 / 锁定单张，悬浮控制窗可拖动
- 晴空（hutaomu）：清爽蓝色浅色主题
- 暗色模式：深灰背景护眼，夜间友好
- 冰璃：青色高对比主题
- 主题支持自定义背景图上传、主题色选择、字体大小切换
- 亮暗模式切换：扁平线性 Sunny/Moon 图标 + View Transition 擦除动效，全站瞬间切换无闪烁
- 所有设置跟随账号云端同步，换设备登录恢复
3.10 移动端相关截图
3.11 创作者中心
创作者中心是为内容产出者准备的专属工作台：
- 数据概览：四张统计卡片（粉丝数 / 作品数 / 点赞数 / 收藏数），今日变化箭头（横杠「—」不显示无意义红绿箭头），统计卡片图标带主题色淡底圆角容器
- 粉丝分析：粉丝增长柱状图（按 fanGrowthMax 归一化，不是硬编码高度），粉丝画像占位预留接口
- 内容管理：帖子 / 画廊 / 视频 / Wiki 四类内容列表 + 骨架屏加载占位，支持预览 / 编辑 / 删除 / 置顶 / 隐藏，小屏按钮仅图标
- 作品管理：网格 / 列表双视图切换，切换按钮使用扁平线性 Grid/Menu 图标，不是 ▦/☰ 文字符号
- 创作者设置：自动回复文案开关 + 内容（开启后关注者首次关注会收到一条私信，标注「自动回复」标签）
3.12 管理后台 · 站点配置与系统运维
管理后台覆盖日常运营所需全部功能：
- 用户管理：列表筛选 / 封禁解禁 / 角色调整（普通→版主→管理员）
- 内容审核：帖子 / 画廊 / 视频 / Wiki 四区独立，待审 / 通过 / 拒绝三态，批量操作
- 板块管理：11 个预置板块（游戏 1 / 动漫安利 2 / 二游推荐 3 / 官方资讯 4 / 社区交友 5 / 小说同人 6 / 音乐分享 7 / 术力口 8 / 手办周边 9 / 梗图表情包 10 / 动态 12），支持创建删除，创建后
/sections页与侧边栏实时同步（强制刷新 store），不存在的板块访问显示 404 + 返回按钮 - 系统通知群发：按用户角色 / 等级筛选收件人，历史记录可查
- 站点配置：ICP 备案 / 公安备案号、邮件服务（SMTP 配置 + 测试发送）、音乐歌单 Meting 配置、Bangumi API 地址镜像 + Bangumi 图片 CDN 镜像
- 动漫数据源管理：Bangumi 动画全库同步按钮 + 进度条 + 停止按钮 + 已索引条目数刷新
- 操作日志：管理员所有操作留痕，IP + 时间 + 操作者 + 详情完整记录
- Swagger/Actuator：
health端点公开，其余接口文档与系统状态必须登录管理员才能访问
四、相比初赛 Demo 的升级
初赛 Demo（7 月 15 日提交）已经是一个功能相当完整的社区原型，但复赛阶段（7 月 21 日 ~ 8 月 6 日）我围绕「让它从 Demo 变成一个真正能上线、有人用的产品」做了非常多硬核升级，可以归纳为 6 大方向：
4.1 功能补齐：从「主流程能跑」到「全链路闭环」
| 模块 | 初赛状态 | 复赛升级 |
|---|---|---|
| 账号 | 注册登录、忘记密码、OOBE |  注销账号（软删除+匿名化+双验证） 修改密码（原密码/邮箱验证码双路） 账号安全邮箱验证码异步发送 |
| 视频 | 仅发布与播放 | 视频点赞（独立点赞表，通知作者） 视频收藏（Favorite 类型扩展 video） 点赞收藏按钮做明显大胶囊高亮 |
| 社交 | 关注 / 私信 / 通知 | 创作者自动回复（关注触发一次性私信 + 「自动回复」标签） 私信分页（首屏 50 条 + 增量轮询 + 角标持久化） 私信转发默认进动态板块 |
| 搜索 | 静态热门搜索 | 动态热门搜索热词（真实日志统计 + 去重用户数） 热词过滤规则（4 个展示 + minCount≥5 门槛 + 排除用户名） |
| 创作 | 发帖 / 画廊 / 视频 / Wiki | 所有上传文件进度条 + 错误提示（10 分钟长超时） 发帖必填项校验 + 自动滚动 + 呼吸高亮动画 发帖工具栏媒体按钮固定 + 滚动优化 + 插入链接弹窗 |
4.2 动漫板块：从「API 调用」到「自建全库 + 真实热度算法」
这是复赛最大的单项升级，累计改动约 20 次对话：
- 自建本地全库索引：突破 Bangumi 搜索接口 1000 条上限，管理员一键异步同步全库动画（约 2 万条）+ 进度条 + 中途可停止
- 综合排序算法重做：评分排名 →
收藏数(热度) desc + 评分(口碑) desc，真正实现「热门好看优先」而不是「评分高优先」 - 时间窗策略：综合浏览 5 年窗（当前年+前4年），用户主动搜索关键词不做时间限制
- 筛选体系完整落地：JPA Specification 动态筛选题材/风格/来源/受众多选 AND，状态/类型/地区全部生效
- 地区规则：移除「全部」选项，默认日漫，国漫美漫必须手动选择
- 敏感内容 SQL 层过滤 + 扩充中日文敏感词库
- 图片 CDN 镜像可配置：列表详情统一重写 + 保存自动清缓存 + 重试 3 次
4.3 体验打磨：从「能用」到「好用、细腻」
复赛阶段对 UI/UX 的打磨贯穿每一次对话，累计做了 30+ 项体验优化，几个代表性的：
- OOBE 引导动画重做：步骤卡片高度 + 淡入并行即时触发动画（0.32s 高度 + 0.22s 淡入），不再有「下一页加载完动画才来」的滞后感
- 默认主题全线统一为二次元置顶：themeList 顺序调整，所有主题选择位置（设置页 / 悬浮窗 / OOBE）都是二次元第一位
- 粉色焦点环源头排除：把 hover 触发器从全局
:focus-visible规则里:not()排除，不再依赖覆盖式!important，三次迭代彻底根治 - 发布页表单高亮动画：2.4s 完整序列，主题色闪 3 次，第 3 次 60%→82% 时长渐隐，结束后完全透明，不残留任何静态 box-shadow
- 移动端发布四区统一底部操作栏：固定在
bottom: calc(56px + safe-area-inset-bottom)，左「取消」右「保存草稿 + 发布」全圆角大按钮，与桌面端体验一致 - 发现页加载更多改页码分页：一页一页翻，翻页平滑滚动到顶部
4.4 安全加固：从「开发版本」到「可上线的产品」
复赛专门做了一次完整安全审计（SQL 注入 / XSS / SSRF / 文件上传 / 认证授权 / CORS / 信息泄露），确认无 SQL 注入（全部参数化查询），发现并修复 7 个问题：
- SSRF 防护：新增
SsrfValidator工具类，解析主机 IP 拦截全部内网/私有/回环/链路本地/云元数据段；图片代理改为手动跟随重定向（每跳重新校验，最多 3 跳）；音频代理同样 SSRF 校验；管理员按 URL 导入 Wiki 也走 SSRF 校验 - 文件上传加固：扩展名白名单（图片 7 种 + 视频 5 种）+ 魔数（Magic Bytes）真实内容校验；新增全局
SecurityHeadersFilter写入X-Content-Type-Options: nosniff/Referrer-Policy - Markdown 存储型 XSS 修复：图片 alt/url/thumbUrl + 链接 href + video src/poster 全部
escapeHtml；onerror改为固定静态文案 - Swagger / Actuator 收敛：
health端点公开，其余接口文档与系统状态必须登录管理员 - CORS 白名单化：
app.cors.allowed-origins可配置 + Spring profile 隔离 - 错误信息收敛：文件上传失败不再返回
e.getMessage()（避免泄露服务器路径） - 日志接口限流防刷：IP 维度 60 条 / 分钟 + 长度截断 + 控制字符清洗（防日志注入）
- 后端部署不暴露公网端口：仅 Docker 内网
hutaomu-net可达，公网统一经 nginx/api反代
4.5 部署工程化：从「本地能跑」到「一条命令上线」
复赛阶段把部署流程彻底工程化，用户拿到压缩包解压后一条命令就能跑起来：
- Docker 部署包持续迭代
- 部署包多次验证修复
- 生产环境配置完整
- 首次启动数据库可视化配置
4.6 工程化规范：从「自己写代码」到「AI 协作的长期可维护项目」
为了让我和 TRAE 长期协作不踩坑，复赛阶段建立了一整套 AI 协作规范：
- 4+2+1 日志体系（4 核心 + 2 辅助 + 1 技术文档集），每次对话结束 / 功能完成 / 问题修复 / 删除操作都有明确分工的日志文件记录，跨会话不「失忆」
- 前后端标签制度：所有日志记录标题必须标【前端】【后端】【全栈】【文档】【部署】五选一，后续检索一目了然
- 静态板块数据权威来源：
data/sections.ts与数据库实际板块对齐，全新部署种子DataInitializer.java也对齐，根除板块 ID 混乱问题 - 仓库分离：前端
Hutaomu-FE（main 分支）、后端Hutaomu-RD（main 分支）、部署配置独立，前后端可独立推送与构建(暂不开源) - 统一 d.ts 提交：
auto-imports.d.ts/components.d.ts纳入版本控制
五、产品演示视频
bilibili 胡桃木演示视频：https://www.bilibili.com/video/BV16UuH6HEVH/
六、产品创作历程
6.1 最初的灵感
作为一个长期活跃在二次元圈子的普通用户，我最深的日常痛点就是「内容分散」。想刷高质量同人图，要开微博/小红书/LOFTER；想讨论新番，去 Bangumi 小组/贴吧；想查某部番的 Staff、角色设定，要么翻 Bangumi 要么翻萌娘要么翻各个 Wiki；想听 V 家新曲，又要开网易云/B 站。一天下来，手机里跟 ACG 相关的 App 能占满一整屏。
更糟的是，随着「出圈」，很多公共社区的二次元讨论区氛围变得混杂——算法乱推、广告横行、评论区抬杠。我在想：能不能有一个纯粹的中文二次元社区，把同好需要的全部能力（讨论 / 资料 / 创作 / 交友 / 音乐）都装在一个入口里？ 这个朴素的想法就是胡桃木的起点。
6.2 初赛阶段（06/21 – 07/15，25 天）：把想法跑通成 Demo
初赛阶段的核心目标是「证明创意能成立」，我给自己定的原则是「先做出来再优化」：
- 06/21 – 06/23（项目搭建 #1–#23）：第一天就用 TRAE 把 Vue 3 + Spring Boot 的前后端架子搭起来，首页、登录注册、侧边栏、帖子流，23 轮对话就把社区最基础的骨架跑通了。
- 06/24 – 07/04（核心功能 #24–#64）：封面持久化、全局搜索、创作者中心、OOBE 新用户引导、邀请码注册、邮箱验证，把「一个社区必须有的那些东西」一个个补齐。印象最深的是 OOBE 引导，从一开始的简单表单改成了 6 步卡片式，用户体验一下子就上来了。
- 07/05 – 07/08（界面打磨 #28–#37）：这时候我意识到界面太有「AI 生成感」了，于是开始系统性做扁平化、线性 SVG 图标统一、设计系统规范、去掉所有花哨的渐变和阴影，改成沉稳克制的风格，对齐 B 站和抖音的真实交互。
- 07/09 – 07/13（互动深化 + 音乐播放器 #46–#100）：通知系统、消息入口、移动端适配、壁纸自动切换与悬浮控制窗；音乐播放器最折腾——Meting 歌单 API、会员歌曲自动过滤、mini 控制条样式、歌名显示从省略号开头改为省略号结尾，前后迭代了 30+ 次对话。
- 07/12 – 07/14（评论系统 + 管理后台 #80–#97）：评论嵌套结构推翻了 4 次（传统平铺 → 加固防白屏 → 短视频两层 → 最终 YouTube 式三层 + thread line）；管理后台系统通知群发 / 用户筛选 / 历史展示 / 表格统一 / 图标 SVG 线性化。
- 07/13 – 07/15（动漫板块 + Wiki 百科 #104–#123）：Bangumi API 接入 / 详情页重构 / 声优导演人物页 / 每日放送 / 全库分页；Wiki Markdown 渲染引擎强化（表格 / 嵌套列表 / 灯箱）/ 词条创建编辑 / 布局重构。最后两天是收尾：Banner 推荐机制重构、根目录清理、文档归位、Git 推送。
初赛 25 天，我和 TRAE 完成了 123 轮对话，从空目录到一个有 10 大模块、可注册登录发帖、能体验完整流程的社区 Demo。这让我第一次真正相信：一个人 + TRAE，真的能搭出完整产品。
6.3 复赛阶段（07/21 – 08/06，21 天）：把 Demo 打磨成真正的产品
进入复赛后，我的思路从「快速加功能」变成了「像真实产品经理一样每天挑自己产品的毛病，然后立刻修复」。每天的节奏大概是：
- 自己用半个小时，从头到尾刷一遍胡桃木，把不爽的、卡顿的、缺失的、不一致的全部记下来
- 打开 TRAE，一个问题一个问题地解决，每解决一个就写日志
复赛阶段遇到的几个「大坎儿」（也是成长最多的地方）：
坎儿一：动漫板块的「搜不全 / 排序假 / 封面破图」三连坑 初赛的动漫板块其实就是简单调了 Bangumi 的 API，用户反馈的问题非常真实：搜「轻音少女」搜不到；综合排序全是些评分高但根本没人看的老番；列表页封面全是破图、详情页又正常。我花了大概 5 天彻底重做这一块：
- 先决定自建本地索引表，用后台线程异步同步 BGM 全库（同步时加进度条，因为全量要跑十几分钟），突破 1000 条限制
- 再把综合排序算法从「评分排名」改成「收藏数（真实热度）+ 评分（口碑兜底）」，并用 5 年时间窗
- 最后把图片 CDN 镜像做成可配置项，列表和详情统一重写，再加重试机制
这个过程里，我对「什么是好的产品」的理解变深了——不是把接口接进来就完事，而是真的站在用户角度：他搜一个番能不能搜到？排序出来的是不是他真的想看？图片能不能加载出来？每一个细节都决定了用户会不会留下来。
坎儿二：安全审计让我出一身冷汗 当功能越来越全、准备真的对外部署时，我意识到必须做一次安全审计。不查不知道，一查出了 7 个问题——SSRF 图片代理可以探测内网、文件上传能传伪装的 HTML、Markdown 渲染有存储型 XSS、Swagger 和 Actuator 全公开、CORS 通配允许任意来源带凭据。TRAE 帮我写了完整的 SSRF 校验工具类、文件上传魔数校验、Markdown 属性转义、CORS 白名单化、安全响应头 Filter。修完这些，我才敢把后端端口从公网撤掉，统一走 nginx 反代。
坎儿三：粉色焦点环的三次修复 说出来可能好笑，一个粉色的焦点环我从初赛修到复赛。第一版用覆盖式 CSS !important，时好时坏；第二版排查到是全局 :focus-visible 规则在作祟，而不是 Element Plus 原生样式；第三版才从根源上解决——把所有 hover 触发器从全局 :focus-visible 规则里用复杂的 :not() 选择器源头排除，不再依赖覆盖规则。这件事让我明白：看起来小的 UI bug，如果根因不对，越治越乱；找到真正根因，一条规则就能根治。
除了这三个大坎儿，复赛阶段还做了无数细碎的小优化：注销账号、自动回复、热门热词、视频点赞收藏、上传进度条、高亮动画、OOBE 卡片动画、板块 ID 对齐、Wiki 贡献者堆叠…… 最终 21 天下来，项目更新日志记录了约 40 条新功能，问题修复日志记录了约 40 条 bug 修复，AI 对话记录新增了约 50 轮重要对话。
6.4 最大的感悟
46 天开发胡桃木，我最大的体会是：TRAE 最大的价值不是「帮你写代码」，而是「让你敢一个人做完整产品」。 放在以前，我一个人要做前端 Vue、后端 Spring、Docker 部署、安全审计、UI 打磨——想都不敢想。但 TRAE 把我从具体的语法细节、框架 API、配置陷阱里解放了出来，让我可以把全部精力放在「产品应该长什么样、用户用着爽不爽、细节有没有到位」这些真正决定产品好坏的事情上。
我记得最夸张的一天是 8 月 5 号：那天我连续解决了安全审计 7 项漏洞 + 音乐播放 403 + 动漫封面 404 + 板块 ID 混乱 + 粉色焦点环 + 热门话题过滤规则 + 前端空功能审计 3 项中的 2 项—— 1 天之内，TRAE 陪我推了 10+ 个 commit 级别大小的改动。要是放在以前自己写，这至少是两个星期的工作量。
七、TRAE 实践过程
下面是记录的整个开发过程。胡桃木从 0 到 1 全程使用 TRAE IDE / TRAE WORK 的 AI 智能体协作开发，初赛阶段 123 轮对话，复赛阶段又新增约 50 轮重要对话，覆盖需求拆解、架构设计、编码实现、Bug 修复、UI 打磨、安全审计、部署配置的完整产品生命周期。
7.1 开发关键步骤截图
复赛阶段的开发场景截图：
7.2 关键任务对话 Session ID
复赛阶段不少于 3 个的关键任务 Session ID：
| 序号 | Session ID |
|---|---|
| 1 | 3727820800404186:0af594018d75f484c354e926d6b1c19a_6a65ca6a9a2efa1adc6c79bf.6a671f1f965444b0a9cf4d07.6a671f1f965444b0a9cf4d05:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/27 17:04:31) |
| 2 | 3727820800404186:9c81ab1b3ae608b25334fb5572ad8238_6a6eadbf85464c7e3e5d0bb2.6a6eb88885464c7e3e5d0ece.6a6eb88885464c7e3e5d0ecc:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 11:24:56) |
| 3 | 3727820800404186:9b3027edd59e6c4226c6874b8c835b13_6a7335c8604e3bafa57e6e29.6a73485c604e3bafa57e700c.6a73485c604e3bafa57e700a:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/5 22:27:40) |
| 4 | 3727820800404186:b2fad0a286a21f714c8cc8f3d0dbdd0b_6a721378e2872777fd9b35c3.6a7332d1e2872777fd9b5201.6a7332d1e2872777fd9b51ff:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/5 20:55:45) |
| 5 | 3727820800404186:8c95e688748f748e2f5ecd1e86337619_6a71d82ce2872777fd9b2bcf.6a72039fe2872777fd9b3305.6a72039fe2872777fd9b3303:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/4 23:22:07) |
| 6 | 3727820800404186:b778ebc66f75ed9d49d62390a881184c_6a6ff8b685464c7e3e5d2221.6a71d674e2872777fd9b2b9a.6a71d674e2872777fd9b2b98:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/4 20:09:24) |
| 7 | 3727820800404186:b112d37985cc809ccbcb0aad06645fb9_6a6f07a785464c7e3e5d195f.6a6f41de85464c7e3e5d1ce7.6a6f41de85464c7e3e5d1ce5:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 21:10:54) |
| 8 | 3727820800404186:61c266014a48d04d94a9448955f2e744_6a6ebb6f85464c7e3e5d0f29.6a6f06d785464c7e3e5d1946.6a6f06d785464c7e3e5d1944:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 16:59:03) |
| 9 | 3727820800404186:caf29037933fb248fb45481e34e40aba_6a6df4f285464c7e3e5d044a.6a6eaed085464c7e3e5d0c77.6a6eaed085464c7e3e5d0c75:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 10:43:28) |
| 10 | 3727820800404186:a11573c846a2c4a039fae915c8db8fba_6a6b0f2c265b096b25dc9a4d.6a6c7b8185464c7e3e5cf723.6a6c7b8185464c7e3e5cf721:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/31 18:40:01) |
| 11 | 3727820800404186:f320ab352a817debf99d7c20cf222788_6a6d91da85464c7e3e5cff4b.6a6df2d785464c7e3e5d0434.6a6df2d785464c7e3e5d0432:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/1 21:21:27) |
| 12 | 3727820800404186:29ae10f6cb404ee01c53ffef69aa92eb_6a6d59a585464c7e3e5cf80c.6a6d8e9685464c7e3e5cff32.6a6d8e9685464c7e3e5cff30:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/1 14:13:42) |
| 13 | 3727820800404186:2074240cb26353a562e98aa37ed963b5_6a677c2a965444b0a9cf53a6.6a6acb10265b096b25dc9332.6a6acb10265b096b25dc9330:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/30 11:54:56) |
| 14 | 3727820800404186:7c07ece0550e8906d8c699f1304cbd47_6a672d94965444b0a9cf4da3.6a6791b6965444b0a9cf5601.6a6791b6965444b0a9cf55ff:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/28 01:13:26) |
| 15 | 3727820800404186:68ff408fb65dfa1c695898ef44fb6fbb_6a73e035b48fb4d0f43edde3.6a74600fb48fb4d0f43ee7a0.6a74600fb48fb4d0f43ee79e:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/6 18:21:03) |
| 16 | 3727820800404186:d145573b6b11a906d9e9f38ce7596907_6a75625640396a3a7e3f3af2.6a756a4640396a3a7e3f3c33.6a756a4640396a3a7e3f3c31:TraeWork CN.0.1.45.no_sid.no_ppe.T(2026/8/7 13:16:54) |
初赛阶段（#1 – #123 轮对话）的 30 个完整 Session ID 请参考初赛作品帖：
初赛帖链接：【生活娱乐赛道】胡桃木 — 属于二次元爱好者的清新交流社区
7.3 TRAE 工程化实践：日志体系 · 三仓库分离 · 代码规模
为了让 TRAE 在 46 天里持续协作不「失忆」，我建立了一套完整的 AI 协作工程化规范，这也是我能一个人长期推进大项目的核心秘诀：
① 4+2+1 日志体系
logs/
├── AI对话记录.md ← 跨会话记忆：每次对话结束写主题、核心需求、决策、待办
├── 项目更新日志.md ← 功能开发：每条含更新内容/原因/涉及文件/影响范围
├── 项目问题修复日志.md ← bug 修复：每条含问题描述/原因/方案/涉及文件/验证
├── 删除记录.md ← 删除操作：任何删除功能/文件/代码都记录，防「功能怎么没了」
├── git仓库说明.md ← 前后端仓库地址与推送历史记录表
└── 技术文档集.md ← 按章节追加的设计文档/接口文档
这套体系让每次开启新会话时，TRAE 先读这几份日志就能快速恢复上下文，不会出现「你之前做过什么？我不记得了」的幻觉。前后端归属标签制度让每条日志都标注【前端】【后端】【全栈】【文档】【部署】五选一，后续检索极快。
Git 推送原则：只推送纯净源码，不推送测试文件 / 运行产物（node_modules / dist / target / uploads / logs / .npm-cache 等全部 gitignore）。
③ 代码规模量化指标（截止 8/6 复赛完赛）
- 前端：约
111个 Vue 组件 / 页面（src/views + src/components + src/stores + src/utils），约 48,392 行代码 - 后端：约
136个 Java 文件（entity / repository / controller / service / dto / config / common），约 19,331 行代码 - 部署配置：Dockerfile × 2（前端 nginx + 后端 jdk17）、docker-compose.yml、nginx.conf、.env.example
- 统一跨页面复用：CommentList（帖子/画廊/视频/Wiki 四模块共用）、sections.ts（板块 ID 与名称唯一真源）、theme.ts（二次元主题置顶）
八、技术方案分享
8.1 整体架构：前后端分离 + Docker 三容器
┌──────────────────────────────────────────────────────┐
│ 公网域名 (nginx) │
│ frontend 容器 (nginx:1.27-alpine) │
│ ├── / → /usr/share/nginx/html (Vue SPA) │
│ ├── /api/* → proxy_pass backend │
│ └── /uploads/* → proxy_pass backend │
└──────────────────────┬───────────────────────────────┘
│ Docker 内网 hutaomu-net
┌──────────────────────▼───────────────────────────────┐
│ backend 容器 (eclipse-temurin:17-jdk) │
│ ├── Spring Boot 3.2 + Spring Security + JWT │
│ ├── JPA / Hibernate ddl-auto: update │
│ ├── Redis：Token 存储 + 验证码 + 热数据缓存 │
│ └── uploads/ 本地磁盘（UUID 命名，videos/images/） │
└──────────────────────┬───────────────────────────────┘
│
┌──────────────────────▼──────────┐ ┌──────────────┐
│ mysql:8.0 容器 :3306 (hutaomu) │ │ redis:7.4 │
│ volume: mysql_data 持久化 │ │ volume: │
└─────────────────────────────────┘ │ redis_data │
└──────────────┘
- 后端永不暴露公网端口：docker-compose 里 backend 服务不写
ports:，仅在hutaomu-net内部可达，所有请求统一走 nginx/api反代 - 上传文件本地磁盘 + URL 入库：
backend/uploads/（images / videos 子目录）用 UUID + 扩展名命名，数据库只存/uploads/xxx.jpg字符串；生产部署用uploads_datavolume 持久化 - 首次启动 Setup 通道：后端没有配置好数据库时会暴露 SetupController，网页上填 MySQL/Redis/JWT 连接后保存到
backend/config/database.properties并自动重启后端
8.2 后端技术选型与关键实现
| 领域 | 技术方案 | 说明 |
|---|---|---|
| 框架 | Spring Boot 3.2.5 + JDK 17 | JDK 17 LTS + 虚拟线程可选 |
| ORM | Spring Data JPA + Hibernate | ddl-auto: update 自动建表；复杂查询结合 JpaSpecificationExecutor 动态条件 |
| 认证 | Spring Security + JWT（jjwt 0.12） | 90 天有效期 Token 存入 Redis，<45 天自动续期（滑动过期）；登出 / 修改密码 / 注销立即失效 Redis Token |
| 缓存 | Redis 6.2 | 验证码 / Token / Bangumi 浏览缓存（key 版本 v1→v5 迭代）/ 每日上传计数（每用户每日 20 文件限制） |
| 邮件 | JavaMailSender + Spring Boot Mail | 注册验证 / 重置密码 / 注销 / 改密 四类验证码（Redis 15 分钟 TTL）；注册验证链接按请求 Origin 动态生成域名（.cn / .top 多域名支持）；邮件同时发送 text/plain + text/html 两部分 |
| 数据库 | MySQL 8.0 | utf8mb4 字符集（支持 emoji）；事务全部默认 JPA 默认传播级别 |
| 文件上传 | 扩展名白名单 + 魔数校验 + UUID 命名 | 视频 ≤3G / 图片 ≤10MB / 每用户每日 20 个文件（Redis 计数）/ 磁盘剩余 <500MB 拒绝 |
| 安全 | SsrfValidator + SecurityHeadersFilter | 图片/音频/管理员 URL 导入 SSRF 校验；X-Content-Type-Options / Referrer-Policy 响应头；Markdown 渲染 escapeHtml；日志接口 IP 限流 |
| 第三方 API | Bangumi / Meting | Bangumi 支持 API 地址镜像 + 图片 CDN 镜像可配置；Meting 音频手动跟随重定向防防盗链 403 |
8.3 前端技术选型与关键实现
| 领域 | 技术方案 | 说明 |
|---|---|---|
| 框架 | Vue 3.4 + Vite 5 + TypeScript 5 | <script setup> 语法糖，组合式 API |
| UI 库 | Element Plus 2.x + unplugin-auto-import | 按需注入，auto-imports.d.ts / components.d.ts 纳入版本控制；全局 :focus-visible:not(...) 源头排除 hover 触发器焦点环 |
| 状态管理 | Pinia | 用户 / 主题 / 板块 / 音乐播放器 / OOBE 草稿 等 8 个 store |
| 样式 | Tailwind CSS 3 + 自定义主题 tokens | 6 套主题用 CSS 变量切换；var(--accent) 主色贯穿全站；body { overscroll-behavior-y: none } 禁用移动端下拉 |
| 路由 | Vue Router 4 | 路由级页面过渡动画（不同类型页面不同过渡）；浏览器后退禁用入场动画 |
| HTTP | Axios 全局实例 + 独立 upload 工具 | /api 前缀全局配置；独立 upload.ts 单独 10 分钟超时 + onUploadProgress，不复用全局 60s 超时 |
| Markdown | 自研渲染引擎 + marked + highlight.js | 表格/嵌套列表/任务列表/图片灯箱（键盘导航+缩放平移）；属性转义防 XSS；外部链接内部导航 |
| 图片加载 | 统一 ImageProxy + 骨架屏 | 所有图片量大页面走图片代理压缩 + 骨架屏，未打开页面骨架屏立即出、内容随后加载 |
九、社会价值分析
9.1 社会价值：给二次元爱好者一个「干净的家」
国内 ACGN 文化长期面临「标签化、圈层化、出圈即变质」的困境，胡桃木的社会价值不是「做一个赚钱的 App」，而是：
① 守护纯净的交流空间
- 严格的 NSFW 分级过滤 + 敏感内容词库 + 举报 + 版主制度，守护未成年人浏览安全；
- 拒绝「算法裹挟用户」：首页默认按时间 + 热度综合排序，不是为了停留时长无限推送；
- 反网络暴力：用户拉黑后跨页面完全屏蔽（帖子 / 评论 / 私信 / 搜索结果全部不可见），不做「让你继续生气的推荐」。
② 整理中文 ACG 知识库
- Wiki 模块长期目标是成为中文互联网最完整、校对最严谨的二次元角色 / 作品资料库；
- 萌娘百科偏趣味向，Bangumi 偏评分向，胡桃木 Wiki 走「设定资料优先、合并且规范化」的路线（例：同一角色的日文原名、中文官方译名、民间译名、声优、初登场作品、身高体重三围、生日、角色歌、关联手办全部结构化沉淀）；
- 所有 Wiki 词条默认 CC BY-NC-SA 4.0 协议开放给非商业用途引用。
③ 扶持中小创作者
- 同人画师 / 文手 / Coser 在大平台常被算法限流或被公司账号挤压曝光；
- 胡桃木建立「新人 / 冷门作品推荐流」机制：同样质量的内容，粉丝数 < 500 的创作者加权曝光，让小众太太的图也能被 1000 个同好看到，而不是只有粉丝 20W 的头部太太永远上首页；
- 约稿平台抽佣比其他平台低一半，创作者能拿到实付的 85% 以上。
④ 跨代际的文化留存
- 00 后入宅时找不到的 2010 年代老番讨论、10 年代 V 家名曲的整理、90 年代经典动画的深度赏析 —— 这些内容散落在贴吧坟贴、微博被删、LOFTER 限流。胡桃木作为长文 + 结构化资料为主的社区，目标是把它们系统性沉淀下来，让 10 年后的爱好者也能搜到。
十、开源致谢
胡桃木能在 46 天从零到完整作品，离不开许多优秀开源项目的支持——站在巨人的肩膀上，再加上 TRAE 的一臂之力，一个人也能搭出完整社区：
10.1 后端开源项目
- Spring Boot 3.2（Pivotal）：后端框架基础，JPA / Security / Mail 全家桶
- Spring Data JPA + Hibernate：ORM 与自动建表，Specification 动态查询
- jjwt 0.12：JWT Token 签发与验证
- Spring Data Redis + Lettuce：Token / 验证码 / 缓存 三件套
- MySQL 8.0 + Connector/J：关系型数据库存储
- Lettuce Redis Client：Redis 异步客户端
- JavaMailSender：SMTP 邮件发送
- Apache Commons IO / Lang3：工具类集
- HikariCP：JDBC 连接池（Spring Boot 默认）
10.2 前端开源项目
- Vue 3.4 + Vite 5：组合式 API + 极速构建
- TypeScript 5：类型系统与开发体验
- Element Plus 2.x：UI 组件库基础
- Tailwind CSS 3：原子化样式与 CSS 变量主题
- Pinia：轻量状态管理
- Vue Router 4：路由与页面过渡
- Axios：HTTP 客户端 + 拦截器
- marked + highlight.js：Markdown 解析与代码高亮
- Cropper.js：头像 / 封面图片裁剪
- unplugin-auto-import + unplugin-vue-components：按需自动注入
10.3 部署与运维
- Docker + Docker Compose：三容器编排（frontend / backend / mysql + redis）
- Nginx 1.27：静态文件服务 +
/api/uploads反向代理 - Eclipse Temurin JDK 17：后端 OpenJDK 发行版
- node:20-alpine：前端多阶段构建镜像
10.4 第三方开放 API
- Bangumi 开放 API：番剧数据来源，番剧详情/ 每日放送 / 全库浏览 / 人物信息
- Meting API（公益实例）：在线歌单数据
- 萌娘百科 / 维基百科：Wiki 词条协作编辑模式参考与贡献者堆叠 UI 参考
。还记得那个年纪，最大的愿望就是实现动漫自由，当年追《死神》苦苦等每周更新的滋味，现在回想起来依旧历历在目。邱姐太厉害了，为你点赞