@icc-grow/web-components 1.0.0

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

@@ -0,0 +1,25 @@
+# ILoading
+
+加载中，指令 + 服务两种模式。
+
+**指令 v-loading**
+
+```vue
+<ITable v-loading="loading" :data="list" :columns="columns" />
+```
+
+**服务调用**
+
+```typescript
+import { ILoading } from '@icc-grow/web-components'
+
+const instance = ILoading.service({
+  target: '#container',  // 目标容器，默认 document.body
+  text: '加载中...',
+  delay: 500,            // 延迟展示(ms)
+  minDuration: 300,      // 最短展示(ms)
+})
+
+instance.close()
+instance.setText('正在处理...')
+```

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

@@ -0,0 +1,22 @@
+# IMenu
+
+侧边导航菜单。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| items | `MenuRawData[]` | — | 菜单数据源（**必填**） |
+| props | `{ label?: string; icon?: string; children?: string; disabled?: string }` | — | 字段映射 |
+| rowKey | `string \| ((data) => MenuKey)` | `'value'` | 唯一标识 |
+| accordion | `boolean` | `true` | 手风琴 |
+| collapseBreakpoint | `number` | — | 自动折叠断点(px) |
+| indent | `number` | `30` | 每级缩进(px) |
+| collapsed | `boolean` | `false` | 折叠（**v-model:collapsed**） |
+| width | `number` | — | 宽度 |
+
+**Events**: `select` — `(item, ancestorChain)` · `collapse-change` — `(collapsed)`
+
+**Slots**: `item` — `{ raw, depth, active, isParent }`
+
+**Expose**: `collapse()` `expand()` `isCollapsed`

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

@@ -0,0 +1,51 @@
+# IPopover / ITooltip
+
+## IPopover
+
+点击/悬停弹出富文本浮层。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| placement | `Placement` | `'bottom'` | 弹出位置 |
+| trigger | `'click' \| 'hover'` | `'click'` | 触发方式 |
+| visible | `boolean` | — | v-model:visible |
+| content | `string` | — | 文本内容 |
+| title | `string` | — | 标题 |
+| offset | `number` | — | 偏移量(px) |
+| showArrow | `boolean` | `true` | 箭头 |
+| openDelay | `number` | — | 打开延迟(ms) |
+| closeDelay | `number` | — | 关闭延迟(ms) |
+| disabled | `boolean` | `false` | 禁用 |
+| width | `number \| string` | — | 宽度 |
+| sameWidth | `boolean` | `false` | 宽度跟随触发器 |
+
+**Events**: `show` `hide`
+
+**Slots**: `default`（触发器）、`content`（弹出内容）
+
+**Expose**: `show()` `hide()`
+
+---
+
+## ITooltip
+
+纯文字提示，组件/指令双模式。
+
+**组件 Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| content | `string` | — | 提示内容 |
+| placement | `Placement` | `'top'` | 位置 |
+| trigger | `'hover' \| 'click' \| 'focus'` | `'hover'` | 触发 |
+| theme | `'dark' \| 'light'` | `'dark'` | 主题 |
+| disabled | `boolean` | `false` | 禁用 |
+
+**指令 v-tooltip**
+
+```vue
+<IButton v-tooltip="'提示文字'">按钮</IButton>
+<IButton v-tooltip="{ content: '提示', placement: 'right' }">按钮</IButton>
+```

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

@@ -0,0 +1,14 @@
+# IProgress
+
+进度条（线性模式）。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| percentage | `number` | — | 进度值 0-100（**必填**） |
+| label | `string` | — | 顶部标签文案 |
+| showValue | `boolean` | `false` | 显示进度文案 |
+| format | `(percentage) => string` | — | 自定义进度文案 |
+| height | `number` | — | 进度条高度(px) |
+| status | `'normal' \| 'success' \| 'warning' \| 'error'` | `'normal'` | 状态样式 |

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

@@ -0,0 +1,20 @@
+# IScrollbar
+
+自定义滚动条容器。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| height | `string \| number` | — | 容器高度 |
+| maxHeight | `string \| number` | — | 最大高度 |
+| tag | `string` | `'div'` | view 层标签 |
+| always | `boolean` | `false` | 始终显示滚动条 |
+| minThumbSize | `number` | — | 滑块最小尺寸(px) |
+| noresize | `boolean` | `false` | 关闭 ResizeObserver |
+| wrapClass | `string` | — | 滚动容器类名 |
+| contentClass | `string` | — | 内容容器类名 |
+
+**Events**: `scroll` — `({ scrollTop, scrollLeft })`
+
+**Expose**: `scrollTo(options)` `update()` `wrapRef`

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

