diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json index f10012c3..3067243d 100644 --- a/apps/web/messages/en.json +++ b/apps/web/messages/en.json @@ -63,7 +63,7 @@ "locale": { "switch": "Switch Language", "zhTW": "繁體中文", - "en": "English" + "en": "EN" }, "demo": { "title": "AWOOOI Demo", @@ -646,7 +646,7 @@ "saved": "Saved", "zhTW": "繁體中文", "zhTWSub": "Traditional Chinese", - "en": "English", + "en": "EN", "enSub": "English (US)" }, "autoRepair": { diff --git a/apps/web/messages/zh-TW.json b/apps/web/messages/zh-TW.json index b043f7fc..45d284a6 100644 --- a/apps/web/messages/zh-TW.json +++ b/apps/web/messages/zh-TW.json @@ -62,8 +62,8 @@ }, "locale": { "switch": "切換語系", - "zhTW": "繁體中文", - "en": "English" + "zhTW": "繁", + "en": "EN" }, "demo": { "title": "AWOOOI 展示", @@ -645,9 +645,9 @@ "phase": "Phase", "save": "儲存設定", "saved": "已儲存", - "zhTW": "繁體中文", + "zhTW": "繁", "zhTWSub": "Traditional Chinese", - "en": "English", + "en": "EN", "enSub": "English (US)" }, "autoRepair": { diff --git a/apps/web/src/components/ai/openclaw-panel.tsx b/apps/web/src/components/ai/openclaw-panel.tsx index 62073dbc..8feb010c 100644 --- a/apps/web/src/components/ai/openclaw-panel.tsx +++ b/apps/web/src/components/ai/openclaw-panel.tsx @@ -1,21 +1,18 @@ 'use client' /** - * OpenClawPanel - 賽博維運風格 AI 面板 - * ===================================== - * Phase 5: OpenClaw 實體化升級 - * - * Features: - * - 3D 骨架機械爪視覺化 (CSS Art) - * - 核心藍色 LED 脈衝動畫 - * - 點陣字體狀態顯示 - * - AI 思考流過渡動畫 - * - 高通透度 awoooi-glass 效果 + * OpenClawPanel - figma-v2 設計對齊版 + * ====================================== + * @updated 2026-04-03 Claude Code — 完整對齊 figma-v2 + * - 移除 "AWOOOI v1.0.0 | 正式環境" header + * - W●●●Claw 混合字體 (DM Mono + VT323 #d97757) + * - WOODCLAW PIPELINE badge (9px, rgba(74,144,217,0.1), #4A90D9) + * - 3個脈衝點動畫 + * - 保留 NemoClaw SVG (68px) */ import { useState, useEffect } from 'react' import { useTranslations } from 'next-intl' -import { cn } from '@/lib/utils' // ============================================================================= // Types @@ -36,119 +33,44 @@ export interface OpenClawPanelProps { } // ============================================================================= -// NemoClaw 3D Ceramic SVG Component (Lab-White Style) +// NemoClaw 3D Ceramic SVG Component (68px, figma-v2 spec) // ============================================================================= function NemoClaw({ isActive, isPulsing }: { isActive: boolean; isPulsing: boolean }) { return ( - + - + - - - - - - - - - - - - - + + + + - {/* Base shadow */} - - {/* Main body - 3D ceramic sphere */} - - {/* Inner ring */} - - {/* Core LED */} - - {isPulsing && } + + + {isPulsing && } + + + + + + + + + + + + - - {/* Top arm */} - - - - - - - {/* Left arm */} - - - - - - - {/* Right arm */} - - - - - - - {/* Bottom left arm */} - - - - - - {/* Bottom right arm */} - - - - - - {/* Orbit ring when active */} - {isActive && ( - - )} ) } -// ============================================================================= -// Status Messages (Dot Matrix Style) -// ============================================================================= - -// 2026-04-02 Claude Code: STATUS_MESSAGES 已移除，改用 i18n 鍵值 openclawPanel.* - - -// ============================================================================= -// Typewriter Hook -// ============================================================================= - -function useTypewriter(text: string, speed: number = 50) { - const [displayText, setDisplayText] = useState('') - - useEffect(() => { - let index = 0 - setDisplayText('') - - const interval = setInterval(() => { - if (index < text.length) { - setDisplayText(text.slice(0, index + 1)) - index++ - } else { - clearInterval(interval) - } - }, speed) - - return () => clearInterval(interval) - }, [text, speed]) - - return displayText -} - // ============================================================================= // Component // ============================================================================= @@ -160,15 +82,10 @@ export function OpenClawPanel({ className, }: OpenClawPanelProps) { const tPanel = useTranslations('openclawPanel') - const tBrand = useTranslations('brand') - // Phase 8.0 #16: 移除 cursorVisible state，改用 CSS animate-pulse const isActive = status !== 'patrolling' const isPulsing = status === 'intercepting' || status === 'analyzing' - const statusMessage = tPanel(status) - const displayText = useTypewriter(statusMessage, 40) - // Notify when complete useEffect(() => { if (status === 'complete') { @@ -181,104 +98,101 @@ export function OpenClawPanel({ return (
- {/* Scan line animation when active */} - {isActive && ( -
-
-
- )} + {/* NemoClaw SVG — 68px */} +
+ +
- {/* Header - Dot Matrix Style */} -
-
- - AWOOOI v1.0.0 - - - | {tBrand('environment')} - - {isActive && ( - - )} + {/* 右側文字欄 */} +
+ {/* W●●●Claw 混合字體名稱 */} +
+ W + ooo + Claw
- {alertType && ( - - {alertType} + + {/* WOODCLAW PIPELINE badge */} +
+ WoooClaw Pipeline +
+ + {/* 狀態文字 + 脈衝點 */} +
+ {tPanel(status)} + {/* 脈衝點動畫 */} + + + {[0, 0.2, 0.4].map((delay, i) => ( + + ))} +
+ + {/* alertType badge (optional) */} + {alertType && ( +
+ + {alertType} + +
)}
- - {/* NemoClaw 3D Ceramic Visualization */} -
-
- -
- - {/* 右側文字 */} -
-
- WoooClaw -
-
- {tPanel(status)} -
- - WoooClaw Pipeline - -
-
- - {/* Status Display - VT323 Dot Matrix Font */} -
-
- {displayText} - {/* Phase 8.0 #16: CSS cursor blink */} - -
-
- - {/* Progress indicator when analyzing */} - {(status === 'analyzing' || status === 'generating') && ( -
- {[0, 1, 2, 3, 4].map((i) => ( -
- ))} -
- )} - - {/* Complete indicator */} - {status === 'complete' && ( -
- - READY - -
- )}
) } diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx index 4194b740..ae80b743 100644 --- a/apps/web/src/components/layout/header.tsx +++ b/apps/web/src/components/layout/header.tsx @@ -1,15 +1,13 @@ 'use client' /** - * Header - 頂部狀態列 - * ==================== - * CPO-102: Nothing.tech 明亮工業風頂部導航 - * - * Features: - * - 玻璃效果 + 固定定位 - * - 連線狀態指示器 - * - 語系切換器 - * - 使用者選單 + * Header - figma-v2 品牌導航列 + * ============================== + * @updated 2026-04-03 Claude Code — 完整對齊 figma-v2 設計 + * - brand-area: A + wooo(VT323) + I 混合字體 logo + * - page-title: Syne 26px 800 + * - lang-btn: pill 樣式 (border-radius 20px) + * - avatar: 34px 圓形 #d97757 * * Phase 19: 使用 Z_INDEX.HEADER (30) * @see lib/constants/z-index.ts @@ -18,10 +16,6 @@ import { useCallback } from 'react' import { useTranslations } from 'next-intl' import { usePathname } from 'next/navigation' -import { StatusOrb } from '@/components/ui/status-orb' -import { useConnectionStatus, useMockMode } from '@/stores/dashboard.store' -import { useApprovalCount } from '@/stores/approval.store' -import { cn } from '@/lib/utils' import { Z_INDEX } from '@/lib/constants/z-index' // ============================================================================= @@ -47,106 +41,161 @@ export function Header({ const tDashboard = useTranslations('dashboard') const pathname = usePathname() - const connectionStatus = useConnectionStatus() - const mockMode = useMockMode() - const pendingApprovals = useApprovalCount() - const switchLocale = useCallback((newLocale: string) => { const newPath = pathname.replace(`/${locale}`, `/${newLocale}`) window.location.href = newPath }, [locale, pathname]) - const tConnection = useTranslations('connection') - const connectionLabel = tConnection(connectionStatus) - - const connectionOrbStatus = { - disconnected: 'idle', - connecting: 'syncing', - connected: 'healthy', - reconnecting: 'warning', - error: 'critical', - }[connectionStatus] as 'idle' | 'syncing' | 'healthy' | 'warning' | 'critical' - return (
- {/* 左側：頁面標題 */} -
-

