@orbit-work/ui 0.1.0

package/src/screens/_screen.tsx

@@ -0,0 +1,355 @@
+import type { ReactNode } from "react"
+import { WindowBand, type WindowBandPlatform, WindowChrome } from "../components/composite/TitleBar"
+import type {
+  DesktopSidebarProject,
+  DesktopSidebarUser,
+  DesktopSidebarViewProps,
+} from "../components/domain/desktop/DesktopSidebarView"
+
+/**
+ * 整屏组合验证的公共脚手架（蓝图 06 · screens）。
+ *
+ * 这里**不造组件**：只提供 14 张代表屏共用的 1440×800 画框、桌面外壳套层，
+ * 以及各屏自足所需的 mock 数据。所有可视元素一律由 P3-P5 已落地的
+ * primitives / patterns / chat / preview / surfaces 组件渲染。
+ *
+ * 立面按 §5：画框贴地＝0 影＋1px `--ow-border-strong`；双主题由 token 承担，
+ * 本文件零裸色值。
+ */
+
+/** 蓝图 06 定的整屏验证画布：1440×800。 */
+export const SCREEN_W = 1440
+export const SCREEN_H = 800
+
+/** `--ow-sidebar-w`（styles/tokens.css: 240px）的数值兜底——mock 要的是 number，不是 var()。 */
+export const SCREEN_SIDEBAR_W = 240
+
+const SCREEN_VIEWPORT = {
+  name: "Screen 1440×800",
+  styles: { width: `${SCREEN_W}px`, height: `${SCREEN_H}px` },
+  type: "desktop",
+} as const
+
+/**
+ * storybook 侧统一的 viewport 参数，各屏 meta 直接摊开引用。
+ * `options` 是 storybook 9+ 的键，`viewports` 是旧键——两个都给，换版本不掉档。
+ */
+export const SCREEN_PARAMETERS = {
+  layout: "fullscreen",
+  viewport: {
+    defaultViewport: "screen1440",
+    options: { screen1440: SCREEN_VIEWPORT },
+    viewports: { screen1440: SCREEN_VIEWPORT },
+  },
+} as const
+
+/**
+ * 画框内唯一一条兜底规则（只改几何、不碰任何颜色）：
+ * 真实外壳 `.owshell` 自带 `height: 100vh`（登录页的 `login-v2` 也挂在它上面），
+ * 进画框后要改成填满 800，否则 storybook iframe 一高就把底部裁掉。
+ * 规则限定在画框的 data 属性下，不外溢到别的 story。
+ */
+const SCREEN_FRAME_CSS = `
+[data-ow-screen="frame"] .owshell { height: 100%; border-radius: inherit; }
+[data-ow-screen="frame"][data-ow-titlebar="on"] .owshell { height: auto; flex: 1 1 auto; min-height: 0; }
+`
+
+/* ---------------- 屏级开关（仅取证用，走 iframe URL 参数） ---------------- */
+
+/**
+ * 画框级开关，只服务取证：storybook 的 iframe URL 上加 `&ow-platform=windows`、
+ * `&ow-collapsed=1` 或 `&ow-fullscreen=1`，同一个 story 就能出
+ * 「mac / windows / linux × 展开 / 折叠 × 全屏」诸态，不必为每一态各写一个 story。
+ * storybook 本身忽略这几个多余参数。缺省＝mac、未折叠、非全屏（Terry 看的默认画面）。
+ */
+function screenOption(name: string): string | null {
+  if (typeof window === "undefined") return null
+  try {
+    return new URLSearchParams(window.location.search).get(name)
+  } catch {
+    return null
+  }
+}
+
+/** 画框默认平台：mac（可用 `?ow-platform=windows|linux|web` 切）。 */
+export function screenPlatform(): WindowBandPlatform {
+  const raw = screenOption("ow-platform")
+  return raw === "windows" || raw === "linux" || raw === "web" || raw === "mac" ? raw : "mac"
+}
+
+/** 画框默认折叠态：展开（可用 `?ow-collapsed=1` 切）。 */
+export function screenCollapsed(): boolean {
+  return screenOption("ow-collapsed") === "1"
+}
+
+/** 画框默认窗口态：非全屏（可用 `?ow-fullscreen=1` 切）。mac 全屏＝红绿灯消失、顶行让位块收 0。 */
+export function screenFullscreen(): boolean {
+  return screenOption("ow-fullscreen") === "1"
+}
+
+/** 定宽画框：把整屏钉在 1440×800，避免随 storybook 面板尺寸漂移。 */
+export function ScreenFrame({
+  children,
+  className = "",
+  titlebar,
+}: {
+  children: ReactNode
+  className?: string
+  /** 可选窗口带槽（`composite/TitleBar`）：坐在画框顶端，让 48 带在整屏层可取证。 */
+  titlebar?: ReactNode
+}) {
+  return (
+    <div
+      data-ow-screen="frame"
+      data-ow-titlebar={titlebar ? "on" : undefined}
+      className={className}
+      style={{
+        width: SCREEN_W,
+        height: SCREEN_H,
+        position: "relative",
+        overflow: "hidden",
+        // 画框自成包含块：让画框内 `position: fixed` 的弹层（Dialog portal={false} 的遮罩等）
+        // 被画框裁住，而不是铺满整个 storybook 视口。只影响画框，真机不经过这里。
+        transform: "translateZ(0)",
+        display: "flex",
+        flexDirection: "column",
+        border: "1px solid var(--ow-border-strong)",
+        borderRadius: "var(--ow-radius-lg)",
+        background: "var(--ow-bg)",
+        color: "var(--ow-text)",
+        fontFamily: "var(--ow-font-sans)",
+      }}
+    >
+      <style>{SCREEN_FRAME_CSS}</style>
+      {titlebar}
+      {children}
+    </div>
+  )
+}
+
+/**
+ * 桌面外壳画框：画框内再套一层真实应用的 `.owshell`
+ * （`styles/desktop-surfaces.css`），让侧栏＋`.owcenter` 的立面与真机一致。
+ *
+ * **R2：画框顶端只有 windows 才有窗口带**（Terry 2026-09-03 第 1 条）——windows 是
+ * `frame:false`、三键必须自绘，那条 48 带留着、折叠钮在带里；mac/linux/web 缺省**无带**，
+ * 折叠钮住进侧栏顶行（`SidebarShell` 的 `data-slot="sidebar-toprow"`，同样 48 高，
+ * mac 带 68 让位块 → 钮落 x=80，linux/web 落 x=8）。平台默认 mac，
+ * `?ow-platform=windows|linux|web` 切；`?ow-collapsed=1` 出折叠态；`?ow-fullscreen=1` 出 mac 全屏。
+ *
+ * 画框同时把宿主 `App.tsx:402/412` 的那套状态类原样打在 `.owshell` 上
+ * （`is-mac` / `is-windows` / `is-fullscreen` / `collapsed`）——库 CSS 里有一批
+ * `.owshell.is-*` 规则只有宿主会触发，画框不打就永远证不到那一半（找茬 L3-3-3）。
+ *
+ * 画框内的整屏一律 `contained`，窗口带归画框，`DesktopWorkbenchShell` 不再自带。
+ * 传 `titlebar={null}` 可显式去带；登录 / 分享这类无壳屏本来就走裸 `ScreenFrame`，不经本件。
+ */
+export function DesktopScreenFrame({
+  children,
+  titlebar,
+  platform = screenPlatform(),
+  collapsed = screenCollapsed(),
+  fullscreen = screenFullscreen(),
+}: {
+  children: ReactNode
+  /** 窗口带槽：缺省＝仅 windows 出带；传 `null` 去带；传自定义 `TitleBar` 覆盖。 */
+  titlebar?: ReactNode
+  /** 平台，默认取 URL 开关（缺省 mac）。 */
+  platform?: WindowBandPlatform
+  /** 侧栏折叠态，默认取 URL 开关；只改折叠钮的语义，不改其坐标。 */
+  collapsed?: boolean
+  /** mac 全屏（红绿灯消失 → 顶行让位块收 0），默认取 URL 开关。 */
+  fullscreen?: boolean
+}) {
+  const band =
+    titlebar === undefined ? (
+      platform === "windows" ? (
+        <WindowBand
+          platform={platform}
+          fullscreen={fullscreen}
+          collapsed={collapsed}
+          onToggle={noop}
+          chrome={<WindowChrome onMinimize={noop} onToggleMaximize={noop} onClose={noop} />}
+        />
+      ) : undefined
+    ) : (
+      titlebar
+    )
+  /* 与宿主 App.tsx 同名的状态类：`.owshell.is-mac/.is-windows/.is-fullscreen/.collapsed`。 */
+  const shellClass = [
+    "owshell",
+    platform === "mac" ? "is-mac" : null,
+    platform === "windows" ? "is-windows" : null,
+    fullscreen ? "is-fullscreen" : null,
+    collapsed ? "collapsed" : null,
+  ]
+    .filter(Boolean)
+    .join(" ")
+  return (
+    <ScreenFrame titlebar={band}>
+      <div className={shellClass}>{children}</div>
+    </ScreenFrame>
+  )
+}
+
+export const noop = () => { }
+export const noopAsync = async () => { }
+
+/* ---------------- 侧栏 mock（Home / Chat / Skills / Sites / Tasks / Workspace 共用） ---------------- */
+
+export const screenProjects: DesktopSidebarProject[] = [
+  {
+    id: "default",
+    label: "默认项目",
+    open: true,
+    isDefault: true,
+    loadingMore: false,
+    canLoadMore: false,
+    threads: [
+      {
+        id: "thread-q3",
+        projectId: "default",
+        title: "Q3 渠道复盘",
+        active: true,
+        running: false,
+        unread: false,
+      },
+      {
+        id: "thread-retention",
+        projectId: "default",
+        title: "留存曲线重算",
+        active: false,
+        running: true,
+        runningCount: "3/7",
+        unread: false,
+      },
+      {
+        id: "thread-weekly",
+        projectId: "default",
+        title: "周报草稿",
+        active: false,
+        running: false,
+        unread: true,
+      },
+    ],
+  },
+  {
+    id: "orbit-fe",
+    label: "orbit-fe",
+    open: true,
+    isDefault: false,
+    loadingMore: false,
+    canLoadMore: true,
+    threads: [
+      {
+        id: "thread-ds2",
+        projectId: "orbit-fe",
+        title: "设计系统 2.0 收口",
+        active: false,
+        running: false,
+        unread: false,
+      },
+    ],
+  },
+  {
+    id: "backend",
+    label: "backend",
+    open: false,
+    isDefault: false,
+    loadingMore: false,
+    canLoadMore: false,
+    threads: [],
+  },
+]
+
+/** 头像留空＝走侧栏自带的首字母底纹兜底，整屏卡不外链图片资源。
+ *  email / id 给账户菜单头部与「复制 ID」行（R3：整屏与菜单件同一份身份）。 */
+export const screenUser: DesktopSidebarUser = {
+  name: "张颖",
+  avatarUrl: "",
+  email: "zhangying@orbitwork.ai",
+  id: "usr_8f3a21c7",
+}
+
+/** 整屏 mock 的主题读数：跟 Storybook 工具栏（preview.tsx 把 data-theme 写在根上）走，
+ *  账户菜单「外观」行的选中段才与画面同档；拿不到就当浅色。 */
+function screenTheme(): "light" | "dark" {
+  if (typeof document === "undefined") return "light"
+  const el = document.documentElement.getAttribute("data-theme")
+    ? document.documentElement
+    : document.querySelector("[data-theme]")
+  return el?.getAttribute("data-theme") === "dark" ? "dark" : "light"
+}
+
+/**
+ * 侧栏整套受控 props 的自足 mock；各屏只覆盖 `activeNav` / `projects` 等少数几项。
+ * 全部回调是空实现——整屏卡只证明组合，不证明行为。
+ */
+export function screenSidebarProps(overrides: Partial<DesktopSidebarViewProps> = {}): DesktopSidebarViewProps {
+  const merged: DesktopSidebarViewProps = {
+    /* 折叠态跟画框同一个开关（`?ow-collapsed=1`）：顶行的钮与侧栏宽度才在同一态上取证。 */
+    collapsed: screenCollapsed(),
+    /* 平台/全屏也跟画框同一套 URL 开关：mac/linux/web 的顶行、mac 的让位块、
+       rail 宽（116 / 44 / 0）全靠这两枚值派生。 */
+    platform: screenPlatform(),
+    fullscreen: screenFullscreen(),
+    /* A1-B6：整屏 mock 的侧栏宽跟 token 走——`--ow-sidebar-w` 是 240，原来这里写 260，
+       每张整屏卡都比真机宽 20px。`width` 在 DesktopSidebarViewProps 上是必填 number，
+       所以取 token 的数值兜底而不是留空。 */
+    width: SCREEN_SIDEBAR_W,
+    newTaskTitle: "新任务",
+    projects: screenProjects,
+    user: screenUser,
+    /* R3（Terry 意见 6）：账户菜单的套餐井 / 积分条 / 版本号 / 外观 / 宠物 / 记忆 / 复制 ID /
+       检查更新在这里给缺省——原来只有 Home 的 AccountMenu 一张传全了，其余整屏点头像
+       弹的是没有套餐与版本号的「最简档」，看着像两套菜单。数据口径同交接单 9.7。 */
+    plan: { name: "体验版", action: { label: "升级", onClick: noop } },
+    credits: { used: 1240, limit: 2000 },
+    version: "v1.4.2",
+    theme: screenTheme(),
+    onThemeChange: noop,
+    petVisible: true,
+    onPetVisibleChange: noop,
+    onOpenMemory: noop,
+    onCopyUserId: noop,
+    onCheckUpdate: noop,
+    showArchived: false,
+    onCollapsedChange: noop,
+    onWidthChange: noop,
+    onNavigate: noop,
+    onOpenSettings: noop,
+    onNewTask: noop,
+    onToggleProject: noop,
+    onLoadMore: noop,
+    onRefreshProjects: noop,
+    onShowArchivedChange: noop,
+    onSelectThread: noop,
+    onCreateProject: noopAsync,
+    onRenameProject: noopAsync,
+    onDeleteProject: noopAsync,
+    onOpenProjectDirectory: noop,
+    onRenameThread: noopAsync,
+    onMoveThread: noopAsync,
+    onDeleteThread: noopAsync,
+    onArchiveThread: noopAsync,
+    onShareThread: noop,
+    onFeedback: noop,
+    onLogout: noop,
+    ...overrides,
+  }
+  /* 「导航项＋会话行双选中」修：`screenProjects` 里 `thread-q3` 恒为 `active: true`，
+     而插件 / 工作台 / 定时任务 / 我的空间四屏又各自传 `activeNav`——同一张侧栏里
+     位置极（--ow-current-bg 填充块）同时点在导航项和会话行上，全屏两处当前项。
+     规则：进入非会话页（传了 `activeNav`）时会话行一律不高亮，位置极只留导航那一处。
+     宿主侧本来就是这个口径（apps/desktop `features/sidebar/Sidebar.tsx:307`：
+     `active: thread.id === activeThread && (view === 'task' || view === 'home')`），
+     只有整屏 mock 漏了这一层，故修在 mock 上，不改组件契约。 */
+  if (!merged.activeNav) return merged
+  return {
+    ...merged,
+    projects: merged.projects.map((project) => ({
+      ...project,
+      threads: project.threads.map((thread) => (thread.active ? { ...thread, active: false } : thread)),
+    })),
+  }
+}

