lingee-ui 0.0.6 → 0.0.7

package/dist/tooltip/index.js

@@ -1 +1 @@
-'use strict';var chunkZXRCMMQM_js=require('../chunk-ZXRCMMQM.js');require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Tooltip",{enumerable:true,get:function(){return chunkZXRCMMQM_js.a}});
+'use strict';var chunkP56ABRDC_js=require('../chunk-P56ABRDC.js');require('../chunk-DCDWEVW4.js');Object.defineProperty(exports,"Tooltip",{enumerable:true,get:function(){return chunkP56ABRDC_js.c}});

package/dist/tooltip/index.mjs

@@ -1 +1 @@
-export{a as Tooltip}from'../chunk-LGFBC4UA.mjs';import'../chunk-DN2VKVCV.mjs';
+export{c as Tooltip}from'../chunk-JKY43GCS.mjs';import'../chunk-DN2VKVCV.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lingee-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Kingdee Lingee UI 基础组件库 — React 18+ 轻量级企业 UI 组件",
   "license": "MIT",
   "keywords": [
@@ -26,6 +26,7 @@
   ],
   "files": [
     "dist",
+    "skill",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"
@@ -62,11 +63,15 @@
       "require": "./dist/popover/index.js"
     },
     "./styles.css": "./dist/index.css",
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./skill": "./skill/SKILL.md",
+    "./skill/*": "./skill/*"
   },
   "scripts": {
     "generate-tokens": "node scripts/generate-tokens.js",
-    "build": "tsup",
+    "gen-skill": "node scripts/gen-skill.mjs",
+    "gen-skill:check": "node scripts/gen-skill.mjs --check",
+    "build": "tsup && node scripts/gen-skill.mjs",
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",

package/skill/AGENTS-SNIPPET.md

@@ -0,0 +1,253 @@
+# lingee-ui 组件与 Token 速查
+
+> **本文件由 `packages/lingee-ui/scripts/gen-skill.mjs` 自动生成，禁止手工编辑。**
+> 供根 `AGENTS.md` 引用，避免手写清单随组件库迭代脱节。
+> 组件库 `0.0.7` ｜ 图标库 `1.0.16`
+
+## 可用组件（36）
+
+| 组件 | 名称 | 说明 |
+|------|------|------|
+| `Alert` | 消息通知 | 消息提示组件，用于页面中展示重要的提示信息。 |
+| `Avatar`、`AvatarGroup` | 头像 | 头像组件，用于展示用户头像或图标，支持图片、文字、默认图标三种形态。 |
+| `Button` | 按钮 | 用于触发一个操作，是用户与系统交互的基础元素。 |
+| `Checkbox`、`CheckboxGroup` | 多选框 | 在一组选项中进行多项选择。 |
+| `ColorPicker` | 颜色选择器 | 用于选择颜色值的交互组件。 |
+| `DatePicker` | 日期选择器 | 用于选择日期的输入组件。 |
+| `Dialog` | 弹出窗 | 模态对话框，用于需要用户确认或填写信息的场景。支持声明式和命令式两种调用方式。 |
+| `Divider` | 分割线 | 用于分隔内容区块，使页面结构更清晰。 |
+| `Drawer` | 抽屉 | 从屏幕边缘滑出的浮层面板，用于承载表单或详情内容。 |
+| `Dropdown` +13 个子组件 | 下拉菜单 | 向下弹出的操作菜单列表，支持图标、分组、危险操作、子菜单等。 |
+| `Empty` | 空状态 | 当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。 |
+| `Flex` | 弹性布局 | 弹性布局容器，用于快速搭建横向/纵向排列，避免为简单布局单独写样式文件。 |
+| `Form` | 表单 | 数据录入和校验组件，支持垂直、水平、行内布局。 |
+| `Image` | 图片预览 | 图片展示组件，支持点击放大预览、旋转、缩放等操作。 |
+| `Input` | 输入框 | 用于接收用户的文本输入。 |
+| `Pagination` | 分页 | 当数据量较大时，使用分页拆分数据，方便用户快速定位。 |
+| `Popover` +5 个子组件 | 气泡弹出层 | 点击/悬停在元素上时弹出气泡式浮层，用于承载更多内容。 |
+| `Progress` | 进度条 | 展示操作的当前进度，支持线性和环形两种形态。 |
+| `RadioGroup`、`RadioItem` | 单选 | 单选框组件，用于在一组互斥选项中选择一个。 |
+| `RangePicker` | 日期范围选择器 | 用于选择日期范围的输入组件。 |
+| `ScrollArea`、`ScrollBar` | 自定义滚动区域 | 自定义样式的滚动容器组件，提供美观的滚动条体验。 |
+| `Select` | 选择器 | 下拉选择器，支持单选、多选、搜索和远程加载。 |
+| `Sidebar` +10 个子组件 | 侧边栏 | 侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。 |
+| `Skeleton` | 骨架屏 | 在数据加载完成前通过占位图形展示页面结构，降低用户等待焦虑。 |
+| `Slider` | 数值滑块 | 滑动输入器，用于在数值区间内进行选择。 |
+| `Spin` | 加载中 | 用于页面和区域的加载中状态指示器。 |
+| `Steps` | 步骤条 | 引导用户按照流程完成任务的导航条。 |
+| `Switch` | 开关 | 用于在两个互斥状态之间切换，如启用/禁用。 |
+| `Table` | 表格 | 用于展示行列数据的表格组件，支持排序、行选择、加载态等。 |
+| `Tabs` | 页签 | 选项卡切换组件，支持多种风格变体和尺寸。 |
+| `Tag` | 标签 | 用于标记和分类的小型标签元素。 |
+| `Textarea` | 多行文本框 | 多行纯文本编辑控件，支持字数统计和自动高度。 |
+| `TimePicker` | 时间选择器 | 用于选择时间的输入组件。 |
+| `toast` | 全局提示 | 命令式全局提示组件，用于操作反馈。 |
+| `Tooltip` | 文字提示 | 鼠标悬停时显示的简短提示信息。 |
+| `Upload` | 上传 | 文件上传组件，支持点击和拖拽上传。 |
+
+**清单里没有的组件本库就是没有**，不要臆造组件名。各组件完整 Props 见 `packages/lingee-ui/packages/{目录名}/README.mdx`，或 `skill/references/components/{目录名}.md`。
+
+## 与 antd 的 API 差异
+
+| 场景 | 正确写法 | 错误写法 |
+|------|---------|---------|
+| Tooltip 内容 | `content` | ~~`title`~~ |
+| Tooltip 延迟 | `delayDuration`（毫秒） | ~~`mouseEnterDelay`~~ |
+| Checkbox 回调 | `onChange={(checked: boolean) => {}}` | ~~`e.target.checked`~~ |
+| Button 原生 type | `htmlType` | ~~`type`~~ |
+| Button 视觉变体 | `variant` | ~~`type`~~ |
+| Dropdown / Popover | 组合式子组件 API | ~~`overlay` prop~~ |
+
+## 语义 Token 全量速查
+
+按 CSS 属性选前缀：`color`/`fill`/`stroke` → `fg`，`background` → `bg`，`border-color`/`outline` → `border`。
+
+亮暗变量名相同，`data-theme="dark"` 自动切换。色值列供**反查**（设计稿色值找 Token）与**比对**（少数 Token 亮暗语义不对称）使用，**业务代码禁止硬编码色值或引用 primitives**。
+
+### ⚠️ 命名异常的 Token（照抄，不要纠正）
+
+设计源文件里的错拼，已被组件库使用不能改。按「正确」拼写会静默失效（CSS 变量不存在不报错，颜色直接丢失）：
+
+| 实际可用 | 说明 |
+|---------|------|
+| `--lg-g-fg-color-indigo-defauit` | ~~`--lg-g-fg-color-indigo-default`~~ |
+| `--lg-g-fg-color-lime-defauit` | ~~`--lg-g-fg-color-lime-default`~~ |
+| `--lg-g-fg-color-violet-defauit` | ~~`--lg-g-fg-color-violet-default`~~ |
+| `--lg-g-bg-color-emeraid-translucent-soft` | ~~`--lg-g-bg-color-emerald-translucent-soft`~~ |
+| `--lg-g-fg-color-black-aint` | 片段 `aint` 非标准命名，照抄即可 |
+
+#### 前景色 fg（34）
+
+| Token | 亮色 | 暗色 |
+|-------|------|------|
+| `--lg-g-fg-color-white-heavy` | `#FFFFFF` | `#FFFFFF` |
+| `--lg-g-fg-color-white-dark` | `#FFFFFF` | `rgba(255, 255, 255, 0.28)` |
+| `--lg-g-fg-color-black-moderate` | `rgba(0, 0, 0, 0.18)` | `rgba(255, 255, 255, 0.18)` |
+| `--lg-g-fg-color-black-aint` | `rgba(0, 0, 0, 0.28)` | `rgba(255, 255, 255, 0.28)` |
+| `--lg-g-fg-color-black-default` | `rgba(0, 0, 0, 0.46)` | `rgba(255, 255, 255, 0.46)` |
+| `--lg-g-fg-color-black-muted` | `rgba(0, 0, 0, 0.64)` | `rgba(255, 255, 255, 0.64)` |
+| `--lg-g-fg-color-black-strong` | `rgba(0, 0, 0, 0.82)` | `rgba(255, 255, 255, 0.82)` |
+| `--lg-g-fg-color-black-intense` | `rgba(0, 0, 0, 0.94)` | `rgba(255, 255, 255, 0.94)` |
+| `--lg-g-fg-color-primary-muted` | `#B7C1FF` | `rgba(109, 128, 255, 0.28)` |
+| `--lg-g-fg-color-primary-low` | `#6D80FF` | `#6D80FF` |
+| `--lg-g-fg-color-primary-default` | `#495DFF` | `#495DFF` |
+| `--lg-g-fg-color-primary-emphasis` | `#3B47F2` | `#3B47F2` |
+| `--lg-g-fg-color-warning-default` | `#FF7700` | `#FF7700` |
+| `--lg-g-fg-color-danger-muted` | `#FF9EA6` | `rgba(255, 41, 59, 0.28)` |
+| `--lg-g-fg-color-danger-low` | `#FF293B` | `#FF293B` |
+| `--lg-g-fg-color-danger-default` | `#F12234` | `#F12234` |
+| `--lg-g-fg-color-danger-emphasis` | `#DA0B20` | `#DA0B20` |
+| `--lg-g-fg-color-success-default` | `#04B545` | `#04B545` |
+| `--lg-g-fg-color-success-emphasis` | `#078E3B` | `#078E3B` |
+| `--lg-g-fg-color-blue-muted` | `#A4C5FF` | `rgba(77, 137, 255, 0.28)` |
+| `--lg-g-fg-color-blue-low` | `#4D89FF` | `#4D89FF` |
+| `--lg-g-fg-color-blue-default` | `#2970FF` | `#2970FF` |
+| `--lg-g-fg-color-blue-emphasis` | `#155BE8` | `#155BE8` |
+| `--lg-g-fg-color-amber-default` | `#E28800` | `#E28800` |
+| `--lg-g-fg-color-teal-default` | `#00BFB8` | `#00BFB8` |
+| `--lg-g-fg-color-purple-default` | `#7F2AF3` | `#7F2AF3` |
+| `--lg-g-fg-color-indigo-defauit` | `#4343F5` | `#4343F5` |
+| `--lg-g-fg-color-yellow-default` | `#D1A600` | `#D1A600` |
+| `--lg-g-fg-color-cyan-default` | `#0083D4` | `#0083D4` |
+| `--lg-g-fg-color-pink-default` | `#ED1165` | `#ED1165` |
+| `--lg-g-fg-color-fuchsia-default` | `#ED1DB9` | `#ED1DB9` |
+| `--lg-g-fg-color-emerald-default` | `#009D72` | `#009D72` |
+| `--lg-g-fg-color-lime-defauit` | `#5FBA04` | `#5FBA04` |
+| `--lg-g-fg-color-violet-defauit` | `#572FF7` | `#572FF7` |
+
+#### 背景色 bg（92）
+
+| Token | 亮色 | 暗色 |
+|-------|------|------|
+| `--lg-g-bg-color-white-emphasis` | `rgba(255, 255, 255, 0.64)` | `rgba(255, 255, 255, 0.64)` |
+| `--lg-g-bg-color-white-heavy` | `#FFFFFF` | `#232426` |
+| `--lg-g-bg-color-white-translucent-heavy` | `#FFFFFF` | `#232426` |
+| `--lg-g-bg-color-white-translucent-strong` | `rgba(255, 255, 255, 0.82)` | `rgba(35, 36, 38, 0.82)` |
+| `--lg-g-bg-color-white-translucent-ghost` | `rgba(255, 255, 255, 0)` | `rgba(35, 36, 38, 0)` |
+| `--lg-g-bg-color-black-ghost` | `rgba(0, 0, 0, 0)` | `rgba(255, 255, 255, 0)` |
+| `--lg-g-bg-color-black-hint` | `rgba(0, 0, 0, 0.02)` | `rgba(255, 255, 255, 0.03)` |
+| `--lg-g-bg-color-black-faint` | `rgba(0, 0, 0, 0.03)` | `rgba(255, 255, 255, 0.03)` |
+| `--lg-g-bg-color-black-dim` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.04)` |
+| `--lg-g-bg-color-black-subtle` | `rgba(0, 0, 0, 0.06)` | `rgba(255, 255, 255, 0.06)` |
+| `--lg-g-bg-color-black-soft` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.12)` |
+| `--lg-g-bg-color-black-muted` | `rgba(0, 0, 0, 0.12)` | `rgba(255, 255, 255, 0.12)` |
+| `--lg-g-bg-color-black-moderate` | `rgba(0, 0, 0, 0.18)` | `rgba(255, 255, 255, 0.18)` |
+| `--lg-g-bg-color-black-default` | `rgba(0, 0, 0, 0.46)` | `rgba(255, 255, 255, 0.46)` |
+| `--lg-g-bg-color-black-emphasis` | `rgba(0, 0, 0, 0.64)` | `rgba(255, 255, 255, 0.64)` |
+| `--lg-g-bg-color-black-strong` | `rgba(0, 0, 0, 0.82)` | `rgba(255, 255, 255, 0.82)` |
+| `--lg-g-bg-color-black-intense` | `rgba(0, 0, 0, 0.94)` | `rgba(255, 255, 255, 0.94)` |
+| `--lg-g-bg-color-primary-translucent-faint` | `rgba(109, 128, 255, 0.03)` | `rgba(109, 128, 255, 0.03)` |
+| `--lg-g-bg-color-primary-translucent-subtle` | `rgba(109, 128, 255, 0.06)` | `rgba(109, 128, 255, 0.06)` |
+| `--lg-g-bg-color-primary-translucent-soft` | `rgba(109, 128, 255, 0.08)` | `rgba(109, 128, 255, 0.12)` |
+| `--lg-g-bg-color-primary-translucent-muted` | `rgba(109, 128, 255, 0.12)` | `rgba(109, 128, 255, 0.12)` |
+| `--lg-g-bg-color-primary-muted` | `#B7C1FF` | `rgba(109, 128, 255, 0.28)` |
+| `--lg-g-bg-color-primary-low` | `#6D80FF` | `#2F37C7` |
+| `--lg-g-bg-color-primary-default` | `#495DFF` | `#495DFF` |
+| `--lg-g-bg-color-primary-emphasis` | `#3B47F2` | `#3B47F2` |
+| `--lg-g-bg-color-warning-translucent-ghost` | `rgba(255, 119, 0, 0)` | `rgba(255, 119, 0, 0.03)` |
+| `--lg-g-bg-color-warning-translucent-faint` | `rgba(255, 119, 0, 0.03)` | `rgba(255, 119, 0, 0.08)` |
+| `--lg-g-bg-color-warning-translucent-subtle` | `rgba(255, 119, 0, 0.06)` | `rgba(255, 119, 0, 0.06)` |
+| `--lg-g-bg-color-warning-translucent-soft` | `rgba(255, 119, 0, 0.08)` | `rgba(255, 119, 0, 0.08)` |
+| `--lg-g-bg-color-warning-translucent-muted` | `rgba(255, 119, 0, 0.12)` | `rgba(255, 119, 0, 0.12)` |
+| `--lg-g-bg-color-warning-ghost` | `#FFF7F0` | `#FFF7F0` |
+| `--lg-g-bg-color-warning-faint` | `#FFF5EC` | `#FFF5EC` |
+| `--lg-g-bg-color-warning-default` | `#FF7700` | `#FF7700` |
+| `--lg-g-bg-color-danger-translucent-ghost` | `rgba(255, 41, 59, 0)` | `rgba(255, 41, 59, 0.03)` |
+| `--lg-g-bg-color-danger-translucent-faint` | `rgba(255, 41, 59, 0.03)` | `rgba(255, 41, 59, 0.08)` |
+| `--lg-g-bg-color-danger-translucent-subtle` | `rgba(255, 41, 59, 0.06)` | `rgba(255, 41, 59, 0.06)` |
+| `--lg-g-bg-color-danger-translucent-soft` | `rgba(255, 41, 59, 0.08)` | `rgba(255, 41, 59, 0.06)` |
+| `--lg-g-bg-color-danger-translucent-muted` | `rgba(255, 41, 59, 0.12)` | `rgba(255, 41, 59, 0.12)` |
+| `--lg-g-bg-color-danger-ghost` | `#FFF5F5` | `#FFF5F5` |
+| `--lg-g-bg-color-danger-faint` | `#FFF0F1` | `rgba(255, 41, 59, 0.08)` |
+| `--lg-g-bg-color-danger-faint-dark` | `#FFF0F1` | `#FFF0F1` |
+| `--lg-g-bg-color-danger-muted` | `#FF9EA6` | `rgba(255, 41, 59, 0.12)` |
+| `--lg-g-bg-color-danger-low` | `#FF293B` | `#FF293B` |
+| `--lg-g-bg-color-danger-default` | `#F12234` | `#F12234` |
+| `--lg-g-bg-color-danger-emphasis` | `#DA0B20` | `#DA0B20` |
+| `--lg-g-bg-color-success-translucent-transparent` | `rgba(8, 204, 80, 0)` | `rgba(8, 204, 80, 0.03)` |
+| `--lg-g-bg-color-success-translucent-faint` | `rgba(8, 204, 80, 0.03)` | `rgba(8, 204, 80, 0.08)` |
+| `--lg-g-bg-color-success-translucent-soft` | `rgba(8, 204, 80, 0.08)` | `rgba(8, 204, 80, 0.08)` |
+| `--lg-g-bg-color-success-ghost` | `#F7FFF8` | `#F7FFF8` |
+| `--lg-g-bg-color-success-faint` | `#EEFFF0` | `rgba(8, 204, 80, 0.03)` |
+| `--lg-g-bg-color-success-faint-dark` | `#EEFFF0` | `#222428` |
+| `--lg-g-bg-color-success-default` | `#04B545` | `#04B545` |
+| `--lg-g-bg-color-blue-translucent-transparent` | `rgba(77, 137, 255, 0)` | `rgba(77, 137, 255, 0.03)` |
+| `--lg-g-bg-color-blue-translucent-faint` | `rgba(77, 137, 255, 0.03)` | `rgba(77, 137, 255, 0.08)` |
+| `--lg-g-bg-color-blue-translucent-soft` | `rgba(77, 137, 255, 0.08)` | `rgba(77, 137, 255, 0.08)` |
+| `--lg-g-bg-color-blue-ghost` | `#F7FBFF` | `#F7FBFF` |
+| `--lg-g-bg-color-blue-faint` | `#F2F7FF` | `rgba(77, 137, 255, 0.03)` |
+| `--lg-g-bg-color-blue-faint-dark` | `#F2F7FF` | `#222428` |
+| `--lg-g-bg-color-blue-default` | `#2970FF` | `#2970FF` |
+| `--lg-g-bg-color-amber-translucent-subtle` | `rgba(255, 178, 0, 0.06)` | `rgba(255, 178, 0, 0.06)` |
+| `--lg-g-bg-color-amber-translucent-soft` | `rgba(255, 178, 0, 0.08)` | `rgba(255, 178, 0, 0.08)` |
+| `--lg-g-bg-color-amber-translucent-muted` | `rgba(255, 178, 0, 0.12)` | `rgba(255, 178, 0, 0.12)` |
+| `--lg-g-bg-color-amber-faint` | `#FFFDEA` | `rgba(255, 178, 0, 0.03)` |
+| `--lg-g-bg-color-amber-faint-dark` | `#FFFDEA` | `#282520` |
+| `--lg-g-bg-color-amber-default` | `#E28800` | `#E28800` |
+| `--lg-g-bg-color-teal-translucent-soft` | `rgba(0, 229, 229, 0.08)` | `rgba(0, 229, 229, 0.08)` |
+| `--lg-g-bg-color-teal-default` | `#00BFB8` | `#00BFB8` |
+| `--lg-g-bg-color-purple-translucent-soft` | `rgba(143, 64, 255, 0.08)` | `rgba(143, 64, 255, 0.08)` |
+| `--lg-g-bg-color-purple-faint` | `#F9F5FF` | `rgba(143, 64, 255, 0.03)` |
+| `--lg-g-bg-color-purple-default` | `#7F2AF3` | `#7F2AF3` |
+| `--lg-g-bg-color-yellow-translucent-soft` | `rgba(255, 229, 0, 0.08)` | `rgba(255, 229, 0, 0.08)` |
+| `--lg-g-bg-color-cyan-translucent-soft` | `rgba(0, 163, 244, 0.08)` | `rgba(0, 163, 244, 0.08)` |
+| `--lg-g-bg-color-cyan-default` | `#0083D4` | `#0083D4` |
+| `--lg-g-bg-color-pink-translucent-soft` | `rgba(255, 36, 109, 0.08)` | `rgba(255, 36, 109, 0.08)` |
+| `--lg-g-bg-color-pink-default` | `#ED1165` | `#ED1165` |
+| `--lg-g-bg-color-fuchsia-faint` | `#FFF2FC` | `rgba(248, 88, 208, 0.03)` |
+| `--lg-g-bg-color-fuchsia-faint-dark` | `#FFF2FC` | `#272326` |
+| `--lg-g-bg-color-emerald-faint` | `#EBFEF7` | `#EBFEF7` |
+| `--lg-g-bg-color-indigo-faint` | `#F5F6FF` | `rgba(81, 85, 246, 0.03)` |
+| `--lg-g-bg-color-indigo-faint-dark` | `#F5F6FF` | `#222327` |
+| `--lg-g-bg-color-gray-subtle` | `#F7F8FA` | `#F7F8FA` |
+| `--lg-g-bg-color-emeraid-translucent-soft` | `rgba(8, 199, 135, 0.08)` | `rgba(8, 199, 135, 0.08)` |
+| `--lg-g-bg-color-emerald-default` | `#009D72` | `#009D72` |
+| `--lg-g-bg-color-lime-translucent-soft` | `rgba(116, 215, 11, 0.08)` | `rgba(116, 215, 11, 0.08)` |
+| `--lg-g-bg-color-lime-default` | `#5FBA04` | `#5FBA04` |
+| `--lg-g-bg-color-indigo-translucent-soft` | `rgba(81, 85, 246, 0.08)` | `rgba(81, 85, 246, 0.08)` |
+| `--lg-g-bg-color-indigo-default` | `#4343F5` | `#4343F5` |
+| `--lg-g-bg-color-violet-translucent-soft` | `rgba(120, 88, 249, 0.08)` | `rgba(120, 88, 249, 0.08)` |
+| `--lg-g-bg-color-violet-default` | `#572FF7` | `#572FF7` |
+| `--lg-g-bg-color-fuchsia-translucent-soft` | `rgba(248, 88, 208, 0.08)` | `rgba(248, 88, 208, 0.08)` |
+| `--lg-g-bg-color-fuchsia-default` | `#ED1DB9` | `#ED1DB9` |
+| `--lg-g-bg-color-page-default` | `#F7F7FA` | `#1A1A1A` |
+
+#### 边框色 border（27）
+
+| Token | 亮色 | 暗色 |
+|-------|------|------|
+| `--lg-g-border-color-black-faint` | `rgba(0, 0, 0, 0.03)` | `rgba(255, 255, 255, 0.03)` |
+| `--lg-g-border-color-black-dim` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.04)` |
+| `--lg-g-border-color-black-subtle` | `rgba(0, 0, 0, 0.06)` | `rgba(255, 255, 255, 0.06)` |
+| `--lg-g-border-color-black-soft` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.12)` |
+| `--lg-g-border-color-black-muted` | `rgba(0, 0, 0, 0.12)` | `rgba(255, 255, 255, 0.18)` |
+| `--lg-g-border-color-black-moderate` | `rgba(0, 0, 0, 0.18)` | `rgba(255, 255, 255, 0.28)` |
+| `--lg-g-border-color-black-emphasis` | `rgba(0, 0, 0, 0.64)` | `rgba(255, 255, 255, 0.64)` |
+| `--lg-g-border-color-black-intense` | `rgba(0, 0, 0, 0.94)` | `rgba(255, 255, 255, 0.94)` |
+| `--lg-g-border-color-primary-soft` | `#B7C1FF` | `rgba(109, 128, 255, 0.28)` |
+| `--lg-g-border-color-primary-low` | `#6D80FF` | `#6D80FF` |
+| `--lg-g-border-color-primary-default` | `#495DFF` | `#495DFF` |
+| `--lg-g-border-color-primary-emphasis` | `#3B47F2` | `#3B47F2` |
+| `--lg-g-border-color-warning-translucent-soft` | `rgba(255, 119, 0, 0.08)` | `rgba(255, 119, 0, 0.08)` |
+| `--lg-g-border-color-warning-subtle` | `#FFE8D6` | `#964009` |
+| `--lg-g-border-color-warning-default` | `#FF7700` | `#FF7700` |
+| `--lg-g-border-color-danger-translucent-soft` | `rgba(255, 41, 59, 0.08)` | `rgba(255, 41, 59, 0.08)` |
+| `--lg-g-border-color-danger-subtle` | `#FFE0E3` | `#991519` |
+| `--lg-g-border-color-danger-muted` | `#FF9EA6` | `rgba(255, 41, 59, 0.12)` |
+| `--lg-g-border-color-danger-low` | `#FF293B` | `rgba(255, 41, 59, 0.46)` |
+| `--lg-g-border-color-danger-default` | `#F12234` | `rgba(255, 41, 59, 0.28)` |
+| `--lg-g-border-color-danger-emphasis` | `#DA0B20` | `#DA0B20` |
+| `--lg-g-border-color-success-translucent-soft` | `rgba(8, 204, 80, 0.08)` | `rgba(8, 204, 80, 0.08)` |
+| `--lg-g-border-color-success-subtle` | `#DBFFE1` | `#0C5B31` |
+| `--lg-g-border-color-success-default` | `#04B545` | `#04B545` |
+| `--lg-g-border-color-blue-translucent-soft` | `rgba(77, 137, 255, 0.08)` | `rgba(77, 137, 255, 0.08)` |
+| `--lg-g-border-color-blue-subtle` | `#E4EEFF` | `#183F96` |
+| `--lg-g-border-color-blue-default` | `#2970FF` | `#2970FF` |
+#### 其他（3）
+
+| Token | 亮色 | 暗色 |
+|-------|------|------|
+| `--lg-g-shadow-color-black-subtle` | `rgba(0, 0, 0, 0.03)` | `rgba(0, 0, 0, 0.03)` |
+| `--lg-g-shadow-color-black-muted` | `rgba(0, 0, 0, 0.08)` | `rgba(0, 0, 0, 0.08)` |
+| `--lg-g-shadow-color-moderate` | `rgba(0, 0, 0, 0.18)` | `rgba(0, 0, 0, 0.18)` |
+

