@a2simcode/ui 0.0.46 → 0.0.47

package/.cursor/skills/ui-component-helper/README.md

@@ -0,0 +1,43 @@
+# UI Component Helper Skill
+
+这是一个 Cursor AI 技能文件，用于帮助在使用 `@a2simcode/ui` 和 `@a2simcode/dui` 组件的项目中获取组件的使用说明、Props 定义和示例。
+
+## 安装方式
+
+### 方式一：复制到项目本地（推荐）
+
+1. 在你的项目根目录创建 `.cursor/skills/ui-component-helper/` 目录
+2. 将 `node_modules/@a2simcode/ui/.cursor/skills/ui-component-helper/SKILL.md` 复制到 `.cursor/skills/ui-component-helper/SKILL.md`
+
+```bash
+mkdir -p .cursor/skills/ui-component-helper
+cp node_modules/@a2simcode/ui/.cursor/skills/ui-component-helper/SKILL.md .cursor/skills/ui-component-helper/SKILL.md
+```
+
+### 方式二：使用符号链接
+
+```bash
+mkdir -p .cursor/skills
+ln -s ../../node_modules/@a2simcode/ui/.cursor/skills/ui-component-helper .cursor/skills/ui-component-helper
+```
+
+## 使用方法
+
+安装后，当你询问组件用法时，Cursor AI 会自动使用此技能来查找：
+
+- 组件的 Props、Events、Slots 定义（从 Meta 数据文件）
+- 组件的使用文档（从 Markdown 文档）
+- 组件的代码示例（从示例文件）
+
+## 示例问题
+
+- "j-button 组件有哪些属性？"
+- "怎么使用 j-table 组件？"
+- "d-drag 组件的 API 是什么？"
+- "给我一个 input 组件的示例"
+
+## 注意事项
+
+- 此技能会自动从 `node_modules/@a2simcode/ui` 和 `node_modules/@a2simcode/dui` 中查找文档
+- 如果文档不存在于 node_modules 中，会尝试从项目源码路径查找（适用于开发环境）
+- 确保已安装 `@a2simcode/ui` 或 `@a2simcode/dui` 包

