@wszhoho/dsh-file-attachment 0.3.4 → 0.4.1

package/README.md

@@ -4,29 +4,32 @@ DeepSeek Harness (dsh) web GUI 插件：在会话输入框中**拖入或 Ctrl+V
 
 图片文件由插件接管后走 dsh web 既有草稿图片流程（`addImages`）：不落盘、不进文件条、不缩放；仅当输入框未就绪且为纯图片时，才原样交回原生。
 
-另外，输入框工具栏（加号之后）提供了一个**上传按钮（↑ 向上箭头图标）**，点击后弹出系统文件选择框，可多选文档/图片，复用与拖入/粘贴完全一致的落盘 + `@路径` 插入管线。PC 与移动端浏览器均适用（移动端走原生文件/拍照选择器）。
+另外，输入框工具栏（加号之后）提供了一个**上传按钮（📎 回形针图标）**，点击后弹出系统文件选择框，可多选文档/图片，复用与拖入/粘贴完全一致的落盘 + `@路径` 插入管线。PC 与移动端浏览器均适用（移动端走原生文件选择器）。
 
 ## 界面
 
-**上传按钮**：输入框工具栏 `+` 之后的 `↑` 图标，点击弹出系统文件选择框（可多选文档/图片）。
+**演示**：拖入/粘贴文档 → 落盘并在输入框插入 `@` 引用 → 输入框上方 dock 文件条待发送状态（完整流程见 gif）。
 
-![上传按钮](docs/upload-button.png)
+![插件演示](docs/demo.gif)
 
-**待上传状态**：文档落盘后，输入框上方 dock 列出待发送附件（点 `×` 移除），输入框内以 `@路径` 引用 chip 形式内联展示。
+**上传按钮**：输入框工具栏 `+` 之后的 📎 回形针图标，点击弹出系统文件选择框（可多选文档/图片）。
 
-![待上传状态](docs/pending-attachment.png)
+**可上传类型设置**：「设置 → 文件附件」页可按 文档 / 代码 / 配置文件 三类增删扩展名（小写、不带点），图片恒可发送。
+
+![可上传类型设置](docs/settings-file-types.png)
 
 ## 行为一览
 
 | 操作 | 行为 |
 | --- | --- |
-| 点击**上传按钮（↑）**，在系统文件选择框中**多选**文档/图片 | 与拖入/粘贴同一管线：文档 → 落盘 + 光标插入全部 `@` 路径；图片 → 走既有草稿图片流程；`accept` 限定图片 + 常见文档扩展名，移动端自动弹出文件/拍照选择器 |
+| 点击**上传按钮（📎）**，在系统文件选择框中**多选**文档/图片 | 与拖入/粘贴同一管线：文档 → 落盘 + 光标插入全部 `@` 路径；图片 → 走既有草稿图片流程；`accept` 限定图片 + 常见文档扩展名，移动端自动弹出文件选择器 |
 | 拖入/粘贴 **文档/代码/配置文件**（非图片，默认 doc·code·config 三类扩展名，如 docx/xlsx/pdf/md/txt/js/json） | 浏览器读全文 → base64 → 宿主落盘 `<会话工作区>/.dsh-file-attachment/<日期>/<文件名>` → 光标插入 `@绝对路径`，成功不提示、失败简短 toast |
 | 一次拖入/粘贴 **多个文件**（支持多文件） | 批量处理：逐个读取全文 → base64 → 落盘 → 在光标处一次性插入全部 `@` 引用；全部成功不提示，部分失败仅简短提示「N 个已跳过」 |
 | 拖入 **目录** | 拒绝，toast 提示「不支持拖入目录」，不插入引用 |
 | 拖入/粘贴 **图片** | 接管后走 dsh 既有草稿图片流程（`addImages`）：不落盘、不进文件条、不缩放；输入框未就绪且纯图片时原样交原生 |
 | 粘贴 **纯文本**（含从地址栏复制的目录路径字符串） | 不改写，完全原生行为 |
 | 重复拖入同名文件（同一天内） | 追加 `-1`、`-2` 序号，绝不覆盖 |
+| 点文件条（dock）`×` 移除 | 移除 dock 条目，并清除输入框中指向该文件路径的**全部** `@` 引用 chip（同一文件拖入多次产生的多个 chip 一并清除）；其他文件的引用不受影响 |
 | 单文件 > 50MB | 跳过并提示 |
 
 ### 文件命名
