@icc-grow/web-components 1.0.0

package/skills/icc-web-components/references/i-card.md

@@ -0,0 +1,12 @@
+# ICard
+
+卡片容器。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| title | `string` | — | 卡片标题 |
+| size | `'small' \| 'large'` | — | 尺寸变体 |
+
+**Slots**: `header`（优先级高于 title）、`default`、`footer`

package/skills/icc-web-components/references/i-color-picker.md

@@ -0,0 +1,17 @@
+# IColorPicker
+
+颜色选择器（弹层触发器模式）。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| format | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | 输出格式 |
+| showAlpha | `boolean` | `false` | 透明度滑条 |
+| swatches | `string[]` | — | 预设颜色色板 |
+| disabled | `boolean` | `false` | 禁用 |
+| panelWidth | `number` | `300` | 面板宽度 |
+
+**Events**: `change` `clear`
+
+> 也可使用 `IColorPickerPanel`（无弹层，独立面板）。

package/skills/icc-web-components/references/i-crud-page.md

@@ -0,0 +1,204 @@
+# CRUD 列表页组合 API
+
+> 本文件覆盖 CRUD 列表页最常见的组件组合，一次读取即可完成整个页面开发。
+
+---
+
+## IPageLayout
+
+页面骨架，Header / Search / Body / Footer 四区域。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| title | `string` | — | 页面主标题 |
+| subtitle | `string` | — | 页面副标题 |
+| isAuth | `boolean` | `true` | 是否有权限，`false` 时展示无权限状态 |
+
+**Slots**
+
+| Slot | Description |
+|------|-------------|
+| header-action | 标题栏右侧操作区 |
+| search | 搜索条件区（放 IPageSearch） |
+| default | 页面主体内容 |
+| footer | 页面底部（放 IPagination） |
+
+---
+
+## IPageSearch
+
+搜索区组件，搭配 IPageLayout 的 `#search` 插槽。
+
+**Slots**
+
+| Slot | Description |
+|------|-------------|
+| default | 搜索控件（IInput, ISelect 等） |
+| action | 操作按钮区（查询、重置） |
+
+---
+
+## IButton
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'primary' \| 'danger' \| 'black'` | — | 按钮类型 |
+| size | `'large' \| 'medium' \| 'small'` | `'medium'` | 尺寸 |
+| disabled | `boolean` | `false` | 禁用 |
+| loading | `boolean` | `false` | 加载中 |
+| icon | `string` | — | 图标名称 |
+| text | `boolean` | `false` | 文字按钮（无背景） |
+| plain | `boolean` | `false` | 朴素按钮（描边） |
+
+**Events**: `click`
+
+---
+
+## IInput
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'text' \| 'password'` | `'text'` | 类型 |
+| placeholder | `string` | — | 占位文本 |
+| clearable | `boolean` | `false` | 一键清空 |
+| showPassword | `boolean` | `false` | 密码切换 |
+| disabled | `boolean` | `false` | 禁用 |
+| readonly | `boolean` | `false` | 只读 |
+| maxlength | `number` | — | 最大长度 |
+| showWordLimit | `boolean` | `false` | 字数统计 |
+
+**Events**: `focus` `blur` `clear` `input` `change`
+
+**Slots**: `prefix` `suffix`
+
+**Expose**: `focus()` `blur()` `select()`
+
+---
+
+## ISelect
+
+选择器，数据驱动。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| options | `Record<string, unknown>[]` | `[]` | 选项数据 |
+| props | `{ label?: string; value?: string; disabled?: string }` | — | 字段映射 |
+| multiple | `boolean` | `false` | 多选 |
+| disabled | `boolean` | `false` | 禁用 |
+| clearable | `boolean` | `false` | 可清空 |
+| placeholder | `string` | — | 占位文本 |
+| filterable | `boolean` | `false` | 可搜索 |
+| remote | `boolean` | `false` | 远程搜索 |
+| tagLimit | `number` | — | 多选 Tag 最多展示数 |
+
+**Events**: `change` `search` `clear` `visible-change`
+
+**Expose**: `show()` `hide()` `focus()` `blur()`
+
+---
+
+## IDatePicker
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'date' \| 'dateTime' \| 'week' \| 'month' \| 'year'` | `'date'` | 类型 |
+| range | `boolean` | `false` | 范围选择 |
+| multiple | `boolean` | `false` | 多选 |
+| format | `string` | — | 显示格式（dayjs） |
+| valueFormat | `string` | — | v-model 输出格式 |
+| placeholder | `string` | — | 占位文本 |
+| endPlaceholder | `string` | — | 范围结束占位文本 |
+| rangeSeparator | `string` | `'~'` | 范围分隔符 |
+| disabled | `boolean` | `false` | 禁用 |
+| clearable | `boolean` | `false` | 可清空 |
+| disabledDate | `(date: Dayjs) => boolean` | — | 禁用日期 |
+
+**Events**: `change` `clear` `visible-change`
+
+**Expose**: `show()` `hide()` `focus()` `blur()`
+
+---
+
+## ITable
+
+列配置驱动表格。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| data | `any[]` | `[]` | 数据源 |
+| columns | `TableColumn[]` | `[]` | 列配置 |
+| height | `string \| number` | — | 固定高度（触发固定表头） |
+| maxHeight | `string \| number` | — | 最大高度 |
+| showSummary | `boolean` | `false` | 显示合计行 |
+| summaryMethod | `(param) => any[]` | — | 自定义合计 |
+| rowKey | `string \| ((row) => string)` | — | 行唯一标识 |
+
+**TableColumn 配置**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| type | `'default' \| 'selection' \| 'index' \| 'radio' \| 'expand'` | 列类型 |
+| label | `string` | 列标题 |
+| prop | `string` | 数据字段名（支持 `'a.b.c'`） |
+| width | `string \| number` | 列宽 |
+| minWidth | `string \| number` | 最小列宽 |
+| align | `'left' \| 'center' \| 'right'` | 对齐 |
+| fixed | `'left' \| 'right'` | 固定列 |
+| formatter | `(row, column, cellValue, index) => any` | 格式化 |
+| sortable | `boolean \| 'custom'` | 排序，`'custom'` 为服务端 |
+| selectable | `(row, index) => boolean` | selection 列禁选 |
+
+**Events**
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| selection-change | `(selection)` | 多选变更 |
+| select | `(selection, row, selected?)` | 单行勾选 |
+| select-all | `(selection)` | 全选 |
+| sort-change | `({ column, prop, order })` | 排序变化 |
+| row-click | `(row, column, event)` | 行点击 |
+| radio-change | `(row)` | 单选行变更 |
+
+**Slots**: `#[prop]` — `{ row, column, $index }`（slot 名 = column.prop）
+
+**Expose**
+
+| Method | Description |
+|--------|-------------|
+| clearSelection() | 清空多选 |
+| getSelection() | 获取多选数据 |
+| setSelection(keys) | 按 rowKey 设置选中 |
+| toggleRowSelection(row, selected?) | 切换行选中 |
+| clearSort() | 清除排序 |
+| clearSelected() | 清除单选 |
+| getSelected() | 获取单选数据 |
+| setSelected(key) | 设置单选 |
+
+---
+
+## IPagination
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| total | `number` | `0` | 总条目数 |
+| currentPage | `number` | `1` | 当前页（**v-model:currentPage**） |
+| pageSize | `number` | `10` | 每页条目（**v-model:pageSize**） |
+| pageSizes | `number[]` | `[10, 20, 50, 100]` | 每页条目选项 |
+| pagerCount | `number` | `5` | 页码按钮数 |
+| hideOnSinglePage | `boolean` | `false` | 单页时隐藏 |
+
+**Events**: `change` — `({ currentPage, pageSize })`

