<!--
README
【2026-07-16】-很多用户介绍那一栏有测试用户字样，“测试用户”文案都从数据库中去掉 在其他人的主页只能看到获赞、关注、粉丝，无法点击查看列表 在自己的主页头像右侧增加我的矿柜按钮，按钮图标做成一个中古的木质橱柜样式，要有立体感，点击要有动效
----------------------------------------------------
【2026-07-16】-个人主页建设：1、关注旁边添加点赞按钮，点击点赞后，用户获赞可+1，点赞可取消 2、目前取消关注按钮点击后报错403 3、用户点击获赞、关注、粉丝后，截图标识区域变为点赞列表、关注列表、粉丝列表，在列表中点击头像可进入对方首页
----------------------------------------------------
【2026-07-16】-1、首页在海量晶模库下面增加天梯榜单模块，截图部分直接放到首页即可 2、设置里面增加是否在我的主页显示我的矿柜，默认选择是，如果选择是，访客可以在主页看到用户的矿柜数据
----------------------------------------------------
【2026-07-16】-搜索下拉列表里面显示用户的近5条搜索历史吧
----------------------------------------------------
【2026-07-16】-隐藏矿物信息中的来源链接字段，清除所有关于 带有 mindate 字符串的的相关信息；也隐藏矿物列表中的图片数量那一行
----------------------------------------------------
【2026-07-16】-在后台增加用户跟图模块显示开关，默认关闭
----------------------------------------------------
【2026-07-15】-问题1：杂志封面配置区域并不是手机屏幕的尺寸，要仿真屏幕尺寸，问题2、杂志贴图要拆开，可以分别调整，也可以添加自定义字符串贴图 问题3：开头封面不要是封面，要可选择视频中的某一帧作为封面，生成后的视频添加设置封面按钮 问题4：模型帧，矿物信息不要在方框中，会遮挡模型，在下面插空展示就行，展示矿物信息，空属性不要展示
----------------------------------------------------
【2026-07-15】-下载按钮改成保存到图库
----------------------------------------------------
【2026-07-15】-1、杂志封面可以配置字符位置，配置的时候通过拖动控件来配置文案的位置 2、杂志封面是要放到上传的视频和图片素材图层上面的 3、后面晶体模型空白位置要显示晶型的信息 4、最后的power by crystalhome.cn，加上网站logo，这个停留时间直到时长结束
----------------------------------------------------
【2026-07-15】-好像现在必须得传图片才能制作
----------------------------------------------------
【2026-07-15】-视频工坊支持上传视频
----------------------------------------------------
【2026-07-07 15:56:00 +08:00】-矿物跟图管理都不显示图片
【2026-06-16 20:40:00 +08:00】-你测试一下线上页面有数据么，我这里用无痕浏览器看都是没有数据
----------------------------------------------------
【2026-06-16 16:05:00 +08:00】-1、矿物视频工坊不要放到原来的工具栏，拿出来放到模型下面做一个横向的按钮，加上酷炫特效，发出科技感的蓝光 2、添加亮度、对比度，饱和度的调节，都做成滑块的 3、工坊里面添加一个图片预览图，图片使用用户上传的第一个图片，用户调整模版、亮度、对比度时要能够在预览图中看到效果变化 4、模版增加杂志贴图，将矿物信息填充到视频画面，见附录效果，贴图要根据转场有转场效果；滑块默认值在中间=0的值，左右都可以滑动，左减右加
----------------------------------------------------
【2026-06-15 05:50:52 +08:00】-1.视频生成后可在页面预览播放 2.参考剪映那种方式，制作几套模版，包括转场。画面滤镜，场景编排等配置 3.模型生成的视频镜头太近了，只能看到一部分晶形，清晰度也不够
----------------------------------------------------
【2026-06-14 21:48:13 +08:00】-入口改为矿物详情页添加按钮，之后矿物信息和矿物模型视频直接带出，不需要用户选择或者上传；我的里面改为查看生成的视频历史列表
----------------------------------------------------
【2026-06-14 07:26:48 +08:00】-我想开发一个功能，用户上传自己的多张矿物，然后我通过引用矿物相关信息，模型视频，帮用户生成一段视频下载，用户可以把视频上传抖音等社交平台
----------------------------------------------------
【2026-06-03 09:53:49 +08:00】-1、如附件，将第一个模型详情中的矿物信息挪到第二个图的位置，默认按钮收起状态，但是晶型相关的信息还保留在原来页面，展开显示即可
----------------------------------------------------
【2026-06-02 10:21:03 +08:00】--------------------------------------------
1、这个GIF按钮隐藏掉
2、整体工具栏置顶跟模型画布区上沿对齐
3、生成的视频左上角打上矿物中文名/矿物英文名
----------------------------------------------------
【2026-06-02 10:09:59 +08:00】--------------------------------------------
在模型工具栏增加一个生成视频的按钮，点击按钮导出视频，你觉得这个视频用什么格式比较好，要求高清且问价大小控制的最好
----------------------------------------------------
【2026-06-02 09:59:09 +08:00】--------------------------------------------
帮我添加页面下面的网安备案：
津公网安备12010402002522号
----------------------------------------------------
【2026-05-31 21:16:51 +08:00】--------------------------------------------
补齐登录、个人中心、天梯赛、弹窗、提示和政策页面的全局双语静态文案，用户原创内容保持原文。
----------------------------------------------------
【2026-05-31 20:56:51 +08:00】--------------------------------------------
首页、晶库、矿柜、资料审核和全局双语改造；去掉阻塞整页的启动骨架并更新静态资源版本号。
----------------------------------------------------
[2026-05-31 16:57:36 +08:00]-后台的设为头图按钮还是要，头图显示逻辑还是显示最新设为头图的图片
[2026-05-31 16:47:17 +08:00]-头图每次也会显示之前的演示图，覆盖我设置的头图
[2026-05-30 10:34:56 +08:00]-我用PC浏览器访问网站，怎么也是M端样式
【2026-05-28 00:00:00 +08:00】--------------------------------------------
因为网站的互动模块没有通过备案，现在要去掉互动模块入口
----------------------------------------------------
【2026-05-27 22:04:51 +08:00】--------------------------------------------
针对不满足的地方进行整改，整改完直接上线
----------------------------------------------------
[2026-05-25 16:23:44 +08:00]-实施吧，实施后进行对比性能测试，观察改进成果
[2026-05-25 16:07:13 +08:00]-今天又用户反馈网页加载慢，请先建立一套分类性能监控体系，然后在此基础上，进行优化方案分析
[2026-05-21 11:20:44 +08:00]-头图的标识为金色发光表示，左上角有金黄色头图字样，点击我拥有的按钮，头图置顶显示
[2026-05-21 11:11:15 +08:00]-PLEASE IMPLEMENT THIS PLAN: 我的矿柜实施计划，在我的主页新增“我的矿柜”tab，后端新增GET /api/my/mineral-cabinet，按已审核跟图点亮矿物并支持矿物墙展示。
[2026-05-20 18:08:00 +08:00]-帖子正文，上面显示图片，多张的话可以左右移动，正文在下面显示
[2026-05-20 18:05:00 +08:00]-附件1问题：列表展示时，标题限制显示两行，正文限制显示两行，超出的用...省略 附件2问题：不要用浮层，直接打开现页面，按照开发设计规范，左上角添加返回按钮 留言如果没有，后面不要na,改为留言条数0
【2026-05-18 18:25:00 +08:00】-我的里面新增修改密码菜单，填写老密码，两次确认新密码，点击报错提交
【2026-05-18 18:05:00 +08:00】-刚进首页会加载一个其他页面，然后才出首页，这个改成鱼骨图加在
【2026-05-15 17:43:21 +08:00】-请按照m端的所有功能，补全PC端的功能；PC端实现M端所有功能，并按照PC端开发设计标准重新设计适合PC端的交互方式。
[2026-05-15 17:43:21 +08:00]-PLEASE IMPLEMENT THIS PLAN: PC 端补齐 M 端功能计划，按 M 端所有已实现功能补齐 PC 原生桌面交互，不影响 M 端。
[2026-05-15 16:50:00 +08:00]-注册改成仅支持邮箱注册，邮箱登录；邮箱注册时发送验证码，验证码通过可以注册；注册不要直接展开，登录页面下面有注册和忘记密码两个按钮；忘记密码通过邮箱验证码修改密码；登录、注册、忘记密码都做成全屏页面。
[2026-05-18 14:49:54 +08:00]-按你的组合方案来吧
[2026-05-15 15:09:55 +08:00]-每个矿物模型下面为什么只有一张矿物晒图，是进行了截断么，我要展示该矿物的所有图片；没有模型的矿物，如果有图片，也要展示
[2026-05-15 14:31:30 +08:00]-帮我设计一套埋点方案，要求能够分析用户行为、页面热度、漏斗、桑基等分析功能、并在后台添加一个用户行为分析页面
[2026-05-15 13:39:00 +08:00]-截图：注册页微信注册失败仍弹出 wechat_register_unavailable 原始错误，修复前端脚本缓存版本。
[2026-05-15 11:09:57 +08:00]-可以：按注册风控方案关闭公开用户名注册、微信手机号唯一、OpenID/UnionID唯一、注册意图限流和风控日志。
[2026-05-12 17:30:00 +08:00]-PLEASE IMPLEMENT THIS PLAN: 晶库展示全部矿物、晶库搜索和字母索引、矿物图片迁移到晒矿、详情工具栏固定、全屏登录/微信注册、备案悬挂。
----------------------------------------------------
[2026-05-12 16:34:19 +08:00]-tab下面的晶库页面，直接切换成后面测试的test页面，搜索也采用新的数据源，crystal_records这个库的数据以后不再使用了
----------------------------------------------------
[2026-05-11 17:34:23 +08:00]-保留矿物信息，去掉矿物参数，但是要确保矿物信息的字段是按照我上面发的字段
----------------------------------------------------
【2026-05-09 16:10:00 +08:00】-矿物列表增加标签，本矿物晶型来源,如果是多个来源则用/隔开
----------------------------------------------------
【2026-05-09 16:00:00 +08:00】-是在新的测试页面，所有矿物来源都在模型下面展示图片
----------------------------------------------------
【2026-05-09 15:50:00 +08:00】-我帮你抓到错误了
----------------------------------------------------
【2026-05-09 15:45:00 +08:00】-测试环境还是一样的报错
----------------------------------------------------
【2026-05-09 15:30:00 +08:00】-模型详情数据加载失败
----------------------------------------------------
【2026-05-09 15:20:00 +08:00】-测试页面，模型下方平铺矿物images_json中的图片链接，图片要符合图片预览插件
----------------------------------------------------
【2026-05-09 14:05:00 +08:00】--------------------------------------------
测试入口点进去怎么是矿物-矿晶列表页，应该是A~Z排列的矿物列表
----------------------------------------------------
【2026-05-09 13:45:00 +08:00】--------------------------------------------
没看到这个入口
----------------------------------------------------
【2026-05-06 16:23:45 +08:00】--------------------------------------------
去掉首图下面的矿物名称，上传者和产地前面都添加说明比如上传者：阔海，产地：广州
改完直接上线
----------------------------------------------------
【2026-05-06 16:07:15 +08:00】--------------------------------------------
首图下面的3条信息空间被首图遮盖了一点
切换tab后的页面没有置顶
点击首图下面的上传者，直接跳到我的里面的主页按钮一样的页面就可以，不需要跳到一个新页面
后台设为头图点击报错
----------------------------------------------------
【2026-05-06 15:41:34 +08:00】--------------------------------------------
没有用完一整行的空间，而3个信息还是挤在一起，而且点击上传者，还是没有跳转到上传者主页
----------------------------------------------------
【2026-05-06 15:37:03 +08:00】--------------------------------------------
上传者、矿物名称、产地可以占满一整行顺排，如果显示不了隐藏超过1/3一长度的那一列、
现在点击上传者还是没有跳转到上传者主页，请修复
----------------------------------------------------
【2026-05-06 15:31:34 +08:00】--------------------------------------------
首图下面的信息折行了，要在一行展示，点击上传者也没有跳转到上传者主页
----------------------------------------------------
【2026-05-06 15:23:21 +08:00】--------------------------------------------
头图还是不能点击预览，头图下面添加一行上传者、矿物名称，矿物产地的信息模块，点击上传者进入上传者主页、点击矿物名称进入晶型详情页
----------------------------------------------------
【2026-05-06 15:16:48 +08:00】--------------------------------------------
图片预览，退出按钮折行，图片可以通过双指放大缩小，放大后，右下角加入可视区域预览小缩略图，并可通过拖动移动可视区域放大观察图片。
这个图片预览写入交互标准，头图、帖子里面的图片，晒图都使用此交互
----------------------------------------------------
【2026-05-06 15:08:57 +08:00】--------------------------------------------
所有图片都可以通过点击全屏展示，并且可以通过按钮退出，练习模式增加退出按钮
----------------------------------------------------
【2026-05-06 15:04:30 +08:00】--------------------------------------------
矿物晒图要切换到晶型维度，在哪一个晶型上传的图片，只在这一个晶型展示
----------------------------------------------------
【2026-05-06 14:50:22 +08:00】--------------------------------------------
晒矿图是挂在晶型下面的不是挂在矿物维度下面的
晶体被拖动后也会自动继续选择，现在是拖动模型后，模型就不自己转动了
游戏模式下用户需要拖动才能看到所有选项和按钮，这个要改成用户不需要滑动就能看到所有内容
按照M段的逻辑编写PC段交互方案，并实施
----------------------------------------------------
【2026-05-06 14:36:37 +08:00】--------------------------------------------
游戏模式现在需要下滑才能看到所有选项，这里不要让用户下滑就能看到页面所有内容
----------------------------------------------------
【2026-05-06 14:32:50 +08:00】--------------------------------------------
天梯游戏，点击进去黑屏了
----------------------------------------------------
【2026-05-06 14:24:30 +08:00】--------------------------------------------
backend/doc/m端交互方案
补到文档，并且按这个方案实施
----------------------------------------------------
【2026-05-06 14:14:09 +08:00】--------------------------------------------
只是修改交互和样式，不要改变页面结构
另外配色还是改成深色主题，交互方案文档可修改
----------------------------------------------------
【2026-05-06 12:47:17 +08:00】--------------------------------------------
# 看图识矿游戏 完整用户积分等级&境界体系
实现积分等级、境界、积分弹窗和积分规则说明
----------------------------------------------------
【2026-05-06 12:17:48 +08:00】--------------------------------------------
天梯赛天梯榜显示头像和昵称，这里只记录用户ID，用户信息改动要随时能获取到新网名和头像
----------------------------------------------------
【2026-05-06 12:06:22 +08:00】--------------------------------------------
在天梯赛配置每个游戏增加一个固定选题池数量，比如我在5连斩配了选题池10，那么我的题目只会在评分最低的10个题目内选题
----------------------------------------------------
【2026-05-06 11:51:43 +08:00】--------------------------------------------
白榴石的下面还是没有审核通过的晒图
----------------------------------------------------
【2026-05-06 11:25:51 +08:00】--------------------------------------------
晒图，后台通过，接口报错，晒图没有显示
----------------------------------------------------
【2026-05-06 11:06:54 +08:00】--------------------------------------------
1. 后台做成 m 端自适应
2. 后台天梯赛保存时，弹窗提示保存成功
3. 后台审核列表显示所有数据，添加审核条件筛选
4. 天梯赛错题显示，模型也要可以用手拖动
5. 搜索条，我输入中文矿物名称例如石英，直接点回车，没有搜索结果，应该跳出矿物晶体列表或者几个矿物的备选列表（如无完整匹配矿物）
6. 矿晶晒图还是没有显示，之前有过审核通过的晒图，晒图应该显示在矿物晶体详情下面
7. 后台配置的10连斩全是 L1前台玩的时候还会出现 L3
----------------------------------------------------
【2026-05-04 06:28:35 +08:00】--------------------------------------------
天梯赛我获得了10连斩资格，当我退出登录再回来，资格消失嘞
我在白榴石下面晒矿，通过审核后，我的晒矿图片没有在白榴石的晶体详情里面出现，请修复
在计算矿物难度时，增加稀有度权重
难度得分=晶面复杂度得分*50+稀有程度得分*50%
大概得一个权重，具体子项得分需要你再考虑一下融合公式，这个公式希望能够在后台配置得一个权重，具体子项得分需要你再考虑一下融合公
----------------------------------------------------
【2026-05-03 18:37:00 +08:00】--------------------------------------------
答案选项显示
中文名/英文名：晶习（如果有晶习显示晶习的中文翻译，这里可能要维护晶习的中文说明），中文名或晶习为待补充时隐藏
后台的第二个int空间看不到显示的数字，如截图
测试完直接上线
----------------------------------------------------
【2026-05-03 18:31:00 +08:00】--------------------------------------------
线上夜间天梯赛还是建设中
----------------------------------------------------
【2026-05-03 18:08:00 +08:00】--------------------------------------------
难度设置改成多级设置比如
5连斩：
L1-L2 3个
L2-L7  1个
L8-10 1个
每个挑战可以设置3个区间，添加配置的校验，不能自相矛盾
题目右上角显示题目难度
L1~L3字体是绿色，添加萌宠标识
L4~L7自提是黄色，添加恶龙标识
L8~L10字体是红色并添加恶魔头像标识
----------------------------------------------------
【2026-05-03 17:49:56 +08:00】--------------------------------------------
将用户的各种状态都存到数据库中，用户换设备后应该能正确获取到正确的当前状态
用户选择答案后自动跳到下一题
有些表中的中文名还是英文，使用mineral_en_cn补全用户中文名
----------------------------------------------------
【2026-05-03 17:38:21 +08:00】--------------------------------------------
先实现M端天梯赛的功能
进入天天赛，头部有3个方块入口，5连斩、10连斩、20连斩
下面是20斩天梯榜，用时递增显示前10名用户
5连斩全对获得10连斩资格、10连斩全对获得20斩资格，20斩全对答题时间作为用户的天梯记录
用户进入天梯赛会展示用户的连斩标签和20斩时间、天梯排名名次
答题逻辑：
不管几连斩逻辑都是一样的
用户选择5连斩，进入答题说明，用户可以勾选不再提示，下次进入直接开始答题
答题第一行为计时器，用户开始答题开始记录，
第二行显示随机显示一个3D矿晶模型详情画布
下面列出4个相似的矿物名称（相似算法你定一下，但是不要有两个都重复的情况）
用户选择后可以点击下一题，模型会自动准备下一个题的模型生成和渲染，用户点下一题直接展示
用户再完成之前可以前后移动题目，并且修改答案，用户在最后一题答题完毕后可以点击提交按钮
结算页会告诉用户得分和错题集，用户可以翻阅错题，上面是模型，下面是用户选择的错误答案（标红）和正确的答案（标绿）
如果全对：
5连斩：恭喜获得10连斩挑战资格，20连斩通关后即可进行天梯冲榜
10连斩：恭喜获得20连斩挑战资格，20连斩通关后即可进行天梯冲榜
20连斩：恭喜获得天梯赛上榜资格，20连斩通关后即可进行天梯冲榜
用户答题时要有动画特效，挑战成功要有庆祝动画特效
----------------------------------------------------
【2026-05-02 10:48:30 +08:00】--------------------------------------------
M端在某个矿物的晶型列表页，增加左滑右滑操作
左滑：下一个矿物
 右滑：上一个矿物
