@teamix-evo/ui 0.1.1

package/src/components/rate/rate.tsx

@@ -0,0 +1,153 @@
+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' | 'default' | 'lg';
+  /**
+   * 自定义图标(antd `character` 并集) — 默认 `lucide-react` 的 `Star`。
+   */
+  character?: React.ReactNode;
+  /** value 变化回调。 */
+  onChange?: (value: number) => void;
+}
+
+const sizeMap = {
+  sm: 'size-4',
+  default: 'size-5',
+  lg: 'size-7',
+} as const;
+
+const Rate = React.forwardRef<HTMLDivElement, RateProps>(
+  (
+    {
+      count = 5,
+      value,
+      defaultValue,
+      allowHalf = false,
+      allowClear = true,
+      disabled = false,
+      size = 'default',
+      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])} />;
+
+    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="text-amber-400">{React.isValidElement(Icon) ? React.cloneElement(Icon as React.ReactElement<{ fill?: string }>, { fill: 'currentColor' }) : Icon}</span>
+              ) : filledHalf ? (
+                <span className="relative inline-block text-amber-400">
+                  <span className="absolute inset-0 overflow-hidden" style={{ clipPath: 'inset(0 50% 0 0)' }}>
+                    {React.isValidElement(Icon)
+                      ? React.cloneElement(Icon as React.ReactElement<{ fill?: string }>, { fill: 'currentColor' })
+                      : Icon}
+                  </span>
+                  <span className="text-muted-foreground/40">{Icon}</span>
+                </span>
+              ) : (
+                <span className="text-muted-foreground/40">{Icon}</span>
+              )}
+            </span>
+          );
+        })}
+      </div>
+    );
+  },
+);
+Rate.displayName = 'Rate';
+
+export { Rate };

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

@@ -0,0 +1,92 @@
+---
+id: resizable
+name: Resizable
+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
+
+<!-- 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 -->
+
+> 子组件:`ResizablePanelGroup`(`direction="horizontal" | "vertical"`)/ `ResizablePanel`(`defaultSize / minSize / maxSize` 百分比)/ `ResizableHandle`(分隔条,`withHandle` 显示握把)。
+
+## 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>
+```

package/src/components/resizable/resizable.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from './resizable';
+
+const meta: Meta<typeof ResizablePanelGroup> = {
+  title: '布局与容器 · Layout/Resizable',
+  component: ResizablePanelGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '可拖拽分栏 — 编辑器 / 桌面应用风格(VS Code、Figma)。基于 react-resizable-panels,支持横/纵向、嵌套、min/max 限制、握把可视化。OpenTrek tokens 适配。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ResizablePanelGroup>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[300px] w-[600px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={30} minSize={20}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="text-sm">侧栏(30%)</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={70}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="text-sm">主区(70%)</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="min-h-[400px] w-[400px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={70}>
+        <div className="flex h-full items-center justify-center p-6 text-sm">
+          上(70%)
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={30}>
+        <div className="flex h-full items-center justify-center p-6 text-sm">
+          下(30%)
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Nested: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[400px] w-[700px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={20} minSize={15}>
+        <div className="flex h-full items-center justify-center p-4 text-sm">
+          目录
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={55}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={70}>
+            <div className="flex h-full items-center justify-center p-4 text-sm">
+              编辑区
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={30}>
+            <div className="flex h-full items-center justify-center p-4 text-sm">
+              终端
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-4 text-sm">
+          预览
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};

package/src/components/resizable/resizable.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '@/utils/cn';
+
+export interface ResizablePanelGroupProps
+  extends React.ComponentProps<typeof ResizablePrimitive.PanelGroup> {}
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: ResizablePanelGroupProps) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      className,
+    )}
+    {...props}
+  />
+);
+ResizablePanelGroup.displayName = 'ResizablePanelGroup';
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+export interface ResizableHandleProps
+  extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+  /**
+   * 是否在 handle 上显示握把图标(`<GripVertical />`),提升可发现性。
+   * @default false
+   */
+  withHandle?: boolean;
+}
+
+const ResizableHandle = ({
+  withHandle = false,
+  className,
+  ...props
+}: ResizableHandleProps) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle ? (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="size-2.5" />
+      </div>
+    ) : null}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+ResizableHandle.displayName = 'ResizableHandle';
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/components/result/result.meta.md

@@ -0,0 +1,90 @@
+---
+id: result
+name: Result
+type: component
+category: feedback
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Result
+
+结果页 — antd 独有补足。**整页级反馈**:操作成功、失败、404、403、500 等场景的居中状态页(图标 + 标题 + 副标题 + 操作区)。
+
+## When to use
+
+- 操作完成的成功页(订单提交、支付完成)
+- 错误页(500 / 404 / 403)
+- 表单提交失败的反馈页
+- 空数据 + 引导操作(也可考虑 `Empty`)
+
+## When NOT to use
+
+- 行内提示 → `Alert`
+- 短暂消息 → `Sonner`
+- 阻断式确认 → `AlertDialog`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `status` | `ResultStatus` | `"info"` | – | 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。 |
+| `icon` | `React.ReactNode` | – | – | 自定义图标(覆盖默认)。 |
+| `title` | `React.ReactNode` | – | – | 标题。 |
+| `subTitle` | `React.ReactNode` | – | – | 副标题(描述)。 |
+| `extra` | `React.ReactNode` | – | – | 操作区(放 Button)。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add result` 时,以下 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 生成纪律
+
+- **`status` 决定默认图标 + 配色**:用语义,不要随便覆盖
+- **`extra` 必有主 / 次操作**:错误页放"重试 + 返回",成功页放"查看详情 + 完成"
+- **大字号错误码**(`404 / 403 / 500`)自动渲染,无需自行加 icon
+- **不要嵌套 Result**:Result 是页面级组件
+- **subTitle 简短**:< 1 段,长说明用单独的内容区
+
+## Examples
+
+```tsx
+import { Result } from '@/components/ui/result';
+import { Button } from '@/components/ui/button';
+
+// 成功
+<Result
+  status="success"
+  title="提交成功"
+  subTitle="订单已生成,我们将尽快处理。"
+  extra={[
+    <Button key="view">查看订单</Button>,
+    <Button key="back" variant="outline">返回首页</Button>,
+  ]}
+/>
+
+// 错误页
+<Result
+  status="500"
+  title="服务异常"
+  subTitle="抱歉,系统出错。请稍后重试或联系管理员。"
+  extra={<Button>返回首页</Button>}
+/>
+
+// 404
+<Result status="404" title="页面不存在" extra={<Button>返回首页</Button>} />
+```

