{account}
diff --git a/src/components/TokenUsageDashboard.tsx b/src/components/TokenUsageDashboard.tsx
index 68a8428..ea165c3 100644
--- a/src/components/TokenUsageDashboard.tsx
+++ b/src/components/TokenUsageDashboard.tsx
@@ -2,64 +2,25 @@
* TokenUsageDashboard 组件
*
* 主仪表盘，展示多个账户的 claude-opus-4-5-thinking 配额使用情况。
- * 使用 OpenBridge 设计系统的 TopBar 和 Alert 组件。
+ * 使用自定义组件替代 OpenBridge 组件，基于 shadcn/ui 实现。
*
* 特性:
* - 多账户配额可视化 (根据 API 返回的账户数量动态显示)
* - 实时告警通知 (低于 20% 警告，低于 5% 紧急)
- * - 支持 OpenBridge 四种主题切换 (day/bright/dusk/night)
- * - OpenBridge 组件懒加载以避免 SSR 问题
+ * - 支持四种主题切换 (day/bright/dusk/night)
*/
-import '@oicl/openbridge-webcomponents/dist/icons/icon-palette-day.js'
-import '@oicl/openbridge-webcomponents/dist/icons/icon-palette-day-bright.js'
-import '@oicl/openbridge-webcomponents/dist/icons/icon-palette-dusk.js'
-import '@oicl/openbridge-webcomponents/dist/icons/icon-palette-night.js'
-import { AlertType } from '@oicl/openbridge-webcomponents/dist/types'
-import { lazy, Suspense, useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
import { HealthRing } from '@/components/HealthRing'
-import { type ObcTheme, useTheme } from '@/hooks/useTheme'
+import {
+ AlertBadge,
+ AlertNotification,
+ AlertType,
+} from '@/components/ui/AlertBadge'
+import { ThemeSidebar } from '@/components/ui/ThemeSidebar'
+import { TopBar } from '@/components/ui/TopBar'
+import { useTheme } from '@/hooks/useTheme'
import type { ModelUsage } from '@/orpc/contracts/usage'
-// ============================================================================
-// 懒加载 OpenBridge 组件（避免 SSR 问题）
-// ============================================================================
-
-const ObcTopBar = lazy(() =>
- import(
- '@oicl/openbridge-webcomponents-react/components/top-bar/top-bar'
- ).then((mod) => ({ default: mod.ObcTopBar })),
-)
-
-const ObcAlertTopbarElement = lazy(() =>
- import(
- '@oicl/openbridge-webcomponents-react/components/alert-topbar-element/alert-topbar-element'
- ).then((mod) => ({ default: mod.ObcAlertTopbarElement })),
-)
-
-const ObcNotificationMessageItem = lazy(() =>
- import(
- '@oicl/openbridge-webcomponents-react/components/notification-message-item/notification-message-item'
- ).then((mod) => ({ default: mod.ObcNotificationMessageItem })),
-)
-
-const ObcAlertIcon = lazy(() =>
- import(
- '@oicl/openbridge-webcomponents-react/components/alert-icon/alert-icon'
- ).then((mod) => ({ default: mod.ObcAlertIcon })),
-)
-
-const ObcNavigationMenu = lazy(() =>
- import(
- '@oicl/openbridge-webcomponents-react/components/navigation-menu/navigation-menu'
- ).then((mod) => ({ default: mod.ObcNavigationMenu })),
-)
-
-const ObcNavigationItem = lazy(() =>
- import(
- '@oicl/openbridge-webcomponents-react/components/navigation-item/navigation-item'
- ).then((mod) => ({ default: mod.ObcNavigationItem })),
-)
-
// ============================================================================
// 类型定义
// ============================================================================
@@ -171,15 +132,6 @@ const getHighestAlertType = (alerts: AlertInfo[]): AlertType => {
return AlertType.Caution
}
-// ============================================================================
-// 子组件
-// ============================================================================
-
-/** TopBar 加载占位符 (SSR 时显示) */
-const TopBarFallback = () => (
-
-)
-
// ============================================================================
// 主组件
// ============================================================================
@@ -211,149 +163,41 @@ export const TokenUsageDashboard = ({ data }: TokenUsageDashboardProps) => {
setMenuOpen((prev) => !prev)
}, [])
- /** 关闭侧边菜单 */
- const closeMenu = useCallback(() => {
- setMenuOpen(false)
- }, [])
-
- /** 切换主题并关闭菜单 */
- const handleThemeChange = useCallback(
- (newTheme: ObcTheme) => {
- setTheme(newTheme)
- setMenuOpen(false)
- },
- [setTheme],
- )
-
// ========== 渲染 ==========
return (
-
+
{/* 顶部导航栏 */}
-
+
+
+ {topAlert && (
+
+ )}
+
+ }
+ />
- {/* 侧边导航菜单 */}
- {menuOpen && (
-
- )}
-
- {/* 点击遮罩关闭菜单 */}
- {menuOpen && (
-