@@ -85,18 +88,22 @@ packages/dsh-file-attachment/
 
 - **Host 半**：`webServer.register` 前缀路由 `/dsh-file-attachment`，POST `/dsh-file-attachment/save` 接收 `{name, data(base64), sessionId}`，base64 解码后用 `node:fs/promises` 写盘到会话工作区 `.dsh-file-attachment/`，返回 `{ok, value:{path,dir,name,size}}`。
 - **Client 半**：`conversation.input.dock`（list 槽，同步桥状态，不渲染文本；经会话作用域取输入机，hero 首轮空白态也挂载）+ `shell.overlay`（list 槽，toast 通知展示）+ `conversation.input.left`（list 槽，**上传按钮**，渲染为左动作簇第 3 项），document 级 capture 监听先于应用 bubble 监听执行。
-- **上传按钮**：`FaUploadButton` 组件注入 `conversation.input.left`（`order:10`），内部是隐藏 `<input type="file" multiple accept>`（`accept` 限定 `image/*` + 常见文档扩展名），点击触发原生选择框；`onChange` 按 `file.type` 是否为 `image/` 分派到 `runBatch`（文档落盘插 `@`、图片走草稿图片流程），完成后清空 `input.value` 以便重复选择同一文件。图标为内联 SVG 向上箭头（↑，`stroke=currentColor`，随主题变色）。
+- **上传按钮**：`FaUploadButton` 组件注入 `conversation.input.left`（`order:10`），内部是隐藏 `<input type="file" multiple accept>`（`accept` 限定 `image/*` + 常见文档扩展名），点击触发原生选择框；`onChange` 按 `file.type` 是否为 `image/` 分派到 `runBatch`（文档落盘插 `@`、图片走草稿图片流程），完成后清空 `input.value` 以便重复选择同一文件。图标为内联 SVG 回形针（📎，`stroke=currentColor`，随主题变色）。
 - **通知**：`shell.overlay` frame-wide 浮动 toast（不参与文档流，不破坏布局），4 秒自动消失。
 - **浮层**：拖入任何文件时 capture 阶段拦截应用自带「拖入图片…」DropOverlay（文案面向图片，对文档是误导）。
 
 ## 开发说明
 
 - `lib/*.js`、`package.json`、`cordis.patch.yml`、`README.md` 当前均为 **UTF-8 无 BOM**（以仓库实测为准）；编辑时保持原编码，不引入 BOM。
-- Host 半用 `webServer.register({ kind: 'prefix', path: '/dsh-file-attachment', handler })` 收文件（参考 `dsh-upload-file` 同架构的 `/dsh-upload` 路由），纯 ESM 无构建，不依赖装饰器/远程反射。
+- Host 半用 `webServer.register({ kind: 'prefix', path: '/dsh-file-attachment', handler })` 收文件，纯 ESM 无构建，不依赖装饰器/远程反射。
 - Client 半保存用 `fetch('/dsh-file-attachment/save', { method: 'POST', body: JSON.stringify({ name, data, sessionId }) })`，信封为 `{ ok, value | error }`。
 - 项目根 = 会话工作区（`session.header.cwd` → `sandboxPolicy.workspaceRoot` → `process.cwd()` 兜底）。
 - 50MB 上限两侧一致（client 跳过 + host 校验）。
 
