From d85e2ead342a9245ab32b53bbb119d4d924af851 Mon Sep 17 00:00:00 2001 From: huluxia <2056300012@qq.com> Date: Sat, 8 Aug 2026 16:21:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=96=B0=E5=A2=9E=E6=88=91?= =?UTF-8?q?=E7=9A=84=E4=B8=AA=E4=BA=BA=E9=A1=B5=E9=9D=A2=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=AB=99=E7=82=B9=E5=AF=BC=E8=88=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增完整的我的页面，包含用户资料展示、使用统计和个人信息编辑功能 - 添加收藏和卡册的快捷入口网格 - 简化导航栏，将原分散的个人中心、我的收藏、我的卡册入口合并为单个「我的」标签 - 编写新页面对应的CSS样式并更新静态资源版本号 - 在数学人生页面添加葫芦侠行的快捷跳转入口 --- data/miniapp_v3.db | Bin 94208 -> 94208 bytes static/css/desktop.css | 15 +++++++++++++++ static/js/desktop.js | 34 +++++++++++++++++++++++++++++++--- templates/desktop.html | 17 +++++++++-------- 4 files changed, 55 insertions(+), 11 deletions(-) diff --git a/data/miniapp_v3.db b/data/miniapp_v3.db index e2156b544be9073bc695575e203bf0d5a121a20e..2d317c0e2e9623de39553d3e78b71da547b479ff 100644 GIT binary patch delta 1467 zcmai!-Afcv7{<+SVI{yuQ6wGWVU%BbkLd z7BT+l_=u46Gco0GdBE>hv&X+e^pg7`#OJPZca`x&M*qLz;WjI5dYu4@P5?zGJBT^~ zS#$y@Isp`&fZ6K=WYGzr=mb!70%orhkVPjThx*>)%6RE)1!ku!gV75O_d1Xplu{!2eu?o^G7k>Hm$9Z=d%`>>oUUnbi&b zLD!0zap?|j$6sJ|arhHLerKdnnw7U#kj!!yq(8&RMSS~N-K7%Vd^|Cav6y&=@ljIp z_NMSTSi@zE&J|la)#%kC8pUIy5lOy#?KzTJ=a_VkUt`kOU@0xNl^>TjC$E3NqpS@6 zbnvZ=CH-*cq_n$o3Ws3pQ_s*Wo|`@*nP1<)v)RN=>6qO!9GRVLSyxcg7YO}I=jjaX zrR_ARZ|Vhofd}^9*Z0+EDycbHog6rqFCStSJn7T_PJ(D)kvTCg0Q7Wn|mTW01qhWu{vmZ%%vYPD{WbPB&qe$G%o9(th;CkB>R{qM!NB(hNH8$412HQQvuu_yNPvcok&%_5DI!@wxbS2F;lh&z zn2VGwAky$;0pY@v1%wMv77)#dWC4+eCkqG{o-80-c(Qa%P|Vt& zaRNzt^2AJ(%#faiocbqgXTL#KteCR|nR`BGFEV#pE{fi$JY;uF*3C!eZYsz?aaB>_ zc_gDYdl#9aNOu*lMv|UvUxMO}wGmS zp{VAmM)t(y`_(Iu%-TG$Mixc$j#^~1Cs)>?IMca)Gm_>_4J-~K9DHXO_%HD<;jib9 z;r<)6yGp1+lUKmQB<^FZlX{^|4O8QC}2 I+;5ox05H6Ip8x;= diff --git a/static/css/desktop.css b/static/css/desktop.css index 32455fc..b07d8a6 100644 --- a/static/css/desktop.css +++ b/static/css/desktop.css @@ -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} diff --git a/static/js/desktop.js b/static/js/desktop.js index 583d9a1..982403f 100644 --- a/static/js/desktop.js +++ b/static/js/desktop.js @@ -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助教 👋

试试问我：学数学对学医有什么用？', 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= + '

👤 我的

'+ + '
'+esc(p.avatar_emoji||'葫')+'
'+esc(p.nickname||'游客用户')+'
ID: '+USER_ID+'
'+ + '
'+s.watch_count+'
观看次数
'+s.favorite_count+'
收藏数量
'+ + '
编辑资料
头像:
昵称:
'+ + '
'+ + '
❤️
我的收藏
已收藏的视频和知识卡片
→
'+ + '
🎴
我的卡册
收集全部16位数学人物 · '+cardState.owned.length+'/16
→
'+ + '
'; +} + // ===== Pet Experience ===== function getPet(){ let pet=null; @@ -923,6 +946,11 @@ function loadMathLife(){ (t.ready?'':'
敬请期待
')+ '').join('')+ ''+ + ''+ ' - - - - - - + +
Hulu Math
@@ -135,6 +131,11 @@
+ +
+
+
+ @@ -164,7 +165,7 @@ - +