@orbit-work/ui 0.1.0

package/src/components/domain/tasks/ScheduledTasksSpaceView/index.tsx

@@ -0,0 +1,118 @@
+import type { ReactNode } from "react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { Plus } from "../../../composite/Icons"
+import { PageHead } from "../../../composite/PageHead"
+import { Button } from "../../../primitives"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+
+export interface ScheduledTasksSpaceViewProps {
+  /**
+   * 进行中的任务数。A3-B3 起不再进页头（原型只在说明句尾挂一段「N 个任务」总数），
+   * 属性保留兼容既有调用方；运行态由任务卡自己出。
+   */
+  activeCount?: number
+  totalCount: number
+  loading: boolean
+  error?: string | null
+  hasTasks: boolean
+  taskCards?: ReactNode
+  dialogs?: ReactNode
+  onCreate: () => void
+  onRetry: () => void
+}
+
+export function ScheduledTasksSpaceView({
+  totalCount,
+  loading,
+  error,
+  hasTasks,
+  taskCards,
+  dialogs,
+  onCreate,
+  onRetry,
+}: ScheduledTasksSpaceViewProps): React.ReactElement {
+  return (
+    <div className="page cron-space">
+      {/* A3-B3：页首换 composite/PageHead —— 眉标「自动化」／32px 大标题「定时任务」／说明句，
+          与插件、工作台两屏同一套三行页头（原型 template.dc.html L1731–1740）。
+          三处随之退役：
+          ① 40×40 的 `.desktop-page-head__icon` info-tint 彩色图标章（§4「彩色只作第二编码」，
+             页头标识不是状态，不该吃一枚 tint 面）；
+          ② 13px/600 的 `.ch-t` 小标题 —— 屏级标题归 --ow-font-display + 32px；
+          ③ 「· N 个进行中 · 共 N 个」的并列多段读数 —— 原型只在句尾挂一段 mono caption。
+          `activeCount` 不再进页头：进行中是卡上的运行态，不是屏级读数。 */}
+      <PageHead
+        eyebrow="自动化"
+        title="定时任务"
+        description="按计划自己跑起来的任务；每次运行都会开一段新会话。"
+        meta={`${totalCount} 个任务`}
+        actions={
+          <Button variant="primary" icon={<Plus />} onClick={onCreate}>
+            新建任务
+          </Button>
+        }
+      />
+
+      <div className="cron-scroll">
+        {/* §6 错误态一律 InlineMessage：人话一句 ＋ 折叠 mono 详情（技术原文归详情，
+            不再用 sans 直接把 {error} 摊在正文里）＋ 重试动作。 */}
+        {error && hasTasks && (
+          <div data-ow-part="error">
+            <InlineMessage
+              variant="error"
+              detail={error}
+              action={
+                <Button variant="secondary" size="sm" onClick={onRetry}>
+                  重试
+                </Button>
+              }
+            >
+              定时任务列表没刷新成功。
+            </InlineMessage>
+          </div>
+        )}
+        {loading && !hasTasks ? (
+          /* §6 载态：BeaconSpinner（<20px 小转子）＋ 一句 text-2 文字编码（§4 R1）。
+             原来是 .cron-empty > .ce-t 的「600 字重标题」老三件——W3 要退役的写法。 */
+          <div data-ow-part="loading" role="status" aria-live="polite" className="cron-loading">
+            <BeaconSpinner size={16} />
+            <span>正在加载定时任务…</span>
+          </div>
+        ) : error && !hasTasks ? (
+          <div data-ow-part="error" className="cron-error">
+            <InlineMessage
+              variant="error"
+              detail={error}
+              action={
+                <Button variant="secondary" onClick={onRetry}>
+                  重试
+                </Button>
+              }
+            >
+              定时任务没加载出来。
+            </InlineMessage>
+          </div>
+        ) : !hasTasks ? (
+          /* A5-B3：这是整栏空态，落 `size="page"` 一级形制——母题 52×32 ＋ 16/500 标题
+             ＋ 14/1.75 副句 ＋ 一枚 32 高的钮，版心 `56px auto 0 / max-width:440`
+             （原型 template.dc.html L1771–1780）。此前是 md 档单句，三件信息塌成一行。
+             §4：空态第二入口与页头「新建任务」是同一动作同一形制——primary 实底主钮，
+             与页头钮成对出现；CTA 不带图标，图标只留给页头钮（原型空态钮即无图标）。 */
+          <EmptyState
+            className="cron-empty"
+            size="page"
+            title="还没有定时任务"
+            message="把每天都要做的事交出去：到点它自己开一段会话，跑完通知你。"
+            actionLabel="新建任务"
+            actionVariant="primary"
+            onAction={onCreate}
+          />
+        ) : (
+          <div className="cron-grid">{taskCards}</div>
+        )}
+      </div>
+      {dialogs}
+    </div>
+  )
+}