+## Star
+
+如果这个插件帮到了你，欢迎到 [GitHub 仓库](https://github.com/wszhoho/dsh-file-attachment) 点个 ⭐ Star，感谢支持！
+
 ## License
 
 MIT

package/lib/client.js

@@ -16,7 +16,7 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
 		const react = require('react')
 
-		// Client 服务依赖：槽位 / 输入机 / 会话（与官方 dsh-upload-file 同范式）。
+		// Client 服务依赖：槽位 / 输入机 / 会话。
 		// 保存文件不走 remote，而是 fetch POST 宿主 webServer 路由 /dsh-file-attachment/save。
 		const inject = [
 			"slots",
@@ -131,7 +131,42 @@ window.__ModuleLoader__.load({
 			if (changed) emitAttached()
 		}
 
-		// ---- 宿主保存调用：fetch POST 宿主 webServer 路由（签名同 dsh-upload-file attach）----
+		// 文件条移除时清除草稿中指向给定路径的全部 @引用 chip（同一文件拖多次会留多个 chip，需全清）。
+		// 兼容两代 dsh 输入机：旧版（Lexical）draft 是 clipboard 投影（chip 展开为 @路径 文本），
+		// 新版（纯文本机，chip 外观是文本上的扫描装饰）draft 是纯文本——两代里 occurrence 的
+		// [offset, offset+length) 都是 snap.draft 内的文本区间，故统一 setDraft 整文拼接删除
+		//（新版 consumeToken 的 span 分支内部本就是 setDraft 拼接）。每轮删一个目标区间
+		//（连带 chip 后机器自动补的尾随空格 gap），draftRev 递增后重读 snapshot，循环至无目标。
+		function removeDraftRefs(path) {
+			const shell = bridge.shell
+			if (shell === null || typeof path !== 'string' || path === '') return
+			if (typeof shell.setDraft !== 'function') return
+			const plain = '@' + path
+			const quoted = '@"' + path + '"'
+			const isTarget = (oc) => oc.ref === plain || oc.ref === quoted
+				|| (oc.clipboardText !== void 0 && (oc.clipboardText === plain || oc.clipboardText === quoted))
+			for (let n = 0; n < 64; n++) {
+				const snap = readShellSnapshot(shell)
+				if (snap === null || snap === void 0 || typeof snap.draft !== 'string') break
+				// 发送进行中不动草稿（此时 occurrence 会随发送完成清空）
+				if (snap.phase === 'adjudicating' || snap.phase === 'submitting') break
+				// 取第一个有效（类型+边界健全）且指向目标路径的 occurrence，边界失配直接跳过防误伤用户文本
+				const occs = snap.occurrences || []
+				let oc = null
+				for (let i = 0; i < occs.length; i++) {
+					const o = occs[i]
+					if (typeof o.offset !== 'number' || typeof o.length !== 'number' || o.length <= 0) continue
+					if (o.offset < 0 || o.offset + o.length > snap.draft.length) continue
+					if (isTarget(o)) { oc = o; break }
+				}
+				if (oc === null) break
+				let end = oc.offset + oc.length
+				if (snap.draft.charCodeAt(end) === 32) end += 1 // 吃掉插入 chip 时机器自动补的尾随空格 gap
+				shell.setDraft(snap.draft.slice(0, oc.offset) + snap.draft.slice(end))
+			}
+		}
+
+		// ---- 宿主保存调用：fetch POST 宿主 webServer 路由----
 		async function saveFileToHost(fileName, b64, sessionId) {
 			if (typeof fetch !== 'function') throw new Error('当前环境无 fetch，无法上传')
 			let response
@@ -265,10 +300,25 @@ window.__ModuleLoader__.load({
 			return seg
 		}
 
-		// 找可写的 composer textarea：可见、未禁用、未只读、phase 为 plain；
-		// 多个候选时优先 value 与桥内草稿一致的那一个（排除审批弹窗里的同名元素）
-		function findComposerTextarea() {
-			const list = Array.from(document.querySelectorAll('[data-composer-card] textarea'))
+		// 输入机快照读取：兼容两代 dsh。
+		// 旧版（纯文本机，alpha.2 之前）：shell.snapshot 直接是 InputState；
+		// 新版（Lexical composer，alpha.2 起）：shell.state 是 SnapshotStore，经
+		// getSnapshot() 取值（字段不变：draft/draftRev/phase/occurrences）。
+		function readShellSnapshot(shell) {
+			if (shell === null || shell === void 0) return undefined
+			const st = shell.state
+			if (st !== null && st !== void 0 && typeof st.getSnapshot === 'function') {
+				return st.getSnapshot()
+			}
+			return shell.snapshot
+		}
+
+		// 找可写的 composer 输入表面：可见、未禁用、未只读、phase 为 plain；
+		// 多个候选时优先文本与桥内草稿一致的那一个（排除审批弹窗里的同名元素）。
+		// 双代兼容：旧版 textarea（[data-composer-card] textarea）；
+		// 新版 Lexical contenteditable（[data-composer-card] [data-composer-input]）。
+		function findComposerInput() {
+			const list = Array.from(document.querySelectorAll('[data-composer-card] textarea, [data-composer-card] [data-composer-input]'))
 			const live = list.filter((ta) => {
 				if (ta.disabled || ta.readOnly) return false
 				const phase = ta.getAttribute('data-phase')
@@ -277,9 +327,10 @@ window.__ModuleLoader__.load({
 			})
 			if (live.length === 0) return null
 			const draft = bridge.input !== void 0 ? bridge.input.draft : undefined
+			const textOf = (el) => (el.tagName === 'TEXTAREA' ? el.value : (el.textContent || ''))
 			if (typeof draft === 'string') {
 				for (let i = 0; i < live.length; i++) {
-					if (live[i].value === draft) return live[i]
+					if (textOf(live[i]) === draft) return live[i]
 				}
 			}
 			return live[0]
@@ -395,7 +446,7 @@ window.__ModuleLoader__.load({
 				announce(`输入框不可用 [mounted:${bridge.mounted} shell:${shell === null ? 'null' : 'ok'} addImg:${typeof bridge.addImages}]`)
 				return
 			}
-			const snap0 = shell.snapshot
+			const snap0 = readShellSnapshot(shell)
 			const phase = snap0 ? snap0.phase : 'plain'
 			if (phase !== 'plain' && phase !== 'command' && phase !== 'claimed') {
 				announce('输入框正忙')
@@ -449,8 +500,24 @@ window.__ModuleLoader__.load({
 					const m = formatMention(res.path, false)
 					const clipboardText = m !== undefined ? m : '@' + res.path
 					// 每次插入前重取 snapshot（draftRev 随插入递增，span 取当前末尾）
-					const snap = shell.snapshot
-					const span = { draftRev: snap.draftRev, start: snap.draft.length, end: snap.draft.length }
+					const snap = readShellSnapshot(shell)
+					// 前导分隔空格：聊天记录对 @引用 的 file-chip 渲染（projectUserText）
+					// 要求 @ 前是行首或空白，而 insertReference 只在 chip 后补空格。
+					// 草稿末尾紧贴文字时先补一格，否则发送后聊天记录显示裸 @路径
+					//（旧版 insertTextAtCaret 的 padStart 同款保底）。
+					if (snap !== void 0 && typeof snap.draft === 'string' && snap.draft !== ''
+						&& !isSpace(snap.draft.charCodeAt(snap.draft.length - 1))) {
+						const leadSpan = { draftRev: snap.draftRev, start: snap.draft.length, end: snap.draft.length }
+						if (typeof shell.insertText === 'function') {
+							try { shell.insertText(' ', leadSpan) } catch (err) { /* 忽略：补空格失败不阻塞插入 */ }
+						} else if (typeof shell.setDraft === 'function') {
+							// 含 chip 的草稿末尾必为空白（chip 自动尾随空格），故此处必为纯文本，拼接安全
+							try { shell.setDraft(snap.draft + ' ') } catch (err) { /* 忽略 */ }
+						}
+					}
+					// 补空格会递增 draftRev，重新取快照后再定插入 span
+					const snap2 = readShellSnapshot(shell)
+					const span = { draftRev: snap2.draftRev, start: snap2.draft.length, end: snap2.draft.length }
 					const okInsert = shell.insertReference(
 						{
 							source: 'reference', // 复用内置已注册的 @引用 source（带 codec.serialize），否则报 no serializer
@@ -488,12 +555,12 @@ window.__ModuleLoader__.load({
 			handleFilesEvent(e, files, dt.items, 'drop')
 		}
 
-		// document 级 paste（capture）：仅当粘贴目标就是 composer textarea 时接管文件；
+		// document 级 paste（capture）：仅当粘贴目标就是 composer 输入表面时接管文件；
 		// 纯文本（含目录路径字符串）完全原生，不改写。
 		function onPaste(e) {
 			const t = e.target
-			const ta = findComposerTextarea()
-			if (ta === null || t !== ta) return
+			const ta = findComposerInput()
+			if (ta === null || (t !== ta && !(ta.contains && ta.contains(t)))) return
 			const cd = e.clipboardData
 			if (cd === null || cd === void 0) return
 			const files = Array.prototype.slice.call(cd.files)
@@ -564,7 +631,7 @@ window.__ModuleLoader__.load({
 					}
 				}
 			} catch (err) { shell = null; addImages = null }
-			const input = shell !== null && shell.snapshot !== void 0 ? shell.snapshot : undefined
+			const input = readShellSnapshot(shell)
 			react.useEffect(() => {
 				bridge.shell = shell
 				bridge.addImages = addImages
@@ -600,12 +667,12 @@ window.__ModuleLoader__.load({
 				attachedListeners.add(fn)
 				return () => { attachedListeners.delete(fn) }
 			}, [])
-			// 发送后清空：轮询 shell.snapshot，occurrences 从有→无 即一次发送完成
+			// 发送后清空：轮询输入机快照，occurrences 从有→无 即一次发送完成
 			const hadOcc = react.useRef(false)
 			react.useEffect(() => {
 				const timer = setInterval(() => {
 					const shell = bridge.shell
-					const snap = shell ? shell.snapshot : null
+					const snap = readShellSnapshot(shell)
 					const occ = snap ? snap.occurrences : null
 					const has = !!(occ && occ.length > 0)
 					const s = bridge.sessionId
@@ -637,7 +704,11 @@ window.__ModuleLoader__.load({
 							style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 },
 						}, e.name),
 						react.createElement('span', {
-							onClick: () => detachFile(e.id),
+							onClick: () => {
+								// 先清草稿中指向该文件的全部 @引用 chip，再移除文件条条目
+								try { removeDraftRefs(e.path) } catch (err) { /* 忽略：引用清理失败不阻塞移除 */ }
+								detachFile(e.id)
+							},
 							title: '移除',
 							style: { cursor: 'pointer', opacity: 0.6, fontSize: '14px', lineHeight: '1', flex: 'none', padding: '0 2px' },
 						}, '×'),
@@ -704,20 +775,23 @@ window.__ModuleLoader__.load({
 					style: {
 						display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
 						width: '28px', height: '28px', padding: 0, margin: 0, border: 'none',
-						background: 'transparent', color: 'inherit',
-						cursor: busy ? 'default' : 'pointer', borderRadius: '6px',
+						// 与 dsh 输入栏加号按钮同款（InputBar.module.css .add）：全圆 + selector 填充，无阴影
+					background: 'var(--dsw-specific-selector, rgba(128,128,128,0.10))',
+					color: 'var(--dsw-alias-label-primary, currentColor)',
+						cursor: busy ? 'default' : 'pointer', borderRadius: '999px',
 						opacity: busy ? 0.45 : 1, transition: 'background 120ms ease, opacity 120ms ease',
 					},
-					onMouseEnter: (ev) => { if (!busy) ev.currentTarget.style.background = 'rgba(128,128,128,0.16)' },
-					onMouseLeave: (ev) => { ev.currentTarget.style.background = 'transparent' },
+					onMouseEnter: (ev) => { if (!busy) ev.currentTarget.style.background = 'var(--dsw-alias-interactive-bg-hover-solid, rgba(128,128,128,0.16))' },
+					onMouseLeave: (ev) => { ev.currentTarget.style.background = 'var(--dsw-specific-selector, rgba(128,128,128,0.10))' },
 				},
 					react.createElement('svg', {
-						width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none',
+						// 回形针按用户反馈取 12px（比加号 14px 小 2px）；描边 2/24×12≈1px
+					width: 12, height: 12, viewBox: '0 0 24 24', fill: 'none',
 						'aria-hidden': true, style: { display: 'block' },
 					},
 						react.createElement('path', {
-							d: 'M8 13V3M8 3L4 7M8 3L12 7',
-							stroke: 'currentColor', strokeWidth: 1.5,
+							d: 'm21.44 12.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48',
+							stroke: 'currentColor', strokeWidth: 2,
 							strokeLinecap: 'round', strokeLinejoin: 'round',
 						})
 					)

package/lib/index.js

@@ -1,4 +1,4 @@
-// @wszhoho/dsh-file-attachment Host 半：webServer HTTP 路由方案（参考 dsh-upload-file 同架构）。
+// @wszhoho/dsh-file-attachment Host 半：webServer HTTP 路由方案。
 // Client 半读取文件全文（base64）后 POST /dsh-file-attachment/save 到这里，
 // 写入 <会话工作区根>/.dsh-file-attachment/<日期>/<文件名>（日期作子目录，文件名保留原始名）并返回 { path, dir, name, size }。
 // 项目根解析：Client 传 sessionId → sessions.get(sessionId).header.cwd →

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wszhoho/dsh-file-attachment",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "description": "文件附件：输入框上传按钮 + 拖拽/粘贴文件（支持多文件）；图片走 dsh 原生图片草稿机制（addImages，不缩放/不落盘），文档落盘到 .dsh-file-attachment 并以芯片 @短名 引用（发送时还原 @绝对路径）；文档/代码/配置文件可上传类型可在设置页配置；支持 PC 与移动端浏览器",
   "keywords": [
     "dsh",