@@ -0,0 +1,15 @@
+# ISpace
+
+间距布局组件。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | 排列方向 |
+| size | `number` | `8` | 间距(px) |
+| align | `'start' \| 'center' \| 'end' \| 'baseline'` | — | 交叉轴对齐 |
+| wrap | `boolean` | `false` | 自动换行 |
+| fill | `boolean` | `false` | 子元素撑满 |
+
+**Slots**: `default`

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

@@ -0,0 +1,12 @@
+# ISteps
+
+步骤条，数据驱动。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| active | `number` | `0` | 当前步骤（**v-model:active**），从 0 开始 |
+| items | `StepItem[]` | — | 步骤数据（**必填**） |
+
+**StepItem**: `{ title: string; description?: string }`

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

@@ -0,0 +1,16 @@
+# ITabs
+
+标签页，数据驱动。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| options | `TabItem[]` | — | 标签数据（**必填**） |
+| disabled | `boolean` | `false` | 全局禁用 |
+| authList | `string[]` | — | 权限列表 |
+| authMethod | `(code, tab) => boolean` | — | 权限判断 |
+
+**TabItem**: `{ label, value, count?, disabled?, authCode? }`
+
+**Events**: `change` — `(value: TabValue)`

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

@@ -0,0 +1,35 @@
+# ITag / ITagGroup
+
+## ITag
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| type | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` | 类型 |
+| disabled | `boolean` | `false` | 禁用 |
+| closable | `boolean` | `false` | 关闭按钮 |
+| round | `boolean` | `false` | 圆角 |
+
+**Events**: `click` `close`
+
+**Slots**: `default` `prefix`
+
+---
+
+## ITagGroup
+
+数据驱动标签组。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| options | `(string \| number \| Record<string, unknown>)[]` | `[]` | 标签数据 |
+| rowKey | `string` | — | 唯一标识字段 |
+| labelKey | `string` | — | 显示文案字段 |
+| tagLimit | `number` | — | 最大展示数，超出折叠 +N |
+| closable | `boolean` | `false` | 关闭按钮 |
+| type | `TagType` | `'default'` | 统一类型 |
+
+**Events**: `remove` — `(option, index)`

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

@@ -0,0 +1,19 @@
+# ITimePicker
+
+时间选择器，HH:mm:ss 滚轮。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| placeholder | `string` | — | 占位文本 |
+| disabled | `boolean` | `false` | 禁用 |
+| clearable | `boolean` | `false` | 可清空 |
+| validateEvent | `boolean` | `true` | 触发表单校验 |
+| disabledHours | `(hour) => boolean` | — | 小时禁用 |
+| disabledMinutes | `(minute, hour) => boolean` | — | 分钟禁用 |
+| disabledSeconds | `(second, hour, minute) => boolean` | — | 秒禁用 |
+
+**Events**: `change` `clear` `visible-change`
+
+**Expose**: `show()` `hide()` `focus()` `blur()`

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

@@ -0,0 +1,17 @@
+# ITransition
+
+统一过渡动画组件。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `'fade' \| 'fade-down' \| 'slide-down' \| 'slide-up' \| 'slide-right' \| 'slide-left' \| 'fade-in-down' \| 'expand-down' \| 'bounce-right'` | — | 动画预设名（**必填**） |
+| duration | `number \| { enter: number; leave: number }` | — | 时长(ms) |
+| appear | `boolean` | `false` | 首次渲染播放进场动画 |
+
+**Events**: `before-enter` `enter` `after-enter` `before-leave` `leave` `after-leave`
+
+```vue
+<ITransition name="fade"><div v-if="show">内容</div></ITransition>
+```

package/skills/icc-web-components/references/i-tree-select.md

@@ -0,0 +1,26 @@
+# ITreeSelect
+
+树形选择器，ISelect 触发器 + ITree 面板。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| data | `Record<string, unknown>[]` | — | 树形数据 |
+| props | `{ children?: string; label?: string; disabled?: string }` | — | 字段映射 |
+| rowKey | `string \| ((data) => TreeKey)` | — | 唯一标识 |
+| multiple | `boolean` | `false` | 多选 |
+| showCheckbox | `boolean \| ((data, node) => boolean)` | `false` | 显示 checkbox |
+| checkStrictly | `boolean` | `false` | 父子不关联 |
+| defaultExpandAll | `boolean` | `false` | 默认全展开 |
+| accordion | `boolean` | `false` | 手风琴 |
+| leafOnly | `boolean` | `false` | 仅选叶子 |
+| limit | `number` | — | 最大可选数 |
+| disabled | `boolean` | `false` | 禁用 |
+| clearable | `boolean` | `false` | 可清空 |
+| placeholder | `string` | — | 占位文本 |
+| tagLimit | `number` | — | 多选 Tag 最多展示数 |
+
+**Events**: `change` `clear` `visible-change` `exceed` `node-click`
+
+**Expose**: `show()` `hide()` `focus()` `blur()`

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

@@ -0,0 +1,34 @@
+# ITree
+
+树形控件，虚拟渲染。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| data | `Record<string, unknown>[]` | — | 树形数据 |
+| props | `{ children?: string; label?: string; disabled?: string; isLeaf?: string }` | — | 字段映射 |
+| rowKey | `string \| ((data) => TreeKey)` | — | 唯一标识 |
+| showCheckbox | `boolean \| ((data, node) => boolean)` | `false` | 显示 checkbox |
+| selectable | `boolean` | `false` | 可点击选中 |
+| multiple | `boolean` | `false` | 多选 |
+| checkStrictly | `boolean` | `false` | 父子不级联 |
+| defaultExpandAll | `boolean` | `false` | 默认全展开 |
+| defaultExpandedKeys | `TreeKey[]` | — | 默认展开节点 |
+| defaultCheckedKeys | `TreeKey[]` | — | 默认选中节点 |
+| accordion | `boolean` | `false` | 手风琴 |
+| leafOnly | `boolean` | `false` | 仅选叶子 |
+| limit | `number` | — | 最大可选数 |
+| height | `string` | — | 容器高度 |
+| maxHeight | `string` | `'500px'` | 最大高度 |
+
+**Events**
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| change | `(checkedKeys, halfCheckedKeys, checkedNodes, halfCheckedNodes)` | 选中变更 |
+| exceed | `(currentCount, limit)` | 超出限制 |
+| load | `(node, resolve)` | 懒加载 |
+| node-click | `(data, node, e)` | 节点点击 |
+
+**Expose**: `getCheckedKeys(leafOnly?)` `getHalfCheckedKeys()` `getCheckedNodes()` `setCheckedKeys(keys)`

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

@@ -0,0 +1,25 @@
+# IUpload
+
+文件上传。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| fileList | `UploadUserFile[]` | `[]` | 文件列表（**v-model:file-list**） |
+| directory | `string` | — | 上传目录 |
+| listType | `'list' \| 'card'` | `'list'` | 展示模式 |
+| accept | `string[]` | — | 允许的文件类型 |
+| multiple | `boolean` | `false` | 多选 |
+| limit | `number` | — | 最大文件数 |
+| maxSize | `number` | — | 单文件最大大小(字节) |
+| autoUpload | `boolean` | `true` | 选中后自动上传 |
+| disabled | `boolean` | `false` | 禁用 |
+
+**Events**: `success` `error` `remove` `exceed` `change`
+
+**Expose**: `submit()` `abort()` `retry(uid)`
+
+```vue
+<IUpload v-model:file-list="files" directory="avatar" list-type="card" :accept="['image/*']" :limit="3" />
+```

package/skills/icc-web-components/references/i-virtual-list.md

@@ -0,0 +1,24 @@
+# IVirtualList
+
+虚拟列表，支持固定/动态高度。
+
+**Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| data | `T[]` | `[]` | 数据源 |
+| rowKey | `keyof T \| string \| ((item) => string \| number)` | — | 唯一标识（**必填**） |
+| itemSize | `number` | — | 预估/固定高度 |
+| dynamic | `boolean` | `false` | 动态高度测量 |
+| buffer | `number` | — | 缓冲区节点数 |
+| height | `string \| number` | — | 容器高度 |
+| maxHeight | `string \| number` | — | 最大高度 |
+| loading | `boolean` | `false` | 加载中 |
+| finished | `boolean` | `false` | 已全部加载 |
+| distance | `number` | — | 触底距离(px) |
+
+**Events**: `scroll` `load`
+
+**Slots**: `default` — `{ item, index }`
+
+**Expose**: `scrollTo()` `scrollToAnchor(index)` `resetSizeCache()`

package/skills/icc-web-components/references/i-virtual-table.md

@@ -0,0 +1,20 @@
+# IVirtualTable
+
+虚拟滚动表格，**API 对齐 ITable**，万级数据量。
+
+> ITable 基础 Props/Events/Expose 见 `i-crud-page.md`，此处仅列出虚拟滚动新增部分。
+
+**额外 Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| rowKey | `string \| ((row) => string)` | — | **必填**，行唯一标识 |
+| itemSize | `number` | `50` | 每行预估高度 |
+| buffer | `number` | `5` | 缓冲区行数 |
+| loading | `boolean` | `false` | 加载中状态 |
+| finished | `boolean` | `false` | 是否已全部加载 |
+| distance | `number` | `50` | 触底距离(px) |
+
+**额外 Events**: `scroll` `load`
+
+**额外 Expose**: `scrollTo()` `scrollToRow(key)` `resetSizeCache()`

package/skills/icc-web-components/rules/composition.md

@@ -0,0 +1,28 @@
+# 组件组合规则
+
+> 多组件组合使用时的正确模式。具体代码见 [crud-list 模式](../patterns/crud-list.md)。
+
+---
+
+## 组件选择优先级
+
+遇到 UI 需求时，按以下顺序选择：
+
+| 优先级 | 方案           | 示例                              |
+| ------ | -------------- | --------------------------------- |
+| 1      | 组件库已有组件 | `IEmpty`, `IConfirm`, `IMessage`  |
+| 2      | 组件库组件组合 | `IDialog` + `IForm`               |
+| 3      | 自定义组件     | 业务特殊需求                      |
+
+---
+
+## 禁止事项速查
+
+| 场景         | ❌ 禁止                    | ✅ 正确方案                                 |
+| ------------ | -------------------------- | ------------------------------------------- |
+| 确认弹窗     | 用 `IDialog` 手写确认弹窗  | `IConfirm({ type, title, content })`        |
+| 消息提示     | 手写 toast / div 通知      | `IMessage.success()` / `.error()`           |
+| 空状态       | 手写空状态 div             | `IEmpty` 组件                               |
+| 加载状态     | 手写 loading 遮罩          | `v-loading` 指令                            |
+| 弹窗表单     | 弹窗 + 表单混在页面组件中  | 抽离为独立子组件（如 `XxxFormDialog.vue`）   |
+| 表格列格式化 | 为简单映射写 template 插槽 | 优先用 `TableColumn.formatter`              |

package/skills/icc-web-components/rules/forms.md

@@ -0,0 +1,28 @@
+# 表单规则
+
+> 表单组件使用规范。完整代码见 [弹窗表单](../patterns/dialog-form.md) / [表单页](../patterns/form-page.md) / [CRUD 列表搜索区](../patterns/crud-list.md)。
+
+---
+
+## 核心原则
+
+| 原则 | 说明 |
+| ---- | ---- |
+| IForm + IFormItem 包裹 | 所有表单控件必须包在 `IForm > IFormItem` 结构中 |
+| 校验规则集中定义 | 统一放 `IForm` 的 `:rules` 属性，禁止散落在各 `IFormItem` 上 |
+| 提交前校验 | `await formRef.value?.validate()` |
+| 重置用 API | `formRef.value?.resetFields()`，禁止手动清空 |
+| 输入控件限宽 | 弹窗用 `w-full`，表单页用 `w-[400px]`，禁止全宽无限制 |
+| Select 数据驱动 | 用 `:options` 传数组，禁止手写 `<option>` 子元素 |
+
+---
+
+## 禁止事项速查
+
+| 禁止 | 替代方案 |
+| ---- | ---- |
+| `<input>` / `<select>` 原生元素 | `IInput` / `ISelect` 等组件 |
+| 不包裹 `IForm` 直接用表单控件 | `IForm + IFormItem` 结构 |
+| 校验规则散落在 `IFormItem` 上 | 统一放 `IForm` 的 `:rules` |
+| 手写搜索区布局 | `IPageLayout #search` 插槽 |
+| 表单输入框不限宽度 | 限制合理的固定宽度 |

