生活娱乐 · 胡桃木 —— 属于二次元爱好者的清新交流社区
赛道：生活娱乐 ｜ 作者：邱息 / qiuxi903 ｜ 开发周期：2026-06-21 ~ 2026-07-15（25 天）
技术栈：Vue 3 + Vite + TypeScript + Element Plus + Pinia + Tailwind CSS ｜ Spring Boot 3.2 + JPA + MySQL 8.0 + Redis 6.0 + JWT + Spring Security + JavaMail
开发工具：TRAE IDE/TRAE WORK（全程 TRAE 开发）
一、Demo 简介
是什么
胡桃木（Hutaomu） 是一个面向 ACGN 爱好者的清新交流社区网站（Web 端，响应式适配移动端）。它将同人创作、动漫讨论、百科资料、音乐分享、社区交友等二次元核心需求聚合到一个入口，让用户不再在多个 App 之间疲于切换。
面向谁
- 14–35 岁的 ACGN 文化爱好者
- 同人画师、Cosplayer、文手等内容创作者
- 追番、打二游的普通观众和玩家
- 希望有一个干净平台整理和分享个人收藏的爱好者
主要功能
胡桃木是一个功能完整、可注册体验的全栈社区系统。以下是已落地的核心模块：
1. 完整账号体系
- 注册 / 登录 / 邮箱验证码验证 / 忘记密码（邮箱重置）
- 首次注册 OOBE 引导系统（主题选择、兴趣板块、个人资料初始化）
- 个人资料页、头像上传裁剪、封面自定义、关注与粉丝体系
- 邀请码注册机制、异地登录二次验证保护
2. 内容发布与互动
- 发帖（Markdown 富文本编辑器 + 图片上传 + 分区选择）
- 同人画廊发布（多图上传、裁剪对齐）
- 视频发布、Wiki 词条创建
- 点赞、收藏、转发、举报
- 评论系统：YouTube 式层级嵌套（最多 3 层 + thread line 连接线），第 1 层默认展示 2 条 + 分页加载更多，深层回复默认折叠，支持评论点赞
3. 动漫资料板块（核心特色）
- 接入 Bangumi 开放 API，支持每日放送、全库浏览、分页筛选、类型过滤
- 动漫详情页：Tab 信息切换、InfoBox 资料卡、Staff 制作人员、相关作品推荐、评分分布柱状图
- 声优 / 导演 / 制作公司专属人物页，支持搜索秒出
- 短片（PV/MV）独立分区筛选、老番过滤
4. 百科资料系统（Wiki）
- 自研 Markdown 渲染引擎：支持表格、嵌套列表、多行引用、任务列表、代码块、图片画廊与灯箱（键盘导航）、动态目录、锚点跳转
- 支持创建和编辑词条，InfoBox 右浮布局 + 移动端自适应
5. 音乐播放器
- 接入 Meting 在线歌单 API，后台可配置歌单来源
- 会员 / 试听歌曲自动识别过滤
- mini 控制条 + 展开态、歌曲封面展示、外链跳转原曲、拖动把手
- localStorage 歌单缓存，刷新即可恢复播放
6. 消息与通知
- 私信聊天（在线状态指示、固定头部与输入区）
- 通知系统（点赞、评论、关注、系统通知），未读红点、点击跳转自动消除
- 移动端消息：先选联系人再进聊天，内容不重叠
7. 管理后台
- 用户管理（封禁 / 解禁 / 角色调整）、内容审核（帖子 / 画廊 / Wiki / 视频）
- 板块管理（增删改、关注数校验）、系统通知群发（用户筛选 + 历史记录）
- 站点配置（ICP 备案、公安备案、邮件服务、音乐歌单）
- 操作日志、数据统计（访问量、发帖量、活跃用户）
8. 主题与个性化
- 5 套完整主题：亮色、暗色、高对比、冰璃、二次元动态壁纸（支持自动切换 / 锁定）
- 自定义背景图、主题色、字体大小
- 主题设置跟随账号云端同步
- 壁纸悬浮控制窗（可拖动、自动换图、刷新换图）
9. 搜索系统
- 全局搜索覆盖五类内容（帖子 / 画廊 / 视频 / Wiki / 用户）
- 搜索历史持久化（localStorage，最多 20 条，可逐条删除或清空）
- 板块内搜索、关键词高亮
10. 部署与运维
- Docker 一键部署（docker-compose.yml + 前后端 Dockerfile + nginx.conf）
- 数据库 setup 通道：首次启动时在页面上配置数据库连接，无需手动修改配置文件
- JWT Token 存入 Redis，支持服务端主动失效
- 统一 API 响应格式
{ code, message, data }、全局异常处理器兜底
产品截图
二、Demo 创作思路
灵感来源
作为一个长期活跃在二次元圈子的普通用户，我经常遇到"想刷点高质量同人内容，却不知道去哪"的尴尬。现有平台要么广告满天飞，要么推荐算法混乱，要么社区氛围被"出圈"内容稀释。
国内二次元用户群体庞大，但内容分散在微博、小红书、LOFTER 等 N 个平台。用户想找同人图、讨论新番、交流二游攻略、认识同好，往往需要在多个 App 之间来回切换，体验割裂且效率低下。
想解决的问题
- 内容分散：想看的东西分布在 N 个平台，每天来回切换，心累
- 算法干扰：推荐系统常塞不相关、低质量的内容，找"好东西"成本高
- 氛围混杂：公共社区评论区质量参差不齐，缺少纯粹的同好氛围
- 功能不完整：有些平台只有图片、有些只有短视频，缺少一个能同时承载图文、长文、百科资料的综合社区
- 账号与隐私：部分平台强制实名、广告推送频繁，用户体验不佳
为什么做这个方向
- 真实需求：二次元文化在国内仍被标签化，一个积极、友好、有管理的中文社区，能让爱好者获得更健康的交流空间
- 信息整理价值：社区内的百科资料、官方资讯板块承担着知识整理和科普的功能，帮助新入坑的朋友更快了解作品与文化
- 取舍明确：不追求"大而全的社交平台"，而是聚焦"二次元同好社区"这一个垂直场景，把内容质量、社区氛围、用户体验做扎实
- 有过程、有体验、讲得清楚：大赛看的是真实价值，我选择了一个自己每天都在使用的场景，每一个功能决策都有真实体验支撑
三、Demo 体验地址
- 支持注册、登录、发帖、评论、点赞等全部交互
- 可游客身份浏览公开内容
- 移动端浏览器自动适配响应式布局
测试账号（评审可直接登录体验）：
| 项目 | 内容 |
|---|---|
| 注册邀请码 | AGZ4SFM2 |
| 测试账号 | hutaomu903@163.com |
| 测试密码 | usertest123 |
已自测：链接可正常打开，注册、发帖、动漫浏览、百科查看、音乐播放等核心功能均可体验。
四、TRAE 实践过程
4.1 整体开发流程
胡桃木从 0 到 1 全程使用 TRAE IDE 的 AI 智能体协作开发，共完成 123 轮对话（#1 ~ #123），覆盖需求拆解、架构设计、编码实现、Bug 修复、UI 打磨、性能优化、部署配置的完整流程。
开发阶段时间线：
| 阶段 | 时间 | 对话编号 | 核心产出 |
|---|---|---|---|
| 项目搭建 | 06-21 ~ 06-23 | #1 ~ #23 | 目录结构、前后端框架、首页、登录注册、侧边栏、帖子流 |
| 核心功能 | 06-24 ~ 07-04 | #24 ~ #41 | 封面持久化、全局搜索、创作者中心、OOBE 引导、邀请码、邮箱验证 |
| 界面打磨 | 07-05 ~ 07-08 | #28 ~ #37 | 设计系统、动效统一、图标扁平化、移动端适配、字体切换、去"AI 生成感" |
| 互动深化 | 07-09 ~ 07-11 | #46 ~ #64 | 通知系统、消息入口、移动端防文字竖排、壁纸自动切换、壁纸悬浮控制窗 |
| 音乐播放器 | 07-12 ~ 07-13 | #69 ~ #100 | Meting 歌单接入、会员歌曲过滤、mini 控制条、歌名显示优化、翻译插件规避 |
| 评论系统 | 07-12 | #87 ~ #97 | 三种方案迭代 → 最终确定 YouTube 式层级嵌套 + thread line 连接线 |
| 管理后台 | 07-12 | #80 ~ #86 | 系统通知群发、用户筛选、历史展示、表格样式统一、图标线性 SVG 化 |
| 动漫板块 | 07-13 ~ 07-14 | #104 ~ #120 | Bangumi API 接入、详情页重构、声优/导演人物页、每日放送、全库分页 |
| 百科系统 | 07-14 ~ 07-15 | #114 ~ #122 | Markdown 渲染引擎强化（表格/嵌套列表/灯箱）、词条创建编辑、布局重构 |
| 收尾整理 | 07-15 | #121 ~ #123 | Banner 推荐机制重构、可读性修复、根目录清理、文档归位、Git 推送 |
4.2 关键开发步骤截图
开发关键步骤截图
4.3 关键任务对话 Session ID
Session ID
| 序号 | Session ID |
|---|---|
| 1 | .3727820800404186:7f9a9890f88dd802215469c51aa29004_6a39d709dbaac7fdc439ef5d.6a4bec07b370a6e67fd7b182.6a4bec0782a18a82c207efef:Trae CN.T(2026/7/7 01:55:19) |
| 2 | .3727820800404186:43d2e7098687d0128ff8797a2be1fef7_6a4bc55eb370a6e67fd7ac07.6a4be3d4b370a6e67fd7b00c.6a4be3d382a18a82c207efed:Trae CN.T(2026/7/7 01:20:20) |
| 3 | .3727820800404186:bbfe473c2b9494aaa45d0f9e227b53e5_6a4c8f81b370a6e67fd7b3a4.6a4ce619f6806046fa745adc.6a4ce61886abc94fe581fa03:Trae CN.T(2026/7/7 19:42:17) |
| 4 | .3727820800404186:d5bef228eba721ec129d50460e0bda0b_6a4ce788f6806046fa745b2a.6a4d32c1f6806046fa745fcf.6a4d32c086abc94fe581fa17:Trae CN.T(2026/7/8 01:09:21) |
| 5 | .3727820800404186:5111b270739660a1ba7e2e1853a2842d_6a4d33a3f6806046fa745ff0.6a4e20a8dcb893a77e113c7c.6a4e20a70a17248d7818377a:Trae CN.T(2026/7/8 18:04:24) |
| 6 | .3727820800404186:67a42239c89fa67c3bbaab24cb5c7e7b_6a4d7df1dcb893a77e113598.6a4e349683eeff684dc78975.6a4e34950147242761c4159c:Trae CN.T(2026/7/8 19:29:26) |
| 7 | .3727820800404186:67f538ffcbe7af061ccb1c094207281d_6a4e20f8dcb893a77e113c88.6a4e3f4783eeff684dc78aaf.6a4e3f460147242761c415a2:Trae CN.T(2026/7/8 20:15:03) |
| 8 | .3727820800404186:4967770ca9e922a6be3246f6f4fafd93_6a4e44bb83eeff684dc78ae2.6a4f7bb283eeff684dc79a84.6a4f7bb00147242761c415d9:Trae CN.T(2026/7/9 18:45:06) |
| 9 | .3727820800404186:3214cd23d4d4024d1bccceaa490509e9_6a4f765783eeff684dc799f2.6a5126eef92860e61945a7dc.6a5126ec4a85834be059add8:Trae CN.T(2026/7/11 01:07:58) |
| 10 | .3727820800404186:c30c39daaabd48061b899383d323d2bb_6a51151ef92860e61945a4ac.6a527dc3f92860e61945b625.6a527dc24a85834be059ae13:Trae CN.T(2026/7/12 01:30:43) |
| 11 | .3727820800404186:2274817b19e3024709f97ee79fbc1e0e_6a527e80f92860e61945b631.6a5348b2d7103583e9937d7a.6a5348af503b941b3b755ce1:Trae CN.T(2026/7/12 15:56:34) |
| 12 | .3727820800404186:a5ddae9889dc9f2479443d1c4d81f2d5_6a535007d7103583e9937dea.6a537fd2d7103583e99381cf.6a537fd1503b941b3b755cfb:Trae CN.T(2026/7/12 19:51:46) |
| 13 | .3727820800404186:07991b5d3fb7b0126e6eac7dc4c10a91_6a538ce8d7103583e9938286.6a53ed8dd7103583e993887f.6a53ed8c503b941b3b755d2c:Trae CN.T(2026/7/13 03:39:57) |
| 14 | .3727820800404186:dc7705fe93695ad2835d68f3306f2017_6a53ee9bd7103583e99388be.6a54cb5cd7103583e9939927.6a54cb58503b941b3b755d5d:Trae CN.T(2026/7/13 19:26:20) |
| 15 | .3727820800404186:de7362077e2ff9752df7b5c3cde1eb8b_6a54e02ad7103583e9939a45.6a554162d7103583e993aa06.6a554160503b941b3b755d77:Trae CN.T(2026/7/14 03:49:54) |
| 16 | .3727820800404186:a2afbdfba6b5633ef53ee33d563f5db4_6a553f55d7103583e993a94f.6a55d902d7103583e993ace4.6a55d901503b941b3b755d86:Trae CN.T(2026/7/14 14:36:50) |
| 17 | .3727820800404186:da80f979539de35b6ae1dcd4ea4f9349_6a55d90fd7103583e993acec.6a56629a17a8c1e37d84de61.6a56629630d3c3740f0e6d0b:Trae CN.T(2026/7/15 00:23:54) |
| 18 | .3727820800404186:0e4e0dc30d9b9a34dab87114e6ebcbe3_6a56269b17a8c1e37d84c9d5.6a56681417a8c1e37d84e19f.6a56681230d3c3740f0e6d16:Trae CN.T(2026/7/15 00:47:16) |
| 19 | .3727820800404186:0d315d1ff91a36bce058286203e29be0_6a56369917a8c1e37d84cd1e.6a5670d317a8c1e37d84e4b8.6a5670d230d3c3740f0e6d1b:Trae CN.T(2026/7/15 01:24:35) |
| 20 | .3727820800404186:7b01d277718e8fb442ba2184c0e3c3dd_6a56769f17a8c1e37d84ead9.6a5690949d4e337cf9e3cf4d.6a569093be8965a3d1d57bb6:Trae CN.T(2026/7/15 03:40:04) |
| 21 | .3727820800404186:0cbdf56721491cc5931d3f5a28e20f82_6a56619217a8c1e37d84dd6b.6a569fa79d4e337cf9e3d3e7.6a569fa5be8965a3d1d57bc0:Trae CN.T(2026/7/15 04:44:23) |
| 22 | .3727820800404186:efb443bba1c6df38d3f7ec30e9766ce0_6a56a0fe9d4e337cf9e3d443.6a56a2ae9d4e337cf9e3d4e2.6a56a2abbe8965a3d1d57bc4:Trae CN.T(2026/7/15 04:57:18) |
| 23 | .3727820800404186:90dac1e8db9ca52b9b82968285f4fbf1_6a5693b79d4e337cf9e3d09a.6a56afab9d4e337cf9e3d7ea.6a56afaabe8965a3d1d57bd0:Trae CN.T(2026/7/15 05:52:43) |
| 24 | .3727820800404186:c5cc77d93d18358d14720e64125dc610_6a56b2fd9d4e337cf9e3d8ab.6a56dc7d9d4e337cf9e3dc03.6a56dc7bbe8965a3d1d57bf0:Trae CN.T(2026/7/15 09:03:57) |
| 25 | .3727820800404186:649be357ad5a1e0db6e331c247fc734e_6a56ad8c9d4e337cf9e3d76d.6a56e5829d4e337cf9e3dc88.6a56e580be8965a3d1d57bf7:Trae CN.T(2026/7/15 09:42:26) |
| 26 | .3727820800404186:12618216ee57d0552fc6f88ccd5198a4_6a56d8d59d4e337cf9e3db22.6a56ed359d4e337cf9e3dcab.6a56ed34be8965a3d1d57bf9:Trae CN.T(2026/7/15 10:15:17) |
| 27 | .7645668732962882576:dc31881639f1f369cea3839fedd24bf1_6a40934a4f01ff1b79c99d89.6a40a6824f01ff1b79c99e88.6a40a68100fe04e5f767fee3:Trae.T(2026/6/28 12:43:46) |
| 28 | .3727820800404186:139a52a644cb3b8ee1094128e01694bc_6a39d709dbaac7fdc439ef5d.6a4115580eb43d5bc4f4a41c.6a411556930060cc671c1e18:Trae CN.T(2026/6/28 20:36:40) |
| 29 | 3727820800404186f584d30e04af8c0e26d8beada283b39b_6a37e78f298e016f06d7666c.6a3a8c2e322141f6a696db08.6a3a8c2e322141f6a696db06TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026623 213750) |
| 30 | 3727820800404186:0fab090ea8dccf5205818b32727ed7cf_6a37e78f298e016f06d7666c.6a3aafb8322141f6a696dc47.6a3aafb8322141f6a696dc45:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/24 00:09:28) |
4.4 真实开发过程：任务拆解 + 踩坑复盘
案例 1：评论嵌套结构的四次方案迭代（#87 ~ #97）
评论回复的展示结构是整个项目中最折腾的功能之一，真实经历了四次推翻重来：
- 第一版：传统论坛式平铺 + 递归嵌套。深层回复缩进过深，移动端直接溢出。
- 第二版：加固返回白屏修复后仍有层级混乱问题。
- 第三版：改为短视频式两层平铺，但用户反馈"不像社区该有的样子"。
- 最终版：YouTube 式层级嵌套，最多 3 层 + thread line 连接线，第 1 层默认 2 条 + 分页加载更多，第 2 层及更深默认全部折叠。
期间还附带修复了"回复子评论后内容不显示""返回主页帖子不可见但可点击"等连锁 bug。
感悟：复杂交互没有一次到位的方案，关键是快速迭代 + 真实场景验证。TRAE 的优势恰恰是"改起来快"。
案例 2：动漫板块的持续打磨（#104 ~ #120）
动漫板块耗时最长的模块，前后经历 17 轮对话：
- 接入 Bangumi 开放 API 获取番剧数据，实现每日放送、全库浏览、分页筛选
- 详情页拆解为 Tab/InfoBox/Staff/相关推荐四个区域，评分分布用柱状图直观呈现
- 声优 / 导演 / 制作公司独立人物页，支持搜索秒出
- 短片（PV/MV）分区筛选、老番过滤
踩坑：Bangumi 浏览/筛选/排序重构时遇到"美漫窜位、类型标注不一致、日漫不纯、大数据量卡顿"的问题，通过重构查询与排序逻辑，配合首屏自动补满兜底机制解决。
案例 3：百科（Wiki）系统的全链路实现（#114 ~ #122）
百科是最体现"全栈"能力的模块：
- 自研 Markdown 渲染引擎：从零实现了表格、嵌套列表、多行引用、任务列表、代码块、图片画廊、图片灯箱（支持键盘左右导航）、动态目录生成、标题锚点跳转
- 词条创建与编辑：支持富文本录入，InfoBox 资料卡右浮动布局，移动端自适应为全宽
- 防盗链处理：外部百科图片转 base64 内嵌，避免引用图片裂开
踩坑：Wiki 详情页布局经历多次重构——从固定章节结构改为 Markdown 全文渲染 + 动态目录，InfoBox 从左浮动改为右浮动使正文自然环绕。图片灯箱最初没有键盘导航，用户反馈后补上了左右方向键支持。
案例 4：音乐播放器的细节打磨（#69 ~ #100）
音乐播放器看似简单，实际打磨了 30+ 轮对话：
- Meting 在线歌单接入，遇到限流后迁移备用实例
- 会员 / 试听歌曲过滤：从"30 秒片段特征判断"升级为后端精确字段检测
- mini 控制条：三按钮 + 圆形中央按钮展示当前曲目封面
- 歌名显示：从"滚动两圈后定格开头"→"不溢出居中、溢出左对齐保开头 + 省略号"
- 沉浸式翻译插件会把歌名翻译成英文：逐元素标记不可翻译 → 整体标记 → 改用
<code>标签阻止——前后试了 5 种方案才彻底解决
感悟：歌名被翻译插件翻译这种"小众但真实"的坑，只有真正用起来才会发现。
案例 5：主题系统的稳健性优化（#121）
主题系统支持 5 套主题，后期发现两个底层缺陷：
accent.replace()链式调用对已是 rgba 格式的主题色（冰璃主题）会输出错误字符串 → 改为统一的hexToRgba()辅助函数root.className = ...整体覆写会清除临时 class（如 notransition、mobile-menu-open）→ 改为classList.toggle()精准增删
状态色也从硬编码抽成了 token 变量（--danger / --success / --warning），各主题独立覆盖。
4.5 代码规模
| 维度 | 数据 |
|---|---|
| 前端 Vue 视图 | 34 个页面组件 |
| 后端 Controller | 20+ 个 API 控制器 |
| 后端 Entity | 23 个数据实体 |
| TRAE 对话轮次 | 123 轮 |
| Git 推送 | 前端 7 次 / 后端 6 次 |
4.6 AI 协作的工程化实践
为了在 25 天、123 轮对话中保持开发可追溯、不"失忆"，项目建立了一套工程化协作机制：
- 持久化协作规则（
AI协作规则.md）：定义每次对话必读文件清单、四类日志分工、前后端标签标注规则、重大事件确认流程、防幻觉机制 - 四类日志各司其职：AI 对话记录（决策与上下文）、项目更新日志（功能变更）、问题修复日志（Bug 追踪）、删除记录（清理可追溯）
- 跨会话记忆：每次新会话开始，AI 先读完所有日志文件再工作，杜绝"凭空记忆"
- Git 干净推送：前后端仓库分离，只推源码（排除 node_modules / target / uploads / logs），每次推送记录日期、提交说明、commit hash
五、开发心得与踩坑总结
5.1 用 TRAE 做全栈项目的三点体会
- 敢于迭代，不怕推翻：评论嵌套迭代 4 版，Wiki 渲染器重构 3 次，主题系统持续优化。TRAE 改代码快，试错成本低，这是传统手写代码不具备的优势。
- 需求描述比代码本身重要：动漫详情页参考 anispaceee 风格、评论用 YouTube 式嵌套、歌名保开头 + 省略号——把参考对象和期望行为讲清楚，AI 一次出来的结果就很接近目标。
- 真实使用才能发现真问题：沉浸式翻译插件翻译歌名、移动端 flex 文字被挤竖排、ElDropdown 的粉红 focus ring——这些都不是"设计时能想到"的，而是真正用起来才暴露的。
5.2 代表性踩坑案例
| 问题 | 根因 | 解决方案 |
|---|---|---|
| 返回主页白屏，帖子不可见但可点击 | <Transition> mode 在渲染中途切换 |
在 beforeEach 中提前设置 isBackNavigation，确保组件渲染前拿到正确值 |
| ElDropdown 出现粉红 focus ring | Element Plus 内部 JS 注入 box-shadow | 全局 CSS 覆盖所有 ElDropdown 相关元素的 outline 和 box-shadow |
| 移动端文字被挤成竖排 | flex 容器空间不足 | 全局 white-space: nowrap 兜底 + 关键区域改用 Grid |
| MySQL 8.0.29 以下不支持 CREATE INDEX IF NOT EXISTS | 版本兼容性差异 | 改用 INFORMATION_SCHEMA.STATISTICS 查询判断索引是否存在 |
| 邮箱验证前就创建了用户记录 | 注册流程设计缺陷 | 改为延迟建号：验证码校验通过后才创建用户 |
| 二次元主题下浅色文字看不清 | 壁纸颜色多变、文字对比度不足 | 浅色文字添加 accent 渐变底边，提升可读性 |
5.3 不是"一次性 Demo"
这个项目在工程化方面做了扎实的投入：
- 前后端分离，统一 API 响应格式，全局异常处理兜底
- Docker 一键部署，数据库 setup 通道免手动改配置
- JWT + Redis 的 Token 管理，支持服务端主动踢下线
- 123 轮对话全程日志可追溯，任何代码变更都能回溯到当时的决策上下文
这些基础让项目具备了"可维护、可扩展、可部署"的能力，也为后续复赛迭代打好了地基。
六、报名帖链接
已通过的社区报名帖：[【生活娱乐赛道】胡桃木 —— 属于二次元爱好者的清新交流社区]
七、开源与致谢
- 开发者博客：hutaomu.cn
- 动漫详情页参考设计：anispaceee.github.io
- 音乐播放器组件：Mizuki
- 动漫数据来源：Bangumi 番组计划、萌娘百科
—— 邱息 / qiuxi903，2026 年 7 月 · TRAE AI 创造力大赛初赛 Demo 帖