package/skill/SKILL.md

@@ -0,0 +1,205 @@
+---
+name: lingee-ui-usage
+description: 使用 lingee-ui 组件库与 lingee-icon 图标库开发 React 界面。当需要编写含按钮、表单、弹窗、表格、下拉、页签、图标等 UI 的 React/TypeScript 代码，或需要查询 lingee-ui 组件 API、Design Token 语义变量、可用图标名时触发。关键词：lingee-ui、lingee-icon、组件库、图标库、Design Token、语义变量、lg- 前缀、UI 组件。
+metadata:
+  lingeeUi: "0.0.7"
+  lingeeIcon: "1.0.16"
+  generatedBy: "gen-skill.mjs"
+---
+
+# lingee-ui 组件库使用技能
+
+Kingdee Lingee 设计体系的 React 组件库（36 个组件）与图标库（967 个图标）。
+本技能面向**消费方项目**，只覆盖「如何用」，不含组件库内部开发约定。
+
+- 组件库版本 `0.0.7` ｜ 图标库版本 `1.0.16`
+- 组件在线预览：https://kingdee.github.io/lingee-ui/
+- 图标在线预览：https://kingdee.github.io/lingee-icon/
+
+## 使用前必读：与 antd 的关键差异
+
+从 antd 迁移或凭直觉写代码时最容易踩的点：
+
+| 场景 | 正确写法 | 错误写法 |
+|------|---------|---------|
+| Tooltip 内容 | `<Tooltip content="提示">` | ~~`title="提示"`~~ |
+| Tooltip 延迟 | `delayDuration={300}`（毫秒） | ~~`mouseEnterDelay`~~ |
+| Checkbox 回调 | `onChange={(checked: boolean) => {}}` | ~~`onChange={e => e.target.checked}`~~ |
+| Button 原生 type | `htmlType="submit"` | ~~`type="submit"`~~ |
+| Button 视觉变体 | `variant="primary"` | ~~`type="primary"`~~ |
+| Dropdown / Popover | 组合式子组件 API | ~~`overlay` / `content` prop~~ |
+
+## 接入
+
+```bash
+pnpm add lingee-ui lingee-icon
+```
+
+`lingee-icon` 是 `lingee-ui` 的 **peerDependency**，必须显式安装。
+
+样式与 Provider 在应用入口引入一次：
+
+```tsx
+import "lingee-ui/styles.css";        // 必须，否则组件完全无样式
+import { LingeeProvider } from "lingee-ui";
+
+createRoot(el).render(
+  <LingeeProvider locale="zh-CN">
+    <App />
+  </LingeeProvider>,
+);
+```
+
+详细接入说明（暗色模式、仅用 Token、样式覆盖、SSR）见 `references/setup.md`。
+
+## 组件清单
+
+| 组件 | 名称 | 说明 | 文档 | 按需导入 |
+|------|------|------|------|---------|
+| `Alert` | 消息通知 | 消息提示组件，用于页面中展示重要的提示信息。 | `alert.md` | — |
+| `Avatar`、`AvatarGroup` | 头像 | 头像组件，用于展示用户头像或图标，支持图片、文字、默认图标三种形态。 | `avatar.md` | — |
+| `Button` | 按钮 | 用于触发一个操作，是用户与系统交互的基础元素。 | `button.md` | ✓ |
+| `Checkbox`、`CheckboxGroup` | 多选框 | 在一组选项中进行多项选择。 | `checkbox.md` | — |
+| `ColorPicker` | 颜色选择器 | 用于选择颜色值的交互组件。 | `color-picker.md` | — |
+| `DatePicker` | 日期选择器 | 用于选择日期的输入组件。 | `date-picker.md` | — |
+| `Dialog` | 弹出窗 | 模态对话框，用于需要用户确认或填写信息的场景。支持声明式和命令式两种调用方式。 | `dialog.md` | — |
+| `Divider` | 分割线 | 用于分隔内容区块，使页面结构更清晰。 | `divider.md` | — |
+| `Drawer` | 抽屉 | 从屏幕边缘滑出的浮层面板，用于承载表单或详情内容。 | `drawer.md` | — |
+| `Dropdown` +13 个子组件 | 下拉菜单 | 向下弹出的操作菜单列表，支持图标、分组、危险操作、子菜单等。 | `dropdown.md` | — |
+| `Empty` | 空状态 | 当目标区域无数据时展示的空状态占位图，引导用户进行下一步操作。 | `empty.md` | — |
+| `Flex` | 弹性布局 | 弹性布局容器，用于快速搭建横向/纵向排列，避免为简单布局单独写样式文件。 | `flex.md` | — |
+| `Form` | 表单 | 数据录入和校验组件，支持垂直、水平、行内布局。 | `form.md` | — |
+| `Image` | 图片预览 | 图片展示组件，支持点击放大预览、旋转、缩放等操作。 | `image.md` | — |
+| `Input` | 输入框 | 用于接收用户的文本输入。 | `input.md` | — |
+| `Pagination` | 分页 | 当数据量较大时，使用分页拆分数据，方便用户快速定位。 | `pagination.md` | — |
+| `Popover` +5 个子组件 | 气泡弹出层 | 点击/悬停在元素上时弹出气泡式浮层，用于承载更多内容。 | `popover.md` | ✓ |
+| `Progress` | 进度条 | 展示操作的当前进度，支持线性和环形两种形态。 | `progress.md` | — |
+| `RadioGroup`、`RadioItem` | 单选 | 单选框组件，用于在一组互斥选项中选择一个。 | `radio.md` | — |
+| `RangePicker` | 日期范围选择器 | 用于选择日期范围的输入组件。 | `range-picker.md` | — |
+| `ScrollArea`、`ScrollBar` | 自定义滚动区域 | 自定义样式的滚动容器组件，提供美观的滚动条体验。 | `scroll-area.md` | — |
+| `Select` | 选择器 | 下拉选择器，支持单选、多选、搜索和远程加载。 | `select.md` | — |
+| `Sidebar` +10 个子组件 | 侧边栏 | 侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。 | `sidebar.md` | — |
+| `Skeleton` | 骨架屏 | 在数据加载完成前通过占位图形展示页面结构，降低用户等待焦虑。 | `skeleton.md` | — |
+| `Slider` | 数值滑块 | 滑动输入器，用于在数值区间内进行选择。 | `slider.md` | — |
+| `Spin` | 加载中 | 用于页面和区域的加载中状态指示器。 | `spin.md` | — |
+| `Steps` | 步骤条 | 引导用户按照流程完成任务的导航条。 | `steps.md` | — |
+| `Switch` | 开关 | 用于在两个互斥状态之间切换，如启用/禁用。 | `switch.md` | — |
+| `Table` | 表格 | 用于展示行列数据的表格组件，支持排序、行选择、加载态等。 | `table.md` | — |
+| `Tabs` | 页签 | 选项卡切换组件，支持多种风格变体和尺寸。 | `tabs.md` | ✓ |
+| `Tag` | 标签 | 用于标记和分类的小型标签元素。 | `tag.md` | — |
+| `Textarea` | 多行文本框 | 多行纯文本编辑控件，支持字数统计和自动高度。 | `textarea.md` | — |
+| `TimePicker` | 时间选择器 | 用于选择时间的输入组件。 | `time-picker.md` | — |
+| `toast` | 全局提示 | 命令式全局提示组件，用于操作反馈。 | `toast.md` | ✓ |
+| `Tooltip` | 文字提示 | 鼠标悬停时显示的简短提示信息。 | `tooltip.md` | ✓ |
+| `Upload` | 上传 | 文件上传组件，支持点击和拖拽上传。 | `upload.md` | — |
+
+- 「文档」列对应 `references/components/` 下的文件名，含完整 Props 与示例
+- 「按需导入」为 ✓ 的组件可写 `import { X } from "lingee-ui/{目录名}"`，其余从 `lingee-ui` 根导入
+- **清单里没有的组件本库就是没有**，不要臆造组件名
+
+## 选型决策
+
+优先使用本库组件，**仅当本库确实没有对应组件时**才引入其他三方库。
+
+| 需求 | 用这个 |
+|------|--------|
+| 鼠标悬浮的文字提示 | `Tooltip` |
+| 悬浮/点击弹出的富内容浮层 | `Popover` |
+| 点击弹出的操作菜单、选项列表 | `Dropdown` |
+| 表单里的选择器 | `Select` |
+| 删除等二次确认 | `Dialog.confirm()` |
+| 侧滑面板 | `Drawer` |
+| 操作后的轻提示 | `toast.success()` / `toast.error()` |
+| 常驻的状态提示条 | `Alert` |
+| 标签页切换 | `Tabs` |
+| 无数据占位 | `Empty` |
+| 加载中 | `Spin`（转圈） / `Skeleton`（占位骨架） |
+| 分页 | `Pagination` |
+| 自定义滚动条区域 | `ScrollArea` |
+
+**禁止用绝对定位手写浮层**，一律用 `Tooltip` / `Popover` / `Dropdown` / `Drawer`。
+
+## 图标
+
+```tsx
+import { Search, Trash } from "lingee-icon";
+
+<Search size={16} />
+<Trash size={16} className="danger-icon" />
+```
+
+图标默认 `size="1em"`、`color="currentColor"`，即随父级字号与文字颜色走，
+所以**优先用 CSS 控制颜色**而不是传 `color` prop。
+
+完整 Props 见 `references/setup.md`，967 个图标的名称与中文语义索引见 `references/icons.md`。
+选图标时必须从索引中查找，**不要凭猜测写图标名**，也不要从 `@ant-design/icons`、`lucide-react` 等其他库引入。
+
+## 颜色：只用语义 Token
+
+三条铁律：
+
+1. **禁止硬编码色值**（`#495DFF`、`rgb(...)`、`red`），也禁止在 tsx 中写 hex/rgb
+2. **禁止使用 primitives 色板变量**（`--lg-primary-600`、`--lg-black-82`），它们不随暗色模式切换
+3. 只用语义层 `--lg-g-*` 变量，按 CSS 属性选前缀：
+
+| CSS 属性 | Token 前缀 |
+|----------|-----------|
+| `color` / `fill` / `stroke` | `--lg-g-fg-color-*` |
+| `background` / `background-color` | `--lg-g-bg-color-*` |
+| `border-color` / `border` / `outline` | `--lg-g-border-color-*` |
+
+常用 Token（色值列为亮色下的实际取值，仅供比对，不要写进代码）：
+
+| 用途 | Token | 亮色值 |
+|------|-------|--------|
+| 文本-标题/正文 | `var(--lg-g-fg-color-black-strong)` | `rgba(0, 0, 0, 0.82)` |
+| 文本-次要 | `var(--lg-g-fg-color-black-muted)` | `rgba(0, 0, 0, 0.64)` |
+| 文本-辅助说明 | `var(--lg-g-fg-color-black-default)` | `rgba(0, 0, 0, 0.46)` |
+| 文本-禁用/占位 | `var(--lg-g-fg-color-black-aint)` | `rgba(0, 0, 0, 0.28)` |
+| 文本-品牌色 | `var(--lg-g-fg-color-primary-default)` | `#495DFF` |
+| 文本-危险 | `var(--lg-g-fg-color-danger-default)` | `#F12234` |
+| 文本-白色 | `var(--lg-g-fg-color-white-heavy)` | `#FFFFFF` |
+| 背景-白色 | `var(--lg-g-bg-color-white-heavy)` | `#FFFFFF` |
+| 背景-极浅灰 | `var(--lg-g-bg-color-black-faint)` | `rgba(0, 0, 0, 0.03)` |
+| 背景-浅灰 | `var(--lg-g-bg-color-black-subtle)` | `rgba(0, 0, 0, 0.06)` |
+| 背景-中灰 | `var(--lg-g-bg-color-black-muted)` | `rgba(0, 0, 0, 0.12)` |
+| 背景-品牌实色 | `var(--lg-g-bg-color-primary-default)` | `#495DFF` |
+| 背景-品牌浅底 | `var(--lg-g-bg-color-primary-translucent-soft)` | `rgba(109, 128, 255, 0.08)` |
+| 背景-危险实色 | `var(--lg-g-bg-color-danger-default)` | `#F12234` |
+| 边框-默认 | `var(--lg-g-border-color-black-soft)` | `rgba(0, 0, 0, 0.08)` |
+| 边框-中等 | `var(--lg-g-border-color-black-muted)` | `rgba(0, 0, 0, 0.12)` |
+| 边框-强调 | `var(--lg-g-border-color-black-moderate)` | `rgba(0, 0, 0, 0.18)` |
+| 边框-品牌 | `var(--lg-g-border-color-primary-default)` | `#495DFF` |
+| 边框-危险 | `var(--lg-g-border-color-danger-default)` | `#F12234` |
+
+暗色模式给 `<html>` 加 `data-theme="dark"` 即自动切换，无需额外处理。
+
+### 命名异常的 Token
+
+以下 Token 名在设计源文件里拼错了，但已被组件库使用**不能改**。按正确拼写写出来的变量不存在，
+CSS 不报错、颜色直接丢失，属于极难排查的静默失效：
+
+- `var(--lg-g-fg-color-indigo-defauit)` ← 照抄，不要写成 `--lg-g-fg-color-indigo-default`
+- `var(--lg-g-fg-color-lime-defauit)` ← 照抄，不要写成 `--lg-g-fg-color-lime-default`
+- `var(--lg-g-fg-color-violet-defauit)` ← 照抄，不要写成 `--lg-g-fg-color-violet-default`
+- `var(--lg-g-bg-color-emeraid-translucent-soft)` ← 照抄，不要写成 `--lg-g-bg-color-emerald-translucent-soft`
+- `var(--lg-g-fg-color-black-aint)` ← 片段 `aint` 命名不规范，照抄即可
+
+### 拿设计稿色值找 Token
+
+设计稿给的是 hex 时，到 `references/tokens.md` 搜该 hex，表格含亮/暗两列最终色值，可直接反查。
+**搜不到不等于可以硬编码** —— 应向用户说明缺口并等设计确认，不要自行新增变量、也不要退回 primitives。
+
+全量 156 个语义 Token 见 `references/tokens.md`。
+
+## 查阅详细 API
+
+需要某个组件的完整 Props 时，读 `references/components/{目录名}.md`（目录名见组件清单表）。
+不要凭记忆猜 Props，本库 API 与 antd 存在差异。
+
+| 文件 | 内容 |
+|------|------|
+| `references/setup.md` | 安装、样式引入、Provider、暗色模式、样式覆盖、图标 Props |
+| `references/components/*.md` | 逐组件 API 表 + 最小示例 |
+| `references/tokens.md` | 全量语义 Token（含亮/暗色值，可按 hex 反查） |
+| `references/icons.md` | 全量图标索引（含中文语义） |