package/skills/icc-web-components/references/i-dialog.md

@@ -0,0 +1,36 @@
+# IDialog / IDrawer
+
+## IDialog
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| visible | `boolean` | — | **v-model:visible** |
+| title | `string` | — | 标题 |
+| width | `string \| number` | — | 面板宽度 |
+| showHeader | `boolean` | `true` | 显示 header |
+| closable | `boolean` | `true` | 关闭按钮 |
+| showOverlay | `boolean` | `true` | 显示遮罩 |
+| closeOnClickOverlay | `boolean` | `true` | 点击遮罩关闭 |
+| closeOnPressEscape | `boolean` | `true` | Esc 关闭 |
+| lockScroll | `boolean` | `true` | 锁定滚动 |
+
+**Events**: `open` `opened` `close` `closed`
+
+**Slots**: `header` `default` `footer`
+
+---
+
+## IDrawer
+
+API 几乎与 IDialog 一致，额外支持方向和尺寸。
+
+**额外/不同 Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| placement | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向 |
+| size | `string \| number` | — | 尺寸（左右=宽度，上下=高度） |
+
+> 其余 Props/Events/Slots 与 IDialog 相同。

package/skills/icc-web-components/references/i-draggable.md

@@ -0,0 +1,46 @@
+# IDraggable / ISortable
+
+## IDraggable
+
+自由拖拽移动 + 调整大小。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| draggable | `boolean` | `true` | 可拖拽移动 |
+| handle | `string` | — | 拖拽手柄选择器 |
+| axis | `'x' \| 'y' \| 'both'` | `'both'` | 轴向约束 |
+| boundary | `'parent' \| 'none' \| HTMLElement` | `'none'` | 边界约束 |
+| resizable | `boolean` | `false` | 可调整大小 |
+| handles | `ResizeHandle[]` | — | resize 方向 |
+| minWidth / maxWidth | `number` | — | 宽度限制 |
+| minHeight / maxHeight | `number` | — | 高度限制 |
+| disabled | `boolean` | `false` | 禁用 |
+| grid | `[number, number]` | — | 网格吸附 |
+| strategy | `'transform' \| 'position'` | `'transform'` | 定位策略 |
+
+**Events**: `dragstart` `drag` `dragend` `resizestart` `resize` `resizeend`
+
+---
+
+## ISortable
+
+拖拽排序列表，FLIP 动画。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| modelValue | `unknown[]` | — | 列表数据（**v-model**） |
+| itemKey | `string \| ((item) => string \| number)` | — | 唯一标识（**必填**） |
+| handle | `string` | — | 拖拽手柄选择器 |
+| direction | `'vertical' \| 'horizontal'` | `'vertical'` | 排列方向 |
+| disabled | `boolean` | `false` | 禁用 |
+| ghostClass | `string` | — | ghost 类名 |
+| animationDuration | `number` | — | 动画时长(ms) |
+| threshold | `number` | — | 触发阈值(px) |
+
+**Events**: `sort-start` — `{ item, index }` · `sort-end` — `{ item, oldIndex, newIndex }`
+
+**Slots**: `default` — `{ item, index, isDragging }`

