feat: 新增战报弹窗与舰队模拟器，重构UI组件

新增 BattleReportDialog、SpyReportDialog、NumberWithTooltip 等组件，完善舰队模拟器功能。重构并引入 Sheet、Sidebar、Tooltip、Skeleton 等 UI 组件，优化界面结构。实现 battle.worker 支持战斗计算，增加 universeStore、fleetStorageLogic 等核心逻辑，完善多语言与类型定义。

docs/assets/AlertDialog-_72FqRCT.js

@@ -1 +0,0 @@
-import{Dt as e,G as t,J as n,K as r,St as i,U as a,X as o,Y as s,Z as c,jt as l,pt as u,q as d,st as f}from"./vendor-ui-DBxeWLyT.js";import{Bt as p,Rt as m}from"./index-Cch-Ig40.js";var h={key:0,class:`fixed inset-0 z-50 flex items-center justify-center`},g={class:`relative bg-card border rounded-lg shadow-lg p-6 max-w-md w-full mx-4 z-10`},_={class:`text-lg font-semibold mb-2`},v={class:`text-sm text-muted-foreground mb-6 whitespace-pre-line`},y={class:`flex justify-end gap-2`},b=c({__name:`AlertDialog`,setup(c,{expose:b}){let{t:x}=p(),S=i(!1),C=i(null),w=e=>{C.value=e,S.value=!0},T=()=>{C.value?.onConfirm&&C.value.onConfirm(),S.value=!1},E=()=>{S.value=!1};return b({show:w}),(i,c)=>(f(),r(a,{to:`body`},[S.value?(f(),n(`div`,h,[t(`div`,{class:`fixed inset-0 bg-black/50`,onClick:E}),t(`div`,g,[t(`h2`,_,l(C.value?.title),1),t(`p`,v,l(C.value?.message),1),t(`div`,y,[C.value?.onConfirm?(f(),r(e(m),{key:0,onClick:E,variant:`outline`},{default:u(()=>[s(l(e(x)(`common.cancel`)),1)]),_:1})):d(``,!0),o(e(m),{onClick:T,variant:`default`},{default:u(()=>[s(l(e(x)(`common.confirm`)),1)]),_:1})])])])):d(``,!0)]))}});export{b as t};

docs/assets/AlertDialog-vN9u2C5f.js

@@ -0,0 +1 @@
+import{At as e,Cn as t,Dt as n,Kt as r,Mt as i,Nt as a,On as o,Ot as s,hn as c,in as l,jt as u,kt as d,wt as f}from"./game-logic-B_TBzmsj.js";import{M as p,P as m}from"./index-BLxCTx9W.js";var h={key:0,class:`fixed inset-0 z-50 flex items-center justify-center`},g={class:`relative bg-card border rounded-lg shadow-lg p-6 max-w-md w-full mx-4 z-10`},_={class:`text-lg font-semibold mb-2`},v={class:`text-sm text-muted-foreground mb-6 whitespace-pre-line`},y={class:`flex justify-end gap-2`},b=a({__name:`AlertDialog`,setup(a,{expose:b}){let{t:x}=m(),S=c(!1),C=c(null),w=e=>{C.value=e,S.value=!0},T=()=>{C.value?.onConfirm&&C.value.onConfirm(),S.value=!1},E=()=>{S.value=!1};return b({show:w}),(a,c)=>(r(),s(f,{to:`body`},[S.value?(r(),e(`div`,h,[n(`div`,{class:`fixed inset-0 bg-black/50`,onClick:E}),n(`div`,g,[n(`h2`,_,o(C.value?.title),1),n(`p`,v,o(C.value?.message),1),n(`div`,y,[C.value?.onConfirm?(r(),s(t(p),{key:0,onClick:E,variant:`outline`},{default:l(()=>[u(o(t(x)(`common.cancel`)),1)]),_:1})):d(``,!0),i(t(p),{onClick:T,variant:`default`},{default:l(()=>[u(o(t(x)(`common.confirm`)),1)]),_:1})])])])):d(``,!0)]))}});export{b as t};

docs/assets/BuildingsView-zu1MPaUF.js

@@ -0,0 +1,2 @@
+import{At as e,Cn as t,Ct as n,Dt as r,Et as i,Jt as a,Kt as o,M as s,Mt as c,N as ee,Nt as l,O as u,On as d,Ot as f,P as p,Tn as m,ct as te,dt as ne,hn as h,in as g,j as _,jt as v,k as re,kt as y,lt as ie,ut as ae}from"./game-logic-B_TBzmsj.js";import"./vendor-pinia-C_5mk-F1.js";import"./vendor-crypto-CQM8pryk.js";import"./game-i18n-DEf7ySVe.js";import"./vendor-others-DiSZfaku.js";import"./vendor-reka-ui-ICOW9z5F.js";import"./vendor-utils-BlvnUqQX.js";import"./vendor-vueuse-CXzdKKhY.js";import{M as b,z as oe}from"./vendor-icons-B6ER66fi.js";import{t as se}from"./CardDescription-CtUtXM5o.js";import{h as ce,u as x}from"./game-config-D-D7cMgJ.js";import{A as le,I as ue,M as S,P as C,_ as w,c as T,i as E,l as D,o as O,r as k,s as A,u as j,w as M}from"./index-BLxCTx9W.js";import{t as N}from"./useGameConfig-chMIsHFg.js";import{t as P}from"./AlertDialog-vN9u2C5f.js";import{t as F}from"./CardUnlockOverlay-BVmeYgHN.js";var I={key:0,class:`container mx-auto p-4 sm:p-6`},L={class:`flex justify-between items-center mb-4 sm:mb-6 gap-2`},R={class:`text-2xl sm:text-3xl font-bold`},z={class:`text-xs sm:text-sm`},B={class:`flex items-center gap-1.5 text-muted-foreground`},V={class:`grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4`},H={class:`flex justify-between items-start gap-2`},U={class:`min-w-0 flex-1`},de={class:`space-y-3`},fe={class:`text-xs sm:text-sm space-y-1.5 sm:space-y-2`},pe={class:`text-muted-foreground mb-1 sm:mb-2`},me={class:`space-y-1 sm:space-y-1.5`},he={class:`flex items-center gap-1.5 sm:gap-2`},ge={class:`text-xs`},_e={class:`flex items-center gap-1.5 sm:gap-2`},ve={class:`text-xs`},ye={class:`flex items-center gap-1.5 sm:gap-2`},be={class:`text-xs`},xe={class:`text-xs sm:text-sm space-y-0.5 sm:space-y-1`},Se={class:`flex items-center gap-1.5 text-muted-foreground`},Ce={class:`flex items-center gap-1.5 text-muted-foreground`},we={key:1,class:`text-xs text-muted-foreground`},Te={class:`flex gap-2 flex-wrap`},W=l({__name:`BuildingsView`,setup(l){let W=ue(),Ee=w(),{t:G}=C(),{BUILDINGS:K,TECHNOLOGIES:De}=N(),q=i(()=>W.currentPlanet),J=h(null),Oe=i(()=>q.value?Object.values(x).filter(e=>{let t=K.value[e];return q.value.isMoon?t.moonOnly===!0:t.moonOnly!==!0}):[]),ke=e=>{if(!W.currentPlanet||!s(W.currentPlanet,e,W.player.technologies,W.player.officers).valid)return!1;let t=re(W.currentPlanet,e,W.player.officers);return W.currentPlanet.buildQueue.push(t),!0},Ae=e=>ne(e),je=e=>{if(!X(e)){J.value?.show({title:G(`common.requirementsNotMet`),message:Z(e)});return}ke(e)||J.value?.show({title:G(`buildingsView.upgradeFailed`),message:G(`buildingsView.upgradeFailedMessage`)})},Y=e=>q.value?.buildings[e]||0,X=e=>{if(!q.value)return!1;let t=K.value[e],n=p(t,Y(e)+1);return!n||Object.keys(n).length===0?!0:ee(q.value,W.player.technologies,n)},Me=e=>{if(!q.value)return G(`buildingsView.upgrade`);let t=K.value[e],n=Y(e);return t.maxLevel!==void 0&&n>=t.maxLevel?G(`buildingsView.maxLevelReached`):q.value.buildQueue.length>0||X(e)?G(`buildingsView.upgrade`):G(`buildingsView.requirementsNotMet`)},Z=e=>{let t=K.value[e],n=p(t,Y(e)+1);if(!n||!q.value)return``;let r=[];for(let[e,t]of Object.entries(n))if(Object.values(x).includes(e)){let n=e,i=q.value.buildings[n]||0,a=K.value[n]?.name||n,o=i>=t?`✓`:`✗`;r.push(`${o} ${a}: Lv ${t} (${G(`common.current`)}: Lv ${i})`)}else if(Object.values(ce).includes(e)){let n=e,i=W.player.technologies[n]||0,a=De.value[n]?.name||n,o=i>=t?`✓`:`✗`;r.push(`${o} ${a}: Lv ${t} (${G(`common.current`)}: Lv ${i})`)}return r.join(`
+`)},Ne=e=>{if(!q.value)return!1;let t=K.value[e],n=Y(e);if(t.maxLevel!==void 0&&n>=t.maxLevel||q.value.buildQueue.length>0||!s(q.value,e,W.player.technologies,W.player.officers).valid)return!1;let r=Q(e,n+1);return q.value.resources.metal>=r.metal&&q.value.resources.crystal>=r.crystal&&q.value.resources.deuterium>=r.deuterium},Q=(e,t)=>te(e,t),Pe=(e,t)=>ie(e,t),Fe=e=>{if(!W.currentPlanet||!_(W.currentPlanet,e,W.player.officers).valid)return!1;let t=u(W.currentPlanet,e,W.player.officers);return W.currentPlanet.buildQueue.push(t),!0},Ie=e=>{Fe(e)||J.value?.show({title:G(`buildingsView.demolishFailed`),message:G(`buildingsView.demolishFailedMessage`)})},Le=e=>!q.value||q.value.buildQueue.length>0?!1:Y(e)>0,$=e=>ae(e,Y(e));return(i,s)=>q.value?(o(),e(`div`,I,[r(`div`,L,[r(`h1`,R,d(t(G)(`buildingsView.title`)),1),r(`div`,z,[r(`span`,B,[c(t(b),{size:14}),v(` `+d(Ae(q.value))+` / `+d(q.value.maxSpace),1)])])]),r(`div`,V,[(o(!0),e(n,null,a(Oe.value,n=>(o(),f(t(j),{key:n,class:`relative`},{default:g(()=>[c(F,{requirements:t(K)[n].requirements,currentLevel:Y(n)},null,8,[`requirements`,`currentLevel`]),c(t(T),null,{default:g(()=>[r(`div`,H,[r(`div`,U,[c(t(A),{class:`text-base sm:text-lg cursor-pointer hover:text-primary transition-colors`,onClick:e=>t(Ee).openBuilding(n,Y(n))},{default:g(()=>[v(d(t(K)[n].name),1)]),_:2},1032,[`onClick`]),c(t(se),{class:`text-xs sm:text-sm`},{default:g(()=>[v(d(t(K)[n].description),1)]),_:2},1024)]),c(t(le),{variant:`secondary`,class:`text-xs whitespace-nowrap flex-shrink-0`},{default:g(()=>[v(`Lv `+d(Y(n)),1)]),_:2},1024)])]),_:2},1024),c(t(D),null,{default:g(()=>[r(`div`,de,[r(`div`,fe,[r(`p`,pe,d(t(G)(`buildingsView.upgradeCost`))+`:`,1),r(`div`,me,[r(`div`,he,[c(M,{type:`metal`,size:`sm`}),r(`span`,ge,d(t(G)(`resources.metal`))+`:`,1),r(`span`,{class:m([`font-medium text-xs sm:text-sm`,t(O)(q.value.resources.metal,Q(n,Y(n)+1).metal)])},d(t(k)(Q(n,Y(n)+1).metal)),3)]),r(`div`,_e,[c(M,{type:`crystal`,size:`sm`}),r(`span`,ve,d(t(G)(`resources.crystal`))+`:`,1),r(`span`,{class:m([`font-medium text-xs sm:text-sm`,t(O)(q.value.resources.crystal,Q(n,Y(n)+1).crystal)])},d(t(k)(Q(n,Y(n)+1).crystal)),3)]),r(`div`,ye,[c(M,{type:`deuterium`,size:`sm`}),r(`span`,be,d(t(G)(`resources.deuterium`))+`:`,1),r(`span`,{class:m([`font-medium text-xs sm:text-sm`,t(O)(q.value.resources.deuterium,Q(n,Y(n)+1).deuterium)])},d(t(k)(Q(n,Y(n)+1).deuterium)),3)])])]),r(`div`,xe,[r(`div`,Se,[c(t(oe),{size:14,class:`flex-shrink-0`}),r(`span`,null,d(t(E)(Pe(n,Y(n)+1))),1)]),r(`div`,Ce,[c(t(b),{size:14,class:`flex-shrink-0`}),r(`span`,null,d(t(K)[n].spaceUsage),1)])]),c(t(S),{onClick:e=>je(n),disabled:!Ne(n),class:`w-full`},{default:g(()=>[v(d(Me(n)),1)]),_:2},1032,[`onClick`,`disabled`]),Y(n)>0?(o(),f(t(S),{key:0,onClick:e=>Ie(n),disabled:!Le(n),variant:`destructive`,class:`w-full`},{default:g(()=>[v(d(t(G)(`buildingsView.demolish`)),1)]),_:1},8,[`onClick`,`disabled`])):y(``,!0),Y(n)>0?(o(),e(`div`,we,[r(`p`,null,d(t(G)(`buildingsView.demolishRefund`))+`:`,1),r(`div`,Te,[r(`span`,null,d(t(k)($(n).metal))+` `+d(t(G)(`resources.metal`)),1),r(`span`,null,d(t(k)($(n).crystal))+` `+d(t(G)(`resources.crystal`)),1),r(`span`,null,d(t(k)($(n).deuterium))+` `+d(t(G)(`resources.deuterium`)),1)])])):y(``,!0)])]),_:2},1024)]),_:2},1024))),128))]),c(P,{ref_key:`alertDialog`,ref:J},null,512)])):y(``,!0)}});export{W as default};

docs/assets/CardDescription-CRV0m8La.js

@@ -1 +0,0 @@
-import{Dt as e,J as t,Ot as n,Z as r,st as i,ut as a}from"./vendor-ui-DBxeWLyT.js";import{zt as o}from"./index-Cch-Ig40.js";var s=r({__name:`CardDescription`,props:{class:{}},setup(r){let s=r;return(r,c)=>(i(),t(`p`,{"data-slot":`card-description`,class:n(e(o)(`text-muted-foreground text-sm`,s.class))},[a(r.$slots,`default`)],2))}});export{s as t};

docs/assets/CardDescription-CtUtXM5o.js

@@ -0,0 +1 @@
+import{At as e,Cn as t,Kt as n,Nt as r,Tn as i,Yt as a}from"./game-logic-B_TBzmsj.js";import{N as o}from"./index-BLxCTx9W.js";var s=r({__name:`CardDescription`,props:{class:{}},setup(r){let s=r;return(r,c)=>(n(),e(`p`,{"data-slot":`card-description`,class:i(t(o)(`text-muted-foreground text-sm`,s.class))},[a(r.$slots,`default`)],2))}});export{s as t};

docs/assets/CardUnlockOverlay-BVmeYgHN.js

@@ -0,0 +1,2 @@
+import{At as e,Cn as t,Dt as n,Et as r,Kt as i,Mt as a,N as o,Nt as s,On as c,hn as l,in as u,jt as d,kt as f}from"./game-logic-B_TBzmsj.js";import{D as p}from"./vendor-icons-B6ER66fi.js";import{h as m,u as h}from"./game-config-D-D7cMgJ.js";import{I as g,M as _,P as v}from"./index-BLxCTx9W.js";import{t as y}from"./useGameConfig-chMIsHFg.js";import{t as b}from"./AlertDialog-vN9u2C5f.js";var x={key:0,class:`absolute inset-0 z-10 bg-background/70 backdrop-blur-[2px] rounded-lg flex items-center justify-center`},S={class:`text-center p-4 space-y-2`},C={class:`flex justify-center`},w={class:`rounded-full bg-muted p-2`},T={class:`text-xs font-medium text-muted-foreground`},E=s({__name:`CardUnlockOverlay`,props:{requirements:{},currentLevel:{}},setup(s){let E=s,D=g(),{t:O}=v(),{BUILDINGS:k,TECHNOLOGIES:A}=y(),j=l(null),M=r(()=>E.currentLevel!==void 0&&E.currentLevel>0||!E.requirements||!D.currentPlanet?!0:o(D.currentPlanet,D.player.technologies,E.requirements)),N=()=>{if(!E.requirements||!D.currentPlanet)return``;let e=[];for(let[t,n]of Object.entries(E.requirements))if(Object.values(h).includes(t)){let r=t,i=D.currentPlanet.buildings[r]||0,a=k.value[r]?.name||r,o=i>=n?`✓`:`✗`;e.push(`${o} ${a}: Lv ${n} (${O(`common.current`)}: Lv ${i})`)}else if(Object.values(m).includes(t)){let r=t,i=D.player.technologies[r]||0,a=A.value[r]?.name||r,o=i>=n?`✓`:`✗`;e.push(`${o} ${a}: Lv ${n} (${O(`common.current`)}: Lv ${i})`)}return e.join(`
+`)},P=()=>{j.value?.show({title:O(`common.requirementsNotMet`),message:N()})};return(r,o)=>M.value?f(``,!0):(i(),e(`div`,x,[n(`div`,S,[n(`div`,C,[n(`div`,w,[a(t(p),{size:20,class:`text-muted-foreground`})])]),n(`p`,T,c(t(O)(`common.locked`)),1),a(t(_),{variant:`outline`,size:`sm`,onClick:P,class:`text-xs`},{default:u(()=>[d(c(t(O)(`common.viewRequirements`)),1)]),_:1})]),a(b,{ref_key:`requirementsDialog`,ref:j},null,512)]))}});export{E as t};

docs/assets/CardUnlockOverlay-SeY-L1Ut.js

