lingee-ui 0.0.6 → 0.0.8

package/skill/references/components/radio.md

@@ -0,0 +1,43 @@
+# Radio 单选
+
+单选框组件，用于在一组互斥选项中选择一个。
+
+- 导入：`import { RadioGroup, RadioItem } from "lingee-ui";`
+- 可用类型：`RadioGroupProps`, `RadioItemProps`, `RadioSize`
+
+## 最小示例
+
+```tsx
+import { RadioGroup, RadioItem } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <RadioGroup defaultValue="a">
+      <RadioItem value="a">Option A</RadioItem>
+      <RadioItem value="b">Option B</RadioItem>
+      <RadioItem value="c">Option C</RadioItem>
+    </RadioGroup>
+  );
+}
+```
+
+## API
+
+### RadioGroup
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 受控选中值 | `string` | - |
+| `defaultValue` | 默认选中值 | `string` | - |
+| `onValueChange` | 选中值变化回调 | `(value: string) => void` | - |
+| `disabled` | 是否整组禁用 | `boolean` | `false` |
+| `orientation` | 排列方向 | `"horizontal" \| "vertical"` | `"vertical"` |
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+
+### RadioItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 选项值 | `string` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `children` | 标签文本 | `ReactNode` | - |

package/skill/references/components/range-picker.md