package/src/components/result/result.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Result } from './result';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof Result> = {
+  title: '反馈与浮层 · Feedback/Result',
+  component: Result,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '结果页 — 整页级反馈(成功 / 失败 / 404 / 403 / 500)。图标 + 标题 + 副标题 + 操作区,自动配色。OpenTrek tokens 适配,等价 antd Result。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Result>;
+
+export const Success: Story = {
+  render: () => (
+    <Result
+      status="success"
+      title="提交成功"
+      subTitle="订单已生成,我们将尽快处理并通过邮件通知你。"
+      extra={
+        <>
+          <Button>查看订单</Button>
+          <Button variant="outline">返回首页</Button>
+        </>
+      }
+    />
+  ),
+};
+
+export const Error500: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Result
+      status="500"
+      title="服务异常"
+      subTitle="抱歉,系统出错了。请稍后重试或联系管理员。"
+      extra={<Button>返回首页</Button>}
+    />
+  ),
+};
+
+export const NotFound: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Result
+      status="404"
+      title="页面不存在"
+      subTitle="你访问的页面已被移除或不存在。"
+      extra={<Button>返回首页</Button>}
+    />
+  ),
+};
+
+export const Forbidden: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Result
+      status="403"
+      title="无权访问"
+      subTitle="联系管理员申请访问权限。"
+    />
+  ),
+};

package/src/components/result/result.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {
+  AlertCircle,
+  CheckCircle2,
+  Info,
+  XCircle,
+} from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+export type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
+
+const iconMap = {
+  success: { Icon: CheckCircle2, color: 'text-emerald-500' },
+  error: { Icon: XCircle, color: 'text-destructive' },
+  info: { Icon: Info, color: 'text-blue-500' },
+  warning: { Icon: AlertCircle, color: 'text-amber-500' },
+  '404': { Icon: AlertCircle, color: 'text-muted-foreground' },
+  '403': { Icon: AlertCircle, color: 'text-muted-foreground' },
+  '500': { Icon: AlertCircle, color: 'text-destructive' },
+} as const;
+
+const codeText = {
+  '404': '404',
+  '403': '403',
+  '500': '500',
+} as const;
+
+export interface ResultProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。
+   * @default "info"
+   */
+  status?: ResultStatus;
+  /** 自定义图标(覆盖默认)。 */
+  icon?: React.ReactNode;
+  /** 标题。 */
+  title?: React.ReactNode;
+  /** 副标题(描述)。 */
+  subTitle?: React.ReactNode;
+  /** 操作区(放 Button)。 */
+  extra?: React.ReactNode;
+}
+
+const Result = React.forwardRef<HTMLDivElement, ResultProps>(
+  (
+    { status = 'info', icon, title, subTitle, extra, className, children, ...props },
+    ref,
+  ) => {
+    const { Icon, color } = iconMap[status];
+    const isCode = status === '404' || status === '403' || status === '500';
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col items-center gap-4 px-6 py-12 text-center',
+          className,
+        )}
+        {...props}
+      >
+        {icon ? (
+          <div className="text-6xl">{icon}</div>
+        ) : isCode ? (
+          <div className={cn('text-7xl font-bold', color)}>
+            {codeText[status as '404' | '403' | '500']}
+          </div>
+        ) : (
+          <Icon className={cn('size-16', color)} aria-hidden="true" />
+        )}
+        {title ? (
+          <h2 className="text-2xl font-semibold">{title}</h2>
+        ) : null}
+        {subTitle ? (
+          <p className="max-w-prose text-sm text-muted-foreground">
+            {subTitle}
+          </p>
+        ) : null}
+        {children ? <div className="w-full">{children}</div> : null}
+        {extra ? (
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            {extra}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+Result.displayName = 'Result';
+
+export { Result };