feat(settings): use a three-line model reorder handle

apps/web/tests/expected/models-settings/reordered.expected.md

@@ -1,72 +0,0 @@
-- dialog "设置":
-  - text: 设置
-  - navigation:
-    - button "通用设置"
-    - button "模型"
-    - button "内置插件"
-    - button "Agent 预设"
-  - button "打开配置文件"
-  - button "关闭"
-  - heading "模型" [level=2]
-  - paragraph: 填入各提供商的 API 密钥即可使用其模型。
-  - list:
-    - listitem:
-      - text: minimax-cn
-      - img "API 密钥已配置"
-      - button "编辑 minimax-cn": 编辑
-      - button "删除 minimax-cn": 删除
-    - listitem:
-      - text: Acme 网关 自定义
-      - button "编辑 Acme 网关 (acme-gateway)": 编辑
-      - button "删除 Acme 网关 (acme-gateway)": 删除
-      - text: Acme 网关 acme-gateway API 密钥
-      - textbox "API 密钥":
-        - /placeholder: 输入 API 密钥
-      - group:
-        - text: 自定义设置 显示名称
-        - textbox "显示名称":
-          - /placeholder: acme-gateway
-          - text: Acme 网关
-        - text: API 地址
-        - textbox "API 地址":
-          - /placeholder: https://gateway.acme.example/v1
-          - text: https://gateway.acme.example/v1
-        - text: API 协议
-        - combobox "API 协议":
-          - option "OpenAI Chat Completions"
-          - option "OpenAI Responses"
-          - option "Anthropic Messages" [selected]
-        - region "模型目录":
-          - text: 模型目录 已自定义模型目录
-          - button "恢复默认模型"
-          - button "获取可用模型"
-          - button "调整模型顺序 1"
-          - textbox "模型 ID 1":
-            - /placeholder: 模型 ID
-            - text: order-second
-          - textbox "显示名称 1":
-            - /placeholder: 显示名称
-            - text: order-second
-          - button "模型选项 1"
-          - button "删除模型 1"
-          - button "调整模型顺序 2"
-          - textbox "模型 ID 2":
-            - /placeholder: 模型 ID
-            - text: order-third
-          - textbox "显示名称 2":
-            - /placeholder: 显示名称
-            - text: order-third
-          - button "模型选项 2"
-          - button "删除模型 2"
-          - button "调整模型顺序 3"
-          - textbox "模型 ID 3":
-            - /placeholder: 模型 ID
-            - text: acme-large
-          - textbox "显示名称 3":
-            - /placeholder: 显示名称
-          - button "模型选项 3"
-          - button "删除模型 3"
-          - button "添加模型"
-      - button "取消"
-      - button "保存"
-  - button "添加模型提供商"

apps/web/tests/models-settings.e2e.ts

@@ -586,9 +586,9 @@ describe('web e2e: Models settings page configures a dormant provider', () => {
     } })
     await edit.click()
     await dialog.getByText('自定义设置').click()
-    expect(await dialog.getByLabel('模型 ID 1', { exact: true }).inputValue()).toBe('order-second')
-    await compareOrRefreshGolden(join(SNAPSHOT_DIR, 'reordered.expected.md'),
-      await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd), MODE)
+    expect(await Promise.all([1, 2, 3].map(position =>
+      dialog.getByLabel(`模型 ID ${String(position)}`, { exact: true }).inputValue(),
+    ))).toEqual(['order-second', 'order-third', 'acme-large'])
     const viewport = page.viewportSize()
     if (viewport === null) throw new Error('Model ordering checks require an explicit viewport')
     try {
@@ -645,7 +645,7 @@ describe('web e2e: Models settings page configures a dormant provider', () => {
       'configured.expected.md', 'declared-edit.expected.md', 'declared.expected.md',
       'delete.expected.md', 'empty.expected.md', 'model-picker.expected.md',
       'native-delete.expected.md', 'native-keyless.expected.md', 'catalog-inputs.expected.md',
-      'refreshing.expected.md', 'image-only.expected.md', 'reordered.expected.md',
+      'refreshing.expected.md', 'image-only.expected.md',
     ])
   })
 })

packages/client/ui-primitives/README.i18n.yaml

@@ -18,8 +18,8 @@
   en: d2f5701274be5110
   zh: d60e2617136a6f26
 /deepseek-ai-dsh-client-ui-primitives/use-this-package/component-catalog:
-  en: cb874a0ca53a6747
-  zh: 31179193dd1d6e12
+  en: a3d646d5179348aa
+  zh: 592a0abe6788541f
 /deepseek-ai-dsh-client-ui-primitives/use-this-package/controls-and-icons:
   en: fff68b60f4abdc7e
   zh: 5cf5952ec78f7f91

packages/client/ui-primitives/README.md

@@ -70,7 +70,7 @@ Check this table before writing a control in a feature package. A plugin cannot
 | `UserTextRun`, `ReferenceChip` | Uninterpreted inline text and business-resolved reference labels or activation buttons. |
 | `CommandText` | Selectable command or argument text; only horizontal overflow adds a named keyboard focus target. |
 | `TerminalBlock`, `ReadBlock`, `DiffBlock`, `SearchBlock`, `WebBlock` | The agent-output card matching each tool-result intent. |
-| `icons/*`, `FishLogo`, `BrandWordmark`, `ReferenceIconRegular`/`ReferenceIconMedium`, `LinkIconRegular`/`LinkIconMedium` | Glyphs and brand marks. The thinking glyph keeps an inset orbit within its 16px view box. `IconAppsAddOutlineRegular`/`Medium`, the More launcher glyph, take `compact` to draw their tiles closer together at card size. Use `LinkIconMedium` for 14px clickable-link categories and known-site marks. |
+| `icons/*`, `FishLogo`, `BrandWordmark`, `ReferenceIconRegular`/`ReferenceIconMedium`, `LinkIconRegular`/`LinkIconMedium` | Glyphs and brand marks. `IconDragHandleOutlineRegular`/`Medium` draw a three-line grip for reordering. The thinking glyph keeps an inset orbit within its 16px view box. `IconAppsAddOutlineRegular`/`Medium`, the More launcher glyph, take `compact` to draw their tiles closer together at card size. Use `LinkIconMedium` for 14px clickable-link categories and known-site marks. |
 | `PermissionIconReadOnlyRegular`/`Medium`, `PermissionIconWorkspaceWriteRegular`/`Medium`, `PermissionIconFullAccessRegular`/`Medium`, `PermissionIconAutoReviewRegular`/`Medium` | Permission-mode glyphs for read-only, workspace-write, full-access, and auto-review choices. |
 | `PluginArtworkTerminal`/`Loop`/`Subagent`/`Search`/`Default` | Fixed-palette 36×36 plugin artwork; `Terminal` supplies the light-blue prompt in plugin cards and sidebar guide entries. `Default` marks plugins without artwork of their own. Def ids are per-instance, so the same artwork repeats safely on one page. |
 | `GuideArtworkBrowser`/`Files` | Fixed-palette 36×36 browser and folder artwork for sidebar guide entries. |

packages/client/ui-primitives/README.zh.md

@@ -70,7 +70,7 @@ kind: "package-library"
 | `UserTextRun`、`ReferenceChip` | 不做解析的行内文本，以及业务已解析的引用标签或激活按钮。 |
 | `CommandText` | 可选中的命令或参数文本；仅横向溢出时添加具名的键盘聚焦目标。 |
 | `TerminalBlock`、`ReadBlock`、`DiffBlock`、`SearchBlock`、`WebBlock` | 与各类工具结果意图对应的 agent 输出卡片。 |
-| `icons/*`、`FishLogo`、`BrandWordmark`、`ReferenceIconRegular`/`ReferenceIconMedium`、`LinkIconRegular`/`LinkIconMedium` | 字形与品牌标识。思考图标的轨道在 16px 视口内保留内边距。“更多”入口使用的 `IconAppsAddOutlineRegular`/`Medium` 接受 `compact`，在卡片尺寸下让方块更靠近。`LinkIconMedium` 用于 14px 的可点击链接分类及已知站点标记。 |
+| `icons/*`、`FishLogo`、`BrandWordmark`、`ReferenceIconRegular`/`ReferenceIconMedium`、`LinkIconRegular`/`LinkIconMedium` | 字形与品牌标识。`IconDragHandleOutlineRegular`/`Medium` 以三条横线表示可拖动的排序手柄。思考图标的轨道在 16px 视口内保留内边距。“更多”入口使用的 `IconAppsAddOutlineRegular`/`Medium` 接受 `compact`，在卡片尺寸下让方块更靠近。`LinkIconMedium` 用于 14px 的可点击链接分类及已知站点标记。 |
 | `PermissionIconReadOnlyRegular`/`Medium`、`PermissionIconWorkspaceWriteRegular`/`Medium`、`PermissionIconFullAccessRegular`/`Medium`、`PermissionIconAutoReviewRegular`/`Medium` | 只读、工作区写入、完全访问与自动审查选项使用的权限模式图形。 |
 | `PluginArtworkTerminal`/`Loop`/`Subagent`/`Search`/`Default` | 固定配色的 36×36 插件插画；`Terminal` 为插件卡片和侧边栏开始页入口提供浅蓝色提示符。`Default` 用于没有自有插画的插件。def id 按实例生成，同一插画可在一页中安全重复。 |
 | `GuideArtworkBrowser`/`Files` | 固定配色的 36×36 浏览器与文件夹插画，用于侧栏引导入口。 |