package/.cursor/skills/ui-component-helper/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: 'ui-component-helper'
+description: '获取 @a2simcode/ui 和 @a2simcode/dui 组件的使用说明、Props 定义和示例。当用户询问组件用法或编写组件代码时调用。'
+---
+
+# UI Component Helper
+
+此 Skill 用于帮助用户查找和理解 `@a2simcode/ui` 和 `@a2simcode/dui` 组件的使用方法。它会结合**官方文档元数据**、**文档说明**和**组件源码**来提供最准确的信息。
+
+## 查找策略
+
+**优先级：Meta 数据 (API) > 文档说明 (Guide) > 源码 (Source)**
+
+### 路径查找策略
+
+首先尝试从 npm 包中查找（适用于通过 npm 安装的项目），如果找不到则尝试从项目源码中查找：
+
+1. **优先查找 node_modules**：
+   - UI 组件 Meta: `node_modules/@a2simcode/ui/docs/components/meta/`
+   - DUI 组件 Meta: `node_modules/@a2simcode/dui/docs-dui/components/meta/`
+   - UI 组件文档: `node_modules/@a2simcode/ui/docs/components/`
+   - DUI 组件文档: `node_modules/@a2simcode/dui/docs-dui/components/`
+   - UI 组件示例: `node_modules/@a2simcode/ui/docs/examples/`
+   - DUI 组件示例: `node_modules/@a2simcode/dui/docs-dui/examples/`
+
+2. **备选：项目源码路径**（开发环境）：
+   - UI 组件 Meta: `docs/components/meta/`
+   - DUI 组件 Meta: `docs-dui/components/meta/`
+   - UI 组件文档: `docs/components/`
+   - DUI 组件文档: `docs-dui/components/`
+   - UI 组件示例: `docs/examples/`
+   - DUI 组件示例: `docs-dui/examples/`
+
+## 核心步骤
+
+### 第一步：定位组件和 API 定义
+
+1. **识别组件名称**：如 `button` (对应 `j-button`), `drag` (对应 `d-drag`)。
+2. **查找 Meta 数据**（按优先级顺序）：
+   - 首先尝试：`node_modules/@a2simcode/ui/docs/components/meta/<component>.ts` 或 `node_modules/@a2simcode/dui/docs-dui/components/meta/<component>.ts`
+   - 如果不存在，尝试：`docs/components/meta/<component>.ts` 或 `docs-dui/components/meta/<component>.ts`
+   - **关键**：读取此文件以获取结构化的 `props`, `events` 等定义。这是回答"有哪些属性/参数"的最准确来源。
+
+### 第二步：查找文档和示例
+
+1. **查找 Markdown 文档**（按优先级顺序）：
+   - 首先尝试：`node_modules/@a2simcode/ui/docs/components/<component>.md` 或 `node_modules/@a2simcode/dui/docs-dui/components/<component>.md`
+   - 如果不存在，尝试：`docs/components/<component>.md` 或 `docs-dui/components/<component>.md`
+   - 获取组件的功能描述。
+
+2. **查找示例代码**（按优先级顺序）：
+   - 首先尝试：`node_modules/@a2simcode/ui/docs/examples/<component>/basic.vue` 或 `node_modules/@a2simcode/dui/docs-dui/examples/<component>/basic.vue`
+   - 如果不存在，尝试：`docs/examples/<component>/basic.vue` 或 `docs-dui/examples/<component>/basic.vue`
+   - 优先查看 `basic.vue` (基础用法)。
+
+### 第三步：查阅源码 (备选)
+
+- 仅当 Meta 数据和文档都缺失，或需要了解内部实现细节时，才去查看源码：
+  - UI: `node_modules/@a2simcode/ui/packages/components/` 或 `packages/components/`
+  - DUI: `node_modules/@a2simcode/dui/packages/components-dui/` 或 `packages/components-dui/`
+
+### 第四步：综合回答
+
+1. **功能概述**：基于 Markdown 文档。
+2. **API 详细说明**：基于 Meta (`.ts`) 文件中的数据，列出 Props、Events 等。
+3. **代码示例**：引用 `examples/` 中的代码。
+
+## 常用组件映射
+
+- `j-button` -> `node_modules/@a2simcode/ui/docs/components/meta/button.ts` (API) & `node_modules/@a2simcode/ui/docs/examples/button/` (示例)
+- `j-table` -> `node_modules/@a2simcode/ui/docs/components/meta/table.ts` (API) & `node_modules/@a2simcode/ui/docs/examples/table/` (示例)
+- `d-drag` -> `node_modules/@a2simcode/dui/docs-dui/components/meta/drag.ts` (API) & `node_modules/@a2simcode/dui/docs-dui/examples/drag/` (示例)
+
+## 行动指南
+
+当用户询问"怎么用 [组件名]"或"[组件名] 有哪些属性"时：
+
+1. **首选**：读取 `node_modules/@a2simcode/ui/docs/components/meta/[组件名].ts` 或 `node_modules/@a2simcode/dui/docs-dui/components/meta/[组件名].ts` 获取 API 参数（如果不存在，尝试项目源码路径）。
+2. **次选**：读取 `node_modules/@a2simcode/ui/docs/components/[组件名].md` 获取描述（如果不存在，尝试项目源码路径）。
+3. **必选**：读取 `node_modules/@a2simcode/ui/docs/examples/[组件名]/basic.vue` 获取基础示例（如果不存在，尝试项目源码路径）。
+4. **回答**：综合以上信息，清晰展示组件用法和参数表。

package/docs/components/autocomplete.md

@@ -0,0 +1,89 @@
+# Autocomplete 自动补全
+
+通过输入部分内容，自动补全其余内容。
+
+## 基础用法
+
+<Demo :source-code="autocompleteBasicCode">
+  <template #source>
+    <autocomplete-basic />
+  </template>
+  <template #description>
+    基础的自动补全输入框用法。
+  </template>
+</Demo>
+
+## 可清除
+
+<Demo :source-code="autocompleteClearableCode">
+  <template #source>
+    <autocomplete-clearable />
+  </template>
+  <template #description>
+    使用 clearable 属性即可得到一个可清除的输入框。
+  </template>
+</Demo>
+
+## 禁用状态
+
+<Demo :source-code="autocompleteDisabledCode">
+  <template #source>
+    <autocomplete-disabled />
+  </template>
+  <template #description>
+    通过 readonly 属性指定是否禁用组件。
+  </template>
+</Demo>
+
+## 自定义模板
+
+<Demo :source-code="autocompleteCustomTemplateCode">
+  <template #source>
+    <autocomplete-custom-template />
+  </template>
+  <template #description>
+    可以自定义下拉建议列表项的内容。
+  </template>
+</Demo>
+
+## 带图标
+
+<Demo :source-code="autocompleteIconCode">
+  <template #source>
+    <autocomplete-icon />
+  </template>
+  <template #description>
+    通过插槽可以在输入框中显示图标。
+  </template>
+</Demo>
+
+## 高级用法
+
+<Demo :source-code="autocompleteAdvancedCode">
+  <template #source>
+    <autocomplete-advanced />
+  </template>
+  <template #description>
+    配置更多高级属性，如防抖时间、是否在获得焦点时显示建议等。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="autocompleteApi" componentName="autocomplete" />
+
+<script setup>
+import AutocompleteBasic from '../examples/autocomplete/basic.vue'
+import AutocompleteClearable from '../examples/autocomplete/clearable.vue'
+import AutocompleteDisabled from '../examples/autocomplete/disabled.vue'
+import AutocompleteCustomTemplate from '../examples/autocomplete/custom-template.vue'
+import AutocompleteIcon from '../examples/autocomplete/icon.vue'
+import AutocompleteAdvanced from '../examples/autocomplete/advanced.vue'
+import autocompleteApi from './meta/autocomplete'
+import autocompleteBasicCode from '../examples/autocomplete/basic.vue?raw'
+import autocompleteClearableCode from '../examples/autocomplete/clearable.vue?raw'
+import autocompleteDisabledCode from '../examples/autocomplete/disabled.vue?raw'
+import autocompleteCustomTemplateCode from '../examples/autocomplete/custom-template.vue?raw'
+import autocompleteIconCode from '../examples/autocomplete/icon.vue?raw'
+import autocompleteAdvancedCode from '../examples/autocomplete/advanced.vue?raw'
+</script>