@@ -0,0 +1,49 @@
+# RangePicker 日期范围选择器
+
+用于选择日期范围的输入组件。
+
+- 导入：`import { RangePicker } from "lingee-ui";`
+- 可用类型：`RangePickerProps`, `RangePickerSize`, `DateRange`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { RangePicker } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [value, setValue] = useState(null);
+
+  return (
+    <div style={{ width: 320 }}>
+      <RangePicker
+        value={value}
+        onChange={(v) => setValue(v)}
+      />
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 当前日期范围（受控） | `DateRange \| null` | - |
+| `defaultValue` | 默认日期范围（非受控） | `DateRange` | - |
+| `onChange` | 范围变化回调 | `(range: DateRange \| null) => void` | - |
+| `placeholder` | 占位文本 | `[string, string]` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `error` | 是否显示错误状态 | `boolean` | `false` |
+| `errorMessage` | 错误提示信息 | `string` | - |
+| `minDate` | 最小可选日期 | `Date` | - |
+| `maxDate` | 最大可选日期 | `Date` | - |
+
+### DateRange
+
+```ts
+interface DateRange {
+  from: Date | null;
+  to: Date | null;
+}
+```

package/skill/references/components/scroll-area.md

@@ -0,0 +1,50 @@
+# ScrollArea 自定义滚动区域
+
+自定义样式的滚动容器组件，提供美观的滚动条体验。
+
+- 导入：`import { ScrollArea, ScrollBar } from "lingee-ui";`
+- 可用类型：`ScrollAreaProps`, `ScrollBarProps`
+
+## 最小示例
+
+```tsx
+import { ScrollArea } from "lingee-ui";
+
+const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
+
+export default function BasicDemo() {
+  return (
+    <div style={{ width: 280, border: "1px solid #e0e0e0", borderRadius: 8 }}>
+      <ScrollArea style={{ maxHeight: 300 }}>
+        <div style={{ padding: 8 }}>
+          {items.map((item) => (
+            <div
+              key={item}
+              style={{
+                padding: "8px 12px",
+                borderBottom: "1px solid #f0f0f0",
+                fontSize: 14,
+              }}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `type` | 滚动条显示策略 | `"scroll" \| "hover" \| "auto" \| "always"` | `"scroll"` |
+| `scrollbars` | 滚动条方向 | `"vertical" \| "horizontal" \| "both"` | `"vertical"` |
+| `scrollbarSize` | 滚动条默认宽度（px） | `number` | `4` |
+| `scrollbarHoverSize` | 滚动条悬浮时宽度（px） | `number` | `6` |
+| `scrollHideDelay` | 滚动条隐藏延迟（ms） | `number` | `1000` |
+| `className` | 自定义类名 | `string` | - |
+| `style` | 自定义样式 | `CSSProperties` | - |
+| `children` | 子内容 | `ReactNode` | - |

package/skill/references/components/select.md

@@ -0,0 +1,52 @@
+# Select 选择器
+
+下拉选择器，支持单选、多选、搜索和远程加载。
+
+- 导入：`import { Select } from "lingee-ui";`
+- 可用类型：`SelectProps`, `SelectOption`, `SelectOptionGroup`, `SelectSize`, `SelectMode`, `SelectDropdownProps`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { Select } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [value, setValue] = useState<string>("");
+
+  return (
+    <Select
+      options={[
+        { label: "View only", value: "view" },
+        { label: "Can edit", value: "edit" },
+        { label: "Admin", value: "admin" },
+      ]}
+      value={value}
+      onChange={(v) => setValue(v as string)}
+      placeholder="Select a permission"
+    />
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `options` | 选项数据 | `Array<{ label: string; value: T }>` | `[]` |
+| `value` | 当前选中值 | `T \| T[]` | - |
+| `onChange` | 选中值变化回调 | `(value: T \| T[]) => void` | - |
+| `placeholder` | 占位文本 | `string` | - |
+| `showSearch` | 是否支持搜索 | `boolean` | `false` |
+| `filterOption` | 是否本地过滤（设为 false 配合 onSearch 远程搜索） | `boolean` | `true` |
+| `onSearch` | 搜索回调 | `(keyword: string) => void` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `error` | 是否错误态 | `boolean` | `false` |
+| `mode` | 选择模式 | `"single" \| "multiple"` | `"single"` |
+| `allowClear` | 是否可清空 | `boolean` | `false` |
+| `loading` | 是否加载中 | `boolean` | `false` |
+| `loadError` | 是否加载失败 | `boolean` | `false` |
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `suffixIcon` | 后缀图标 | `ReactNode` | - |
+| `maxTagCount` | 多选模式最多显示 Tag 数 | `number` | - |
+| `dropdown` | 下拉面板配置 | `SelectDropdownProps` | - |

package/skill/references/components/sidebar.md

@@ -0,0 +1,203 @@
+# Sidebar 侧边栏
+
+侧边栏复合组件，提供根容器、页签、导航项、分组、列表项、占位项与底栏，通过 Sidebar.xxx 组合使用。
+
+- 导入：`import { Sidebar, SidebarRoot, SidebarHeader, SidebarTabBar, SidebarNavItem, SidebarCollapsibleNavItem, SidebarGroupHeader, SidebarListItem, SidebarCollapsibleListItem, SidebarFooter, SidebarFooterMenuStaticRow, SidebarFooterBadge, SidebarUsageBar, SidebarUsagePanel, SidebarUsagePanelSection } from "lingee-ui";`
+- 可用类型：`SidebarRootProps`, `SidebarHeaderProps`, `SidebarTabBarProps`, `SidebarTabItem`, `SidebarNavItemProps`, `SidebarCollapsibleNavItemProps`, `SidebarCollapsibleNavItemChild`, `SidebarGroupHeaderProps`, `SidebarListItemProps`, `SidebarIndicatorType`, `SidebarCollapsibleListItemProps`, `SidebarCaretPlacement`, `SidebarFooterProps`, `SidebarFooterMenuStaticRowProps`, `SidebarFooterBadgeProps`, `SidebarUsageBarProps`, `SidebarUsageTone`, `SidebarUsagePanelProps`, `SidebarUsagePanelSectionProps`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { Sidebar, ScrollArea } from "lingee-ui";
+import { List, Enterprise, NewChat, AlarmClock, Agent } from "lingee-icon";
+
+export default function BasicDemo() {
+  const [tab, setTab] = useState("work");
+  const [active, setActive] = useState("new-task");
+
+  return (
+    <Sidebar.Root style={{ height: 320, borderRadius: 12, paddingTop: 10 }}>
+      <Sidebar.TabBar
+        items={[
+          { key: "work", label: "工作", icon: <List size={20} /> },
+          { key: "manage", label: "管理", icon: <Enterprise size={20} /> },
+        ]}
+        activeKey={tab}
+        onChange={setTab}
+      />
+
+      <ScrollArea className="lg-sidebar__scroll">
+        {/* 区块内缩用 lg-sidebar__section，无需自行写 padding */}
+        <div className="lg-sidebar__section">
+          <Sidebar.NavItem
+            icon={<NewChat size={18} />}
+            label="新任务"
+            active={active === "new-task"}
+            onClick={() => setActive("new-task")}
+          />
+          <Sidebar.NavItem
+            icon={<AlarmClock size={18} />}
+            label="定时任务"
+            active={active === "scheduled"}
+            onClick={() => setActive("scheduled")}
+          />
+          <Sidebar.NavItem
+            icon={<Agent size={18} />}
+            label="智能体"
+            active={active === "agent"}
+            onClick={() => setActive("agent")}
+          />
+        </div>
+      </ScrollArea>
+    </Sidebar.Root>
+  );
+}
+```
+
+## API
+
+### Sidebar.Root
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `width` | 展开宽度（px） | `number` | `280` |
+| `collapsed` | 折叠态。传入即启用双层结构与宽度过渡；不传则宽度恒定 | `boolean` | - |
+| `safeAreaTop` | 顶部安全区高度（px），用于让位固定顶栏 | `number` | `0` |
+
+### Sidebar.Header
+
+纯插槽容器。平台相关处理（窗口拖拽区、系统按钮避让）由消费方通过 `children` 与 `style` 注入。
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `children` | 内容 | `ReactNode` | - |
+
+### Sidebar.TabBar
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `items` | 页签列表 `{ key, label, icon?, disabled?, ariaLabel? }` | `SidebarTabItem[]` | - |
+| `activeKey` | 当前选中 key | `string` | - |
+| `onChange` | 切换回调 | `(key: string) => void` | - |
+
+页签显隐过滤（如权限控制）请在传入 `items` 前完成，组件不介入。
+
+### Sidebar.NavItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `icon` | 左侧图标 | `ReactNode` | - |
+| `label` | 文本 | `ReactNode` | - |
+| `active` | 选中态 | `boolean` | `false` |
+| `disabled` | 禁用态 | `boolean` | `false` |
+| `badge` | 右侧徽章插槽。传纯文本即得药丸样式；传自带样式的节点可覆盖 | `ReactNode` | - |
+| `onClick` | 点击回调 | `() => void` | - |
+
+文本溢出时自动显示 Tooltip，无需外层包裹。
+
+### Sidebar.CollapsibleNavItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `icon` | 左侧图标 | `ReactNode` | - |
+| `label` | 分组标题 | `ReactNode` | - |
+| `active` | 头部高亮。内部与子项 active 互斥 | `boolean` | `false` |
+| `open` | 受控展开态 | `boolean` | - |
+| `defaultOpen` | 非受控初始展开态 | `boolean` | `false` |
+| `onOpenChange` | 展开态变化回调 | `(next: boolean) => void` | - |
+| `onLabelClick` | 标签区点击。传入后标签与箭头分离命中 | `() => void` | - |
+| `items` | 子项列表 `{ key, label, active?, disabled?, onClick? }` | `SidebarCollapsibleNavItemChild[]` | - |
+| `extra` | 头部右侧插槽 | `ReactNode` | - |
+| `disabled` | 禁用态 | `boolean` | `false` |
+| `expandLabel` / `collapseLabel` | 箭头无障碍标签 | `string` | - |
+
+### Sidebar.GroupHeader
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `title` | 标题 | `ReactNode` | - |
+| `collapsible` | 可折叠 | `boolean` | `false` |
+| `expanded` | 展开态，仅 `collapsible` 时生效 | `boolean` | `true` |
+| `onToggle` | 切换回调 | `() => void` | - |
+| `actions` | 右侧操作区插槽 | `ReactNode` | - |
+
+折叠箭头与操作区悬停显现，展开态箭头常显。
+
+### Sidebar.ListItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `title` | 标题 | `ReactNode` | - |
+| `active` | 选中态 | `boolean` | `false` |
+| `indicator` | 状态指示器 | `"running" \| "clarification" \| "unread" \| null` | - |
+| `prefix` | 标题前插槽 | `ReactNode` | - |
+| `onSelect` | 点击回调 | `() => void` | - |
+| `menu` | 右侧菜单插槽（需自带触发按钮） | `ReactNode` | - |
+
+### Sidebar.CollapsibleListItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `icon` | 头部图标。需随展开态切换时由消费方传入对应图标 | `ReactNode` | - |
+| `title` | 标题 | `ReactNode` | - |
+| `expanded` | 展开态 | `boolean` | `false` |
+| `onToggle` | 切换回调 | `() => void` | - |
+| `caretPlacement` | 箭头位置。`title` 紧跟标题、悬停才显现；`end` 恒在行尾且常显 | `"title" \| "end"` | `"title"` |
+| `actions` | 头部操作区插槽 | `ReactNode` | - |
+| `actionsVisible` | 操作区常显。菜单打开时置 `true` | `boolean` | `false` |
+| `active` | 头部高亮 | `boolean` | `false` |
+| `children` | 展开区内容 | `ReactNode` | - |
+| `expandLabel` / `collapseLabel` | 无障碍标签 | `string` | - |
+
+### Sidebar.Footer
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `avatar` | 头像插槽 | `ReactNode` | - |
+| `name` | 名称，为空时不渲染身份区 | `ReactNode` | - |
+| `nameSuffix` | 名称后插槽（套餐标签等） | `ReactNode` | - |
+| `menuOpen` | 菜单展开态，驱动触发区高亮与箭头旋转 | `boolean` | `false` |
+| `onTriggerClick` | 点击触发区，回传 `DOMRect` 供手动定位浮层 | `(rect: DOMRect) => void` | - |
+| `actions` | 右侧动作区插槽 | `ReactNode` | - |
+
+### Sidebar.FooterMenuStaticRow
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `icon` | 行首图标 | `ReactNode` | - |
+| `children` | 行内容 | `ReactNode` | - |
+
+### Sidebar.FooterBadge
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `dot` | 是否显示未读红点 | `boolean` | `false` |
+| `children` | 被包裹的按钮 | `ReactNode` | - |
+
+### Sidebar.UsageBar
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `used` | 已用量 | `number` | - |
+| `total` | 总量。为 0 时进度按 0 处理 | `number` | - |
+| `formatNumber` | 数字格式化（千分位/小数位依赖 locale） | `(n: number) => string` | `String` |
+| `percentSuffix` | 总量后缀，如「（65%）」 | `ReactNode` | - |
+| `remainingPrefix` | 剩余量前缀，如「剩余 」 | `ReactNode` | - |
+| `ariaLabel` | 进度条无障碍标签 | `string` | - |
+
+### Sidebar.UsagePanel
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `title` | 面板标题，为空时不渲染头部 | `ReactNode` | - |
+| `loading` | 加载态，展示骨架屏并隐藏内容 | `boolean` | `false` |
+| `children` | 各额度分区 | `ReactNode` | - |
+
+### Sidebar.UsagePanelSection
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `title` | 分区标题 | `ReactNode` | - |
+| `extra` | 标题行右侧附加信息，如到期日 | `ReactNode` | - |
+| `children` | 分区内容，通常是一个 `UsageBar` | `ReactNode` | - |

package/skill/references/components/skeleton.md

@@ -0,0 +1,39 @@
+# Skeleton 骨架屏
+
+在数据加载完成前通过占位图形展示页面结构，降低用户等待焦虑。
+
+- 导入：`import { Skeleton } from "lingee-ui";`
+- 可用类型：`SkeletonProps`, `SkeletonVariant`, `SkeletonAnimation`
+
+## 最小示例
+
+```tsx
+import { Skeleton } from "lingee-ui";
+
+export default function BasicDemo() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Skeleton variant="text" width="100%" />
+        <Skeleton variant="text" width="80%" />
+        <Skeleton variant="text" width="60%" />
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <Skeleton variant="circle" size={40} />
+        <Skeleton variant="rect" width={120} height={36} />
+      </div>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `variant` | 形状预设 | `"text" \| "circle" \| "rect"` | `"text"` |
+| `width` | 宽度 | `string \| number` | `"100%"` |
+| `height` | 高度 | `string \| number` | - |
+| `size` | 圆形/方形尺寸（同时设置宽高） | `number` | - |
+| `borderRadius` | 圆角 | `string \| number` | - |
+| `animation` | 动画类型 | `"shimmer" \| "pulse" \| false` | `"shimmer"` |

package/skill/references/components/slider.md

@@ -0,0 +1,42 @@
+# Slider 数值滑块
+
+滑动输入器，用于在数值区间内进行选择。
+
+- 导入：`import { Slider } from "lingee-ui";`
+- 可用类型：`SliderProps`, `SliderSize`
+
+## 最小示例
+
+```tsx
+import { useState } from "react";
+import { Slider } from "lingee-ui";
+
+export default function BasicDemo() {
+  const [value, setValue] = useState([50]);
+
+  return (
+    <div style={{ width: 300 }}>
+      <Slider value={value} onChange={setValue} />
+      <p style={{ marginTop: 12, fontSize: 14, color: "#666" }}>
+        Current value: {value[0]}
+      </p>
+    </div>
+  );
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `value` | 当前值（受控） | `number[]` | - |
+| `defaultValue` | 默认值（非受控） | `number[]` | `[0]` |
+| `onChange` | 值变化回调 | `(value: number[]) => void` | - |
+| `min` | 最小值 | `number` | `0` |
+| `max` | 最大值 | `number` | `100` |
+| `step` | 步长 | `number` | `1` |
+| `disabled` | 是否禁用 | `boolean` | `false` |
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `orientation` | 方向 | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `tooltip` | 是否显示 Tooltip | `boolean` | `true` |
+| `tipFormatter` | Tooltip 格式化 | `(value: number) => string` | - |

package/skill/references/components/spin.md

@@ -0,0 +1,25 @@
+# Spin 加载中
+
+用于页面和区域的加载中状态指示器。
+
+- 导入：`import { Spin } from "lingee-ui";`
+- 可用类型：`SpinProps`, `SpinSize`
+
+## 最小示例
+
+```tsx
+import { Spin } from "lingee-ui";
+
+export default function BasicDemo() {
+  return <Spin spinning size="lg" />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `spinning` | 是否显示加载 | `boolean` | `true` |
+| `tip` | 加载提示文本 | `string` | - |
+| `children` | 包裹内容（容器模式） | `ReactNode` | - |

package/skill/references/components/steps.md

@@ -0,0 +1,34 @@
+# Steps 步骤条
+
+引导用户按照流程完成任务的导航条。
+
+- 导入：`import { Steps } from "lingee-ui";`
+- 可用类型：`StepsProps`, `StepItem`, `StepStatus`, `StepsSize`, `StepsTitlePlacement`
+
+## 最小示例
+
+```tsx
+import { Steps } from "lingee-ui";
+
+const items = [
+  { title: "Select product" },
+  { title: "Confirm order" },
+  { title: "Payment" },
+  { title: "Done" },
+];
+
+export default function BasicDemo() {
+  return <Steps items={items} current={1} />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `current` | 当前步骤索引（从 0 开始） | `number` | `0` |
+| `items` | 步骤配置 | `Array<{ title, description? }>` | - |
+| `size` | 尺寸 | `"default" \| "small"` | `"default"` |
+| `status` | 当前步骤状态 | `"process" \| "error"` | `"process"` |
+| `titlePlacement` | 标题方向 | `"vertical" \| "horizontal"` | `"vertical"` |
+| `onChange` | 步骤点击回调 | `(current: number) => void` | - |

package/skill/references/components/switch.md

@@ -0,0 +1,26 @@
+# Switch 开关
+
+用于在两个互斥状态之间切换，如启用/禁用。
+
+- 导入：`import { Switch } from "lingee-ui";`
+- 可用类型：`SwitchProps`, `SwitchSize`
+
+## 最小示例
+
+```tsx
+import { Switch } from "lingee-ui";
+
+export default function BasicDemo() {
+  return <Switch defaultChecked />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `checked` | 开关状态（受控） | `boolean` | - |
+| `defaultChecked` | 默认开关状态（非受控） | `boolean` | `false` |
+| `onChange` | 状态变更回调 | `(checked: boolean) => void` | - |
+| `size` | 开关尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
+| `disabled` | 禁用状态 | `boolean` | `false` |

package/skill/references/components/table.md

@@ -0,0 +1,44 @@
+# Table 表格
+
+用于展示行列数据的表格组件，支持排序、行选择、加载态等。
+
+- 导入：`import { Table } from "lingee-ui";`
+- 可用类型：`TableProps`, `TableColumnType`, `TableRowSelection`, `TableSize`, `TableSorterState`
+
+## 最小示例
+
+```tsx
+import { Table } from "lingee-ui";
+
+const columns = [
+  { title: "Name", dataIndex: "name", key: "name" },
+  { title: "Age", dataIndex: "age", key: "age" },
+  { title: "Department", dataIndex: "department", key: "department" },
+];
+
+const dataSource = [
+  { key: "1", name: "Alice Chen", age: 28, department: "Engineering" },
+  { key: "2", name: "Bob Liu", age: 32, department: "Product" },
+  { key: "3", name: "Carol Wang", age: 25, department: "Design" },
+];
+
+export default function BasicDemo() {
+  return <Table columns={columns} dataSource={dataSource} />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `columns` | 列定义 | `Array<{ title, dataIndex, key, render?, width?, align?, fixed?, sorter? }>` | - |
+| `dataSource` | 数据源 | `Array<Record<string, any>>` | `[]` |
+| `loading` | 是否显示加载状态 | `boolean` | `false` |
+| `rowKey` | 行唯一标识字段 | `string \| ((record) => string)` | `"key"` |
+| `rowSelection` | 行选择配置 | `{ selectedRowKeys, onChange }` | - |
+| `onRow` | 行事件 | `(record, index) => HTMLAttributes` | - |
+| `size` | 尺寸 | `"default" \| "large"` | `"default"` |
+| `bordered` | 是否显示边框 | `boolean` | `false` |
+| `striped` | 是否显示斑马纹 | `boolean` | `false` |
+| `hoverable` | 是否行悬浮高亮 | `boolean` | `true` |
+| `scroll` | 滚动设置 | `{ x?: number, y?: number }` | - |

package/skill/references/components/tabs.md

@@ -0,0 +1,49 @@
+# Tabs 页签
+
+选项卡切换组件，支持多种风格变体和尺寸。
+
+- 导入：`import { Tabs } from "lingee-ui";`
+- 按需导入：`import { Tabs } from "lingee-ui/tabs";`
+- 可用类型：`TabsProps`, `TabItem`, `TabsVariant`, `TabsSize`
+
+## 最小示例
+
+```tsx
+import { Tabs } from "lingee-ui";
+
+const items = [
+  { key: "tab1", label: "Tab One" },
+  { key: "tab2", label: "Tab Two" },
+  { key: "tab3", label: "Tab Three" },
+];
+
+export default function BasicDemo() {
+  return <Tabs items={items} defaultActiveKey="tab1" />;
+}
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `items` | 标签项配置 | `TabItem[]` | - |
+| `activeKey` | 当前激活 key（受控） | `string` | - |
+| `defaultActiveKey` | 默认激活 key（非受控） | `string` | - |
+| `onChange` | 切换回调 | `(key: string) => void` | - |
+| `variant` | 风格变体 | `"segmented" \| "rounded" \| "solid" \| "outline" \| "underline"` | `"segmented"` |
+| `size` | 尺寸 | `"sm" \| "md"` | `"md"` |
+| `glassy` | 滑块玻璃高光效果 | `boolean` | `false` |
+| `transparent` | 容器背景透明（去掉灰底） | `boolean` | `false` |
+| `animated` | 是否开启内容切换动画 | `boolean` | `true` |
+| `destroyInactivePanel` | 切走时是否销毁非活跃面板 | `boolean` | `false` |
+
+### TabItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| `key` | 唯一标识 | `string` | - |
+| `label` | 标签文本 | `ReactNode` | - |
+| `children` | 面板内容 | `ReactNode` | - |
+| `icon` | 图标 | `ReactNode` | - |
+| `suffix` | 后缀（如徽标） | `ReactNode` | - |
+| `disabled` | 是否禁用 | `boolean` | `false` |