refactor(web): 前端改用 @stash/ui 组件库

- 新增本地依赖 @stash/ui（file:../../stash-ui），引入其 style.css 与设计令牌
- 页面骨架改用 Layout（contained + header/sider），搜索框改为吸顶
- 卡片/菜单/按钮/标签/头像/分页/空态/提示全部换成组件库组件
- 删除本地 iconfont 与 1400 行手写组件样式，App.css 只保留页面级样式
- 数据层、路由、过滤逻辑未改动；33 个 Rust 测试通过

stash-web/package-lock.json

@@ -8,6 +8,7 @@
       "name": "stash-web",
       "version": "0.0.0",
       "dependencies": {
+        "@stash/ui": "file:../../stash-ui",
         "react": "^19.3.1",
         "react-dom": "^19.3.1"
       },
@@ -21,6 +22,25 @@
         "vite": "^8.3.4"
       }
     },
+    "../../stash-ui": {
+      "name": "@stash/ui",
+      "version": "0.1.0",
+      "devDependencies": {
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
+        "@vitejs/plugin-react": "^6.1.2",
+        "oxlint": "^1.88.0",
+        "playwright-core": "^1.64.1",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1",
+        "typescript": "~6.0.3",
+        "vite": "^8.3.4"
+      },
+      "peerDependencies": {
+        "react": ">=19",
+        "react-dom": ">=19"
+      }
+    },
     "node_modules/@oxc-project/types": {
       "version": "0.154.0",
       "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.154.0.tgz",
@@ -616,6 +636,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stash/ui": {
+      "resolved": "../../stash-ui",
+      "link": true
+    },
     "node_modules/@types/node": {
       "version": "24.19.2",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-24.19.2.tgz",

stash-web/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@stash/ui": "file:../../stash-ui",
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },

stash-web/src/App.tsx

@@ -1,3 +1,4 @@
+import { Empty, Layout, Notice } from '@stash/ui'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BackToTop } from './components/common/BackToTop'
 import { ArticleDetailView } from './components/content/ArticleDetailView'