package/src/components/domain/tasks/index.ts

@@ -0,0 +1,4 @@
+export * from "./ScheduledTaskCardView"
+export * from "./ScheduledTaskDeleteDialog"
+export * from "./ScheduledTaskDetailView"
+export * from "./ScheduledTasksSpaceView"

package/src/components/domain/theme/SkinManager.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ThemeProvider } from "../../../theme/providers/ThemeProvider"
+import { SkinManager } from "./SkinManagerUI"
+
+const meta: Meta<typeof SkinManager> = {
+  title: "Theme/SkinManager",
+  component: SkinManager,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+皮肤管理器组件。提供完整的皮肤管理功能：
+
+**功能：**
+- 导入皮肤（从文件、URL、分享链接）
+- 试穿预览（在应用前查看效果）
+- 导出皮肤（下载为 .ow-skin.json 文件）
+- 分享皮肤（生成分享链接）
+- 管理自定义皮肤（删除、应用）
+- 主题切换（浅色/深色/跟随系统）
+
+**皮肤格式：**
+皮肤文件为 JSON 格式，包含颜色、字体、圆角等配置。支持 light/dark 两种模式。
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SkinManager>
+
+export const Default: Story = {
+  name: "皮肤管理器",
+}

package/src/components/domain/theme/SkinManagerUI.tsx

@@ -0,0 +1,382 @@
+import { useCallback, useRef, useState } from "react"
+import type { OrbitworkSkin } from "../../../theme/core/skin"
+import { useTheme } from "../../../theme/providers/ThemeProvider"
+import {
+  exportSkin,
+  importSkin,
+  importSkinFromShareUrl,
+  importSkinFromUrl,
+  saveCustomSkins,
+  shareSkin,
+} from "../../../theme/utils/skinManager"
+import { Badge, Button, Card, Field, InlineMessage, SegmentedControl } from "../../primitives"
+
+/**
+ * Skin Manager Component
+ * Provides UI for importing, exporting, trying on, and managing skins
+ */
+export function SkinManager() {
+  const {
+    theme,
+    setTheme,
+    skin,
+    setSkin,
+    builtinSkins,
+    customSkins,
+    setCustomSkins,
+    skins,
+    tryOnSkin,
+    tryOn,
+    applySkin,
+    cancelTryOn,
+    isTryingOn,
+  } = useTheme()
+
+  const [importUrl, setImportUrl] = useState("")
+  const [shareUrl, setShareUrl] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [fileName, setFileName] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  // Handle file import
+  const handleFileImport = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0]
+      if (!file) return
+
+      setFileName(file.name)
+      setError(null)
+      const result = await importSkin(file)
+
+      if (result.error) {
+        setError(result.error)
+      } else if (result.skin) {
+        // Check for duplicate ID
+        const isDuplicate = skins.some((s) => s.id === result.skin!.id)
+        if (isDuplicate) {
+          setError(`皮肤 ID "${result.skin.id}" 已存在，请修改皮肤 ID 后重新导入`)
+          return
+        }
+
+        // Add to custom skins
+        const newCustomSkins = [...customSkins, result.skin]
+        setCustomSkins(newCustomSkins)
+        saveCustomSkins(newCustomSkins)
+
+        // Try on the imported skin
+        tryOn(result.skin)
+      }
+
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ""
+      }
+    },
+    [customSkins, setCustomSkins, skins, tryOn],
+  )
+
+  // Handle URL import (auto-detect http:// or orbitwork:// protocol)
+  const handleUrlImport = useCallback(async () => {
+    if (!importUrl.trim()) {
+      setError("请输入皮肤 URL")
+      return
+    }
+
+    setError(null)
+
+    // Auto-detect protocol and use appropriate import method
+    if (importUrl.startsWith("orbitwork://")) {
+      // Share URL (orbitwork:// protocol)
+      const result = importSkinFromShareUrl(importUrl)
+
+      if (result.error) {
+        setError(result.error)
+      } else if (result.skin) {
+        const isDuplicate = skins.some((s) => s.id === result.skin!.id)
+        if (isDuplicate) {
+          setError(`皮肤 ID "${result.skin.id}" 已存在`)
+          return
+        }
+
+        const newCustomSkins = [...customSkins, result.skin]
+        setCustomSkins(newCustomSkins)
+        saveCustomSkins(newCustomSkins)
+        tryOn(result.skin)
+        setImportUrl("")
+      }
+    } else {
+      // Regular URL (http:// or https://)
+      const result = await importSkinFromUrl(importUrl)
+
+      if (result.error) {
+        setError(result.error)
+      } else if (result.skin) {
+        const isDuplicate = skins.some((s) => s.id === result.skin!.id)
+        if (isDuplicate) {
+          setError(`皮肤 ID "${result.skin.id}" 已存在`)
+          return
+        }
+
+        const newCustomSkins = [...customSkins, result.skin]
+        setCustomSkins(newCustomSkins)
+        saveCustomSkins(newCustomSkins)
+        tryOn(result.skin)
+        setImportUrl("")
+      }
+    }
+  }, [importUrl, customSkins, setCustomSkins, skins, tryOn])
+
+  // Handle skin export
+  const handleExport = useCallback((skinToExport: OrbitworkSkin) => {
+    exportSkin(skinToExport)
+  }, [])
+
+  // Handle skin share
+  const handleShare = useCallback((skinToShare: OrbitworkSkin) => {
+    const url = shareSkin(skinToShare)
+    setShareUrl(url)
+  }, [])
+
+  // Handle skin deletion
+  const handleDelete = useCallback(
+    (skinToDelete: OrbitworkSkin) => {
+      if (!window.confirm(`确定删除皮肤 "${skinToDelete.name}" 吗？`)) return
+
+      const newCustomSkins = customSkins.filter((s) => s.id !== skinToDelete.id)
+      setCustomSkins(newCustomSkins)
+      saveCustomSkins(newCustomSkins)
+
+      // If the deleted skin is active, reset to default
+      if (skin?.id === skinToDelete.id) {
+        setSkin(null)
+      }
+    },
+    [customSkins, setCustomSkins, skin, setSkin],
+  )
+
+  const activeSkin = tryOnSkin ?? skin
+
+  return (
+    <div className="min-h-screen bg-ow-surface p-8">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-ow-fs-title font-semibold text-ow-text mb-2">皮肤管理</h1>
+          <p className="text-ow-fs-body text-ow-text-3">导入、试穿、导出和分享自定义皮肤</p>
+        </div>
+
+        {/* Theme Toggle */}
+        <Card title="主题模式" className="mb-6">
+          {/* 选中态走 SegmentedControl（surface 提亮＋500 字重），不用 primary 实底染色 —— §4 无彩选中 */}
+          <SegmentedControl
+            aria-label="主题模式"
+            size="sm"
+            value={theme}
+            onChange={(v) => setTheme(v as typeof theme)}
+            options={[
+              { value: "light", label: "浅色" },
+              { value: "dark", label: "深色" },
+              { value: "system", label: "跟随系统" },
+            ]}
+          />
+        </Card>
+
+        {/* Try-On Actions */}
+        {isTryingOn && (
+          /* §4 R2：试穿中的强调框原来是 --ow-primary 边（暗档＝荧黄），换中性描边 ——
+             「正在试穿谁」由卡标题与下面那行文字承担，不靠极色喊。 */
+          <Card title="试穿预览" className="mb-6 border border-ow-border-strong">
+            <div className="space-y-3">
+              <p className="text-ow-fs-body text-ow-text-2">
+                正在试穿: <strong>{tryOnSkin?.name}</strong>
+              </p>
+              {/* §4 单极：全屏唯一 primary（浅=藏蓝／暗=荧黄）就是这一处「应用此皮肤」，
+                  卡内试穿/应用/导入一律降为 secondary·ghost。 */}
+              <div className="flex gap-2">
+                <Button variant="primary" size="md" onClick={applySkin}>
+                  应用此皮肤
+                </Button>
+                <Button variant="secondary" size="md" onClick={cancelTryOn}>
+                  取消试穿
+                </Button>
+              </div>
+            </div>
+          </Card>
+        )}
+
+        {/* Import */}
+        <Card title="导入皮肤" className="mb-6">
+          <div className="space-y-4">
+            {/* File Import */}
+            <div>
+              <label className="text-ow-fs-body font-medium text-ow-text mb-2 block">从文件导入</label>
+              {/* 浏览器原生的 file 控件（「Choose File / No file chosen」）高度与配色都不受
+                  DS 管，与同页 Button 原语不齐平；`file:` 伪类只能刷按钮那一半。改成
+                  「隐藏 input ＋ Button 原语触发」，控件语法与全页一致。 */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".ow-skin.json"
+                onChange={handleFileImport}
+                className="hidden"
+              />
+              <div className="flex items-center gap-2">
+                <Button variant="secondary" size="md" onClick={() => fileInputRef.current?.click()}>
+                  选择文件
+                </Button>
+                <span className="text-ow-fs-caption text-ow-text-3">{fileName ?? "尚未选择文件"}</span>
+              </div>
+            </div>
+
+            {/* URL Import */}
+            <div>
+              <label className="text-ow-fs-body font-medium text-ow-text mb-2 block">从 URL 导入</label>
+              <p className="text-ow-fs-caption text-ow-text-3 mb-2">支持 HTTP/HTTPS URL 或 orbitwork:// 分享链接</p>
+              <div className="flex gap-2">
+                <Field
+                  value={importUrl}
+                  onChange={setImportUrl}
+                  placeholder="https://example.com/skin.json 或 orbitwork://skin/..."
+                  className="flex-1"
+                />
+                <Button variant="secondary" size="md" onClick={handleUrlImport}>
+                  导入
+                </Button>
+              </div>
+            </div>
+
+            {/* §6 错误态归 primitives/InlineMessage（error tint 三件套：tint 底 ＋ tint 边 ＋
+                on-tint 字）。原来是 --ow-error-bg ＋ --ow-error 的手搓面——那组是 V1 的
+                alpha 叠色族，去痕轮已点名要退役。 */}
+            {error && <InlineMessage variant="error">{error}</InlineMessage>}
+          </div>
+        </Card>
+
+        {/* Share URL */}
+        {shareUrl && (
+          <Card title="分享链接" className="mb-6">
+            <div className="space-y-3">
+              <p className="text-ow-fs-caption text-ow-text-3">
+                将此链接分享给其他用户，他们可以通过"导入分享链接"按钮导入皮肤
+              </p>
+              <div className="p-3 bg-ow-surface-2 [border-radius:var(--ow-radius-control)] break-all font-mono text-ow-fs-caption text-ow-text-2">
+                {shareUrl}
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => {
+                    navigator.clipboard.writeText(shareUrl)
+                  }}
+                >
+                  复制链接
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => setShareUrl(null)}>
+                  关闭
+                </Button>
+              </div>
+            </div>
+          </Card>
+        )}
+
+        {/* Built-in Skins */}
+        <Card title="内置皮肤" className="mb-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {builtinSkins.map((s) => (
+              <SkinCard
+                key={s.id}
+                skin={s}
+                isActive={activeSkin?.id === s.id}
+                onTryOn={() => tryOn(s)}
+                onApply={() => setSkin(s)}
+                onExport={() => handleExport(s)}
+                onShare={() => handleShare(s)}
+              />
+            ))}
+          </div>
+        </Card>
+
+        {/* Custom Skins */}
+        {customSkins.length > 0 && (
+          <Card title="自定义皮肤" className="mb-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {customSkins.map((s) => (
+                <SkinCard
+                  key={s.id}
+                  skin={s}
+                  isActive={activeSkin?.id === s.id}
+                  onTryOn={() => tryOn(s)}
+                  onApply={() => setSkin(s)}
+                  onExport={() => handleExport(s)}
+                  onShare={() => handleShare(s)}
+                  onDelete={() => handleDelete(s)}
+                />
+              ))}
+            </div>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}
+
+type SkinCardProps = {
+  skin: OrbitworkSkin
+  isActive: boolean
+  onTryOn: () => void
+  onApply: () => void
+  onExport: () => void
+  onShare: () => void
+  onDelete?: () => void
+}
+
+function SkinCard({ skin, isActive, onTryOn, onApply, onExport, onShare, onDelete }: SkinCardProps) {
+  return (
+    <div
+      /* §6 无彩选中：选中态走 --ow-current-bg 填充 ＋ 常规 1px --ow-border-strong 描边，
+         不用 --ow-primary 边（暗档 primary 就是荧黄，一张卡选中就白占一处行动极），
+         也不用 border-2 加粗（描边配重不是选中语法）。R1 双编码：填充之外还有右上角
+         「当前」Badge 的文字编码。 */
+      /* 卡骨架收口口径：容器 14（p-3.5，原 p-4＝16）· 1px --ow-border（原 border-strong）·
+         r12（--ow-radius-card）· 零影。 */
+      className={`p-3.5 border border-ow-border [border-radius:var(--ow-radius-card)] ${isActive ? "bg-[var(--ow-current-bg)]" : "bg-ow-bg"}`}
+    >
+      <div className="mb-3">
+        <div className="flex items-center justify-between mb-1">
+          <h3 className="text-ow-fs-body font-semibold text-ow-text">{skin.name}</h3>
+          {isActive && (
+            <Badge variant="success" dot>
+              当前
+            </Badge>
+          )}
+        </div>
+        {skin.description && <p className="text-ow-fs-caption text-ow-text-3 line-clamp-2">{skin.description}</p>}
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {!isActive && (
+          <Button variant="secondary" size="sm" onClick={onTryOn}>
+            试穿
+          </Button>
+        )}
+        {!isActive && (
+          <Button variant="ghost" size="sm" onClick={onApply}>
+            应用
+          </Button>
+        )}
+        <Button variant="ghost" size="sm" onClick={onExport}>
+          导出
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onShare}>
+          分享
+        </Button>
+        {onDelete && (
+          <Button variant="danger" size="sm" onClick={onDelete}>
+            删除
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/domain/theme/ThemeDemo.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ThemeDemo } from "./ThemeDemo"
+
+const meta: Meta<typeof ThemeDemo> = {
+  title: "Theme/ThemeDemo",
+  component: ThemeDemo,
+}
+
+export default meta
+type Story = StoryObj<typeof ThemeDemo>
+
+export const Default: Story = {}