@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,340 +0,0 @@
-"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

@@ -1,177 +0,0 @@
-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: () => {},
-  },
-}