package/docs/components/barcode.md

@@ -0,0 +1,101 @@
+# Barcode 条码
+
+条码/二维码生成组件，支持多种条码格式和二维码，使用SVG渲染。
+
+## 所有条码类型
+
+组件支持多种条码格式，包括常用零售条码、通用一维码、二维码、邮政编码和医药行业条码。
+
+<Demo :source-code="barcodeAllTypesCode">
+  <template #source>
+    <barcode-all-types />
+  </template>
+  <template #description>
+    展示所有支持的条码类型，包括常用零售条码（EAN-13、EAN-8、UPC-A、UPC-E、ITF-14、GS1-128）、通用一维码（CODE128、CODE39、CODE93、Interleaved 2 of 5、Codabar、MSI）、二维码（QR Code、Micro QR Code、Data Matrix、PDF417、Aztec Code、Hanxin）、邮政编码（USPS OneCode、POSTNET、PLANET、Royal Mail、Japan Post、AUSPOST）和医药行业条码（Pharmacode、CODE32、HIBCCode128、PZN）。
+  </template>
+</Demo>
+
+## 几何尺寸属性
+
+控制条码的尺寸、缩放和旋转。
+
+<Demo :source-code="barcodePropsGeometryCode">
+  <template #source>
+    <barcode-props-geometry />
+  </template>
+  <template #description>
+    展示几何尺寸相关属性：scale（整体缩放比例）、scaleX/scaleY（水平和垂直缩放）、height（一维码高度）、rotate（旋转角度：N/R/L/I）。
+  </template>
+</Demo>
+
+## 颜色与外观属性
+
+自定义条码的颜色、背景和内边距。
+
+<Demo :source-code="barcodePropsAppearanceCode">
+  <template #source>
+    <barcode-props-appearance />
+  </template>
+  <template #description>
+    展示颜色与外观相关属性：barcolor（条码前景色）、backgroundcolor（背景色）、padding（内边距）、paddingwidth/paddingheight（左右/上下内边距）、inkspread（油墨扩散补偿）。
+  </template>
+</Demo>
+
+## 文本设置属性
+
+控制条码下方人眼可读文本的显示方式。
+
+<Demo :source-code="barcodePropsTextCode">
+  <template #source>
+    <barcode-props-text />
+  </template>
+  <template #description>
+    展示文本设置相关属性：includetext（是否显示文本）、alttext（替代显示文本）、textfont（字体：OCR-A/OCR-B/Helvetica/Courier）、textsize（字体大小）、textxalign/textyalign（文本对齐方式）、textxoffset/textyoffset（文本偏移）、textcolor（文本颜色）。
+  </template>
+</Demo>
+
+## 校验与逻辑属性
+
+控制条码的校验位显示和字符解析。
+
+<Demo :source-code="barcodePropsLogicCode">
+  <template #source>
+    <barcode-props-logic />
+  </template>
+  <template #description>
+    展示校验与逻辑相关属性：includecheck（在文本中包含校验位）、includecheckintext（针对特定码制的校验位显示）、parse（启用转义字符解析）、parsefnc（启用功能字符解析）、guardwhitespace（强制显示两侧静区）、guardwidth（静区宽度）。
+  </template>
+</Demo>
+
+## 专用条码参数
+
+针对特定条码类型的专用参数设置。
+
+<Demo :source-code="barcodePropsSymbologyCode">
+  <template #source>
+    <barcode-props-symbology />
+  </template>
+  <template #description>
+    展示专用条码参数：eclevel（QR码/Aztec纠错等级：L/M/Q/H）、version（QR码强制版本：1-40）、format（Data Matrix形状：square/rect）、columns/rows（PDF417列数/行数）、errorlevel（PDF417纠错等级：0-8）。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="barcodeApi" componentName="barcode" />
+
+<script setup>
+import BarcodeAllTypes from '../examples/barcode/all-types.vue'
+import BarcodePropsGeometry from '../examples/barcode/props-geometry.vue'
+import BarcodePropsAppearance from '../examples/barcode/props-appearance.vue'
+import BarcodePropsText from '../examples/barcode/props-text.vue'
+import BarcodePropsLogic from '../examples/barcode/props-logic.vue'
+import BarcodePropsSymbology from '../examples/barcode/props-symbology.vue'
+import barcodeApi from './meta/barcode'
+import barcodeAllTypesCode from '../examples/barcode/all-types.vue?raw'
+import barcodePropsGeometryCode from '../examples/barcode/props-geometry.vue?raw'
+import barcodePropsAppearanceCode from '../examples/barcode/props-appearance.vue?raw'
+import barcodePropsTextCode from '../examples/barcode/props-text.vue?raw'
+import barcodePropsLogicCode from '../examples/barcode/props-logic.vue?raw'
+import barcodePropsSymbologyCode from '../examples/barcode/props-symbology.vue?raw'
+</script>

