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,24 @@
+import type { ReactNode } from 'react'
+
+/**
+ * 顶栏中间的一条信息，形如「[标签] 文本」。
+ * 标签带浅色底，用于区分「本地 / 状态」这类类型前缀。
+ */
+type HeaderInfoItemProps = {
+  /** 可选的前缀标签 */
+  tag?: string
+  /** 标签配色：默认蓝色，状态类用绿色 */
+  tone?: 'blue' | 'green'
+  children: ReactNode
+}
+
+export function HeaderInfoItem({ tag, tone = 'blue', children }: HeaderInfoItemProps) {
+  return (
+    <div className="header-info-item">
+      {tag !== undefined && (
+        <span className={`header-info-tag${tone === 'green' ? ' is-green' : ''}`}>{tag}</span>
+      )}
+      <span className="header-info-text">{children}</span>
+    </div>
+  )
+}
@@ -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>
+  )
+}