Archived
feat(frontend): 新增我的个人页面并优化站点导航
- 新增完整的我的页面，包含用户资料展示、使用统计和个人信息编辑功能 - 添加收藏和卡册的快捷入口网格 - 简化导航栏，将原分散的个人中心、我的收藏、我的卡册入口合并为单个「我的」标签 - 编写新页面对应的CSS样式并更新静态资源版本号 - 在数学人生页面添加葫芦侠行的快捷跳转入口
This commit is contained in:
Binary file not shown.
@@ -553,3 +553,18 @@ button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px so
|
||||
.cc-card-name{font-size:13px;font-weight:600;color:#3A3632;margin-bottom:2px}
|
||||
.cc-card-type{font-size:10px;color:#ABA6A1;letter-spacing:1px;margin-bottom:4px}
|
||||
.cc-card-clan{font-size:10px;padding:2px 8px;border-radius:8px;display:inline-block}
|
||||
|
||||
/* ========== 我的页面入口卡片 ========== */
|
||||
.mine-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
|
||||
@media(max-width:640px){.mine-grid{grid-template-columns:1fr}}
|
||||
.mine-entry{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #D6D1CA;border-radius:8px;background:#FDFCFA;cursor:pointer;transition:all .15s;font:inherit;text-align:left}
|
||||
.mine-entry:hover{border-color:#808C95;background:#F0EEEA;box-shadow:0 3px 12px rgba(0,0,0,.06)}
|
||||
.mine-entry-icon{width:46px;height:46px;border-radius:8px;background:#EAE7E2;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
|
||||
.mine-entry-body{flex:1;min-width:0}
|
||||
.mine-entry-name{font-size:15px;font-weight:700;color:#3A3632;margin-bottom:3px}
|
||||
.mine-entry-desc{font-size:12px;color:#8A8580}
|
||||
.mine-entry-arrow{font-size:18px;color:#ABA6A1;font-weight:700}
|
||||
/* 数学人生页 · 葫芦侠行入口 */
|
||||
.ml-story-entry{border-color:#A8907E}
|
||||
.ml-story-entry:hover{background:#FBF8F3;border-color:#A8907E}
|
||||
.ml-story-entry .ml-alumni-entry-icon{background:#F5EDE4}
|
||||
|
||||
+31
-3
@@ -7,7 +7,7 @@ let cardState={owned:[],draws:0,lastDaily:'',knowledgeRead:0,drawHistory:[]};
|
||||
let _lang=localStorage.getItem('mb_lang')||'zh';
|
||||
|
||||
// ===== i18n =====
|
||||
const I18N={zh:{home:'首页',discover:'发现',toolbox:'工具箱',knowledge:'知识卡片',story:'葫芦侠行',simulator:'数学人生',favorites:'我的收藏',profile:'个人中心',search:'搜索内容...',guest:'游客用户',
|
||||
const I18N={zh:{home:'首页',discover:'发现',toolbox:'工具箱',knowledge:'知识卡片',story:'葫芦侠行',simulator:'数学人生',favorites:'我的收藏',profile:'个人中心',mine:'我的',search:'搜索内容...',guest:'游客用户',
|
||||
heroTitle:'葫芦数学 · 用玩的方式打开数学',heroSub:'数学不是公式，是你理解世界的方式',heroCTA:'开始探索 →',
|
||||
exploreTitle:'探索数学的万千可能',tryTitle:'试试这些',
|
||||
mbtiName:'MathBTI 数学人格',mbtiDesc:'12题发现你的数学人格，领养专属数学小人 →',
|
||||
@@ -66,7 +66,7 @@ const I18N={zh:{home:'首页',discover:'发现',toolbox:'工具箱',knowledge:'
|
||||
staticAIToggleTitle:'AI数学助教',staticAIHeader:'💬 AI 数学助教',
|
||||
staticAIWelcome:'你好！我是葫芦数学的AI助教 👋<br><br>试试问我：学数学对学医有什么用？',
|
||||
staticAIPlaceholder:'输入问题...',staticMbtiTooltip:'测测你的数学人格'},
|
||||
en:{home:'Home',discover:'Discover',toolbox:'Toolbox',knowledge:'Cards',story:'HuLu Quest',simulator:'Math Life',favorites:'Favorites',profile:'Profile',search:'Search...',guest:'Guest',
|
||||
en:{home:'Home',discover:'Discover',toolbox:'Toolbox',knowledge:'Cards',story:'HuLu Quest',simulator:'Math Life',favorites:'Favorites',profile:'Profile',mine:'Mine',search:'Search...',guest:'Guest',
|
||||
heroTitle:'Hulu Math · Play your way into math',heroSub:'Math isn\'t formulas. It\'s how you make sense of things.',heroCTA:'Start Exploring →',
|
||||
exploreTitle:'Explore Math',tryTitle:'Try These',
|
||||
mbtiName:'MathBTI Personality Test',mbtiDesc:'12 questions. One math soul. Meet your sprite. →',
|
||||
@@ -202,7 +202,7 @@ function navigateTo(p){
|
||||
const t=document.getElementById('page-'+p);if(t)t.classList.add('active');
|
||||
document.getElementById('mainContent').scrollTop=0;
|
||||
if(p==='home')loadHome();else if(p==='discover')loadDiscover();else if(p==='toolbox')loadToolbox();
|
||||
else if(p==='knowledge')loadKnowledgePage();else if(p==='story')loadStory();else if(p==='simulator')loadSimulator();else if(p==='favorites')loadFavorites();else if(p==='profile')loadProfile();else if(p==='cards')loadCardsPage();
|
||||
else if(p==='knowledge')loadKnowledgePage();else if(p==='story')loadStory();else if(p==='simulator')loadSimulator();else if(p==='favorites')loadFavorites();else if(p==='profile')loadProfile();else if(p==='cards')loadCardsPage();else if(p==='mine')loadMine();
|
||||
}
|
||||
|
||||
// ===== Home (Desmos-style) =====
|
||||
@@ -557,6 +557,29 @@ async function loadCardsPage(){
|
||||
grid.innerHTML=h;
|
||||
}
|
||||
|
||||
// ===== Mine Page (我的 — 个人中心 + 收藏 + 卡册入口) =====
|
||||
async function loadMine(){
|
||||
chatCtx={};
|
||||
const c=document.getElementById('mineContent');
|
||||
if(!c)return;
|
||||
let p={nickname:'游客用户',avatar_emoji:'葫',avatar_color:'#5B6AF0'};
|
||||
let s={watch_count:0,favorite_count:0};
|
||||
try{
|
||||
const[pr,sr]=await Promise.all([api('/api/user/profile?user_id='+USER_ID),api('/api/user/stats?user_id='+USER_ID)]);
|
||||
if(pr.code===0&&pr.data)p=pr.data;
|
||||
if(sr.code===0&&sr.data)s=sr.data;
|
||||
}catch(e){}
|
||||
c.innerHTML=
|
||||
'<div class="page-header"><h1 class="page-title">👤 我的</h1></div>'+
|
||||
'<div class="profile-card"><div class="profile-avatar-lg" style="background:rgba(255,255,255,.2)">'+esc(p.avatar_emoji||'葫')+'</div><div><div class="profile-name-lg">'+esc(p.nickname||'游客用户')+'</div><div class="profile-id-lg">ID: '+USER_ID+'</div></div></div>'+
|
||||
'<div class="profile-stats-grid"><div class="profile-stat-card"><div class="num">'+s.watch_count+'</div><div class="label">观看次数</div></div><div class="profile-stat-card"><div class="num">'+s.favorite_count+'</div><div class="label">收藏数量</div></div></div>'+
|
||||
'<div style="background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:20px"><div style="font-weight:600;margin-bottom:12px">编辑资料</div><div style="display:flex;gap:12px;align-items:center;margin-bottom:12px"><span style="font-size:13px;color:#64748B">头像:</span><input id="editAvatar" style="padding:8px 12px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:14px;width:80px" value="'+esc(p.avatar_emoji||'葫')+'"></div><div style="display:flex;gap:12px;align-items:center;margin-bottom:16px"><span style="font-size:13px;color:#64748B">昵称:</span><input id="editNickname" style="flex:1;padding:8px 12px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:14px" value="'+esc(p.nickname||'')+'"></div><button onclick="sP()" style="padding:10px 28px;border-radius:12px;border:none;background:#5B6AF0;color:#fff;font-size:14px;font-weight:600;cursor:pointer">保存</button></div>'+
|
||||
'<div class="mine-grid">'+
|
||||
'<div class="mine-entry" onclick="navigateTo(\'favorites\')"><div class="mine-entry-icon">❤️</div><div class="mine-entry-body"><div class="mine-entry-name">我的收藏</div><div class="mine-entry-desc">已收藏的视频和知识卡片</div></div><span class="mine-entry-arrow">→</span></div>'+
|
||||
'<div class="mine-entry" onclick="navigateTo(\'cards\')"><div class="mine-entry-icon">🎴</div><div class="mine-entry-body"><div class="mine-entry-name">我的卡册</div><div class="mine-entry-desc">收集全部16位数学人物 · '+cardState.owned.length+'/16</div></div><span class="mine-entry-arrow">→</span></div>'+
|
||||
'</div>';
|
||||
}
|
||||
|
||||
// ===== Pet Experience =====
|
||||
function getPet(){
|
||||
let pet=null;
|
||||
@@ -923,6 +946,11 @@ function loadMathLife(){
|
||||
(t.ready?'':'<div class="ml-coming-badge">敬请期待</div>')+
|
||||
'</div>').join('')+
|
||||
'</div>'+
|
||||
'<button class="ml-alumni-entry ml-story-entry" onclick="navigateTo(\'story\')">'+
|
||||
'<span class="ml-alumni-entry-icon">⚔️</span>'+
|
||||
'<span class="ml-alumni-entry-body"><b>葫芦侠行</b><small>北宋数学武侠互动文字冒险 · 8章93节点 · 8+种结局</small></span>'+
|
||||
'<span class="ml-alumni-entry-arrow">→</span>'+
|
||||
'</button>'+
|
||||
'<button class="ml-alumni-entry" onclick="openMathAlumni()">'+
|
||||
'<span class="ml-alumni-entry-icon">🎓</span>'+
|
||||
'<span class="ml-alumni-entry-body"><b>数学校友访谈</b><small>真实校友的大学四年 · Skill 剧本包</small></span>'+
|
||||
|
||||
@@ -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()">
|
||||
|
||||
Reference in New Issue
Block a user