package/docs/components/button-select.md

@@ -0,0 +1,24 @@
+# ButtonSelect 按钮选择
+
+通过点击按钮弹出选项面板，支持搜索与多次添加。
+
+## 基础用法
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <button-select-basic />
+  </template>
+  <template #description>
+    使用 v-model 以逗号分隔的字符串记录已选择项。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="buttonSelectApi" componentName="button-select" />
+
+<script setup>
+import ButtonSelectBasic from '../examples/button-select/basic.vue'
+import buttonSelectApi from './meta/button-select'
+import basicCode from '../examples/button-select/basic.vue?raw'
+</script>

package/docs/components/button.md

@@ -0,0 +1,117 @@
+# Button 按钮
+
+常用的操作按钮。
+
+## 按钮类型
+
+使用 `type` 属性来定义按钮的样式。
+
+<Demo :source-code="buttonTypeCode">
+  <template #source>
+    <button-type />
+  </template>
+  <template #description>
+    按钮有五种类型：主要按钮、次要按钮（默认）、虚框按钮、文字按钮和链接按钮。
+  </template>
+</Demo>
+
+## 图标按钮
+
+使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
+
+<Demo :source-code="buttonBasicCode">
+  <template #source>
+    <button-basic />
+  </template>
+  <template #description>
+    可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
+  </template>
+</Demo>
+
+## 加载状态
+
+使用 `loading` 属性来设置旋转的加载图标。
+
+<Demo :source-code="buttonLoadingCode">
+  <template #source>
+    <button-loading />
+  </template>
+  <template #description>
+    设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
+  </template>
+</Demo>
+
+## 按钮形状
+
+使用 `shape` 属性定义按钮形状。
+
+<Demo :source-code="buttonShapeCode">
+  <template #source>
+    <button-shape />
+  </template>
+  <template #description>
+    支持 `default`、`circle`、`round` 三种形状。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Button 组件提供三种尺寸。
+
+<Demo :source-code="buttonSizeCode">
+  <template #source>
+    <button-size />
+  </template>
+  <template #description>
+    使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
+  </template>
+</Demo>
+
+## 禁用状态
+
+使用 `disabled` 属性来定义按钮是否被禁用。
+
+<Demo :source-code="buttonDisabledCode">
+  <template #source>
+    <button-disabled />
+  </template>
+  <template #description>
+    你可以使用 `disabled` 属性来定义按钮是否可用。
+  </template>
+</Demo>
+
+## 危险按钮 & 幽灵按钮
+
+`danger` 属性用于表示危险操作。`ghost` 属性使按钮背景透明,常用于深色背景。
+
+<Demo :source-code="buttonDangerGhostCode">
+  <template #source>
+    <button-danger-ghost />
+  </template>
+  <template #description>
+    危险按钮通常用于删除等不可逆操作。幽灵按钮则常用于有背景色的界面。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="buttonApi" componentName="button" />
+
+<script setup>
+import ButtonType from '../examples/button/type.vue'
+import ButtonBasic from '../examples/button/basic.vue'
+import ButtonLoading from '../examples/button/loading.vue'
+import ButtonShape from '../examples/button/shape.vue'
+import ButtonSize from '../examples/button/size.vue'
+import ButtonDisabled from '../examples/button/disabled.vue'
+import ButtonDangerGhost from '../examples/button/danger-ghost.vue'
+import buttonApi from './meta/button'
+
+import buttonTypeCode from '../examples/button/type.vue?raw'
+import buttonBasicCode from '../examples/button/basic.vue?raw'
+import buttonLoadingCode from '../examples/button/loading.vue?raw'
+import buttonShapeCode from '../examples/button/shape.vue?raw'
+import buttonSizeCode from '../examples/button/size.vue?raw'
+import buttonDisabledCode from '../examples/button/disabled.vue?raw'
+import buttonDangerGhostCode from '../examples/button/danger-ghost.vue?raw'
+</script>