packages/client/ui-primitives/src/icons/index.tsx

@@ -1571,6 +1571,23 @@ export const IconChevronsUpDownOutlineMedium = (props: IconProps) => (
   <IconChevronsUpDownOutlineArtwork {...props} strokeWidth={ICON_MEDIUM_STROKE} />
 )
 
+const IconDragHandleOutlineArtwork = ({ size = 16, className, strokeWidth }: WeightedIconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" strokeLinecap="round" aria-hidden="true" strokeWidth={strokeWidth}>
+    <path d="M4 5h8M4 8h8M4 11h8" />
+  </svg>
+)
+
+/** Regular one-pixel IconDragHandleOutline artwork. */
+export const IconDragHandleOutlineRegular = (props: IconProps) => (
+  <IconDragHandleOutlineArtwork {...props} strokeWidth={ICON_REGULAR_STROKE} />
+)
+
+/** Medium IconDragHandleOutline artwork with a 1.3px stroke. */
+export const IconDragHandleOutlineMedium = (props: IconProps) => (
+  <IconDragHandleOutlineArtwork {...props} strokeWidth={ICON_MEDIUM_STROKE} />
+)
+
 const IconArchiveOffOutlineArtwork = ({ size = 16, className, strokeWidth }: WeightedIconProps) => {
   // The mask carves whitespace along the slash out of the box strokes, so the
   // id must stay unique per rendered instance.

packages/client/ui-primitives/tests/icons.client.spec.tsx

@@ -17,8 +17,8 @@ const icons = Object.fromEntries(
 const iconNames = Object.keys(icons)
 
 describe('product icon set', () => {
-  it('exports regular and medium variants for all 95 public glyphs', () => {
-    expect(iconNames.length).toBe(190)
+  it('exports regular and medium variants for all 96 public glyphs', () => {
+    expect(iconNames.length).toBe(192)
     expect(iconNames.some(name => /\d+$/.test(name))).toBe(false)
     const regular = iconNames.filter(name => name.endsWith('Regular')).map(name => name.slice(0, -'Regular'.length))
     const medium = iconNames.filter(name => name.endsWith('Medium')).map(name => name.slice(0, -'Medium'.length))

packages/client/ui-settings-models/src/client/ModelRow.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import {
-  IconChevronDownOutlineRegular, IconChevronRightOutlineRegular, IconChevronsUpDownOutlineRegular,
+  IconChevronDownOutlineRegular, IconChevronRightOutlineRegular, IconDragHandleOutlineRegular,
   IconTrashOutlineRegular, Tooltip,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { DeepSeekModelDraft } from './DeepSeekModelsEditor.tsx'
@@ -89,7 +89,7 @@ export function ModelRow(props: ModelRowProps): ReactNode {
               props.order.onMove(event.key === 'ArrowUp' ? -1 : 1)
             }}
           >
-            <IconChevronsUpDownOutlineRegular size={14} />
+            <IconDragHandleOutlineRegular size={14} />
           </button>
         </Tooltip>
         {(['id', 'name'] as const).map(field => (

packages/client/ui-settings-models/tests/model-order.client.spec.tsx

@@ -42,7 +42,7 @@ function row(button: HTMLButtonElement): HTMLElement {
 }
 
 function transfer() {
-  return { setData: vi.fn(), setDragImage: vi.fn(), effectAllowed: '', dropEffect: '' }
+  return { setData: vi.fn(), effectAllowed: '', dropEffect: '' }
 }
 
 describe.each(['deepseek', 'pi-ai'] as const)('%s model ordering', (family) => {