package/skills/icc-web-components/rules/styling.md

@@ -0,0 +1,45 @@
+# 样式规则
+
+> 使用 `@icc-grow/web-components` 时的样式编写规范。
+
+---
+
+## 1. 颜色：只用语义 Tailwind Token
+
+组件库通过 CSS 变量 `--i-color-{category}-{opacity}` 定义主题色，Tailwind Preset 自动映射为 class。
+
+**可用语义色**：`primary` / `danger` / `warning` / `success` / `black` / `white` / `gray`
+
+**命名规则**：`{属性}-{语义色}-{透明度}`，透明度数字越小越淡。
+
+```
+bg-primary        ← 主色背景
+text-danger        ← 危险色文字
+bg-primary-5      ← 主色 5% 透明度（很淡的背景）
+border-black-10   ← 黑色 10% 透明度边框
+```
+
+---
+
+## 2. BEM 类名约定
+
+| 层级 | 格式 | 示例 |
+| ---- | ---- | ---- |
+| Block | `{page-name}` | `user-list` |
+| Element | `{page-name}__{el}` | `user-list__header` |
+| Modifier | `{page-name}--{mod}` | `user-list--compact` |
+
+> 组件库内部使用 `i-` 前缀 BEM，页面代码**不要**用 `i-` 前缀。
+
+---
+
+## 3. 禁止事项速查
+
+| 禁止 | 替代方案 |
+| ---- | ---- |
+| 硬编码颜色 `#xxx` / `rgb()` | 语义 token：`bg-primary` / `text-danger` |
+| Tailwind 原生色 `bg-blue-500` | 语义色：`bg-primary` |
+| 手动 `gap-*` / `mr-*` 做按钮间距 | `ISpace` 组件 |
+| `style` 内联写颜色 | Tailwind class |
+| 擅自新增 CSS 变量 | 使用已有变量，不确定时询问 |
+| `border` 缺少 `border-solid` | 表单元素必须显式加 `border-solid` |