如果没有上一个、下一个矿物，则弹出提示
----------------------------------------------------
【2026-05-02 10:42:52 +08:00】--------------------------------------------
搜索框放到第一行中间
模型画布中只展示了模型的一小部分，需要调整一下镜头距离和让矿物处在画布中心
晶库tab要换成PC风格，左侧边栏显示A~Z的矿物名称，右侧为矿物展示区
----------------------------------------------------
【2026-05-02 10:22:00 +08:00】--------------------------------------------
将PC页面按照M段的功能实现一遍，但是不要影响M端的布局和功能
PC页面：
第一行，左侧logo，右侧，登录、退出、语言、个人中心（包含我的里面的所有功能，交互你自己设计）
第二行，通栏banner图，图片宽度自适应，图片中心与banner图中心重合，超出高度的图片部分不显示
第三行：菜单，从做到右、首页、晶库、社区
下面内容根据首页、晶库、社区来设计，你自己设计布局
----------------------------------------------------
【2026-05-02 10:10:06 +08:00】--------------------------------------------
晶库列表页去掉预览模式，
修复问题：
1、每次从某个矿物进入晶型列表，再返回总是回到列表顶部，应该是返回到进入晶型列表的位置
2、从偏后面的矿物，进入晶型列表，偶现顶部没有返回按钮
----------------------------------------------------
【2026-05-02 00:12:05 +08:00】--------------------------------------------
不做简洁/预览切换开关了，只做一个预览模式的开关，预览模式默认关闭，且不缓存状态，每次进来都是预览模式关闭状态。
预览模式使用分步加载的方式，只加载当前页面可视区到下面两行的矿物，且从上到下依次加载，不要一次加载过多
----------------------------------------------------
【2026-05-02 00:05:17 +08:00】--------------------------------------------
预览模式不是只显示名称描述，是跟搜索列表一样显示所有的晶体模型
2、修改模型默认值，坐标和晶体角度信息默认改成关闭，如果用户打开，则通过浏览器缓存记录，后续沿用
----------------------------------------------------
【2026-05-02 00:03:03 +08:00】--------------------------------------------
个人信息添加昵称
头像右边显示昵称
主页头像右边显示昵称
----------------------------------------------------
【2026-05-02 00:00:21 +08:00】--------------------------------------------
1、晶库中切换到中文的时候，发现英文方式会在底部出现，这里切换中英文后，另外一种语言的列表隐藏
2、头部中英文左边再添加一个开关：
简洁/预览：默认简洁
简洁：目前的形式
预览：每个矿物名称下面直接列出所有晶型列表
----------------------------------------------------
【2026-05-01 23:57:49 +08:00】--------------------------------------------
天梯赛相关，点击弹出tost:功能建设中，敬请期待！
----------------------------------------------------
【2026-05-01 23:56:21 +08:00】--------------------------------------------
我的里面的按钮不用非得填充完一行，一行还是4个槽位，现在占两个就行
----------------------------------------------------
【2026-05-01 23:55:02 +08:00】--------------------------------------------
中间的tab还是改成天梯赛，我的里面的主页跳转到主页
----------------------------------------------------
【2026-05-01 23:53:57 +08:00】--------------------------------------------
不要3个按钮了，变成2个按钮，
主页，跳转现在的主页
天梯赛，后面再写逻辑
----------------------------------------------------
【2026-05-01 23:48:30 +08:00】--------------------------------------------
做成这种类似透明线稿的风格
----------------------------------------------------
【2026-05-01 23:46:22 +08:00】--------------------------------------------
在我的tab里面，语言那一行上面加3个并排的方块按钮分别是，帖子、跟图、头图
上面是图标，下面是文字，分别跳转到主页的3个tab
主页tab换成，天梯赛图标，天梯赛逻辑后面再做
----------------------------------------------------
【2026-05-01 21:36:34 +08:00】--------------------------------------------
这些配置不记录到库里面了，记录到浏览器缓存吧，不然感觉影响页面性能，也不需要保存按钮了，设置完随时更新缓存
----------------------------------------------------
【2026-05-01 21:29:30 +08:00】--------------------------------------------
改了试试看
----------------------------------------------------
【2026-05-01 21:24:51 +08:00】--------------------------------------------
更新一下配置项顺序，只改顺序
1、晶面透明度：0~100%，默认100%
3、边线粗细：0~100%，默认0
2、边线颜色：现在的颜色增加黑白两种颜色，默认值为白色
5、顶点大小：0~100%，默认值为0
4、顶点颜色：现在的颜色增加黑白两种颜色，默认值为白色
----------------------------------------------------
【2026-05-01 21:22:03 +08:00】--------------------------------------------
颜色滑块里面缺少黑色，最右侧设置为黑色
----------------------------------------------------
【2026-05-01 21:19:58 +08:00】--------------------------------------------
线面颜色饱和度调成70%
颜色滑块游标变成白色
----------------------------------------------------
【2026-05-01 21:11:04 +08:00】--------------------------------------------
位置还是不对，放到
<div class="expanded-viewer preview-host is-preview-ready" id="expandedViewer">
            <div class="loading-state" id="loadingState" style="display: none;">已加载 1007 条 SMORF 晶型数据</div>
          <canvas data-engine="three.js r158" width="585" height="734" style="display: block; touch-action: none;"></canvas></div>这个元素同级的下面，当展开配置打开时其他元素顺序向下移动