package/skills/icc-web-components/references/i-dropdown.md

@@ -0,0 +1,21 @@
+# IDropdown
+
+下拉操作菜单。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| items | `DropdownItem[]` | `[]` | 菜单项数据 |
+| disabled | `boolean` | `false` | 禁用 |
+| placement | `Placement` | `'bottom-start'` | 弹出位置 |
+| offset | `number` | — | 偏移量 |
+| width | `number \| string` | — | 宽度 |
+
+**DropdownItem**: `{ label, value, disabled?, type?: 'default' | 'danger' }`
+
+**Events**: `command` — `(item)` ·  `visible-change` — `(visible)`
+
+**Slots**: `default`（触发器）、`item` — `{ item, index, disabled }`
+
+**Expose**: `show()` `hide()`

package/skills/icc-web-components/references/i-empty.md

@@ -0,0 +1,15 @@
+# IEmpty
+
+空状态占位。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| url | `string` | — | 自定义图片 URL |
+| icon | `string` | — | 图标名称 |
+| iconSize | `number \| string` | `48` | 图标尺寸 |
+| desc | `string` | `'暂无数据'` | 描述文本 |
+| height | `number \| string` | `200` | 容器高度 |
+
+**Slots**: `image`（自定义图标区）、`default`（自定义描述区）

package/skills/icc-web-components/references/i-feedback.md

@@ -0,0 +1,50 @@
+# IConfirm / IMessage / INotification
+
+> 三个服务调用组件，**不是 Vue 组件**，纯函数式调用。
+
+## IConfirm
+
+```typescript
+import { IConfirm } from '@icc-grow/web-components'
+
+// type: 'primary' | 'warning' | 'error'
+IConfirm({
+  type: 'warning',
+  title: '确认删除',
+  content: '删除后不可恢复',
+  confirmText: '确定',      // 可选
+  cancelText: '取消',       // 可选
+  showCancelButton: true,    // 可选
+  closable: true,            // 可选
+}).then(() => { /* 确认 */ }).catch(() => { /* 取消 */ })
+
+// 简写
+IConfirm('确定删除吗？').then(...)
+```
+
+## IMessage
+
+```typescript
+import { IMessage } from '@icc-grow/web-components'
+
+IMessage.success('操作成功')
+IMessage.warning('请注意')
+IMessage.error('操作失败')
+
+// 完整配置
+IMessage.success({ content: '保存成功', duration: 3000, closable: true, onClose: () => {} })
+
+IMessage.closeAll()
+```
+
+## INotification
+
+```typescript
+import { INotification } from '@icc-grow/web-components'
+
+// type: 'primary' | 'error'
+INotification({ title: '系统通知', content: '您有一条新消息', duration: 5000 })
+INotification.error({ title: '错误', content: '网络请求失败' })
+
+INotification.closeAll()
+```

