From 5443aad8be4ba0424bec075e4ae8420cd0767bf5 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 21:26:11 +0800 Subject: [PATCH] =?UTF-8?q?iter(g235):=20=E6=96=B0=E5=A2=9E=20copyButton?= =?UTF-8?q?=20=E5=A4=8D=E5=88=B6=E6=8C=89=E9=92=AE=EF=BC=8C=E5=89=AA?= =?UTF-8?q?=E8=B4=B4=E6=9D=BF=E5=86=99=E5=85=A5=E5=B8=A6=E5=B7=B2=E5=A4=8D?= =?UTF-8?q?=E5=88=B6=E5=8F=8D=E9=A6=88=E4=B8=8E=E9=99=8D=E7=BA=A7=EF=BC=88?= =?UTF-8?q?72=20=E7=BB=84=E4=BB=B6=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 60 +++++++++++++++++++++++++++++- AGENTS.md | 2 +- ARCHITECTURE.md | 2 +- README.md | 8 ++-- apps/demo/main.ts | 13 +++++++ llms-full.txt | 30 ++++++++++++++- llms.txt | 1 + packages/skin/ui/src/copyButton.ts | 32 ++++++++++++++++ packages/skin/ui/src/index.ts | 1 + packages/skin/ui/src/types.ts | 11 ++++++ packages/skin/ui/ua.manifest.json | 58 ++++++++++++++++++++++++++++- 11 files changed, 208 insertions(+), 10 deletions(-) create mode 100644 packages/skin/ui/src/copyButton.ts diff --git a/.ua/index.json b/.ua/index.json index ef9b234..19b5d63 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T13:22:26.722Z", + "generatedAt": "2026-10-26T13:25:25.456Z", "repoRoot": ".", "packages": [ { @@ -214,7 +214,8 @@ "virtualList(props)：虚拟列表，固定行高长列表只渲染可视窗口 + 上下缓冲条，万级数据滚动不随总量掉帧；返回 { el, scrollTo } 句柄", "commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄", "timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起", - "pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示" + "pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示", + "copyButton(props)：复制按钮，点击把 text 写入剪贴板并短暂显示已复制，text 可传函数取实时值，clipboard API 不可用时降级 execCommand" ], "keyTypes": [ "ButtonProps", @@ -3881,6 +3882,61 @@ "粘贴会自动分发：整段验证码（位数 ≥ 格数）从首格铺起，零散片段从当前格续填", "mask: true 走密文显示并声明 one-time-code，短信验证码可自动填充；disabled 支持布尔或信号禁用" ] + }, + { + "id": "copyButton", + "title": "复制按钮 CopyButton", + "demo": "sec-copybutton", + "props": [ + { + "n": "text", + "t": "string | (() => string)", + "r": 1, + "d": "待复制内容；传函数则在点击瞬间取实时值（如输入框当前值）" + }, + { + "n": "label", + "t": "string", + "df": "复制", + "d": "按钮文案" + }, + { + "n": "copiedLabel", + "t": "string", + "df": "已复制", + "d": "复制成功后的短暂文案（2s 后还原为 label）" + }, + { + "n": "variant", + "t": "'primary' | 'ghost' | 'danger'", + "df": "ghost", + "d": "视觉强度，沿用按钮三档" + }, + { + "n": "size", + "t": "'sm' | 'md' | 'lg'", + "df": "md", + "d": "高度档位" + }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用态：布尔直接置位，传信号则动态同步" + }, + { + "n": "onCopied", + "t": "(text: string) => void", + "k": 1, + "d": "复制成功回调（参数为实际写入的内容）" + } + ], + "example": "copyButton({ text: 'npm install @ui-arch/ui', onCopied: (t) => console.log(t) })", + "steps": [ + "传 text 即可用，缺省幽灵按钮、文案「复制」；复制成功后短暂换成「已复制」，2s 自动还原", + "内容需要实时取就传函数：text: () => textFieldValue()，点击瞬间才求值", + "label / copiedLabel 可改文案；variant / size 透传给内部 button，视觉与普通按钮完全一致", + "非安全上下文（http）或旧浏览器自动降级为隐藏 textarea + execCommand，无需业务处理兼容" + ] } ] }, diff --git a/AGENTS.md b/AGENTS.md index 660fdd8..463b2f1 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -21,7 +21,7 @@ - `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核 - `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架 -- `packages/skin/ui`（@ui-arch/ui）：71 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 +- `packages/skin/ui`（@ui-arch/ui）：72 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 - `packages/design/tokens`（@ui-arch/tokens）：设计令牌 - `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private） - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index a840282..5b5a616 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -34,7 +34,7 @@ ui-arch-mvp/ │ │ ├── table-core/ # 表格状态内核 │ │ └── frame/ # 信号 + hyperscript 微框架 │ ├── skin/ # 皮肤层（DOM 组件，可发布） -│ │ └── ui/ # 71 个组件 + ui.css +│ │ └── ui/ # 72 个组件 + ui.css │ ├── design/ # 资产层（可发布） │ │ └── tokens/ # --ua-* 设计令牌 │ └── tools/ # 工程层（private，不发布） diff --git a/README.md b/README.md index ece22f5..c4f048b 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,13 @@ npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全 npm run changelog # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移） ``` -## 组件（共 71 个） +## 组件（共 72 个） -accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · image · inputNumber · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark +accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · copyButton · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · image · inputNumber · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark -分组：表单（button / textField / inputNumber / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / link / space / divider / splitter / backTop / affix / tour / watermark）。 +分组：表单（button / copyButton / textField / inputNumber / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / link / space / divider / splitter / backTop / affix / tour / watermark）。 ## 可访问性约定 @@ -32,7 +32,7 @@ accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup |---|---| | `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） | | `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） | -| `packages/skin/ui` | @ui-arch/ui：71 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | +| `packages/skin/ui` | @ui-arch/ui：72 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） | | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server | | `apps/demo` | 交互演示（esbuild 打包成单文件） | diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 9655084..bc468e4 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -27,6 +27,7 @@ import { colorPicker, timePicker, commandPalette, + copyButton, dataTable, datePicker, transfer, @@ -1093,6 +1094,18 @@ const content = h( ), h('div', { class: 'row' }, pinInput({ value: signal(''), length: 6, disabled: true })), ), + section( + 'sec-copybutton', + '复制按钮', + 'copyButton：点击写入剪贴板，成功后短暂换成「已复制」再还原；text 可传函数取实时值，剪贴板 API 不可用时自动降级 execCommand。', + h( + 'div', + { class: 'row' }, + copyButton({ text: 'npm install @ui-arch/ui', onCopied: (t) => toast.success(`已复制：${t}`) }), + copyButton({ text: () => pinCode() || '尚未输入验证码', label: '复制上方验证码' }), + copyButton({ text: '禁用态示例', disabled: true }), + ), + ), section( 'sec-affix', '固钉', diff --git a/llms-full.txt b/llms-full.txt index 668802f..cef99d8 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T13:22:26.722Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T13:25:25.456Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -2046,6 +2046,33 @@ const code = signal(''); pinInput({ value: code, length: 6, onChange: (v) => con 现场演示：apps/docs/demo.html#sec-pininput +### copyButton — 复制按钮 CopyButton + +参数： + +- text（必填）：string | (() => string) —— 待复制内容；传函数则在点击瞬间取实时值（如输入框当前值） +- label（默认 复制）：string —— 按钮文案 +- copiedLabel（默认 已复制）：string —— 复制成功后的短暂文案（2s 后还原为 label） +- variant（默认 ghost）：'primary' | 'ghost' | 'danger' —— 视觉强度，沿用按钮三档 +- size（默认 md）：'sm' | 'md' | 'lg' —— 高度档位 +- disabled：boolean | Signal —— 禁用态：布尔直接置位，传信号则动态同步 +- onCopied（回调）：(text: string) => void —— 复制成功回调（参数为实际写入的内容） + +示例： + +``` +copyButton({ text: 'npm install @ui-arch/ui', onCopied: (t) => console.log(t) }) +``` + +手把手： + +1. 传 text 即可用，缺省幽灵按钮、文案「复制」；复制成功后短暂换成「已复制」，2s 自动还原 +2. 内容需要实时取就传函数：text: () => textFieldValue()，点击瞬间才求值 +3. label / copiedLabel 可改文案；variant / size 透传给内部 button，视觉与普通按钮完全一致 +4. 非安全上下文（http）或旧浏览器自动降级为隐藏 textarea + execCommand，无需业务处理兼容 + +现场演示：apps/docs/demo.html#sec-copybutton + API 速览： - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交） @@ -2121,6 +2148,7 @@ API 速览： - commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄 - timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起 - pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示 +- copyButton(props)：复制按钮，点击把 text 写入剪贴板并短暂显示已复制，text 可传函数取实时值，clipboard API 不可用时降级 execCommand 一行用法： diff --git a/llms.txt b/llms.txt index 2b90a0f..4505e83 100644 --- a/llms.txt +++ b/llms.txt @@ -120,6 +120,7 @@ - commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄 - timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起 - pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示 + - copyButton(props)：复制按钮，点击把 text 写入剪贴板并短暂显示已复制，text 可传函数取实时值，clipboard API 不可用时降级 execCommand - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')` - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调 diff --git a/packages/skin/ui/src/copyButton.ts b/packages/skin/ui/src/copyButton.ts new file mode 100644 index 0000000..5576d3f --- /dev/null +++ b/packages/skin/ui/src/copyButton.ts @@ -0,0 +1,32 @@ +import { h, signal } from '@ui-arch/frame'; +import type { CopyButtonProps } from './types.js'; + +/*** 复制按钮：点击把 text 写入剪贴板，成功后短暂换成已复制文案再还原；clipboard API 不可用时降级 execCommand ***/ +export function copyButton(props: CopyButtonProps): HTMLElement { + const label = signal(props.label ?? '复制'); // 文案信号：成功后短暂切换（h() 对函数型子节点响应式刷新） + let timer = 0; // 还原定时器句柄：连点时先清旧计时，避免文案提前回跳 + + /*** 写入剪贴板：标准 API 优先，失败（http 上下文 / 旧浏览器）走隐藏 textarea + execCommand 兜底 ***/ + const write = async (): Promise => { + const text = typeof props.text === 'function' ? props.text() : props.text; // 函数形式取实时值 + try { + await navigator.clipboard.writeText(text); + } catch { + const ta = document.createElement('textarea'); + ta.value = text; + ta.style.position = 'fixed'; + ta.style.opacity = '0'; + document.body.append(ta); + ta.select(); + document.execCommand('copy'); // 降级路径：依赖临时选区 + ta.remove(); + } + label(props.copiedLabel ?? '已复制'); + if (props.onCopied) props.onCopied(text); + clearTimeout(timer); + timer = window.setTimeout(() => label(props.label ?? '复制'), 2000); // 2s 后还原文案 + }; + + // 直接构造按钮（ButtonProps.label 收窄为 string，无法传信号，复用会破坏其类型口径） + return h('button', { class: `ua-btn ua-btn-${props.variant ?? 'ghost'}${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`, type: 'button', disabled: props.disabled, onClick: () => { void write(); } }, label); +} diff --git a/packages/skin/ui/src/index.ts b/packages/skin/ui/src/index.ts index a720714..32610cd 100644 --- a/packages/skin/ui/src/index.ts +++ b/packages/skin/ui/src/index.ts @@ -71,3 +71,4 @@ export { virtualList } from './virtualList.js'; export { commandPalette } from './commandPalette.js'; export { timePicker } from './timePicker.js'; export { pinInput } from './pinInput.js'; +export { copyButton } from './copyButton.js'; diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 03eb6ec..00c948b 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -254,6 +254,17 @@ export interface PinInputProps { onChange?: (value: string) => void; // 任一格变化回调（参数为当前已输入拼接串） } +/*** 复制按钮入参 ***/ +export interface CopyButtonProps { + text: string | (() => string); // 待复制内容；传函数则在点击瞬间取实时值 + label?: string; // 按钮文案；缺省「复制」 + copiedLabel?: string; // 复制成功后的短暂文案（2s 后还原）；缺省「已复制」 + variant?: 'primary' | 'ghost' | 'danger'; // 视觉强度；缺省 ghost + size?: 'sm' | 'md' | 'lg'; // 高度档位；缺省 md + disabled?: boolean | Signal; // 禁用态：布尔直接置位，传信号则动态同步 + onCopied?: (text: string) => void; // 复制成功回调（参数为实际写入的内容） +} + /*** 空状态入参 ***/ export interface EmptyProps { title?: string; // 主标题；缺省不渲染 diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 16a1cf4..05505e1 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -85,7 +85,8 @@ "virtualList(props)：虚拟列表，固定行高长列表只渲染可视窗口 + 上下缓冲条，万级数据滚动不随总量掉帧；返回 { el, scrollTo } 句柄", "commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄", "timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起", - "pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示" + "pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示", + "copyButton(props)：复制按钮，点击把 text 写入剪贴板并短暂显示已复制，text 可传函数取实时值，clipboard API 不可用时降级 execCommand" ], "keyTypes": [ "ButtonProps", @@ -3752,6 +3753,61 @@ "粘贴会自动分发：整段验证码（位数 ≥ 格数）从首格铺起，零散片段从当前格续填", "mask: true 走密文显示并声明 one-time-code，短信验证码可自动填充；disabled 支持布尔或信号禁用" ] + }, + { + "id": "copyButton", + "title": "复制按钮 CopyButton", + "demo": "sec-copybutton", + "props": [ + { + "n": "text", + "t": "string | (() => string)", + "r": 1, + "d": "待复制内容；传函数则在点击瞬间取实时值（如输入框当前值）" + }, + { + "n": "label", + "t": "string", + "df": "复制", + "d": "按钮文案" + }, + { + "n": "copiedLabel", + "t": "string", + "df": "已复制", + "d": "复制成功后的短暂文案（2s 后还原为 label）" + }, + { + "n": "variant", + "t": "'primary' | 'ghost' | 'danger'", + "df": "ghost", + "d": "视觉强度，沿用按钮三档" + }, + { + "n": "size", + "t": "'sm' | 'md' | 'lg'", + "df": "md", + "d": "高度档位" + }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用态：布尔直接置位，传信号则动态同步" + }, + { + "n": "onCopied", + "t": "(text: string) => void", + "k": 1, + "d": "复制成功回调（参数为实际写入的内容）" + } + ], + "example": "copyButton({ text: 'npm install @ui-arch/ui', onCopied: (t) => console.log(t) })", + "steps": [ + "传 text 即可用，缺省幽灵按钮、文案「复制」；复制成功后短暂换成「已复制」，2s 自动还原", + "内容需要实时取就传函数：text: () => textFieldValue()，点击瞬间才求值", + "label / copiedLabel 可改文案；variant / size 透传给内部 button，视觉与普通按钮完全一致", + "非安全上下文（http）或旧浏览器自动降级为隐藏 textarea + execCommand，无需业务处理兼容" + ] } ] }