文章摘要
本文介绍了一个名为“玄玑洞府”的开源国风3D个人主页系统，融合东方水墨基底与低多边形科技风格，实现内容与展示完全分离。前端包含六大3D场景，支持GSAP镜头动画、虚拟人物交互、玉简灵脉法宝等场景交互，以及修为值、灵签、昼夜轮转等彩蛋功能，并具备WebGL降级兼容与Canvas程序化贴图渲染。后台采用Ant Design水墨修仙风格，涵盖登录验证、仪表盘、筑基档案、修行履历、丹器馆藏、传讯玉符及系统设置等模块，支持拖拽排序、Markdown编辑与主题细节优化。
玄玑洞府 · 国风3D个人主页系统【开源】
东方水墨基底 + 低多边形科技风格个人主页 前端3D沉浸式洞府游历 + Ant Design水墨修仙风可视化后台，内容与展示完全分离
✨ 前端 3D 主页
场景构成（6大场景）
山门候客（加载页）→ 洞府前厅 → 筑基概况 / 修行履历 / 丹器馆藏 / 传讯玉符
镜头系统
- GSAP插值动画（power2.inOut，时长1.2s）
- 前厅待机公转，周期20s，±15°旋转
- 鼠标跟随画面偏移；转场过程锁定交互，防止误操作
虚拟人物形象
- 模型来源：Tripo生成GLB开源人物模型（少年男性）
- 自研减面压缩：原43MB / 149万三角面 → 压缩至3.14MB / 11万三角面
- 渲染色调：生宣暖白，融合青绿水彩国风
- 动作：待机呼吸、轻微摆动；鼠标悬停放大；点击抱拳行礼+随机问候语
场景交互
- 玉简：悬停展开效果
- 灵脉节点：悬停涟漪特效，点击展开详情
- 法宝：支持拖拽360°环绕查看，分类高亮
- 传讯玉符：点击复制文本 / 跳转链接
彩蛋功能
修为值（浏览量累积自动进阶）、灵签抽签、昼夜场景自动轮转
全局功能
御剑归宗、精简模式、移动端底部导航、篆文样式加载进度条、弱网提示
降级兼容
WebGL2.0检测失败时，自动切换2D水墨备用主页，内容保持完全一致
贴图渲染
全部贴图由Canvas2D程序化实时生成（八卦纹、玉简篆文、匾额、卷轴、光晕、水墨噪声），不依赖静态图片资源；石壁卷轴支持竖排古文实时排版（从右往左，支持落款印章）
🧙 管理后台（Ant Design水墨修仙风格）
- 登录禁制：账号登录验证
- 仪表盘：4项概览卡片 + 近7日访问折线图 + 技术栈占比饼图 + 操作日志 + 品鉴排行 + 快捷功能入口
- 筑基档案：基础信息、功法配置（炼气/筑基/金丹段位）、道心描述、立绘上传、粒子强度、自定义问候语池
- 修行履历：拖拽排序、置顶、批量上下架、批量删除；内置Markdown编辑器（实时预览）
- 丹器馆藏：按分类/品阶/状态筛选；一键导入GitHub项目；标签、封面上传、Markdown简介、拖拽排序
- 传讯玉符：4种内置类型，自定义图标、排序、显示隐藏、拖拽排序
- 洞府禁制（系统设置）
- 基础设置：站点名称/副标题/加载文案/欢迎语/彩蛋开关
- 外观设置：主题色、水墨浓度、粒子强度、昼夜模式、人物模型替换、姿势朝向
- 账号设置：修改密码、JWT有效期、登录日志
- 主题细节优化
- 消息提示桥接
admin/src/utils/message.ts，解决静态message无法适配暗色主题 - 所有页面表单挂载时绑定表单实例；Tabs页签开启forceRender；加载状态使用Spin遮罩，不用提前return阻断渲染
- 消息提示桥接