@@ -1,2 +0,0 @@
-import{Dt as e,G as t,J as n,St as r,W as i,X as a,Y as o,Z as s,jt as c,pt as l,q as u,st as d}from"./vendor-ui-DBxeWLyT.js";import{n as f}from"./UnlockRequirement-BdFx1RC0.js";import{Bt as p,Rt as m,Vt as h,ct as g,rt as _,w as v}from"./index-Cch-Ig40.js";import{t as y}from"./useGameConfig-D2EZdt1x.js";import{t as b}from"./AlertDialog-_72FqRCT.js";var x={key:0,class:`absolute inset-0 z-10 bg-background/70 backdrop-blur-[2px] rounded-lg flex items-center justify-center`},S={class:`text-center p-4 space-y-2`},C={class:`flex justify-center`},w={class:`rounded-full bg-muted p-2`},T={class:`text-xs font-medium text-muted-foreground`},E=s({__name:`CardUnlockOverlay`,props:{requirements:{}},setup(s){let E=s,D=h(),{t:O}=p(),{BUILDINGS:k,TECHNOLOGIES:A}=y(),j=r(null),M=i(()=>!E.requirements||!D.currentPlanet?!0:v(D.currentPlanet,D.player.technologies,E.requirements)),N=()=>{if(!E.requirements||!D.currentPlanet)return``;let e=[];for(let[t,n]of Object.entries(E.requirements))if(Object.values(_).includes(t)){let r=t,i=D.currentPlanet.buildings[r]||0,a=k.value[r]?.name||r,o=i>=n?`✓`:`✗`;e.push(`${o} ${a}: Lv ${n} (${O(`common.current`)}: Lv ${i})`)}else if(Object.values(g).includes(t)){let r=t,i=D.player.technologies[r]||0,a=A.value[r]?.name||r,o=i>=n?`✓`:`✗`;e.push(`${o} ${a}: Lv ${n} (${O(`common.current`)}: Lv ${i})`)}return e.join(`
-`)},P=()=>{j.value?.show({title:O(`common.requirementsNotMet`),message:N()})};return(r,i)=>M.value?u(``,!0):(d(),n(`div`,x,[t(`div`,S,[t(`div`,C,[t(`div`,w,[a(e(f),{size:20,class:`text-muted-foreground`})])]),t(`p`,T,c(e(O)(`common.locked`)),1),a(e(m),{variant:`outline`,size:`sm`,onClick:P,class:`text-xs`},{default:l(()=>[o(c(e(O)(`common.viewRequirements`)),1)]),_:1})]),a(b,{ref_key:`requirementsDialog`,ref:j},null,512)]))}});export{E as t};

docs/assets/OverviewView-CmVFZWGR.js

@@ -1 +0,0 @@
-import{Dt as e,G as t,H as n,J as r,K as i,Ot as a,W as o,X as s,Y as c,Z as l,jt as u,lt as d,pt as f,q as p,st as m}from"./vendor-ui-DBxeWLyT.js";import"./vendor-vue-Bqq1sBNf.js";import{t as h}from"./CardDescription-CRV0m8La.js";import{Bt as g,D as ee,E as te,F as _,It as v,M as y,Pt as b,Rt as x,U as S,V as C,Vt as w,_t as T,dt as E,ft as D,gt as O,ht as k,j as A,lt as j,mt as M,pt as N,ut as P,vt as F}from"./index-Cch-Ig40.js";import{t as I}from"./useGameConfig-D2EZdt1x.js";var L={key:0,class:`container mx-auto p-4 sm:p-6 space-y-4 sm:space-y-6`},R={class:`text-center`},z={class:`text-2xl sm:text-3xl font-bold mb-1 sm:mb-2 flex items-center justify-center gap-2`},B={class:`text-xs sm:text-sm text-muted-foreground`},V={key:0,class:`mt-2`},H={key:1,class:`mt-2`},U={class:`flex items-center gap-2`},W={class:`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4`},G={class:`text-xs sm:text-sm text-muted-foreground`},K={class:`text-lg sm:text-xl font-bold`},q=l({__name:`OverviewView`,setup(l){let q=w(),{t:J}=g(),{SHIPS:Y}=I(),X=o(()=>q.currentPlanet),Z=o(()=>X.value?ee(X.value,q.player.officers):null),Q=o(()=>X.value?te(X.value,q.player.officers):null),ne=o(()=>{if(!X.value)return 0;let e=_(q.player.officers,Date.now());return y(X.value,{energyProductionBonus:e.energyProductionBonus})}),re=o(()=>X.value?A(X.value):0),ie=[{key:`metal`},{key:`crystal`},{key:`deuterium`},{key:`darkMatter`},{key:`energy`}],$=o(()=>!X.value||X.value.isMoon?null:ae(X.value.id)),ae=e=>q.player.planets.find(t=>t.isMoon&&t.parentPlanetId===e)||null,oe=()=>{$.value&&(q.currentPlanetId=$.value.id)},se=()=>{X.value?.parentPlanetId&&(q.currentPlanetId=X.value.parentPlanetId)};return(o,l)=>X.value?(m(),r(`div`,L,[t(`div`,R,[t(`h1`,z,[c(u(X.value.name)+` `,1),X.value.isMoon?(m(),i(e(v),{key:0,variant:`secondary`},{default:f(()=>[c(u(e(J)(`planet.moon`)),1)]),_:1})):p(``,!0)]),t(`p`,B,u(e(J)(`planet.position`))+`: [`+u(X.value.position.galaxy)+`:`+u(X.value.position.system)+`:`+u(X.value.position.position)+`] `,1),!X.value.isMoon&&$.value?(m(),r(`div`,V,[s(e(x),{onClick:oe,variant:`outline`,size:`sm`},{default:f(()=>[l[0]||=t(`span`,{class:`mr-2`},`🌙`,-1),c(` `+u(e(J)(`planet.switchToMoon`)),1)]),_:1})])):p(``,!0),X.value.isMoon?(m(),r(`div`,H,[s(e(x),{onClick:se,variant:`outline`,size:`sm`},{default:f(()=>[c(u(e(J)(`planet.backToPlanet`)),1)]),_:1})])):p(``,!0)]),s(e(D),null,{default:f(()=>[s(e(P),null,{default:f(()=>[s(e(j),null,{default:f(()=>[c(u(e(J)(`overview.resourceOverview`)),1)]),_:1})]),_:1}),s(e(E),null,{default:f(()=>[s(e(F),null,{default:f(()=>[s(e(N),null,{default:f(()=>[s(e(k),null,{default:f(()=>[s(e(M),null,{default:f(()=>[c(u(e(J)(`common.resourceType`)),1)]),_:1}),s(e(M),{class:`text-right`},{default:f(()=>[c(u(e(J)(`resources.current`)),1)]),_:1}),s(e(M),{class:`text-right`},{default:f(()=>[c(u(e(J)(`resources.max`)),1)]),_:1}),s(e(M),{class:`text-right`},{default:f(()=>[c(u(e(J)(`resources.production`))+u(e(J)(`resources.perHour`)),1)]),_:1})]),_:1})]),_:1}),s(e(T),null,{default:f(()=>[(m(),r(n,null,d(ie,i=>s(e(k),{key:i.key},{default:f(()=>[s(e(O),{class:`font-medium`},{default:f(()=>[t(`div`,U,[s(b,{type:i.key,size:`sm`},null,8,[`type`]),c(` `+u(e(J)(`resources.${i.key}`)),1)])]),_:2},1024),i.key===`energy`?(m(),r(n,{key:0},[s(e(O),{class:a([`text-right`,X.value.resources[i.key]>=0?`text-green-600 dark:text-green-400`:`text-red-600 dark:text-red-400`])},{default:f(()=>[c(u(e(C)(X.value.resources[i.key])),1)]),_:2},1032,[`class`]),s(e(O),{class:`text-right text-muted-foreground`},{default:f(()=>[...l[1]||=[c(`-`,-1)]]),_:1}),s(e(O),{class:`text-right text-muted-foreground`},{default:f(()=>[c(u(e(C)(ne.value))+` / `+u(e(C)(re.value)),1)]),_:1})],64)):(m(),r(n,{key:1},[s(e(O),{class:a([`text-right`,e(S)(X.value.resources[i.key],Q.value?.[i.key]||1/0)])},{default:f(()=>[c(u(e(C)(X.value.resources[i.key])),1)]),_:2},1032,[`class`]),s(e(O),{class:`text-right text-muted-foreground`},{default:f(()=>[c(u(e(C)(Q.value?.[i.key]||0)),1)]),_:2},1024),s(e(O),{class:`text-right text-muted-foreground`},{default:f(()=>[c(u(e(C)(Z.value?.[i.key]||0)),1)]),_:2},1024)],64))]),_:2},1024)),64))]),_:1})]),_:1})]),_:1})]),_:1}),s(e(D),null,{default:f(()=>[s(e(P),null,{default:f(()=>[s(e(j),null,{default:f(()=>[c(u(e(J)(`overview.fleetInfo`)),1)]),_:1}),s(e(h),null,{default:f(()=>[c(u(e(J)(`overview.currentShips`)),1)]),_:1})]),_:1}),s(e(E),null,{default:f(()=>[t(`div`,W,[(m(!0),r(n,null,d(X.value.fleet,(n,i)=>(m(),r(`div`,{key:i},[t(`p`,G,u(e(Y)[i].name),1),t(`p`,K,u(n),1)]))),128))])]),_:1})]),_:1})])):p(``,!0)}});export{q as default};

docs/assets/ResearchView-9cX9kBtt.js

@@ -0,0 +1,2 @@
+import{At as e,Cn as t,Ct as n,Dt as r,E as i,Et as a,Jt as o,Kt as s,Mt as c,N as l,Nt as u,On as d,Ot as ee,P as f,T as p,Tn as m,gt as te,hn as h,in as g,jt as _,kt as ne}from"./game-logic-B_TBzmsj.js";import"./vendor-pinia-C_5mk-F1.js";import"./vendor-vue-router-_-a8jZbv.js";import"./vendor-crypto-CQM8pryk.js";import"./game-i18n-DEf7ySVe.js";import"./vendor-others-DiSZfaku.js";import"./vendor-reka-ui-ICOW9z5F.js";import"./vendor-utils-BlvnUqQX.js";import"./vendor-vueuse-CXzdKKhY.js";import"./vendor-icons-B6ER66fi.js";import{t as re}from"./CardDescription-CtUtXM5o.js";import{h as v,u as y}from"./game-config-D-D7cMgJ.js";import{A as ie,I as ae,M as oe,P as se,_ as ce,c as le,l as b,o as x,r as S,s as C,u as w,w as T}from"./index-BLxCTx9W.js";import{t as E}from"./useGameConfig-chMIsHFg.js";import{t as D}from"./AlertDialog-vN9u2C5f.js";import{t as O}from"./CardUnlockOverlay-BVmeYgHN.js";import{t as k}from"./UnlockRequirement-CoN2_Hgq.js";var A={key:0,class:`container mx-auto p-4 sm:p-6`},j={class:`text-2xl sm:text-3xl font-bold mb-4 sm:mb-6`},M={class:`grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4`},N={class:`flex justify-between items-start gap-2`},P={class:`min-w-0 flex-1`},F={class:`space-y-2.5 sm:space-y-3`},I={class:`text-xs sm:text-sm space-y-1.5 sm:space-y-2`},L={class:`text-muted-foreground mb-1 sm:mb-2`},R={class:`space-y-1 sm:space-y-1.5`},z={class:`flex items-center gap-1.5 sm:gap-2`},ue={class:`text-xs`},B={class:`flex items-center gap-1.5 sm:gap-2`},V={class:`text-xs`},H={class:`flex items-center gap-1.5 sm:gap-2`},U={class:`text-xs`},W=u({__name:`ResearchView`,setup(u){let W=ae(),de=ce(),{t:G}=se(),{TECHNOLOGIES:K,BUILDINGS:fe}=E(),q=a(()=>W.currentPlanet),J=a(()=>W.player),Y=h(null),X=e=>{if(!W.currentPlanet||!i(W.currentPlanet,e,W.player.technologies,W.player.researchQueue).valid)return!1;let t=W.player.technologies[e]||0,{queueItem:n}=p(W.currentPlanet,e,t,W.player.officers);return W.player.researchQueue.push(n),!0},Z=e=>{if(!q.value)return!1;let t=K.value[e],n=f(t,Q(e)+1);return!n||Object.keys(n).length===0?!0:l(q.value,W.player.technologies,n)},pe=e=>{if(!q.value)return G(`researchView.research`);let t=K.value[e],n=Q(e);return t.maxLevel!==void 0&&n>=t.maxLevel?G(`researchView.maxLevelReached`):J.value.researchQueue.length>0||Z(e)?G(`researchView.research`):G(`buildingsView.requirementsNotMet`)},me=e=>{let t=K.value[e],n=f(t,Q(e)+1);if(!n||!q.value)return``;let r=[];for(let[e,t]of Object.entries(n))if(Object.values(y).includes(e)){let n=e,i=q.value.buildings[n]||0,a=fe.value[n]?.name||n,o=i>=t?`✓`:`✗`;r.push(`${o} ${a}: Lv ${t} (${G(`common.current`)}: Lv ${i})`)}else if(Object.values(v).includes(e)){let n=e,i=W.player.technologies[n]||0,a=K.value[n]?.name||n,o=i>=t?`✓`:`✗`;r.push(`${o} ${a}: Lv ${t} (${G(`common.current`)}: Lv ${i})`)}return r.join(`
+`)},he=e=>{if(!Z(e)){Y.value?.show({title:G(`common.requirementsNotMet`),message:me(e)});return}X(e)||Y.value?.show({title:G(`researchView.researchFailed`),message:G(`researchView.researchFailedMessage`)})},Q=e=>J.value.technologies[e]||0,ge=e=>{if(!q.value)return!1;let t=K.value[e],n=Q(e);if(t.maxLevel!==void 0&&n>=t.maxLevel||J.value.researchQueue.length>0)return!1;let r=$(e,n+1);return l(q.value,W.player.technologies,t.requirements)&&q.value.resources.metal>=r.metal&&q.value.resources.crystal>=r.crystal&&q.value.resources.deuterium>=r.deuterium},$=(e,t)=>te(e,t);return(i,a)=>q.value?(s(),e(`div`,A,[c(k,{"required-building":t(y).ResearchLab,"required-level":1},null,8,[`required-building`]),r(`h1`,j,d(t(G)(`researchView.title`)),1),r(`div`,M,[(s(!0),e(n,null,o(Object.values(t(v)),e=>(s(),ee(t(w),{key:e,class:`relative`},{default:g(()=>[c(O,{requirements:t(K)[e].requirements,currentLevel:Q(e)},null,8,[`requirements`,`currentLevel`]),c(t(le),null,{default:g(()=>[r(`div`,N,[r(`div`,P,[c(t(C),{class:`text-base sm:text-lg cursor-pointer hover:text-primary transition-colors`,onClick:n=>t(de).openTechnology(e,Q(e))},{default:g(()=>[_(d(t(K)[e].name),1)]),_:2},1032,[`onClick`]),c(t(re),{class:`text-xs sm:text-sm`},{default:g(()=>[_(d(t(K)[e].description),1)]),_:2},1024)]),c(t(ie),{variant:`secondary`,class:`text-xs whitespace-nowrap flex-shrink-0`},{default:g(()=>[_(`Lv `+d(Q(e)),1)]),_:2},1024)])]),_:2},1024),c(t(b),null,{default:g(()=>[r(`div`,F,[r(`div`,I,[r(`p`,L,d(t(G)(`researchView.researchCost`))+`:`,1),r(`div`,R,[r(`div`,z,[c(T,{type:`metal`,size:`sm`}),r(`span`,ue,d(t(G)(`resources.metal`))+`:`,1),r(`span`,{class:m([`font-medium text-xs sm:text-sm`,t(x)(q.value.resources.metal,$(e,Q(e)+1).metal)])},d(t(S)($(e,Q(e)+1).metal)),3)]),r(`div`,B,[c(T,{type:`crystal`,size:`sm`}),r(`span`,V,d(t(G)(`resources.crystal`))+`:`,1),r(`span`,{class:m([`font-medium text-xs sm:text-sm`,t(x)(q.value.resources.crystal,$(e,Q(e)+1).crystal)])},d(t(S)($(e,Q(e)+1).crystal)),3)]),r(`div`,H,[c(T,{type:`deuterium`,size:`sm`}),r(`span`,U,d(t(G)(`resources.deuterium`))+`:`,1),r(`span`,{class:m([`font-medium text-xs sm:text-sm`,t(x)(q.value.resources.deuterium,$(e,Q(e)+1).deuterium)])},d(t(S)($(e,Q(e)+1).deuterium)),3)])])]),c(t(oe),{onClick:t=>he(e),disabled:!ge(e),class:`w-full`},{default:g(()=>[_(d(pe(e)),1)]),_:2},1032,[`onClick`,`disabled`])])]),_:2},1024)]),_:2},1024))),128))]),c(D,{ref_key:`alertDialog`,ref:Y},null,512)])):ne(``,!0)}});export{W as default};

docs/assets/ResearchView-BnXltulQ.js