- {tDashboard('title')} -

-
+ {/* Brand Area — 224px 固定寬，與 sidebar 對齊 */} +
+ {/* NemoClaw mini SVG */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- {/* Right: Status + Locale + User */} -
- {/* Pending Approvals Badge */} - {pendingApprovals > 0 && ( -
- - - {pendingApprovals} {tDashboard('pendingApprovals')} - + {/* Brand text: A + wooo + I (figma 混合字體) */} + {!sidebarCollapsed && ( +
+
+ A + wooo + I +
)} +
- {/* Connection Status */} -
- - - {connectionLabel} - - {mockMode && ( - - MOCK - - )} -
+ {/* Header Right — page title + lang switcher + avatar */} +
+ {/* Page title */} + + {tDashboard('title')} + - {/* Locale Switcher */} -
- - -
- - {/* User Avatar */} - + + + {/* Avatar — 34px 圓形 #d97757 */} +
+ OG +
) diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx index 18ccc0ef..6762d04a 100644 --- a/apps/web/src/components/layout/sidebar.tsx +++ b/apps/web/src/components/layout/sidebar.tsx @@ -160,68 +160,20 @@ export function Sidebar({ className={cn( 'fixed left-0 top-0 h-screen', 'flex flex-col', - // Phase 7.0: 純白極簡 - 'bg-white', - 'border-r-[0.5px] border-neutral-200', - // 寬度動畫 - 'transition-all duration-300 ease-out', - collapsed ? 'w-16' : 'w-56', + // figma-v2: #faf9f3 背景 className )} - style={{ zIndex: Z_INDEX.SIDEBAR }} + style={{ + zIndex: Z_INDEX.SIDEBAR, + background: '#faf9f3', + borderRight: '0.5px solid #e0ddd4', + width: collapsed ? 64 : 224, + transition: 'width 0.3s ease', + }} > - {/* Logo 區 - NemoClaw + 品牌名稱 (VT323 點陣字體) */} -
- {/* NemoClaw Mini SVG */} -
- - - - - - - - - - - - - - {/* Body */} - - - - - - {/* Top arm */} - - - {/* Left arm */} - - - {/* Right arm */} - - - {/* Bottom arms */} - - - {/* Orbit ring */} - - - - -
- {/* Brand name - VT323 點陣字體 (hidden when collapsed) */} - {!collapsed && ( - - {tBrand('name')} - - )} -
+ {/* Logo 區 - figma-v2: 與 header brand-area 完全一致，但此處因 header 佔滿，sidebar 不重複顯示 logo */} + {/* sidebar top spacer - 68px 高度對齊 header */} +
{/* 導航列表 - AI中心 v6 4分區 */} - {/* 底部區域 - 極簡版本號 */} -
+ {/* 底部區域 - 版本號 */} +
{!collapsed && ( - + v1.0.0 )} @@ -332,14 +285,21 @@ export function Sidebar({ {/* 折疊按鈕 */}