配置项定义：
1、晶面透明度：0~100%，默认100%
2、边线颜色：现在的颜色增加黑白两种颜色，默认值为白色
3、边线粗细：0~100%，默认0
4、顶点颜色：现在的颜色增加黑白两种颜色，默认值为白色
5、顶点大小：0~100%，默认值为0
6、恢复默认按钮，保存按钮
保存后，这些配置放到用户数据存到库中，下次进入引用配置
复位按钮不起作用，点击它，晶体模型应该恢复到初始状态
----------------------------------------------------
【2026-05-01 20:59:24 +08:00】--------------------------------------------
放到这个位置
----------------------------------------------------
【2026-05-01 20:56:42 +08:00】--------------------------------------------
将展开设置项放到div class="expanded-info"下面
----------------------------------------------------
【2026-05-01 20:53:03 +08:00】--------------------------------------------
设置按钮点击后，展开的位置在画布下面
----------------------------------------------------
【2026-05-01 20:51:26 +08:00】--------------------------------------------
设置里面添加一个线条颜色，滑动选择所有颜色
----------------------------------------------------
【2026-05-01 20:48:34 +08:00】--------------------------------------------
将模型设置按钮放到右侧按钮的最下面，复位按钮好像失灵了，也修复一下
----------------------------------------------------
【2026-05-01 20:46:19 +08:00】--------------------------------------------
按钮放在我箭头指的地方
----------------------------------------------------
【2026-05-01 20:43:53 +08:00】--------------------------------------------
详情页模型配置页面按钮挪到最下面，展开控制项放到按钮下方，点击按钮收起展开项，默认项为透明度100%，线宽度0，不加顶点
----------------------------------------------------
【2026-05-01 20:29:13 +08:00】--------------------------------------------
边线按钮变成一个模型设置按钮
点击展开几个调试空间
1、边线重量：滑动调节0~100
2、晶面透明度：滑动调节0~100
3、顶点加强：开关，默认关，开加一个小红球
----------------------------------------------------
【2026-05-01 20:19:57 +08:00】--------------------------------------------
详情页和列表页加一个边线加强按钮，这个按钮默认不选中，选中后晶边添加一条明显的黑色边线
----------------------------------------------------
【2026-05-01 20:12:51 +08:00】--------------------------------------------
把详情页右侧的按钮都加到列表页顶部
----------------------------------------------------
【2026-05-01 20:08:16 +08:00】--------------------------------------------
列表页，当晶型过多的时候就按正常尺寸展示，不够就下滑，但是顶部标题和简介锁定不动
----------------------------------------------------
【2026-05-01 19:59:06 +08:00】--------------------------------------------
列表页的模型有些粗糙，优化一下画质
----------------------------------------------------
【2026-05-01 19:46:43 +08:00】--------------------------------------------
当我在搜索结果页点击拍照或者GIF时，想截取的是我红框标出的区域
----------------------------------------------------
【2026-05-01 18:08:35 +08:00】--------------------------------------------
搜索结果页顶部，也添加拍照和GIF按钮，GIF按钮，就改成GIF三个字母，详情页也这样改
----------------------------------------------------
【2026-05-01 18:06:53 +08:00】--------------------------------------------
现在详情页的默认镜头距离稍微有点近，再远一点点
----------------------------------------------------
【2026-05-01 18:03:22 +08:00】--------------------------------------------
现在转动不是很顺滑，一卡一卡的
----------------------------------------------------
【2026-05-01 18:01:10 +08:00】--------------------------------------------
GIF图转速太快了，要像页面转速一样
----------------------------------------------------
【2026-05-01 17:58:26 +08:00】--------------------------------------------
下载下来的GIF可以播放了，但是晶体是花的
----------------------------------------------------
【2026-05-01 17:54:23 +08:00】--------------------------------------------
下载下来的GIF是一个空白的页面
----------------------------------------------------
【2026-05-01 17:50:37 +08:00】--------------------------------------------
水印前面加上www.crystalhome.cn；gif下载下来不是可播放的短视频
----------------------------------------------------
【2026-05-01 17:42:02 +08:00】--------------------------------------------
在晶模详情页增加两个按钮，一个拍照按钮，一个GIF按钮，拍照是下载当前图片，GIF是下载GIF格式图片，为模型旋水平转360度的GIF，下载的图片和GIF都带上域名水印 crystalhome.cn
----------------------------------------------------
【2026-05-01 17:28:44 +08:00】--------------------------------------------
从搜索列表页，点进详情，再点返回时，列表页模型不再转动
----------------------------------------------------
【2026-05-01 17:26:02 +08:00】--------------------------------------------
搜索列表页下面不显示矿物名称，显示晶习
----------------------------------------------------
【2026-05-01 17:20:42 +08:00】--------------------------------------------
搜索结果页前面的标题和简介折行了；点击返回没有应该返回首页，返回了一个空白页
----------------------------------------------------
【2026-05-01 17:10:38 +08:00】--------------------------------------------
搜索结果页内容太靠顶了，空出返回按钮那一行，从下面开始显示；搜索结果页的晶模加上晶面数据和坐标，要持续转动；浏览器访问本地社区，点击登录会报错
----------------------------------------------------
【2026-05-01 15:44:05 +08:00】--------------------------------------------
搜索结果页线上仍为空，给前端资源加版本号强制刷新缓存
----------------------------------------------------
【2026-05-01 15:29:49 +08:00】--------------------------------------------
1、所有需要关闭当前页面，返回之前页面的操作都改成左上方的返回箭头按钮，不再使用右上角的叉号
2、晶库选择一个矿物不是直接进详情页，而是跟搜索结果一样，进矿物的晶型列表
3、搜索框BUG，输入黄铁矿，下面没有出搜索结果，依然是无关的搜索词推荐，只要输入了内容就要根据内容调整推荐，评估是否可以服用搜索结果页
4、搜索结果页是一个新的页面，不是在首页展示
5、社区tab弹出登录，点击登录报错
----------------------------------------------------
【2026-05-01 15:01:09 +08:00】--------------------------------------------
首页海标题：海量晶模库后面记一个说明目前已经有多少晶型数据，比如海量晶模库1400条（10px字体）
----------------------------------------------------
【2026-05-01 14:55:09 +08:00】--------------------------------------------
海量晶模库
----------------------------------------------------
【2026-05-01 14:53:33 +08:00】--------------------------------------------
首页模型标题改为：海量晶体模型库
----------------------------------------------------
【2026-05-01 14:38:53 +08:00】--------------------------------------------
1、首页增加几个标题
Banner图上面，今日首图
海量晶模库
2、所有需要登录状态的地方都自动弹出登录界面，比如切到主页没有登录，需弹出登录页
3、我的里面不要把个人信息摊出来展示，在头像右边加个编辑按钮，点击进入个人信息编辑页面，下面依次是语言，切换账号、退出登录，我的矿图和我的帖子不要了
4、主页tab增加一个跟旁边风格一致的图标，小房子那种就可以
----------------------------------------------------
【2026-05-01 14:12:00 +08:00】--------------------------------------------
网站标签页没有图标，用logo搞个图标放到浏览器标签页上面，可以做成透明图标状态，不要里面的域名
晶库右侧加一个开关，按中/英，有些矿物没有中文名字需要在数据库里面补全，使每一个矿物都有中英文名字
我的里面增加，用户增加个人信息，包括头像，性别，简介，支持编辑
在tab中间增加主页栏，主页进去左上角头像，下面是简介，在下面是两个分栏，我的帖子、我的矿图、我的头图
我的帖子是当前用户的帖子列表按时间倒序，我的矿图是跟图时间倒序，我的头图是被评选为头图的矿图会出现在这里，这个要加个特效代表荣光，把一些帖子和跟图、头图挂到admin用户下面便于测试效果
----------------------------------------------------
【2026-05-01 13:46:50 +08:00】--------------------------------------------
1、更改首页布局，只保留一个晶体模型，下面是精华帖子（按发布时间倒序排）
2、帖子里面图片很多无法显示的，造50条，验证一下要求图片都是可以显示的，图片要下到本地
3、跟图和跟帖是两个逻辑，跟图是跟矿物模型关联的，只在矿物模型下面展示，且信息有限，图片（可多张）、产地、矿物名称、简介，帖子是自由度很高的图文形态
4、目前跟帖按钮和晒图按钮点击都没有反应且报错，请修复
5、晶库tab现在点击去是空白的没有数字，另外不要在页面显示：按晶型名称首字母排序的字样
----------------------------------------------------
【2026-05-01 13:20:00 +08:00】--------------------------------------------
1、首页图标改成黑色长条
2、晶库改成中文简单矿物名，现在展示的事晶型字段，按A~Z分档
3、晒图按钮搞大一点，设计的显眼一点，文案改成晒矿，矿物信息改成默认收起状态，用户点按钮再展开
4、晒图和发帖按钮目前点都没有反应
5、晒图和发帖都造10条数据，要去网上搜真实恰当的素材，不能有虚假感
----------------------------------------------------
【2026-05-01 13:05:00 +08:00】--------------------------------------------
用户登录先去掉扫码，只用用户名密码登录，增加注册、登录功能，帮我添加 前后台测试账号，admin ：admin
----------------------------------------------------
【2026-05-01 12:05:00 +08:00】--------------------------------------------
在页面底部加4个吸底的tab栏，分别是，首页，晶库，社区，我的
搜索栏放到logo旁边，中英文切换按钮和登录退出放到我的里面
首页就是当前页面，晶库按晶型名首字母排序做一个列表，
社区做一个帖子列表，
----------------------------------------------------
【2026-05-01 11:46:00 +08:00】--------------------------------------------
部署到线上环境
----------------------------------------------------
【2026-05-01 10:30:00 +08:00】--------------------------------------------
每次刷新都会先出我截图的页面，然后才出现首页，去掉这个页面
----------------------------------------------------
【2026-04-30 14:00:00 +08:00】-右上角增加语言切换，先设置两个EN,CN，切换后除矿物数据中相关的中英文名，其他都切换成设置的语言
【2026-04-30 13:40:00 +08:00】-resources\黑色_横栏.png将网站logo放到页面左上方
【2026-05-03 17:38:21 +08:00】--------------------------------------------
先实现M端天梯赛的功能
进入天天赛，头部有3个方块入口，5连斩、10连斩、20连斩
下面是20斩天梯榜，用时递增显示前10名用户
5连斩全对获得10连斩资格、10连斩全对获得20斩资格，20斩全对答题时间作为用户的天梯记录
用户进入天梯赛会展示用户的连斩标签和20斩时间、天梯排名名次
答题逻辑：
不管几连斩逻辑都是一样的
用户选择5连斩，进入答题说明，用户可以勾选不再提示，下次进入直接开始答题
答题第一行为计时器，用户开始答题开始记录，
第二行显示随机显示一个3D矿晶模型详情画布
下面列出4个相似的矿物名称（相似算法你定一下，但是不要有两个都重复的情况）
用户选择后可以点击下一题，模型会自动准备下一个题的模型生成和渲染，用户点下一题直接展示
用户再完成之前可以前后移动题目，并且修改答案，用户在最后一题答题完毕后可以点击提交按钮
结算页会告诉用户得分和错题集，用户可以翻阅错题，上面是模型，下面是用户选择的错误答案（标红）和正确的答案（标绿）
如果全对：
5连斩：恭喜获得10连斩挑战资格，20连斩通关后即可进行天梯冲榜
10连斩：恭喜获得20连斩挑战资格，20连斩通关后即可进行天梯冲榜
20连斩：恭喜获得天梯赛上榜资格，20连斩通关后即可进行天梯冲榜
用户答题时要有动画特效，挑战成功要有庆祝动画特效
----------------------------------------------------
【2026-04-30 16:55:00 +08:00】-我要更新M端的布局 1、第一行左侧logo，右侧靠右，语言切换按钮（默认中文，PC一样）、登录或退出按钮 2、第二行banner图控件，轮播resources\banner中的图片、banner控件高度固定，图片居中显示，如果图片高度超过控件高度则只显示控件高度的图片内容 3、第三行：搜索控件 4、第四行：未进行搜索，随机展示3个矿物模型的详情页，5秒钟切换一次 5、第四行：搜索操作后，显示搜索结果页，显示5条可上下滑动 6、点击其中一个矿物，展示矿物下的模型缩略图，每行两个，展示3行，可滑动展示
【2026-04-30 17:40:00 +08:00】-resources\banner里面有很多图片，但是没有轮播，轮播的时候控件左下角要有个页码展示，让用户知道这个在轮播，而且可以左右滑动
【2026-04-30 17:45:00 +08:00】-搜索结果中的缩略图下面只展示矿物名称 点进详情矿物没在中间，需要拉远镜头，保持矿物在可见画布中间 矿物的信息展示在模型画布下面 详情右上角添加一个关闭按钮，点击返回上一个页面
【2026-04-30 11:00:00 +08:00】-你给我的index.html是我之前调试的一个版本，不是我最新的逻辑，AMCSD 这条线的代码都放到backup里面
[2026-04-29 17:42:00 +08:00]-1銆佸缓绔嬬櫥褰曠郴缁燂紝鐢ㄦ埛鍚嶃€佸瘑鐮併€佸井淇℃壂鐮侀獙璇?2銆佺熆鐗╂ā鍨嬭鎯呬笅闈㈠鍔犵敤鎴疯窡甯栧姛鑳斤紝鍙互鍙戝竷鐩稿悓鐭跨墿鍥剧墖锛岄渶浜哄伐瀹℃牳锛屽鏍搁€氳繃鍚庡彲浠ュ睍绀哄湪涓嬮潰锛屽睍绀虹涓€寮犲浘鐗囩缉鐣ュ浘锛岀偣杩涘幓娴眰灞曠ず鐭跨墿鍥剧墖鍜岃鎯呭瓧娈碉紝涓婁紶鑰呫€佺熆鐗╁悕锛屼骇鍦帮紝澶囨敞 3銆佺鐞嗗悗鍙板紑鍙戝鏍稿垪琛紝鍙互鎿嶄綔瀹℃牳鎴栬€呴┏鍥?4銆佺鐞嗗悗鍙板鍔犲浘鐗囧垪琛紝鎸夋椂闂村€掑簭鎺掑垪锛屾寜鏃堕棿绛涢€夛紝鍙互鎿嶄綔涓婂ご鍥撅紝澶撮儴娣诲姞澶村浘banner鍥?[2026-04-29 17:09:00 +08:00]-鏅跺瀷璇︽儏閲岄潰娣诲姞濡備笅鍐呭锛屽苟璁剧疆寮€鍏冲彲浠ユ帶鍒舵槸鍚︽樉绀猴細鏅跺瀷鏁版嵁 鍧愭爣绯?[2026-04-29 00:00:00 +08:00]-鎸夌熆鐗╄仛鍚堬紝姣忎釜鐭跨墿锛屾ā鍨嬪钩閾哄埌涓棿锛岀偣鍑诲叾涓竴涓墿灞曞埌鏁翠釜涓棿鍖哄煙
[2026-04-29 00:00:00 +08:00]-杩樻槸娌℃壘鍒板鏉傝仛褰㈢殑椤甸潰锛岃繖鏍蜂綘鐩存帴鍐欎竴涓柊鐨勯〉闈紝鍙睍绀鸿繖171鏉℃暟鎹?-->
<!DOCTYPE html>
<!-- README 【2026-07-16】-1、暂时屏蔽PC端样式，PC端依然使用M端样式 2、首页的帖子模块增加（暂未开放提示文案） -->
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gemmology Mineral Habit Presets</title>
    <link rel="icon" type="image/svg+xml" href="./resources/favicon.svg" />
    <script>
      (() => {
        document.documentElement.classList.add("is-mobile-shell");
        document.documentElement.classList.remove("is-pc-shell");
      })();
    </script>
    <link rel="stylesheet" href="./gemmology_styles.css?v=2d470b907ce6bf05" />
    <script src="./vendor/lucide-0.468.0.min.js" async></script>
    <script src="./gemmology_app.js?v=215b8723ebf290b6" defer></script>
  </head>