package/skills/icc-web-components/references/i-form.md

@@ -0,0 +1,223 @@
+# 表单组合 API
+
+> 本文件覆盖表单页最常见的组件组合，一次读取即可完成表单开发。
+
+---
+
+## IForm
+
+表单容器，提供校验、重置。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| model | `Record<string, unknown>` | — | 表单数据对象（**必填**） |
+| rules | `Rules` (async-validator) | — | 校验规则 |
+| scrollToError | `boolean` | `false` | 校验失败时滚动到第一个错误 |
+
+**Expose**
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| validate | `(callback?) => Promise<void>` | 全量校验 |
+| clearValidate | `(props?) => void` | 清除校验结果 |
+| resetFields | `(props?) => void` | 重置字段并清除校验 |
+
+---
+
+## IFormItem
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| prop | `string` | — | model 中的字段路径（支持 `'a.b.c'`） |
+| label | `string` | — | 标签文本 |
+| subLabel | `string` | — | 补充描述 |
+| count | `number` | — | 数量提示 |
+| showAction | `boolean` | `false` | 标题右侧操作按钮 |
+| actionText | `string` | — | 操作按钮文字 |
+| required | `boolean` | `false` | 必填（* 号 + 自动注入 required 规则） |
+| rules | `RuleItem \| RuleItem[]` | — | 字段校验规则 |
+
+**Events**: `action`
+
+**Slots**: `default`
+
+---
+
+## IInput
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'text' \| 'password'` | `'text'` | 类型 |
+| placeholder | `string` | — | 占位文本 |
+| clearable | `boolean` | `false` | 一键清空 |
+| showPassword | `boolean` | `false` | 密码切换 |
+| disabled | `boolean` | `false` | 禁用 |
+| readonly | `boolean` | `false` | 只读 |
+| maxlength | `number` | — | 最大长度 |
+| showWordLimit | `boolean` | `false` | 字数统计 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+
+**Events**: `focus` `blur` `clear` `input` `change`
+
+**Slots**: `prefix` `suffix`
+
+**Expose**: `focus()` `blur()` `select()`
+
+---
+
+## IInputNumber
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| min | `number` | — | 最小值 |
+| max | `number` | — | 最大值 |
+| step | `number` | — | 步长 |
+| precision | `number` | — | 精度 |
+| placeholder | `string` | — | 占位文本 |
+| clearable | `boolean` | `false` | 清空按钮 |
+| controls | `boolean` | `false` | 步进按钮 |
+| disabled | `boolean` | `false` | 禁用 |
+| readonly | `boolean` | `false` | 只读 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+
+**Events**: `focus` `blur` `input` `change` `clear`
+
+**Expose**: `focus()` `blur()` `select()`
+
+---
+
+## ITextarea
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| placeholder | `string` | — | 占位文本 |
+| clearable | `boolean` | `false` | 一键清空 |
+| disabled | `boolean` | `false` | 禁用 |
+| readonly | `boolean` | `false` | 只读 |
+| maxlength | `number` | — | 最大长度 |
+| showWordLimit | `boolean` | `false` | 字数统计 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+| autosize | `boolean \| { minRows?: number; maxRows?: number }` | `false` | 自适应高度 |
+
+**Events**: `focus` `blur` `clear` `input` `change`
+
+**Expose**: `focus()` `blur()` `select()`
+
+---
+
+## ISelect
+
+选择器，数据驱动。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| options | `Record<string, unknown>[]` | `[]` | 选项数据 |
+| props | `{ label?: string; value?: string; disabled?: string }` | — | 字段映射 |
+| multiple | `boolean` | `false` | 多选 |
+| disabled | `boolean` | `false` | 禁用 |
+| clearable | `boolean` | `false` | 可清空 |
+| placeholder | `string` | — | 占位文本 |
+| filterable | `boolean` | `false` | 可搜索 |
+| remote | `boolean` | `false` | 远程搜索 |
+| tagLimit | `number` | — | 多选 Tag 最多展示数 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+
+**Events**: `change` `search` `clear` `visible-change`
+
+**Expose**: `show()` `hide()` `focus()` `blur()`
+
+---
+
+## IDatePicker
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'date' \| 'dateTime' \| 'week' \| 'month' \| 'year'` | `'date'` | 类型 |
+| range | `boolean` | `false` | 范围选择 |
+| multiple | `boolean` | `false` | 多选 |
+| format | `string` | — | 显示格式（dayjs） |
+| valueFormat | `string` | — | v-model 输出格式 |
+| placeholder | `string` | — | 占位文本 |
+| endPlaceholder | `string` | — | 范围结束占位文本 |
+| disabled | `boolean` | `false` | 禁用 |
+| clearable | `boolean` | `false` | 可清空 |
+| disabledDate | `(date: Dayjs) => boolean` | — | 禁用日期 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+
+**Events**: `change` `clear` `visible-change`
+
+**Expose**: `show()` `hide()` `focus()` `blur()`
+
+---
+
+## ISwitch
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| trueValue | `string \| number \| boolean` | `true` | 开启时的值 |
+| falseValue | `string \| number \| boolean` | `false` | 关闭时的值 |
+| disabled | `boolean` | `false` | 禁用 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+
+**Events**: `change`
+
+---
+
+## ICheckbox / ICheckboxGroup
+
+**ICheckbox Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| value | `string \| number \| boolean` | — | 复选框的值 |
+| trueValue | `string \| number \| boolean` | `true` | 选中时的值（单独使用） |
+| falseValue | `string \| number \| boolean` | `false` | 未选中时的值 |
+| disabled | `boolean` | `false` | 禁用 |
+| indeterminate | `boolean` | `false` | 半选 |
+
+**ICheckboxGroup Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| disabled | `boolean` | `false` | 整组禁用 |
+| min | `number` | — | 最少选中数 |
+| max | `number` | — | 最多选中数 |
+
+**Events**: `change`
+
+---
+
+## IRadio / IRadioGroup
+
+**IRadio Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| value | `string \| number \| boolean` | — | 单选框的值 |
+| disabled | `boolean` | `false` | 禁用 |
+
+**IRadioGroup Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| disabled | `boolean` | `false` | 整组禁用 |
+| size | `number` | — | 间隔(px) |
+| name | `string` | — | 原生 name |
+
+**Events**: `change`