package/src/screens/_settingsNav.ts

@@ -0,0 +1,27 @@
+import type { DesktopSettingsNavItem } from "../components/domain/desktop/DesktopSettingsView"
+
+/**
+ * 设置十段 —— 逐字照原型（template.dc.html L3308–3319 `SET_SECTIONS`）。
+ *
+ * A2-B5（裁决 2）：撤「外观」「桌面宠物」两段——主题、字体缩放、显示模式跟随系统与
+ * 聊天背景全部收进「常规」；补回「记忆」（内容＝`DesktopSettingsMemorySection`）与
+ * 「快捷键」（`ShortcutGroupTable`，键位由研发接）。左栏不出图标（原型 2404 无图标槽），
+ * 故这里不给 `icon`——`DesktopSettingsNavItem.icon` 已改可选且组件不渲染它。
+ * 真实菜单由研发的 `settingsNav` 数据定，这份只服务 Screens 故事，一处改十屏跟着改。
+ */
+export const SETTINGS_NAV: DesktopSettingsNavItem[] = [
+  { id: "general", label: "常规", description: "账号、启动行为与外观，改动会立刻保存。" },
+  { id: "usage", label: "用量与套餐", description: "这个月用掉多少额度，以及可以换到哪一档套餐。" },
+  { id: "models", label: "模型配置", description: "日常对话、图像生成和图片理解各自用哪个模型。" },
+  { id: "auth", label: "授权模式", description: "专家调用工具或访问本地资源时，要不要先问过你。" },
+  {
+    id: "security",
+    label: "安全中心",
+    description: "Orbitwork 需要的系统授权，以及内置 Python / Node.js 运行时的开关。",
+  },
+  { id: "data", label: "数据管理", description: "你发布出去的站点和分享出去的会话，都可以在这里收回。" },
+  { id: "assistant", label: "桌面助理", description: "桌面助理的唤起方式与它能替你做的事。" },
+  { id: "memory", label: "记忆", description: "专家记住的事实与偏好，按项目和全局分开。" },
+  { id: "keys", label: "快捷键" },
+  { id: "about", label: "关于" },
+]