@dsh-plus/llm-pi 0.1.12 → 0.1.13

package/lib/client.js

@@ -6,6 +6,25 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react = require("react");
+		//#region ../shared/src/client/icons.tsx
+		/** 官方 IconChevronDownOutline14 的同构实现（path 数据逐字一致）。 */
+		function ChevronDownIcon(props) {
+			const size = props.size ?? 14;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				className: props.className,
+				viewBox: "0 0 14 14",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z",
+					fill: "currentColor"
+				})
+			});
+		}
+		//#endregion
 		//#region ../shared/src/client/card.tsx
 		const IDLE_STATUS = {
 			kind: "idle",
@@ -41,10 +60,7 @@ window.__ModuleLoader__.load({
 							className: `${p}-pending`,
 							children: props.dirtyLabel
 						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `${p}-chevron${props.open ? ` ${p}-chevronOpen` : ""}`,
-							children: "▾"
-						})
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `${p}-chevron${props.open ? ` ${p}-chevronOpen` : ""}` })
 					]
 				}), props.open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: `${p}-body`,
@@ -110,6 +126,11 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/**
+		* 勾选行：自绘圆角扁平开关（switch），对齐官方 WebUI 无原生 checkbox 的
+		* 设计语言（官方选择类控件全走胶囊/菜单，见 cardCss 的 -switch 规则）。
+		* 语义保持 checkbox（无障碍树与表单语义不变），视觉自绘。
+		*/
 		function CheckRow(props) {
 			const p = props.prefix ?? "dshp";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -117,6 +138,8 @@ window.__ModuleLoader__.load({
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					id: props.id,
 					type: "checkbox",
+					role: "switch",
+					"aria-checked": props.checked,
 					checked: props.checked,
 					disabled: props.disabled === true,
 					onChange: (event) => props.onEdit(event.target.checked)
@@ -265,7 +288,7 @@ window.__ModuleLoader__.load({
 .${prefix}-headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
 .${prefix}-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
 .${prefix}-description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.${prefix}-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;font-size:12px}
+.${prefix}-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s;display:inline-flex}
 .${prefix}-chevronOpen{transform:rotate(180deg)}
 .${prefix}-pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
 .${prefix}-statusBadge{white-space:nowrap;border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
@@ -279,16 +302,24 @@ window.__ModuleLoader__.load({
 .${prefix}-badge{white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
 .${prefix}-badgeSet{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary)}
 .${prefix}-badgeUnset{color:var(--dsw-alias-label-tertiary)}
-.${prefix}-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px}
+.${prefix}-input{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;transition:border-color .18s,background .18s}
+.${prefix}-input:hover:not(:disabled):not(:focus-visible){border-color:var(--dsw-alias-label-dimmed)}
 .${prefix}-input:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
 .${prefix}-input:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
 .${prefix}-inputInvalid{border-color:var(--dsw-alias-label-error)}
-.${prefix}-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-tertiary) 50%),linear-gradient(135deg,var(--dsw-alias-label-tertiary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
+.${prefix}-select{appearance:none;background:var(--dsw-alias-bg-module-platform);border:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;height:34px;box-sizing:border-box;border-radius:8px;padding:0 30px 0 12px;transition:background-color .18s}
+.${prefix}-select:hover:not(:disabled){background-color:var(--dsw-alias-interactive-bg-hover)}
 .${prefix}-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
 .${prefix}-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}
-.${prefix}-checkRow{align-items:center;gap:8px;display:flex;padding:6px 0}
-.${prefix}-checkRow input{accent-color:var(--dsw-alias-brand-primary)}
-.${prefix}-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer}
+.${prefix}-checkRow{align-items:center;gap:10px;display:flex;padding:6px 0}
+.${prefix}-checkRow label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;cursor:pointer;flex:1;min-width:0}
+/* 自绘圆角扁平开关（官方 UI 无可见原生 checkbox，选择类全走胶囊/菜单） */
+.${prefix}-checkRow input{appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;background:var(--dsw-alias-bg-module-platform);border:none;border-radius:999px;width:34px;height:20px;flex:none;cursor:pointer;transition:background .18s;margin:0}
+.${prefix}-checkRow input::after{content:"";position:absolute;top:2px;left:2px;background:var(--dsw-alias-label-primary);border-radius:999px;width:16px;height:16px;transition:left .18s cubic-bezier(.4,0,.2,1)}
+.${prefix}-checkRow input:checked{background:var(--dsw-alias-brand-primary)}
+.${prefix}-checkRow input:checked::after{left:16px;background:var(--dsw-alias-bg-base)}
+.${prefix}-checkRow input:disabled{opacity:.4;cursor:default}
+.${prefix}-checkRow input:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .${prefix}-groupLabel{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;padding:12px 0 2px;margin:0}
 .${prefix}-readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}
 .${prefix}-warn{color:var(--dsw-alias-label-error);margin:12px 0 0;font-size:12px;line-height:1.5}
@@ -306,7 +337,6 @@ window.__ModuleLoader__.load({
 .${prefix}-header{padding:12px 12px}
 .${prefix}-input,.${prefix}-select{font-size:16px;height:40px}
 .${prefix}-checkRow{min-height:44px;padding:8px 0}
-.${prefix}-checkRow input{width:18px;height:18px;flex:none}
 .${prefix}-footer{position:sticky;bottom:0;background:var(--dsw-alias-bg-layer-2);margin:0 -10px;padding:10px 10px 6px;border-top:1px solid var(--dsw-alias-border-l2);border-bottom-left-radius:12px;border-bottom-right-radius:12px}
 .${prefix}-status{flex-basis:100%;flex:none}
 .${prefix}-btn{min-height:44px;flex:1;min-width:96px}
@@ -663,10 +693,7 @@ ${extra}
 					id: props.id,
 					"aria-expanded": open,
 					onClick: () => setOpen(!open),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}`,
-						children: "▾"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "lpc-collapseTitle",
 						children: props.title
 					})]
@@ -1612,10 +1639,7 @@ ${extra}
 						"aria-expanded": open,
 						onClick: () => setOpen(!open),
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}`,
-								children: "▾"
-							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, { className: `lpc-chevron${open ? " lpc-chevronOpen" : ""}` }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "lpc-routeKey",
 								children: route
@@ -2136,7 +2160,7 @@ ${extra}
 		const PLUGIN_ID = "@dsh-plus/llm-pi";
 		const cardCssAll = cardCss("lpc", `
 .lpc-input{width:100%;box-sizing:border-box}
-.lpc-select{appearance:none}
+.lpc-select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
 .lpc-textarea{height:auto;min-height:72px;padding:8px 12px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
 .lpc-checkRow{padding:3px 0}
 .lpc-statusRow{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px;line-height:1.6;word-break:break-all}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/llm-pi",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "dsh-plus service+ui plugin: 基于 PiAiAdapter 的自定义 LLM 路由（全量 compat、模型继承、models.dev 目录兜底）",
   "type": "module",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "https-proxy-agent": "^7.0.6",
-    "@dsh-plus/shared": "0.1.3"
+    "@dsh-plus/shared": "0.1.5"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",

package/src/client/fields.tsx

@@ -4,6 +4,8 @@
  * 本文件的 SelectField 是 llm-pi 的窄变体（readonly string[] 选项 + 未设置项）。
  * @module llm-pi/client/fields
  */
+
+import { ChevronDownIcon } from '@dsh-plus/shared/client'
 import { type ReactElement, useEffect, useState } from 'react'
 
 import type { HeaderPair } from './draft.ts'
@@ -32,7 +34,7 @@ export function CollapseSection(props: CollapseSectionProps): ReactElement {
         aria-expanded={open}
         onClick={() => setOpen(!open)}
       >
-        <span className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`}>▾</span>
+        <ChevronDownIcon className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`} />
         <span className="lpc-collapseTitle">{props.title}</span>
       </button>
       {open ? <div className="lpc-collapseBody">{props.children}</div> : null}

package/src/client/styles.ts

@@ -12,7 +12,7 @@ export const PLUGIN_ID = '@dsh-plus/llm-pi'
 
 const extraCss = `
 .lpc-input{width:100%;box-sizing:border-box}
-.lpc-select{appearance:none}
+.lpc-select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-secondary) 50%),linear-gradient(135deg,var(--dsw-alias-label-secondary) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
 .lpc-textarea{height:auto;min-height:72px;padding:8px 12px;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;resize:vertical}
 .lpc-checkRow{padding:3px 0}
 .lpc-statusRow{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px;line-height:1.6;word-break:break-all}

package/src/client/views/providers.tsx

@@ -4,6 +4,8 @@
  * 支持新增 route（输入键名）与删除 route。
  * @module llm-pi/client/views/providers
  */
+
+import { ChevronDownIcon } from '@dsh-plus/shared/client'
 import { type ReactElement, useState } from 'react'
 
 import type { ProviderDraft } from '../draft.ts'
@@ -111,7 +113,7 @@ export function ProviderSection(props: ProviderSectionProps): ReactElement {
           aria-expanded={open}
           onClick={() => setOpen(!open)}
         >
-          <span className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`}>▾</span>
+          <ChevronDownIcon className={`lpc-chevron${open ? ' lpc-chevronOpen' : ''}`} />
           <span className="lpc-routeKey">{route}</span>
           {summary !== '' ? <span className="lpc-routeApi">{summary}</span> : null}
         </button>