feat(frontend): 新增我的个人页面并优化站点导航

- 新增完整的我的页面,包含用户资料展示、使用统计和个人信息编辑功能
- 添加收藏和卡册的快捷入口网格
- 简化导航栏,将原分散的个人中心、我的收藏、我的卡册入口合并为单个「我的」标签
- 编写新页面对应的CSS样式并更新静态资源版本号
- 在数学人生页面添加葫芦侠行的快捷跳转入口
This commit is contained in:
2026-08-08 16:21:48 +08:00
parent dabb54a608
commit d85e2ead34
4 changed files with 55 additions and 11 deletions
+9 -8
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>葫芦数学 · Hulu Math</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%23808C95'/><stop offset='100%' stop-color='%239AA5AE'/></linearGradient></defs><ellipse cx='32' cy='22' rx='14' ry='10' fill='url(%23g)'/><rect x='18' y='28' width='28' height='28' rx='14' fill='url(%23g)'/><text x='32' y='47' text-anchor='middle' font-size='20' font-weight='bold' fill='white' font-family='sans-serif'>葫</text></svg>">
<link rel="stylesheet" href="/static/css/desktop.css?v=19">
<link rel="stylesheet" href="/static/css/desktop.css?v=20">
</head>
<body>
@@ -25,12 +25,8 @@
<button class="nav-item active" data-page="home" onclick="navigateTo('home')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9 21v-6h6v6"/></svg></span> 首页</button>
<button class="nav-item" data-page="discover" onclick="navigateTo('discover')"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5z"/></svg></span> 发现</button>
<button class="nav-item" data-page="toolbox" onclick="navigateTo('toolbox')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3 18l3 3 5.7-5.7a4.5 4.5 0 0 0 6-6L14 13l-3-3z"/></svg></span> 工具箱</button>
<button class="nav-item" data-page="knowledge" onclick="navigateTo('knowledge')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M2 5h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H2z"/><path d="M22 5h-7a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H22z"/></svg></span> 知识卡片</button>
<button class="nav-item" data-page="story" onclick="navigateTo('story')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M4 4l11 11"/><path d="M4 4v4l3 3"/><path d="M20 4l-11 11"/><path d="M20 4v4l-3 3"/><path d="m5 15 4 4"/><path d="m19 15-4 4"/><path d="m3 21 3-3"/><path d="m21 21-3-3"/></svg></span> 葫芦侠行</button>
<button class="nav-item" data-page="simulator" onclick="navigateTo('simulator')"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="10" rx="5"/><path d="M7 11v2"/><path d="M6 12h2"/><circle cx="16.5" cy="11" r=".6"/><circle cx="18.5" cy="13" r=".6"/></svg></span> 数学人生</button>
<button class="nav-item" data-page="favorites" onclick="navigateTo('favorites')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M12 20.5C7 16.5 3 13.3 3 9.3 3 6.4 5.2 4.5 7.7 4.5c1.7 0 3.3.9 4.3 2.4 1-1.5 2.6-2.4 4.3-2.4 2.5 0 4.7 1.9 4.7 4.8 0 4-4 7.2-9 11.2z"/></svg></span> 我的收藏</button>
<button class="nav-item" data-page="cards" onclick="navigateTo('cards')"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M8 10h8M8 14h5"/><circle cx="18" cy="9" r="2"/></svg></span> 我的卡册</button>
<button class="nav-item" data-page="profile" onclick="navigateTo('profile')"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5"/></svg></span> 个人中心</button>
<button class="nav-item" data-page="simulator" onclick="navigateTo('simulator')"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="10" rx="5"/><path d="M7 11v2"/><path d="M6 12h2"/><circle cx="16.5" cy="11" r=".6"/><circle cx="18.5" cy="13" r=".6"/></svg></span> 数学人生</button>
<button class="nav-item" data-page="mine" onclick="navigateTo('mine')"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5"/></svg></span> 我的</button>
</nav>
<div class="sidebar-footer"><div class="sidebar-avatar" id="sidebarAvatar" style="background:#5B6AF0"></div><div><div class="sidebar-user-name" id="sidebarName">游客用户</div><div class="sidebar-user-id">Hulu Math</div></div></div>
</aside>
@@ -135,6 +131,11 @@
<div class="cards-collection-grid" id="cardsCollectionGrid"><div class="spinner"></div></div>
</div>
<!-- Mine (我的) -->
<div class="page" id="page-mine">
<div id="mineContent"><div class="spinner"></div></div>
</div>
</div></main>
</div>
</div>
@@ -164,7 +165,7 @@
</div>
</div>
<script src="/static/js/desktop.js?v=21"></script>
<script src="/static/js/desktop.js?v=22"></script>
<!-- 抽卡弹窗 -->
<div class="gacha-overlay" id="gachaOverlay" style="display:none" onclick="if(event.target===this)closeGacha()">