@@ -1 +0,0 @@
-import{Dt as e,G as t,H as n,J as r,K as ee,Ot as i,St as te,W as a,X as o,Y as s,Z as c,jt as l,lt as u,pt as d,q as ne,st as f}from"./vendor-ui-DBxeWLyT.js";import"./vendor-vue-Bqq1sBNf.js";import{t as re}from"./UnlockRequirement-BdFx1RC0.js";import{t as ie}from"./CardDescription-CRV0m8La.js";import{Bt as ae,It as p,Pt as m,Rt as h,V as g,Vt as oe,W as _,Z as v,ct as y,dt as b,ft as x,lt as S,rt as C,ut as w,v as T,w as E,y as D,yt as O}from"./index-Cch-Ig40.js";import{t as k}from"./useGameConfig-D2EZdt1x.js";import{t as A}from"./AlertDialog-_72FqRCT.js";import{t as j}from"./CardUnlockOverlay-SeY-L1Ut.js";var M={key:0,class:`container mx-auto p-4 sm:p-6`},N={class:`text-2xl sm:text-3xl font-bold mb-4 sm:mb-6`},P={class:`grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4`},F={class:`flex justify-between items-start gap-2`},se={class:`min-w-0 flex-1`},I={class:`space-y-2.5 sm:space-y-3`},L={class:`text-xs sm:text-sm space-y-1.5 sm:space-y-2`},R={class:`text-muted-foreground mb-1 sm:mb-2`},z={class:`space-y-1 sm:space-y-1.5`},B={class:`flex items-center gap-1.5 sm:gap-2`},V={class:`text-xs`},H={class:`flex items-center gap-1.5 sm:gap-2`},U={class:`text-xs`},W={class:`flex items-center gap-1.5 sm:gap-2`},G={class:`text-xs`},K=c({__name:`ResearchView`,setup(c){let K=oe(),ce=O(),{t:q}=ae(),{TECHNOLOGIES:J}=k(),Y=a(()=>K.currentPlanet),X=a(()=>K.player),Z=te(null),le=e=>{if(!K.currentPlanet||!D(K.currentPlanet,e,K.player.technologies,K.player.researchQueue).valid)return!1;let t=K.player.technologies[e]||0,{queueItem:n}=T(K.currentPlanet,e,t,K.player.officers);return K.player.researchQueue.push(n),!0},ue=e=>{le(e)||Z.value?.show({title:q(`researchView.researchFailed`),message:q(`researchView.researchFailedMessage`)})},Q=e=>X.value.technologies[e]||0,de=e=>{if(!Y.value||X.value.researchQueue.length>0)return!1;let t=J.value[e],n=$(e,Q(e)+1);return E(Y.value,K.player.technologies,t.requirements)&&Y.value.resources.metal>=n.metal&&Y.value.resources.crystal>=n.crystal&&Y.value.resources.deuterium>=n.deuterium},$=(e,t)=>v(e,t);return(te,a)=>Y.value?(f(),r(`div`,M,[o(re,{"required-building":e(C).ResearchLab,"required-level":1},null,8,[`required-building`]),t(`h1`,N,l(e(q)(`researchView.title`)),1),t(`div`,P,[(f(!0),r(n,null,u(Object.values(e(y)),n=>(f(),ee(e(x),{key:n,class:`relative`},{default:d(()=>[o(j,{requirements:e(J)[n].requirements},null,8,[`requirements`]),o(e(w),null,{default:d(()=>[t(`div`,F,[t(`div`,se,[o(e(S),{class:`text-base sm:text-lg cursor-pointer hover:text-primary transition-colors`,onClick:t=>e(ce).openTechnology(n,Q(n))},{default:d(()=>[s(l(e(J)[n].name),1)]),_:2},1032,[`onClick`]),o(e(ie),{class:`text-xs sm:text-sm`},{default:d(()=>[s(l(e(J)[n].description),1)]),_:2},1024)]),o(e(p),{variant:`secondary`,class:`text-xs whitespace-nowrap flex-shrink-0`},{default:d(()=>[s(`Lv `+l(Q(n)),1)]),_:2},1024)])]),_:2},1024),o(e(b),null,{default:d(()=>[t(`div`,I,[t(`div`,L,[t(`p`,R,l(e(q)(`researchView.researchCost`))+`:`,1),t(`div`,z,[t(`div`,B,[o(m,{type:`metal`,size:`sm`}),t(`span`,V,l(e(q)(`resources.metal`))+`:`,1),t(`span`,{class:i([`font-medium text-xs sm:text-sm`,e(_)(Y.value.resources.metal,$(n,Q(n)+1).metal)])},l(e(g)($(n,Q(n)+1).metal)),3)]),t(`div`,H,[o(m,{type:`crystal`,size:`sm`}),t(`span`,U,l(e(q)(`resources.crystal`))+`:`,1),t(`span`,{class:i([`font-medium text-xs sm:text-sm`,e(_)(Y.value.resources.crystal,$(n,Q(n)+1).crystal)])},l(e(g)($(n,Q(n)+1).crystal)),3)]),t(`div`,W,[o(m,{type:`deuterium`,size:`sm`}),t(`span`,G,l(e(q)(`resources.deuterium`))+`:`,1),t(`span`,{class:i([`font-medium text-xs sm:text-sm`,e(_)(Y.value.resources.deuterium,$(n,Q(n)+1).deuterium)])},l(e(g)($(n,Q(n)+1).deuterium)),3)])])]),o(e(h),{onClick:e=>ue(n),disabled:!de(n),class:`w-full`},{default:d(()=>[s(l(e(q)(`researchView.research`)),1)]),_:1},8,[`onClick`,`disabled`])])]),_:2},1024)]),_:2},1024))),128))]),o(A,{ref_key:`alertDialog`,ref:Z},null,512)])):ne(``,!0)}});export{K as default};

docs/assets/TooltipProvider-Bx7lfIFp.js

@@ -0,0 +1 @@
+import{Cn as e,En as t,Ft as n,Kt as r,Nt as i,Ot as a,Yt as o,in as s}from"./game-logic-B_TBzmsj.js";import{a as c}from"./vendor-reka-ui-ICOW9z5F.js";var l=i({__name:`TooltipProvider`,props:{delayDuration:{default:0},skipDelayDuration:{},disableHoverableContent:{type:Boolean},disableClosingTrigger:{type:Boolean},disabled:{type:Boolean},ignoreNonKeyboardFocus:{type:Boolean}},setup(i){let l=i;return(i,u)=>(r(),a(e(c),t(n(l)),{default:s(()=>[o(i.$slots,`default`)]),_:3},16))}});export{l as t};

docs/assets/UnlockRequirement-BdFx1RC0.js

@@ -1 +0,0 @@
-import{Dt as e,G as t,J as n,W as r,X as i,Y as a,Z as o,jt as s,pt as c,q as l,st as u}from"./vendor-ui-DBxeWLyT.js";import{s as d}from"./vendor-vue-Bqq1sBNf.js";import{t as f}from"./CardDescription-CRV0m8La.js";import{At as p,Bt as m,It as h,Rt as g,Vt as _,dt as v,ft as y,jt as b,lt as x,ut as S}from"./index-Cch-Ig40.js";import{t as C}from"./useGameConfig-D2EZdt1x.js";var w=b(`lock`,[[`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`,key:`1w4ew1`}],[`path`,{d:`M7 11V7a5 5 0 0 1 10 0v4`,key:`fwvmzm`}]]),T={key:0,class:`fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4`},E={class:`flex justify-center mb-4`},D={class:`rounded-full bg-muted p-4`},O={class:`p-4 bg-muted rounded-lg space-y-2`},k={class:`text-sm font-medium text-center`},A={class:`flex items-center justify-center gap-2`},j={class:`text-base sm:text-lg font-bold`},M={key:0,class:`text-xs text-center text-muted-foreground`},N={class:`flex gap-2`},P=o({__name:`UnlockRequirement`,props:{requiredBuilding:{},requiredLevel:{}},setup(o){let b=o,P=d(),F=_(),{t:I}=m(),{BUILDINGS:L}=C(),R=r(()=>L.value[b.requiredBuilding]?.name||b.requiredBuilding),z=r(()=>F.currentPlanet&&F.currentPlanet.buildings[b.requiredBuilding]||0),B=r(()=>z.value>=b.requiredLevel),V=()=>{P.push(`/buildings`)};return(r,d)=>B.value?l(``,!0):(u(),n(`div`,T,[i(e(y),{class:`max-w-md w-full`},{default:c(()=>[i(e(S),{class:`text-center`},{default:c(()=>[t(`div`,E,[t(`div`,D,[i(e(w),{size:48,class:`text-muted-foreground`})])]),i(e(x),{class:`text-xl sm:text-2xl`},{default:c(()=>[a(s(e(I)(`common.featureLocked`)),1)]),_:1}),i(e(f),{class:`text-sm sm:text-base`},{default:c(()=>[a(s(e(I)(`common.unlockRequired`)),1)]),_:1})]),_:1}),i(e(v),{class:`space-y-4`},{default:c(()=>[t(`div`,O,[t(`p`,k,s(e(I)(`common.requiredBuilding`))+`:`,1),t(`div`,A,[t(`span`,j,s(R.value),1),i(e(h),{variant:`default`},{default:c(()=>[a(`Lv `+s(o.requiredLevel),1)]),_:1})]),z.value===void 0?l(``,!0):(u(),n(`p`,M,s(e(I)(`common.currentLevel`))+`: Lv `+s(z.value),1))]),t(`div`,N,[i(e(g),{onClick:V,class:`flex-1`},{default:c(()=>[i(e(p),{size:16,class:`mr-2`}),a(` `+s(e(I)(`common.goToBuildings`)),1)]),_:1})])]),_:1})]),_:1})]))}});export{w as n,P as t};

docs/assets/UnlockRequirement-CoN2_Hgq.js

@@ -0,0 +1 @@
+import{At as e,Cn as t,Dt as n,Et as r,Kt as i,Mt as a,Nt as o,On as s,in as c,jt as l,kt as u}from"./game-logic-B_TBzmsj.js";import{o as d}from"./vendor-vue-router-_-a8jZbv.js";import{D as f,G as p}from"./vendor-icons-B6ER66fi.js";import{t as m}from"./CardDescription-CtUtXM5o.js";import{A as h,I as g,M as _,P as v,c as y,l as b,s as x,u as S}from"./index-BLxCTx9W.js";import{t as C}from"./useGameConfig-chMIsHFg.js";var w={key:0,class:`fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4`},T={class:`flex justify-center mb-4`},E={class:`rounded-full bg-muted p-4`},D={class:`p-4 bg-muted rounded-lg space-y-2`},O={class:`text-sm font-medium text-center`},k={class:`flex items-center justify-center gap-2`},A={class:`text-base sm:text-lg font-bold`},j={key:0,class:`text-xs text-center text-muted-foreground`},M={class:`flex gap-2`},N=o({__name:`UnlockRequirement`,props:{requiredBuilding:{},requiredLevel:{}},setup(o){let N=o,P=d(),F=g(),{t:I}=v(),{BUILDINGS:L}=C(),R=r(()=>L.value[N.requiredBuilding]?.name||N.requiredBuilding),z=r(()=>F.currentPlanet&&F.currentPlanet.buildings[N.requiredBuilding]||0),B=r(()=>z.value>=N.requiredLevel),V=()=>{P.push(`/buildings`)};return(r,d)=>B.value?u(``,!0):(i(),e(`div`,w,[a(t(S),{class:`max-w-md w-full`},{default:c(()=>[a(t(y),{class:`text-center`},{default:c(()=>[n(`div`,T,[n(`div`,E,[a(t(f),{size:48,class:`text-muted-foreground`})])]),a(t(x),{class:`text-xl sm:text-2xl`},{default:c(()=>[l(s(t(I)(`common.featureLocked`)),1)]),_:1}),a(t(m),{class:`text-sm sm:text-base`},{default:c(()=>[l(s(t(I)(`common.unlockRequired`)),1)]),_:1})]),_:1}),a(t(b),{class:`space-y-4`},{default:c(()=>[n(`div`,D,[n(`p`,O,s(t(I)(`common.requiredBuilding`))+`:`,1),n(`div`,k,[n(`span`,A,s(R.value),1),a(t(h),{variant:`default`},{default:c(()=>[l(`Lv `+s(o.requiredLevel),1)]),_:1})]),z.value===void 0?u(``,!0):(i(),e(`p`,j,s(t(I)(`common.currentLevel`))+`: Lv `+s(z.value),1))]),n(`div`,M,[a(t(_),{onClick:V,class:`flex-1`},{default:c(()=>[a(t(p),{size:16,class:`mr-2`}),l(` `+s(t(I)(`common.goToBuildings`)),1)]),_:1})])]),_:1})]),_:1})]))}});export{N as t};

docs/assets/eye-B5ACPUPU.js

@@ -1 +0,0 @@
-import{jt as e}from"./index-Cch-Ig40.js";var t=e(`eye`,[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`,key:`1nclc0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}]]);export{t};

docs/assets/shipValidation-Cx6mhfwF.js

@@ -1 +0,0 @@
-import{F as e,N as t,P as n,T as r,a as i,c as a,d as o,f as s,l as c,n as l,o as u,p as d,r as f,s as p,t as m,u as h}from"./index-Cch-Ig40.js";const g=(e,n,r,i)=>{let a=u(n,r);return h(n,e.buildings,i)?t(e.resources,a)?{valid:!0}:{valid:!1,reason:`errors.insufficientResources`}:{valid:!1,reason:`errors.requirementsNotMet`}},_=(t,r,a,o)=>{let c=u(r,a),l=i(r,a,e(o,Date.now()).buildingSpeedBonus);return n(t.resources,c),s(r,a,l)},v=(e,n,r,i)=>{let a=l(n,r);return p(n,e.buildings,i)?t(e.resources,a)?c(n,e.defense,r)?{valid:!0}:{valid:!1,reason:`errors.shieldDomeLimit`}:{valid:!1,reason:`errors.insufficientResources`}:{valid:!1,reason:`errors.requirementsNotMet`}},y=(t,r,i,a)=>{let s=l(r,i),c=m(r,i,e(a,Date.now()).buildingSpeedBonus);return n(t.resources,s),o(r,i,c)},b=(t,n,i,o,s=0)=>{let c=e(o,Date.now());if(s>=r(c.additionalFleetSlots))return{valid:!1,reason:`errors.fleetMissionsFull`};if(!a(t.fleet,n))return{valid:!1,reason:`errors.insufficientFleet`};let l=f(n,c.fuelConsumptionReduction,i);return t.resources.deuterium<l?{valid:!1,reason:`errors.insufficientFuel`,fuelNeeded:l}:{valid:!0,fuelNeeded:l}},x=(e,t,r,i,a)=>{d(e.fleet,t),e.resources.deuterium-=r,i&&n(e.resources,a)};export{b as a,v as i,x as n,g as o,_ as r,y as t};

docs/assets/useGameConfig-D2EZdt1x.js

@@ -1 +0,0 @@
-import{W as e}from"./vendor-ui-DBxeWLyT.js";import{$ as t,Bt as n,Q as r,ct as i,et as a,it as o,nt as s,ot as c,rt as l,st as u,tt as d}from"./index-Cch-Ig40.js";const f=()=>{let{t:f}=n(),p={[l.MetalMine]:`metalMine`,[l.CrystalMine]:`crystalMine`,[l.DeuteriumSynthesizer]:`deuteriumSynthesizer`,[l.SolarPlant]:`solarPlant`,[l.RoboticsFactory]:`roboticsFactory`,[l.NaniteFactory]:`naniteFactory`,[l.Shipyard]:`shipyard`,[l.ResearchLab]:`researchLab`,[l.MetalStorage]:`metalStorage`,[l.CrystalStorage]:`crystalStorage`,[l.DeuteriumTank]:`deuteriumTank`,[l.DarkMatterCollector]:`darkMatterCollector`,[l.LunarBase]:`lunarBase`,[l.SensorPhalanx]:`sensorPhalanx`,[l.JumpGate]:`jumpGate`},m={[u.LightFighter]:`lightFighter`,[u.HeavyFighter]:`heavyFighter`,[u.Cruiser]:`cruiser`,[u.Battleship]:`battleship`,[u.SmallCargo]:`smallCargo`,[u.LargeCargo]:`largeCargo`,[u.ColonyShip]:`colonyShip`,[u.Recycler]:`recycler`,[u.EspionageProbe]:`espionageProbe`,[u.DarkMatterHarvester]:`darkMatterHarvester`},h={[o.RocketLauncher]:`rocketLauncher`,[o.LightLaser]:`lightLaser`,[o.HeavyLaser]:`heavyLaser`,[o.GaussCannon]:`gaussCannon`,[o.IonCannon]:`ionCannon`,[o.PlasmaTurret]:`plasmaTurret`,[o.SmallShieldDome]:`smallShieldDome`,[o.LargeShieldDome]:`largeShieldDome`},g={[i.EnergyTechnology]:`energyTechnology`,[i.LaserTechnology]:`laserTechnology`,[i.IonTechnology]:`ionTechnology`,[i.HyperspaceTechnology]:`hyperspaceTechnology`,[i.PlasmaTechnology]:`plasmaTechnology`,[i.ComputerTechnology]:`computerTechnology`,[i.CombustionDrive]:`combustionDrive`,[i.ImpulseDrive]:`impulseDrive`,[i.HyperspaceDrive]:`hyperspaceDrive`,[i.DarkMatterTechnology]:`darkMatterTechnology`},_={[c.Commander]:`commander`,[c.Admiral]:`admiral`,[c.Engineer]:`engineer`,[c.Geologist]:`geologist`,[c.Technocrat]:`technocrat`,[c.DarkMatterSpecialist]:`darkMatterSpecialist`};return{BUILDINGS:e(()=>{let e={};for(let[t,n]of Object.entries(r)){let r=t,i=p[r];e[r]={...n,name:f(`buildings.${i}`),description:f(`buildingDescriptions.${i}`)}}return e}),SHIPS:e(()=>{let e={};for(let[t,n]of Object.entries(d)){let r=t,i=m[r];e[r]={...n,name:f(`ships.${i}`),description:f(`shipDescriptions.${i}`)}}return e}),DEFENSES:e(()=>{let e={};for(let[n,r]of Object.entries(t)){let t=n,i=h[t];e[t]={...r,name:f(`defenses.${i}`),description:f(`defenseDescriptions.${i}`)}}return e}),TECHNOLOGIES:e(()=>{let e={};for(let[t,n]of Object.entries(s)){let r=t,i=g[r];e[r]={...n,name:f(`technologies.${i}`),description:f(`technologyDescriptions.${i}`)}}return e}),OFFICERS:e(()=>{let e={};for(let[t,n]of Object.entries(a)){let r=t,i=_[r];e[r]={...n,name:f(`officers.${i}`),description:f(`officerDescriptions.${i}`)}}return e})}};export{f as t};

docs/assets/useGameConfig-chMIsHFg.js

