@orbit-work/ui 0.1.0

package/src/components/composite/ModelSelect/index.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { useSelectedOptionLocator } from "../../../hooks/useSelectedOptionLocator"
+import { MenuSurface } from "../../primitives/Menu"
+import { SelectTrigger } from "../../primitives/Select"
+import { ModelPickerList, type ModelPickerOption } from "../ModelPickerList"
+
+export interface ModelSelectOption {
+  id: string
+  name: string
+  description?: string
+  providerName?: string
+  recommended?: boolean
+  inputModalities?: string[]
+  outputModalities?: string[]
+  multiplier?: number
+}
+
+export interface ModelSelectProps {
+  value: string | null
+  options: ModelSelectOption[]
+  onChange: (id: string | null) => void
+  placeholder?: string
+  allowClear?: boolean
+  emptyLabel?: string
+}
+
+/**
+ * Model picker — a DS 2.0 preset recipe on top of the Select base:
+ * trigger = primitives/Select 的 SelectTrigger（三态壳 32 高、圆角 8），
+ * menu = primitives/Menu 的 MenuSurface（弹层规范，portal 模式带搜索），
+ * rows = ModelPickerList / ModelModalityFlow（模型行渲染配方）。
+ */
+export function ModelSelect({
+  value,
+  options,
+  onChange,
+  placeholder = "选择模型",
+  allowClear = false,
+  emptyLabel = "暂无可用模型",
+}: ModelSelectProps) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const wrapRef = useRef<HTMLDivElement>(null)
+  // 弹层 portal 出去后不在触发器子树里，外点判断要拿到面本体的 ref（MenuSurface 的
+  // surfaceRef 槽）。原来靠 `.closest(".model-dropdown")` 用类名字符串判归属——
+  // 类名一改就静默失效（关不掉或点不进），且把样式钩子当成了行为契约。
+  const surfaceRef = useRef<HTMLDivElement>(null)
+  const selected = options.find((model) => model.id === value) ?? null
+  const disabled = options.length === 0
+  const close = () => {
+    setOpen(false)
+    setQuery("")
+  }
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as HTMLElement
+      if (wrapRef.current?.contains(target)) return
+      if (surfaceRef.current?.contains(target)) return
+      close()
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close()
+    }
+    document.addEventListener("pointerdown", onPointerDown, true)
+    document.addEventListener("keydown", onKeyDown)
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true)
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  }, [open])
+
+  const keyword = query.trim().toLowerCase()
+  const filtered = keyword
+    ? options.filter((model) => `${model.name} ${model.id}`.toLowerCase().includes(keyword))
+    : options
+  const pickerOptions: ModelPickerOption[] = [
+    ...(allowClear && (!keyword || "不设置".includes(keyword)) ? [{ id: null, name: "不设置" }] : []),
+    ...filtered.map(({ id, name, recommended, inputModalities, outputModalities, multiplier }) => ({
+      id,
+      name,
+      recommended,
+      inputModalities,
+      outputModalities,
+      multiplier,
+    })),
+  ]
+  const selectedOptionRef = useSelectedOptionLocator<HTMLSpanElement>({
+    open,
+    selectedKey: value,
+    query,
+    itemCount: pickerOptions.length,
+  })
+
+  return (
+    <div ref={wrapRef} style={{ position: "relative" }}>
+      <SelectTrigger
+        open={open}
+        size="md"
+        disabled={disabled}
+        className="min-w-[200px]"
+        onClick={() => {
+          if (!disabled) {
+            setOpen((current) => !current)
+            setQuery("")
+          }
+        }}
+      >
+        {selected ? (
+          selected.name
+        ) : disabled ? (
+          emptyLabel
+        ) : (
+          <span className="text-[color:var(--ow-placeholder)]">{placeholder}</span>
+        )}
+      </SelectTrigger>
+      {open && (
+        <MenuSurface
+          className="model-dropdown"
+          surfaceRef={surfaceRef}
+          width={288}
+          portal={wrapRef}
+          searchable={options.length > 6}
+          searchValue={query}
+          onSearchChange={setQuery}
+          searchPlaceholder="搜索模型"
+          contentKey={pickerOptions.length}
+        >
+          <ModelPickerList
+            options={pickerOptions}
+            value={value}
+            selectedOptionRef={selectedOptionRef}
+            onSelect={(id) => {
+              onChange(id)
+              close()
+            }}
+            // W2 §6 / G5：搜不到时不再手搓一行灰字，交给 ModelPickerList 的缺省空态
+            //（primitives/EmptyState 紧凑档：信标母题 ＋ 一句 text-2）。
+            emptyMessage="暂无匹配的模型"
+          />
+        </MenuSurface>
+      )}
+    </div>
+  )
+}