<body class="is-mobile">
<!--
[2026-05-21 18:18:00 +08:00]-首页左上角的logo，感觉跟整个这一行有些突出，而且有色差，出个方案解决这个问题
-->
    <div class="app-shell">
      <section class="pc-shell" id="pcShell" aria-label="PC mineral browser">
        <header class="pc-topbar">
          <a class="pc-logo" href="./gemmology.html" aria-label="Crystalhome home">
            <span class="brand-mark"><img src="./resources/favicon.svg" alt="" /></span>
            <span class="brand-word">crystalhome.cn</span>
          </a>
          <div class="pc-search-row pc-top-search">
            <div class="pc-search-wrap">
              <i data-lucide="search"></i>
              <input id="pcSearchInput" type="search" autocomplete="off" placeholder="搜索矿物 / 晶习 / 晶面" />
            </div>
            <select id="pcSystemFilter" aria-label="晶系筛选">
              <option value="">全部晶系</option>
            </select>
          </div>
          <div class="pc-top-actions">
            <button id="pcLoginButton" class="pc-text-button" type="button"><i data-lucide="log-in"></i><span>登录</span></button>
            <button id="pcLogoutButton" class="pc-text-button hidden" type="button"><i data-lucide="log-out"></i><span>退出</span></button>
            <select id="pcLanguageSwitch" class="pc-language-switch" aria-label="语言">
              <option value="cn">CN</option>
              <option value="en">EN</option>
            </select>
            <button id="pcProfileButton" class="pc-profile-button" type="button">
              <img id="pcProfileAvatar" src="./resources/favicon.svg" alt="" />
              <span id="pcProfileName">个人中心</span>
              <i data-lucide="chevron-down"></i>
            </button>
          </div>
        </header>

        <div class="pc-hero-banner" id="pcHeroBanner">
          <img id="pcHeroBannerImage" class="pc-hero-banner-image" alt="" draggable="false" />
          <span id="pcHeroBannerText">SMORF Mineral Forms</span>
          <span id="pcHeroBannerPager" class="pc-hero-banner-pager">1 / 1</span>
        </div>
        <div class="pc-banner-meta hidden" id="pcBannerMeta"></div>

        <nav class="pc-menu" aria-label="PC navigation">
          <button class="active" type="button" data-pc-tab="home">首页</button>
          <button type="button" data-pc-tab="library">晶库</button>
          <button type="button" data-pc-tab="ladder">天梯赛</button>
          <button type="button" data-pc-tab="community">信息</button>
        </nav>

        <main class="pc-content">
          <section class="pc-tab-panel pc-home-panel" id="pcHomePanel">
            <div class="pc-search-results hidden" id="pcSearchResults"></div>
            <div class="pc-section-head">
              <h2>海量晶模库 <span id="pcModelCount">0条</span></h2>
            </div>
            <div class="pc-model-grid" id="pcHomeModels"></div>
            <div class="pc-section-head">
              <h2>精华帖子 <span class="home-posts-coming-soon">（暂未开放）</span></h2>
            </div>
            <div class="pc-post-grid" id="pcFeaturedPosts"></div>
          </section>

          <section class="pc-tab-panel pc-library-panel hidden" id="pcLibraryPanel">
            <div class="pc-section-head">
              <h2>晶库</h2>
              <div class="pc-segmented" role="group" aria-label="晶库语言">
                <button id="pcLibraryCnButton" class="active" type="button">中</button>
                <button id="pcLibraryEnButton" type="button">英</button>
              </div>
            </div>
            <label class="pc-library-search">
              <i data-lucide="search"></i>
              <input id="pcLibrarySearchInput" type="search" placeholder="搜索矿物" autocomplete="off" />
            </label>
            <div class="pc-library-workspace">
              <aside class="pc-library-sidebar">
                <div id="pcLibraryIndex" class="pc-library-index" aria-label="字母索引"></div>
                <div id="pcLibraryList" class="pc-library-list" aria-label="矿物列表"></div>
              </aside>
              <section class="pc-library-display" aria-label="矿物展示区">
                <div class="pc-section-head">
                  <div>
                    <h2 id="pcLibraryDisplayTitle">选择矿物</h2>
                    <p id="pcLibraryDisplaySubtitle">从左侧 A-Z 列表选择矿物查看晶型</p>
                  </div>
                </div>
                <div id="pcLibraryDisplayGrid" class="pc-model-grid"></div>
              </section>
            </div>
          </section>

          <section class="pc-tab-panel pc-ladder-panel hidden" id="pcLadderPanel">
            <div class="pc-section-head">
              <div>
                <h2>天梯赛</h2>
                <p>桌面端认晶连斩挑战、训练记录和 20 斩榜单</p>
              </div>
              <button id="pcLadderRefreshButton" class="pc-text-button" type="button"><i data-lucide="refresh-cw"></i><span>刷新榜单</span></button>
            </div>
            <div class="pc-ladder-shell">
              <aside class="pc-ladder-sidebar">
                <div class="pc-ladder-user-card">
                  <div>
                    <strong id="pcLadderUserName">未登录</strong>
                    <p id="pcLadderUserMeta">登录后记录资格和20斩成绩</p>
                  </div>
                  <div class="ladder-user-tags" id="pcLadderUserTags"></div>
                </div>
                <div class="pc-ladder-entry-grid">
                  <button type="button" data-pc-ladder-count="5"><i data-lucide="swords"></i><span>5连斩</span></button>
                  <button type="button" data-pc-ladder-count="10"><i data-lucide="flame"></i><span>10连斩</span></button>
                  <button type="button" data-pc-ladder-count="20"><i data-lucide="trophy"></i><span>20连斩</span></button>
                </div>
                <div class="pc-ladder-practice-actions">
                  <button type="button" data-pc-ladder-mode="training"><i data-lucide="dumbbell"></i><span>训练场</span></button>
                  <button type="button" data-pc-ladder-mode="trial"><i data-lucide="target"></i><span>试炼场</span></button>
                </div>
                <section class="pc-ladder-board">
                  <h3>20斩天梯榜</h3>
                  <div id="pcLadderBoardList" class="ladder-board-list"></div>
                </section>
                <section class="pc-ladder-records">
                  <h3>训练记录</h3>
                  <div id="pcTrainingRecords" class="ladder-board-list"></div>
                </section>
                <section class="pc-ladder-records">
                  <h3>试炼记录</h3>
                  <div id="pcTrialRecords" class="ladder-board-list"></div>
                </section>
              </aside>
              <section class="pc-ladder-workspace">
                <div id="pcLadderPlayHost" class="pc-ladder-play-host">
                  <div class="pc-ladder-idle">
                    <h3>选择左侧入口开始挑战</h3>
                    <p>PC 端使用宽屏模型区和右侧选项区，支持鼠标拖动、滚轮缩放和键盘基础操作。</p>
                  </div>
                </div>
              </section>
            </div>
          </section>

          <section class="pc-tab-panel pc-community-panel hidden" id="pcCommunityPanel">
            <div class="pc-section-head">
              <h2>信息</h2>
            </div>
            <div id="pcCommunityList" class="pc-post-grid"></div>
          </section>

          <section class="pc-model-panel hidden" id="pcModelPanel">
            <div class="pc-section-head">
              <div>
                <h2 id="pcModelTitle">矿物晶型</h2>
                <p id="pcModelSubtitle">选择晶型查看详情</p>
              </div>
              <button id="pcModelBackButton" class="pc-icon-button" type="button" title="返回"><i data-lucide="chevron-left"></i></button>
            </div>
            <div id="pcModelGrid" class="pc-model-grid"></div>
          </section>
        </main>

        <aside id="pcProfilePanel" class="pc-profile-panel hidden" aria-label="个人中心">
          <div class="pc-profile-head">
            <img id="pcPanelAvatar" src="./resources/favicon.svg" alt="" />
            <div>
              <h2 id="pcPanelName">未登录</h2>
              <p id="pcPanelMeta">登录后查看个人中心</p>
              <button id="pcPointsButton" class="points-pill" type="button">L1 练气期 · 0分</button>
            </div>
            <button id="pcProfileCloseButton" class="pc-icon-button" type="button" title="关闭"><i data-lucide="x"></i></button>
          </div>
          <div class="profile-stats pc-profile-stats" id="pcProfileStats">
            <span><strong id="pcProfileLikeCount">0</strong><small>获赞</small></span>
            <span><strong id="pcProfileFollowingCount">0</strong><small>关注</small></span>
            <span><strong id="pcProfileFollowerCount">0</strong><small>粉丝</small></span>
          </div>
          <div class="pc-profile-actions">
            <button type="button" data-pc-profile-shortcut="home"><i data-lucide="house"></i><span>主页</span></button>
            <button type="button" data-pc-profile-shortcut="ladder"><i data-lucide="trophy"></i><span>天梯赛</span></button>
            <button id="pcVideoHistoryButton" type="button"><i data-lucide="clapperboard"></i><span>我的视频</span></button>
            <button id="pcPanelLanguageButton" type="button"><i data-lucide="languages"></i><span>语言</span></button>
            <button id="pcSwitchAccountButton" type="button"><i data-lucide="repeat-2"></i><span>切换账号</span></button>
            <button id="pcPanelLogoutButton" type="button"><i data-lucide="log-out"></i><span>退出登录</span></button>
          </div>
          <div id="pcProfileEditor" class="pc-profile-editor">
            <label class="pc-avatar-picker">头像<input id="pcAvatarInput" type="file" accept="image/*" /></label>
            <label class="field-label">昵称<input id="pcNicknameInput" type="text" maxlength="32" /></label>
            <label class="field-label">性别
              <select id="pcGenderSelect">
                <option value="">保密</option>
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="其他">其他</option>
              </select>
            </label>
            <label class="field-label">简介<textarea id="pcBioInput" rows="4" maxlength="240"></textarea></label>
            <button id="pcSaveProfileButton" class="primary-button" type="button">保存个人信息</button>
          </div>
          <div class="pc-profile-tabs" role="tablist" aria-label="个人主页内容">
            <button class="active" type="button" data-pc-profile-list="cabinet">我的矿柜</button>
          </div>
          <div id="pcProfileList" class="pc-profile-list"></div>
        </aside>

        <section id="pcDetailOverlay" class="pc-detail-overlay hidden" aria-label="晶型详情">
          <div class="pc-detail-card">
            <button id="pcDetailCloseButton" class="pc-icon-button pc-detail-close" type="button" title="返回"><i data-lucide="chevron-left"></i></button>
            <div id="pcDetailViewer" class="pc-detail-viewer">
              <div class="loading-state">Loading</div>
            </div>
            <div class="pc-detail-info">
              <div class="pc-detail-title-row">
                <div>
                  <h2 id="pcDetailTitle">晶型</h2>
                  <p id="pcDetailSubtitle">CDL 晶习预览</p>
                </div>
                <div class="pc-detail-tools">
                  <button id="pcCellLabelsToggleButton" class="pc-icon-button active" type="button" title="晶面数据"><i data-lucide="ruler"></i></button>
                  <button id="pcCoordinateAxesToggleButton" class="pc-icon-button active" type="button" title="三维坐标轴"><i data-lucide="move-3d"></i></button>
                  <button id="pcModelSettingsButton" class="pc-icon-button" type="button" title="模型设置"><i data-lucide="sliders-horizontal"></i></button>
                  <button id="pcSnapshotButton" class="pc-icon-button" type="button" title="下载当前图片"><i data-lucide="camera"></i></button>
                  <button id="pcGifButton" class="pc-icon-button gif-text-button" type="button" title="下载360度GIF">GIF</button>
                  <button id="pcVideoButton" class="pc-icon-button" type="button" title="下载360度视频"><i data-lucide="video"></i></button>
                  <button id="pcSpinToggleButton" class="pc-icon-button" type="button" title="自动旋转"><i data-lucide="pause"></i></button>
                  <button id="pcResetViewButton" class="pc-icon-button" type="button" title="重置视角"><i data-lucide="rotate-ccw"></i></button>
                </div>
              </div>
              <div id="pcModelSettingsPanel" class="model-settings-panel pc-model-settings-panel hidden">
                <label class="model-setting-row">
                  <span>晶面透明度</span>
                  <input id="pcFaceOpacitySlider" type="range" min="0" max="100" value="100" />
                  <strong id="pcFaceOpacityValue">100</strong>
                </label>
                <label class="model-setting-row">
                  <span>边线粗细</span>
                  <input id="pcEdgeWeightSlider" type="range" min="0" max="100" value="0" />
                  <strong id="pcEdgeWeightValue">0</strong>
                </label>
                <label class="model-setting-row model-setting-color-row">
                  <span>边线颜色</span>
                  <input id="pcEdgeColorSlider" class="color-range" type="range" min="0" max="361" value="0" />
                  <strong id="pcEdgeColorValue" class="color-chip"></strong>
                </label>
                <label class="model-setting-row">
                  <span>顶点大小</span>
                  <input id="pcVertexSizeSlider" type="range" min="0" max="100" value="0" />
                  <strong id="pcVertexSizeValue">0</strong>
                </label>
                <label class="model-setting-row model-setting-color-row">
                  <span>顶点颜色</span>
                  <input id="pcVertexColorSlider" class="color-range" type="range" min="0" max="361" value="0" />
                  <strong id="pcVertexColorValue" class="color-chip"></strong>
                </label>
                <div class="model-setting-actions">
                  <button id="pcModelSettingsDefaultButton" type="button">恢复默认</button>
                </div>
              </div>
              <dl id="pcDetailGrid" class="detail-grid"></dl>
              <button id="pcCreateCollectionVideoButton" class="model-video-workshop-button" type="button">
                <i data-lucide="clapperboard"></i>
                <span>矿物视频工坊</span>
                <small>AI 竖屏短视频</small>
              </button>
              <div class="pc-section-head pc-detail-post-head">
                <h2>矿物图片</h2>
              </div>
              <div id="pcDetailPosts" class="pc-detail-posts"></div>
            </div>
          </div>
        </section>
      </section>

      <aside class="sidebar">
        <a class="site-logo" href="./gemmology.html" aria-label="Crystalhome home">
          <span class="brand-mark"><img src="./resources/favicon.svg" alt="" /></span>
          <span class="brand-word">crystalhome.cn</span>
        </a>
        <div class="mobile-home-title mobile-banner-title">今日首图</div>
        <div class="hero-banner" id="heroBanner">
          <img id="heroBannerImage" class="hero-banner-image" alt="" draggable="false" />
          <span id="heroBannerText">SMORF Mineral Forms</span>
          <span id="heroBannerPager" class="hero-banner-pager">1 / 1</span>
        </div>
        <div class="banner-meta hidden" id="bannerMeta"></div>
        <header class="sidebar-header">
          <div>
            <h1>Minerals</h1>
            <p id="dataStatus">Loading gemmology presets</p>
          </div>
          <div class="header-actions">
            <select id="languageSwitch" class="language-switch" aria-label="Language">
              <option value="cn">CN</option>
              <option value="en">EN</option>
            </select>
            <button id="loginButton" class="icon-link" type="button" title="Login">
              <i data-lucide="log-in"></i>
            </button>
            <a class="icon-link" href="./gemmology.html" title="Gemmology home">
              <i data-lucide="arrow-left"></i>
            </a>
          </div>
        </header>

        <div class="toolbar">
          <div class="search-wrap">
            <i data-lucide="search"></i>
            <input id="searchInput" type="search" autocomplete="off" placeholder="Search mineral / habit / form" data-i18n-placeholder="searchPlaceholder" />
          </div>
          <select id="systemFilter" aria-label="Crystal system filter">
            <option value="">All systems</option>
          </select>
        </div>

        <div class="summary-row">
          <span><strong id="recordCount">0</strong> presets</span>
          <span><strong id="speciesCount">0</strong> minerals</span>
        </div>

        <div class="species-list" id="speciesList" aria-label="Minerals"></div>
      </aside>

      <section class="mobile-home" id="mobileHome" aria-label="Mobile mineral browser">
        <div class="mobile-section-title mobile-model-heading">
          <h2>海量晶模库<span id="mobileModelCount">0条</span></h2>
        </div>
        <div class="mobile-random" id="mobileRandom"></div>
        <section class="mobile-home-ladder" aria-label="20斩天梯榜">
          <div class="mobile-section-title mobile-home-ladder-title">
            <h2>20斩天梯榜</h2>
            <button id="homeLadderMoreButton" type="button">查看全部 <i data-lucide="chevron-right"></i></button>
          </div>
          <div id="homeLadderBoardList" class="ladder-board-list home-ladder-board-list"></div>
        </section>
        <section class="mobile-featured" aria-label="精华帖子">
          <div class="mobile-section-title">
            <h2>精华帖子 <span class="home-posts-coming-soon">（暂未开放）</span></h2>
          </div>
          <div class="mobile-featured-list" id="mobileFeaturedPosts"></div>
        </section>
        <div class="mobile-models hidden" id="mobileModels">
          <div class="mobile-models-header">
            <button id="mobileBackButton" class="icon-link" type="button" title="Back">
              <i data-lucide="chevron-left"></i>
            </button>
            <div class="mobile-model-export-actions" id="mobileModelExportActions">
              <button id="mobileCellLabelsToggleButton" class="icon-link active" type="button" title="晶面数据">
                <i data-lucide="ruler"></i>
              </button>
              <button id="mobileCoordinateAxesToggleButton" class="icon-link active" type="button" title="三维坐标轴">
                <i data-lucide="move-3d"></i>
              </button>
              <button id="mobileModelSettingsButton" class="icon-link" type="button" title="模型设置">
                <i data-lucide="sliders-horizontal"></i>
              </button>
              <button id="mobileSnapshotButton" class="icon-link" type="button" title="下载当前模型图片">
                <i data-lucide="camera"></i>
              </button>
              <button id="mobileGifButton" class="icon-link gif-text-button" type="button" title="下载当前模型GIF">GIF</button>
              <button id="mobileVideoButton" class="icon-link" type="button" title="下载当前模型视频">
                <i data-lucide="video"></i>
              </button>
              <button id="mobileSpinToggleButton" class="icon-link" type="button" title="自动旋转">
                <i data-lucide="pause"></i>
              </button>
              <button id="mobileResetViewButton" class="icon-link" type="button" title="重置视角">
                <i data-lucide="rotate-ccw"></i>
              </button>
            </div>
            <div id="mobileModelSettingsPanel" class="model-settings-panel hidden">
              <label class="model-setting-row">
                <span>晶面透明度</span>
                <input id="mobileFaceOpacitySlider" type="range" min="0" max="100" value="100" />
                <strong id="mobileFaceOpacityValue">100</strong>
              </label>
              <label class="model-setting-row">
                <span>边线粗细</span>
                <input id="mobileEdgeWeightSlider" type="range" min="0" max="100" value="0" />
                <strong id="mobileEdgeWeightValue">0</strong>
              </label>
              <label class="model-setting-row model-setting-color-row">
                <span>边线颜色</span>
                <input id="mobileEdgeColorSlider" class="color-range" type="range" min="0" max="361" value="0" />
                <strong id="mobileEdgeColorValue" class="color-chip"></strong>
              </label>
              <label class="model-setting-row">
                <span>顶点大小</span>
                <input id="mobileVertexSizeSlider" type="range" min="0" max="100" value="0" />
                <strong id="mobileVertexSizeValue">0</strong>
              </label>
              <label class="model-setting-row model-setting-color-row">
                <span>顶点颜色</span>
                <input id="mobileVertexColorSlider" class="color-range" type="range" min="0" max="361" value="0" />
                <strong id="mobileVertexColorValue" class="color-chip"></strong>
              </label>
              <div class="model-setting-actions">
                <button id="mobileModelSettingsDefaultButton" type="button">恢复默认</button>
              </div>
            </div>
          </div>
          <div class="mobile-model-capture-area" id="mobileModelCaptureArea">
            <div class="mobile-models-title-block">
              <h2 id="mobileModelsTitle">矿物晶型</h2>
              <p id="mobileModelsSubtitle">选择晶型查看详情</p>
            </div>
            <div class="mobile-model-grid" id="mobileModelGrid"></div>
          </div>
        </div>
      </section>

      <section class="mobile-tab-panel mobile-search-page hidden" id="mobileSearchPage" aria-label="搜索结果">
        <div class="mobile-models-header">
          <button id="mobileSearchBackButton" class="icon-link" type="button" title="返回">
            <i data-lucide="chevron-left"></i>
          </button>
          <div class="mobile-models-title-block">
            <h2 id="mobileSearchTitle">搜索结果</h2>
            <p id="mobileSearchSubtitle">选择矿物查看晶型列表</p>
          </div>
        </div>
        <div class="mobile-search-results" id="mobileSearchResults"></div>
      </section>

      <section class="mobile-tab-panel mobile-library hidden" id="mobileLibrary" aria-label="晶库">
        <div class="mobile-panel-header mobile-panel-header-row">
          <h2>晶库</h2>
          <div class="mobile-library-controls">
            <div class="mobile-library-switch" role="group" aria-label="晶库语言">
              <button class="active" id="libraryCnButton" type="button">中</button>
              <button id="libraryEnButton" type="button">英</button>
            </div>
          </div>
        </div>
        <label class="mobile-library-search">
          <i data-lucide="search"></i>
          <input id="mobileLibrarySearchInput" type="search" placeholder="搜索矿物" autocomplete="off" />
        </label>
        <div class="mobile-library-list" id="mobileLibraryList"></div>
        <div class="mobile-library-index" id="mobileLibraryIndex" aria-label="字母索引"></div>
      </section>

      <section class="mobile-tab-panel mobile-ladder hidden" id="mobileLadder" aria-label="天梯赛">
        <div class="mobile-panel-header">
          <h2>天梯赛</h2>
          <p>认晶连斩挑战</p>
        </div>
        <div class="ladder-user-card">
          <div>
            <strong id="ladderUserName">未登录</strong>
            <p id="ladderUserMeta">登录后记录资格和20斩成绩</p>
          </div>
          <div class="ladder-user-tags" id="ladderUserTags"></div>
        </div>
        <div class="ladder-entry-grid">
          <button type="button" data-ladder-count="5"><i data-lucide="swords"></i><span>5连斩</span></button>
          <button type="button" data-ladder-count="10"><i data-lucide="flame"></i><span>10连斩</span></button>
          <button type="button" data-ladder-count="20"><i data-lucide="trophy"></i><span>20连斩</span></button>
        </div>
        <div class="ladder-practice-actions">
          <button type="button" data-ladder-mode="training"><i data-lucide="dumbbell"></i><span>训练场</span></button>
          <button type="button" data-ladder-mode="trial"><i data-lucide="target"></i><span>试炼场</span></button>
        </div>
        <section class="ladder-board">
          <div class="mobile-section-title">
            <h2>20斩天梯榜</h2>
          </div>
          <div id="ladderBoardList" class="ladder-board-list"></div>
        </section>
      </section>

      <section class="mobile-tab-panel mobile-ladder-play hidden" id="mobileLadderPlay" aria-label="天梯答题">
        <div id="ladderPlayHost" class="ladder-play-host"></div>
      </section>

      <section class="mobile-tab-panel mobile-profile hidden" id="mobileProfile" aria-label="主页">
        <div class="mobile-profile-head">
          <img id="profileAvatar" class="profile-avatar" src="./resources/favicon.svg" alt="" />
          <div>
            <h2 id="profileUsername">未登录</h2>
            <p id="profileGender">登录后查看个人主页</p>
          </div>
          <div class="profile-relation-actions">
            <button id="profileCabinetButton" class="profile-cabinet-button hidden" type="button">
              <span class="antique-cabinet-icon" aria-hidden="true"><i></i><i></i><b></b><b></b></span>
              <span>我的矿柜</span>
            </button>
            <button id="profileLikeButton" class="profile-like-button hidden" type="button">点赞</button>
            <button id="profileFollowButton" class="profile-follow-button hidden" type="button">关注</button>
          </div>
        </div>
        <p class="mobile-profile-bio" id="profileBio">这里会展示你的简介。</p>
        <div class="profile-stats" id="profileStats">
          <button type="button" data-profile-relation="likes"><strong id="profileLikeCount">0</strong><small>获赞</small></button>
          <button type="button" data-profile-relation="following"><strong id="profileFollowingCount">0</strong><small>关注</small></button>
          <button type="button" data-profile-relation="followers"><strong id="profileFollowerCount">0</strong><small>粉丝</small></button>
        </div>
        <div class="mobile-profile-tabs" role="tablist" aria-label="主页内容">
          <button class="active" type="button" data-profile-list="cabinet">我的矿柜</button>
        </div>
        <div class="mobile-profile-list" id="mobileProfileList"></div>
      </section>

      <section class="mobile-tab-panel mobile-community hidden" id="mobileCommunity" aria-label="信息">
        <div class="mobile-panel-header">
          <h2>信息</h2>
          <p>精选内容</p>
        </div>
        <div class="mobile-community-list" id="mobileCommunityList"></div>
      </section>

      <section class="mobile-tab-panel mobile-messages hidden" id="mobileMessages" aria-label="官方消息">
        <div class="mobile-panel-header">
          <h2>官方消息</h2>
          <p>系统通知与管理员私信</p>
        </div>
        <div class="mobile-message-list" id="mobileMessageList"></div>
      </section>

      <section class="mobile-tab-panel mobile-article-detail hidden" id="mobileArticleDetail" aria-label="帖子详情">
        <div class="mobile-detail-header">
          <button id="mobileArticleBackButton" class="icon-link" type="button" title="返回">
            <i data-lucide="chevron-left"></i>
          </button>
          <h2 id="mobileArticleTitle">帖子详情</h2>
        </div>
        <div id="mobileArticleBody" class="mobile-article-body"></div>
      </section>

      <section class="mobile-tab-panel mobile-mine hidden" id="mobileMine" aria-label="我的">
        <div class="mobile-panel-header">
          <h2>我的</h2>
        </div>
        <div class="mobile-mine-account">
          <img id="mineAvatarPreview" class="profile-avatar" src="./resources/favicon.svg" alt="" />
          <div>
            <strong id="mineNicknameDisplay">未登录</strong>
            <button id="minePointsButton" class="points-pill" type="button">L1 练气期 · 0分</button>
          </div>
          <button id="mobileEditProfileButton" class="small-button" type="button">编辑</button>
        </div>
        <div class="mobile-profile-editor hidden" id="mobileProfileEditor">
          <button id="mobileProfileBackButton" class="icon-link profile-editor-back" type="button" title="返回">
            <i data-lucide="chevron-left"></i>
          </button>
          <div class="profile-editor-head">
            <label class="small-button profile-avatar-picker">头像<input id="mineAvatarInput" type="file" accept="image/*" /></label>
          </div>
          <label class="field-label">昵称<input id="mineNicknameInput" type="text" maxlength="32" /></label>
          <label class="field-label">性别
            <select id="mineGenderSelect">
              <option value="">保密</option>
              <option value="男">男</option>
              <option value="女">女</option>
              <option value="其他">其他</option>
            </select>
          </label>
          <label class="field-label">简介<textarea id="mineBioInput" rows="4" maxlength="240"></textarea></label>
          <button id="saveProfileButton" class="primary-button" type="button">保存个人信息</button>
        </div>
        <div class="mobile-profile-editor mobile-password-editor hidden" id="mobilePasswordEditor">
          <button id="mobilePasswordBackButton" class="icon-link profile-editor-back" type="button" title="返回">
            <i data-lucide="chevron-left"></i>
          </button>
          <label class="field-label">老密码<input id="mineOldPasswordInput" type="password" autocomplete="current-password" /></label>
          <label class="field-label">新密码<input id="mineNewPasswordInput" type="password" autocomplete="new-password" /></label>
          <label class="field-label">确认新密码<input id="mineConfirmPasswordInput" type="password" autocomplete="new-password" /></label>
          <button id="saveMinePasswordButton" class="primary-button" type="button">提交修改</button>
        </div>
        <div class="mobile-mine-list">
          <div class="mobile-mine-shortcuts" aria-label="快捷入口">
            <button type="button" data-mine-shortcut="profile">
              <i data-lucide="house"></i>
              <span>主页</span>
            </button>
            <button type="button" data-mine-shortcut="ladder">
              <i data-lucide="trophy"></i>
              <span>天梯赛</span>
            </button>
            <button type="button" data-mine-shortcut="messages" class="mine-message-shortcut">
              <i data-lucide="mail"></i>
              <span>消息</span>
              <b class="nav-badge hidden" data-official-message-badge></b>
            </button>
            <button id="mobileVideoHistoryButton" type="button">
              <i data-lucide="clapperboard"></i>
              <span>我的视频</span>
            </button>
          </div>
          <button id="mobileLanguageToggle" class="mobile-language-toggle" type="button">
            <span>语言</span>
            <strong><span>CN</span><span>EN</span></strong>
          </button>
          <label class="mobile-setting-row mobile-setting-select-row">
            <span>主页显示我的矿柜</span>
            <select id="showCabinetOnProfileSelect" aria-label="是否在我的主页显示矿柜">
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </label>
          <button id="mobileChangePasswordButton" class="mobile-setting-row" type="button">修改密码 <span><i data-lucide="key-round"></i></span></button>
          <button id="mobileSwitchAccountButton" class="mobile-setting-row" type="button">切换账号 <span><i data-lucide="repeat-2"></i></span></button>
          <button id="mobileAuthButton" class="mobile-setting-row" type="button">退出登录 <span><i data-lucide="log-out"></i></span></button>
        </div>
      </section>

      <main class="main-pane">
        <div class="main-topbar">
          <div>
            <h2 id="speciesTitle">Mineral presets</h2>
            <p id="speciesSubtitle">Select a mineral on the left. Click any tile to expand it.</p>
          </div>
          <div class="view-actions">
            <button id="backToGridButton" type="button" title="Back to grid">
              <i data-lucide="layout-grid"></i>
            </button>
          </div>
        </div>

        <section class="grid-view" id="gridView" aria-label="Preset grid"></section>

        <section class="expanded-view hidden" id="expandedView" aria-label="Expanded preset">
          <button id="expandedCloseButton" class="expanded-close icon-link" type="button" title="返回">
            <i data-lucide="chevron-left"></i>
          </button>
          <div class="expanded-viewer" id="expandedViewer">
            <div class="loading-state" id="loadingState">Loading</div>
          </div>
          <section class="mineral-image-strip hidden" id="mineralImageStrip" aria-label="矿物图片"></section>
          <div id="modelSettingsPanel" class="model-settings-panel expanded-model-settings-panel hidden">
            <label class="model-setting-row">
              <span>晶面透明度</span>
              <input id="faceOpacitySlider" type="range" min="0" max="100" value="100" />
              <strong id="faceOpacityValue">100</strong>
            </label>
            <label class="model-setting-row">
              <span>边线粗细</span>
              <input id="edgeWeightSlider" type="range" min="0" max="100" value="0" />
              <strong id="edgeWeightValue">0</strong>
            </label>
            <label class="model-setting-row model-setting-color-row">
              <span>边线颜色</span>
              <input id="edgeColorSlider" class="color-range" type="range" min="0" max="361" value="0" />
              <strong id="edgeColorValue" class="color-chip"></strong>
            </label>
            <label class="model-setting-row">
              <span>顶点大小</span>
              <input id="vertexSizeSlider" type="range" min="0" max="100" value="0" />
              <strong id="vertexSizeValue">0</strong>
            </label>
            <label class="model-setting-row model-setting-color-row">
              <span>顶点颜色</span>
              <input id="vertexColorSlider" class="color-range" type="range" min="0" max="361" value="0" />
              <strong id="vertexColorValue" class="color-chip"></strong>
            </label>
            <div class="model-setting-actions">
              <button id="modelSettingsDefaultButton" type="button">恢复默认</button>
            </div>
          </div>
          <div class="expanded-info">
            <div>
              <h3 id="expandedTitle">Preset</h3>
              <p id="expandedSubtitle">CDL habit preview</p>
              <button id="mobileInfoToggleButton" class="mobile-info-toggle" type="button">晶型信息</button>
              <dl class="detail-grid mobile-expanded-detail-grid" id="mobileExpandedDetailGrid"></dl>
            </div>
            <div class="expanded-actions">
              <button id="cellLabelsToggleButton" class="active" type="button" title="Cell values">
                <i data-lucide="ruler"></i>
              </button>
              <button id="coordinateAxesToggleButton" class="active" type="button" title="3D coordinate axes">
                <i data-lucide="move-3d"></i>
              </button>
              <button id="snapshotButton" type="button" title="下载当前图片">
                <i data-lucide="camera"></i>
              </button>
              <button id="gifButton" class="gif-text-button" type="button" title="下载360度GIF">GIF</button>
              <button id="videoButton" type="button" title="下载360度视频">
                <i data-lucide="video"></i>
              </button>
              <button id="spinToggleButton" type="button" title="Auto spin">
                <i data-lucide="pause"></i>
              </button>
              <button id="resetViewButton" type="button" title="Reset camera">
                <i data-lucide="rotate-ccw"></i>
              </button>
              <div class="expanded-model-settings">
                <button id="modelSettingsButton" type="button" title="模型设置">
                  <i data-lucide="sliders-horizontal"></i>
                </button>
              </div>
            </div>
          </div>
          <button id="mobileCreateCollectionVideoButton" class="model-video-workshop-button mobile-model-video-workshop-button" type="button">
            <i data-lucide="clapperboard"></i>
            <span>矿物视频工坊</span>
            <small>AI 竖屏短视频</small>
          </button>
          <section class="mobile-expanded-posts">
            <div class="section-header">
              <h3>矿物图片</h3>
            </div>
            <div class="post-list" id="mobileExpandedPostList"></div>
          </section>
        </section>
      </main>

      <aside class="detail-pane">
        <section>
          <h3>Preset Data</h3>
          <dl class="detail-grid" id="detailGrid"></dl>
        </section>

        <section>
          <h3>Forms</h3>
          <div class="chip-list" id="formsList"></div>
        </section>

        <section>
          <h3>CDL</h3>
          <pre id="cdlBlock"></pre>
        </section>

        <section>
          <h3>Legend</h3>
          <div class="legend" id="legend"></div>
        </section>

        <section>
          <div class="section-header">
            <h3>矿物图片</h3>
          </div>
          <div class="post-list" id="postList"></div>
        </section>
      </aside>
    </div>

    <nav class="mobile-tabbar" id="mobileTabbar" aria-label="移动端导航">
      <button class="active" type="button" data-mobile-tab="home"><i data-lucide="home"></i><span>首页</span></button>
      <button type="button" data-mobile-tab="library"><i data-lucide="gem"></i><span>晶库</span></button>
      <button type="button" data-mobile-tab="ladder"><i data-lucide="trophy"></i><span>天梯赛</span></button>
      <button type="button" data-mobile-tab="community"><i data-lucide="messages-square"></i><span>信息</span></button>
      <button type="button" data-mobile-tab="mine"><i data-lucide="user"></i><span>我的</span><b class="nav-badge hidden" data-official-message-badge></b></button>
    </nav>


    <footer class="site-beian" aria-label="网站备案信息">
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">津ICP备2026005481号-1</a>
      <a href="https://beian.mps.gov.cn/#/query/webSearch?code=12010402002522" target="_blank" rel="noopener">津公网安备12010402002522号</a>
      <span class="site-policy-links">
        <button id="openPrivacyButton" type="button">隐私政策</button>
        <button id="openTermsButton" type="button">用户协议</button>
        <button id="openReportButton" type="button">投诉举报</button>
      </span>
    </footer>

    <div id="loginModal" class="modal auth-modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card login-card">
        <div class="modal-header">
          <h2 id="authTitle">登录</h2>
          <button class="icon-link" id="closeLoginButton" type="button" title="返回"><i data-lucide="chevron-left"></i></button>
        </div>

        <section class="auth-view" data-auth-view="login">
          <label class="field-label">邮箱<input id="loginUsername" type="email" autocomplete="email" placeholder="输入邮箱" /></label>
          <label class="field-label">密码<input id="loginPassword" type="password" autocomplete="current-password" placeholder="输入密码" /></label>
          <div class="auth-captcha" data-auth-captcha="login">
            <div class="auth-captcha-stage" data-captcha-stage>
              <span class="auth-captcha-gap" data-captcha-gap></span>
              <span class="auth-captcha-piece" data-captcha-piece></span>
            </div>
            <div class="auth-captcha-track" data-captcha-track>
              <button class="auth-captcha-thumb" type="button" data-captcha-thumb aria-label="拖动完成验证"><i data-lucide="chevrons-right"></i></button>
              <span data-captcha-text>向右拖动完成验证</span>
            </div>
          </div>
          <p id="loginStatus" class="form-hint"></p>
          <button id="submitLoginButton" class="primary-button" type="button">登录</button>
          <div class="auth-switch-row">
            <button id="showRegisterButton" class="small-button" type="button">注册</button>
            <button id="showForgotPasswordButton" class="small-button" type="button">忘记密码</button>
          </div>
        </section>

        <section class="auth-view hidden" data-auth-view="register">
          <label class="field-label">邮箱<input id="registerEmail" type="email" autocomplete="email" placeholder="输入邮箱" /></label>
          <div class="auth-captcha" data-auth-captcha="register">
            <div class="auth-captcha-stage" data-captcha-stage>
              <span class="auth-captcha-gap" data-captcha-gap></span>
              <span class="auth-captcha-piece" data-captcha-piece></span>
            </div>
            <div class="auth-captcha-track" data-captcha-track>
              <button class="auth-captcha-thumb" type="button" data-captcha-thumb aria-label="拖动完成验证"><i data-lucide="chevrons-right"></i></button>
              <span data-captcha-text>向右拖动完成验证</span>
            </div>
          </div>
          <label class="field-label auth-code-field">验证码
            <span>
              <input id="registerCode" type="text" inputmode="numeric" maxlength="6" placeholder="6 位验证码" />
              <button id="sendRegisterCodeButton" class="small-button" type="button">发送验证码</button>
            </span>
          </label>
          <label class="field-label">昵称<input id="registerNickname" type="text" maxlength="32" autocomplete="nickname" placeholder="可选" /></label>
          <label class="field-label">密码<input id="registerPassword" type="password" autocomplete="new-password" placeholder="至少 6 位" /></label>
          <label class="field-label">确认密码<input id="registerPasswordConfirm" type="password" autocomplete="new-password" placeholder="再次输入密码" /></label>
          <p id="registerStatus" class="form-hint">邮箱验证通过后即可注册。</p>
          <button id="submitRegisterButton" class="primary-button" type="button">注册</button>
          <button id="backToLoginFromRegisterButton" class="small-button" type="button">返回登录</button>
        </section>

        <section class="auth-view hidden" data-auth-view="forgot">
          <label class="field-label">邮箱<input id="forgotEmail" type="email" autocomplete="email" placeholder="输入注册邮箱" /></label>
          <div class="auth-captcha" data-auth-captcha="forgot">
            <div class="auth-captcha-stage" data-captcha-stage>
              <span class="auth-captcha-gap" data-captcha-gap></span>
              <span class="auth-captcha-piece" data-captcha-piece></span>
            </div>
            <div class="auth-captcha-track" data-captcha-track>
              <button class="auth-captcha-thumb" type="button" data-captcha-thumb aria-label="拖动完成验证"><i data-lucide="chevrons-right"></i></button>
              <span data-captcha-text>向右拖动完成验证</span>
            </div>
          </div>
          <label class="field-label auth-code-field">验证码
            <span>
              <input id="forgotCode" type="text" inputmode="numeric" maxlength="6" placeholder="6 位验证码" />
              <button id="sendResetCodeButton" class="small-button" type="button">发送验证码</button>
            </span>
          </label>
          <label class="field-label">新密码<input id="forgotPassword" type="password" autocomplete="new-password" placeholder="至少 6 位" /></label>
          <label class="field-label">确认密码<input id="forgotPasswordConfirm" type="password" autocomplete="new-password" placeholder="再次输入密码" /></label>
          <p id="forgotStatus" class="form-hint">通过邮箱验证码重置密码。</p>
          <button id="submitResetPasswordButton" class="primary-button" type="button">修改密码</button>
          <button id="backToLoginFromForgotButton" class="small-button" type="button">返回登录</button>
        </section>
      </div>
    </div>

    <div id="postModal" class="modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card">
        <div class="modal-header">
          <h2>晒矿</h2>
          <button class="icon-link" id="closePostButton" type="button" title="返回"><i data-lucide="chevron-left"></i></button>
        </div>
        <label class="field-label" id="postUploaderLabel">上传者<input id="postUploader" type="text" /></label>
        <label class="field-label" id="postMineralLabel">矿物名称<input id="postMineral" type="text" /></label>
        <label class="field-label" id="postLocalityLabel">产地<input id="postLocality" type="text" /></label>
        <label class="field-label" id="postRemarkLabel">简介<textarea id="postRemark" rows="4"></textarea></label>
        <label class="field-label" id="postImagesLabel">图片<input id="postImages" type="file" accept="image/*" multiple /></label>
        <p class="form-hint" id="postFormHint">提交后进入人工审核，审核通过后展示在当前矿物详情下面。</p>
        <button id="submitPostButton" class="primary-button" type="button">提交审核</button>
      </div>
    </div>

    <div id="imageModal" class="modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card image-card">
        <div class="modal-header">
          <h2 id="imageModalTitle">矿物图片</h2>
          <button class="icon-link image-exit-button" id="closeImageButton" type="button" title="退出"><i data-lucide="x"></i><span>退出</span></button>
        </div>
        <div id="imageModalGallery" class="image-gallery"></div>
        <dl id="imageModalDetails" class="detail-grid"></dl>
      </div>
    </div>

    <div id="videoStudioModal" class="modal video-studio-modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card video-studio-card">
        <div class="modal-header">
          <div>
            <h2>矿物视频工坊</h2>
            <p>上传收藏照片，自动引用矿物资料和晶型视频，生成抖音竖屏 MP4。</p>
          </div>
          <button class="icon-link" id="closeVideoStudioButton" type="button" title="返回"><i data-lucide="chevron-left"></i></button>
        </div>
        <div class="video-studio-layout">
          <section class="video-studio-form">
            <div class="video-template-preview">
              <img id="videoLivePreviewImage" alt="视频预览图" />
              <div class="video-template-overlay" id="videoTemplateOverlay">
                <span class="video-overlay-item video-overlay-kicker" data-overlay-key="kicker" id="videoOverlayKicker">MINERAL JOURNAL</span>
                <b class="video-overlay-item" data-overlay-key="title" id="videoOverlayTitle">矿物视频工坊</b>
                <em class="video-overlay-item" data-overlay-key="subtitle" id="videoOverlaySubtitle">UPLOAD FIRST IMAGE</em>
                <span class="video-overlay-item video-overlay-info" data-overlay-key="info" id="videoOverlayInfo">选择照片后实时预览模板与色彩效果</span>
                <div id="videoCustomOverlayHost"></div>
              </div>
              <span class="video-template-badge">1080 × 1920</span>
              <i data-lucide="play"></i>
              <strong id="videoTemplatePreviewTitle">典藏画册</strong>
              <small id="videoTemplatePreviewDescription">自然滤镜 · 淡入淡出 · 照片后展示完整晶型</small>
            </div>
            <div class="video-overlay-controls" id="videoOverlayControls">
              <input id="videoCustomOverlayInput" type="text" maxlength="60" placeholder="输入自定义贴图文字" />
              <button id="addVideoCustomOverlayButton" class="small-button" type="button"><i data-lucide="plus"></i><span>添加文字贴图</span></button>
              <button id="saveVideoOverlayTemplateButton" class="small-button" type="button"><i data-lucide="bookmark-plus"></i><span>保存为我的模板</span></button>
              <small id="videoOverlayTemplateStatus">左上角删除，左下角切换字体，右下角拖动缩放。</small>
            </div>
            <div class="video-current-mineral">
              <span>当前矿物与晶型</span>
              <strong id="videoCurrentMineralName">请从矿物详情页进入</strong>
              <small id="videoCurrentModelName">矿物资料与当前模型视频将自动带入</small>
            </div>
            <fieldset class="video-template-fieldset">
              <legend>视频模板</legend>
              <div class="video-template-options">
                <label class="video-template-option">
                  <input type="radio" name="videoTemplate" value="gallery" checked />
                  <span>
                    <strong>典藏画册</strong>
                    <small>自然滤镜 · 淡入淡出 · 图片 → 晶型 → 资料卡</small>
                  </span>
                </label>
                <label class="video-template-option">
                  <input type="radio" name="videoTemplate" value="cinematic" />
                  <span>
                    <strong>电影质感</strong>
                    <small>暗调滤镜 · 黑场转场 · 晶型 → 图片 → 资料卡</small>
                  </span>
                </label>
                <label class="video-template-option">
                  <input type="radio" name="videoTemplate" value="vivid" />
                  <span>
                    <strong>活力滑动</strong>
                    <small>鲜明滤镜 · 左滑转场 · 图片与晶型交错编排</small>
                  </span>
                </label>
                <label class="video-template-option">
                  <input type="radio" name="videoTemplate" value="magazine" />
                  <span>
                    <strong>杂志贴图</strong>
                    <small>高级黑白排版 · 矿物信息贴图 · 随转场滑入</small>
                  </span>
                </label>
              </div>
            </fieldset>
            <fieldset class="video-adjust-fieldset">
              <legend>画面调节</legend>
              <label class="video-adjust-row">
                <span>亮度</span>
                <input id="videoBrightnessSlider" type="range" min="-40" max="40" value="0" />
                <strong id="videoBrightnessValue">0</strong>
              </label>
              <label class="video-adjust-row">
                <span>对比度</span>
                <input id="videoContrastSlider" type="range" min="-40" max="40" value="0" />
                <strong id="videoContrastValue">0</strong>
              </label>
              <label class="video-adjust-row">
                <span>饱和度</span>
                <input id="videoSaturationSlider" type="range" min="-50" max="50" value="0" />
                <strong id="videoSaturationValue">0</strong>
              </label>
            </fieldset>
            <label class="field-label">视频标题
              <input id="videoTitleInput" type="text" maxlength="160" placeholder="例如：我的石英收藏" />
            </label>
            <label class="field-label">目标时长
              <select id="videoDurationSelect">
                <option value="15">15 秒</option>
                <option value="30">30 秒</option>
              </select>
            </label>
            <label class="field-label">矿物照片（与视频合计 1～12 个，单张不超过 15MB）
              <input id="videoImagesInput" type="file" accept="image/jpeg,image/png,image/webp" multiple />
            </label>
            <label class="field-label">矿物视频（可选，单个不超过 400MB）
              <input id="videoClipsInput" type="file" accept="video/mp4,video/webm,video/quicktime" multiple />
            </label>
            <div id="videoImagePreview" class="video-image-preview"></div>
            <div class="video-model-actions">
              <i data-lucide="box"></i>
              <span id="videoModelStatus">正在自动生成当前晶型模型片段...</span>
            </div>
            <p id="videoStudioStatus" class="form-hint">生成任务提交后可关闭页面，任务会在后台继续运行。</p>
            <button id="submitVideoProjectButton" class="primary-button video-generate-button" type="button">
              <i data-lucide="wand-sparkles"></i><span>生成竖屏视频</span>
            </button>
          </section>
          <section class="video-project-history">
            <div class="video-history-head">
              <div>
                <h3>我的视频</h3>
                <p>生成完成后可保存到手机图库，或上传社交平台。</p>
              </div>
              <button id="refreshVideoProjectsButton" class="small-button" type="button"><i data-lucide="refresh-cw"></i><span>刷新</span></button>
            </div>
            <div id="videoProjectList" class="video-project-list"></div>
          </section>
        </div>
      </div>
    </div>

    <div id="reportModal" class="modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card">
        <div class="modal-header">
          <h2>投诉举报</h2>
          <button class="icon-link" id="closeReportButton" type="button" title="关闭"><i data-lucide="x"></i></button>
        </div>
        <label class="field-label">对象类型
          <select id="reportTargetType">
            <option value="general">网站问题</option>
            <option value="post">帖子/晒矿</option>
            <option value="comment">评论</option>
            <option value="user">用户</option>
          </select>
        </label>
        <label class="field-label">对象编号<input id="reportTargetId" type="text" placeholder="可选" /></label>
        <label class="field-label">联系方式<input id="reportContact" type="text" placeholder="邮箱或手机号，可选" /></label>
        <label class="field-label">举报原因<input id="reportReason" type="text" maxlength="120" placeholder="例如违法有害信息、侵权、骚扰等" /></label>
        <label class="field-label">详细说明<textarea id="reportDetail" rows="4" maxlength="1000" placeholder="请描述需要处理的内容"></textarea></label>
        <p id="reportStatus" class="form-hint"></p>
        <button id="submitReportButton" class="primary-button" type="button">提交</button>
      </div>
    </div>

    <div id="policyModal" class="modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card points-card">
        <div class="modal-header">
          <h2 id="policyTitle">隐私政策</h2>
          <button class="icon-link" id="closePolicyButton" type="button" title="关闭"><i data-lucide="x"></i></button>
        </div>
        <div id="policyContent" class="points-rules"></div>
      </div>
    </div>

    <div id="publicProfileModal" class="modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card public-profile-card">
        <div class="modal-header">
          <h2 id="publicProfileTitle">用户主页</h2>
          <button class="icon-link" id="closePublicProfileButton" type="button" title="关闭"><i data-lucide="x"></i></button>
        </div>
        <div class="public-profile-head">
          <img id="publicProfileAvatar" src="./resources/favicon.svg" alt="" />
          <div>
            <strong id="publicProfileName">用户主页</strong>
            <span id="publicProfileMeta">公开主页</span>
          </div>
          <div class="profile-relation-actions">
            <button id="publicProfileLikeButton" class="profile-like-button hidden" type="button">点赞</button>
            <button id="publicProfileFollowButton" class="profile-follow-button hidden" type="button">关注</button>
          </div>
        </div>
        <div id="publicProfileSummary" class="public-profile-summary profile-stats">
          <button type="button" disabled><strong id="publicProfileLikeCount">0</strong><small>获赞</small></button>
          <button type="button" disabled><strong id="publicProfileFollowingCount">0</strong><small>关注</small></button>
          <button type="button" disabled><strong id="publicProfileFollowerCount">0</strong><small>粉丝</small></button>
        </div>
        <div class="public-profile-tabs pc-profile-tabs" role="tablist" aria-label="用户主页内容">
          <button type="button" data-public-profile-list="cabinet">矿柜</button>
          <button class="active" type="button" data-public-profile-list="article">帖子</button>
          <button class="hidden" type="button" data-public-profile-list="mineral_image">矿图</button>
          <button type="button" data-public-profile-list="banner">头图</button>
        </div>
        <div id="publicProfileList" class="public-profile-list"></div>
      </div>
    </div>

    <div id="pointsModal" class="modal hidden" role="dialog" aria-modal="true">
      <div class="modal-card points-card">
        <div class="modal-header">
          <h2>积分等级规则</h2>
          <button class="icon-link" id="closePointsButton" type="button" title="关闭"><i data-lucide="x"></i></button>
        </div>
        <div class="points-rules">
          <p>等级积分永久累计，正常行为只升不降；违规、作弊、盗图会扣回对应积分，严重时清零。</p>
          <h3>日常积分</h3>
          <p>每日登录 +5；跟图审核通过 +10，每日最多 5 次；原创帖审核通过 +10，每日最多 3 次；优质内容上头图 +300，每月最多 3 次。</p>
          <h3>天梯周榜</h3>
          <p>每周一 0 点结算上周榜单：第1名 +300，第2名 +200，第3名 +100，第4-10名 +50，第11-20名 +40，第21-30名 +30，第31-50名 +20，第51-100名 +10，101名后 +5。</p>
          <h3>等级与境界</h3>
          <p>每 1000 分升 1 级。L1-L10 练气期，L11-L20 筑基期，L21-L30 金丹期，L31-L40 元婴期，L41-L50 化神期，L51-L60 炼虚期，L61-L70 合体期，L71-L80 大乘期，L81-L90 渡劫期，L91-L100 入道期，L101-L200 为矿圈巅峰十星，L200 矿神封顶。</p>
          <h3>荣誉</h3>
          <p>每圆满一个大境界解锁成就、头像框与昵称前缀；天梯周榜冠军获得限时“矿圈榜首”；L200 矿神进入名人堂。</p>
        </div>
      </div>
    </div>

  </body>
</html>