package/src/styles/themes/light.css

@@ -0,0 +1,74 @@
+:root {
+  /* 主色 */
+  --i-color-primary: #6e28f8;
+  --i-color-primary-70: rgba(110, 40, 248, 0.7);
+  --i-color-primary-50: rgba(110, 40, 248, 0.5);
+  --i-color-primary-30: rgba(110, 40, 248, 0.3);
+  --i-color-primary-20: rgba(110, 40, 248, 0.2);
+  --i-color-primary-10: rgba(110, 40, 248, 0.1);
+  --i-color-primary-7: rgba(110, 40, 248, 0.07);
+  --i-color-primary-5: rgba(110, 40, 248, 0.05);
+  --i-color-primary-3: rgba(110, 40, 248, 0.03);
+  --i-color-primary-2: rgba(110, 40, 248, 0.02);
+  --i-color-primary-1: rgba(110, 40, 248, 0.01);
+  /* --i-color-primary: #ff2242;
+  --i-color-primary-70: rgba(255, 36, 66, 0.7);
+  --i-color-primary-50: rgba(255, 36, 66, 0.5);
+  --i-color-primary-30: rgba(255, 36, 66, 0.3);
+  --i-color-primary-20: rgba(255, 36, 66, 0.2);
+  --i-color-primary-10: rgba(255, 36, 66, 0.1);
+  --i-color-primary-7: rgba(255, 36, 66, 0.07);
+  --i-color-primary-5: rgba(255, 36, 66, 0.05);
+  --i-color-primary-3: rgba(255, 36, 66, 0.03);
+  --i-color-primary-2: rgba(255, 36, 66, 0.02);
+  --i-color-primary-1: rgba(255, 36, 66, 0.01); */
+
+  /* 辅助色 */
+  /* 危险/删除 */
+  --i-color-danger: #fd6b7e;
+  --i-color-danger-70: rgba(253, 107, 126, 0.7);
+  --i-color-danger-50: rgba(253, 107, 126, 0.5);
+  --i-color-danger-30: rgba(253, 107, 126, 0.3);
+  --i-color-danger-10: rgba(253, 107, 126, 0.1);
+  --i-color-danger-7: rgba(253, 107, 126, 0.07);
+  --i-color-danger-2: rgba(253, 107, 126, 0.02);
+
+  /* 提示 */
+  --i-color-warning: #ffa800;
+  --i-color-warning-70: rgba(255, 168, 0, 0.7);
+  --i-color-warning-50: rgba(255, 168, 0, 0.5);
+  --i-color-warning-30: rgba(255, 168, 0, 0.3);
+  --i-color-warning-10: rgba(255, 168, 0, 0.1);
+  --i-color-warning-7: rgba(255, 168, 0, 0.07);
+
+  /* 成功 */
+  --i-color-success: #00bea2;
+  --i-color-success-70: rgba(0, 190, 162, 0.7);
+  --i-color-success-50: rgba(0, 190, 162, 0.5);
+  --i-color-success-30: rgba(0, 190, 162, 0.3);
+  --i-color-success-10: rgba(0, 190, 162, 0.1);
+  --i-color-success-7: rgba(0, 190, 162, 0.07);
+
+  /* 黑色 */
+  --i-color-black: #000;
+  --i-color-black-70: rgba(0, 0, 0, 0.7);
+  --i-color-black-50: rgba(0, 0, 0, 0.5);
+  --i-color-black-30: rgba(0, 0, 0, 0.3);
+  --i-color-black-20: rgba(0, 0, 0, 0.2);
+  --i-color-black-10: rgba(0, 0, 0, 0.1);
+  --i-color-black-7: rgba(0, 0, 0, 0.07);
+  --i-color-black-5: rgba(0, 0, 0, 0.05);
+  --i-color-black-3: rgba(0, 0, 0, 0.03);
+  --i-color-black-2: rgba(0, 0, 0, 0.02);
+  --i-color-black-1: rgba(0, 0, 0, 0.01);
+
+  /* 灰色 */
+  --i-color-gray: #f7f7f7;
+
+  /* 白色 */
+  --i-color-white: #fff;
+  --i-color-white-70: rgba(255, 255, 255, 0.7);
+  --i-color-white-50: rgba(255, 255, 255, 0.5);
+  --i-color-white-30: rgba(255, 255, 255, 0.3);
+  --i-color-white-10: rgba(255, 255, 255, 0.1);
+}

