@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopSettingsMemorySection/index.tsx

@@ -0,0 +1,340 @@
+"use client"
+
+import { type ReactNode, useState } from "react"
+import { cn } from "../../../../lib/utils"
+import { Edit, Search, Trash } from "../../../composite/Icons"
+import { StatusTag } from "../../../composite/StatusTag"
+import { Button } from "../../../primitives/Button"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { Field } from "../../../primitives/Field"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+
+/**
+ * DesktopSettingsMemorySection — 设置·记忆段（A11-B2 · 裁决 16 · 原型 template.dc.html 2636–2673）
+ *
+ * 「我的空间 · 记忆」整段搬进设置二级页的第八段。这是**新件**，不是
+ * `DesktopWorkspaceMemoryView` 的改造：老件是「时间线轨 ＋ 日期标题行 ＋ 左侧刻点 ＋
+ * 弹层里编辑」的日志形制，原型这一段是「常驻搜索条 ＋ 两段分区 ＋ 一张张记忆卡 ＋
+ * 行内编辑」的清单形制，两者只有数据同源，形制没有一处能复用。老件与
+ * `DesktopWorkspaceMemoryDetailDialog` 同批标 `@deprecated`。
+ *
+ * ## 形（逐条照原型）
+ * - **搜索条**（2636–2639）：`Field` md 档＝高 32 · `--ow-radius-sm`(--ow-radius-control)
+ *   · 底 `--ow-input-bg`(=--ow-surface-2) · 1px `--ow-input-border`，prefix 槽放 16 的
+ *   放大镜（Field 的 affix 壳恒给 16 ＋ `--ow-text-3`），placeholder「搜索记忆」。
+ *   它**常驻**：不做「点图标才展开」的收纳态。
+ * - **分区头**（2642–2647）：眉标（§8 中文档 `--ow-fs-eyebrow-cjk` / `--ow-ls-eyebrow-cjk`
+ *   / 500 / `--ow-eyebrow`）＋ caption 说明（`--ow-text-3`）＋ 右端 mono「N 条」读数
+ *   （§7 读数一律 mono ＋ tabular-nums）。三者基线对齐（`items-baseline`）。
+ * - **记忆行**（原型 2649–2668 是卡；R3 · Terry 意见 5 改分隔线行）：贴边零内距、上下 12、
+ *   行间 1px `--ow-border`，槽间 12，无底无圆角（§5）。正文 `--ow-fs-ui` / 行高 1.7；下面一行
+ *   **来源徽章**（`StatusTag` mute 档：`--ow-surface-2` 底 ＋ `--ow-text-2` 字，只读不可点）
+ *   ＋ mono 时间。行末两枚 28×28 图标钮（`Button` ghost·sm·iconOnly ＝ 28 高，圆角改
+ *   `--ow-radius-xs`），删除钮 hover 落 `--ow-danger` 文字色。
+ * - **行内编辑**（2651–2656）：卡不再跳弹层，正文位就地换成 `Field` multiline（rows=2、
+ *   `--ow-radius-sm`、不可拖拽），下面「保存」primary ／「取消」secondary。
+ * - **保存失败**（R2 · L3-1-3）：`onSave` 返回的 Promise 拒绝时**留在编辑态**——草稿不收、
+ *   编辑框不关，框与动作钮之间插一条 `InlineMessage variant="error"`（role=alert，读屏立播），
+ *   主钮文案由「保存」换成「重试」。拒绝值里的 `Error.message` 折进 InlineMessage 的 detail。
+ *   在这之前 commit 只有 try/finally 没有 catch，拒绝顺着调用点的 `void commit(item)`
+ *   漏成 renderer 的 unhandled rejection，屏上只表现为「保存钮弹回可点」，一个字都没有。
+ *
+ * ## 与规格的两处有意偏差（都记在 notes 里）
+ * 1. 保存/取消原型画的是 26 高；DS 的动作梯子只有 28/32/40（§3），故取 `size="sm"`＝28。
+ * 2. 编辑态 textarea 的边原型写死 `--ow-input-border-focus`；这里交给 `Field` 的
+ *    `focus-within` 三态自己走——进编辑就 autoFocus，画面同色，但失焦时不会留一圈假焦点边。
+ *
+ * ## 一期范围
+ * 分区只有「用户画像 / 通用记忆」两段，**没有项目级段**（裁决：一期不做）。分区由
+ * `sections` 入参给，组件不内置段名，宿主 `memoryStore` 的分区照原样传进来即可。
+ *
+ * ## 荧黄记账（§4）
+ * 段内 0 处：徽章是 mute 档不占状态极，编辑态的「保存」是**卡内局部主钮**，
+ * 同屏没有第二枚主钮（设置面本身没有页头主钮），故不冲突。
+ */
+export interface DesktopSettingsMemoryItem {
+  id: string
+  /** 记忆正文（纯文本；编辑态直接进 textarea） */
+  text: string
+  /** 来源徽章文案，如「手动记住」「自动沉淀」；不传则不出徽章 */
+  sourceLabel?: string
+  /** 时间读数（mono），如「2026-08-30 14:20」 */
+  when?: string
+}
+
+export interface DesktopSettingsMemorySectionGroup {
+  id: string
+  /** 眉标，如「用户画像」「通用记忆」 */
+  title: string
+  /** 眉标右边那句 caption 说明 */
+  description?: string
+  items: DesktopSettingsMemoryItem[]
+}
+
+export interface DesktopSettingsMemorySectionProps {
+  sections: DesktopSettingsMemorySectionGroup[]
+  /** 受控搜索词；不传则组件自持（宿主只想要个能搜的清单时不必接状态） */
+  query?: string
+  onQueryChange?: (value: string) => void
+  /**
+   * 是否在组件内按 `query` 过滤。默认 true（前端全量数据直接筛）；
+   * 宿主走后端检索时传 false，`sections` 里给什么就渲什么。
+   */
+  filter?: boolean
+  /** 受控编辑态；不传则组件自持行内编辑（编辑是交互态，不是业务状态） */
+  editingId?: string | null
+  onEdit?: (item: DesktopSettingsMemoryItem) => void
+  onCancelEdit?: () => void
+  /** 保存回调；返回 Promise 时按 resolve 收编辑态 */
+  onSave?: (item: DesktopSettingsMemoryItem, text: string) => void | Promise<void>
+  onDelete?: (item: DesktopSettingsMemoryItem) => void
+  /** 一条记忆都没有时的空态副句（§6 page 档） */
+  emptyMessage?: ReactNode
+  emptyTitle?: ReactNode
+  /**
+   * `onSave` 拒绝时贴在编辑框下的那句话（R1：错误必须有字）。
+   * 拒绝值里的 `Error.message` 会自动折进 InlineMessage 的 detail，不必写进这句。
+   */
+  saveErrorMessage?: ReactNode
+  className?: string
+}
+
+const EYEBROW_CLASS = [
+  "font-medium leading-none m-0",
+  "text-[length:var(--ow-fs-eyebrow-cjk,12px)]",
+  "tracking-[var(--ow-ls-eyebrow-cjk,0.08em)]",
+  "text-[color:var(--ow-eyebrow)]",
+].join(" ")
+
+/** §7 读数：mono ＋ tabular-nums ＋ caption 档 text-3。 */
+const READOUT_CLASS = [
+  "[font-family:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]",
+  "text-[length:var(--ow-fs-caption,12px)] leading-[1.4] text-[color:var(--ow-text-3)]",
+].join(" ")
+
+/** 28×28 图标钮：ghost·sm·iconOnly 恰是 28 高 28 宽，只把圆角从 action(8) 改成原型的 xs(6)。 */
+const ICON_BUTTON_CLASS = [
+  "shrink-0 [border-radius:var(--ow-radius-xs)]",
+  /* 静息 text-2、hover 才升到 text（原型 2661/2665）：一张卡两枚、一屏十枚，
+     ghost 默认的 --ow-btn-ghost-fg(=--ow-text) 会把行末读成十个黑点。 */
+  "text-[color:var(--ow-text-2)] hover:text-[color:var(--ow-text)]",
+].join(" ")
+
+export function DesktopSettingsMemorySection({
+  sections,
+  query,
+  onQueryChange,
+  filter = true,
+  editingId,
+  onEdit,
+  onCancelEdit,
+  onSave,
+  onDelete,
+  emptyTitle = "还没有任何记忆",
+  emptyMessage = "在对话里让它记住重要信息，或由任务自动沉淀。",
+  saveErrorMessage = "没能保存这条记忆，改动还留在框里，可以直接重试。",
+  className,
+}: DesktopSettingsMemorySectionProps) {
+  const [innerQuery, setInnerQuery] = useState("")
+  const [innerEditingId, setInnerEditingId] = useState<string | null>(null)
+  /* 草稿按「属于哪一条」记：`editingId` 受控时组件收不到 startEdit，草稿要能从当前条回落，
+     否则受控进编辑态会开出一个空 textarea。 */
+  const [draftState, setDraftState] = useState<{ id: string | null; text: string }>({ id: null, text: "" })
+  const [saving, setSaving] = useState(false)
+  /* 保存失败留在编辑态：草稿不收、错误贴在编辑框与动作钮之间（R1 双编码，错误必须有字）。 */
+  const [saveError, setSaveError] = useState<{ id: string; detail?: string } | null>(null)
+
+  const q = query ?? innerQuery
+  const activeEditingId = editingId !== undefined ? editingId : innerEditingId
+  const total = sections.reduce((sum, section) => sum + section.items.length, 0)
+  const editingItem = activeEditingId
+    ? sections.flatMap((section) => section.items).find((item) => item.id === activeEditingId)
+    : undefined
+  const draft = draftState.id === activeEditingId ? draftState.text : (editingItem?.text ?? "")
+
+  const setQuery = (value: string) => {
+    if (query === undefined) setInnerQuery(value)
+    onQueryChange?.(value)
+  }
+
+  const setDraft = (value: string) => {
+    setSaveError(null)
+    setDraftState({ id: activeEditingId ?? null, text: value })
+  }
+
+  const startEdit = (item: DesktopSettingsMemoryItem) => {
+    setSaveError(null)
+    setDraftState({ id: item.id, text: item.text })
+    if (editingId === undefined) setInnerEditingId(item.id)
+    onEdit?.(item)
+  }
+
+  const cancelEdit = () => {
+    setSaveError(null)
+    setDraftState({ id: null, text: "" })
+    if (editingId === undefined) setInnerEditingId(null)
+    onCancelEdit?.()
+  }
+
+  const commit = async (item: DesktopSettingsMemoryItem) => {
+    const next = draft.trim()
+    if (!next || saving) return
+    setSaving(true)
+    setSaveError(null)
+    try {
+      await onSave?.(item, next)
+      setDraftState({ id: null, text: "" })
+      if (editingId === undefined) setInnerEditingId(null)
+    } catch (error) {
+      /* 不能让 onSave 的拒绝顺着 `void commit(item)` 漏成 unhandled rejection：
+         调用点是 void，异常外抛后屏上只表现为「保存钮弹回可点」，用户看不到任何失败信息。
+         这里就地收住，留在编辑态，草稿不丢，把技术详情折进 InlineMessage 的 detail。 */
+      const detail = error instanceof Error ? error.message : typeof error === "string" ? error : undefined
+      setSaveError({ id: item.id, detail: detail?.trim() || undefined })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  /* §6 容器空态：一条记忆都没有时整段让位给 page 档空态——搜索条没有可搜的东西，
+     留在那里只是一口空井。有记忆但搜不着，走下面的 md 档「没有匹配的记忆」。 */
+  if (total === 0) {
+    return (
+      <div data-slot="settings-memory" className={cn("flex flex-col min-w-0", className)}>
+        <EmptyState size="page" title={emptyTitle} message={emptyMessage} />
+      </div>
+    )
+  }
+
+  const needle = q.trim().toLowerCase()
+  const visible = sections
+    .map((section) => ({
+      ...section,
+      items:
+        filter && needle ? section.items.filter((item) => item.text.toLowerCase().includes(needle)) : section.items,
+    }))
+    .filter((section) => section.items.length > 0)
+
+  return (
+    <div data-slot="settings-memory" className={cn("flex flex-col gap-3.5 min-w-0", className)}>
+      <Field
+        type="search"
+        value={q}
+        onChange={setQuery}
+        placeholder="搜索记忆"
+        aria-label="搜索记忆"
+        prefix={<Search />}
+      />
+      {visible.length === 0 ? (
+        <EmptyState message="没有匹配的记忆，换个词试试。" />
+      ) : (
+        visible.map((section) => (
+          <section data-ow-part="group" key={section.id} className="flex flex-col gap-0 min-w-0">
+            <div data-ow-part="group-head" className="flex items-baseline gap-2 min-w-0 pb-1">
+              <h3 data-ow-part="group-title" className={EYEBROW_CLASS}>
+                {section.title}
+              </h3>
+              {section.description && (
+                <span
+                  data-ow-part="group-desc"
+                  className="truncate text-[length:var(--ow-fs-caption,12px)] leading-[1.4] text-[color:var(--ow-text-3)]"
+                >
+                  {section.description}
+                </span>
+              )}
+              <span className="flex-1" />
+              <span data-ow-part="group-count" className={cn("shrink-0", READOUT_CLASS)}>
+                {section.items.length} 条
+              </span>
+            </div>
+            {section.items.map((item) => {
+              const editing = item.id === activeEditingId
+              return (
+                <div
+                  key={item.id}
+                  data-ow-part="row"
+                  data-ow-state={editing ? "editing" : undefined}
+                  // R3（Terry 意见 5）：记忆条目从卡改分隔线行（贴边零内距、上下 12、行间 1px --ow-border）
+                  className="flex items-start gap-3 min-w-0 px-0 py-3 border-[color:var(--ow-border)] [[data-ow-part=row]+&]:border-t"
+                >
+                  <div className="flex-1 min-w-0 flex flex-col gap-1">
+                    {editing ? (
+                      <>
+                        <Field
+                          multiline
+                          rows={2}
+                          autoFocus
+                          value={draft}
+                          onChange={setDraft}
+                          aria-label="编辑记忆"
+                          className="[&_[data-ow-part=shell]]:[border-radius:var(--ow-radius-sm)] [&_textarea]:resize-none [&_textarea]:min-h-0 [&_textarea]:leading-[1.6]"
+                        />
+                        {saveError?.id === item.id && (
+                          <div data-ow-part="save-error">
+                            <InlineMessage variant="error" detail={saveError.detail}>
+                              {saveErrorMessage}
+                            </InlineMessage>
+                          </div>
+                        )}
+                        <div className="flex gap-2 pt-0.5">
+                          <Button
+                            variant="primary"
+                            size="sm"
+                            disabled={!draft.trim() || saving}
+                            onClick={() => void commit(item)}
+                          >
+                            {saveError?.id === item.id ? "重试" : "保存"}
+                          </Button>
+                          <Button variant="secondary" size="sm" disabled={saving} onClick={cancelEdit}>
+                            取消
+                          </Button>
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <div
+                          data-ow-part="text"
+                          className="text-ow-fs-ui leading-[1.7] text-[color:var(--ow-text)] [text-wrap:pretty]"
+                        >
+                          {item.text}
+                        </div>
+                        {(item.sourceLabel || item.when) && (
+                          <div data-ow-part="meta" className="flex items-center gap-2 min-w-0">
+                            {item.sourceLabel && <StatusTag tone="mute">{item.sourceLabel}</StatusTag>}
+                            {item.when && <span className={READOUT_CLASS}>{item.when}</span>}
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                  {!editing && (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className={ICON_BUTTON_CLASS}
+                        icon={<Edit />}
+                        title="编辑"
+                        aria-label="编辑"
+                        onClick={() => startEdit(item)}
+                      />
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className={cn(ICON_BUTTON_CLASS, "hover:text-[color:var(--ow-danger)]")}
+                        icon={<Trash />}
+                        title="删除"
+                        aria-label="删除"
+                        onClick={() => onDelete?.(item)}
+                      />
+                    </>
+                  )}
+                </div>
+              )
+            })}
+          </section>
+        ))
+      )}
+    </div>
+  )
+}

package/src/components/domain/desktop/DesktopSettingsView/DesktopSettingsView.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Switch } from "../../../composite/Controls"
+import { AlertCircle as Bell, Key, Image as Palette, Settings, Shield } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { DesktopSettingRow, DesktopSettingSelect, DesktopSettingsView } from "./index"
+
+/**
+ * DesktopSettingsView —— 设置弹窗（R2 · Terry 2026-09-03 第 3 条）。
+ *
+ * 立面归口 `composite/Dialog bare`：`--ow-scrim` 遮罩 ＋ 960×640 定尺立面
+ * （`--ow-radius-modal` 16 · 1px `--ow-border` · `--ow-shadow-modal` · z `--ow-z-modal`），
+ * `fitViewport={false}` 让开基座的 90vw/85vh/自滚，滚动只发生在右栏体内。
+ * 立面内两档地色：左栏 216 `--ow-bg`（栏底 mono 版本号）／右栏 `--ow-surface` ＋ 左沿分栏线。
+ * 行为四件（Escape / 点遮罩 / Tab 焦点圈 / 还焦）全在 Dialog 身上，件内零副本；
+ * 入场取焦落在**当前段项**（`autoFocus`），不是第一枚导航项。
+ *
+ * 这些 story 走缺省 `portal`（到 body），铺满 storybook 视口即真机形态；
+ * 要在 1440×800 画框里连底屏一起取证，看 `Screens/Settings*` 四组。
+ */
+const meta = {
+  title: "Desktop/DesktopSettingsView",
+  component: DesktopSettingsView,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof DesktopSettingsView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// 每项一枚不同图标——原来「通用」与「账户」都取 `Settings as User`，侧栏两行图标一样。
+const mockItems = [
+  { id: "general", label: "通用", icon: <Settings /> },
+  { id: "account", label: "账户", icon: <Key /> },
+  { id: "notifications", label: "通知", icon: <Bell /> },
+  { id: "privacy", label: "隐私", icon: <Shield /> },
+  { id: "appearance", label: "外观", icon: <Palette /> },
+]
+
+export const General: Story = {
+  args: {
+    items: mockItems,
+    activeId: "general",
+    // 左栏底部的 mono 版本号（与账户菜单「检查更新」行尾同源）
+    version: "v1.4.2",
+    children: (
+      <>
+        <DesktopSettingRow title="语言" description="选择界面显示语言">
+          <DesktopSettingSelect value="简体中文" />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="启动时自动运行" description="系统启动时自动打开 Orbitwork">
+          <Switch checked={true} onChange={() => {}} />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="关闭窗口时" description="选择点击关闭按钮的行为">
+          <DesktopSettingSelect value="最小化到托盘" />
+        </DesktopSettingRow>
+      </>
+    ),
+    onChange: () => {},
+    onClose: () => {},
+  },
+}
+
+export const Account: Story = {
+  args: {
+    items: mockItems,
+    activeId: "account",
+    children: (
+      <>
+        <DesktopSettingRow title="用户名">
+          <div className="text-ow-fs-ui text-[color:var(--ow-text-2)]">张三</div>
+        </DesktopSettingRow>
+        <DesktopSettingRow title="邮箱">
+          <div className="text-ow-fs-ui text-[color:var(--ow-text-2)]">zhangsan@example.com</div>
+        </DesktopSettingRow>
+        <DesktopSettingRow title="账户操作">
+          <Button size="small" variant="secondary">
+            修改密码
+          </Button>
+        </DesktopSettingRow>
+      </>
+    ),
+    onChange: () => {},
+    onClose: () => {},
+  },
+}
+
+export const Notifications: Story = {
+  args: {
+    items: mockItems,
+    activeId: "notifications",
+    children: (
+      <>
+        <DesktopSettingRow title="桌面通知" description="任务完成时显示系统通知">
+          <Switch checked={true} onChange={() => {}} />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="声音提示" description="任务完成时播放提示音">
+          <Switch checked={false} onChange={() => {}} />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="徽章显示" description="在 Dock 图标显示未读消息数">
+          <Switch checked={true} onChange={() => {}} />
+        </DesktopSettingRow>
+      </>
+    ),
+    onChange: () => {},
+    onClose: () => {},
+  },
+}
+
+export const Privacy: Story = {
+  args: {
+    items: mockItems,
+    activeId: "privacy",
+    children: (
+      <>
+        <DesktopSettingRow title="发送使用统计" description="帮助改进 Orbitwork">
+          <Switch checked={true} onChange={() => {}} />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="发送崩溃报告" description="自动发送崩溃日志">
+          <Switch checked={true} onChange={() => {}} />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="清除数据">
+          <Button size="small" variant="danger">
+            清除所有数据
+          </Button>
+        </DesktopSettingRow>
+      </>
+    ),
+    onChange: () => {},
+    onClose: () => {},
+  },
+}
+
+export const Appearance: Story = {
+  args: {
+    items: mockItems,
+    activeId: "appearance",
+    children: (
+      <>
+        <DesktopSettingRow title="主题" description="选择界面外观">
+          <DesktopSettingSelect value="跟随系统" />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="字体大小" description="调整界面文字大小">
+          <DesktopSettingSelect value="标准" />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="紧凑模式" description="使用更紧凑的界面布局">
+          <Switch checked={false} onChange={() => {}} />
+        </DesktopSettingRow>
+      </>
+    ),
+    onChange: () => {},
+    onClose: () => {},
+  },
+}
+
+/* R2：`WithBackButton` 随「返回」入口一起退役。二级页时代它靠 `.settings__back` 坐在
+   页首左侧，弹窗里没有它的位置（原型也没画），且 `onBack`/`backLabel` 全仓零真实消费方
+   ——只有这张 story 在用。props 一并从签名上删掉了。 */
+
+export const DisabledSelect: Story = {
+  args: {
+    items: mockItems,
+    activeId: "general",
+    children: (
+      <>
+        <DesktopSettingRow title="语言" description="选择界面显示语言">
+          <DesktopSettingSelect value="简体中文" />
+        </DesktopSettingRow>
+        <DesktopSettingRow title="区域" description="由系统设置决定">
+          <DesktopSettingSelect value="中国" disabled />
+        </DesktopSettingRow>
+      </>
+    ),
+    onChange: () => {},
+    onClose: () => {},
+  },
+}