添加账户中心

core/frontend/src/components/app-shell.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { AlertCircle, Boxes, Check, ChevronDown, ChevronRight, Info, LogOut, Settings, UsersRound } from "lucide-react";
+import { AlertCircle, Boxes, Check, ChevronDown, ChevronRight, Info, LogOut, Settings, WalletCards } from "lucide-react";
 import { IconKitSvg } from "./IconKitSvg";
 import { ConfirmModal, useBodyScrollLock, useOverlayTransition } from "./overlays";
 import type { Product, Project, Team, User } from "../types";
@@ -22,7 +22,7 @@ const SHELL_COMMANDS: Command[] = [
   { id: "video-replace", group: "导航", label: "视频复刻", sub: "保留参考视频的人物、场景与节奏，复刻出自己的带货内容", page: "videoReplace", icon: "replace", key: "E" },
   { id: "library", group: "导航", label: "成品库", sub: "素材、人物、场景、成片统一管理", page: "library", icon: "folder", key: "A" },
   { id: "team", group: "导航", label: "团队", sub: "成员、权限、额度、协作记录", page: "team", icon: "users" },
-  { id: "account", group: "导航", label: "账单库", sub: "余额、充值、账单流水", page: "account", icon: "creditCard" },
+  { id: "account", group: "导航", label: "账户中心", sub: "余额、充值、账单流水", page: "account", icon: "creditCard" },
   { id: "settings", group: "导航", label: "系统设置", sub: "个人信息、通知、安全、偏好", page: "settings", icon: "settings" },
   { id: "messages", group: "常用动作", label: "消息中心", sub: "任务提醒、协作评论、系统通知", page: "messages", icon: "bell", key: "M" },
   { id: "new-product", group: "常用动作", label: "新建商品", sub: "从商品信息开始生成素材与视频", page: "productCreateUpload", icon: "productPlus" },
@@ -114,7 +114,7 @@ const ACCOUNT_ITEMS: { act: Page; icon: string; label: string }[] = [
   { act: "settings", icon: "settings", label: "个人设置" },
   { act: "messages", icon: "bell", label: "消息中心" },
   { act: "team", icon: "users", label: "团队管理" },
-  { act: "account", icon: "creditCard", label: "账单库" }
+  { act: "account", icon: "creditCard", label: "账户中心" }
 ];
 
 export function AccountMenu({ open, anchorRect, onClose, navigate, logout, user, team, canManageBilling = true }: {
@@ -231,7 +231,7 @@ const NAV: NavDef[] = [
   { id: "free-create", page: "freeCreate", label: "自由创作", icon: "film" },
   { id: "library", page: "library", label: "成品库", icon: "library" },
   { id: "team", page: "team", label: "团队", icon: "users" },
-  { id: "account", page: "account", label: "账单库", icon: "creditCard" },
+  { id: "account", page: "account", label: "账户中心", icon: "creditCard" },
   { id: "trash", page: "trash", label: "垃圾桶", icon: "trash" },
   { id: "settings", page: "settings", label: "系统设置", icon: "settings" }
 ];
@@ -239,20 +239,19 @@ const RESOURCE_NAV: Array<{ id: string; page: Page; label: string }> = [
   { id: "products", page: "products", label: "商品库" },
   { id: "models", page: "models", label: "模特库" },
   { id: "library", page: "library", label: "成品库" },
-  { id: "account", page: "account", label: "账单库" },
   { id: "trash", page: "trash", label: "垃圾桶" },
 ];
 
-type MajorNav = "resource" | "team" | "settings";
-const MAJOR_META: Record<MajorNav, { label: string; icon: "boxes" | "users-round" | "settings" }> = {
+type MajorNav = "resource" | "account" | "settings";
+const MAJOR_META: Record<MajorNav, { label: string; icon: "boxes" | "wallet-cards" | "settings" }> = {
   resource: { label: "资源中心", icon: "boxes" },
-  team: { label: "团队中心", icon: "users-round" },
+  account: { label: "账户中心", icon: "wallet-cards" },
   settings: { label: "系统设置", icon: "settings" },
 };
 
-function LiquidIcon({ name }: { name: "boxes" | "users-round" | "settings" }) {
+function LiquidIcon({ name }: { name: "boxes" | "wallet-cards" | "settings" }) {
   if (name === "boxes") return <Boxes size={20} strokeWidth={1.9} />;
-  if (name === "users-round") return <UsersRound size={20} strokeWidth={1.9} />;
+  if (name === "wallet-cards") return <WalletCards size={20} strokeWidth={1.9} />;
   return <Settings size={20} strokeWidth={1.9} />;
 }
 
@@ -441,7 +440,7 @@ export function Sidebar({ page, navigate, user, team, canManageBilling = true, p
   const resourceNavItems = RESOURCE_NAV.filter((item) => navItems.some((nav) => nav.page === item.page));
   const topModule = topModuleForPage(page);
   const activeMajor: MajorNav | null =
-    activeNav === "team" ? "team"
+    activeNav === "account" ? "account"
     : activeNav === "settings" ? "settings"
     : topModule ? null
     : resourceNavItems.some((item) => item.page === activeNav) ? "resource"
@@ -477,7 +476,7 @@ export function Sidebar({ page, navigate, user, team, canManageBilling = true, p
   const resourceOpen = activeMajor === "resource" && resourcePinned;
 
   const resourceItemRef = useRef<HTMLButtonElement>(null);
-  const teamItemRef = useRef<HTMLButtonElement>(null);
+  const accountItemRef = useRef<HTMLButtonElement>(null);
   const settingsItemRef = useRef<HTMLButtonElement>(null);
   const submenuRef = useRef<HTMLDivElement>(null);
   const prevMajorRef = useRef<MajorNav | null>(activeMajor);
@@ -486,7 +485,7 @@ export function Sidebar({ page, navigate, user, team, canManageBilling = true, p
 
   useLayoutEffect(() => {
     const item = activeMajor === "resource" ? resourceItemRef.current
-      : activeMajor === "team" ? teamItemRef.current
+      : activeMajor === "account" ? accountItemRef.current
       : activeMajor === "settings" ? settingsItemRef.current
       : null;
     const leavingResource = prevMajorRef.current === "resource" && activeMajor !== "resource";
@@ -520,7 +519,7 @@ export function Sidebar({ page, navigate, user, team, canManageBilling = true, p
 
     const onResize = () => {
       const current = activeMajor === "resource" ? resourceItemRef.current
-        : activeMajor === "team" ? teamItemRef.current
+        : activeMajor === "account" ? accountItemRef.current
         : activeMajor === "settings" ? settingsItemRef.current
         : null;
       if (!current) return;
@@ -638,14 +637,14 @@ export function Sidebar({ page, navigate, user, team, canManageBilling = true, p
           </div>
           {canManageBilling && (
             <button
-              ref={teamItemRef}
-              className={`nav-item${activeMajor === "team" ? " active" : ""}`}
+              ref={accountItemRef}
+              className={`nav-item${activeMajor === "account" ? " active" : ""}`}
               type="button"
-              onClick={() => { setMobileNavOpen(false); navigate("team"); }}
+              onClick={() => { setMobileNavOpen(false); navigate("account"); }}
             >
               <span className="nav-inner">
-                <UsersRound size={23} strokeWidth={1.8} />
-                <span className="nav-label">团队中心</span>
+                <WalletCards size={23} strokeWidth={1.8} />
+                <span className="nav-label">账户中心</span>
               </span>
             </button>
           )}