package/skill/VERSION.json

@@ -0,0 +1,7 @@
+{
+  "lingeeUi": "0.0.7",
+  "lingeeIcon": "1.0.16",
+  "componentCount": 36,
+  "iconCount": 967,
+  "sourceHash": "aeccd0bbb2cfd3c6"
+}

package/skill/references/components/alert.md

@@ -0,0 +1,30 @@
+# Alert 消息通知
+
+消息提示组件，用于页面中展示重要的提示信息。
+
+- 导入：`import { Alert } from "lingee-ui";`
+- 可用类型：`AlertProps`, `AlertType`
+
+## 最小示例
+
+```tsx
+import { Alert } from "lingee-ui";
+
+export default function BasicDemo() {
+  return <Alert type="info">This is an informational message.</Alert>;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `type` | 提示类型 | `"info" \| "success" \| "warning" \| "error" \| "default"` | `"info"` |
+| `title` | 标题内容 | `ReactNode` | - |
+| `description` | 描述/正文内容 | `ReactNode` | - |
+| `items` | 多行列表描述 | `ReactNode[]` | - |
+| `closable` | 是否显示关闭按钮 | `boolean` | `true` |
+| `onClose` | 关闭回调 | `(e: MouseEvent) => void` | - |
+| `icon` | 前缀图标，`false` 隐藏图标 | `ReactNode \| false` | - |
+| `action` | 操作区（右侧按钮/链接） | `ReactNode` | - |
+| `children` | 子内容（替代 description 使用） | `ReactNode` | - |

package/skill/references/components/avatar.md

@@ -0,0 +1,45 @@
+# Avatar 头像
+
+头像组件，用于展示用户头像或图标，支持图片、文字、默认图标三种形态。
+
+- 导入：`import { Avatar, AvatarGroup } from "lingee-ui";`
+- 可用类型：`AvatarProps`, `AvatarGroupProps`
+
+## 最小示例
+
+```tsx
+import { Avatar } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+      <Avatar size={64} src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" />
+      <Avatar size={48} src="https://api.dicebear.com/7.x/avataaars/svg?seed=Luna" />
+      <Avatar size={32} src="https://api.dicebear.com/7.x/avataaars/svg?seed=Max" />
+    </div>
+  );
+}
+```
+
+## Avatar API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `src` | 头像图片地址 | `string` | - |
+| `alt` | 图片加载失败时的替代文字 | `string` | - |
+| `size` | 头像尺寸（px） | `number` | `32` |
+| `shape` | 头像形状 | `"circle" \| "square"` | `"circle"` |
+| `icon` | 自定义图标 | `ReactNode` | - |
+| `className` | 自定义类名 | `string` | - |
+| `style` | 自定义样式 | `CSSProperties` | - |
+| `onError` | 图片加载失败回调 | `() => void` | - |
+
+## AvatarGroup API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `max` | 最多显示数量，超出显示 +N | `number` | `5` |
+| `size` | 头像尺寸（px） | `number` | `32` |
+| `className` | 自定义类名 | `string` | - |
+| `style` | 自定义样式 | `CSSProperties` | - |
+| `children` | 子元素（Avatar 列表） | `ReactNode` | - |

package/skill/references/components/button.md

@@ -0,0 +1,40 @@
+# Button 按钮
+
+用于触发一个操作，是用户与系统交互的基础元素。
+
+- 导入：`import { Button } from "lingee-ui";`
+- 按需导入：`import { Button } from "lingee-ui/button";`
+- 可用类型：`ButtonProps`, `ButtonVariant`, `ButtonShape`, `ButtonSize`
+
+## 最小示例
+
+```tsx
+import { Button } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <div style={{ display: "flex", gap: 12 }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="default">Default</Button>
+      <Button variant="text">Text</Button>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `variant` | 按钮变体 | `"primary" \| "filled" \| "default" \| "text" \| "link-plain" \| "link"` | `"default"` |
+| `size` | 按钮尺寸 | `"sm" \| "md" \| "std" \| "lg"` | `"md"` |
+| `shape` | 按钮形状 | `"default" \| "round" \| "circle"` | `"default"` |
+| `icon` | 图标插槽 | `ReactNode` | - |
+| `iconPosition` | 图标位置 | `"start" \| "end"` | `"start"` |
+| `danger` | 危险态 | `boolean` | `false` |
+| `ghost` | 透明背景 | `boolean` | `false` |
+| `loading` | 加载状态 | `boolean` | `false` |
+| `disabled` | 禁用状态 | `boolean` | `false` |
+| `tooltip` | Tooltip 文字 | `string` | - |
+| `onClick` | 点击回调 | `(e: MouseEvent) => void` | - |
+| `children` | 子内容 | `ReactNode` | - |