style(frontend): 接入 stash-ui 设计系统

- 依赖 @stash/ui（file:../../stash-ui），统一引入 style.css 与 Toaster - 任务面板、表单、弹窗、日志、状态标签全部迁到组件库，App.css 只保留页面布局 - 移除自写 useFocusTrap，改用基于原生 dialog 的 Modal - 修复 LogViewer 流式追加时误判离开底部、导致不再自动跟随的问题 - 发布脚本检查 stash-ui 产物；README 补充组件库构建与 file: 依赖刷新说明
2026-11-01 23:54:35 +08:00
parent 07ca14ea34
commit 3c1a603b90
20 changed files with 1779 additions and 2481 deletions
@@ -77,7 +77,7 @@ test('manages a task and reads a real run log', async ({ page, request }) => {
  // Cron 预览是异步渲染的，等它稳定后再点击，避免点击坐标在弹窗重排中失效。
  await expect(newTaskDialog.locator('.cron-run-item').first()).toBeVisible()
  await newTaskDialog.getByRole('button', { name: '选择文件夹…' }).click()
-  const directoryPicker = page.getByRole('dialog', { name: '选择项目工作目录' })
+  const directoryPicker = page.getByRole('dialog', { name: '选择工作目录' })
  await expect(directoryPicker).toBeVisible()
  const directoryPathInput = directoryPicker.getByLabel('目录路径')
  await directoryPathInput.fill(workingDir)
@@ -140,7 +140,7 @@ test('manages a task and reads a real run log', async ({ page, request }) => {
    path: 'test-results/dashboard-log-drawer.png',
    fullPage: true,
  })
-  await drawer.getByRole('button', { name: '关闭运行日志' }).click()
+  await drawer.getByRole('button', { name: '关闭' }).click()

  await page.getByRole('button', { name: '编辑' }).click()
  const editor = page.getByRole('dialog', {
@@ -161,10 +161,10 @@ test('manages a task and reads a real run log', async ({ page, request }) => {

  await page.getByRole('button', { name: '删除' }).click()
  await page
-    .getByRole('alertdialog')
+    .getByRole('dialog', { name: /删除任务/ })
    .getByRole('button', { name: '确认删除' })
    .click()
-  await expect(page.getByRole('heading', { name: '还没有任务' })).toBeVisible()
+  await expect(page.getByText('还没有任务')).toBeVisible()
 })

 test('keeps the dashboard usable on a narrow viewport', async ({
@@ -17,6 +17,7 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.9.2",
+    "@stash/ui": "file:../../stash-ui",
    "@tanstack/react-query": "^5.104.3",
    "react": "^19.2.8",
    "react-dom": "^19.2.8",
@@ -11,6 +11,9 @@ importers:
      '@hookform/resolvers':
        specifier: ^5.9.2
        version: 5.9.2([email protected](@types/[email protected])([email protected]))([email protected])
+      '@stash/ui':
+        specifier: file:../../stash-ui
+        version: file:../../stash-ui([email protected]([email protected]))([email protected])
      '@tanstack/react-query':
        specifier: ^5.104.3
        version: 5.104.3([email protected])
@@ -477,6 +480,12 @@ packages:
  '@standard-schema/[email protected]':
    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}

+  '@stash/ui@file:../../stash-ui':
+    resolution: {directory: ../../stash-ui, type: directory}
+    peerDependencies:
+      react: '>=19'
+      react-dom: '>=19'
+
  '@tanstack/[email protected]':
    resolution: {integrity: sha512-DZY9TuJAOgU3UyHUhXb4CcTYEHNZszlwkPg4VViIwTxOKzLprPUU+rbaPZQd3srqkGOtpaDdKpW972UV/LKlcg==}

@@ -1361,6 +1370,11 @@ snapshots:

  '@standard-schema/[email protected]': {}

+  '@stash/ui@file:../../stash-ui([email protected]([email protected]))([email protected])':
+    dependencies:
+      react: 19.3.1
+      react-dom: 19.3.1([email protected])
+
  '@tanstack/[email protected]': {}

  '@tanstack/[email protected]([email protected])':
@@ -299,7 +299,7 @@ describe('TaskDashboard', () => {
    await user.click(screen.getByRole('button', { name: '选择文件夹…' }))

    const dialog = await screen.findByRole('dialog', {
-      name: '选择项目工作目录',
+      name: '选择工作目录',
    })
    await user.click(await within(dialog).findByRole('button', { name: 'D:\\' }))
    await user.click(await within(dialog).findByRole('button', { name: 'Projects' }))
@@ -307,7 +307,7 @@ describe('TaskDashboard', () => {
    expect(within(dialog).getByText('D:\\Projects\\sync')).toBeInTheDocument()
    await user.click(within(dialog).getByRole('button', { name: '使用此目录' }))

-    expect(screen.queryByRole('dialog', { name: '选择项目工作目录' })).toBeNull()
+    expect(screen.queryByRole('dialog', { name: '选择工作目录' })).toBeNull()
    expect(screen.getByLabelText(/项目工作目录/)).toHaveValue(
      'D:\\Projects\\sync',
    )
@@ -346,7 +346,7 @@ describe('TaskDashboard', () => {
    await user.click(screen.getByRole('button', { name: '+ 新建任务' }))
    await user.click(screen.getByRole('button', { name: '选择文件夹…' }))
    const dialog = await screen.findByRole('dialog', {
-      name: '选择项目工作目录',
+      name: '选择工作目录',
    })
    await user.click(await within(dialog).findByRole('button', { name: 'D:\\' }))
    await user.click(await within(dialog).findByRole('button', { name: 'Projects' }))
@@ -380,12 +380,12 @@ describe('TaskDashboard', () => {
    await user.click(screen.getByRole('button', { name: '选择文件夹…' }))

    const dialog = await screen.findByRole('dialog', {
-      name: '选择项目工作目录',
+      name: '选择工作目录',
    })
    await user.click(within(dialog).getByRole('button', { name: '取消' }))

    await waitFor(() =>
-      expect(screen.queryByRole('dialog', { name: '选择项目工作目录' })).toBeNull(),
+      expect(screen.queryByRole('dialog', { name: '选择工作目录' })).toBeNull(),
    )
    expect(input).toHaveValue('D:\\Manual\\path')
  })
@@ -413,7 +413,7 @@ describe('TaskDashboard', () => {
    await user.click(screen.getByRole('button', { name: '选择文件夹…' }))

    const dialog = await screen.findByRole('dialog', {
-      name: '选择项目工作目录',
+      name: '选择工作目录',
    })
    expect(
      await within(dialog).findByText('目录不存在: Z:\\nope'),
@@ -1,20 +1,19 @@
-import { Link, Route, Routes } from 'react-router-dom'
+import { Button, Result } from '@stash/ui'
+import { Route, Routes, useNavigate } from 'react-router-dom'
 import { TaskDashboard } from './pages/TaskDashboard'
 import './App.css'

 function NotFoundPage() {
+  const navigate = useNavigate()
+
  return (
    <main className="app-shell">
-      <header className="dashboard-header">
-        <div>
-          <p className="eyebrow">404 / ROUTE NOT FOUND</p>
-          <h1>页面不存在</h1>
-          <p className="subtitle">该地址尚未配置到 TaskPilot 路由。</p>
-        </div>
-      </header>
-      <Link className="button button-primary" to="/">
-        返回任务列表
-      </Link>
+      <Result
+        status="info"
+        title="页面不存在"
+        description="该地址尚未配置到 TaskPilot 路由。"
+        actions={<Button onClick={() => navigate('/')}>返回任务列表</Button>}
+      />
    </main>
  )
 }
@@ -1,5 +1,4 @@
-import { useEffect, useRef } from 'react'
-import { useFocusTrap } from '../lib/useFocusTrap'
+import { Button, Modal, Text } from '@stash/ui'

 interface ConfirmDialogProps {
  open: boolean
@@ -10,6 +9,10 @@ interface ConfirmDialogProps {
  onCancel: () => void
 }

+/**
+ * 危险操作确认。外壳交给组件库的 `Modal`（原生 dialog：焦点陷阱 / Esc / 背景 inert），
+ * 这里只负责文案与「取消在左、危险操作在右」的按钮顺序。
+ */
 export function ConfirmDialog({
  open,
  title,
@@ -18,66 +21,31 @@ export function ConfirmDialog({
  onConfirm,
  onCancel,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLElement>(null)
-  useFocusTrap(open, dialogRef)
-  useEffect(() => {
-    if (!open) {
-      return
+  const requestClose = () => {
+    if (!busy) {
+      onCancel()
    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !busy) {
-        onCancel()
-      }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [busy, onCancel, open])
-
-  if (!open) {
-    return null
  }

  return (
-    <div
-      className="modal-overlay"
-      onMouseDown={(event) => {
-        if (event.currentTarget === event.target && !busy) {
-          onCancel()
-        }
-      }}
-    >
-      <section
-        ref={dialogRef}
-        className="confirm-card"
-        tabIndex={-1}
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="confirm-title"
-        aria-describedby="confirm-description"
-      >
-        <p className="eyebrow">CONFIRM ACTION</p>
-        <h2 id="confirm-title">{title}</h2>
-        <p className="muted-copy">{description}</p>
-        <div className="modal-actions">
-          <button
-            type="button"
-            className="button button-secondary"
-            onClick={onCancel}
-            disabled={busy}
-          >
+    <Modal
+      open={open}
+      onClose={requestClose}
+      title={title}
+      size="sm"
+      closeOnOverlay={!busy}
+      footer={
+        <>
+          <Button variant="secondary" onClick={requestClose} disabled={busy}>
            取消
-          </button>
-          <button
-            type="button"
-            className="button button-danger"
-            onClick={onConfirm}
-            disabled={busy}
-          >
+          </Button>
+          <Button variant="danger" onClick={onConfirm} loading={busy}>
            {busy ? '删除中...' : '确认删除'}
-          </button>
-        </div>
-      </section>
-    </div>
+          </Button>
+        </>
+      }
+    >
+      <Text tone="sub">{description}</Text>
+    </Modal>
  )
 }
@@ -1,7 +1,16 @@
 import { useQuery } from '@tanstack/react-query'
-import { useEffect, useRef, useState } from 'react'
+import {
+  Button,
+  Empty,
+  Icon,
+  Input,
+  Modal,
+  Notice,
+  Spinner,
+  Text,
+} from '@stash/ui'
+import { useEffect, useState } from 'react'
 import { listDirectories } from '../api/client'
-import { useFocusTrap } from '../lib/useFocusTrap'

 interface DirectoryPickerDialogProps {
  open: boolean
@@ -13,6 +22,9 @@ interface DirectoryPickerDialogProps {
 /**
 * 页面内的目录浏览器：从盘符开始逐级进入文件夹，最终把绝对路径回填到表单。
 * 浏览器拿不到系统文件对话框的真实路径，因此目录浏览由后端提供列表接口。
+ *
+ * 外壳是组件库的 `Modal`，路径输入 / 按钮 / 空态 / 错误提示分别是
+ * `Input` / `Button` / `Empty` / `Notice`。
 */
 export function DirectoryPickerDialog({
  open,
@@ -22,8 +34,6 @@ export function DirectoryPickerDialog({
 }: DirectoryPickerDialogProps) {
  const [currentPath, setCurrentPath] = useState<string | null>(null)
  const [draftPath, setDraftPath] = useState('')
-  const dialogRef = useRef<HTMLElement>(null)
-  useFocusTrap(open, dialogRef, '[data-picker-path]')

  useEffect(() => {
    if (!open) {
@@ -47,23 +57,6 @@ export function DirectoryPickerDialog({
    }
  }, [listing.data?.path])

-  useEffect(() => {
-    if (!open) {
-      return
-    }
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [onClose, open])
-
-  if (!open) {
-    return null
-  }
-
  const entries = listing.data?.entries ?? []
  const currentDirectory = listing.data?.path ?? null
  const parent = listing.data?.parent ?? null
@@ -74,135 +67,116 @@ export function DirectoryPickerDialog({
  }

  return (
-    <div
-      className="modal-overlay"
-      onMouseDown={(event) => {
-        if (event.currentTarget === event.target) {
-          onClose()
-        }
-      }}
-    >
-      <section
-        ref={dialogRef}
-        className="modal-card directory-picker"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="directory-picker-title"
-        tabIndex={-1}
-      >
-        <header className="modal-header">
-          <div>
-            <p className="eyebrow">WORKING DIRECTORY</p>
-            <h2 id="directory-picker-title">选择项目工作目录</h2>
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="选择工作目录"
+      size="lg"
+      className="directory-picker-modal"
+      footer={
+        <>
+          <div className="directory-picker-summary">
+            <Text size="xs" tone="muted">
+              将使用
+            </Text>
+            <Text size="sm" tone="sub" truncate>
+              {currentDirectory ?? '尚未选择目录'}
+            </Text>
          </div>
-          <button
-            type="button"
-            className="icon-button"
-            onClick={onClose}
-            aria-label="关闭目录选择"
-          >
-            ×
-          </button>
-        </header>
-
-        <div className="directory-picker-toolbar">
-          <button
-            type="button"
-            className="button button-secondary button-small"
-            onClick={() => navigate(parent)}
-            disabled={!parent}
-          >
-            上一级
-          </button>
-          <button
-            type="button"
-            className="button button-secondary button-small"
-            onClick={() => navigate(null)}
-          >
-            盘符
-          </button>
-          <form
-            className="directory-path-form"
-            onSubmit={(event) => {
-              event.preventDefault()
-              navigate(draftPath.trim() || null)
+          <Button variant="secondary" onClick={onClose}>
+            取消
+          </Button>
+          <Button
+            disabled={!currentDirectory}
+            onClick={() => {
+              if (currentDirectory) {
+                onSelect(currentDirectory)
+                onClose()
+              }
            }}
          >
-            <input
-              className="field-input mono"
-              value={draftPath}
-              onChange={(event) => setDraftPath(event.target.value)}
-              placeholder="输入或粘贴绝对路径，例如 D:\Projects\sync"
-              aria-label="目录路径"
-              data-picker-path
-              spellCheck={false}
-            />
-          </form>
-        </div>
+            使用此目录
+          </Button>
+        </>
+      }
+    >
+      <div className="directory-picker-toolbar">
+        <Button variant="secondary" onClick={() => navigate(parent)} disabled={!parent}>
+          上一级
+        </Button>
+        <Button variant="secondary" onClick={() => navigate(null)}>
+          盘符
+        </Button>
+        <form
+          className="directory-path-form"
+          onSubmit={(event) => {
+            event.preventDefault()
+            navigate(draftPath.trim() || null)
+          }}
+        >
+          <Input
+            className="directory-path-input"
+            value={draftPath}
+            onChange={(event) => setDraftPath(event.target.value)}
+            placeholder="输入或粘贴绝对路径，例如 D:\Projects\sync"
+            aria-label="目录路径"
+            spellCheck={false}
+          />
+        </form>
+      </div>

-        <div className="directory-picker-body">
-          {listing.isPending ? (
-            <p className="muted-copy">正在读取目录…</p>
-          ) : null}
-          {listing.isError ? (
-            <div className="inline-alert inline-alert-error" role="alert">
-              {listing.error.message}
-            </div>
-          ) : null}
-          {!listing.isPending && !listing.isError && entries.length === 0 ? (
-            <p className="empty-inline">
-              {currentDirectory ? '该目录下没有子文件夹' : '没有可用的盘符'}
-            </p>
-          ) : null}
-          {entries.length > 0 ? (
-            <ul className="directory-list">
-              {entries.map((entry) => (
-                <li key={entry.path}>
-                  <button
-                    type="button"
-                    className="directory-row"
-                    onClick={() => navigate(entry.path)}
-                    title={entry.path}
-                  >
-                    <span className="directory-icon" aria-hidden="true">
-                      📁
-                    </span>
-                    <span className="directory-name">{entry.name}</span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          ) : null}
-          {listing.data?.truncated ? (
-            <p className="field-hint">文件夹过多，仅列出前 500 个。</p>
-          ) : null}
-        </div>
+      <div className="directory-picker-body">
+        {listing.isPending ? (
+          <div className="picker-status">
+            <Spinner label="正在读取目录" />
+            <Text tone="sub" size="sm">
+              正在读取目录…
+            </Text>
+          </div>
+        ) : null}

-        <footer className="directory-picker-footer">
-          <div className="directory-picker-summary">
-            <span className="section-label">将使用</span>
-            <code>{currentDirectory ?? '尚未选择目录'}</code>
-          </div>
-          <div className="modal-actions directory-picker-actions">
-            <button type="button" className="button button-secondary" onClick={onClose}>
-              取消
-            </button>
-            <button
-              type="button"
-              className="button button-primary"
-              disabled={!currentDirectory}
-              onClick={() => {
-                if (currentDirectory) {
-                  onSelect(currentDirectory)
-                  onClose()
-                }
-              }}
-            >
-              使用此目录
-            </button>
-          </div>
-        </footer>
-      </section>
-    </div>
+        {listing.isError ? (
+          <Notice
+            tone="error"
+            title="目录读取失败"
+            className="directory-picker-error"
+          >
+            {listing.error.message}
+          </Notice>
+        ) : null}
+
+        {!listing.isPending && !listing.isError && entries.length === 0 ? (
+          <Empty
+            text={
+              currentDirectory ? '该目录下没有子文件夹' : '没有可用的盘符'
+            }
+          />
+        ) : null}
+
+        {entries.length > 0 ? (
+          <ul className="directory-list">
+            {entries.map((entry) => (
+              <li key={entry.path}>
+                <button
+                  type="button"
+                  className="directory-row"
+                  onClick={() => navigate(entry.path)}
+                  title={entry.path}
+                >
+                  <Icon className="directory-icon" name="folder_more_line" />
+                  <span className="directory-name">{entry.name}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        {listing.data?.truncated ? (
+          <Text size="xs" tone="muted">
+            文件夹过多，仅列出前 500 个。
+          </Text>
+        ) : null}
+      </div>
+    </Modal>
  )
 }
@@ -29,6 +29,7 @@ export function LogViewer({
  const viewportRef = useRef<HTMLDivElement>(null)
  const frameRef = useRef(0)
  const followingRef = useRef(true)
+  const lastScrollTopRef = useRef(0)
  const [following, setFollowing] = useState(true)
  const [metrics, setMetrics] = useState({ scrollTop: 0, height: 0 })

@@ -62,23 +63,34 @@ export function LogViewer({
  }, [])

  const handleScroll = useCallback(() => {
+    const node = viewportRef.current
+    if (!node) {
+      return
+    }
+    // 只有「用户往上翻」才停止跟随。日志流式追加时 scrollTop 不变但内容变高，
+    // 此时不能把 following 关掉，否则后半段日志不会再自动贴底。
+    const previousTop = lastScrollTopRef.current
+    lastScrollTopRef.current = node.scrollTop
+    const atBottom = isNearBottom(
+      node.scrollTop,
+      node.clientHeight,
+      node.scrollHeight,
+      FOLLOW_THRESHOLD_PX,
+    )
+    if (atBottom) {
+      followingRef.current = true
+      setFollowing(true)
+    } else if (node.scrollTop < previousTop) {
+      followingRef.current = false
+      setFollowing(false)
+    }
+
+    // 可见窗口的重算仍然按帧节流，避免滚动时每像素都 setState。
    if (frameRef.current) {
      return
    }
    frameRef.current = requestAnimationFrame(() => {
      frameRef.current = 0
-      const node = viewportRef.current
-      if (!node) {
-        return
-      }
-      const atBottom = isNearBottom(
-        node.scrollTop,
-        node.clientHeight,
-        node.scrollHeight,
-        FOLLOW_THRESHOLD_PX,
-      )
-      followingRef.current = atBottom
-      setFollowing(atBottom)
      setMetrics({ scrollTop: node.scrollTop, height: node.clientHeight })
    })
  }, [])
@@ -93,6 +105,7 @@ export function LogViewer({
      return
    }
    node.scrollTop = node.scrollHeight
+    lastScrollTopRef.current = node.scrollTop
    setMetrics({ scrollTop: node.scrollTop, height: node.clientHeight })
  }, [version])

@@ -102,6 +115,7 @@ export function LogViewer({
      return
    }
    node.scrollTop = node.scrollHeight
+    lastScrollTopRef.current = node.scrollTop
    followingRef.current = true
    setFollowing(true)
    setMetrics({ scrollTop: node.scrollTop, height: node.clientHeight })
@@ -1,4 +1,14 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  Button,
+  Empty,
+  Modal,
+  Notice,
+  Select,
+  Spinner,
+  Text,
+  Title,
+} from '@stash/ui'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import {
  cancelRun,
@@ -18,7 +28,6 @@ import {
  isTerminalRunStatus,
 } from '../lib/format'
 import { appendLogChunk, createLogBuffer, flushLogTail } from '../lib/logLines'
-import { useFocusTrap } from '../lib/useFocusTrap'
 import { LogViewer } from './LogViewer'
 import { RunStatusBadge } from './StatusBadge'

@@ -29,6 +38,31 @@ interface RunLogDrawerProps {
  onClose: () => void
 }

+const STATUS_FILTERS = [
+  { value: '', label: '全部状态' },
+  { value: 'queued', label: '排队中' },
+  { value: 'running', label: '运行中' },
+  { value: 'succeeded', label: '成功' },
+  { value: 'failed', label: '失败' },
+  { value: 'timed_out', label: '已超时' },
+  { value: 'cancelled', label: '已取消' },
+  { value: 'skipped', label: '已跳过' },
+]
+
+const TRIGGER_FILTERS = [
+  { value: '', label: '全部触发' },
+  { value: 'schedule', label: '定时' },
+  { value: 'manual', label: '手动' },
+  { value: 'retry', label: '重试' },
+]
+
+/**
+ * 运行历史 + 日志面板。
+ *
+ * 外壳用组件库的 `Modal`（原生 dialog：焦点陷阱、Esc、背景 inert），
+ * 左栏是运行列表（`Select` 筛选 + 状态标签），右栏是详情与虚拟滚动日志。
+ * 日志读取本身仍是页面逻辑（SSE + 轮询兜底），不放进组件库。
+ */
 export function RunLogDrawer({
  open,
  task,
@@ -43,15 +77,9 @@ export function RunLogDrawer({
  const [historyTrigger, setHistoryTrigger] = useState<RunTrigger | ''>('')
  const [sseConnected, setSseConnected] = useState(false)
  const [logEvents] = useState(() => new EventTarget())
-  const drawerRef = useRef<HTMLElement>(null)
-  useFocusTrap(open, drawerRef)
+
  const runsQuery = useQuery({
-    queryKey: [
-      'task-runs',
-      task?.id,
-      historyStatus,
-      historyTrigger,
-    ],
+    queryKey: ['task-runs', task?.id, historyStatus, historyTrigger],
    queryFn: ({ signal }) =>
      listTaskRuns(
        task!.id,
@@ -117,9 +145,7 @@ export function RunLogDrawer({
      try {
        const payload = JSON.parse(event.data) as ExecutionEvent
        if (payload.event === 'log') {
-          logEvents.dispatchEvent(
-            new CustomEvent('log', { detail: payload }),
-          )
+          logEvents.dispatchEvent(new CustomEvent('log', { detail: payload }))
        }
      } catch {
        setSseConnected(false)
@@ -142,201 +168,164 @@ export function RunLogDrawer({
    }
  }, [logEvents, open, queryClient, task])

-  useEffect(() => {
-    if (!open) {
-      return
-    }
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [onClose, open])
-
  if (!open || !task) {
    return null
  }

  return (
-    <div
-      className="modal-overlay drawer-overlay"
-      onMouseDown={(event) => {
-        if (event.currentTarget === event.target) {
-          onClose()
-        }
-      }}
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={task.name}
+      size="lg"
+      className="run-log-modal"
+      closeOnOverlay
    >
-      <aside
-        ref={drawerRef}
-        className="run-drawer"
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="run-drawer-title"
-      >
-        <header className="modal-header">
-          <div>
-            <p className="eyebrow">RUN HISTORY</p>
-            <h2 id="run-drawer-title">{task.name}</h2>
-            <p className="drawer-subtitle mono">{task.id}</p>
+      <div className="run-log-body">
+        <section className="run-history-panel">
+          <div className="section-heading">
+            <div>
+              <Text className="section-label" size="xs" tone="muted">
+                RUN HISTORY
+              </Text>
+              <Title level={3}>最近运行</Title>
+              <Text className="drawer-subtitle" size="xs" tone="muted">
+                {task.id}
+              </Text>
+            </div>
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={() => void runsQuery.refetch()}
+              loading={runsQuery.isFetching}
+            >
+              刷新
+            </Button>
          </div>
-          <button
-            type="button"
-            className="icon-button"
-            onClick={onClose}
-            aria-label="关闭运行日志"
-          >
-            ×
-          </button>
-        </header>

-        <div className="run-drawer-body">
-          <section className="run-history-panel">
-            <div className="section-heading">
-              <div>
-                <p className="section-label">RUNS</p>
-                <h3>最近运行</h3>
-              </div>
-              <button
-                type="button"
-                className="button button-secondary button-small"
-                onClick={() => void runsQuery.refetch()}
-                disabled={runsQuery.isFetching}
-              >
-                刷新
-              </button>
+          <div className="history-filters">
+            <Select
+              className="history-select"
+              options={STATUS_FILTERS}
+              value={historyStatus}
+              onChange={(value) => {
+                setHistoryStatus(value as RunStatus | '')
+                setSelectedRunId(null)
+              }}
+            />
+            <Select
+              className="history-select"
+              options={TRIGGER_FILTERS}
+              value={historyTrigger}
+              onChange={(value) => {
+                setHistoryTrigger(value as RunTrigger | '')
+                setSelectedRunId(null)
+              }}
+            />
+          </div>
+
+          {runsQuery.isPending ? (
+            <div className="panel-status">
+              <Spinner label="正在加载运行记录" />
+              <Text size="sm" tone="sub">
+                正在加载运行记录...
+              </Text>
            </div>
-
-            <div className="history-filters">
-              <select
-                className="field-input compact-select"
-                aria-label="运行状态筛选"
-                value={historyStatus}
-                onChange={(event) => {
-                  setHistoryStatus(event.target.value as RunStatus | '')
-                  setSelectedRunId(null)
-                }}
-              >
-                <option value="">全部状态</option>
-                <option value="queued">排队中</option>
-                <option value="running">运行中</option>
-                <option value="succeeded">成功</option>
-                <option value="failed">失败</option>
-                <option value="timed_out">已超时</option>
-                <option value="cancelled">已取消</option>
-                <option value="skipped">已跳过</option>
-              </select>
-              <select
-                className="field-input compact-select"
-                aria-label="触发方式筛选"
-                value={historyTrigger}
-                onChange={(event) => {
-                  setHistoryTrigger(event.target.value as RunTrigger | '')
-                  setSelectedRunId(null)
-                }}
-              >
-                <option value="">全部触发</option>
-                <option value="schedule">定时</option>
-                <option value="manual">手动</option>
-                <option value="retry">重试</option>
-              </select>
+          ) : runsQuery.isError ? (
+            <Notice tone="error" title="运行记录加载失败">
+              {runsQuery.error.message}
+            </Notice>
+          ) : runs.length === 0 ? (
+            <Empty text="该任务还没有运行记录。" />
+          ) : (
+            <div className="run-list">
+              {runs.map((run) => (
+                <button
+                  type="button"
+                  className={`run-list-item ${
+                    run.id === effectiveRunId ? 'is-selected' : ''
+                  }`}
+                  key={run.id}
+                  onClick={() => setSelectedRunId(run.id)}
+                >
+                  <span className="run-list-main">
+                    <span className="mono">#{run.id}</span>
+                    <RunStatusBadge status={run.status} />
+                  </span>
+                  <span className="run-list-meta">
+                    {formatDateTime(run.created_at)} · {run.trigger}
+                  </span>
+                </button>
+              ))}
            </div>
+          )}
+        </section>

-            {runsQuery.isPending ? (
-              <p className="muted-copy">正在加载运行记录...</p>
-            ) : runsQuery.isError ? (
-              <div className="inline-alert inline-alert-error">
-                {runsQuery.error.message}
-              </div>
-            ) : runs.length === 0 ? (
-              <p className="empty-inline">该任务还没有运行记录。</p>
-            ) : (
-              <div className="run-list">
-                {runs.map((run) => (
-                  <button
-                    type="button"
-                    className={`run-list-item ${
-                      run.id === effectiveRunId ? 'is-selected' : ''
-                    }`}
-                    key={run.id}
-                    onClick={() => setSelectedRunId(run.id)}
-                  >
-                    <span className="run-list-main">
-                      <span className="mono">#{run.id}</span>
-                      <RunStatusBadge status={run.status} />
-                    </span>
-                    <span className="run-list-meta">
-                      {formatDateTime(run.created_at)} · {run.trigger}
-                    </span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </section>
-
-          <section className="run-detail-panel">
-            <div className="section-heading">
-              <div>
-                <p className="section-label">DETAIL</p>
-                <h3>
-                  {effectiveRunId ? `运行 #${effectiveRunId}` : '运行详情'}
-                </h3>
-              </div>
-              {selectedRun ? (
-                <div className="run-detail-actions">
-                  <RunStatusBadge status={selectedRun.status} />
-                  {!isTerminalRunStatus(selectedRun.status) ? (
-                    <button
-                      type="button"
-                      className="button button-danger button-small"
-                      disabled={
-                        cancelMutation.isPending &&
-                        cancelMutation.variables === selectedRun.id
-                      }
-                      onClick={() => cancelMutation.mutate(selectedRun.id)}
-                    >
-                      {cancelMutation.isPending ? '取消中...' : '取消运行'}
-                    </button>
-                  ) : null}
-                  <a
-                    className="button button-secondary button-small"
-                    href={runLogDownloadUrl(selectedRun.id)}
-                  >
-                    下载日志
-                  </a>
-                </div>
-              ) : null}
+        <section className="run-detail-panel">
+          <div className="section-heading">
+            <div>
+              <Text className="section-label" size="xs" tone="muted">
+                DETAIL
+              </Text>
+              <Title level={3}>
+                {effectiveRunId ? `运行 #${effectiveRunId}` : '运行详情'}
+              </Title>
            </div>
-
-            {selectedRunQuery.isError ? (
-              <div className="inline-alert inline-alert-error">
-                {selectedRunQuery.error.message}
-              </div>
-            ) : null}
-
            {selectedRun ? (
-              <RunMetadata run={selectedRun} />
-            ) : (
-              <p className="empty-inline">选择一条运行记录查看日志。</p>
-            )}
-
-            {effectiveRunId ? (
-              <RunLogOutput
-                key={effectiveRunId}
-                runId={effectiveRunId}
-                logEvents={logEvents}
-                sseConnected={sseConnected}
-                runComplete={
-                  selectedRun ? isTerminalRunStatus(selectedRun.status) : false
-                }
-              />
+              <div className="run-detail-actions">
+                <RunStatusBadge status={selectedRun.status} />
+                {!isTerminalRunStatus(selectedRun.status) ? (
+                  <Button
+                    size="sm"
+                    variant="danger"
+                    loading={
+                      cancelMutation.isPending &&
+                      cancelMutation.variables === selectedRun.id
+                    }
+                    onClick={() => cancelMutation.mutate(selectedRun.id)}
+                  >
+                    取消运行
+                  </Button>
+                ) : null}
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={() => {
+                    window.location.href = runLogDownloadUrl(selectedRun.id)
+                  }}
+                >
+                  下载日志
+                </Button>
+              </div>
            ) : null}
-          </section>
-        </div>
-      </aside>
-    </div>
+          </div>
+
+          {selectedRunQuery.isError ? (
+            <Notice tone="error" title="运行详情加载失败">
+              {selectedRunQuery.error.message}
+            </Notice>
+          ) : null}
+
+          {selectedRun ? (
+            <RunMetadata run={selectedRun} />
+          ) : (
+            <Empty text="选择一条运行记录查看日志。" />
+          )}
+
+          {effectiveRunId ? (
+            <RunLogOutput
+              key={effectiveRunId}
+              runId={effectiveRunId}
+              logEvents={logEvents}
+              sseConnected={sseConnected}
+              runComplete={
+                selectedRun ? isTerminalRunStatus(selectedRun.status) : false
+              }
+            />
+          ) : null}
+        </section>
+      </div>
+    </Modal>
  )
 }

@@ -471,10 +460,7 @@ function RunLogOutput({
  useEffect(() => {
    const onLog = (event: Event) => {
      const payload = (event as CustomEvent<ExecutionEvent>).detail
-      if (
-        payload.event !== 'log' ||
-        payload.data.run_id !== runId
-      ) {
+      if (payload.event !== 'log' || payload.data.run_id !== runId) {
        return
      }
      if (payload.data.offset === offsetRef.current) {
@@ -511,12 +497,13 @@ function RunLogOutput({
        </span>
      </div>
      {error ? (
-        <div className="inline-alert inline-alert-error">
-          {error}
-          <button
-            type="button"
-            className="text-button"
-            onClick={() => {
+        <Notice
+          tone="error"
+          title="日志读取失败"
+          className="log-viewer-error"
+          action={{
+            label: '重试',
+            onClick: () => {
              bufferRef.current = createLogBuffer()
              offsetRef.current = 0
              setPollComplete(false)
@@ -524,11 +511,11 @@ function RunLogOutput({
              setLines(bufferRef.current.lines)
              setVersion((value) => value + 1)
              setReloadKey((value) => value + 1)
-            }}
-          >
-            重试
-          </button>
-        </div>
+            },
+          }}
+        >
+          {error}
+        </Notice>
      ) : null}
      <LogViewer lines={lines} version={version} />
    </div>
@@ -1,16 +1,30 @@
+import { Tag, type TagTone } from '@stash/ui'
 import type { RunStatus } from '../api/client'
 import { runStatusLabels } from '../lib/format'

+const RUN_STATUS_TONE: Record<RunStatus, TagTone> = {
+  queued: 'primary',
+  running: 'warning',
+  succeeded: 'success',
+  failed: 'danger',
+  timed_out: 'danger',
+  cancelled: 'neutral',
+  skipped: 'neutral',
+}
+
 interface RunStatusBadgeProps {
  status: RunStatus
 }

 export function RunStatusBadge({ status }: RunStatusBadgeProps) {
  return (
-    <span className={`status-badge status-${status}`}>
-      <span className="status-dot" aria-hidden="true" />
+    <Tag
+      tone={RUN_STATUS_TONE[status]}
+      dot
+      className={`status-${status}`}
+    >
      {runStatusLabels[status]}
-    </span>
+    </Tag>
  )
 }

@@ -20,11 +34,12 @@ interface EnabledBadgeProps {

 export function EnabledBadge({ enabled }: EnabledBadgeProps) {
  return (
-    <span
-      className={`status-badge ${enabled ? 'status-enabled' : 'status-disabled'}`}
+    <Tag
+      tone={enabled ? 'success' : 'neutral'}
+      dot
+      className={enabled ? 'status-enabled' : 'status-disabled'}
    >
-      <span className="status-dot" aria-hidden="true" />
      {enabled ? '活跃中' : '已暂停'}
-    </span>
+    </Tag>
  )
 }
@@ -23,94 +23,45 @@
  font-display: swap;
 }

+/*
+ * 页面级基础：字体 / 重置 / 全局焦点兜底。
+ * 颜色、间距、圆角、阴影一律取自 @stash/ui 的 --su-* 令牌，这里不再定义主题色。
+ */
 :root {
-  /* 设计令牌：对齐 Alright 主题（nicetheme） */
-  --theme-primary: #3858f6;
-  --theme-primary-soft: rgba(56, 88, 246, 0.1);
-  --theme-dark: #1d2129;
-  --theme-secondary: #2c343c;
-  --theme-muted: #4e5969;
-  --theme-light: #c9cdd4;
-  --theme-border: #eee;
-  --theme-border-soft: #f6f6f6;
-  --theme-bg: #f7f8fa;
-  --theme-success: #4abd86;
-  --theme-danger: #ff3e3e;
-  --theme-warning: #ff8338;
+  /* 展示字体：标题用 Outfit，不参与令牌体系，页面自己持有 */
+  --font-display: 'Outfit-Medium', var(--su-font-sans);

-  --bg-color: var(--theme-bg);
-  --card-bg: #ffffff;
-  --text-main: var(--theme-dark);
-  --text-muted: var(--theme-muted);
-  --text-light: var(--theme-light);
-  --primary: var(--theme-primary);
-  --primary-hover: #2f49d6;
-  --primary-soft: var(--theme-primary-soft);
-  --border-color: var(--theme-border-soft);
-  --badge-bg: var(--theme-border-soft);
-  --radius-sm: 6px;
-  --radius-md: 12px;
-  --radius-lg: 24px;
-  --shadow-sm: 0 2px 8px rgba(27, 26, 49, 0.02);
-  --shadow-card: 0 6px 16px 0 rgba(27, 26, 49, 0.03);
-  --shadow-modal: 0 16px 48px rgba(27, 26, 49, 0.08);
-  --background: var(--bg-color);
-  --surface: var(--card-bg);
-  --surface-muted: #f7f8fa;
-  --text: var(--text-main);
-  --text-secondary: var(--text-muted);
-  --text-tertiary: #86909c;
-  --border: var(--theme-border);
-  --success: var(--theme-success);
-  --success-bg: rgba(74, 189, 134, 0.1);
-  --success-border: rgba(74, 189, 134, 0.3);
-  --danger: var(--theme-danger);
-  --danger-bg: rgba(255, 62, 62, 0.08);
-  --danger-border: rgba(255, 62, 62, 0.24);
-  --warning: var(--theme-warning);
-  --warning-bg: #fffbe8;
-  --shadow: var(--shadow-card);
-  --transition-base: 0.3s ease-in-out;
-  --font-sans:
-    'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei',
-    'Source Han Sans CN', sans-serif;
-  --font-display: 'Outfit-Medium', var(--font-sans);
-  --font-mono:
-    SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
-
-  color: var(--text);
-  background: var(--background);
-  font-family: var(--font-sans);
+  color: var(--su-text-main);
+  background-color: var(--su-bg-page);
+  font-family: var(--su-font-sans);
+  font-size: var(--su-font-size-md);
+  line-height: var(--su-line-height-md);
+  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-h1,
-h2,
-h3 {
-  font-family: var(--font-display);
-  font-weight: 500;
-}
-
 * {
  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }

-html {
-  min-width: 320px;
-  background: var(--background);
+html,
+body,
+#root {
+  min-height: 100%;
 }

 body {
-  margin: 0;
  min-width: 320px;
-  min-height: 100vh;
-  line-height: 1.5;
-  font-size: 14px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
 }

 button,
@@ -128,20 +79,34 @@ button:disabled {
  cursor: not-allowed;
 }

-::placeholder {
-  color: var(--text-light);
+h1,
+h2,
+h3 {
+  font-family: var(--font-display);
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+/* 键盘焦点环由组件库统一提供；这里只给「非表单控件」补兜底。
+   表单控件不能加全局 outline：输入框点击时也会命中 :focus-visible，
+   会和组件自己的边框态叠成「双框」。 */
+a:focus-visible,
+button:focus-visible,
+[tabindex]:not(input):focus-visible {
+  outline: var(--su-focus-ring);
+  outline-offset: var(--su-focus-ring-offset);
+}
+
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: none;
 }

 ::selection {
-  background: var(--theme-primary-soft);
-  color: var(--theme-dark);
-}
-
-:focus-visible {
-  outline: 3px solid rgba(56, 88, 246, 0.28);
-  outline-offset: 3px;
-}
-
-#root {
-  min-height: 100vh;
+  background: var(--su-color-primary-soft);
+  color: var(--su-text-main);
 }
@@ -1,64 +0,0 @@
-import { useEffect, type RefObject } from 'react'
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',')
-
-export function useFocusTrap(
-  open: boolean,
-  containerRef: RefObject<HTMLElement | null>,
-  initialFocusSelector?: string,
-) {
-  useEffect(() => {
-    if (!open || !containerRef.current) {
-      return
-    }
-    const container = containerRef.current
-    const previousFocus =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null
-    const focusFirst = () => {
-      const initial = initialFocusSelector
-        ? container.querySelector<HTMLElement>(initialFocusSelector)
-        : null
-      const first =
-        initial ?? container.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
-      ;(first ?? container).focus()
-    }
-    const frame = window.requestAnimationFrame(focusFirst)
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Tab') {
-        return
-      }
-      const focusable = Array.from(
-        container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
-      ).filter((element) => element.offsetParent !== null)
-      if (focusable.length === 0) {
-        event.preventDefault()
-        container.focus()
-        return
-      }
-      const first = focusable[0]
-      const last = focusable[focusable.length - 1]
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault()
-        last.focus()
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault()
-        first.focus()
-      }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => {
-      window.cancelAnimationFrame(frame)
-      window.removeEventListener('keydown', onKeyDown)
-      previousFocus?.focus()
-    }
-  }, [containerRef, initialFocusSelector, open])
-}
@@ -2,6 +2,8 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { BrowserRouter } from 'react-router-dom'
+import { Toaster } from '@stash/ui'
+import '@stash/ui/style.css'
 import './index.css'
 import App from './App.tsx'

@@ -20,6 +22,7 @@ createRoot(document.getElementById('root')!).render(
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
+        <Toaster />
      </BrowserRouter>
    </QueryClientProvider>
  </StrictMode>,
@@ -4,6 +4,26 @@ import {
  useQuery,
  useQueryClient,
 } from '@tanstack/react-query'
+import {
+  Button,
+  Card,
+  Empty,
+  Grid,
+  Notice,
+  Pagination,
+  Result,
+  SearchField,
+  Select,
+  Space,
+  Spinner,
+  Table,
+  Tag,
+  Text,
+  TextButton,
+  Title,
+  toast,
+  type TableColumn,
+} from '@stash/ui'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import {
@@ -22,11 +42,10 @@ import {
 } from '../api/client'
 import { ConfirmDialog } from '../components/ConfirmDialog'
 import { RunLogDrawer } from '../components/RunLogDrawer'
-import {
-  EnabledBadge,
-} from '../components/StatusBadge'
+import { EnabledBadge } from '../components/StatusBadge'
 import { TaskEditorModal } from '../components/TaskEditorModal'
 import { actionTypeLabel, formatShortDateTime } from '../lib/format'
+import { useDebouncedValue } from '../lib/useDebouncedValue'
 import {
  type TaskFormValues,
  valuesToCreateRequest,
@@ -35,6 +54,28 @@ import {

 const PAGE_SIZE = 20

+const ENABLED_OPTIONS = [
+  { value: '', label: '全部状态' },
+  { value: 'true', label: '已启用' },
+  { value: 'false', label: '已停用' },
+]
+
+const ACTION_TYPE_OPTIONS = [
+  { value: '', label: '全部类型' },
+  { value: 'script', label: '脚本' },
+  { value: 'http', label: 'HTTP' },
+  { value: 'process', label: '进程' },
+]
+
+const TABLE_COLUMNS: TableColumn[] = [
+  { key: 'name', title: '名称 / 任务标识', width: 260 },
+  { key: 'schedule', title: '调度周期', width: 240 },
+  { key: 'type', title: '类型', width: 96 },
+  { key: 'status', title: '状态', width: 120 },
+  { key: 'timeout', title: '超时配置', width: 100 },
+  { key: 'actions', title: '操作', align: 'right', width: 300 },
+]
+
 export function TaskDashboard() {
  const queryClient = useQueryClient()
  const [searchParams, setSearchParams] = useSearchParams()
@@ -47,8 +88,9 @@ export function TaskDashboard() {
  const [deleteTarget, setDeleteTarget] = useState<Task | null>(null)
  const [logTask, setLogTask] = useState<Task | null>(null)
  const [initialRunId, setInitialRunId] = useState<number | null>(null)
-  const [notice, setNotice] = useState<string | null>(null)
  const [actionError, setActionError] = useState<string | null>(null)
+  const [queryDraft, setQueryDraft] = useState(q)
+  const debouncedQuery = useDebouncedValue(queryDraft, 300)

  const enabled: boolean | undefined =
    enabledValue === 'true'
@@ -59,6 +101,7 @@ export function TaskDashboard() {
  const actionType = isActionType(actionTypeValue)
    ? actionTypeValue
    : undefined
+  const hasFilters = Boolean(q || enabledValue || actionTypeValue)
  const filters: TaskFilters = {
    q: q || undefined,
    enabled,
@@ -105,7 +148,7 @@ export function TaskDashboard() {
    onSuccess: (task, variables) => {
      setEditorOpen(false)
      setEditingTask(null)
-      showNotice(
+      toast.success(
        variables.task ? `任务 ${task.id} 已更新` : `任务 ${task.id} 已创建`,
      )
      void invalidateTaskData(queryClient)
@@ -114,7 +157,7 @@ export function TaskDashboard() {
  const toggleMutation = useMutation({
    mutationFn: (task: Task) => setTaskEnabled(task.id, !task.enabled),
    onSuccess: (task) => {
-      showNotice(task.enabled ? `已启用 ${task.id}` : `已停用 ${task.id}`)
+      toast.success(task.enabled ? `已启用 ${task.id}` : `已停用 ${task.id}`)
      void invalidateTaskData(queryClient)
    },
    onError: (error) => setActionError(error.message),
@@ -123,7 +166,7 @@ export function TaskDashboard() {
    mutationFn: (task: Task) => deleteTask(task.id),
    onSuccess: (_data, task) => {
      setDeleteTarget(null)
-      showNotice(`任务 ${task.id} 已删除`)
+      toast.success(`任务 ${task.id} 已删除`)
      void invalidateTaskData(queryClient)
    },
    onError: (error) => setActionError(error.message),
@@ -134,7 +177,7 @@ export function TaskDashboard() {
      setLogTask(task)
      setInitialRunId(run.id)
      setActionError(null)
-      showNotice(
+      toast.success(
        run.status === 'skipped'
          ? `任务 ${task.id} 已有运行实例，本次触发已跳过`
          : `任务 ${task.id} 已提交运行`,
@@ -147,18 +190,24 @@ export function TaskDashboard() {
  })

  useEffect(() => {
-    if (!notice) {
+    setQueryDraft(q)
+  }, [q])
+
+  useEffect(() => {
+    const nextQuery = debouncedQuery.trim()
+    if (nextQuery === q) {
      return
    }
-    const timer = window.setTimeout(() => setNotice(null), 4_000)
-    return () => window.clearTimeout(timer)
-  }, [notice])
+    updateFilters({ q: nextQuery || undefined, page: '1' })
+    // updateFilters 依赖当前 searchParams，每次渲染都是新的闭包；这里只跟随防抖后的输入。
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedQuery])

  const tasks = tasksQuery.data?.items ?? []
  const total = tasksQuery.data?.total ?? 0
  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))

-  const updateFilters = (changes: Record<string, string | undefined>) => {
+  function updateFilters(changes: Record<string, string | undefined>) {
    const next = new URLSearchParams(searchParams)
    for (const [key, value] of Object.entries(changes)) {
      if (value) {
@@ -185,330 +234,243 @@ export function TaskDashboard() {
    void queryClient.invalidateQueries({ queryKey: ['health'] })
  }

-  const showNotice = (message: string) => {
-    setNotice(message)
-  }
+  const rows = tasks.map((task) => {
+    const isRunning =
+      runMutation.isPending && runMutation.variables?.id === task.id
+    const isToggling =
+      toggleMutation.isPending && toggleMutation.variables?.id === task.id
+
+    return {
+      id: task.id,
+      name: (
+        <div className="task-name-cell">
+          <Text className="task-name" strong>
+            {task.name}
+          </Text>
+          <Text className="task-id" size="xs" tone="muted">
+            {task.id}
+          </Text>
+        </div>
+      ),
+      schedule: (
+        <div className="schedule-cell">
+          <code className="code-chip">{task.cron}</code>
+          <Text size="xs" tone="muted">
+            {task.timezone}
+          </Text>
+          <Text size="xs" tone="muted">
+            {task.enabled
+              ? nextRuns.get(task.id)
+                ? `下次 ${formatShortDateTime(nextRuns.get(task.id))}`
+                : '调度中…'
+              : '未调度'}
+          </Text>
+        </div>
+      ),
+      type: (
+        <Tag shape="rounded">{actionTypeLabel(task.action.type)}</Tag>
+      ),
+      status: <EnabledBadge enabled={task.enabled} />,
+      timeout: (
+        <Text size="sm" tone="sub">
+          {task.timeout_secs}s
+        </Text>
+      ),
+      actions: (
+        <Space justify="end" gap="xs" wrap>
+          <TextButton
+            disabled={isRunning}
+            title="立即运行"
+            onClick={() => runMutation.mutate(task)}
+          >
+            {isRunning ? '提交中' : '运行'}
+          </TextButton>
+          <TextButton
+            onClick={() => {
+              setLogTask(task)
+              setInitialRunId(null)
+            }}
+          >
+            日志
+          </TextButton>
+          <TextButton onClick={() => openEdit(task)}>编辑</TextButton>
+          <TextButton
+            disabled={isToggling}
+            onClick={() => toggleMutation.mutate(task)}
+          >
+            {task.enabled ? '停用' : '启用'}
+          </TextButton>
+          <TextButton tone="danger" onClick={() => setDeleteTarget(task)}>
+            删除
+          </TextButton>
+        </Space>
+      ),
+    }
+  })

  return (
    <main className="app-shell">
-      <header className="dashboard-header">
+      <header className="page-header">
        <div className="header-title">
-          <h1>TaskPilot</h1>
-          <p className="subtitle">
-            Rust 本地轻量化任务引擎 · Windows 原生调度中心
-          </p>
-        </div>
-        <div className="header-actions">
-          <button
-            type="button"
-            className="button button-primary"
-            onClick={openCreate}
-          >
-            + 新建任务
-          </button>
+          <p className="eyebrow">TASKPILOT / WINDOWS SCHEDULER</p>
+          <Title level={1}>TaskPilot</Title>
+          <Text tone="sub">Rust 本地轻量化任务引擎 · Windows 原生调度中心</Text>
        </div>
+        <Space gap="sm" wrap>
+          <Button onClick={openCreate}>+ 新建任务</Button>
+        </Space>
      </header>

-      {notice ? (
-        <div className="toast-message" role="status">
-          {notice}
-        </div>
-      ) : null}
      {actionError ? (
-        <div className="inline-alert inline-alert-error page-alert" role="alert">
-          <span>{actionError}</span>
-          <button
-            type="button"
-            className="text-button"
-            onClick={() => setActionError(null)}
-          >
-            关闭
-          </button>
-        </div>
+        <Notice
+          tone="error"
+          title="操作失败"
+          className="page-alert"
+          action={{ label: '关闭', onClick: () => setActionError(null) }}
+        >
+          {actionError}
+        </Notice>
      ) : null}

-      <section className="metrics-grid" aria-label="任务统计">
-        <MetricCard
-          label="已托管任务"
-          value={statsQuery.data?.total}
-          loading={statsQuery.isPending}
-        />
-        <MetricCard
-          label="运行中任务"
-          value={statsQuery.data?.running}
-          loading={statsQuery.isPending}
-        />
-        <MetricCard
-          label="可用脚本"
-          value={statsQuery.data?.script}
-          loading={statsQuery.isPending}
-        />
-        <article className="metric-card">
-          <span>Rust 引擎</span>
-          <strong className={healthQuery.isError ? 'metric-danger' : ''}>
-            {healthQuery.isPending
-              ? '...'
-              : healthQuery.isError
-                ? '离线'
-                : '在线'}
-          </strong>
-        </article>
+      <section aria-label="任务统计" className="metrics-section">
+        <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="md">
+          <MetricCard
+            label="已托管任务"
+            value={statsQuery.data?.total}
+            loading={statsQuery.isPending}
+          />
+          <MetricCard
+            label="运行中任务"
+            value={statsQuery.data?.running}
+            loading={statsQuery.isPending}
+          />
+          <MetricCard
+            label="可用脚本"
+            value={statsQuery.data?.script}
+            loading={statsQuery.isPending}
+          />
+          <MetricCard
+            label="Rust 引擎"
+            value={
+              healthQuery.isPending
+                ? '...'
+                : healthQuery.isError
+                  ? '离线'
+                  : '在线'
+            }
+            loading={false}
+            danger={healthQuery.isError}
+          />
+        </Grid>
      </section>

-      <section className="card task-card">
+      <Card padding="none" className="task-card">
        <div className="toolbar">
-          <form
-            className="search-form"
-            onSubmit={(event) => {
-              event.preventDefault()
-              const value = String(
-                new FormData(event.currentTarget).get('q') ?? '',
-              ).trim()
-              updateFilters({ q: value || undefined, page: '1' })
-            }}
-          >
-            <label className="visually-hidden" htmlFor="task-search">
-              搜索任务
-            </label>
-            <input
-              id="task-search"
-              key={q}
-              name="q"
-              className="field-input search-input"
-              defaultValue={q}
-              placeholder="搜索任务名称或 ID"
-            />
-            <button type="submit" className="button button-secondary">
-              搜索
-            </button>
-          </form>
+          <SearchField
+            className="toolbar-search"
+            value={queryDraft}
+            onChange={setQueryDraft}
+            placeholder="搜索任务名称或 ID"
+            size="md"
+            maxWidth={420}
+          />

-          <div className="filter-row">
-            <label>
-              <span className="visually-hidden">启用状态</span>
-              <select
-                className="field-input compact-select"
-                value={enabledValue ?? ''}
-                onChange={(event) =>
-                  updateFilters({
-                    enabled: event.target.value || undefined,
-                    page: '1',
-                  })
-                }
-              >
-                <option value="">全部状态</option>
-                <option value="true">已启用</option>
-                <option value="false">已停用</option>
-              </select>
-            </label>
-            <label>
-              <span className="visually-hidden">任务类型</span>
-              <select
-                className="field-input compact-select"
-                value={actionTypeValue ?? ''}
-                onChange={(event) =>
-                  updateFilters({
-                    action_type: event.target.value || undefined,
-                    page: '1',
-                  })
-                }
-              >
-                <option value="">全部类型</option>
-                <option value="script">脚本</option>
-                <option value="http">HTTP</option>
-                <option value="process">进程</option>
-              </select>
-            </label>
-            {(q || enabledValue || actionTypeValue) && (
-              <button
-                type="button"
-                className="text-button"
-                onClick={() => {
-                  setSearchParams({})
-                }}
-              >
+          <div className="toolbar-filters">
+            <Select
+              className="filter-select"
+              options={ENABLED_OPTIONS}
+              value={enabledValue ?? ''}
+              onChange={(value) =>
+                updateFilters({
+                  enabled: value || undefined,
+                  page: '1',
+                })
+              }
+            />
+            <Select
+              className="filter-select"
+              options={ACTION_TYPE_OPTIONS}
+              value={actionTypeValue ?? ''}
+              onChange={(value) =>
+                updateFilters({
+                  action_type: value || undefined,
+                  page: '1',
+                })
+              }
+            />
+            {hasFilters ? (
+              <TextButton onClick={() => setSearchParams({})}>
                清除筛选
-              </button>
-            )}
-            <button
-              type="button"
-              className="text-button"
-              onClick={refreshAll}
-              disabled={tasksQuery.isFetching}
-            >
+              </TextButton>
+            ) : null}
+            <TextButton onClick={refreshAll} disabled={tasksQuery.isFetching}>
              {tasksQuery.isFetching ? '同步中...' : '刷新'}
-            </button>
+            </TextButton>
          </div>
        </div>

        {tasksQuery.isError ? (
-          <div className="state-panel state-error">
-            <h2>任务列表加载失败</h2>
-            <p>{tasksQuery.error.message}</p>
-            <button
-              type="button"
-              className="button button-secondary"
-              onClick={() => void tasksQuery.refetch()}
-            >
-              重试
-            </button>
-          </div>
+          <Result
+            status="error"
+            title="任务列表加载失败"
+            description={tasksQuery.error.message}
+            actions={
+              <Button
+                variant="secondary"
+                onClick={() => void tasksQuery.refetch()}
+              >
+                重试
+              </Button>
+            }
+          />
        ) : tasksQuery.isPending ? (
-          <div className="state-panel">
-            <span className="loading-mark" aria-hidden="true" />
-            <p>正在读取任务...</p>
+          <div className="state-block">
+            <Spinner label="正在读取任务" />
+            <Text tone="sub">正在读取任务...</Text>
          </div>
        ) : tasks.length === 0 ? (
-          <div className="state-panel">
-            <p className="section-label">EMPTY</p>
-            <h2>{q || enabledValue || actionTypeValue ? '没有匹配任务' : '还没有任务'}</h2>
-            <p>
-              {q || enabledValue || actionTypeValue
-                ? '请调整搜索条件后重试。'
-                : '创建第一个定时任务，开始使用真实调度能力。'}
-            </p>
-            {!q && !enabledValue && !actionTypeValue ? (
-              <button
-                type="button"
-                className="button button-primary"
-                onClick={openCreate}
-              >
-                新建任务
-              </button>
-            ) : null}
-          </div>
+          <Empty
+            className="empty-state"
+            text={
+              <span className="empty-copy">
+                <Text as="span" size="lg" strong>
+                  {hasFilters ? '没有匹配任务' : '还没有任务'}
+                </Text>
+                <Text as="span" size="md" tone="sub">
+                  {hasFilters
+                    ? '请调整搜索条件后重试。'
+                    : '创建第一个定时任务，开始使用真实调度能力。'}
+                </Text>
+              </span>
+            }
+            action={
+              hasFilters ? undefined : (
+                <Button onClick={openCreate}>新建任务</Button>
+              )
+            }
+          />
        ) : (
          <>
-            <div className="table-container">
-              <table className="task-table">
-                <thead>
-                  <tr>
-                    <th>名称 / 任务标识</th>
-                    <th>调度周期</th>
-                    <th>类型</th>
-                    <th>状态</th>
-                    <th>超时配置</th>
-                    <th className="align-right">操作</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {tasks.map((task) => {
-                    const isRunning =
-                      runMutation.isPending &&
-                      runMutation.variables?.id === task.id
-                    return (
-                      <tr key={task.id}>
-                        <td>
-                          <div className="task-name">{task.name}</div>
-                          <div className="task-id mono">{task.id}</div>
-                        </td>
-                        <td>
-                          <code>{task.cron}</code>
-                          <div className="cell-note">{task.timezone}</div>
-                          <div className="cell-note">
-                            {task.enabled
-                              ? nextRuns.get(task.id)
-                                ? `下次 ${formatShortDateTime(nextRuns.get(task.id))}`
-                                : '调度中…'
-                              : '未调度'}
-                          </div>
-                        </td>
-                        <td>
-                          <span className="type-badge">
-                            {actionTypeLabel(task.action.type)}
-                          </span>
-                          <div className="cell-note">
-                            超时 {task.timeout_secs}s
-                          </div>
-                        </td>
-                        <td>
-                          <EnabledBadge enabled={task.enabled} />
-                        </td>
-                        <td className="cell-note">超时 {task.timeout_secs}s</td>
-                        <td>
-                          <div className="row-actions">
-                            <button
-                              type="button"
-                              className="button button-secondary button-small"
-                              disabled={isRunning}
-                              title="立即运行"
-                              onClick={() => runMutation.mutate(task)}
-                            >
-                              {isRunning ? '提交中' : '运行'}
-                            </button>
-                            <button
-                              type="button"
-                              className="button button-secondary button-small"
-                              onClick={() => {
-                                setLogTask(task)
-                                setInitialRunId(null)
-                              }}
-                            >
-                              日志
-                            </button>
-                            <button
-                              type="button"
-                              className="button button-secondary button-small"
-                              onClick={() => openEdit(task)}
-                            >
-                              编辑
-                            </button>
-                            <button
-                              type="button"
-                              className="button button-secondary button-small"
-                              disabled={
-                                toggleMutation.isPending &&
-                                toggleMutation.variables?.id === task.id
-                              }
-                              onClick={() => toggleMutation.mutate(task)}
-                            >
-                              {task.enabled ? '停用' : '启用'}
-                            </button>
-                            <button
-                              type="button"
-                              className="button button-ghost button-small danger-text"
-                              onClick={() => setDeleteTarget(task)}
-                            >
-                              删除
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
-            </div>
-            <footer className="pagination">
-              <span>
+            <Table
+              className="task-table"
+              columns={TABLE_COLUMNS}
+              rows={rows}
+              size="md"
+            />
+            <footer className="pagination-bar">
+              <Text size="sm" tone="sub">
                共 {total} 个任务，第 {page} / {totalPages} 页
-              </span>
-              <div>
-                <button
-                  type="button"
-                  className="button button-secondary button-small"
-                  disabled={page <= 1}
-                  onClick={() =>
-                    updateFilters({ page: String(Math.max(1, page - 1)) })
-                  }
-                >
-                  上一页
-                </button>
-                <button
-                  type="button"
-                  className="button button-secondary button-small"
-                  disabled={page >= totalPages}
-                  onClick={() =>
-                    updateFilters({ page: String(Math.min(totalPages, page + 1)) })
-                  }
-                >
-                  下一页
-                </button>
-              </div>
+              </Text>
+              <Pagination
+                page={page}
+                total={total}
+                pageSize={PAGE_SIZE}
+                onChange={(next) => updateFilters({ page: String(next) })}
+              />
            </footer>
          </>
        )}
-      </section>
+      </Card>

      <TaskEditorModal
        open={editorOpen}
@@ -557,16 +519,26 @@ export function TaskDashboard() {

 interface MetricCardProps {
  label: string
-  value: number | undefined
+  value: number | string | undefined
  loading: boolean
+  danger?: boolean
 }

-function MetricCard({ label, value, loading }: MetricCardProps) {
+function MetricCard({ label, value, loading, danger = false }: MetricCardProps) {
  return (
-    <article className="metric-card">
-      <span>{label}</span>
-      <strong>{loading ? '...' : (value ?? '--')}</strong>
-    </article>
+    <Card padding="md" className="metric-card" hoverable>
+      <Text tone="sub" size="sm">
+        {label}
+      </Text>
+      <Title
+        level={1}
+        as="div"
+        weight="medium"
+        className={danger ? 'metric-value metric-danger' : 'metric-value'}
+      >
+        {loading ? '...' : (value ?? '--')}
+      </Title>
+    </Card>
  )
 }

@@ -2,6 +2,21 @@ import '@testing-library/jest-dom/vitest'
 import { cleanup } from '@testing-library/react'
 import { afterEach, vi } from 'vitest'

+/**
+ * jsdom 30 还没有实现 `<dialog>` 的 showModal / close，
+ * 而 @stash/ui 的 Modal / Drawer 依赖它们（浏览器原生支持）。
+ * 这里补一个最小的开关实现：只维护 open 属性，焦点与 inert 由真实浏览器负责。
+ */
+const dialogPrototype = window.HTMLDialogElement?.prototype
+if (dialogPrototype && typeof dialogPrototype.showModal !== 'function') {
+  dialogPrototype.showModal = function showModal(this: HTMLDialogElement) {
+    this.setAttribute('open', '')
+  }
+  dialogPrototype.close = function close(this: HTMLDialogElement) {
+    this.removeAttribute('open')
+  }
+}
+
 afterEach(() => {
  cleanup()
  vi.unstubAllGlobals()
@@ -3,6 +3,10 @@ import { defineConfig } from 'vite'

 export default defineConfig({
  plugins: [react()],
+  // @stash/ui 是本地 file 依赖（软链），去重 React，避免加载两份运行时
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
  server: {
    host: '127.0.0.1',
    port: 5173,