@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/radio-group/radio-group.tsx

@@ -1,209 +0,0 @@
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-// ─── RadioGroupOption(数据驱动模式,对齐 CheckboxGroup)────────────────
-
-export interface RadioGroupOption {
-  label: React.ReactNode;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
-    | 'value'
-    | 'defaultValue'
-    | 'onValueChange'
-    | 'disabled'
-    | 'required'
-    | 'name'
-    | 'orientation'
-    | 'dir'
-    | 'loop'
-  > {
-  /**
-   * 受控选中值(等价 antd `value`,Radix 命名一致)。
-   * 与 `defaultValue` 二选一,不同时传。
-   */
-  value?: string;
-  /** 非受控初始选中值。 */
-  defaultValue?: string;
-  /**
-   * 选中变化回调 — Radix 命名,等价 antd `onChange(value)`。
-   */
-  onValueChange?: (value: string) => void;
-  /**
-   * 整组禁用(灰化所有 Item / Button + 不响应交互)。
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * 表单必填 — 设置 HTML 原生 `required`,表单层校验依赖此值。
-   * @default false
-   */
-  required?: boolean;
-  /** 表单字段名(原生 `<input name>`,提交表单时使用;同组所有 Item 共用)。 */
-  name?: string;
-  /**
-   * 排列方向(键盘导航方向也跟随此值)。
-   * @default "vertical"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * 渲染样式 — `default` 经典圆点;`button` 渲染为按钮组(antd `Radio.Button` 并集)。
-   * @default "default"
-   */
-  variant?: 'default' | 'button';
-  /**
-   * 选项数据源(数据驱动模式,与 CheckboxGroup `options` 对齐)。
-   * 传入后内部自动渲染 `RadioGroupItem` / `RadioGroupButton`,无需 `children`.
-   * 当同时存在 `children` 与 `options` 时,`children` 优先。
-   */
-  options?: RadioGroupOption[];
-}
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupProps
->(({ className, variant = 'default', orientation = 'vertical', options, children, ...props }, ref) => {
-  // children 优先;仅当无 children 且传入 options 时内部渲染
-  const content =
-    children ||
-    (options &&
-      options.map((opt) =>
-        variant === 'button' ? (
-          <RadioGroupButton
-            key={opt.value}
-            value={opt.value}
-            disabled={opt.disabled}
-          >
-            {opt.label}
-          </RadioGroupButton>
-        ) : (
-          <div key={opt.value} className="flex items-center gap-2 text-xs">
-            <RadioGroupItem
-              value={opt.value}
-              id={`rg-opt-${opt.value}`}
-              disabled={opt.disabled}
-            />
-            <label
-              htmlFor={`rg-opt-${opt.value}`}
-              className={cn(
-                (opt.disabled || props.disabled) &&
-                  'cursor-not-allowed opacity-60',
-              )}
-            >
-              {opt.label}
-            </label>
-          </div>
-        ),
-      ));
-
-  return (
-    <RadioGroupPrimitive.Root
-      ref={ref}
-      data-variant={variant}
-      data-orientation={orientation}
-      orientation={orientation}
-      className={cn(
-        variant === 'button'
-          ? 'inline-flex divide-x divide-input overflow-hidden rounded-md border border-input shadow-sm'
-          : // 默认形态:横向 16px (gap-4, 对齐规范 §3.1 规则 3 "checkbox/radio 横向 16px"),
-            // 纵向 8px (gap-2, 紧凑列表)
-            orientation === 'horizontal'
-            ? 'flex flex-wrap gap-4'
-            : 'grid gap-2',
-        className,
-      )}
-      {...props}
-    >
-      {content}
-    </RadioGroupPrimitive.Root>
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-export interface RadioGroupItemProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-    'value' | 'disabled' | 'required' | 'id'
-  > {
-  /**
-   * 选项 value — 选中时把此值赋给 RadioGroup 的 `value`。
-   * **必填** — 每个 Item 必须有稳定唯一的 value(string)。
-   */
-  value: string;
-  /**
-   * 禁用此选项(整组 `disabled` 会覆盖单项的 `disabled={false}`)。
-   * @default false
-   */
-  disabled?: boolean;
-  /** 必填(透传 HTML required)。 */
-  required?: boolean;
-  /** id 属性,配合 `<label htmlFor>` 关联选项文字。 */
-  id?: string;
-}
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  RadioGroupItemProps
->(({ className, ...props }, ref) => (
-  <RadioGroupPrimitive.Item
-    ref={ref}
-    className={cn(
-      'aspect-square size-4 cursor-pointer rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-      <Circle className="size-2.5 fill-primary" />
-    </RadioGroupPrimitive.Indicator>
-  </RadioGroupPrimitive.Item>
-));
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-// ─── RadioGroupButton(Button-style item, antd `Radio.Button` 并集)───────
-
-export interface RadioGroupButtonProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-    'value' | 'disabled' | 'required' | 'id'
-  > {
-  /**
-   * 选项 value — 选中时把此值赋给 RadioGroup 的 `value`。**必填**,稳定唯一。
-   */
-  value: string;
-  /**
-   * 禁用此选项(整组 `disabled` 会覆盖单项的 `disabled={false}`)。
-   * @default false
-   */
-  disabled?: boolean;
-  /** 必填(透传 HTML required)。 */
-  required?: boolean;
-  /** id 属性,通常无需手传(按钮组形态自身已含可点击区域)。 */
-  id?: string;
-}
-
-const RadioGroupButton = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  RadioGroupButtonProps
->(({ className, children, ...props }, ref) => (
-  <RadioGroupPrimitive.Item
-    ref={ref}
-    className={cn(
-      'inline-flex h-9 cursor-pointer items-center justify-center px-4 text-xs font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:hover:bg-primary/90',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </RadioGroupPrimitive.Item>
-));
-RadioGroupButton.displayName = 'RadioGroupButton';
-
-export { RadioGroup, RadioGroupItem, RadioGroupButton };

package/src/components/rate/rate.meta.md

@@ -1,118 +0,0 @@
----
-id: rate
-name: Rate
-displayName: 评分
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Rate 评分
-
-星级评分 — antd 独有补足。**等价 antd `Rate`**。支持半星(`allowHalf`)、再次点击清零(`allowClear`)、自定义图标(`character`)、只读展示(`disabled`)。
-
-## When to use
-
-- 评论 / 评分场景(电商商品、酒店、餐厅)
-- 用户偏好评分(满意度调查)
-- 只读展示评分均值(`disabled` + `value`)
-
-## When NOT to use
-
-- 二元选择(喜欢 / 不喜欢)→ `Toggle` / `Button` 配 icon
-- 多档定量评分(0~100)→ `Slider`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `count` | `number` | `5` | – | 总星数(antd `count` 并集)。 |
-| `value` | `number` | – | – | 受控值。 |
-| `defaultValue` | `number` | – | – | uncontrolled 初值。 |
-| `allowHalf` | `boolean` | `false` | – | 允许半星(antd `allowHalf` 并集) — 启用后单星可点击左半 / 右半。 |
-| `allowClear` | `boolean` | `true` | – | 允许再次点击同值清零(antd `allowClear` 并集)。 |
-| `disabled` | `boolean` | – | – | 禁用(只展示)。 |
-| `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"default"` | – | 尺寸(影响星图大小)。 |
-| `character` | `React.ReactNode` | – | – | 自定义图标(antd `character` 并集) — 默认 `lucide-react` 的 `Star`。 |
-| `onChange` | `(value: number) => void` | – | – | value 变化回调。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add rate` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`disabled` 即只读** — 配 `value` 显示评分均值;**不要**模拟"半禁用"或"局部可改"
-- **`allowHalf` 仅前端显示用** — 业务层数据建议存为 number(允许 0.5 步长)
-- **`allowClear` 默认 true** — 与 antd 一致;关闭后用户无法清空评分,只能改值
-- **`character` 自定义图标**:必须是 `React.isValidElement` 节点,组件会在选中态注入 `fill="currentColor"`;**不要**传字符串
-- **大评分场景**(`count > 7`)视觉拥挤,建议改用 `Slider` + 数字展示
-- **尺寸与 cloud-design 对齐**:`sm/default/lg` = 16/20/24px,与其他表单表一致的密度作业
-- **半星渲染分两层**:底层 `text-muted-foreground/30` 描边空星 · 上层 `clipPath: inset(0 50% 0 0)` 裁切到左半边 + `text-warning` 填充;**不要**反过来(会丢失右半边描边)
-
-## Examples
-
-```tsx
-import { Rate } from '@/components/ui/rate';
-import { Heart } from 'lucide-react';
-import * as React from 'react';
-
-// 基础
-<Rate defaultValue={3} />
-
-// 半星
-<Rate allowHalf defaultValue={3.5} />
-
-// 受控
-const [v, setV] = React.useState(0);
-<Rate value={v} onChange={setV} allowHalf />
-
-// 自定义图标
-<Rate character={<Heart className="size-5" />} count={5} defaultValue={3} />
-
-// 只读
-<Rate disabled value={4.5} allowHalf />
-```
-
-## Rating 形态 — 旧库 API → 新库映射
-
-> 旧库(Teamix 1.0 / `@alifd/next.Rating`)→ 新库 `Rate`(对齐 antd 命名)。能力**全部并集已实现**,只有少量低频 prop 不修复。
-
-| 旧库 API | 新库 API | 备注 |
-| --- | --- | --- |
-| 组件名 `Rating` | `Rate` | 对齐 antd 命名 |
-| `count` | `count` | 同名 |
-| `value` / `defaultValue` | `value` / `defaultValue` | 同名 |
-| `onChange` | `onChange` | 同名 |
-| `allowHalf` | `allowHalf` | ✅ 已实现 — 半星裁切渲染(clipPath) |
-| `readOnly` | `disabled` | 只展示场景用 `disabled` 实现(antd 当前版本也只有 disabled) |
-| `size="small\|medium\|large"` | `size="sm\|md\|lg"` | 三档对应 16/20/24px |
-| `character` 自定义图标 | `character` | ✅ 已实现 — 默认 `lucide.Star`,可传任意 ReactNode |
-| `showGrade` 文案展示 | 不修复 | 外部组合 `<Text>` 更灵活,P2 |
-| `onHoverChange` 悬浮值回调 | 不修复 | 低频,P2 |
-| `isPreview` / `renderPreview` | `disabled` 替代 | 旧库低频 API,直接用 disabled |
-
-### 不修复 / 后续工序清单
-
-- **`showGrade` 文案展示**(P2):用 `<Rate value={4} disabled /> <Text>4.5 / 5</Text>` 外部组合更灵活
-- **`onHoverChange` 悬浮回调**(P2):低频,业务侧用 `onMouseEnter` 事件捕获 thumb 位置自管
-- **`isPreview` / `renderPreview`**:报告 §5 已列入"保留新库优势",`disabled` 已能替代,**不修复**

package/src/components/rate/rate.stories.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Heart } from 'lucide-react';
-import { Rate } from './rate';
-
-const meta: Meta<typeof Rate> = {
-  title: '数据录入 · Data Entry/Rate',
-  component: Rate,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '星级评分 — 评论 / 商品评分 / 偏好满意度。支持半星 + 再次点击清零 + 自定义图标 + 只读展示。等价 antd `Rate`。',
-      },
-    },
-  },
-  argTypes: {
-    count: { control: { type: 'number', min: 3, max: 10 } },
-    allowHalf: { control: 'boolean' },
-    allowClear: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
-  },
-  args: {
-    count: 5,
-    allowHalf: false,
-    allowClear: true,
-    disabled: false,
-    size: 'default',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Rate>;
-
-export const Playground: Story = {
-  render: (args) => <Rate {...args} defaultValue={3} />,
-};
-
-export const HalfStar: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Rate allowHalf defaultValue={3.5} />,
-};
-
-export const Controlled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [v, setV] = React.useState<number>(0);
-    return (
-      <div className="flex items-center gap-3">
-        <Rate value={v} onChange={setV} allowHalf />
-        <span className="text-sm text-muted-foreground tabular-nums">
-          {v.toFixed(1)} / 5
-        </span>
-      </div>
-    );
-  },
-};
-
-export const CustomIcon: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Rate character={<Heart className="size-5" />} count={5} defaultValue={3} />
-  ),
-};
-
-export const ReadOnly: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-2">
-      <Rate disabled value={4.5} allowHalf size="sm" />
-      <span className="text-sm text-muted-foreground">
-        4.5 / 5 (1,287 评价)
-      </span>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex items-center gap-6">
-      <Rate size="sm" defaultValue={3} />
-      <Rate size="default" defaultValue={3} />
-      <Rate size="lg" defaultValue={3} />
-    </div>
-  ),
-};

package/src/components/rate/rate.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-import { Star } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export interface RateProps
-  extends Omit<
-    React.HTMLAttributes<HTMLDivElement>,
-    'onChange' | 'defaultValue'
-  > {
-  /**
-   * 总星数(antd `count` 并集)。
-   * @default 5
-   */
-  count?: number;
-  /** 受控值。 */
-  value?: number;
-  /** uncontrolled 初值。 */
-  defaultValue?: number;
-  /**
-   * 允许半星(antd `allowHalf` 并集) — 启用后单星可点击左半 / 右半。
-   * @default false
-   */
-  allowHalf?: boolean;
-  /**
-   * 允许再次点击同值清零(antd `allowClear` 并集)。
-   * @default true
-   */
-  allowClear?: boolean;
-  /** 禁用(只展示)。 */
-  disabled?: boolean;
-  /**
-   * 尺寸(影响星图大小)。
-   * @default "default"
-   */
-  size?: 'sm' | 'md' | 'default' | 'lg';
-  /**
-   * 自定义图标(antd `character` 并集) — 默认 `lucide-react` 的 `Star`。
-   */
-  character?: React.ReactNode;
-  /** value 变化回调。 */
-  onChange?: (value: number) => void;
-}
-
-// 与 cloud-design Rating small/medium/large = 16/20/24 对齐,使用三档以调与其他表单控件一致的视觉密度。
-const sizeMap = {
-  sm: 'size-4',
-  md: 'size-5',
-  default: 'size-5',
-  lg: 'size-6',
-} as const;
-
-const Rate = React.forwardRef<HTMLDivElement, RateProps>(
-  (
-    {
-      count = 5,
-      value,
-      defaultValue,
-      allowHalf = false,
-      allowClear = true,
-      disabled = false,
-      size = 'md',
-      character,
-      onChange,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<number>(defaultValue ?? 0);
-    const current = isControlled ? value! : internal;
-    const [hover, setHover] = React.useState<number | null>(null);
-
-    const active = hover ?? current;
-
-    const set = (next: number) => {
-      const final = allowClear && next === current ? 0 : next;
-      if (!isControlled) setInternal(final);
-      onChange?.(final);
-    };
-
-    const Icon = character ?? <Star className={cn(sizeMap[size])} />;
-
-    // 未选中的底色 — 使用 `text-muted-foreground/30` 与 cloud-design 空星描边一致
-    const inactiveClass = 'text-muted-foreground/30';
-    const activeClass = 'text-warning';
-
-    return (
-      <div
-        ref={ref}
-        role="radiogroup"
-        aria-disabled={disabled}
-        className={cn(
-          'inline-flex items-center gap-1',
-          disabled && 'cursor-not-allowed opacity-50',
-          className,
-        )}
-        onMouseLeave={() => !disabled && setHover(null)}
-        {...props}
-      >
-        {Array.from({ length: count }).map((_, i) => {
-          const fullValue = i + 1;
-          const halfValue = i + 0.5;
-          const filledFull = active >= fullValue;
-          const filledHalf = !filledFull && allowHalf && active >= halfValue;
-
-          return (
-            <span
-              key={i}
-              role="radio"
-              aria-checked={current >= fullValue}
-              className="relative inline-flex"
-            >
-              {allowHalf && !disabled ? (
-                <>
-                  <span
-                    onMouseEnter={() => setHover(halfValue)}
-                    onClick={() => set(halfValue)}
-                    className="absolute left-0 top-0 z-10 size-1/2 cursor-pointer"
-                    aria-hidden="true"
-                  />
-                  <span
-                    onMouseEnter={() => setHover(fullValue)}
-                    onClick={() => set(fullValue)}
-                    className="absolute right-0 top-0 z-10 size-1/2 cursor-pointer"
-                    aria-hidden="true"
-                  />
-                </>
-              ) : !disabled ? (
-                <span
-                  onMouseEnter={() => setHover(fullValue)}
-                  onClick={() => set(fullValue)}
-                  className="absolute inset-0 z-10 cursor-pointer"
-                  aria-hidden="true"
-                />
-              ) : null}
-
-              {filledFull ? (
-                <span className={activeClass}>
-                  {React.isValidElement(Icon)
-                    ? React.cloneElement(
-                        Icon as React.ReactElement<{ fill?: string }>,
-                        { fill: 'currentColor' },
-                      )
-                    : Icon}
-                </span>
-              ) : filledHalf ? (
-                <span className="relative inline-block">
-                  {/* 底层:描边空星(完整轮廓,取代 muted-foreground/40 深度运动) */}
-                  <span className={inactiveClass}>{Icon}</span>
-                  {/* 上层:裁切到左半边 + 填充 currentColor */}
-                  <span
-                    className={cn(
-                      'absolute inset-0 overflow-hidden',
-                      activeClass,
-                    )}
-                    style={{ clipPath: 'inset(0 50% 0 0)' }}
-                  >
-                    {React.isValidElement(Icon)
-                      ? React.cloneElement(
-                          Icon as React.ReactElement<{ fill?: string }>,
-                          { fill: 'currentColor' },
-                        )
-                      : Icon}
-                  </span>
-                </span>
-              ) : (
-                <span className={inactiveClass}>{Icon}</span>
-              )}
-            </span>
-          );
-        })}
-      </div>
-    );
-  },
-);
-Rate.displayName = 'Rate';
-
-export { Rate };

package/src/components/resizable/resizable.meta.md

@@ -1,95 +0,0 @@
----
-id: resizable
-name: Resizable
-displayName: 可拖拽分栏
-type: component
-category: layout
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Resizable 可拖拽分栏
-
-可拖拽分栏 — 基于 [`react-resizable-panels`](https://react-resizable-panels.vercel.app/),桌面应用 / 编辑器风格(VS Code、Figma、Slack)。
-对应 antd `Splitter`(v5.16+)的核心场景。
-
-## When to use
-
-- 编辑器双栏 / 三栏布局(目录 / 编辑区 / 预览)
-- 可调宽度的侧边栏 + 主区
-- 上下分割面板(终端 / 输出)
-- 嵌套面板(网格化布局)
-
-## When NOT to use
-
-- 固定宽度的 Sidebar → `Sidebar`(支持折叠 / icon 模式)
-- 临时分栏 → `Sheet` / `Drawer`
-- 卡片网格 → CSS Grid
-
-## Props
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`resizable.tsx`](./resizable.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add resizable` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add react-resizable-panels@^2.0.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`PanelGroup` 必给容器固定尺寸**:height / width 不能 0(否则面板无可分配空间)
-- **`defaultSize` 总和应为 100**:N 个 panel 的默认大小相加 = 100
-- **`minSize` 防止面板被拖到 0**:推荐每个 panel 最小 10~15(百分比)
-- **`withHandle` 提升可发现性**:握把图标让用户立刻意识到可拖拽
-- **嵌套**:嵌套 `PanelGroup` 时内层 `direction` 与外层不同,做网格化布局
-
-## Examples
-
-```tsx
-import {
-  ResizablePanelGroup, ResizablePanel, ResizableHandle,
-} from '@/components/ui/resizable';
-
-// 横向双栏
-<ResizablePanelGroup direction="horizontal" className="min-h-[300px] rounded-lg border">
-  <ResizablePanel defaultSize={30} minSize={20}>
-    <div className="flex h-full items-center justify-center p-6">侧栏</div>
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={70}>
-    <div className="flex h-full items-center justify-center p-6">主区</div>
-  </ResizablePanel>
-</ResizablePanelGroup>
-
-// 编辑器三栏(嵌套)
-<ResizablePanelGroup direction="horizontal" className="min-h-[400px]">
-  <ResizablePanel defaultSize={20}>目录</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={55}>
-    <ResizablePanelGroup direction="vertical">
-      <ResizablePanel defaultSize={70}>编辑区</ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={30}>终端</ResizablePanel>
-    </ResizablePanelGroup>
-  </ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={25}>预览</ResizablePanel>
-</ResizablePanelGroup>
-```