@@ -0,0 +1 @@
+import{Et as e}from"./game-logic-B_TBzmsj.js";import{c as t,d as n,h as r,l as i,m as a,n as o,o as s,p as c,r as l,u}from"./game-config-D-D7cMgJ.js";import{P as d}from"./index-BLxCTx9W.js";const f=()=>{let{t:f}=d(),p={[u.MetalMine]:`metalMine`,[u.CrystalMine]:`crystalMine`,[u.DeuteriumSynthesizer]:`deuteriumSynthesizer`,[u.SolarPlant]:`solarPlant`,[u.RoboticsFactory]:`roboticsFactory`,[u.NaniteFactory]:`naniteFactory`,[u.Shipyard]:`shipyard`,[u.ResearchLab]:`researchLab`,[u.MetalStorage]:`metalStorage`,[u.CrystalStorage]:`crystalStorage`,[u.DeuteriumTank]:`deuteriumTank`,[u.DarkMatterCollector]:`darkMatterCollector`,[u.Terraformer]:`terraformer`,[u.LunarBase]:`lunarBase`,[u.SensorPhalanx]:`sensorPhalanx`,[u.JumpGate]:`jumpGate`,[u.PlanetDestroyerFactory]:`planetDestroyerFactory`},m={[a.LightFighter]:`lightFighter`,[a.HeavyFighter]:`heavyFighter`,[a.Cruiser]:`cruiser`,[a.Battleship]:`battleship`,[a.SmallCargo]:`smallCargo`,[a.LargeCargo]:`largeCargo`,[a.ColonyShip]:`colonyShip`,[a.Recycler]:`recycler`,[a.EspionageProbe]:`espionageProbe`,[a.DarkMatterHarvester]:`darkMatterHarvester`,[a.Deathstar]:`deathstar`},h={[n.RocketLauncher]:`rocketLauncher`,[n.LightLaser]:`lightLaser`,[n.HeavyLaser]:`heavyLaser`,[n.GaussCannon]:`gaussCannon`,[n.IonCannon]:`ionCannon`,[n.PlasmaTurret]:`plasmaTurret`,[n.SmallShieldDome]:`smallShieldDome`,[n.LargeShieldDome]:`largeShieldDome`,[n.PlanetaryShield]:`planetaryShield`},g={[r.EnergyTechnology]:`energyTechnology`,[r.LaserTechnology]:`laserTechnology`,[r.IonTechnology]:`ionTechnology`,[r.HyperspaceTechnology]:`hyperspaceTechnology`,[r.PlasmaTechnology]:`plasmaTechnology`,[r.ComputerTechnology]:`computerTechnology`,[r.CombustionDrive]:`combustionDrive`,[r.ImpulseDrive]:`impulseDrive`,[r.HyperspaceDrive]:`hyperspaceDrive`,[r.DarkMatterTechnology]:`darkMatterTechnology`,[r.TerraformingTechnology]:`terraformingTechnology`,[r.PlanetDestructionTech]:`planetDestructionTech`},_={[c.Commander]:`commander`,[c.Admiral]:`admiral`,[c.Engineer]:`engineer`,[c.Geologist]:`geologist`,[c.Technocrat]:`technocrat`,[c.DarkMatterSpecialist]:`darkMatterSpecialist`};return{BUILDINGS:e(()=>{let e={};for(let[t,n]of Object.entries(o)){let r=t,i=p[r];e[r]={...n,name:f(`buildings.${i}`),description:f(`buildingDescriptions.${i}`)}}return e}),SHIPS:e(()=>{let e={};for(let[n,r]of Object.entries(t)){let t=n,i=m[t];e[t]={...r,name:f(`ships.${i}`),description:f(`shipDescriptions.${i}`)}}return e}),DEFENSES:e(()=>{let e={};for(let[t,n]of Object.entries(l)){let r=t,i=h[r];e[r]={...n,name:f(`defenses.${i}`),description:f(`defenseDescriptions.${i}`)}}return e}),TECHNOLOGIES:e(()=>{let e={};for(let[t,n]of Object.entries(i)){let r=t,i=g[r];e[r]={...n,name:f(`technologies.${i}`),description:f(`technologyDescriptions.${i}`)}}return e}),OFFICERS:e(()=>{let e={};for(let[t,n]of Object.entries(s)){let r=t,i=_[r];e[r]={...n,name:f(`officers.${i}`),description:f(`officerDescriptions.${i}`)}}return e})}};export{f as t};

docs/assets/vendor-vueuse-CXzdKKhY.js

@@ -0,0 +1 @@
+import{Cn as e,Et as t,Ht as n,Lt as r,Pt as i,Sn as a,Wt as o,hn as s,nn as c,tn as l,vn as u}from"./game-logic-B_TBzmsj.js";import{a as d,i as f,l as p,o as m,r as h,s as g,u as _}from"./vendor-others-DiSZfaku.js";var v=f?window:void 0,y=f?window.document:void 0;f&&window.navigator,f&&window.location;function b(e){let t=a(e);return t?.$el??t}function x(...n){let r=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),i=t(()=>{let e=p(a(n[0])).filter(e=>e!=null);return e.every(e=>typeof e!=`string`)?e:void 0});return _(()=>[i.value?.map(e=>b(e))??[v].filter(e=>e!=null),p(a(i.value?n[1]:n[0])),p(e(i.value?n[2]:n[1])),a(i.value?n[3]:n[2])],([e,t,n,i],a,o)=>{if(!e?.length||!t?.length||!n?.length)return;let s=m(i)?{...i}:i,c=e.flatMap(e=>t.flatMap(t=>n.map(n=>r(e,t,n,s))));o(()=>{c.forEach(e=>e())})},{flush:`post`})}function S(){let e=u(!1),t=i();return t&&o(()=>{e.value=!0},t),e}function C(e){let n=S();return t(()=>(n.value,!!e()))}var w=Symbol(`vueuse-ssr-width`);function T(){let e=r()?h(w,null):null;return typeof e==`number`?e:void 0}function E(e,n={}){let{window:r=v,ssrWidth:i=T()}=n,o=C(()=>r&&`matchMedia`in r&&typeof r.matchMedia==`function`),s=u(typeof i==`number`),l=u(),d=u(!1);return c(()=>{if(s.value){s.value=!o.value,d.value=a(e).split(`,`).some(e=>{let t=e.includes(`not all`),n=e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),r=e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),a=!!(n||r);return n&&a&&(a=i>=g(n[1])),r&&a&&(a=i<=g(r[1])),t?!a:a});return}o.value&&(l.value=r.matchMedia(a(e)),d.value=l.value.matches)}),x(l,`change`,e=>{d.value=e.matches},{passive:!0}),t(()=>d.value)}function D(e){return JSON.parse(JSON.stringify(e))}function O(e,r,a,o={}){var c,u;let{clone:f=!1,passive:p=!1,eventName:m,deep:h=!1,defaultValue:g,shouldEmit:_}=o,v=i(),y=a||v?.emit||(v==null||(c=v.$emit)==null?void 0:c.bind(v))||(v==null||(u=v.proxy)==null||(u=u.$emit)==null?void 0:u.bind(v?.proxy)),b=m;r||=`modelValue`,b||=`update:${r.toString()}`;let x=e=>f?typeof f==`function`?f(e):D(e):e,S=()=>d(e[r])?x(e[r]):g,C=e=>{_?_(e)&&y(b,e):y(b,e)};if(p){let t=s(S()),i=!1;return l(()=>e[r],e=>{i||(i=!0,t.value=x(e),n(()=>i=!1))}),l(t,t=>{!i&&(t!==e[r]||h)&&C(t)},{deep:h}),t}else return t({get(){return S()},set(e){C(e)}})}export{O as i,x as n,E as r,y as t};

docs/index.html

@@ -7,11 +7,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="./logo.svg" />
     <title>OGame-Vue-Ts</title>
-    <script type="module" crossorigin src="./assets/index-Cch-Ig40.js"></script>
+    <script type="module" crossorigin src="./assets/index-BLxCTx9W.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/game-config-D-D7cMgJ.js">
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-CIDIeb-o.js">
-    <link rel="modulepreload" crossorigin href="./assets/vendor-ui-DBxeWLyT.js">
-    <link rel="modulepreload" crossorigin href="./assets/vendor-vue-Bqq1sBNf.js">
-    <link rel="stylesheet" crossorigin href="./assets/index-B25uYV3W.css">
+    <link rel="modulepreload" crossorigin href="./assets/game-logic-B_TBzmsj.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-others-DiSZfaku.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-reka-ui-ICOW9z5F.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-vueuse-CXzdKKhY.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-crypto-CQM8pryk.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-utils-BlvnUqQX.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-icons-B6ER66fi.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-pinia-C_5mk-F1.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-vue-router-_-a8jZbv.js">
+    <link rel="modulepreload" crossorigin href="./assets/game-i18n-DEf7ySVe.js">
+    <link rel="stylesheet" crossorigin href="./assets/vendor-others-BMPyaZWq.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-CmQ0LYiC.css">
   </head>
 
   <body>

package.json

@@ -5,11 +5,12 @@
   "id": "2zBlHPUA6E",
   "author": "setube",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "buildDate": "2025/12/13 11:11:17",
   "type": "module",
   "scripts": {
     "dev": "vite --port 25121",
-    "build": "vue-tsc -b && vite build",
+    "build": "vue-tsc -b && vite build && node update-build-date.js",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -47,4 +48,4 @@
     }
   },
   "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
-}
+}

pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
     dependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.17
-        version: 4.1.17(rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1))
+        version: 4.1.17(rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1))
       '@tanstack/vue-table':
         specifier: ^8.21.3
         version: 8.21.3(vue@3.5.25(typescript@5.9.3))
@@ -71,16 +71,10 @@ importers:
         version: 24.10.2
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
-        version: 6.0.2(rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1))(vue@3.5.25(typescript@5.9.3))
+        version: 6.0.2(rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1))(vue@3.5.25(typescript@5.9.3))
       '@vue/tsconfig':
         specifier: ^0.8.1
         version: 0.8.1(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
-      esbuild:
-        specifier: ^0.27.1
-        version: 0.27.1
-      terser:
-        specifier: ^5.44.1
-        version: 5.44.1
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
@@ -89,7 +83,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: npm:rolldown-vite@7.2.5
-        version: rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1)
+        version: rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1)
       vue-tsc:
         specifier: ^3.1.4
         version: 3.1.8(typescript@5.9.3)
