feat(web): 对齐 Alright 主题视觉规范（配色/字体/图标/背景/动效），并补充设计规范文档

2026-10-22 20:27:10 +08:00
parent e522a98f6f
commit 386c0f77c7
50 changed files with 6344 additions and 1094 deletions
@@ -0,0 +1,58 @@
+import { SearchIcon, UserIcon } from '../common/Icon'
+import { HeaderInfoItem } from './HeaderInfoItem'
+
+/**
+ * 顶部栏：左品牌、中间运行信息、右侧操作图标。
+ * 信息区展示「共 N 个本地应用 / 第一个项目 / 连接状态」，
+ * 对应模板里的 header-center-info。
+ */
+type SiteHeaderProps = {
+  projectCount: number
+  /** 用于展示的第一个项目名，没有项目时留空 */
+  sampleProject?: string
+  live: boolean
+  onFocusSearch: () => void
+}
+
+export function SiteHeader({ projectCount, sampleProject, live, onFocusSearch }: SiteHeaderProps) {
+  return (
+    <header className="site-header">
+      <div className="layout-container site-header-inner">
+        <a className="site-brand" href="/" aria-label="Stash 首页">
+          <span className="site-brand-mark" aria-hidden="true">
+            S
+          </span>
+          <span className="site-brand-name">STASH</span>
+        </a>
+
+        <div className="header-info">
+          <HeaderInfoItem>共 {projectCount} 个本地应用</HeaderInfoItem>
+
+          {sampleProject !== undefined && (
+            <HeaderInfoItem tag="本地">{sampleProject}</HeaderInfoItem>
+          )}
+
+          <HeaderInfoItem tag="状态" tone={live ? 'green' : 'blue'}>
+            {live ? '实时同步已连接' : '等待服务连接'}
+          </HeaderInfoItem>
+        </div>
+
+        <div className="header-actions">
+          <button
+            type="button"
+            className="header-icon-button"
+            title="搜索（Ctrl+K）"
+            aria-label="聚焦搜索框"
+            onClick={onFocusSearch}
+          >
+            <SearchIcon />
+          </button>
+          {/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
+          <button type="button" className="header-icon-button" title="登录" aria-label="登录">
+            <UserIcon />
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}