package/skills/icc-web-components/references/i-icon.md

@@ -0,0 +1,21 @@
+# IIcon
+
+iconfont 图标组件。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `string` | — | iconfont class 名，如 `'icon-add'` |
+| size | `number \| string` | — | 图标大小(px) |
+| width | `number \| string` | — | 容器宽度（扩大点击区域） |
+| height | `number \| string` | — | 容器高度 |
+
+**Events**: `click`
+
+**Slots**: `default`（自定义 SVG 图标）
+
+```vue
+<IIcon name="icon-search" :size="16" />
+<IIcon :width="32" :height="32"><MySvgIcon /></IIcon>
+```

package/skills/icc-web-components/references/i-image.md

@@ -0,0 +1,34 @@
+# IImage / IImageGroup
+
+## IImage
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| src | `string` | — | 图片 URL |
+| width | `string \| number` | — | 宽度 |
+| height | `string \| number` | — | 高度 |
+| round | `boolean` | `false` | 圆形裁切 |
+| alt | `string` | — | alt 属性 |
+| fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | — | object-fit |
+| lazy | `boolean` | `false` | 懒加载 |
+| previewSrcList | `string[]` | — | 大图预览列表 |
+| initialIndex | `number` | — | 预览初始索引 |
+
+**Events**: `load` `error` `show`
+
+---
+
+## IImageGroup
+
+批量平铺展示 + 统一画廊预览。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| urlList | `string[]` | — | 图片 URL 列表 |
+| limit | `number \| string` | — | 最大展示数 |
+| gap | `number \| string` | — | 图片间距 |
+| width / height / round / fit / lazy | — | — | 继承 IImage 属性 |