@@ -122,162 +116,6 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@esbuild/aix-ppc64@0.27.1':
-    resolution: {integrity: sha512-HHB50pdsBX6k47S4u5g/CaLjqS3qwaOVE5ILsq64jyzgMhLuCuZ8rGzM9yhsAjfjkbgUPMzZEPa7DAp7yz6vuA==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [aix]
-
-  '@esbuild/android-arm64@0.27.1':
-    resolution: {integrity: sha512-45fuKmAJpxnQWixOGCrS+ro4Uvb4Re9+UTieUY2f8AEc+t7d4AaZ6eUJ3Hva7dtrxAAWHtlEFsXFMAgNnGU9uQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm@0.27.1':
-    resolution: {integrity: sha512-kFqa6/UcaTbGm/NncN9kzVOODjhZW8e+FRdSeypWe6j33gzclHtwlANs26JrupOntlcWmB0u8+8HZo8s7thHvg==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-x64@0.27.1':
-    resolution: {integrity: sha512-LBEpOz0BsgMEeHgenf5aqmn/lLNTFXVfoWMUox8CtWWYK9X4jmQzWjoGoNb8lmAYml/tQ/Ysvm8q7szu7BoxRQ==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/darwin-arm64@0.27.1':
-    resolution: {integrity: sha512-veg7fL8eMSCVKL7IW4pxb54QERtedFDfY/ASrumK/SbFsXnRazxY4YykN/THYqFnFwJ0aVjiUrVG2PwcdAEqQQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.27.1':
-    resolution: {integrity: sha512-+3ELd+nTzhfWb07Vol7EZ+5PTbJ/u74nC6iv4/lwIU99Ip5uuY6QoIf0Hn4m2HoV0qcnRivN3KSqc+FyCHjoVQ==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/freebsd-arm64@0.27.1':
-    resolution: {integrity: sha512-/8Rfgns4XD9XOSXlzUDepG8PX+AVWHliYlUkFI3K3GB6tqbdjYqdhcb4BKRd7C0BhZSoaCxhv8kTcBrcZWP+xg==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.27.1':
-    resolution: {integrity: sha512-GITpD8dK9C+r+5yRT/UKVT36h/DQLOHdwGVwwoHidlnA168oD3uxA878XloXebK4Ul3gDBBIvEdL7go9gCUFzQ==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/linux-arm64@0.27.1':
-    resolution: {integrity: sha512-W9//kCrh/6in9rWIBdKaMtuTTzNj6jSeG/haWBADqLLa9P8O5YSRDzgD5y9QBok4AYlzS6ARHifAb75V6G670Q==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.27.1':
-    resolution: {integrity: sha512-ieMID0JRZY/ZeCrsFQ3Y3NlHNCqIhTprJfDgSB3/lv5jJZ8FX3hqPyXWhe+gvS5ARMBJ242PM+VNz/ctNj//eA==}
-    engines: {node: '>=18'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.27.1':
-    resolution: {integrity: sha512-VIUV4z8GD8rtSVMfAj1aXFahsi/+tcoXXNYmXgzISL+KB381vbSTNdeZHHHIYqFyXcoEhu9n5cT+05tRv13rlw==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.27.1':
-    resolution: {integrity: sha512-l4rfiiJRN7sTNI//ff65zJ9z8U+k6zcCg0LALU5iEWzY+a1mVZ8iWC1k5EsNKThZ7XCQ6YWtsZ8EWYm7r1UEsg==}
-    engines: {node: '>=18'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.27.1':
-    resolution: {integrity: sha512-U0bEuAOLvO/DWFdygTHWY8C067FXz+UbzKgxYhXC0fDieFa0kDIra1FAhsAARRJbvEyso8aAqvPdNxzWuStBnA==}
-    engines: {node: '>=18'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.27.1':
-    resolution: {integrity: sha512-NzdQ/Xwu6vPSf/GkdmRNsOfIeSGnh7muundsWItmBsVpMoNPVpM61qNzAVY3pZ1glzzAxLR40UyYM23eaDDbYQ==}
-    engines: {node: '>=18'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.27.1':
-    resolution: {integrity: sha512-7zlw8p3IApcsN7mFw0O1Z1PyEk6PlKMu18roImfl3iQHTnr/yAfYv6s4hXPidbDoI2Q0pW+5xeoM4eTCC0UdrQ==}
-    engines: {node: '>=18'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.27.1':
-    resolution: {integrity: sha512-cGj5wli+G+nkVQdZo3+7FDKC25Uh4ZVwOAK6A06Hsvgr8WqBBuOy/1s+PUEd/6Je+vjfm6stX0kmib5b/O2Ykw==}
-    engines: {node: '>=18'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.27.1':
-    resolution: {integrity: sha512-z3H/HYI9MM0HTv3hQZ81f+AKb+yEoCRlUby1F80vbQ5XdzEMyY/9iNlAmhqiBKw4MJXwfgsh7ERGEOhrM1niMA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/netbsd-arm64@0.27.1':
-    resolution: {integrity: sha512-wzC24DxAvk8Em01YmVXyjl96Mr+ecTPyOuADAvjGg+fyBpGmxmcr2E5ttf7Im8D0sXZihpxzO1isus8MdjMCXQ==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [netbsd]
-
-  '@esbuild/netbsd-x64@0.27.1':
-    resolution: {integrity: sha512-1YQ8ybGi2yIXswu6eNzJsrYIGFpnlzEWRl6iR5gMgmsrR0FcNoV1m9k9sc3PuP5rUBLshOZylc9nqSgymI+TYg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [netbsd]
-
-  '@esbuild/openbsd-arm64@0.27.1':
-    resolution: {integrity: sha512-5Z+DzLCrq5wmU7RDaMDe2DVXMRm2tTDvX2KU14JJVBN2CT/qov7XVix85QoJqHltpvAOZUAc3ndU56HSMWrv8g==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openbsd]
-
-  '@esbuild/openbsd-x64@0.27.1':
-    resolution: {integrity: sha512-Q73ENzIdPF5jap4wqLtsfh8YbYSZ8Q0wnxplOlZUOyZy7B4ZKW8DXGWgTCZmF8VWD7Tciwv5F4NsRf6vYlZtqg==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@esbuild/openharmony-arm64@0.27.1':
-    resolution: {integrity: sha512-ajbHrGM/XiK+sXM0JzEbJAen+0E+JMQZ2l4RR4VFwvV9JEERx+oxtgkpoKv1SevhjavK2z2ReHk32pjzktWbGg==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@esbuild/sunos-x64@0.27.1':
-    resolution: {integrity: sha512-IPUW+y4VIjuDVn+OMzHc5FV4GubIwPnsz6ubkvN8cuhEqH81NovB53IUlrlBkPMEPxvNnf79MGBoz8rZ2iW8HA==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [sunos]
-
-  '@esbuild/win32-arm64@0.27.1':
-    resolution: {integrity: sha512-RIVRWiljWA6CdVu8zkWcRmGP7iRRIIwvhDKem8UMBjPql2TXM5PkDVvvrzMtj1V+WFPB4K7zkIGM7VzRtFkjdg==}
-    engines: {node: '>=18'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.27.1':
-    resolution: {integrity: sha512-2BR5M8CPbptC1AK5JbJT1fWrHLvejwZidKx3UMSF0ecHMa+smhi16drIrCEggkgviBwLYd5nwrFLSl5Kho96RQ==}
-    engines: {node: '>=18'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-x64@0.27.1':
-    resolution: {integrity: sha512-d5X6RMYv6taIymSk8JBP+nxv8DQAMY6A51GPgusqLdK9wBz5wWIXy1KjTck6HnjE9hqJzJRdk+1p/t5soSbCtw==}
-    engines: {node: '>=18'}
-    cpu: [x64]
-    os: [win32]
-
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
@@ -696,11 +534,6 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  esbuild@0.27.1:
-    resolution: {integrity: sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -1054,84 +887,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.27.1':
-    optional: true
-
-  '@esbuild/android-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/android-arm@0.27.1':
-    optional: true
-
-  '@esbuild/android-x64@0.27.1':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/darwin-x64@0.27.1':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.27.1':
-    optional: true
-
-  '@esbuild/linux-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/linux-arm@0.27.1':
-    optional: true
-
-  '@esbuild/linux-ia32@0.27.1':
-    optional: true
-
-  '@esbuild/linux-loong64@0.27.1':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.27.1':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.27.1':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.27.1':
-    optional: true
-
-  '@esbuild/linux-s390x@0.27.1':
-    optional: true
-
-  '@esbuild/linux-x64@0.27.1':
-    optional: true
-
-  '@esbuild/netbsd-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.27.1':
-    optional: true
-
-  '@esbuild/openbsd-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.27.1':
-    optional: true
-
-  '@esbuild/openharmony-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/sunos-x64@0.27.1':
-    optional: true
-
-  '@esbuild/win32-arm64@0.27.1':
-    optional: true
-
-  '@esbuild/win32-ia32@0.27.1':
-    optional: true
-
-  '@esbuild/win32-x64@0.27.1':
-    optional: true
-
   '@floating-ui/core@1.7.3':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -1176,6 +931,7 @@ snapshots:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
+    optional: true
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
@@ -1306,12 +1062,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
 
-  '@tailwindcss/vite@4.1.17(rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1))':
+  '@tailwindcss/vite@4.1.17(rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1))':
     dependencies:
       '@tailwindcss/node': 4.1.17
       '@tailwindcss/oxide': 4.1.17
       tailwindcss: 4.1.17
-      vite: rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1)
+      vite: rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1)
 
   '@tanstack/table-core@8.21.3': {}
 
@@ -1342,10 +1098,10 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
-  '@vitejs/plugin-vue@6.0.2(rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1))(vue@3.5.25(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.2(rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1))(vue@3.5.25(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.50
-      vite: rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1)
+      vite: rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1)
       vue: 3.5.25(typescript@5.9.3)
 
   '@volar/language-core@2.4.26':
@@ -1481,7 +1237,8 @@ snapshots:
     dependencies:
       vue: 3.5.25(typescript@5.9.3)
 
-  acorn@8.15.0: {}
+  acorn@8.15.0:
+    optional: true
 
   alien-signals@3.1.1: {}
 
@@ -1491,7 +1248,8 @@ snapshots:
 
   birpc@2.9.0: {}
 
-  buffer-from@1.1.2: {}
+  buffer-from@1.1.2:
+    optional: true
 
   class-variance-authority@0.7.1:
     dependencies:
@@ -1499,7 +1257,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  commander@2.20.3: {}
+  commander@2.20.3:
+    optional: true
 
   copy-anything@4.0.5:
     dependencies:
@@ -1520,35 +1279,6 @@ snapshots:
 
   entities@4.5.0: {}
 
-  esbuild@0.27.1:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.1
-      '@esbuild/android-arm': 0.27.1
-      '@esbuild/android-arm64': 0.27.1
-      '@esbuild/android-x64': 0.27.1
-      '@esbuild/darwin-arm64': 0.27.1
-      '@esbuild/darwin-x64': 0.27.1
-      '@esbuild/freebsd-arm64': 0.27.1
-      '@esbuild/freebsd-x64': 0.27.1
-      '@esbuild/linux-arm': 0.27.1
-      '@esbuild/linux-arm64': 0.27.1
-      '@esbuild/linux-ia32': 0.27.1
-      '@esbuild/linux-loong64': 0.27.1
-      '@esbuild/linux-mips64el': 0.27.1
-      '@esbuild/linux-ppc64': 0.27.1
-      '@esbuild/linux-riscv64': 0.27.1
-      '@esbuild/linux-s390x': 0.27.1
-      '@esbuild/linux-x64': 0.27.1
-      '@esbuild/netbsd-arm64': 0.27.1
-      '@esbuild/netbsd-x64': 0.27.1
-      '@esbuild/openbsd-arm64': 0.27.1
-      '@esbuild/openbsd-x64': 0.27.1
-      '@esbuild/openharmony-arm64': 0.27.1
-      '@esbuild/sunos-x64': 0.27.1
-      '@esbuild/win32-arm64': 0.27.1
-      '@esbuild/win32-ia32': 0.27.1
-      '@esbuild/win32-x64': 0.27.1
-
   estree-walker@2.0.2: {}
 
   fdir@6.5.0(picomatch@4.0.3):
@@ -1679,7 +1409,7 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rolldown-vite@7.2.5(@types/node@24.10.2)(esbuild@0.27.1)(jiti@2.6.1)(terser@5.44.1):
+  rolldown-vite@7.2.5(@types/node@24.10.2)(jiti@2.6.1)(terser@5.44.1):
     dependencies:
       '@oxc-project/runtime': 0.97.0
       fdir: 6.5.0(picomatch@4.0.3)
@@ -1690,7 +1420,6 @@ snapshots:
       tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 24.10.2
-      esbuild: 0.27.1
       fsevents: 2.3.3
       jiti: 2.6.1
       terser: 5.44.1
@@ -1721,8 +1450,10 @@ snapshots:
     dependencies:
       buffer-from: 1.1.2
       source-map: 0.6.1
+    optional: true
 
-  source-map@0.6.1: {}
+  source-map@0.6.1:
+    optional: true
 
   speakingurl@14.0.1: {}
 
@@ -1742,6 +1473,7 @@ snapshots:
       acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
+    optional: true
 
   tinyglobby@0.2.15:
     dependencies:

public/CNAME

@@ -0,0 +1 @@
+ogame-vue-ts.wenzi.games

src/App.vue

@@ -1,150 +1,131 @@
 <template>
-  <div class="flex h-screen bg-background overflow-hidden">
-    <!-- 遮罩层（移动端） -->
-    <div v-if="!gameStore.sidebarCollapsed" class="fixed inset-0 bg-black/50 z-30 lg:hidden" @click="toggleSidebar" />
-
-    <!-- 侧边导航栏 -->
-    <aside
-      :class="[
-        'border-r bg-card flex flex-col transition-all duration-300 ease-in-out shadow-lg z-40',
-        'fixed lg:relative h-full',
-        gameStore.sidebarCollapsed ? '-translate-x-full lg:translate-x-0 lg:w-16' : 'translate-x-0 w-64'
-      ]"
-    >
+  <SidebarProvider :open="sidebarOpen" @update:open="sidebarOpen = $event">
+    <Sidebar collapsible="icon">
       <!-- Logo -->
-      <div class="p-4 border-b flex items-center justify-center">
-        <h1 v-if="!gameStore.sidebarCollapsed" class="text-xl font-bold flex items-center gap-2">
-          <span class="text-2xl">
-            <img src="@/assets/logo.svg" class="w-10" />
-          </span>
-          {{ pkg.title }}
-        </h1>
-        <span v-else class="text-2xl">
-          <img src="@/assets/logo.svg" class="w-10" />
-        </span>
-      </div>
-
-      <!-- 星球信息 -->
-      <div v-if="planet && !gameStore.sidebarCollapsed" class="p-4 border-b">
-        <div class="text-sm space-y-2">
-          <div>
-            <p class="font-semibold mb-1">
-              {{ planet.name }}
-              <Badge v-if="planet.isMoon" variant="secondary" class="ml-1 text-xs">{{ t('planet.moon') }}</Badge>
-            </p>
-            <p class="text-muted-foreground text-xs">
-              [{{ planet.position.galaxy }}:{{ planet.position.system }}:{{ planet.position.position }}]
-            </p>
-          </div>
-          <!-- 玩家积分显示 -->
-          <div class="bg-muted/50 rounded-lg p-2">
-            <div class="flex items-center justify-between">
-              <span class="text-xs text-muted-foreground">{{ t('player.points') }}</span>
-              <span class="text-sm font-bold text-primary">{{ formatNumber(gameStore.player.points) }}</span>
-            </div>
-          </div>
-          <!-- 月球切换按钮 -->
-          <div v-if="hasMoon || planet.isMoon" class="flex gap-1">
-            <Button v-if="planet.isMoon" @click="switchToParentPlanet" variant="outline" size="sm" class="w-full text-xs h-7">
-              {{ t('planet.backToPlanet') }}
-            </Button>
-            <Button v-else-if="moon" @click="switchToMoon" variant="outline" size="sm" class="w-full text-xs h-7">
-              {{ t('planet.switchToMoon') }}
-            </Button>
-          </div>
+      <SidebarHeader class="border-b">
+        <div class="flex items-center justify-center p-4 group-data-[collapsible=icon]:p-2">
+          <img src="@/assets/logo.svg" class="w-10 group-data-[collapsible=icon]:w-8" />
+          <h1 class="text-xl font-bold ml-2 group-data-[collapsible=icon]:hidden">{{ pkg.title }}</h1>
         </div>
-      </div>
+      </SidebarHeader>
 
-      <!-- 导航菜单 -->
-      <nav class="flex-1 p-2 space-y-1 overflow-y-auto">
-        <RouterLink v-for="item in navItems" :key="item.path" :to="item.path" v-slot="{ isActive: routeActive }">
-          <Button
-            :variant="routeActive ? 'secondary' : 'ghost'"
-            :class="['w-full transition-all', gameStore.sidebarCollapsed ? 'justify-center px-0' : 'justify-start']"
-            :title="gameStore.sidebarCollapsed ? item.name.value : undefined"
-          >
-            <component :is="item.icon" :class="['h-4 w-4', !gameStore.sidebarCollapsed && 'mr-3']" />
-            <span v-if="!gameStore.sidebarCollapsed">{{ item.name.value }}</span>
-          </Button>
-        </RouterLink>
-      </nav>
-
-      <!-- 语言切换 -->
-      <div class="p-2 border-t">
-        <Popover>
-          <PopoverTrigger as-child>
-            <Button variant="ghost" class="w-full" size="sm">
-              <Languages class="h-4 w-4" />
-              <span v-if="!gameStore.sidebarCollapsed" class="ml-2">{{ localeNames[gameStore.locale] }}</span>
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent class="w-48 p-2" :align="gameStore.sidebarCollapsed ? 'start' : 'center'">
-            <div class="space-y-1">
-              <Button
-                v-for="locale in locales"
-                :key="locale"
-                @click="gameStore.locale = locale"
-                :variant="gameStore.locale === locale ? 'secondary' : 'ghost'"
-                class="w-full justify-start"
-                size="sm"
-              >
-                {{ localeNames[locale] }}
+      <SidebarContent>
+        <!-- 星球信息 -->
+        <SidebarGroup v-if="planet" class="border-b group-data-[collapsible=icon]:hidden">
+          <div class="px-4 py-3 space-y-2 text-sm">
+            <div>
+              <p class="font-semibold mb-1">
+                {{ planet.name }}
+                <Badge v-if="planet.isMoon" variant="secondary" class="ml-1 text-xs">{{ t('planet.moon') }}</Badge>
+              </p>
+              <p class="text-muted-foreground text-xs">
+                [{{ planet.position.galaxy }}:{{ planet.position.system }}:{{ planet.position.position }}]
+              </p>
+            </div>
+            <!-- 玩家积分显示 -->
+            <div class="bg-muted/50 rounded-lg p-2">
+              <div class="flex items-center justify-between">
+                <span class="text-xs text-muted-foreground">{{ t('player.points') }}</span>
+                <span class="text-sm font-bold text-primary">{{ formatNumber(gameStore.player.points) }}</span>
+              </div>
+            </div>
+            <!-- 月球切换按钮 -->
+            <div v-if="hasMoon || planet.isMoon" class="flex gap-1">
+              <Button v-if="planet.isMoon" @click="switchToParentPlanet" variant="outline" size="sm" class="w-full text-xs h-7">
+                {{ t('planet.backToPlanet') }}
+              </Button>
+              <Button v-else-if="moon" @click="switchToMoon" variant="outline" size="sm" class="w-full text-xs h-7">
+                {{ t('planet.switchToMoon') }}
               </Button>
             </div>
-          </PopoverContent>
-        </Popover>
-      </div>
+          </div>
+        </SidebarGroup>
 
-      <!-- 夜间模式切换 -->
-      <div class="p-2 border-t">
-        <Button @click="isDark = !isDark" variant="ghost" class="w-full" size="sm">
-          <Sun v-if="isDark" class="h-4 w-4" />
-          <Moon v-else class="h-4 w-4" />
-          <span v-if="!gameStore.sidebarCollapsed" class="ml-2">{{ isDark ? t('sidebar.lightMode') : t('sidebar.darkMode') }}</span>
-        </Button>
-      </div>
-      <div class="p-2 border-t">
-        <Button @click="toggleSidebar" variant="ghost" class="w-full" size="sm">
-          <ChevronLeft v-if="!gameStore.sidebarCollapsed" class="h-4 w-4" />
-          <ChevronRight v-else class="h-4 w-4" />
-          <span v-if="!gameStore.sidebarCollapsed" class="ml-2">{{ t('sidebar.collapse') }}</span>
-        </Button>
-      </div>
-    </aside>
+        <!-- 导航菜单 -->
+        <SidebarGroup>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in navItems" :key="item.path">
+              <SidebarMenuButton as-child :is-active="$route.path === item.path" :tooltip="item.name.value">
+                <RouterLink :to="item.path">
+                  <component :is="item.icon" />
+                  <span>{{ item.name.value }}</span>
+                  <!-- 未读消息数量 -->
+                  <SidebarMenuBadge v-if="item.path === '/messages' && unreadMessagesCount > 0">
+                    {{ unreadMessagesCount }}
+                  </SidebarMenuBadge>
+                </RouterLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <!-- 底部设置 -->
+      <SidebarFooter class="border-t">
+        <SidebarMenu>
+          <!-- 语言切换 -->
+          <SidebarMenuItem>
+            <Popover>
+              <PopoverTrigger as-child>
+                <SidebarMenuButton :tooltip="localeNames[gameStore.locale]">
+                  <Languages />
+                  <span>{{ localeNames[gameStore.locale] }}</span>
+                </SidebarMenuButton>
+              </PopoverTrigger>
+              <PopoverContent class="w-48 p-2" side="right" align="end">
+                <div class="space-y-1">
+                  <Button
+                    v-for="locale in locales"
+                    :key="locale"
+                    @click="gameStore.locale = locale"
+                    :variant="gameStore.locale === locale ? 'secondary' : 'ghost'"
+                    class="w-full justify-start"
+                    size="sm"
+                  >
+                    {{ localeNames[locale] }}
+                  </Button>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </SidebarMenuItem>
+
+          <!-- 夜间模式切换 -->
+          <SidebarMenuItem>
+            <SidebarMenuButton @click="isDark = !isDark" :tooltip="isDark ? t('sidebar.lightMode') : t('sidebar.darkMode')">
+              <Sun v-if="isDark" />
+              <Moon v-else />
+              <span>{{ isDark ? t('sidebar.lightMode') : t('sidebar.darkMode') }}</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+
+          <!-- 折叠按钮 -->
+          <SidebarMenuItem class="hidden sm:inline">
+            <SidebarMenuButton @click="toggleSidebar" :tooltip="sidebarOpen ? t('sidebar.collapse') : t('sidebar.expand')">
+              <ChevronsLeft class="group-data-[state=collapsed]:rotate-180 transition-transform" />
+              <span>{{ t('sidebar.collapse') }}</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
 
     <!-- 主内容区 -->
-    <div class="flex-1 flex flex-col overflow-hidden">
-      <!-- 顶部资源栏 -->
-      <header v-if="planet" class="bg-card border-b px-4 sm:px-6 py-4.5 shadow-md">
-        <div class="flex items-center justify-between gap-3 sm:gap-6">
-          <!-- 汉堡菜单（移动端）- 左侧占位 -->
-          <div class="lg:flex-1">
-            <Button @click="toggleSidebar" variant="ghost" size="icon" class="lg:hidden h-8 w-8">
-              <component :is="gameStore.sidebarCollapsed ? Menu : X" class="h-5 w-5" />
-            </Button>
-          </div>
+    <SidebarInset>
+      <div class="flex flex-col h-full overflow-hidden">
+        <!-- 顶部资源栏 -->
+        <header v-if="planet" class="bg-card border-b px-4 sm:px-6 py-6.5 shadow-md">
+          <div class="flex items-center justify-between gap-3 sm:gap-6">
+            <!-- 汉堡菜单（移动端）- 左侧占位 -->
+            <div class="lg:flex-1">
+              <SidebarTrigger class="lg:hidden" />
+            </div>
 
-          <!-- 资源显示 - PC端居中 -->
-          <div class="flex items-center gap-3 sm:gap-6 flex-1 lg:flex-none overflow-x-auto lg:justify-center">
-            <div v-for="resourceType in resourceTypes" :key="resourceType.key" class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
-              <ResourceIcon :type="resourceType.key" size="md" />
-              <div class="min-w-0">
-                <!-- 电量显示 -->
-                <template v-if="resourceType.key === 'energy'">
-                  <p
-                    class="text-xs sm:text-sm font-medium truncate"
-                    :class="
-                      planet.resources[resourceType.key] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
-                    "
-                  >
-                    {{ formatNumber(planet.resources[resourceType.key]) }}
-                  </p>
-                  <p class="text-[10px] sm:text-xs text-muted-foreground truncate">
-                    {{ formatNumber(energyProduction || 0) }} / {{ formatNumber(energyConsumption || 0) }}
-                  </p>
-                </template>
-                <!-- 其他资源显示 -->
-                <template v-else>
+            <!-- 资源显示 - PC端居中 -->
+            <div class="flex items-center gap-3 sm:gap-6 flex-1 lg:flex-none overflow-x-auto lg:justify-center">
+              <div v-for="resourceType in resourceTypes" :key="resourceType.key" class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
+                <ResourceIcon :type="resourceType.key" size="md" />
+                <div class="min-w-0">
+                  <!-- 所有资源统一显示：当前值/容量 -->
                   <p
                     class="text-xs sm:text-sm font-medium truncate"
                     :class="getResourceColor(planet.resources[resourceType.key], capacity?.[resourceType.key] || Infinity)"
@@ -152,105 +133,116 @@
                     {{ formatNumber(planet.resources[resourceType.key]) }} / {{ formatNumber(capacity?.[resourceType.key] || 0) }}
                   </p>
                   <p class="text-[10px] sm:text-xs text-muted-foreground truncate">
-                    +{{ formatNumber(production?.[resourceType.key] || 0) }}/{{ t('resources.perHour') }}
+                    +{{ formatNumber(Math.round((production?.[resourceType.key] || 0) / 60)) }}/{{ t('resources.perMinute') }}
                   </p>
-                </template>
+                </div>
+              </div>
+            </div>
+
+            <!-- 右侧状态 - 右侧占位 -->
+            <div class="flex items-center gap-2 sm:gap-4 flex-shrink-0 lg:flex-1 lg:justify-end">
+              <!-- 建造队列状态 -->
+              <div v-if="planet.buildQueue.length > 0" class="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
+                <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+                <span class="text-muted-foreground hidden sm:inline">{{ t('queue.building') }}</span>
+              </div>
+              <div v-if="gameStore.player.researchQueue.length > 0" class="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
+                <div class="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
+                <span class="text-muted-foreground hidden sm:inline">{{ t('queue.researching') }}</span>
               </div>
             </div>
           </div>
+        </header>
 
-          <!-- 右侧状态 - 右侧占位 -->
-          <div class="flex items-center gap-2 sm:gap-4 flex-shrink-0 lg:flex-1 lg:justify-end">
-            <!-- 建造队列状态 -->
-            <div v-if="planet.buildQueue.length > 0" class="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
-              <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
-              <span class="text-muted-foreground hidden sm:inline">{{ t('queue.building') }}</span>
+        <!-- 建造队列 -->
+        <div
+          v-if="planet && (planet.buildQueue.length > 0 || gameStore.player.researchQueue.length > 0)"
+          class="bg-card border-b px-4 sm:px-6 py-4.5"
+        >
+          <div class="space-y-3">
+            <!-- 建造队列 -->
+            <div v-for="item in planet.buildQueue" :key="item.id" class="space-y-1.5">
+              <div class="flex items-center justify-between text-xs sm:text-sm gap-2">
+                <div class="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
+                  <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse flex-shrink-0" />
+                  <span class="font-medium truncate">{{ getItemName(item) }}</span>
+                  <span class="text-muted-foreground hidden sm:inline flex-shrink-0 text-[10px] sm:text-xs">
+                    <template v-if="item.type === 'ship' || item.type === 'defense'">
+                      → {{ t('queue.quantity') }} {{ item.quantity }}
+                    </template>
+                    <template v-else>→ {{ t('queue.level') }} {{ item.targetLevel }}</template>
+                  </span>
+                </div>
+                <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
+                  <span class="text-muted-foreground text-[10px] sm:text-xs whitespace-nowrap">
+                    {{ formatTime(getRemainingTime(item)) }}
+                  </span>
+                  <Button
+                    @click="handleCancelBuild(item.id)"
+                    variant="ghost"
+                    size="sm"
+                    class="h-5 sm:h-6 px-1.5 sm:px-2 text-[10px] sm:text-xs"
+                  >
+                    {{ t('queue.cancel') }}
+                  </Button>
+                </div>
+              </div>
+              <Progress :model-value="getQueueProgress(item)" class="h-1.5" />
             </div>
-            <div v-if="gameStore.player.researchQueue.length > 0" class="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
-              <div class="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
-              <span class="text-muted-foreground hidden sm:inline">{{ t('queue.researching') }}</span>
+            <!-- 研究队列 -->
+            <div v-for="item in gameStore.player.researchQueue" :key="item.id" class="space-y-1.5">
+              <div class="flex items-center justify-between text-xs sm:text-sm gap-2">
+                <div class="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
+                  <div class="h-2 w-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
+                  <span class="font-medium truncate">{{ getItemName(item) }}</span>
+                  <span class="text-muted-foreground hidden sm:inline flex-shrink-0 text-[10px] sm:text-xs">
+                    → {{ t('queue.level') }} {{ item.targetLevel }}
+                  </span>
+                </div>
+                <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
+                  <span class="text-muted-foreground text-[10px] sm:text-xs whitespace-nowrap">
+                    {{ formatTime(getRemainingTime(item)) }}
+                  </span>
+                  <Button
+                    @click="handleCancelResearch(item.id)"
+                    variant="ghost"
+                    size="sm"
+                    class="h-5 sm:h-6 px-1.5 sm:px-2 text-[10px] sm:text-xs"
+                  >
+                    {{ t('queue.cancel') }}
+                  </Button>
+                </div>
+              </div>
+              <Progress :model-value="getQueueProgress(item)" class="h-1.5" />
             </div>
           </div>
         </div>
-      </header>
 
-      <!-- 建造队列 -->
-      <div
-        v-if="planet && (planet.buildQueue.length > 0 || gameStore.player.researchQueue.length > 0)"
-        class="bg-card border-b px-4 sm:px-6 py-4.5"
-      >
-        <div class="space-y-3">
-          <!-- 建造队列 -->
-          <div v-for="item in planet.buildQueue" :key="item.id" class="space-y-1.5">
-            <div class="flex items-center justify-between text-xs sm:text-sm gap-2">
-              <div class="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
-                <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse flex-shrink-0" />
-                <span class="font-medium truncate">{{ getItemName(item) }}</span>
-                <span class="text-muted-foreground hidden sm:inline flex-shrink-0 text-[10px] sm:text-xs">
-                  → {{ t('queue.level') }} {{ item.targetLevel }}
-                </span>
-              </div>
-              <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-                <span class="text-muted-foreground text-[10px] sm:text-xs whitespace-nowrap">{{ formatTime(getRemainingTime(item)) }}</span>
-                <Button
-                  @click="handleCancelBuild(item.id)"
-                  variant="ghost"
-                  size="sm"
-                  class="h-5 sm:h-6 px-1.5 sm:px-2 text-[10px] sm:text-xs"
-                >
-                  {{ t('queue.cancel') }}
-                </Button>
-              </div>
-            </div>
-            <Progress :model-value="getQueueProgress(item)" class="h-1.5" />
+        <!-- 内容区域 -->
+        <main class="flex-1 overflow-y-auto">
+          <div class="animate-fade-in">
+            <RouterView />
           </div>
-          <!-- 研究队列 -->
-          <div v-for="item in gameStore.player.researchQueue" :key="item.id" class="space-y-1.5">
-            <div class="flex items-center justify-between text-xs sm:text-sm gap-2">
-              <div class="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
-                <div class="h-2 w-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" />
-                <span class="font-medium truncate">{{ getItemName(item) }}</span>
-                <span class="text-muted-foreground hidden sm:inline flex-shrink-0 text-[10px] sm:text-xs">
-                  → {{ t('queue.level') }} {{ item.targetLevel }}
-                </span>
-              </div>
-              <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-                <span class="text-muted-foreground text-[10px] sm:text-xs whitespace-nowrap">{{ formatTime(getRemainingTime(item)) }}</span>
-                <Button
-                  @click="handleCancelResearch(item.id)"
-                  variant="ghost"
-                  size="sm"
-                  class="h-5 sm:h-6 px-1.5 sm:px-2 text-[10px] sm:text-xs"
-                >
-                  {{ t('queue.cancel') }}
-                </Button>
-              </div>
-            </div>
-            <Progress :model-value="getQueueProgress(item)" class="h-1.5" />
-          </div>
-        </div>
+        </main>
       </div>
-
-      <!-- 内容区域 -->
-      <main class="flex-1 overflow-y-auto">
-        <div class="animate-fade-in">
-          <RouterView />
-        </div>
-      </main>
-    </div>
+    </SidebarInset>
 
     <!-- 确认对话框 -->
     <ConfirmDialog ref="confirmDialog" />
 
     <!-- 详情弹窗 -->
     <DetailDialog />
-  </div>
+
+    <!-- Toast 通知 -->
+    <Sonner position="top-center" />
+  </SidebarProvider>
 </template>
 
 <script setup lang="ts">
   import { onMounted, onUnmounted, computed, ref } from 'vue'
   import { RouterView, RouterLink } from 'vue-router'
   import { useGameStore } from '@/stores/gameStore'
+  import { useUniverseStore } from '@/stores/universeStore'
   import { useTheme } from '@/composables/useTheme'
   import { useI18n } from '@/composables/useI18n'
   import { localeNames, detectBrowserLocale, type Locale } from '@/locales'
@@ -258,12 +250,26 @@
   import { Badge } from '@/components/ui/badge'
   import { Progress } from '@/components/ui/progress'
   import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
+  import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarHeader,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuBadge,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarProvider,
+    SidebarTrigger
+  } from '@/components/ui/sidebar'
   import ResourceIcon from '@/components/ResourceIcon.vue'
   import ConfirmDialog from '@/components/ConfirmDialog.vue'
   import DetailDialog from '@/components/DetailDialog.vue'
-  import { BuildingType, TechnologyType, ShipType, DefenseType, MissionType } from '@/types/game'
+  import Sonner from '@/components/ui/sonner/Sonner.vue'
+  import { MissionType } from '@/types/game'
   import type { BuildQueueItem, FleetMission } from '@/types/game'
-  import { BUILDINGS, TECHNOLOGIES, SHIPS, DEFENSES } from '@/config/gameConfig'
   import { formatNumber, formatTime, getResourceColor } from '@/utils/format'
   import {
     Moon,
@@ -276,18 +282,15 @@
     Shield,
     Mail,
     Globe,
-    ChevronLeft,
-    ChevronRight,
-    Menu,
-    X,
     Users,
     Swords,
     Languages,
-    Settings
+    Settings,
+    Wrench,
+    ChevronsLeft
   } from 'lucide-vue-next'
   import * as gameLogic from '@/logic/gameLogic'
   import * as planetLogic from '@/logic/planetLogic'
-  import * as publicLogic from '@/logic/publicLogic'
   import * as officerLogic from '@/logic/officerLogic'
   import * as buildingValidation from '@/logic/buildingValidation'
   import * as resourceLogic from '@/logic/resourceLogic'
@@ -295,8 +298,13 @@
   import * as fleetLogic from '@/logic/fleetLogic'
   import * as shipLogic from '@/logic/shipLogic'
   import pkg from '../package.json'
+  import { migrateGameData } from '@/utils/migration'
+
+  // 执行数据迁移（在 store 初始化之前）
+  migrateGameData()
 
   const gameStore = useGameStore()
+  const universeStore = useUniverseStore()
   const { isDark } = useTheme()
   const { t } = useI18n()
   const confirmDialog = ref<InstanceType<typeof ConfirmDialog> | null>(null)
@@ -304,15 +312,21 @@
   // 所有可用的语言选项
   const locales: Locale[] = ['zh-CN', 'zh-TW', 'en', 'de', 'ru', 'ko', 'ja']
 
-  const initGame = () => {
+  // 侧边栏状态（不持久化，根据屏幕尺寸初始化）
+  // PC端（≥1024px）默认打开，移动端默认关闭
+  const sidebarOpen = ref(window.innerWidth >= 1024)
+
+  const initGame = async () => {
     const shouldInit = gameLogic.shouldInitializeGame(gameStore.player.planets)
     if (!shouldInit) {
       const now = Date.now()
-      gameLogic.updatePlanetsLastUpdate(gameStore.player.planets, now)
+
+      // 计算离线收益（直接同步计算）
+      const bonuses = officerLogic.calculateActiveBonuses(gameStore.player.officers, now)
       gameStore.player.planets.forEach(planet => {
-        const key = gameLogic.generatePositionKey(planet.position.galaxy, planet.position.system, planet.position.position)
-        gameStore.universePlanets[key] = planet
+        resourceLogic.updatePlanetResources(planet, now, bonuses)
       })
+
       generateNPCPlanets()
       return
     }
@@ -320,8 +334,6 @@
     const initialPlanet = planetLogic.createInitialPlanet(gameStore.player.id, t('planet.homePlanet'))
     gameStore.player.planets = [initialPlanet]
     gameStore.currentPlanetId = initialPlanet.id
-    const key = gameLogic.generatePositionKey(initialPlanet.position.galaxy, initialPlanet.position.system, initialPlanet.position.position)
-    gameStore.universePlanets[key] = initialPlanet
   }
 
   const generateNPCPlanets = () => {
@@ -329,9 +341,9 @@
     for (let i = 0; i < npcCount; i++) {
       const position = gameLogic.generateRandomPosition()
       const key = gameLogic.generatePositionKey(position.galaxy, position.system, position.position)
-      if (gameStore.universePlanets[key]) continue
+      if (universeStore.planets[key]) continue
       const npcPlanet = planetLogic.createNPCPlanet(i, position, t('planet.planetPrefix'))
-      gameStore.universePlanets[key] = npcPlanet
+      universeStore.planets[key] = npcPlanet
     }
   }
 
@@ -339,9 +351,12 @@
     if (gameStore.isPaused) return
     const now = Date.now()
     gameStore.gameTime = now
+    // 检查军官过期
     gameLogic.checkOfficersExpiration(gameStore.player.officers, now)
+    // 处理游戏更新（建造队列、研究队列等）
     const result = gameLogic.processGameUpdate(gameStore.player, now)
     gameStore.player.researchQueue = result.updatedResearchQueue
+    // 处理舰队任务
     gameStore.player.fleetMissions.forEach(mission => {
       if (mission.status === 'outbound' && now >= mission.arrivalTime) {
         processMissionArrival(mission)
@@ -351,27 +366,41 @@
     })
   }
 
-  const processMissionArrival = (mission: FleetMission) => {
-    const targetPlanet = gameStore.player.planets.find(
-      p =>
-        p.position.galaxy === mission.targetPosition.galaxy &&
-        p.position.system === mission.targetPosition.system &&
-        p.position.position === mission.targetPosition.position
+  const processMissionArrival = async (mission: FleetMission) => {
+    // 从宇宙星球地图中查找目标星球
+    const targetKey = gameLogic.generatePositionKey(
+      mission.targetPosition.galaxy,
+      mission.targetPosition.system,
+      mission.targetPosition.position
     )
+    // 先从玩家星球中查找，再从宇宙地图中查找
+    const targetPlanet =
+      gameStore.player.planets.find(
+        p =>
+          p.position.galaxy === mission.targetPosition.galaxy &&
+          p.position.system === mission.targetPosition.system &&
+          p.position.position === mission.targetPosition.position
+      ) || universeStore.planets[targetKey]
 
     if (mission.missionType === MissionType.Transport) {
       fleetLogic.processTransportArrival(mission, targetPlanet)
     } else if (mission.missionType === MissionType.Attack) {
-      const attackResult = fleetLogic.processAttackArrival(mission, targetPlanet, gameStore.player, null, gameStore.player.planets)
+      const attackResult = await fleetLogic.processAttackArrival(mission, targetPlanet, gameStore.player, null, gameStore.player.planets)
       if (attackResult) {
         gameStore.player.battleReports.push(attackResult.battleResult)
         if (attackResult.moon) {
           gameStore.player.planets.push(attackResult.moon)
         }
+        if (attackResult.debrisField) {
+          // 将残骸场添加到游戏状态
+          universeStore.debrisFields[attackResult.debrisField.id] = attackResult.debrisField
+        }
       }
     } else if (mission.missionType === MissionType.Colonize) {
       const newPlanet = fleetLogic.processColonizeArrival(mission, targetPlanet, gameStore.player.id, t('planet.colonyPrefix'))
-      if (newPlanet) gameStore.player.planets.push(newPlanet)
+      if (newPlanet) {
+        gameStore.player.planets.push(newPlanet)
+      }
     } else if (mission.missionType === MissionType.Spy) {
       const spyReport = fleetLogic.processSpyArrival(mission, targetPlanet, gameStore.player.id)
       if (spyReport) gameStore.player.spyReports.push(spyReport)
@@ -382,6 +411,42 @@
         if (missionIndex > -1) gameStore.player.fleetMissions.splice(missionIndex, 1)
         return
       }
+    } else if (mission.missionType === MissionType.Recycle) {
+      // 处理回收任务
+      const debrisId = `debris_${mission.targetPosition.galaxy}_${mission.targetPosition.system}_${mission.targetPosition.position}`
+      const debrisField = universeStore.debrisFields[debrisId]
+      const recycleResult = fleetLogic.processRecycleArrival(mission, debrisField)
+      if (recycleResult && debrisField) {
+        if (recycleResult.remainingDebris && (recycleResult.remainingDebris.metal > 0 || recycleResult.remainingDebris.crystal > 0)) {
+          // 更新残骸场
+          universeStore.debrisFields[debrisId] = {
+            id: debrisField.id,
+            position: debrisField.position,
+            resources: recycleResult.remainingDebris,
+            createdAt: debrisField.createdAt,
+            expiresAt: debrisField.expiresAt
+          }
+        } else {
+          // 残骸场已被完全收集，删除
+          delete universeStore.debrisFields[debrisId]
+        }
+      }
+    } else if (mission.missionType === MissionType.Destroy) {
+      // 处理行星毁灭任务
+      const destroyResult = fleetLogic.processDestroyArrival(mission, targetPlanet, gameStore.player)
+      if (destroyResult && destroyResult.success && destroyResult.planetId) {
+        // 星球被摧毁
+        // 从玩家星球列表中移除（如果是玩家的星球）
+        const planetIndex = gameStore.player.planets.findIndex(p => p.id === destroyResult.planetId)
+        if (planetIndex > -1) {
+          gameStore.player.planets.splice(planetIndex, 1)
+        } else {
+          // 不是玩家星球，从宇宙地图中移除
+          delete universeStore.planets[targetKey]
+        }
+
+        // TODO: 可以添加战斗报告或摧毁报告来通知玩家结果
+      }
     }
   }
 
@@ -394,27 +459,31 @@
     if (missionIndex > -1) gameStore.player.fleetMissions.splice(missionIndex, 1)
   }
 
+  // 游戏循环定时器
+  let gameLoop: ReturnType<typeof setInterval> | null = null
+
+  // 清理定时器
+  onUnmounted(() => {
+    if (gameLoop) clearInterval(gameLoop)
+  })
+
   // 初始化游戏
-  onMounted(() => {
+  onMounted(async () => {
     // 如果是首次访问（没有星球数据），使用浏览器语言自动检测
     const isFirstVisit = gameStore.player.planets.length === 0
     if (isFirstVisit) {
       gameStore.locale = detectBrowserLocale()
     }
-
-    initGame()
-
+    await initGame()
     // 启动游戏循环
-    const gameLoop = setInterval(() => {
+    gameLoop = setInterval(() => {
       updateGame()
-    }, 1000) // 每秒更新一次
-
-    // 清理定时器
-    onUnmounted(() => {
-      clearInterval(gameLoop)
-    })
+    }, 1000) // 每1秒更新一次
   })
 
+  // 定义 planet computed（需要在 watch 之前定义）
+  const planet = computed(() => gameStore.currentPlanet)
+
   const navItems = [
     { name: computed(() => t('nav.overview')), path: '/', icon: Home },
     { name: computed(() => t('nav.buildings')), path: '/buildings', icon: Building2 },
@@ -426,23 +495,35 @@
     { name: computed(() => t('nav.simulator')), path: '/battle-simulator', icon: Swords },
     { name: computed(() => t('nav.galaxy')), path: '/galaxy', icon: Globe },
     { name: computed(() => t('nav.messages')), path: '/messages', icon: Mail },
-    { name: computed(() => t('nav.settings')), path: '/settings', icon: Settings }
+    { name: computed(() => t('nav.settings')), path: '/settings', icon: Settings },
+    // GM菜单仅在开发模式下显示
+    ...(import.meta.env.DEV ? [{ name: computed(() => t('nav.gm')), path: '/gm', icon: Wrench }] : [])
   ]
 
-  const planet = computed(() => gameStore.currentPlanet)
-  const production = computed(() => (planet.value ? publicLogic.getResourceProduction(planet.value, gameStore.player.officers) : null))
-  const capacity = computed(() => (planet.value ? publicLogic.getResourceCapacity(planet.value, gameStore.player.officers) : null))
-
-  // 电量产出和消耗
-  const energyProduction = computed(() => {
-    if (!planet.value) return 0
-    const bonuses = officerLogic.calculateActiveBonuses(gameStore.player.officers, Date.now())
-    return resourceLogic.calculateEnergyProduction(planet.value, { energyProductionBonus: bonuses.energyProductionBonus })
+  // 使用直接计算，不再缓存
+  const production = computed(() => {
+    if (!planet.value) return null
+    const now = Date.now()
+    const bonuses = officerLogic.calculateActiveBonuses(gameStore.player.officers, now)
+    return resourceLogic.calculateResourceProduction(planet.value, {
+      resourceProductionBonus: bonuses.resourceProductionBonus,
+      darkMatterProductionBonus: bonuses.darkMatterProductionBonus,
+      energyProductionBonus: bonuses.energyProductionBonus
+    })
   })
 
-  const energyConsumption = computed(() => {
-    if (!planet.value) return 0
-    return resourceLogic.calculateEnergyConsumption(planet.value)
+  const capacity = computed(() => {
+    if (!planet.value) return null
+    const now = Date.now()
+    const bonuses = officerLogic.calculateActiveBonuses(gameStore.player.officers, now)
+    return resourceLogic.calculateResourceCapacity(planet.value, bonuses.storageCapacityBonus)
+  })
+
+  // 未读消息数量
+  const unreadMessagesCount = computed(() => {
+    const unreadBattles = gameStore.player.battleReports.filter(r => !r.read).length
+    const unreadSpies = gameStore.player.spyReports.filter(r => !r.read).length
+    return unreadBattles + unreadSpies
   })
 
   // 资源类型配置
@@ -477,20 +558,20 @@
 
   // 切换侧边栏
   const toggleSidebar = () => {
-    gameStore.sidebarCollapsed = !gameStore.sidebarCollapsed
+    sidebarOpen.value = !sidebarOpen.value
   }
 
   // 获取队列项的名称
   const getItemName = (item: BuildQueueItem): string => {
     if (item.type === 'building' || item.type === 'demolish') {
-      const buildingName = BUILDINGS[item.itemType as BuildingType]?.name || item.itemType
+      const buildingName = t(`buildings.${item.itemType}`)
       return item.type === 'demolish' ? `${t('buildingsView.demolish')} - ${buildingName}` : buildingName
     } else if (item.type === 'technology') {
-      return TECHNOLOGIES[item.itemType as TechnologyType]?.name || item.itemType
+      return t(`technologies.${item.itemType}`)
     } else if (item.type === 'ship') {
-      return SHIPS[item.itemType as ShipType]?.name || item.itemType
+      return t(`ships.${item.itemType}`)
     } else if (item.type === 'defense') {
-      return DEFENSES[item.itemType as DefenseType]?.name || item.itemType
+      return t(`defenses.${item.itemType}`)
     }
     return item.itemType
   }

src/components/BattleReportDialog.vue

@@ -0,0 +1,334 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="max-w-4xl max-h-[90vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle class="flex items-center gap-2">
+          <Trophy class="h-5 w-5" />
+          {{ t('messagesView.battleReport') }}
+        </DialogTitle>
+        <DialogDescription v-if="report">
+          {{ formatDate(report.timestamp) }}
+        </DialogDescription>
+      </DialogHeader>
+      <div v-if="report" class="space-y-4">
+        <!-- 战斗双方信息 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+          <!-- 攻击方星球 -->
+          <div class="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
+            <p class="font-medium text-blue-600 dark:text-blue-400 mb-1">{{ t('simulatorView.attacker') }}</p>
+            <p v-if="attackerPlanet" class="text-xs text-muted-foreground">
+              {{ attackerPlanet.name }} [{{ attackerPlanet.position.galaxy }}:{{ attackerPlanet.position.system }}:{{
+                attackerPlanet.position.position
+              }}]
+            </p>
+            <p v-else class="text-xs text-muted-foreground">{{ report.attackerPlanetId }}</p>
+          </div>
+
+          <!-- 防守方星球 -->
+          <div class="p-3 bg-red-50 dark:bg-red-950/20 rounded-lg">
+            <p class="font-medium text-red-600 dark:text-red-400 mb-1">{{ t('simulatorView.defender') }}</p>
+            <p v-if="defenderPlanet" class="text-xs text-muted-foreground">
+              {{ defenderPlanet.name }} [{{ defenderPlanet.position.galaxy }}:{{ defenderPlanet.position.system }}:{{
+                defenderPlanet.position.position
+              }}]
+            </p>
+            <p v-else class="text-xs text-muted-foreground">{{ report.defenderPlanetId }}</p>
+          </div>
+        </div>
+
+        <!-- 胜利者 -->
+        <div class="text-center p-4 rounded-lg" :class="getWinnerStyle(report.winner)">
+          <p class="text-lg font-bold">
+            {{
+              report.winner === 'attacker'
+                ? t('messagesView.victory')
+                : report.winner === 'defender'
+                ? t('messagesView.defeat')
+                : t('messagesView.draw')
+            }}
+          </p>
+          <p v-if="report.rounds" class="text-sm mt-1">{{ t('simulatorView.afterRounds').replace('{rounds}', String(report.rounds)) }}</p>
+        </div>
+
+        <!-- 损失对比 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- 攻击方损失 -->
+          <div class="space-y-2">
+            <p class="text-sm font-medium text-red-600 dark:text-red-400">{{ t('messagesView.attackerLosses') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.attackerLosses" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <p v-if="Object.keys(report.attackerLosses).length === 0" class="text-muted-foreground">
+                {{ t('messagesView.noLosses') }}
+              </p>
+            </div>
+          </div>
+
+          <!-- 防守方损失 -->
+          <div class="space-y-2">
+            <p class="text-sm font-medium text-red-600 dark:text-red-400">{{ t('messagesView.defenderLosses') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.defenderLosses.fleet" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <div v-for="(count, defenseType) in report.defenderLosses.defense" :key="defenseType">
+                <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <p
+                v-if="Object.keys(report.defenderLosses.fleet).length === 0 && Object.keys(report.defenderLosses.defense).length === 0"
+                class="text-muted-foreground"
+              >
+                {{ t('messagesView.noLosses') }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 剩余单位 -->
+        <div v-if="report.attackerRemaining || report.defenderRemaining" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- 攻击方剩余 -->
+          <div v-if="report.attackerRemaining && Object.keys(report.attackerRemaining).length > 0" class="space-y-2">
+            <p class="text-sm font-medium text-blue-600 dark:text-blue-400">{{ t('messagesView.attackerRemaining') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.attackerRemaining" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 防守方剩余 -->
+          <div
+            v-if="
+              report.defenderRemaining &&
+              (Object.keys(report.defenderRemaining.fleet || {}).length > 0 ||
+                Object.keys(report.defenderRemaining.defense || {}).length > 0)
+            "
+            class="space-y-2"
+          >
+            <p class="text-sm font-medium text-blue-600 dark:text-blue-400">{{ t('messagesView.defenderRemaining') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.defenderRemaining.fleet" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <div v-for="(count, defenseType) in report.defenderRemaining.defense" :key="defenseType">
+                <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 战利品和残骸 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- 掠夺资源 -->
+          <div
+            v-if="report.plunder && (report.plunder.metal > 0 || report.plunder.crystal > 0 || report.plunder.deuterium > 0)"
+            class="p-3 bg-green-50 dark:bg-green-950 rounded-lg"
+          >
+            <p class="text-sm font-medium mb-2 text-green-600 dark:text-green-400">{{ t('messagesView.plunder') }}</p>
+            <div class="flex flex-wrap gap-3 text-xs">
+              <span v-if="report.plunder.metal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="metal" size="sm" />
+                {{ formatNumber(report.plunder.metal) }}
+              </span>
+              <span v-if="report.plunder.crystal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="crystal" size="sm" />
+                {{ formatNumber(report.plunder.crystal) }}
+              </span>
+              <span v-if="report.plunder.deuterium > 0" class="flex items-center gap-1">
+                <ResourceIcon type="deuterium" size="sm" />
+                {{ formatNumber(report.plunder.deuterium) }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 残骸场 -->
+          <div
+            v-if="report.debrisField && (report.debrisField.metal > 0 || report.debrisField.crystal > 0)"
+            class="p-3 bg-muted rounded-lg"
+          >
+            <p class="text-sm font-medium mb-2">{{ t('messagesView.debrisField') }}</p>
+            <div class="flex flex-wrap gap-3 text-xs">
+              <span v-if="report.debrisField.metal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="metal" size="sm" />
+                {{ formatNumber(report.debrisField.metal) }}
+              </span>
+              <span v-if="report.debrisField.crystal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="crystal" size="sm" />
+                {{ formatNumber(report.debrisField.crystal) }}
+              </span>
+            </div>
+            <!-- 月球生成概率 -->
+            <p v-if="report.moonChance && report.moonChance > 0" class="text-xs text-muted-foreground mt-2">
+              {{ t('messagesView.moonChance') }}: {{ (report.moonChance * 100).toFixed(1) }}%
+            </p>
+          </div>
+        </div>
+
+        <!-- 回合详情 -->
+        <div v-if="report.roundDetails && report.roundDetails.length > 0" class="space-y-2">
+          <Button @click="showRoundDetails = !showRoundDetails" variant="outline" size="sm" class="w-full">
+            {{ showRoundDetails ? t('messagesView.hideRoundDetails') : t('messagesView.showRoundDetails') }}
+          </Button>
+
+          <div v-if="showRoundDetails" class="relative pl-6 space-y-4">
+            <!-- 时间线 -->
+            <div class="absolute left-2 top-0 bottom-0 w-0.5 bg-border" />
+
+            <div v-for="detail in report.roundDetails" :key="detail.round" class="relative">
+              <!-- 时间线节点 -->
+              <div class="absolute -left-6 top-3 w-4 h-4 rounded-full bg-primary border-2 border-background" />
+
+              <!-- 回合内容卡片 -->
+              <div class="border rounded-lg p-3 bg-card hover:shadow-md transition-shadow">
+                <div class="flex items-center justify-between mb-3">
+                  <p class="text-sm font-semibold">{{ t('messagesView.round').replace('{round}', String(detail.round)) }}</p>
+                  <TooltipProvider :delay-duration="300">
+                    <div class="flex gap-3 text-xs text-muted-foreground">
+                      <Tooltip>
+                        <TooltipTrigger as-child>
+                          <span class="flex items-center gap-1">
+                            <Sword class="h-3 w-3" />
+                            {{ formatNumber(detail.attackerRemainingPower) }}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{{ t('messagesView.attackerRemainingPower') }}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger as-child>
+                          <span class="flex items-center gap-1">
+                            <Shield class="h-3 w-3" />
+                            {{ formatNumber(detail.defenderRemainingPower) }}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{{ t('messagesView.defenderRemainingPower') }}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+                  </TooltipProvider>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <!-- 攻击方本回合损失 -->
+                  <div class="bg-red-50 dark:bg-red-950/20 rounded p-2">
+                    <p class="text-xs font-medium text-red-600 dark:text-red-400 mb-1.5">{{ t('messagesView.attackerLosses') }}</p>
+                    <div class="text-xs space-y-0.5">
+                      <div v-for="(count, shipType) in detail.attackerLosses" :key="shipType" class="flex justify-between">
+                        <span class="text-muted-foreground">{{ SHIPS[shipType].name }}</span>
+                        <span class="font-medium">-{{ count }}</span>
+                      </div>
+                      <p v-if="Object.keys(detail.attackerLosses).length === 0" class="text-muted-foreground italic">
+                        {{ t('messagesView.noLosses') }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <!-- 防守方本回合损失 -->
+                  <div class="bg-blue-50 dark:bg-blue-950/20 rounded p-2">
+                    <p class="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1.5">{{ t('messagesView.defenderLosses') }}</p>
+                    <div class="text-xs space-y-0.5">
+                      <div v-for="(count, shipType) in detail.defenderLosses.fleet" :key="shipType" class="flex justify-between">
+                        <span class="text-muted-foreground">{{ SHIPS[shipType].name }}</span>
+                        <span class="font-medium">-{{ count }}</span>
+                      </div>
+                      <div v-for="(count, defenseType) in detail.defenderLosses.defense" :key="defenseType" class="flex justify-between">
+                        <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}</span>
+                        <span class="font-medium">-{{ count }}</span>
+                      </div>
+                      <p
+                        v-if="
+                          Object.keys(detail.defenderLosses.fleet).length === 0 && Object.keys(detail.defenderLosses.defense).length === 0
+                        "
+                        class="text-muted-foreground italic"
+                      >
+                        {{ t('messagesView.noLosses') }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { useGameStore } from '@/stores/gameStore'
+  import { useUniverseStore } from '@/stores/universeStore'
+  import { useI18n } from '@/composables/useI18n'
+  import { useGameConfig } from '@/composables/useGameConfig'
+  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+  import { Button } from '@/components/ui/button'
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+  import ResourceIcon from '@/components/ResourceIcon.vue'
+  import { formatNumber, formatDate } from '@/utils/format'
+  import { Trophy, Sword, Shield } from 'lucide-vue-next'
+  import type { BattleResult } from '@/types/game'
+
+  const props = defineProps<{
+    report: BattleResult | null
+    open: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:open', value: boolean): void
+  }>()
+
+  const gameStore = useGameStore()
+  const universeStore = useUniverseStore()
+  const { t } = useI18n()
+  const { SHIPS, DEFENSES } = useGameConfig()
+
+  const isOpen = ref(props.open)
+  const showRoundDetails = ref(false)
+
+  // 获取攻击方星球信息
+  const attackerPlanet = computed(() => {
+    if (!props.report) return null
+    return gameStore.player.planets.find(p => p.id === props.report!.attackerPlanetId)
+  })
+
+  // 获取防守方星球信息
+  const defenderPlanet = computed(() => {
+    if (!props.report) return null
+    // 先从玩家星球中查找
+    const playerPlanet = gameStore.player.planets.find(p => p.id === props.report!.defenderPlanetId)
+    if (playerPlanet) return playerPlanet
+    // 再从宇宙星球地图中查找
+    return Object.values(universeStore.planets).find(p => p.id === props.report!.defenderPlanetId)
+  })
+
+  watch(
+    () => props.open,
+    newValue => {
+      isOpen.value = newValue
+      if (newValue) {
+        showRoundDetails.value = false
+      }
+    }
+  )
+
+  watch(isOpen, newValue => {
+    emit('update:open', newValue)
+  })
+
+  // 获取胜利者样式
+  const getWinnerStyle = (winner: string) => {
+    if (winner === 'attacker') return 'bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300'
+    if (winner === 'defender') return 'bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300'
+    return 'bg-gray-50 dark:bg-gray-950 text-gray-700 dark:text-gray-300'
+  }
+</script>

src/components/CardUnlockOverlay.vue

@@ -30,6 +30,7 @@
 
   interface Props {
     requirements?: Partial<Record<BuildingType | TechnologyType, number>>
+    currentLevel?: number // 当前建筑/科技等级，用于判断是否已解锁
   }
 
   const props = defineProps<Props>()
@@ -39,6 +40,8 @@
   const requirementsDialog = ref<InstanceType<typeof AlertDialog> | null>(null)
 
   const isUnlocked = computed(() => {
+    // 如果已经建造过（level > 0），则认为已解锁，不显示遮罩
+    if (props.currentLevel !== undefined && props.currentLevel > 0) return true
     if (!props.requirements || !gameStore.currentPlanet) return true
     return publicLogic.checkRequirements(gameStore.currentPlanet, gameStore.player.technologies, props.requirements)
   })

src/components/NumberWithTooltip.vue

@@ -0,0 +1,50 @@
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <span class="cursor-pointer underline decoration-dotted underline-offset-4 touch-manipulation">{{ abbreviatedValue }}</span>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-2" side="top" align="center">
+      <p class="font-mono text-sm">{{ formattedValue }}</p>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+  const props = defineProps<{
+    value: number
+  }>()
+
+  // 完整格式化的数字（带千位分隔符）
+  const formattedValue = computed(() => {
+    return props.value.toLocaleString()
+  })
+
+  // 缩写格式的数字
+  const abbreviatedValue = computed(() => {
+    const num = props.value
+
+    // 小于1000直接显示
+    if (num < 1000) {
+      return num.toString()
+    }
+
+    // 1000 - 999,999: 使用 K (千)
+    if (num < 1000000) {
+      const k = num / 1000
+      return k % 1 === 0 ? `${k}K` : `${k.toFixed(1)}K`
+    }
+
+    // 1,000,000 - 999,999,999: 使用 M (百万)
+    if (num < 1000000000) {
+      const m = num / 1000000
+      return m % 1 === 0 ? `${m}M` : `${m.toFixed(1)}M`
+    }
+
+    // 1,000,000,000+: 使用 B (十亿)
+    const b = num / 1000000000
+    return b % 1 === 0 ? `${b}B` : `${b.toFixed(1)}B`
+  })
+</script>

src/components/SpyReportDialog.vue

@@ -0,0 +1,141 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle class="flex items-center gap-2">
+          <Eye class="h-5 w-5" />
+          {{ t('messagesView.spyReport') }}
+        </DialogTitle>
+        <DialogDescription v-if="report">
+          {{ formatDate(report.timestamp) }}
+        </DialogDescription>
+      </DialogHeader>
+      <div v-if="report" class="space-y-4">
+        <!-- 目标星球信息 -->
+        <div class="p-3 bg-muted rounded-lg">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.targetPlanet') }}</p>
+          <p v-if="targetPlanet" class="text-xs text-muted-foreground">
+            {{ targetPlanet.name }} [{{ targetPlanet.position.galaxy }}:{{ targetPlanet.position.system }}:{{
+              targetPlanet.position.position
+            }}]
+          </p>
+          <p v-else class="text-xs text-muted-foreground">{{ report.targetPlanetId }}</p>
+        </div>
+
+        <!-- 资源 -->
+        <div>
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.resources') }}:</p>
+          <div class="flex flex-wrap gap-3 text-xs sm:text-sm">
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="metal" size="sm" />
+              {{ formatNumber(report.resources.metal) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="crystal" size="sm" />
+              {{ formatNumber(report.resources.crystal) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="deuterium" size="sm" />
+              {{ formatNumber(report.resources.deuterium) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="darkMatter" size="sm" />
+              {{ formatNumber(report.resources.darkMatter) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 舰队（如果有） -->
+        <div v-if="report.fleet && Object.keys(report.fleet).length > 0">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.fleet') }}:</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm">
+            <div v-for="(count, shipType) in report.fleet" :key="shipType">
+              <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+              <span class="ml-1 font-medium">{{ count }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 防御设施（如果有） -->
+        <div v-if="report.defense && hasDefense(report.defense)">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.defense') }}:</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm">
+            <div v-for="(count, defenseType) in report.defense" :key="defenseType">
+              <span v-if="count && count > 0" class="block">
+                <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}:</span>
+                <span class="ml-1 font-medium">{{ count }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 建筑（如果有） -->
+        <div v-if="report.buildings && Object.keys(report.buildings).length > 0">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.buildings') }}:</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm">
+            <div v-for="(level, buildingType) in report.buildings" :key="buildingType">
+              <span class="text-muted-foreground">{{ BUILDINGS[buildingType].name }}:</span>
+              <span class="ml-1 font-medium">Lv.{{ level }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { useGameStore } from '@/stores/gameStore'
+  import { useUniverseStore } from '@/stores/universeStore'
+  import { useI18n } from '@/composables/useI18n'
+  import { useGameConfig } from '@/composables/useGameConfig'
+  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+  import ResourceIcon from '@/components/ResourceIcon.vue'
+  import { formatNumber, formatDate } from '@/utils/format'
+  import { Eye } from 'lucide-vue-next'
+  import type { SpyReport } from '@/types/game'
+
+  const props = defineProps<{
+    report: SpyReport | null
+    open: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:open', value: boolean): void
+  }>()
+
+  const gameStore = useGameStore()
+  const universeStore = useUniverseStore()
+  const { t } = useI18n()
+  const { SHIPS, DEFENSES, BUILDINGS } = useGameConfig()
+
+  const isOpen = ref(props.open)
+
+  // 获取目标星球信息
+  const targetPlanet = computed(() => {
+    if (!props.report) return null
+    // 先从玩家星球中查找
+    const playerPlanet = gameStore.player.planets.find(p => p.id === props.report!.targetPlanetId)
+    if (playerPlanet) return playerPlanet
+    // 再从宇宙星球地图中查找
+    return Object.values(universeStore.planets).find(p => p.id === props.report!.targetPlanetId)
+  })
+
+  watch(
+    () => props.open,
+    newValue => {
+      isOpen.value = newValue
+    }
+  )
+
+  watch(isOpen, newValue => {
+    emit('update:open', newValue)
+  })
+
+  // 检查是否有防御设施
+  const hasDefense = (defense: any): boolean => {
+    if (!defense) return false
+    return Object.values(defense).some((count: any) => count > 0)
+  }
+</script>

src/components/detail-views/BuildingDetailView.vue

@@ -21,24 +21,36 @@
               <Badge v-if="level === currentLevel" variant="default">{{ level }}</Badge>
               <span v-else>{{ level }}</span>
             </TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.metal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.crystal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.deuterium) }}</TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.metal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.crystal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.deuterium" />
+            </TableCell>
             <TableCell class="text-center text-sm">{{ formatTime(getLevelData(level).buildTime) }}</TableCell>
             <TableCell class="text-center text-sm">
               <span v-if="getLevelData(level).production > 0" class="text-green-600 dark:text-green-400">
-                +{{ formatNumber(getLevelData(level).production) }}/{{ t('resources.perHour') }}
+                +
+                <NumberWithTooltip :value="getLevelData(level).production" />
+                /{{ t('resources.perHour') }}
               </span>
               <span v-else>-</span>
             </TableCell>
             <TableCell class="text-center text-sm">
               <span v-if="getLevelData(level).consumption > 0" class="text-red-600 dark:text-red-400">
-                -{{ formatNumber(getLevelData(level).consumption) }}
+                -
+                <NumberWithTooltip :value="getLevelData(level).consumption" />
               </span>
               <span v-else>-</span>
             </TableCell>
             <TableCell class="text-center text-sm">
-              <span class="text-primary font-medium">+{{ getLevelData(level).points }}</span>
+              <span class="text-primary font-medium">
+                +
+                <NumberWithTooltip :value="getLevelData(level).points" />
+              </span>
             </TableCell>
           </TableRow>
         </TableBody>
@@ -54,15 +66,21 @@
         <CardContent class="space-y-2">
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.metal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.crystal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.deuterium" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -72,7 +90,9 @@
           <CardTitle class="text-sm">{{ t('buildings.totalPoints') }}</CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-3xl font-bold text-primary">{{ formatNumber(totalStats.points) }}</div>
+          <div class="text-3xl font-bold text-primary">
+            <NumberWithTooltip :value="totalStats.points" />
+          </div>
           <p class="text-xs text-muted-foreground mt-1">
             {{ t('buildings.levelRange') }}: {{ Math.max(0, currentLevel - 10) }} - {{ Math.min(currentLevel + 10, currentLevel + 10) }}
           </p>
@@ -89,8 +109,10 @@
   import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Badge } from '@/components/ui/badge'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import * as buildingLogic from '@/logic/buildingLogic'
   import * as pointsLogic from '@/logic/pointsLogic'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -99,12 +121,11 @@
     currentLevel: number
   }>()
 
-  // 等级范围：当前等级 ±10
+  // 等级范围：当前等级 +10
   const levelRange = computed(() => {
-    const start = Math.max(0, props.currentLevel - 10)
     const end = props.currentLevel + 10
     const levels = []
-    for (let i = start; i <= end; i++) {
+    for (let i = props.currentLevel; i <= end; i++) {
       levels.push(i)
     }
     return levels
@@ -129,18 +150,18 @@
     let production = 0
     let consumption = 0
 
-    // 资源矿产量
+    // 资源矿产量（与 resourceLogic.ts 保持一致）
     if (props.buildingType === 'metalMine') {
-      production = Math.floor(30 * level * Math.pow(1.1, level))
+      production = Math.floor(1500 * level * Math.pow(1.5, level))
     } else if (props.buildingType === 'crystalMine') {
-      production = Math.floor(20 * level * Math.pow(1.1, level))
+      production = Math.floor(1000 * level * Math.pow(1.5, level))
     } else if (props.buildingType === 'deuteriumSynthesizer') {
-      production = Math.floor(10 * level * Math.pow(1.1, level))
+      production = Math.floor(500 * level * Math.pow(1.5, level))
     }
 
-    // 能量产出
+    // 能量产出（与 resourceLogic.ts 保持一致）
     if (props.buildingType === 'solarPlant') {
-      production = Math.floor(20 * level * Math.pow(1.1, level))
+      production = Math.floor(50 * level * Math.pow(1.1, level))
     }
 
     // 能量消耗（矿场和合成器）
@@ -178,18 +199,4 @@
 
     return { metal, crystal, deuterium, points }
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/detail-views/DefenseDetailView.vue

@@ -10,7 +10,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.attack) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.attack" />
+          </div>
         </CardContent>
       </Card>
 
@@ -22,7 +24,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.shield) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.shield" />
+          </div>
         </CardContent>
       </Card>
 
@@ -34,7 +38,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.armor) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.armor" />
+          </div>
         </CardContent>
       </Card>
     </div>
@@ -48,19 +54,27 @@
         <CardContent class="space-y-2">
           <div v-if="config.cost.metal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.metal" />
+            </span>
           </div>
           <div v-if="config.cost.crystal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.crystal" />
+            </span>
           </div>
           <div v-if="config.cost.deuterium > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.deuterium" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm pt-2 border-t">
             <span class="text-muted-foreground">{{ t('player.points') }}:</span>
-            <span class="font-bold text-primary">{{ pointsPerUnit }}</span>
+            <span class="font-bold text-primary">
+              <NumberWithTooltip :value="pointsPerUnit" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -92,22 +106,31 @@
             <div class="space-y-1 text-sm">
               <div class="flex justify-between">
                 <span>{{ t('resources.metal') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.metal) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.metal" />
+                </span>
               </div>
               <div class="flex justify-between">
                 <span>{{ t('resources.crystal') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.crystal) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.crystal" />
+                </span>
               </div>
               <div class="flex justify-between">
                 <span>{{ t('resources.deuterium') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.deuterium) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.deuterium" />
+                </span>
               </div>
             </div>
           </div>
           <div class="space-y-2">
             <p class="text-sm text-muted-foreground">{{ t('defense.totalTime') }}:</p>
             <div class="text-xl font-bold">{{ formatTime(config.buildTime * quantity) }}</div>
-            <p class="text-xs text-muted-foreground">{{ t('player.points') }}: +{{ formatNumber(batchPoints) }}</p>
+            <p class="text-xs text-muted-foreground">
+              {{ t('player.points') }}: +
+              <NumberWithTooltip :value="batchPoints" />
+            </p>
           </div>
         </div>
       </CardContent>
@@ -122,9 +145,11 @@
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Input } from '@/components/ui/input'
   import { Label } from '@/components/ui/label'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import { Sword, Shield, ShieldCheck } from 'lucide-vue-next'
   import * as pointsLogic from '@/logic/pointsLogic'
   import { DEFENSES } from '@/config/gameConfig'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -151,18 +176,4 @@
   const batchPoints = computed(() => {
     return pointsLogic.calculateDefensePoints(props.defenseType, quantity.value)
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/detail-views/ShipDetailView.vue

@@ -10,7 +10,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.attack) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.attack" />
+          </div>
         </CardContent>
       </Card>
 
@@ -22,7 +24,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.shield) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.shield" />
+          </div>
         </CardContent>
       </Card>
 
@@ -34,7 +38,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.armor) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.armor" />
+          </div>
         </CardContent>
       </Card>
 
@@ -46,7 +52,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.speed) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.speed" />
+          </div>
         </CardContent>
       </Card>
 
@@ -58,7 +66,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.cargoCapacity) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.cargoCapacity" />
+          </div>
         </CardContent>
       </Card>
 
@@ -70,7 +80,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.fuelConsumption) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.fuelConsumption" />
+          </div>
         </CardContent>
       </Card>
     </div>
@@ -84,19 +96,27 @@
         <CardContent class="space-y-2">
           <div v-if="config.cost.metal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.metal" />
+            </span>
           </div>
           <div v-if="config.cost.crystal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.crystal" />
+            </span>
           </div>
           <div v-if="config.cost.deuterium > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.deuterium" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm pt-2 border-t">
             <span class="text-muted-foreground">{{ t('player.points') }}:</span>
-            <span class="font-bold text-primary">{{ pointsPerUnit }}</span>
+            <span class="font-bold text-primary">
+              <NumberWithTooltip :value="pointsPerUnit" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -128,22 +148,31 @@
             <div class="space-y-1 text-sm">
               <div class="flex justify-between">
                 <span>{{ t('resources.metal') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.metal) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.metal" />
+                </span>
               </div>
               <div class="flex justify-between">
                 <span>{{ t('resources.crystal') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.crystal) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.crystal" />
+                </span>
               </div>
               <div class="flex justify-between">
                 <span>{{ t('resources.deuterium') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.deuterium) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.deuterium" />
+                </span>
               </div>
             </div>
           </div>
           <div class="space-y-2">
             <p class="text-sm text-muted-foreground">{{ t('shipyard.totalTime') }}:</p>
             <div class="text-xl font-bold">{{ formatTime(config.buildTime * quantity) }}</div>
-            <p class="text-xs text-muted-foreground">{{ t('player.points') }}: +{{ formatNumber(batchPoints) }}</p>
+            <p class="text-xs text-muted-foreground">
+              {{ t('player.points') }}: +
+              <NumberWithTooltip :value="batchPoints" />
+            </p>
           </div>
         </div>
       </CardContent>
@@ -158,9 +187,11 @@
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Input } from '@/components/ui/input'
   import { Label } from '@/components/ui/label'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import { Sword, Shield, ShieldCheck, Zap, Package, Fuel } from 'lucide-vue-next'
   import * as pointsLogic from '@/logic/pointsLogic'
   import { SHIPS } from '@/config/gameConfig'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -187,18 +218,4 @@
   const batchPoints = computed(() => {
     return pointsLogic.calculateShipPoints(props.shipType, quantity.value)
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/detail-views/TechnologyDetailView.vue

@@ -19,12 +19,21 @@
               <Badge v-if="level === currentLevel" variant="default">{{ level }}</Badge>
               <span v-else>{{ level }}</span>
             </TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.metal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.crystal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.deuterium) }}</TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.metal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.crystal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.deuterium" />
+            </TableCell>
             <TableCell class="text-center text-sm">{{ formatTime(getLevelData(level).researchTime) }}</TableCell>
             <TableCell class="text-center text-sm">
-              <span class="text-primary font-medium">+{{ getLevelData(level).points }}</span>
+              <span class="text-primary font-medium">
+                +
+                <NumberWithTooltip :value="getLevelData(level).points" />
+              </span>
             </TableCell>
           </TableRow>
         </TableBody>
@@ -40,15 +49,21 @@
         <CardContent class="space-y-2">
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.metal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.crystal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.deuterium" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -58,7 +73,9 @@
           <CardTitle class="text-sm">{{ t('research.totalPoints') }}</CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-3xl font-bold text-primary">{{ formatNumber(totalStats.points) }}</div>
+          <div class="text-3xl font-bold text-primary">
+            <NumberWithTooltip :value="totalStats.points" />
+          </div>
           <p class="text-xs text-muted-foreground mt-1">
             {{ t('research.levelRange') }}: {{ Math.max(0, currentLevel - 10) }} - {{ Math.min(currentLevel + 10, currentLevel + 10) }}
           </p>
@@ -75,8 +92,10 @@
   import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Badge } from '@/components/ui/badge'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import * as researchLogic from '@/logic/researchLogic'
   import * as pointsLogic from '@/logic/pointsLogic'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -85,12 +104,11 @@
     currentLevel: number
   }>()
 
-  // 等级范围：当前等级 ±10
+  // 等级范围：当前等级 +10
   const levelRange = computed(() => {
-    const start = Math.max(0, props.currentLevel - 10)
     const end = props.currentLevel + 10
     const levels = []
-    for (let i = start; i <= end; i++) {
+    for (let i = props.currentLevel; i <= end; i++) {
       levels.push(i)
     }
     return levels
@@ -137,18 +155,4 @@
 
     return { metal, crystal, deuterium, points }
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/ui/input/Input.vue

@@ -14,22 +14,22 @@
 </template>
 
 <script setup lang="ts">
-  import type { HTMLAttributes } from 'vue'
-  import { useVModel } from '@vueuse/core'
-  import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
-  const props = defineProps<{
-    defaultValue?: string | number
-    modelValue?: string | number
-    class?: HTMLAttributes['class']
-  }>()
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
 
-  const emits = defineEmits<{
-    (e: 'update:modelValue', payload: string | number): void
-  }>()
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
 
-  const modelValue = useVModel(props, 'modelValue', emits, {
-    passive: true,
-    defaultValue: props.defaultValue
-  })
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+})
 </script>

src/components/ui/separator/Separator.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>

src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue"

src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

src/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="sheet-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

src/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import SheetOverlay from "./SheetOverlay.vue"
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: "right",
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

src/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

src/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

src/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-foreground font-semibold', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

src/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>

src/components/ui/sheet/index.ts

@@ -0,0 +1,8 @@
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"

src/components/ui/sidebar/Sidebar.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+        )
+      "
+    />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class
+        )
+      "
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { SidebarProps } from '.'
+  import { cn } from '@/lib/utils'
+  import { Sheet, SheetContent } from '@/components/ui/sheet'
+  import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+  import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+  import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+  import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+  defineOptions({
+    inheritAttrs: false
+  })
+
+  const props = withDefaults(defineProps<SidebarProps>(), {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas'
+  })
+
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>

src/components/ui/sidebar/SidebarContent.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarGroup.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-group" data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarGroupAction.vue

@@ -0,0 +1,31 @@
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<
+    PrimitiveProps & {
+      class?: HTMLAttributes['class']
+    }
+  >()
+</script>

src/components/ui/sidebar/SidebarGroupContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,30 @@
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<
+    PrimitiveProps & {
+      class?: HTMLAttributes['class']
+    }
+  >()
+</script>

src/components/ui/sidebar/SidebarHeader.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarInput.vue

@@ -0,0 +1,15 @@
+<template>
+  <Input data-slot="sidebar-input" data-sidebar="input" :class="cn('bg-background h-8 w-full shadow-none', props.class)">
+    <slot />
+  </Input>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+  import { Input } from '@/components/ui/input'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarInset.vue

@@ -0,0 +1,23 @@
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="
+      cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </main>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarMenu.vue

@@ -0,0 +1,14 @@
+<template>
+  <ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,41 @@
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class
+      )
+    "
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        showOnHover?: boolean
+        class?: HTMLAttributes['class']
+      }
+    >(),
+    {
+      as: 'button'
+    }
+  )
+</script>

src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+  import type { Component } from 'vue'
+  import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+  import { reactiveOmit } from '@vueuse/core'
+  import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+  import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+  import { useSidebar } from './utils'
+
+  defineOptions({
+    inheritAttrs: false
+  })
+
+  const props = withDefaults(
+    defineProps<
+      SidebarMenuButtonProps & {
+        tooltip?: string | Component
+      }
+    >(),
+    {
+      as: 'button',
+      variant: 'default',
+      size: 'default'
+    }
+  )
+
+  const { isMobile, state } = useSidebar()
+
+  const delegatedProps = reactiveOmit(props, 'tooltip')
+</script>

src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -0,0 +1,36 @@
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import type { SidebarMenuButtonVariants } from '.'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+  import { sidebarMenuButtonVariants } from '.'
+
+  export interface SidebarMenuButtonProps extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants['variant']
+    size?: SidebarMenuButtonVariants['size']
+    isActive?: boolean
+    class?: HTMLAttributes['class']
+  }
+
+  const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+    as: 'button',
+    variant: 'default',
+    size: 'default'
+  })
+</script>

src/components/ui/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
+    <slot />
+  </li>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { computed } from 'vue'
+  import { cn } from '@/lib/utils'
+  import { Skeleton } from '@/components/ui/skeleton'
+
+  const props = defineProps<{
+    showIcon?: boolean
+    class?: HTMLAttributes['class']
+  }>()
+
+  const width = computed(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+</script>