package/src/components/composite/ModelsSettingsSectionView/ModelsSettingsSectionView.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ModelSelectOption } from "../ModelSelect"
+import { ModelsSettingsSectionView } from "./index"
+
+const meta = {
+  title: "Composite/ModelsSettingsSectionView",
+  component: ModelsSettingsSectionView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ModelsSettingsSectionView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/* W3 验收修：fixture 原为 V1 旧形状 {value,label,sub}，与现行 ModelSelectOption
+   {id,name,description} 对不上——三个下拉在 Storybook 里全渲染成空行/空名。 */
+const defaultModelOptions: ModelSelectOption[] = [
+  { id: "claude-sonnet", name: "Claude Sonnet", description: "平衡性能与成本" },
+  { id: "claude-opus", name: "Claude Opus", description: "最强推理能力" },
+  { id: "claude-haiku", name: "Claude Haiku", description: "快速响应" },
+]
+
+const imageModelOptions: ModelSelectOption[] = [
+  { id: "dall-e-3", name: "DALL-E 3", description: "OpenAI 图像生成" },
+  { id: "midjourney", name: "Midjourney", description: "艺术风格生成" },
+]
+
+const visionModelOptions: ModelSelectOption[] = [
+  { id: "claude-opus", name: "Claude Opus", description: "视觉理解" },
+  { id: "gpt-4-vision", name: "GPT-4 Vision", description: "多模态理解" },
+]
+
+export const Available: Story = {
+  args: {
+    available: true,
+    defaultModel: "claude-sonnet",
+    defaultModelOptions,
+    onDefaultModelChange: (value) => console.log("default model", value),
+    imageModel: "dall-e-3",
+    imageModelOptions,
+    onImageModelChange: (value) => console.log("image model", value),
+    visionModel: "claude-opus",
+    visionModelOptions,
+    onVisionModelChange: (value) => console.log("vision model", value),
+  },
+}
+
+/**
+ * 带思考强度（R2 · 找茬 L1-1-7 · 原型模板 L2517–2530）：三条模型槽之后的第四张卡，
+ * 右端一枚三格分段器 标准 / 深度思考 / 极限思考。不传 `onEffortChange` 就不出这一行，
+ * 所以宿主一期没接数据时段内画面与从前一致。
+ */
+export const WithThinkingEffort: Story = {
+  args: {
+    available: true,
+    defaultModel: "claude-sonnet",
+    defaultModelOptions,
+    onDefaultModelChange: (value) => console.log("default model", value),
+    imageModel: "dall-e-3",
+    imageModelOptions,
+    onImageModelChange: (value) => console.log("image model", value),
+    visionModel: "claude-opus",
+    visionModelOptions,
+    onVisionModelChange: (value) => console.log("vision model", value),
+    effort: "deep",
+    onEffortChange: (value) => console.log("effort", value),
+  },
+}
+
+export const NoImageModel: Story = {
+  args: {
+    available: true,
+    defaultModel: "claude-sonnet",
+    defaultModelOptions,
+    onDefaultModelChange: (value) => console.log("default model", value),
+    imageModel: undefined,
+    imageModelOptions,
+    onImageModelChange: (value) => console.log("image model", value),
+    visionModel: "claude-opus",
+    visionModelOptions,
+    onVisionModelChange: (value) => console.log("vision model", value),
+  },
+}
+
+export const NoVisionModel: Story = {
+  args: {
+    available: true,
+    defaultModel: "claude-sonnet",
+    defaultModelOptions,
+    onDefaultModelChange: (value) => console.log("default model", value),
+    imageModel: "dall-e-3",
+    imageModelOptions,
+    onImageModelChange: (value) => console.log("image model", value),
+    visionModel: undefined,
+    visionModelOptions,
+    onVisionModelChange: (value) => console.log("vision model", value),
+  },
+}
+
+export const LoadingState: Story = {
+  args: {
+    available: false,
+    unavailableReason: "正在加载模型列表…",
+    defaultModel: undefined,
+    defaultModelOptions: [],
+    onDefaultModelChange: () => {},
+    imageModel: undefined,
+    imageModelOptions: [],
+    onImageModelChange: () => {},
+    visionModel: undefined,
+    visionModelOptions: [],
+    onVisionModelChange: () => {},
+  },
+}
+
+export const Unavailable: Story = {
+  args: {
+    available: false,
+    unavailableReason: "当前套餐不含模型权益，请先开通套餐",
+    defaultModel: undefined,
+    defaultModelOptions: [],
+    onDefaultModelChange: () => {},
+    imageModel: undefined,
+    imageModelOptions: [],
+    onImageModelChange: () => {},
+    visionModel: undefined,
+    visionModelOptions: [],
+    onVisionModelChange: () => {},
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    available: false,
+    loadFailed: true,
+    loadError: "无法连接到模型服务",
+    retrying: false,
+    onRetry: () => console.log("retry"),
+    defaultModel: undefined,
+    defaultModelOptions: [],
+    onDefaultModelChange: () => {},
+    imageModel: undefined,
+    imageModelOptions: [],
+    onImageModelChange: () => {},
+    visionModel: undefined,
+    visionModelOptions: [],
+    onVisionModelChange: () => {},
+  },
+}
+
+export const ErrorStateRetrying: Story = {
+  args: {
+    available: false,
+    loadFailed: true,
+    loadError: "网络连接超时",
+    retrying: true,
+    onRetry: () => console.log("retry"),
+    defaultModel: undefined,
+    defaultModelOptions: [],
+    onDefaultModelChange: () => {},
+    imageModel: undefined,
+    imageModelOptions: [],
+    onImageModelChange: () => {},
+    visionModel: undefined,
+    visionModelOptions: [],
+    onVisionModelChange: () => {},
+  },
+}

package/src/components/composite/ModelsSettingsSectionView/index.tsx

@@ -0,0 +1,139 @@
+/*
+ * W5 终扫（§7 行高）：三处 ListRow 原来挂 `px-0 py-3.5 gap-4` —— py-3.5=14px 上下内距
+ * 把 40 档行撑到 ~64px，脱出 ListRow 的 40/32 两档。上下内距与槽间距一律交还
+ * ListRow 自带档位（`density`），这里只保留 px-0（设置屏的行与 Section 标题左对齐，
+ * 属水平贴边，不动高度表）。要更松就加 density 档，不在调用点覆写内距。
+ *
+ * R3（Terry 意见 5）作废 A2-B2「一条设置＝一张卡」：三行回到 `.set-row` 分隔线行
+ * （1px --ow-border ＋ radius-lg ＋ --ow-surface ＋ 内距 13/16），顶边分隔线随之关掉；
+ * 14 的卡间距由外面这一层 `gap-3.5` 给（`Section` 的内容槽本身不带 gap，
+ * 设置面外层 `.settings__col` 的 gap 只管它的直接子节点）。
+ */
+import { EmptyState } from "../../primitives/EmptyState"
+import { SegmentedControl } from "../../primitives/SegmentedControl"
+import { ListRow } from "../ListRow"
+import { ModelCatalogErrorState } from "../ModelCatalogErrorState"
+import { ModelSelect, type ModelSelectOption } from "../ModelSelect"
+import { Section } from "../Section"
+
+/** 思考强度三档（原型模板 L3084 `EFFORTS`）。 */
+export type ModelThinkingEffort = "standard" | "deep" | "max"
+
+const EFFORTS: Array<{ value: ModelThinkingEffort; label: string }> = [
+  { value: "standard", label: "标准" },
+  { value: "deep", label: "深度思考" },
+  { value: "max", label: "极限思考" },
+]
+
+export interface ModelsSettingsSectionViewProps {
+  available: boolean
+  unavailableReason: string
+  defaultModel: string | null
+  imageModel: string | null
+  visionModel: string | null
+  defaultModelOptions: ModelSelectOption[]
+  imageModelOptions: ModelSelectOption[]
+  visionModelOptions: ModelSelectOption[]
+  loadFailed?: boolean
+  loadError?: string | null
+  retrying?: boolean
+  onRetry?: () => void
+  /**
+   * 思考强度（R2 · 找茬 L1-1-7 · 原型模板 L2517–2530 的独立卡）。
+   * 不传 `onEffortChange` 就不出这一行——宿主一期没接数据时段内画面与从前一致。
+   */
+  effort?: ModelThinkingEffort
+  onEffortChange?: (effort: ModelThinkingEffort) => void
+  onDefaultModelChange: (id: string) => void
+  onImageModelChange: (id: string | null) => void
+  onVisionModelChange: (id: string | null) => void
+}
+
+export function ModelsSettingsSectionView(props: ModelsSettingsSectionViewProps) {
+  // §6 错误制式先判：目录**取不回来**与「没有模型权益」是两件事，错误分支原来嵌在
+  // `!available` 里，于是 available=true 的失败态整屏无一句错误文案、无重试钮，
+  // §6 在这条路径上零渲染。加载失败与权益无关，提到最外层单独判。
+  if (props.loadFailed && props.onRetry) {
+    return <ModelCatalogErrorState message={props.loadError} retrying={props.retrying} onRetry={props.onRetry} />
+  }
+  if (!props.available) {
+    // §6 容器空态：信标 mono 母题 ＋ 一句 text-2（禁插画禁 emoji），不再自绘一行假列表
+    return (
+      <Section title="默认模型" titleTier="eyebrow" divider={false}>
+        <EmptyState message={`暂无可用模型权益。${props.unavailableReason}`} />
+      </Section>
+    )
+  }
+  return (
+    // R2 找茬 L1-1-8：组标题走眉标档（设置弹窗右栏头已经是一枚 24 段标题，
+    // 紧挨着再来一枚 14/600 就是双标题）；文案照原型 L2503 改「默认模型」。
+    <Section title="默认模型" titleTier="eyebrow" divider={false}>
+      <div className="flex flex-col gap-0">
+        <ListRow
+          title="默认模型"
+          description="日常对话与任务使用的模型"
+          className="set-row"
+          action={
+            <ModelSelect
+              value={props.defaultModel}
+              options={props.defaultModelOptions}
+              onChange={(id) => {
+                if (id) props.onDefaultModelChange(id)
+              }}
+            />
+          }
+        />
+        <ListRow
+          title="图片模型"
+          description="图像生成与编辑使用的模型"
+          className="set-row"
+          action={
+            <ModelSelect
+              value={props.imageModel}
+              options={props.imageModelOptions}
+              onChange={props.onImageModelChange}
+              allowClear
+              placeholder="选择图片模型"
+              emptyLabel="暂无可用的图片模型"
+            />
+          }
+        />
+        <ListRow
+          title="视觉模型"
+          description="图片内容理解使用的模型"
+          className="set-row"
+          action={
+            <ModelSelect
+              value={props.visionModel}
+              options={props.visionModelOptions}
+              onChange={props.onVisionModelChange}
+              allowClear
+              placeholder="选择视觉模型"
+              emptyLabel="暂无可用的视觉模型"
+            />
+          }
+        />
+        {/* R2 找茬 L1-1-7：原型（模板 L2517–2530）在三条模型槽之后还有独立一张卡
+            ——左「思考强度 / 影响推理链长度与耗时」，右一枚三格分段器（EFFORTS L3084）。
+            §6 选中态走无彩极色（设置面内选中底由 desktop-surfaces.css 指到 --ow-current-bg），
+            不用 primary。宿主取数写进交接单。 */}
+        {props.onEffortChange && (
+          <ListRow
+            title="思考强度"
+            description="影响推理链长度与耗时"
+            className="set-row"
+            action={
+              <SegmentedControl
+                size="sm"
+                options={EFFORTS}
+                value={props.effort ?? "standard"}
+                onChange={(value) => props.onEffortChange?.(value as ModelThinkingEffort)}
+                aria-label="思考强度"
+              />
+            }
+          />
+        )}
+      </div>
+    </Section>
+  )
+}