@@ -39,7 +40,6 @@ export default function App() {
   const { view, go, back } = useViewRoute()
   const [scrolled, setScrolled] = useState(false)
   const searchRef = useRef<HTMLInputElement>(null)
-  const scrollRef = useRef<HTMLDivElement>(null)
 
   const categories = useMemo(
     () => withLocalCategory(projects, catalog.categories),
@@ -103,20 +103,18 @@ export default function App() {
     return []
   }, [itemView, itemCategory])
 
-  // 切换视图时把内容区滚回顶部
+  // 切换视图时回到顶部（页面整体滚动）
   useEffect(() => {
-    scrollRef.current?.scrollTo({ top: 0 })
+    window.scrollTo({ top: 0 })
   }, [view])
 
-  // 桌面端滚动作在内容容器里，窄屏滚的是窗口：
-  // 两处都要驱动「已滚动」状态（顶部渐隐层 + 返回顶部按钮共用）
   useEffect(() => {
     const sync = () => {
-      const inner = scrollRef.current?.scrollTop ?? 0
-      const next = Math.max(inner, window.scrollY) > 4
+      const next = window.scrollY > 4
       setScrolled((current) => (current === next ? current : next))
     }
 
+    sync()
     window.addEventListener('scroll', sync, { passive: true })
     return () => window.removeEventListener('scroll', sync)
   }, [])
@@ -125,7 +123,6 @@ export default function App() {
    * 「打开这个分区」应该落到哪个视图。
    *
    * 应用类分区配了首页展示块时，直接落到那个分组；其余情况打开整个分区。
-   * 这样卡片上的「···」和分区标题都通向卡片里实际展示的那块内容。
    */
   const detailViewFor = (categoryId: string): View => {
     const category = categories.find((item) => item.id === categoryId)
@@ -203,21 +200,13 @@ export default function App() {
   function renderItemView() {
     if (itemView === undefined) return null
     if (itemCategory === undefined) {
-      return (
-        <p className="section-empty">
-          {dataPending ? '正在读取内容库…' : '分类不存在'}
-        </p>
-      )
+      return <Empty text={dataPending ? '正在读取内容库…' : '分类不存在'} />
     }
 
     if (itemCategory.kind === 'articles') {
       const article = findArticleItem(itemCategory, itemView.itemId)
       if (article === undefined) {
-        return (
-          <p className="section-empty">
-            {dataPending ? '正在读取内容库…' : '条目不存在'}
-          </p>
-        )
+        return <Empty text={dataPending ? '正在读取内容库…' : '条目不存在'} />
       }
 
       return (
@@ -230,11 +219,7 @@ export default function App() {
     }
 
     if (detailModel === undefined) {
-      return (
-        <p className="section-empty">
-          {dataPending ? '正在读取内容库…' : '条目不存在'}
-        </p>
-      )
+      return <Empty text={dataPending ? '正在读取内容库…' : '条目不存在'} />
     }
 
     return (
@@ -249,111 +234,98 @@ export default function App() {
   }
 
   return (
-    <div className="app">
+    <>
       {/* 主题的顶部背景图：固定 65vh，底部渐隐到页面底色 */}
       <div className="site-background" aria-hidden="true" />
 
-      <SiteHeader
-        projectCount={projects.length}
-        sampleProject={projects[0]?.name}
-        live={live}
-        onFocusSearch={() => searchRef.current?.focus()}
-      />
+      <Layout
+        contained
+        maxWidth={1380}
+        siderWidth={260}
+        className="app"
+        header={
+          <SiteHeader
+            projectCount={projects.length}
+            sampleProject={projects[0]?.name}
+            live={live}
+            onFocusSearch={() => searchRef.current?.focus()}
+          />
+        }
+        sider={
+          <Sidebar
+            projects={projects}
+            categories={sidebarCategories}
+            live={live}
+            refreshing={refreshing}
+            onRefresh={refresh}
+            activeCategoryId={viewCategoryId}
+            activeGroupId={detailView?.groupId}
+            onNavigate={navigate}
+          />
+        }
+      >
+        <div className="content">
+          <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
 
-      <div className="search-row">
-        <SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
-      </div>
+          <h1 className="sr-only">Stash 本地应用工作区</h1>
 
-      <div className="layout">
-        <Sidebar
-          projects={projects}
-          categories={sidebarCategories}
-          live={live}
-          refreshing={refreshing}
-          onRefresh={refresh}
-          activeCategoryId={viewCategoryId}
-          activeGroupId={detailView?.groupId}
-          onNavigate={navigate}
-        />
+          {status === 'error' && (
+            <Notice
+              tone="error"
+              title="连不上 Stash 服务"
+              action={{ label: '重试', onClick: refresh }}
+            >
+              {error}
+            </Notice>
+          )}
 
-        <main className="content">
-          {/* 滚动后才淡入的顶部遮罩，避免内容在容器顶边被硬切 */}
-          <div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
+          {/* 内容库读取失败通常是用户改坏了 data 列里的 JSON，错误信息会带条目 id */}
+          {catalog.status === 'error' && (
+            <Notice
+              tone="error"
+              title="内容库读取失败"
+              action={{ label: '重试', onClick: catalog.reload }}
+            >
+              {catalog.error}
+            </Notice>
+          )}
 
-          <div
-            className="content-scroll"
-            id="content-scroll"
-            ref={scrollRef}
-            onScroll={(event) => {
-              const next = event.currentTarget.scrollTop > 4
-              setScrolled((current) => (current === next ? current : next))
-            }}
-          >
-            <h1 className="sr-only">Stash 本地应用工作区</h1>
+          {detailView === undefined && itemView === undefined && (
+            <>
+              {catalog.status === 'loading' && <Empty text="正在读取内容库…" />}
 
-            {status === 'error' && (
-              <div className="notice notice-error" role="alert">
-                <strong>连不上 Stash 服务</strong>
-                <p>{error}</p>
-                <button type="button" className="notice-action" onClick={refresh}>
-                  重试
-                </button>
-              </div>
-            )}
-
-            {/* 内容库读取失败通常是用户改坏了 data 列里的 JSON，错误信息会带条目 id */}
-            {catalog.status === 'error' && (
-              <div className="notice notice-error" role="alert">
-                <strong>内容库读取失败</strong>
-                <p>{catalog.error}</p>
-                <button type="button" className="notice-action" onClick={catalog.reload}>
-                  重试
-                </button>
-              </div>
-            )}
-
-            {detailView === undefined && itemView === undefined && (
-              <>
-                {catalog.status === 'loading' && (
-                  <p className="section-empty">正在读取内容库…</p>
-                )}
-
-                <HomeView
-                  categories={visibleCategories}
-                  onOpenDetail={openDetail}
-                  onOpenItem={openItem}
-                />
-
-                {searching && visibleCategories.length === 0 && (
-                  <div className="notice">
-                    <strong>没有匹配「{keyword.trim()}」的内容</strong>
-                    <p>换个关键字试试，或清空搜索查看全部。</p>
-                  </div>
-                )}
-              </>
-            )}
-
-            {detailView !== undefined && detailCategory !== undefined && (
-              <DetailView
-                category={detailCategory}
-                groupId={detailView.groupId}
-                onBack={goHome}
-                onOpenItem={(itemId) => openItem(detailCategory.id, itemId)}
+              <HomeView
+                categories={visibleCategories}
+                onOpenDetail={openDetail}
+                onOpenItem={openItem}
               />
-            )}
 
-            {detailView !== undefined && detailCategory === undefined && (
-              <p className="section-empty">
-                {dataPending ? '正在读取内容库…' : '分类不存在'}
-              </p>
-            )}
+              {searching && visibleCategories.length === 0 && (
+                <Notice title={`没有匹配「${keyword.trim()}」的内容`}>
+                  换个关键字试试，或清空搜索查看全部。
+                </Notice>
+              )}
+            </>
+          )}
 
-            {itemView !== undefined && renderItemView()}
-          </div>
-        </main>
-      </div>
+          {detailView !== undefined && detailCategory !== undefined && (
+            <DetailView
+              category={detailCategory}
+              groupId={detailView.groupId}
+              onBack={goHome}
+              onOpenItem={(itemId) => openItem(detailCategory.id, itemId)}
+            />
+          )}
+
+          {detailView !== undefined && detailCategory === undefined && (
+            <Empty text={dataPending ? '正在读取内容库…' : '分类不存在'} />
+          )}
+
+          {itemView !== undefined && renderItemView()}
+        </div>
+      </Layout>
 
       <BackToTop visible={scrolled} />
-    </div>
+    </>
   )
 }

stash-web/src/components/common/BackToTop.tsx

@@ -1,33 +1,14 @@
-import { ArrowUpIcon } from './Icon'
+import { ScrollTop } from '@stash/ui'
 
 /**
- * 回到顶部：复刻 Alright 主题的 .scroll-toolbar .totop-button。
- *
- * - 42px 圆形、浅灰底，固定在右侧（bottom: 50%）
- * - 默认隐藏，只有内容区滚动后才淡入，回到顶部后再淡出
+ * 回到顶部：直接用组件库的 ScrollTop。
+ * 页面整体滚动（没有内部滚动容器），所以不传 targetId。
  */
 type BackToTopProps = {
-  /** 内容区是否已滚动（由 App 传入） */
+  /** 页面是否已滚动（由 App 传入） */
   visible: boolean
 }
 
 export function BackToTop({ visible }: BackToTopProps) {
-  const handleClick = () => {
-    // 桌面端滚动的是内容容器，窄屏滚动的是窗口，两处都滚一遍
-    document.getElementById('content-scroll')?.scrollTo({ top: 0, behavior: 'smooth' })
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
-  return (
-    <button
-      type="button"
-      className={`back-to-top${visible ? ' is-visible' : ''}`}
-      title="回到顶部"
-      aria-label="回到顶部"
-      tabIndex={visible ? 0 : -1}
-      onClick={handleClick}
-    >
-      <ArrowUpIcon />
-    </button>
-  )
+  return <ScrollTop visible={visible} />
 }

stash-web/src/components/common/CountBadge.tsx

@@ -1,11 +1,13 @@
+import { Badge } from '@stash/ui'
+
 /**
- * 数量角标：贴在分区标题右上角的小红标。
- * 纯展示组件，只接收数字，宽度由内容撑开（两位数不会变形）。
+ * 数量角标：贴在分区标题旁边的小红标。
+ * 组件库的 Badge 已经处理了两位数和 99+ 的宽度，这里只做语义封装。
  */
 type CountBadgeProps = {
   count: number
 }
 
 export function CountBadge({ count }: CountBadgeProps) {
-  return <span className="count-badge">{count}</span>
+  return <Badge count={count} tone="danger" />
 }

stash-web/src/components/common/Icon.tsx

@@ -1,63 +1,57 @@
-/**
- * 通用图标组件。
- *
- * 全部使用 Alright 主题的 iconfont 线性图标（见 src/iconfont.css），
- * 尺寸与颜色由使用处的 CSS 控制（font-size / color），
- * 因此同一套图标可以复用在按钮、统计条、导航等不同位置。
- */
+import { Icon } from '@stash/ui'
 
+/**
+ * 语义图标：stash 内部一直按用途引用（SearchIcon / RefreshIcon…），
+ * 这里统一映射到 @stash/ui 的 iconfont 字形，避免各页面记字形名。
+ */
 type IconProps = {
-  /** 附加类名，便于局部覆盖字号或颜色 */
   className?: string
 }
 
-const base = (name: string, className?: string) =>
-  `iconfont icon-${name}${className !== undefined ? ` ${className}` : ''}`
-
 export function SearchIcon({ className }: IconProps) {
-  return <i className={base('search', className)} aria-hidden="true" />
+  return <Icon name="search_3_line" className={className} />
 }
 
 export function UserIcon({ className }: IconProps) {
-  return <i className={base('user', className)} aria-hidden="true" />
+  return <Icon name="user_3_line" className={className} />
 }
 
 export function RefreshIcon({ className }: IconProps) {
-  return <i className={base('refresh', className)} aria-hidden="true" />
+  return <Icon name="refresh_3_line" className={className} />
 }
 
 export function LinkIcon({ className }: IconProps) {
-  return <i className={base('link', className)} aria-hidden="true" />
+  return <Icon name="link_3_line" className={className} />
 }
 
 export function ExternalIcon({ className }: IconProps) {
-  return <i className={base('external', className)} aria-hidden="true" />
+  return <Icon name="a-external_link_line1" className={className} />
 }
 
 export function EyeIcon({ className }: IconProps) {
-  return <i className={base('eye', className)} aria-hidden="true" />
+  return <Icon name="eye_line" className={className} />
 }
 
 export function ThumbUpIcon({ className }: IconProps) {
-  return <i className={base('thumb-up', className)} aria-hidden="true" />
+  return <Icon name="thumb_up_2_line" className={className} />
 }
 
 export function ShareIcon({ className }: IconProps) {
-  return <i className={base('share', className)} aria-hidden="true" />
+  return <Icon name="share_3_line" className={className} />
 }
 
 export function CloseIcon({ className }: IconProps) {
-  return <i className={base('close', className)} aria-hidden="true" />
+  return <Icon name="close_line" className={className} />
 }
 
 export function MoreIcon({ className }: IconProps) {
-  return <i className={base('more', className)} aria-hidden="true" />
+  return <Icon name="more_1_line" className={className} />
 }
 
 export function ArrowUpIcon({ className }: IconProps) {
-  return <i className={base('arrow-up', className)} aria-hidden="true" />
+  return <Icon name="arrow_up_line" className={className} />
 }
 
 export function ArrowDownIcon({ className }: IconProps) {
-  return <i className={base('arrow-down', className)} aria-hidden="true" />
+  return <Icon name="arrow_down_line" className={className} />
 }

stash-web/src/components/content/AppCard.tsx

@@ -1,14 +1,9 @@
+import { Avatar, ItemBadge, Space, Text } from '@stash/ui'
 import type { AppItem } from '../../data/types'
 
 /**
- * 应用卡片：逐项复刻 Alright 主题「推荐作者」条目的结构。
- *
- * 对应主题的：
- *   .flex-avatar  > img.avatar-48 + span.avatar-badge.badge_5
- *   .item-content > h3.font-title.text-md（名字 + span.item-badge.hot）
- *                 + div.text-xs.text-muted.h-1x（单行描述）
- *
- * 热门条目才会同时出现头像角标和 HOT 徽标，普通条目两者都没有。
+ * 应用卡片：头像 + 名称（热门带 HOT 角标）+ 单行描述。
+ * 点击进入条目详情；按住修饰键时保持浏览器默认行为（新标签打开原始链接）。
  */
 type AppCardProps = {
   item: AppItem
@@ -28,22 +23,25 @@ export function AppCard({ item, onOpen }: AppCardProps) {
         onOpen(item.id)
       }}
     >
-      <span className="app-card-avatar" aria-hidden="true">
-        {item.cover !== undefined ? (
-          <img src={item.cover} alt="" loading="lazy" />
-        ) : (
-          <span className="app-card-letter">{item.icon}</span>
-        )}
-        {item.hot === true && <span className="app-card-verify" />}
-      </span>
+      <Avatar
+        size="md"
+        shape="square"
+        src={item.cover}
+        fallback={item.icon}
+        verified={item.hot === true}
+      />
 
-      <span className="app-card-info">
-        <span className="app-card-title">
-          <span className="app-card-name">{item.name}</span>
-          {item.hot === true && <span className="app-card-badge" />}
-        </span>
-        <span className="app-card-desc">{item.desc}</span>
-      </span>
+      <div className="app-card-info">
+        <Space gap="xs">
+          <Text strong truncate className="app-card-name">
+            {item.name}
+          </Text>
+          {item.hot === true && <ItemBadge tone="hot">HOT</ItemBadge>}
+        </Space>
+        <Text size="xs" tone="muted" truncate>
+          {item.desc}
+        </Text>
+      </div>
     </a>
   )
 }

stash-web/src/components/content/AppGrid.tsx

@@ -1,10 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { AppItem } from '../../data/types'
 import { AppCard } from './AppCard'
 
-/**
- * 应用网格：默认 4 列，窄屏退化为 2 列。
- * 首页预览与明细页共用，靠 modifier 调整间距。
- */
+/** 应用网格：默认 4 列，平板 2 列，手机 2 列（组件库 Grid 负责断点） */
 type AppGridProps = {
   items: AppItem[]
   /** 明细页使用更宽松的间距 */
@@ -15,10 +13,10 @@ type AppGridProps = {
 
 export function AppGrid({ items, variant = 'home', onOpen }: AppGridProps) {
   return (
-    <div className={`app-grid${variant === 'detail' ? ' app-grid--detail' : ''}`}>
+    <Grid columns={4} tabletColumns={2} mobileColumns={2} gap={variant === 'detail' ? 'md' : 'sm'}>
       {items.map((item) => (
         <AppCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }

stash-web/src/components/content/ArticleBody.tsx

@@ -1,3 +1,4 @@
+import { Paragraph, Title } from '@stash/ui'
 import type { ReactNode } from 'react'
 
 /**
@@ -10,7 +11,6 @@ import type { ReactNode } from 'react'
  * - 行内 `**粗体**`、`` `代码` ``、`[文字](链接)`
  *
  * 不支持列表、表格、引用块——这里渲染的是文章正文，不是通用 Markdown 编辑器。
- * 需要完整语法时再换 react-markdown，渲染层已经隔离在这个组件里。
  */
 
 type Block =
@@ -104,9 +104,9 @@ export function ArticleBody({ markdown }: ArticleBodyProps) {
       {parseBlocks(markdown).map((block, index) => {
         if (block.kind === 'heading') {
           return (
-            <h3 className="article-body-heading" key={index}>
+            <Title level={2} as="h3" key={index}>
               {renderInline(block.text)}
-            </h3>
+            </Title>
           )
         }
 
@@ -123,9 +123,9 @@ export function ArticleBody({ markdown }: ArticleBodyProps) {
         }
 
         return (
-          <p className="article-body-text" key={index}>
+          <Paragraph tone="main" key={index}>
             {renderInline(block.text)}
-          </p>
+          </Paragraph>
         )
       })}
     </>

stash-web/src/components/content/ArticleCard.tsx

@@ -12,24 +12,17 @@ type ArticleCardProps = {
 export function ArticleCard({ item, onOpen }: ArticleCardProps) {
   const content = (
     <>
-      <img className="article-cover" src={item.cover} alt={item.title} loading="lazy" />
-      <span className="article-caption">
-        <span className="article-title">{item.title}</span>
-      </span>
+      <img className="cover cover--article" src={item.cover} alt={item.title} loading="lazy" />
+      <span className="cover-caption">{item.title}</span>
     </>
   )
 
   if (onOpen === undefined) {
-    return <figure className="article-card">{content}</figure>
+    return <figure className="cover-card">{content}</figure>
   }
 
   return (
-    <button
-      type="button"
-      className="article-card"
-      title={item.title}
-      onClick={() => onOpen(item.id)}
-    >
+    <button type="button" className="cover-card" title={item.title} onClick={() => onOpen(item.id)}>
       {content}
     </button>
   )

stash-web/src/components/content/ArticleDetailView.tsx

@@ -1,3 +1,4 @@
+import { Button, Card, Paragraph, Space, Text, Title } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 import { ArticleBody } from './ArticleBody'
 
@@ -19,34 +20,49 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
 
   return (
     <div className="detail-view article-view">
-      <div className="detail-nav card-box">
-        <button type="button" className="detail-back" onClick={onBack}>
-          返回
-        </button>
-        <span className="detail-breadcrumb">{categoryTitle} / 文章</span>
-      </div>
+      <Card padding="sm">
+        <Space justify="between" wrap>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            返回
+          </Button>
+          <Text size="sm" tone="sub">
+            {categoryTitle} / 文章
+          </Text>
+        </Space>
+      </Card>
 
       <header className="article-head">
-        <h2 className="article-heading">
+        <Title level={2}>
           {article.title}
-          <button type="button" className="item-edit" disabled title="编辑功能待接入">
-            [编辑]
-          </button>
-        </h2>
+          <Button variant="ghost" size="sm" disabled className="item-edit">
+            编辑
+          </Button>
+        </Title>
 
-        <div className="article-meta">
+        <Space gap="sm" wrap>
           {meta.map((text, index) => (
-            <span className="article-meta-item" key={text}>
-              {index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
-              {text}
-            </span>
+            <Space gap="sm" key={text}>
+              {index > 0 && (
+                <span className="article-meta-dot" aria-hidden="true">
+                  ·
+                </span>
+              )}
+              <Text size="sm" tone="muted">
+                {text}
+              </Text>
+            </Space>
           ))}
-        </div>
+        </Space>
       </header>
 
-      <article className="article-body card-box">
-        <ArticleBody markdown={article.body} />
-      </article>
+      <Card padding="lg">
+        <div className="article-body">
+          <Paragraph tone="main" className="article-lead">
+            {article.desc}
+          </Paragraph>
+          <ArticleBody markdown={article.body} />
+        </div>
+      </Card>
     </div>
   )
 }

stash-web/src/components/content/ArticleGrid.tsx

@@ -1,7 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 import { ArticleCard } from './ArticleCard'
 
-/** 图文网格：首页 4 列，窄屏 2 列 */
+/** 图文网格：桌面 4 列，平板 2 列，手机 1 列 */
 type ArticleGridProps = {
   items: ArticleItem[]
   /** 点击卡片打开文章详情 */
@@ -10,10 +11,10 @@ type ArticleGridProps = {
 
 export function ArticleGrid({ items, onOpen }: ArticleGridProps) {
   return (
-    <div className="article-grid">
+    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="sm">
       {items.map((item) => (
         <ArticleCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }

stash-web/src/components/content/CesCard.tsx

@@ -1,3 +1,4 @@
+import { Card, Space, Text } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 
 /**
@@ -10,28 +11,32 @@ type CesCardProps = {
 }
 
 export function CesCard({ item, onOpen }: CesCardProps) {
-  const content = (
-    <>
-      <img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
-      <span className="ces-body">
-        <span className="ces-title">{item.title}</span>
-        <span className="ces-desc">{item.desc}</span>
-      </span>
-    </>
+  const body = (
+    <Space direction="column" gap="xs" align="stretch">
+      <Text strong truncate>
+        {item.title}
+      </Text>
+      <Text size="xs" tone="muted" truncate>
+        {item.desc}
+      </Text>
+    </Space>
   )
 
-  if (onOpen === undefined) {
-    return <article className="ces-card">{content}</article>
-  }
-
   return (
-    <button
-      type="button"
-      className="ces-card"
-      title={item.title}
-      onClick={() => onOpen(item.id)}
-    >
-      {content}
-    </button>
+    <Card padding="none" hoverable className="ces-card">
+      <img className="cover cover--article" src={item.cover} alt={item.title} loading="lazy" />
+      {onOpen === undefined ? (
+        <div className="ces-body">{body}</div>
+      ) : (
+        <button
+          type="button"
+          className="ces-body ces-body--button"
+          title={item.title}
+          onClick={() => onOpen(item.id)}
+        >
+          {body}
+        </button>
+      )}
+    </Card>
   )
 }

stash-web/src/components/content/CesCardGrid.tsx

@@ -1,7 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { ArticleItem } from '../../data/types'
 import { CesCard } from './CesCard'
 
-/** 明细页图文网格：4 列白卡，窄屏 2 列 */
+/** 明细页图文网格：桌面 4 列，平板 2 列，手机 1 列 */
 type CesCardGridProps = {
   items: ArticleItem[]
   /** 点击卡片打开文章详情 */
@@ -10,10 +11,10 @@ type CesCardGridProps = {
 
 export function CesCardGrid({ items, onOpen }: CesCardGridProps) {
   return (
-    <div className="ces-grid">
+    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="sm">
       {items.map((item) => (
         <CesCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }

stash-web/src/components/content/DetailView.tsx

@@ -1,3 +1,4 @@
+import { Badge, Breadcrumb, Button, Card, Empty, Space, Title } from '@stash/ui'
 import { categoryCount, type Category } from '../../data/types'
 import { AppGrid } from './AppGrid'
 import { CesCardGrid } from './CesCardGrid'
@@ -28,10 +29,14 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
 
   const title = activeGroup?.name ?? category.title
   const count = activeGroup !== undefined ? activeGroup.items.length : categoryCount(category)
-  const breadcrumb =
+  const crumbs =
     activeGroup !== undefined
-      ? `首页 / ${category.title} / ${activeGroup.name}`
-      : `首页 / ${category.title}`
+      ? [
+          { label: '首页', href: '/' },
+          { label: category.title },
+          { label: activeGroup.name },
+        ]
+      : [{ label: '首页', href: '/' }, { label: category.title }]
 
   function renderBody() {
     if (category.kind === 'posters') {
@@ -51,33 +56,35 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
     }
 
     if (category.groups.length === 0) {
-      return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
+      return <Empty text={category.emptyText ?? '暂无内容'} />
     }
 
     return (
-      <>
+      <Space direction="column" gap="lg" align="stretch">
         {category.groups.map((group) => (
           <GroupBlock key={group.id} group={group} onOpen={onOpenItem} />
         ))}
-      </>
+      </Space>
     )
   }
 
   return (
     <div className="detail-view">
-      <div className="detail-nav card-box">
-        <button type="button" className="detail-back" onClick={onBack}>
-          返回首页
-        </button>
-        <span className="detail-breadcrumb">{breadcrumb}</span>
-      </div>
+      <Card padding="sm">
+        <Space justify="between" wrap>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            返回首页
+          </Button>
+          <Breadcrumb items={crumbs} />
+        </Space>
+      </Card>
 
       <div className="detail-hero">
         <span className="detail-hero-icon" aria-hidden="true">
           {category.icon}
         </span>
-        <h2 className="detail-hero-title">{title}</h2>
-        <span className="detail-hero-count">[{count}]</span>
+        <Title level={2}>{title}</Title>
+        <Badge count={count} tone="neutral" />
       </div>
 
       {renderBody()}

stash-web/src/components/content/GroupBlock.tsx

@@ -1,3 +1,4 @@
+import { Space, Title } from '@stash/ui'
 import type { AppGroup } from '../../data/types'
 import { AppGrid } from './AppGrid'
 
@@ -12,9 +13,11 @@ type GroupBlockProps = {
 
 export function GroupBlock({ group, onOpen }: GroupBlockProps) {
   return (
-    <section className="group-block">
-      <h3 className="group-title">{group.name}</h3>
+    <Space direction="column" gap="sm" align="stretch" className="group-block">
+      <Title level={4} as="h3">
+        {group.name}
+      </Title>
       <AppGrid items={group.items} variant="detail" onOpen={onOpen} />
-    </section>
+    </Space>
   )
 }

stash-web/src/components/content/HomeView.tsx

@@ -1,6 +1,7 @@
 import { categoryCount, flattenAppItems, type Category } from '../../data/types'
 import { AppGrid } from './AppGrid'
 import { ArticleGrid } from './ArticleGrid'
+import { Empty } from '@stash/ui'
 import { PosterGrid } from './PosterGrid'
 import { SectionCard } from './SectionCard'
 
@@ -68,7 +69,7 @@ function renderPreview(
     const items = source.slice(0, limit)
 
     if (items.length === 0) {
-      return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
+      return <Empty text={category.emptyText ?? '暂无内容'} />
     }
 
     return <AppGrid items={items} onOpen={(itemId) => onOpenItem(category.id, itemId)} />

stash-web/src/components/content/ItemDetailView.tsx

@@ -1,6 +1,6 @@
+import { Button, Card, Icon, IconButton, Paragraph, Space, Tag, Text, Title } from '@stash/ui'
 import type { ItemDetailModel } from '../../data/detail'
 import type { RelatedItem } from '../../data/types'
-import { ExternalIcon, EyeIcon, ShareIcon, ThumbUpIcon } from '../common/Icon'
 import { RelatedList } from './RelatedList'
 
 /**
@@ -27,20 +27,24 @@ export function ItemDetailView({
 }: ItemDetailViewProps) {
   return (
     <div className="detail-view item-view">
-      <div className="detail-nav card-box">
-        <button type="button" className="detail-back" onClick={onBack}>
-          返回
-        </button>
-        <span className="detail-breadcrumb">{breadcrumb}</span>
-      </div>
+      <Card padding="sm">
+        <Space justify="between" wrap>
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            返回
+          </Button>
+          <Text size="sm" tone="sub">
+            {breadcrumb}
+          </Text>
+        </Space>
+      </Card>
 
-      <article className="item-card card-box">
-        <h2 className="item-title">
+      <Card padding="lg">
+        <Title level={2}>
           {model.title}
-          <button type="button" className="item-edit" disabled title="编辑功能待接入">
-            [编辑]
-          </button>
-        </h2>
+          <Button variant="ghost" size="sm" disabled className="item-edit">
+            编辑
+          </Button>
+        </Title>
 
         <div className={`item-cover item-cover--${model.shape}`}>
           {model.cover !== undefined ? (
@@ -51,68 +55,62 @@ export function ItemDetailView({
         </div>
 
         {model.tags.length > 0 && (
-          <div className="item-tags">
+          <Space gap="sm" wrap>
             {model.tags.map((tag) => (
-              <span className="item-tag" key={tag}>
+              <Tag key={tag} shape="rounded">
                 {tag}
-              </span>
+              </Tag>
             ))}
-          </div>
+          </Space>
         )}
 
         {model.comment !== undefined && (
-          <div className="item-quote">
-            <span className="item-quote-mark" aria-hidden="true">
-              “
-            </span>
-            <p className="item-quote-text">{model.comment}</p>
-          </div>
+          <Paragraph tone="secondary" className="item-quote">
+            {model.comment}
+          </Paragraph>
         )}
 
         {model.paragraphs.map((paragraph, index) => (
-          <p className="item-desc" key={`${index}-${paragraph.slice(0, 8)}`}>
+          <Paragraph key={`${index}-${paragraph.slice(0, 8)}`} tone="main">
             {paragraph}
-          </p>
+          </Paragraph>
         ))}
 
-        <div className="item-actions">
-          <span className="item-stat" title="浏览量">
-            <EyeIcon />
-            <em>{model.views}</em>
-          </span>
-
-          <span className="item-stat" title="点赞数">
-            <ThumbUpIcon />
-            <em>{model.likes}</em>
-          </span>
-
-          <button
-            type="button"
-            className="item-stat item-stat--icon"
-            title="分享（待接入）"
-            aria-label="分享"
-          >
-            <ShareIcon />
-          </button>
+        <Space justify="between" wrap className="item-actions">
+          <Space gap="lg">
+            <Space gap="xs" className="item-stat">
+              <Icon name="eye_line" />
+              <Text size="sm" tone="sub">
+                {model.views}
+              </Text>
+            </Space>
+            <Space gap="xs" className="item-stat">
+              <Icon name="thumb_up_2_line" />
+              <Text size="sm" tone="sub">
+                {model.likes}
+              </Text>
+            </Space>
+            <IconButton label="分享（待接入）" size="xs" icon={<Icon name="share_3_line" />} />
+          </Space>
 
           {/* 占位数据没有真实地址时，按钮置灰而不是打开空白页 */}
           {model.href === '#' ? (
-            <button type="button" className="item-jump" disabled title="暂无跳转地址">
+            <Button size="sm" disabled>
               跳转到
-              <ExternalIcon />
-            </button>
+              <Icon name="a-external_link_line1" />
+            </Button>
           ) : (
-            <a className="item-jump" href={model.href} target="_blank" rel="noreferrer">
+            <a className="link-button" href={model.href} target="_blank" rel="noreferrer">
               跳转到
-              <ExternalIcon />
+              <Icon name="a-external_link_line1" />
             </a>
           )}
-        </div>
+        </Space>
 
         {model.banner !== undefined && (
           <img className="item-banner" src={model.banner} alt="" loading="lazy" />
         )}
-      </article>
+      </Card>
 
       <RelatedList items={related} onOpen={onOpenItem} />
     </div>

stash-web/src/components/content/PosterCard.tsx

@@ -12,24 +12,17 @@ type PosterCardProps = {
 export function PosterCard({ item, onOpen }: PosterCardProps) {
   const content = (
     <>
-      <img className="poster-cover" src={item.cover} alt={item.title} loading="lazy" />
-      <span className="poster-caption">
-        <span className="poster-title">{item.title}</span>
-      </span>
+      <img className="cover cover--poster" src={item.cover} alt={item.title} loading="lazy" />
+      <span className="cover-caption">{item.title}</span>
     </>
   )
 
   if (onOpen === undefined) {
-    return <figure className="poster-card">{content}</figure>
+    return <figure className="cover-card">{content}</figure>
   }
 
   return (
-    <button
-      type="button"
-      className="poster-card"
-      title={item.title}
-      onClick={() => onOpen(item.id)}
-    >
+    <button type="button" className="cover-card" title={item.title} onClick={() => onOpen(item.id)}>
       {content}
     </button>
   )

stash-web/src/components/content/PosterGrid.tsx

@@ -1,7 +1,8 @@
+import { Grid } from '@stash/ui'
 import type { PosterItem } from '../../data/types'
 import { PosterCard } from './PosterCard'
 
-/** 海报网格：首页 6 列，明细页同样 6 列但间距更大 */
+/** 海报网格：桌面 6 列，平板 4 列，手机 3 列 */
 type PosterGridProps = {
   items: PosterItem[]
   variant?: 'home' | 'detail'
@@ -9,12 +10,12 @@ type PosterGridProps = {
   onOpen?: (itemId: string) => void
 }
 
-export function PosterGrid({ items, variant = 'home', onOpen }: PosterGridProps) {
+export function PosterGrid({ items, onOpen }: PosterGridProps) {
   return (
-    <div className={`poster-grid${variant === 'detail' ? ' poster-grid--detail' : ''}`}>
+    <Grid columns={6} tabletColumns={4} mobileColumns={3} gap="sm">
       {items.map((item) => (
         <PosterCard key={item.id} item={item} onOpen={onOpen} />
       ))}
-    </div>
+    </Grid>
   )
 }

stash-web/src/components/content/RelatedList.tsx

@@ -1,3 +1,4 @@
+import { Avatar, Card, Grid, Space, Text, Title } from '@stash/ui'
 import type { RelatedItem } from '../../data/types'
 
 /**
@@ -13,33 +14,31 @@ export function RelatedList({ items, onOpen }: RelatedListProps) {
   if (items.length === 0) return null
 
   return (
-    <section className="related-card card-box" aria-label="推荐阅读">
-      <h3 className="related-title">
-        <span className="related-title-icon" aria-hidden="true">
-          📚
-        </span>
+    <Card padding="lg" className="related-card">
+      <Title level={4} as="h3">
         推荐阅读
-      </h3>
+      </Title>
 
-      <ul className="related-grid">
+      <Grid columns={2} tabletColumns={2} mobileColumns={1} gap="sm">
         {items.map((item) => (
-          <li key={item.id}>
-            <button type="button" className="related-item" onClick={() => onOpen(item.id)}>
-              <span className="related-avatar" aria-hidden="true">
-                {item.cover !== undefined ? (
-                  <img src={item.cover} alt="" loading="lazy" />
-                ) : (
-                  (item.icon ?? '•')
-                )}
-              </span>
-              <span className="related-info">
-                <span className="related-name">{item.name}</span>
-                <span className="related-desc">{item.desc}</span>
-              </span>
-            </button>
-          </li>
+          <button
+            key={item.id}
+            type="button"
+            className="related-item"
+            onClick={() => onOpen(item.id)}
+          >
+            <Avatar size="sm" shape="square" src={item.cover} fallback={item.icon ?? '•'} />
+            <Space direction="column" gap="xs" align="start" className="related-info">
+              <Text size="sm" strong truncate>
+                {item.name}
+              </Text>
+              <Text size="xs" tone="muted" truncate>
+                {item.desc}
+              </Text>
+            </Space>
+          </button>
         ))}
-      </ul>
-    </section>
+      </Grid>
+    </Card>
   )
 }

stash-web/src/components/content/SectionCard.tsx

@@ -1,9 +1,8 @@
+import { Badge, Card, Icon, IconButton, Space, Title } from '@stash/ui'
 import type { ReactNode } from 'react'
-import { CountBadge } from '../common/CountBadge'
-import { MoreIcon } from '../common/Icon'
 
 /**
- * 首页分区卡片：白底圆角容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
+ * 首页分区卡片：白底容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
  * 内容由调用方传入，因此同一容器可以承载应用网格、海报网格或图文网格。
  */
 type SectionCardProps = {
@@ -18,30 +17,27 @@ type SectionCardProps = {
 
 export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
   return (
-    <section className="section-card">
-      <header className="section-header">
-        <div className="section-title-wrapper">
+    <Card padding="lg" className="section-card">
+      <div className="section-header">
+        <Space gap="sm">
           <span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
-          <span className="section-title-box">
-            <h2 className="section-title">{title}</h2>
-            <CountBadge count={count} />
-          </span>
-        </div>
+          <Title level={3} as="h2">
+            {title}
+          </Title>
+          <Badge count={count} tone="danger" />
+        </Space>
 
         {onMore !== undefined && (
-          <button
-            type="button"
-            className="section-more"
-            title={`查看${title}全部`}
-            aria-label={`查看${title}全部`}
+          <IconButton
+            size="xs"
+            label={`查看${title}全部`}
+            icon={<Icon name="more_1_line" />}
             onClick={onMore}
-          >
-            <MoreIcon />
-          </button>
+          />
         )}
-      </header>
+      </div>
 
       {children}
-    </section>
+    </Card>
   )
 }

stash-web/src/components/header/HeaderInfoItem.tsx

@@ -1,8 +1,9 @@
+import { Space, Tag, Text } from '@stash/ui'
 import type { ReactNode } from 'react'
 
 /**
  * 顶栏中间的一条信息，形如「[标签] 文本」。
- * 标签带浅色底，用于区分「本地 / 状态」这类类型前缀。
+ * 标签用组件库的 Tag（success / primary 两种语气）。
  */
 type HeaderInfoItemProps = {
   /** 可选的前缀标签 */
@@ -14,11 +15,15 @@ type HeaderInfoItemProps = {
 
 export function HeaderInfoItem({ tag, tone = 'blue', children }: HeaderInfoItemProps) {
   return (
-    <div className="header-info-item">
+    <Space gap="sm">
       {tag !== undefined && (
-        <span className={`header-info-tag${tone === 'green' ? ' is-green' : ''}`}>{tag}</span>
+        <Tag tone={tone === 'green' ? 'success' : 'primary'} shape="rounded">
+          {tag}
+        </Tag>
       )}
-      <span className="header-info-text">{children}</span>
-    </div>
+      <Text size="sm" tone="sub">
+        {children}
+      </Text>
+    </Space>
   )
 }

stash-web/src/components/header/SiteHeader.tsx

@@ -1,10 +1,9 @@
-import { SearchIcon, UserIcon } from '../common/Icon'
+import { Icon, IconButton, Space } from '@stash/ui'
 import { HeaderInfoItem } from './HeaderInfoItem'
 
 /**
  * 顶部栏：左品牌、中间运行信息、右侧操作图标。
- * 信息区展示「共 N 个本地应用 / 第一个项目 / 连接状态」，
- * 对应模板里的 header-center-info。
+ * 外层 <header> 由 Layout 提供，这里只渲染栏内的内容。
  */
 type SiteHeaderProps = {
   projectCount: number
@@ -16,43 +15,35 @@ type SiteHeaderProps = {
 
 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="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>
+      <Space gap="lg" className="header-info">
+        <HeaderInfoItem>共 {projectCount} 个本地应用</HeaderInfoItem>
 
-          {sampleProject !== undefined && (
-            <HeaderInfoItem tag="本地">{sampleProject}</HeaderInfoItem>
-          )}
+        {sampleProject !== undefined && (
+          <HeaderInfoItem tag="本地">{sampleProject}</HeaderInfoItem>
+        )}
 
-          <HeaderInfoItem tag="状态" tone={live ? 'green' : 'blue'}>
-            {live ? '实时同步已连接' : '等待服务连接'}
-          </HeaderInfoItem>
-        </div>
+        <HeaderInfoItem tag="状态" tone={live ? 'green' : 'blue'}>
+          {live ? '实时同步已连接' : '等待服务连接'}
+        </HeaderInfoItem>
+      </Space>
 
-        <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>
+      <Space gap="sm" className="header-actions">
+        <IconButton
+          label="聚焦搜索框（Ctrl+K）"
+          icon={<Icon name="search_3_line" />}
+          onClick={onFocusSearch}
+        />
+        {/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
+        <IconButton label="登录" icon={<Icon name="user_3_line" />} />
+      </Space>
+    </div>
   )
 }

stash-web/src/components/search/SearchBar.tsx

@@ -1,8 +1,8 @@
+import { Input } from '@stash/ui'
 import { useEffect, type RefObject } from 'react'
-import { CloseIcon, SearchIcon } from '../common/Icon'
 
 /**
- * 全局搜索框：固定悬浮在顶栏下方居中。
+ * 全局搜索框：吸在内容区顶部。
  * 支持 Ctrl/Cmd+K 聚焦、Esc 清空，输入内容由父组件接管过滤逻辑。
  */
 type SearchBarProps = {
@@ -26,33 +26,22 @@ export function SearchBar({ value, onChange, inputRef }: SearchBarProps) {
   }, [inputRef])
 
   return (
-    <div className="search-bar card-box">
-      <SearchIcon className="search-icon" />
-
-      <input
-        ref={inputRef}
-        className="search-input"
-        type="text"
+    <div className="search-row">
+      <Input
+        inputRef={inputRef}
+        icon="search_3_line"
         value={value}
         placeholder="搜索本地项目…"
         aria-label="搜索本地项目"
+        clearable
+        onClear={() => onChange('')}
+        shortcut="Ctrl K"
         spellCheck={false}
         onChange={(event) => onChange(event.target.value)}
         onKeyDown={(event) => {
           if (event.key === 'Escape') onChange('')
         }}
       />
-
-      {value !== '' && (
-        <button
-          type="button"
-          className="search-clear"
-          aria-label="清空搜索"
-          onClick={() => onChange('')}
-        >
-          <CloseIcon />
-        </button>
-      )}
     </div>
   )
 }

stash-web/src/components/sidebar/CategoryNav.tsx

@@ -1,12 +1,14 @@
-import { useState } from 'react'
+import { Card, Menu, type MenuItem } from '@stash/ui'
 import type { NavTarget } from '../../data/nav'
 import type { Category } from '../../data/types'
 
 /**
- * 分类导航树：直接由内容树派生，不再读独立的导航数据。
+ * 分类导航树：由内容树派生。
  *
- * - 有分组的分类（apps）渲染成可折叠节点，子项是分组（分组可用 show_in_sidebar 单独隐藏）；
- * - 没有分组、或分组全被隐藏的分类，直接是链接。
+ * - 有分组的分类（apps）是折叠节点，子项是分组（分组可用 show_in_sidebar 单独隐藏）；
+ * - 没有分组、或分组全被隐藏的分类，就是一个普通菜单项。
+ *
+ * 折叠状态由组件库的 Menu 内部维护；这里只负责把内容树翻译成 items。
  */
 type CategoryNavProps = {
   /** 内容目录；顺序即侧栏顺序 */
@@ -17,82 +19,54 @@ type CategoryNavProps = {
   onNavigate: (target: NavTarget) => void
 }
 
+const categoryKey = (id: string) => `cat:${id}`
+const groupKey = (categoryId: string, groupId: string) => `group:${categoryId}:${groupId}`
+
 export function CategoryNav({
   categories,
   activeCategoryId,
   activeGroupId,
   onNavigate,
 }: CategoryNavProps) {
-  const [openGroups, setOpenGroups] = useState<string[]>([])
+  const items: MenuItem[] = categories.map((category) => {
+    const groups =
+      category.kind === 'apps'
+        ? category.groups.filter((group) => group.showInSidebar !== false)
+        : []
 
-  const toggle = (id: string) => {
-    setOpenGroups((previous) =>
-      previous.includes(id) ? previous.filter((item) => item !== id) : [...previous, id],
-    )
+    return {
+      key: categoryKey(category.id),
+      label: category.title,
+      children:
+        groups.length > 0
+          ? groups.map((group) => ({
+              key: groupKey(category.id, group.id),
+              label: group.name,
+            }))
+          : undefined,
+    }
+  })
+
+  const activeKey =
+    activeCategoryId === undefined
+      ? undefined
+      : activeGroupId !== undefined
+        ? groupKey(activeCategoryId, activeGroupId)
+        : categoryKey(activeCategoryId)
+
+  const handleSelect = (key: string) => {
+    if (key.startsWith('group:')) {
+      const [, categoryId, groupId] = key.split(':')
+      onNavigate({ categoryId, groupId })
+      return
+    }
+
+    onNavigate({ categoryId: key.slice('cat:'.length) })
   }
 
-  const isOpen = (id: string) => openGroups.includes(id)
-
   return (
-    <nav className="nav-card card-box" aria-label="站点分类">
-      <ul className="nav-group">
-        {categories.map((category) => {
-          // 只显示允许出现在侧栏的分组
-          const groups =
-            category.kind === 'apps'
-              ? category.groups.filter((group) => group.showInSidebar !== false)
-              : []
-
-          // 没有分组的分类：整行就是一个链接
-          if (groups.length === 0) {
-            return (
-              <li className="nav-item" key={category.id}>
-                <button
-                  type="button"
-                  className={`nav-link${
-                    activeCategoryId === category.id && activeGroupId === undefined ? ' active' : ''
-                  }`}
-                  onClick={() => onNavigate({ categoryId: category.id })}
-                >
-                  <span>{category.title}</span>
-                </button>
-              </li>
-            )
-          }
-
-          // 有分组：分区可折叠，分组是真正的链接
-          return (
-            <li className={`nav-item${isOpen(category.id) ? ' open' : ''}`} key={category.id}>
-              <button
-                type="button"
-                className="nav-link has-children"
-                aria-expanded={isOpen(category.id)}
-                onClick={() => toggle(category.id)}
-              >
-                <span>{category.title}</span>
-              </button>
-
-              {/* 用 grid-template-rows 做高度动画：不需要猜 max-height，
-                  也不会在过渡期间出现滚动条 */}
-              <div className={`submenu-wrap${isOpen(category.id) ? ' is-open' : ''}`}>
-                <ul className="submenu">
-                  {groups.map((group) => (
-                    <li key={group.id}>
-                      <button
-                        type="button"
-                        className={`nav-link${activeGroupId === group.id ? ' active' : ''}`}
-                        onClick={() => onNavigate({ categoryId: category.id, groupId: group.id })}
-                      >
-                        <span>{group.name}</span>
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
+    <Card padding="sm" className="nav-card">
+      <Menu items={items} activeKey={activeKey} onSelect={handleSelect} />
+    </Card>
   )
 }

stash-web/src/components/sidebar/ProfileCard.tsx

@@ -1,5 +1,5 @@
+import { Avatar, Card, Paragraph, Tag, Text, Title } from '@stash/ui'
 import { PLACEHOLDER_PROFILE } from '../../profile'
-import { UserIcon } from '../common/Icon'
 
 /**
  * 用户资料卡：头像、认证徽标、昵称、角色、简介、IP 属地。
@@ -9,16 +9,14 @@ export function ProfileCard() {
   const { name, role, bio, location } = PLACEHOLDER_PROFILE
 
   return (
-    <section className="profile-card card-box" aria-label="用户信息">
-      <div className="profile-avatar" aria-hidden="true">
-        <UserIcon />
-        <span className="profile-badge">✓</span>
-      </div>
-
-      <div className="profile-name">{name}</div>
-      <span className="profile-role">{role}</span>
-      <p className="profile-bio">{bio}</p>
-      <div className="profile-location">IP属地：{location}</div>
-    </section>
+    <Card padding="lg" className="profile-card">
+      <Avatar size="lg" fallback="S" verified />
+      <Title level={4}>{name}</Title>
+      {!name.includes(role) && <Tag shape="rounded">{role}</Tag>}
+      <Paragraph>{bio}</Paragraph>
+      <Text size="xs" tone="muted">
+        IP 属地：{location}
+      </Text>
+    </Card>
   )
 }

stash-web/src/components/sidebar/ServicePanel.tsx

@@ -1,5 +1,5 @@
+import { Button, Card, Divider, Icon, Space, Tag, Text, Title } from '@stash/ui'
 import type { Project } from '../../api'
-import { LinkIcon, RefreshIcon } from '../common/Icon'
 
 /**
  * 本地服务面板：连接状态、项目数、访问地址，以及两个操作入口。
@@ -16,50 +16,52 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
   const host = typeof window === 'undefined' ? '-' : window.location.host
 
   return (
-    <section className="service-panel card-box" aria-label="本地服务状态">
-      <header className="service-head">
-        <h2 className="service-title">本地服务</h2>
-        <span className={`service-pill${live ? ' is-on' : ''}`}>
-          <span className={`status-dot${live ? ' is-on' : ''}`} aria-hidden="true" />
+    <Card padding="md" className="service-panel">
+      <Space justify="between">
+        <Title level={4} as="h2">
+          本地服务
+        </Title>
+        <Tag tone={live ? 'success' : 'neutral'} dot>
           {live ? '已连接' : '未连接'}
-        </span>
-      </header>
+        </Tag>
+      </Space>
 
-      <dl className="service-stats">
-        <div>
-          <dt>项目数</dt>
-          <dd>{projects.length}</dd>
-        </div>
-        <div>
-          <dt>访问地址</dt>
-          <dd title={host}>{host}</dd>
-        </div>
-      </dl>
+      <Divider spacing="sm" />
 
-      <div className="service-actions">
-        <button
-          type="button"
-          className="service-action"
-          title="重新扫描项目"
-          data-spinning={refreshing}
-          disabled={refreshing}
-          onClick={onRefresh}
-        >
-          <RefreshIcon />
-          <span>重新扫描</span>
-        </button>
-
-        <a
-          className="service-action"
-          href="/api/projects"
-          target="_blank"
-          rel="noreferrer"
-          title="查看项目接口"
-        >
-          <LinkIcon />
-          <span>查看接口</span>
-        </a>
+      <div className="service-stats">
+        <Space justify="between">
+          <Text size="sm" tone="sub">
+            项目数
+          </Text>
+          <Text strong>{projects.length}</Text>
+        </Space>
+        <Space justify="between">
+          <Text size="sm" tone="sub">
+            访问地址
+          </Text>
+          <Text size="sm" truncate title={host} className="service-host">
+            {host}
+          </Text>
+        </Space>
       </div>
-    </section>
+
+      <Space gap="sm" wrap>
+        <Button
+          size="sm"
+          variant="ghost"
+          loading={refreshing}
+          icon={<Icon name="refresh_3_line" />}
+          onClick={onRefresh}
+          title="重新扫描项目"
+        >
+          重新扫描
+        </Button>
+
+        <a className="link-button" href="/api/projects" target="_blank" rel="noreferrer">
+          <Icon name="link_3_line" />
+          查看接口
+        </a>
+      </Space>
+    </Card>
   )
 }

stash-web/src/components/sidebar/Sidebar.tsx

@@ -32,7 +32,7 @@ export function Sidebar({
   onNavigate,
 }: SidebarProps) {
   return (
-    <aside className="sidebar">
+    <div className="sidebar">
       <ProfileCard />
 
       <ServicePanel
@@ -48,6 +48,6 @@ export function Sidebar({
         activeGroupId={activeGroupId}
         onNavigate={onNavigate}
       />
-    </aside>
+    </div>
   )
 }

stash-web/src/iconfont.css

@@ -1,74 +0,0 @@
-/**
- * 图标字体：取自 Alright 主题自带的 iconfont（Project id 4809463）。
- * 字体文件放在 public/fonts/iconfont.woff2，这里只保留项目用到的字形，
- * 避免把整份 500 多个图标的样式表打进包里。
- */
-@font-face {
-  font-family: 'iconfont';
-  src: url('./assets/iconfont.woff2') format('woff2');
-  font-display: swap;
-}
-
-.iconfont {
-  display: inline-block;
-  font-family: 'iconfont' !important;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  text-rendering: auto;
-  speak: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-search::before {
-  content: '\e942';
-}
-
-.icon-user::before {
-  content: '\e966';
-}
-
-.icon-refresh::before {
-  content: '\e93d';
-}
-
-.icon-link::before {
-  content: '\ea37';
-}
-
-.icon-external::before {
-  content: '\e8be';
-}
-
-.icon-eye::before {
-  content: '\e8fd';
-}
-
-.icon-thumb-up::before {
-  content: '\e957';
-}
-
-.icon-share::before {
-  content: '\e946';
-}
-
-.icon-close::before {
-  content: '\e8e4';
-}
-
-.icon-more::before {
-  content: '\e91f';
-}
-
-.icon-arrow-up::before {
-  content: '\e8c1';
-}
-
-.icon-arrow-left::before {
-  content: '\e8b5';
-}
-
-.icon-arrow-down::before {
-  content: '\e8b7';
-}

stash-web/src/index.css

@@ -1,44 +1,11 @@
+/* 页面级基础：字号 / 字体 / 重置。颜色与间距全部来自 @stash/ui 的令牌。 */
+
 :root {
-  /* ---------- 颜色：取自 Alright 主题的设计变量 ---------- */
-  --bg-color: #f7f8fa;
-  --card-bg: #ffffff;
-  --primary-color: #3858f6;
-  --primary-soft: rgba(56, 88, 246, 0.1);
-  --text-main: #1d2129;
-  --text-sub: #4e5969;
-  --text-muted: #86909c;
-  --border-color: #f6f6f6;
-  --border-strong: #eeeeee;
-  --danger: #ff3e3e;
-  --orange: #ffba3a;
-  --green: #4abd86;
-
-  --radius-sm: 6px;
-  --radius-main: 12px;
-  --radius-lg: 24px;
-
-  /* 主题的阴影很轻：0 6px 16px rgba(27,26,49,2%) */
-  --shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
-  --shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
-
-  --sidebar-width: 240px;
-  --top-nav-height: 60px;
-  /* 内容区最大宽度，宽屏时整体居中 */
-  --layout-max-width: 1380px;
-  /* 内容列顶部让位高度（给悬浮搜索框），侧栏首卡与内容首卡都按它对齐 */
-  --content-top-offset: 52px;
-
-  /* 主题正文用霞鹜文楷（与演示站同一份 webfont），缺失时回退系统字体 */
-  --font-sans:
-    'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
-
-  font-family: var(--font-sans);
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--text-main);
-  background-color: var(--bg-color);
+  font-family: var(--su-font-sans);
+  font-size: var(--su-font-size-md);
+  line-height: var(--su-line-height-md);
+  color: var(--su-text-main);
+  background-color: var(--su-bg-page);
   color-scheme: light;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -53,15 +20,7 @@
 html,
 body,
 #root {
-  height: 100%;
-}
-
-/* 桌面端锁死视口，滚动交给右侧内容区 */
-body {
-  height: 100vh;
-  overflow: hidden;
-  background-color: var(--bg-color);
-  color: var(--text-main);
+  min-height: 100%;
 }
 
 a {
@@ -76,20 +35,13 @@ button {
   background: none;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
+/* 键盘焦点环由组件库统一提供；页面只补“可聚焦容器”的兜底 */
 :focus-visible {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
-}
-
-@media (max-width: 900px) {
-  html,
-  body,
-  #root {
-    height: auto;
-  }
-
-  body {
-    height: auto;
-    overflow: auto;
-  }
+  outline: var(--su-focus-ring);
+  outline-offset: var(--su-focus-ring-offset);
 }

stash-web/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './iconfont.css'
+import '@stash/ui/style.css'
 import './index.css'
 import App from './App.tsx'
 

stash-web/vite.config.ts

@@ -6,6 +6,10 @@ const BACKEND = 'http://127.0.0.1:8080'
 // 前后端分离开发：dev / preview 都把 /api 透传给本地 Rust 服务
 export default defineConfig({
   plugins: [react()],
+  // @stash/ui 是本地 file 依赖（软链），去重 React，避免加载两份运行时
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
   server: {
     port: 5173,
     proxy: {