package/docs/components/buttons.md

@@ -0,0 +1,119 @@
+# Buttons 按钮组
+
+用于批量管理和展示按钮，支持分组、下拉菜单等功能。
+
+## 基础用法
+
+通过 `list` 属性传入按钮配置数组。
+
+<Demo :source-code="buttonsBasicCode">
+  <template #source>
+    <buttons-basic />
+  </template>
+  <template #description>
+    每个按钮项需要包含唯一的 `id` 标识，可配置 `label`、`click` 等属性，`type`、`icon` 等属性需配置在 `config` 对象中。
+  </template>
+</Demo>
+
+## 按钮分组
+
+通过设置 `groupId` 可以将按钮自动分组展示。
+
+<Demo :source-code="buttonsGroupCode">
+  <template #source>
+    <buttons-group />
+  </template>
+  <template #description>
+    相同 `groupId` 的按钮会紧凑显示在一起，不同组之间会有间距。
+  </template>
+</Demo>
+
+## 下拉菜单
+
+通过 `children` 属性可以创建带下拉菜单的按钮。
+
+<Demo :source-code="buttonsDropdownCode">
+  <template #source>
+    <buttons-dropdown />
+  </template>
+  <template #description>
+    配置 `children` 数组后，子按钮会以下拉形式展示，适合放置次要操作。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+通过 `size` 属性设置按钮组内所有按钮的尺寸。
+
+<Demo :source-code="buttonsSizeCode">
+  <template #source>
+    <buttons-size />
+  </template>
+  <template #description>
+    支持 `large`、`default`、`small` 三种尺寸。
+  </template>
+</Demo>
+
+## 链接形式
+
+通过 `isLink` 属性可以将所有按钮以链接形式展示。
+
+<Demo :source-code="buttonsLinkCode">
+  <template #source>
+    <buttons-link />
+  </template>
+  <template #description>
+    设置 `isLink` 为 `true` 后，所有按钮都会以链接形式展示。
+  </template>
+</Demo>
+
+## 禁用状态
+
+通过按钮项的 `disabled` 属性可以禁用单个按钮。
+
+<Demo :source-code="buttonsDisabledCode">
+  <template #source>
+    <buttons-disabled />
+  </template>
+  <template #description>
+    禁用的按钮不会触发点击事件。
+  </template>
+</Demo>
+
+## 点击打开弹窗
+
+演示通过按钮点击事件打开弹窗。
+
+<Demo :source-code="buttonsPopupCode">
+  <template #source>
+    <buttons-popup />
+  </template>
+  <template #description>
+    在 `click` 事件回调中解构获取 `openLayer` 方法，通过它动态打开弹窗。
+  </template>
+</Demo>
+
+## API
+
+### Buttons 属性
+
+<ApiTable :data="buttonsApi" componentName="buttons" />
+
+<script setup>
+import ButtonsBasic from '../examples/buttons/basic.vue'
+import ButtonsGroup from '../examples/buttons/group.vue'
+import ButtonsDropdown from '../examples/buttons/dropdown.vue'
+import ButtonsSize from '../examples/buttons/size.vue'
+import ButtonsLink from '../examples/buttons/link.vue'
+import ButtonsDisabled from '../examples/buttons/disabled.vue'
+import ButtonsPopup from '../examples/buttons/popup.vue'
+import buttonsApi from './meta/buttons'
+
+import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
+import buttonsGroupCode from '../examples/buttons/group.vue?raw'
+import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
+import buttonsSizeCode from '../examples/buttons/size.vue?raw'
+import buttonsLinkCode from '../examples/buttons/link.vue?raw'
+import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
+import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
+</script>