package/tailwind-preset.ts

@@ -0,0 +1,75 @@
+import type { Config } from 'tailwindcss';
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * 读取主题文件的内容，获取 key，组装到 Tailwind 的 theme.extend.colors 中
+ * @param filePath 主题文件路径（相对于本文件所在目录）
+ */
+function getColorTheme(filePath: string): Record<string, string> {
+  const absolutePath = path.resolve(__dirname, filePath);
+  const themeContent = fs.readFileSync(absolutePath, 'utf-8');
+  // 匹配完整的 CSS 变量名和值（支持 hex、rgba、rgb 等格式）
+  const colorRegex = /--(i-color-[a-zA-Z0-9-]+):\s*([^;]+);/g;
+  const colors: Record<string, string> = {};
+  let match;
+  while ((match = colorRegex.exec(themeContent)) !== null) {
+    const [, fullKey] = match;
+    // 去掉 'i-color-' 前缀作为 Tailwind 的 key
+    const key = fullKey.replace('i-color-', '');
+    colors[key] = `var(--${fullKey})`;
+  }
+  return colors;
+}
+
+/**
+ * 生成像素单位映射
+ * @param max 最大像素值
+ * @param start 最小像素值
+ */
+function generateSpacing(max: number, start = 0): Record<string, string> {
+  const spacing: Record<string, string> = {};
+  for (let i = start; i <= max; i++) {
+    spacing[i] = `${i}px`;
+  }
+  return spacing;
+}
+
+/**
+ * ICC 组件库 Tailwind 预设
+ * 包含统一的颜色 token、间距体系、圆角体系等设计系统配置
+ *
+ * 消费方使用方式：
+ * @example
+ * ```typescript
+ * // tailwind.config.ts
+ * import iccPreset from '@icc-grow/web-components/tailwind-preset';
+ * import type { Config } from 'tailwindcss';
+ *
+ * export default {
+ *   presets: [iccPreset],
+ *   content: ['./src/**\/*.{vue,ts,html}'],
+ * } satisfies Config;
+ * ```
+ */
+const iccPreset: Config = {
+  content: [],
+  theme: {
+    extend: {
+      colors: getColorTheme('./src/styles/themes/light.css'),
+      // 自定义间距单位
+      spacing: generateSpacing(1080),
+      // 自定义圆角单位
+      borderRadius: generateSpacing(100),
+      // 自定义字体大小单位
+      fontSize: generateSpacing(100, 8),
+      // 自定义字体行高大小单位
+      lineHeight: generateSpacing(100, 8),
+      // 自定义边框大小单位
+      borderWidth: generateSpacing(20),
+    },
+  },
+  plugins: [],
+};
+
+export default iccPreset;