wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(web): replace header logo with AwoooI pills mark
All checks were successful
CD Pipeline / tests (push) Successful in 1m22s
Details
Code Review / ai-code-review (push) Successful in 13s
Details
CD Pipeline / build-and-deploy (push) Successful in 3m40s
Details
CD Pipeline / post-deploy-checks (push) Successful in 1m35s
Details

Browse Source
This commit is contained in:
Your Name
2026-06-05 00:30:30 +08:00
parent b54477fdb6
commit a5324ef722
3 changed files with 24 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/messages/en.json
View File

@@ -26,6 +26,7 @@
},
"brand": {
"name": "AWOOOI",
"displayName": "AwoooI",
"slogan": "零干預維運，以人為本的決策。",
"sloganAlt": "零干預維運，以人為本的決策。",
"tagline": "AI 指揮操作介面",

1
apps/web/messages/zh-TW.json
View File

@@ -26,6 +26,7 @@
},
"brand": {
"name": "AWOOOI",
"displayName": "AwoooI",
"slogan": "零干預維運，以人為本的決策。",
"sloganAlt": "零干預維運，以人為本的決策。",
"tagline": "AI 指揮操作介面",

61
apps/web/src/components/layout/header.tsx
View File

@@ -4,13 +4,14 @@
* Header - figma-v2 品牌導航列
* ==============================
* @updated 2026-04-03 Claude Code — 完整對齊 figma-v2 設計
* - brand-area: A + wooo(VT323) + I 混合字體 logo
* - brand-area: AwoooI Pills V2 logo + display name
* - 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
* @updated 2026-06-05 Codex — 左上品牌改用 AwoooI Pills V2 logo-gallery 推薦稿
*/
import { useCallback } from 'react'
@@ -40,6 +41,7 @@ export function Header({
className,
}: HeaderProps) {
const t = useTranslations('locale')
const tBrand = useTranslations('brand')
const tDashboard = useTranslations('dashboard')
const pathname = usePathname()
@@ -80,49 +82,30 @@ export function Header({
overflow: 'hidden',
transition: 'width 0.3s ease',
}}>
{/* NemoClaw mini SVG */}
{/* AwoooI Pills V2 logo — source: logo-gallery.html */}
<div style={{ width: 36, height: 36, flexShrink: 0 }}>
<svg width="36" height="36" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="hdr-ceramic" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#FFFFFF" />
<stop offset="40%" stopColor="#F8F8F8" />
<stop offset="70%" stopColor="#E8E8E8" />
<stop offset="100%" stopColor="#D8D8D8" />
</linearGradient>
<radialGradient id="hdr-led" cx="40%" cy="35%" r="60%">
<stop offset="0%" stopColor="#7AB8F5" />
<stop offset="100%" stopColor="#2B6CB0" />
</radialGradient>
</defs>
<circle cx="70" cy="70" r="32" fill="url(#hdr-ceramic)" stroke="#E0E0E0" strokeWidth="1" />
<circle cx="70" cy="70" r="16" fill="url(#hdr-led)">
<animate attributeName="r" values="14;17;14" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="70" cy="70" r="8" fill="white" opacity="0.8" />
<path d="M 70 38 L 70 18 L 58 6 M 70 18 L 82 6" stroke="url(#hdr-ceramic)" strokeWidth="6" strokeLinecap="round" fill="none" />
<path d="M 70 38 L 70 18 L 58 6 M 70 18 L 82 6" stroke="#4A90D9" strokeWidth="3" strokeLinecap="round" fill="none" opacity="0.5" />
<path d="M 38 70 L 18 70 L 6 58 M 18 70 L 6 82" stroke="url(#hdr-ceramic)" strokeWidth="6" strokeLinecap="round" fill="none" />
<path d="M 38 70 L 18 70 L 6 58 M 18 70 L 6 82" stroke="#4A90D9" strokeWidth="3" strokeLinecap="round" fill="none" opacity="0.5" />
<path d="M 102 70 L 122 70 L 134 58 M 122 70 L 134 82" stroke="url(#hdr-ceramic)" strokeWidth="6" strokeLinecap="round" fill="none" />
<path d="M 102 70 L 122 70 L 134 58 M 122 70 L 134 82" stroke="#4A90D9" strokeWidth="3" strokeLinecap="round" fill="none" opacity="0.5" />
<path d="M 48 92 L 28 112 L 16 116" stroke="url(#hdr-ceramic)" strokeWidth="6" strokeLinecap="round" fill="none" />
<path d="M 92 92 L 112 112 L 124 116" stroke="url(#hdr-ceramic)" strokeWidth="6" strokeLinecap="round" fill="none" />
<circle cx="70" cy="70" r="42" fill="none" stroke="#4A90D9" strokeWidth="1" strokeDasharray="6 6" opacity="0.3">
<animateTransform attributeName="transform" type="rotate" from="0 70 70" to="360 70 70" dur="8s" repeatCount="indefinite" />
</circle>
<svg width="36" height="36" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g style={{ mixBlendMode: 'multiply' }}>
<rect x="14" y="6" width="8" height="36" rx="4" transform="rotate(-25 18 24)" fill="#3B82F6" opacity="0.8" />
<rect x="26" y="6" width="8" height="36" rx="4" transform="rotate(25 30 24)" fill="#8B5CF6" opacity="0.8" />
<rect x="14" y="26" width="20" height="8" rx="4" fill="#06B6D4" opacity="0.8" />
</g>
</svg>
</div>
{/* Brand text: A + wooo + I (figma 混合字體) */}
{/* Brand text: AwoooI logo-gallery display name */}
{!compact && !sidebarCollapsed && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 0, lineHeight: 1 }}>
<span style={{ fontFamily: 'var(--font-body), "DM Mono", monospace', fontSize: 22, fontWeight: 700, color: '#141413', letterSpacing: '-0.5px' }}>A</span>
<span style={{ fontFamily: 'var(--font-dot-matrix), "VT323", monospace', fontSize: 30, color: '#d97757', letterSpacing: 2, lineHeight: 1 }}>wooo</span>
<span style={{ fontFamily: 'var(--font-body), "DM Mono", monospace', fontSize: 22, fontWeight: 700, color: '#141413', letterSpacing: '-0.5px' }}>I</span>
</div>
</div>
<span style={{
fontFamily: 'var(--font-heading), Syne, var(--font-body), sans-serif',
fontSize: 24,
fontWeight: 800,
color: '#334155',
letterSpacing: 0,
lineHeight: 1,
whiteSpace: 'nowrap',
}}>
{tBrand('displayName')}
</span>
)}
</div>