@wszhoho/dsh-file-attachment 0.5.4 → 0.5.6

package/lib/client.js

@@ -1197,18 +1197,18 @@ window.__ModuleLoader__.load({
 				react.createElement(FaExtGroup, { title: t('doc.title'), list: doc, setList: setDoc, input: docIn, setInput: setDocIn }),
 				react.createElement(FaExtGroup, { title: t('code.title'), list: code, setList: setCode, input: codeIn, setInput: setCodeIn }),
 				react.createElement(FaExtGroup, { title: t('config.title'), list: config, setList: setConfig, input: cfgIn, setInput: setCfgIn }),
-				react.createElement('div', { style: { margin: '16px 0', padding: '12px', borderRadius: '8px', background: 'rgba(128,128,128,0.08)', border: '1px solid rgba(128,128,128,0.15)' } },
-					react.createElement('div', { style: { marginBottom: '8px', fontSize: '13px', fontWeight: '600' } }, t('vlm.title')),
-					react.createElement('div', { style: { marginBottom: '10px', fontSize: '12px', color: 'rgba(128,128,128,0.9)' } }, t('vlm.hint')),
+				react.createElement('div', { style: { margin: '16px 0', padding: '12px', borderRadius: '8px', background: 'var(--dsw-alias-bg-layer-2, rgba(128,128,128,0.08))', border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))' } },
+					react.createElement('div', { style: { marginBottom: '8px', fontSize: '13px', fontWeight: '600', color: 'var(--dsw-alias-label-primary, inherit)' } }, t('vlm.title')),
+					react.createElement('div', { style: { marginBottom: '10px', fontSize: '12px', color: 'var(--dsw-alias-label-tertiary, rgba(128,128,128,0.9))' } }, t('vlm.hint')),
 					react.createElement('div', { style: { display: 'grid', gridTemplateColumns: '110px 1fr', gap: '8px 10px', alignItems: 'center' } },
 						react.createElement('span', { style: { fontSize: '12px' } }, t('vlm.baseURL')),
-						react.createElement('input', { value: vlmBaseURL, onChange: (e) => setVlmBaseURL(e.target.value), placeholder: 'https://api.xiaomimimo.com/v1', style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid rgba(128,128,128,0.3)', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
+						react.createElement('input', { value: vlmBaseURL, onChange: (e) => setVlmBaseURL(e.target.value), placeholder: 'https://api.xiaomimimo.com/v1', style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
 						react.createElement('span', { style: { fontSize: '12px' } }, t('vlm.apiKey')),
-						react.createElement('input', { value: vlmApiKey, onChange: (e) => setVlmApiKey(e.target.value), type: 'password', placeholder: 'sk-...', style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid rgba(128,128,128,0.3)', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
+						react.createElement('input', { value: vlmApiKey, onChange: (e) => setVlmApiKey(e.target.value), type: 'password', placeholder: 'sk-...', style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
 						react.createElement('span', { style: { fontSize: '12px' } }, t('vlm.model')),
-						react.createElement('input', { value: vlmModel, onChange: (e) => setVlmModel(e.target.value), placeholder: 'mimo-v2.5', style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid rgba(128,128,128,0.3)', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
+						react.createElement('input', { value: vlmModel, onChange: (e) => setVlmModel(e.target.value), placeholder: 'mimo-v2.5', style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
 						react.createElement('span', { style: { fontSize: '12px' } }, t('vlm.timeout')),
-						react.createElement('input', { value: vlmTimeout, onChange: (e) => setVlmTimeout(e.target.value), placeholder: '60', title: t('vlm.timeoutHint'), style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid rgba(128,128,128,0.3)', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
+						react.createElement('input', { value: vlmTimeout, onChange: (e) => setVlmTimeout(e.target.value), placeholder: '60', title: t('vlm.timeoutHint'), style: { padding: '6px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))', background: 'transparent', color: 'inherit', fontSize: '12px' } }),
 						react.createElement('span', { style: { fontSize: '12px' } }),
 						react.createElement('label', { style: { display: 'inline-flex', alignItems: 'center', gap: '6px', fontSize: '12px' } },
 							react.createElement('input', { type: 'checkbox', checked: vlmThinking, onChange: (e) => setVlmThinking(e.target.checked) }),
@@ -1230,6 +1230,73 @@ window.__ModuleLoader__.load({
 			)
 		}
 
+		// 插件配置 tab 卡片：自渲染标题 + 描述 + 展开/收起，展开后承载原有设置表单（FaSettingsPage）。
+		// 「插件配置」tab 只派发 settings.plugin.item 槽位，卡片外观完全由插件自绘
+		//（与自动继续/插件市场同形）；表单内部仍走 /config 接口读写真实配置。
+		function FaSettingsCard() {
+			const [open, setOpen] = react.useState(false)
+			const [hover, setHover] = react.useState(false)
+			const [version, setVersion] = react.useState(null)
+			react.useEffect(() => {
+				fetch('/dsh-file-attachment/version').then(r => r.json()).then(d => {
+					if (d.ok && d.version) setVersion(d.version)
+				}).catch(() => { /* ignore */ })
+			}, [])
+			function t(key) {
+				if (ctxRef !== null && ctxRef.locale !== void 0 && typeof ctxRef.locale.bind === 'function') {
+					try { return ctxRef.locale.bind('dsh-file-attachment')(key) } catch (err) { /* 回退 key */ }
+				}
+				return key
+			}
+			const borderActive = open || hover
+			return react.createElement('div', {
+				onMouseEnter: () => setHover(true),
+				onMouseLeave: () => setHover(false),
+				style: {
+					borderRadius: '16px',
+					border: `0.5px solid ${borderActive ? 'var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l4))' : 'var(--dsw-alias-border-l4)'}`,
+					background: open ? 'var(--dsw-alias-bg-layer-2, rgba(128,128,128,0.06))' : 'var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.04))',
+					overflow: 'hidden',
+					transition: 'border-color 0.16s, background 0.16s',
+				},
+			},
+				react.createElement('button', {
+					type: 'button',
+					'aria-expanded': open,
+					onClick: () => setOpen(!open),
+					style: {
+						display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
+						width: '100%', padding: '14px 16px',
+						background: 'none', border: 'none', cursor: 'pointer',
+						color: 'inherit', textAlign: 'left', boxSizing: 'border-box',
+					},
+				},
+					react.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '4px', minWidth: 0, flex: 1 } },
+						react.createElement('div', { style: { fontSize: '15px', fontWeight: 600, lineHeight: '1.4', color: 'var(--dsw-alias-label-primary, inherit)' } },
+							t('card.title'),
+							version != null ? react.createElement('span', { style: { marginLeft: '1em', fontSize: '11px', fontWeight: 400, color: 'var(--dsw-alias-label-quaternary, rgba(128,128,128,0.55))', verticalAlign: 'middle' } }, 'v' + version) : null,
+						),
+						react.createElement('div', { style: { fontSize: '13px', lineHeight: '1.5', color: 'var(--dsw-alias-label-tertiary, rgba(128,128,128,0.85))' } }, t('card.description')),
+					),
+					react.createElement('span', {
+						style: {
+							display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+							color: 'var(--dsw-alias-label-tertiary, rgba(128,128,128,0.7))',
+							flex: 'none',
+							transition: 'transform 0.16s',
+							transform: open ? 'rotate(180deg)' : 'none',
+						},
+					},
+						react.createElement('svg', { width: 14, height: 14, viewBox: '0 0 14 14', 'aria-hidden': true },
+							react.createElement('path', { d: 'M3.5 5.5l3.5 3.5 3.5-3.5', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' })),
+					),
+				),
+				open ? react.createElement('div', { style: { borderTop: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.14))', margin: '0 16px', paddingBottom: '8px' } },
+					react.createElement(FaSettingsPage, {}),
+				) : null,
+			)
+		}
+
 		function apply(ctx) {
 			ctxRef = ctx
 			if (typeof console !== 'undefined' && console.log) console.log('[dsh-file-attachment] apply', { hasSlots: ctx.get('slots') !== undefined, hasConversation: ctx.get('conversation') !== undefined })
@@ -1238,6 +1305,8 @@ window.__ModuleLoader__.load({
 			// 注册设置页文案（zh/en）
 			ctx.effect(() => ctx.locale.register('dsh-file-attachment', {
 				zh: {
+					'card.title': '文件附件',
+					'card.description': '拖拽、粘贴或上传文件与图片，可配置文件类型与多模态识别参数。',
 					'settings.title': '文件附件',
 					'settings.hint': '用于设置聊天中可发送的文件类型。图片恒可发送；以下三类按扩展名校验文档/代码/配置文件（扩展名不带点、小写，如 pdf、py）。',
 					'doc.title': '文档',
@@ -1256,6 +1325,8 @@ window.__ModuleLoader__.load({
 					'saved': '已保存',
 				},
 				en: {
+					'card.title': 'File Attachments',
+					'card.description': 'Drag, paste or upload files and images. Configure file types and multimodal recognition.',
 					'settings.title': 'File Attachments',
 					'settings.hint': 'Set which file types can be sent in chat. Images are always allowed; the lists below gate documents / code / config files by extension (no dot, lowercase, e.g. pdf, py).',
 					'doc.title': 'Documents',
@@ -1312,15 +1383,17 @@ window.__ModuleLoader__.load({
 					{ name: 'shell.overlay', id: 'dsh-file-attachment-lightbox', order: 200 },
 					FaLightbox
 				))
-				// 设置页：文件附件类型配置（左侧菜单项 + 右侧配置页）
-				slots.inject('settings.section', () => [
-					slots.register({
-						name: 'settings.section',
-						id: 'dsh-file-attachment-settings',
-						order: 120,
-						label: () => ctx.locale.bind('dsh-file-attachment')('settings.title'),
-					}, () => react.createElement(FaSettingsPage, {})),
-				])
+				// 插件配置 tab 卡片：settings.plugin.item（key = settings 命名空间 'dsh-file-attachment'）。
+				// 卡片自渲染标题+描述+展开（见 FaSettingsCard），展开后承载原有设置表单。
+				// 嵌套 inject settingsScope：老版本 host（< 0.1.0-rc.7）无该服务时卡片不出现，
+				// 但不卸载整个插件（graceful degradation，与插件市场同形）。
+				ctx.inject(['settingsScope'], (scoped) => {
+					scoped.slots.inject('settings.plugin.item', () => scoped.slots.register({
+						name: 'settings.plugin.item',
+						key: 'dsh-file-attachment',
+						locale: 'dsh-file-attachment',
+					}, FaSettingsCard))
+				})
 			}
 			bridge.conversation = ctx.get('conversation')
 			// 劫持 dsh 原生📎：让上传入口位于与 dsh 本体一致的位置（hero/composer 两模式同一按钮），

package/lib/index.js

@@ -7,7 +7,9 @@
 import { access, mkdir, readFile, writeFile } from 'node:fs/promises'
 import { homedir } from 'node:os'
 import { join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { defineTool } from '@deepseek-ai/dsh-tools'
+import z from '@deepseek-ai/schemastery'
 
 /** 本包声明依赖的 Host 服务。 */
 export const name = 'dsh-file-attachment'
@@ -146,6 +148,32 @@ const VLM_DEFAULTS = {
   timeout: 60, // 识别超时（秒）。实测 VLM 延迟波动大（12~73s），30s 会误杀多数请求
 }
 
+// 「插件配置」tab 卡片所绑定的 settings 命名空间（kebab-case，匹配 /dsh-file-attachment）。
+const SETTINGS_NS = 'dsh-file-attachment'
+
+/**
+ * settings 命名空间的 wire schema：字段自带默认值，描述「可上传类型」与多模态参数结构。
+ *
+ * 作用：向 host 的 `settings` 服务登记该命名空间，使浏览器半侧的插件配置卡片
+ * （settings.plugin.item，key = 本命名空间）被「插件配置」tab 派发渲染。
+ *
+ * 注意：实际配置仍持久化在 ~/.dsh/file-attachment.json（/config 路由读写），此 schema
+ * 仅用于登记命名空间结构（与自动继续插件的 settings.register 同形）；卡片内部表单
+ * 继续走 /config 接口读写真实配置。
+ */
+const FaAttachmentSchema = z.object({
+  doc: z.array(z.string()).default(DEFAULT_TYPES.doc),
+  code: z.array(z.string()).default(DEFAULT_TYPES.code),
+  config: z.array(z.string()).default(DEFAULT_TYPES.config),
+  vlm: z.object({
+    baseURL: z.string().default(VLM_DEFAULTS.baseURL),
+    apiKey: z.string().default(VLM_DEFAULTS.apiKey),
+    model: z.string().default(VLM_DEFAULTS.model),
+    thinkingType: z.string().default(VLM_DEFAULTS.thinkingType),
+    timeout: z.natural().default(VLM_DEFAULTS.timeout),
+  }),
+})
+
 /** 规范化多模态参数（缺省/空值回退默认，trim 去空白）。 */
 function normalizeVlm(raw) {
   const r = (raw && typeof raw === 'object') ? raw : {}
@@ -340,6 +368,18 @@ function registerRoutes(ctx) {
           return
         }
       }
+      if (req.method === 'GET' && pathname === '/dsh-file-attachment/version') {
+        try {
+          const pkgPath = fileURLToPath(new URL('../package.json', import.meta.url))
+          const raw = await readFile(pkgPath, 'utf8')
+          const pkg = JSON.parse(raw)
+          json(res, { ok: true, version: pkg.version || '0.0.0' })
+          return
+        } catch {
+          json(res, { ok: false, version: 'unknown' }, 500)
+          return
+        }
+      }
       if (req.method === 'GET' && pathname === '/dsh-file-attachment/config') {
         json(res, { ok: true, value: await readConfig() })
         return
@@ -482,5 +522,12 @@ function registerTools(ctx) {
 export function apply(ctx, config = {}) {
   registerTools(ctx)
   registerRoutes(ctx)
+  // 登记「插件配置」tab 的 settings 命名空间：让浏览器半侧的插件配置卡片
+  // （settings.plugin.item，key = 本命名空间）被 tab 派发渲染。
+  // 老版本 host（无 settings 服务，< 0.1.0-rc.7）此回调不运行，命名空间不登记，
+  // 卡片不出现但不卸载整个插件（graceful degradation，与自动继续/插件市场同形）。
+  ctx.inject(['settings'], (scopedCtx) => {
+    scopedCtx.settings.register(SETTINGS_NS, FaAttachmentSchema, {})
+  })
   console.log('[dsh-file-attachment] host loaded (webServer routes + describe_image tool)')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wszhoho/dsh-file-attachment",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "文件附件：拖拽/粘贴/上传文件（支持多文件）；图片与文档统一落盘到 .dsh-file-attachment 并以 @绝对路径 引用发送（文本模型可正常使用）；输入框内联显示图片缩略图预览与文件条目，聊天区图片同样渲染为可点击放大的缩略图、文件保持芯片样式；非多模态模型下图片自动调用可配置 VLM 识别生成中文描述回填草稿；文档/代码/配置文件可上传类型可在设置页配置；支持 PC 与移动端浏览器",
   "keywords": [
     "dsh",
@@ -34,7 +34,8 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh": ">=0.1.0-rc.1 <0.1.1-0 || >=0.1.1-rc.1 <0.1.2-0 || >=0.1.2-alpha.1 <0.2.0-0"
+    "@deepseek-ai/dsh": ">=0.1.0-rc.1 <0.1.1-0 || >=0.1.1-rc.1 <0.1.2-0 || >=0.1.2-alpha.1 <0.2.0-0",
+    "@deepseek-ai/schemastery": "^3.18.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"