@teamix-evo/ui 0.4.0 → 0.5.0

package/src/lib/color.ts

@@ -0,0 +1,243 @@
+export interface HsvaColor {
+  h: number;
+  s: number;
+  v: number;
+  a: number;
+}
+
+export interface RgbaColor {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export interface HsbaColor {
+  h: number;
+  s: number;
+  b: number;
+  a: number;
+}
+
+// ─── Conversion helpers ────────────────────────────────────────────────────
+
+function clamp(v: number, min: number, max: number) {
+  return Math.min(Math.max(v, min), max);
+}
+
+function round(v: number, d = 0) {
+  const m = 10 ** d;
+  return Math.round(v * m) / m;
+}
+
+function hsvaToRgba(hsva: HsvaColor): RgbaColor {
+  const h = (hsva.h / 360) * 6;
+  const s = hsva.s / 100;
+  const v = hsva.v / 100;
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - s * f);
+  const t = v * (1 - s * (1 - f));
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod]!;
+  const g = [t, v, v, q, p, p][mod]!;
+  const b = [p, p, t, v, v, q][mod]!;
+  return {
+    r: round(r * 255),
+    g: round(g * 255),
+    b: round(b * 255),
+    a: round(hsva.a, 2),
+  };
+}
+
+function rgbaToHsva(rgba: RgbaColor): HsvaColor {
+  const r = rgba.r / 255;
+  const g = rgba.g / 255;
+  const b = rgba.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  const s = max === 0 ? 0 : (d / max) * 100;
+  const v = max * 100;
+  if (d !== 0) {
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+        break;
+      case g:
+        h = ((b - r) / d + 2) * 60;
+        break;
+      case b:
+        h = ((r - g) / d + 4) * 60;
+        break;
+    }
+  }
+  return { h: round(h), s: round(s), v: round(v), a: round(rgba.a, 2) };
+}
+
+function parseHex(hex: string): RgbaColor | null {
+  const h = hex.replace(/^#/, '');
+  if (!/^[0-9a-fA-F]{3,8}$/.test(h)) return null;
+  let r: number, g: number, b: number, a = 1;
+  if (h.length === 3 || h.length === 4) {
+    r = parseInt(h[0]! + h[0]!, 16);
+    g = parseInt(h[1]! + h[1]!, 16);
+    b = parseInt(h[2]! + h[2]!, 16);
+    if (h.length === 4) a = parseInt(h[3]! + h[3]!, 16) / 255;
+  } else if (h.length === 6 || h.length === 8) {
+    r = parseInt(h.slice(0, 2), 16);
+    g = parseInt(h.slice(2, 4), 16);
+    b = parseInt(h.slice(4, 6), 16);
+    if (h.length === 8) a = parseInt(h.slice(6, 8), 16) / 255;
+  } else {
+    return null;
+  }
+  return { r, g, b, a: round(a, 2) };
+}
+
+function parseColorString(input: string): RgbaColor | null {
+  const s = input.trim().toLowerCase();
+  // hex
+  if (s.startsWith('#')) return parseHex(s);
+  // rgb/rgba
+  const rgbMatch = s.match(
+    /^rgba?\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/,
+  );
+  if (rgbMatch) {
+    let a = 1;
+    if (rgbMatch[4]) {
+      a = rgbMatch[4].endsWith('%')
+        ? parseFloat(rgbMatch[4]) / 100
+        : parseFloat(rgbMatch[4]);
+    }
+    return {
+      r: clamp(parseInt(rgbMatch[1]!, 10), 0, 255),
+      g: clamp(parseInt(rgbMatch[2]!, 10), 0, 255),
+      b: clamp(parseInt(rgbMatch[3]!, 10), 0, 255),
+      a: clamp(round(a, 2), 0, 1),
+    };
+  }
+  // hsb/hsv
+  const hsbMatch = s.match(
+    /^hs[bv]\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)%?\s*[,\s]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/,
+  );
+  if (hsbMatch) {
+    let a = 1;
+    if (hsbMatch[4]) {
+      a = hsbMatch[4].endsWith('%')
+        ? parseFloat(hsbMatch[4]) / 100
+        : parseFloat(hsbMatch[4]);
+    }
+    const hsva: HsvaColor = {
+      h: clamp(parseFloat(hsbMatch[1]!), 0, 360),
+      s: clamp(parseFloat(hsbMatch[2]!), 0, 100),
+      v: clamp(parseFloat(hsbMatch[3]!), 0, 100),
+      a: clamp(round(a, 2), 0, 1),
+    };
+    return hsvaToRgba(hsva);
+  }
+  return null;
+}
+
+function rgbaToHex(rgba: RgbaColor): string {
+  const r = clamp(Math.round(rgba.r), 0, 255)
+    .toString(16)
+    .padStart(2, '0');
+  const g = clamp(Math.round(rgba.g), 0, 255)
+    .toString(16)
+    .padStart(2, '0');
+  const b = clamp(Math.round(rgba.b), 0, 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${r}${g}${b}`;
+}
+
+function rgbaToHex8(rgba: RgbaColor): string {
+  const base = rgbaToHex(rgba).slice(1);
+  const a = clamp(Math.round(rgba.a * 255), 0, 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${base}${a}`;
+}
+
+// ─── Color class ───────────────────────────────────────────────────────────
+
+class Color {
+  private _hsva: HsvaColor;
+
+  constructor(input: string | HsvaColor | HsbaColor | RgbaColor | Color) {
+    if (input instanceof Color) {
+      this._hsva = { ...input._hsva };
+    } else if (typeof input === 'string') {
+      const rgba = parseColorString(input);
+      this._hsva = rgba ? rgbaToHsva(rgba) : { h: 0, s: 0, v: 0, a: 1 };
+    } else if ('v' in input) {
+      this._hsva = { ...(input as HsvaColor) };
+    } else if ('b' in input) {
+      const hsba = input as HsbaColor;
+      this._hsva = { h: hsba.h, s: hsba.s, v: hsba.b, a: hsba.a };
+    } else {
+      this._hsva = rgbaToHsva(input as RgbaColor);
+    }
+  }
+
+  toHsva(): HsvaColor {
+    return { ...this._hsva };
+  }
+
+  toHsb(): HsbaColor {
+    return {
+      h: round(this._hsva.h),
+      s: round(this._hsva.s),
+      b: round(this._hsva.v),
+      a: round(this._hsva.a, 2),
+    };
+  }
+
+  toRgb(): RgbaColor {
+    return hsvaToRgba(this._hsva);
+  }
+
+  toHex(): string {
+    return rgbaToHex(this.toRgb());
+  }
+
+  toHexString(): string {
+    return this._hsva.a < 1 ? this.toHex8() : this.toHex();
+  }
+
+  toHex8(): string {
+    return rgbaToHex8(this.toRgb());
+  }
+
+  toRgbString(): string {
+    const { r, g, b, a } = this.toRgb();
+    return a < 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+  }
+
+  toHsbString(): string {
+    const { h, s, b, a } = this.toHsb();
+    return a < 1
+      ? `hsb(${h}, ${s}%, ${b}%, ${a})`
+      : `hsb(${h}, ${s}%, ${b}%)`;
+  }
+
+  get alpha(): number {
+    return this._hsva.a;
+  }
+
+  setAlpha(a: number): Color {
+    return new Color({ ...this._hsva, a: clamp(a, 0, 1) });
+  }
+
+  equals(other: Color | null | undefined): boolean {
+    if (!other) return false;
+    const a = this.toRgb();
+    const b = other.toRgb();
+    return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
+  }
+}
+
+export { Color };

package/src/{utils/cn.ts → lib/utils.ts}

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-export function cn(...inputs: ClassValue[]): string {
+export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

package/src/components/accordion/accordion.meta.md

@@ -1,88 +0,0 @@
----
-id: accordion
-name: Accordion
-displayName: 折叠面板
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Accordion 折叠面板
-
-折叠面板 — Radix Accordion + antd Collapse 的 `accordion` 模式(`type="single"` 即单展开)。
-**与 Collapsible 区别**:Accordion 是**多 item 列表**,可单展开 / 多展开;Collapsible 是单个区域的展开收起。
-
-## When to use
-
-- FAQ 列表
-- 表单分组(高级选项 / 联系方式 / 隐私偏好)
-- 长内容分章节折叠
-
-## When NOT to use
-
-- 单区域折叠 → `Collapsible`
-- 平级 tab 切换 → `Tabs`
-- 列表项的展开内容 → `Table` 的 expandable row
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`accordion.tsx`](./accordion.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add accordion` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-accordion@^1.2.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 子组件:`Accordion`(Root,需 `type="single"` 或 `"multiple"`)/ `AccordionItem` / `AccordionTrigger` / `AccordionContent`。
-
-## AI 生成纪律
-
-- **`type` 必传**:`"single"`(单展开,可选 `collapsible` 让用户折叠)/ `"multiple"`(多展开)
-- **每项 value 唯一**:用稳定 ID
-- **AccordionTrigger 默认带 ChevronDown**:展开时 180° 翻转,**不要**自行加图标
-- **单展开 + collapsible**:`type="single" collapsible` 才能让"再次点击当前项"折叠;不加只能在 item 间切换
-
-## Examples
-
-```tsx
-import {
-  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
-} from '@/components/ui/accordion';
-
-// 单展开(可折叠)
-<Accordion type="single" collapsible className="w-96">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>什么是 Teamix Evo?</AccordionTrigger>
-    <AccordionContent>面向产品研发的 AI Coding 套件...</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>如何安装?</AccordionTrigger>
-    <AccordionContent>npx teamix-evo tokens init opentrek</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// 多展开
-<Accordion type="multiple" defaultValue={['a', 'b']}>...</Accordion>
-```

package/src/components/accordion/accordion.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from './accordion';
-
-const meta: Meta<typeof Accordion> = {
-  title: '数据展示 · Data Display/Accordion',
-  component: Accordion,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '折叠面板 — Radix Accordion + antd Collapse accordion 模式。支持单展开(collapsible) / 多展开,每项自带 ChevronDown 箭头翻转动画。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-
-export const Single: Story = {
-  render: () => (
-    <Accordion type="single" collapsible className="w-96">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>什么是 Teamix Evo?</AccordionTrigger>
-        <AccordionContent>
-          面向产品研发场景的 AI Coding
-          套件,提供设计体系、技能、组件、文档等可装配资产。
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>如何安装?</AccordionTrigger>
-        <AccordionContent>
-          <code className="rounded bg-muted px-1.5 py-0.5">
-            npx teamix-evo tokens init opentrek
-          </code>
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>可以同时支持多个 IDE 吗?</AccordionTrigger>
-        <AccordionContent>
-          可以,Skills 同时支持 Qoder 和 Claude Code(同源 SKILL.md 格式)。
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const Multiple: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Accordion type="multiple" defaultValue={['a', 'b']} className="w-96">
-      <AccordionItem value="a">
-        <AccordionTrigger>分组 A</AccordionTrigger>
-        <AccordionContent>分组 A 的内容</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="b">
-        <AccordionTrigger>分组 B</AccordionTrigger>
-        <AccordionContent>分组 B 的内容</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="c">
-        <AccordionTrigger>分组 C</AccordionTrigger>
-        <AccordionContent>分组 C 的内容</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};

package/src/components/accordion/accordion.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-// ─── AccordionProps(ADR 0025 合规:显式声明交互 props)─────────────────────
-
-interface AccordionBaseProps {
-  /**
-   * 排列方向(antd 未提供,shadcn 独有扩展) — 竖直为默认手风琴;水平适用 FAQ 横排。
-   * @default "vertical"
-   */
-  orientation?: 'vertical' | 'horizontal';
-  /**
-   * 禁用整组交互(灰化 + 所有 Trigger 不可点)。
-   * @default false
-   */
-  disabled?: boolean;
-}
-
-export interface AccordionSingleProps
-  extends Omit<
-      React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>,
-      | 'type'
-      | 'value'
-      | 'defaultValue'
-      | 'onValueChange'
-      | 'collapsible'
-      | 'orientation'
-      | 'disabled'
-    >,
-    AccordionBaseProps {
-  /**
-   * 模式 — `single` 同时只展开一项(互斥);`multiple` 可展开任意多项。
-   */
-  type: 'single';
-  /**
-   * 受控当前展开 item 的 value(仅 `type="single"` 时为 string)。
-   */
-  value?: string;
-  /**
-   * 非受控初始展开项。
-   * @default ""
-   */
-  defaultValue?: string;
-  /**
-   * 展开状态变化回调(`type="single"` 时返回单个 value string)。
-   */
-  onValueChange?: (value: string) => void;
-  /**
-   * 是否允许全部收起(antd `accordion` 模式下默认不可收起,此属性允许) — 仅 `type="single"` 有效。
-   * @default false
-   */
-  collapsible?: boolean;
-}
-
-export interface AccordionMultipleProps
-  extends Omit<
-      React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>,
-      | 'type'
-      | 'value'
-      | 'defaultValue'
-      | 'onValueChange'
-      | 'collapsible'
-      | 'orientation'
-      | 'disabled'
-    >,
-    AccordionBaseProps {
-  /**
-   * 模式 — `multiple` 可展开任意多项。
-   */
-  type: 'multiple';
-  /**
-   * 受控当前展开项 value 数组(`type="multiple"` 时为 string[])。
-   */
-  value?: string[];
-  /**
-   * 非受控初始展开项(数组)。
-   * @default []
-   */
-  defaultValue?: string[];
-  /**
-   * 展开状态变化回调(`type="multiple"` 时返回 string[])。
-   */
-  onValueChange?: (value: string[]) => void;
-}
-
-export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-
-const Accordion = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Root>,
-  AccordionProps
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Root
-    ref={ref}
-    className={cn(className)}
-    {...(props as React.ComponentPropsWithoutRef<
-      typeof AccordionPrimitive.Root
-    >)}
-  />
-));
-Accordion.displayName = 'Accordion';
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn('border-b border-b-border', className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = 'AccordionItem';
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'group flex cursor-pointer flex-1 items-center justify-between gap-3 rounded-sm py-4 text-xs font-medium text-left transition-colors',
-        'hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        '[&[data-state=open]>svg]:rotate-180',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-hover:text-primary" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-xs data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/affix/affix.meta.md

@@ -1,98 +0,0 @@
----
-id: affix
-name: Affix
-displayName: 固钉
-type: component
-category: navigation
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Affix 固钉
-
-滚动吸顶 / 吸底 — antd 独有补足。**等价 antd `Affix`**。当容器滚出指定偏移时,把 children 切换为 `position: fixed`,保留原占位避免页面跳动。监听 `scroll` 事件 + `getBoundingClientRect()`,无第三方依赖。
-
-## When to use
-
-- 表格操作栏在滚动时吸顶(批量删除 / 导出)
-- 长表单的"提交"按钮在底部时吸顶
-- 文档侧边的目录/锚点导航
-- 落地页 CTA(吸顶 / 吸底"立即注册")
-
-## When NOT to use
-
-- 整页 header → 直接 `position: sticky` 配 Tailwind `sticky top-0` 更轻
-- 弹窗内的吸附 → Drawer / Sheet 已有内置
-- 一页超过 1 个 Affix:容易形成"漂浮屏",有损可读性
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `offsetTop` | `number` | `0` | – | 滚动到此偏移量(相对视口顶部)时开始吸顶,单位 px。 |
-| `offsetBottom` | `number` | – | – | 滚动到此偏移量(相对视口底部)时开始吸底 — 与 `offsetTop` 互斥。 |
-| `container` | `() => HTMLElement \| Window` | `() => window` | – | 滚动容器(antd `target` 并集) — 返回需要监听 `scroll` / `resize` 事件的滚动容器, 默认 `window`。常见场景:在内层 `overflow:auto` 容器(对话框 / 抽屉 / 自定义滚动区)中 让 Affix 跟随该容器滚动,而非主视口。 切到自定义容器后,内部使用 `position: sticky` 由浏览器原生处理"吸附后跟随容器视口顶部" (无需手动算 scrollTop 偏移),容器只需保证未被 `overflow: hidden` 切割。 |
-| `onAffixChange` | `(affixed: boolean) => void` | – | – | 吸附状态变化回调(antd `onChange` 并集)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add affix` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **一页 ≤ 1 个 Affix** — 滥用会让页面充满浮动元素,极差体验
-- **`offsetTop` 与 `offsetBottom` 互斥** — 同时传时优先 `offsetBottom`(吸底)
-- **优先用 Tailwind `sticky top-N`** — 大部分"吸附顶部"用 sticky 就够,只有需要"超出容器边界仍跟随视口"才用 Affix
-- **不要让 Affix 包裹复杂动态高度内容** — width / height 是按初次渲染算的,内容剧烈变化会失同步
-- **`zIndex` 默认 10** — 与 Sonner toast(z=9999)、Dialog(z=50)等级别错开;如需更高自行 className 覆盖
-- **`container` 自定义容器时,内部走 `position: sticky`** — 容器只需保证 `overflow: auto/scroll`(不能是 `hidden`),且祖先链不能有 `transform` / `filter` 等限定 stacking context 的属性。无需手动设 `position: relative`(浏览器原生托管)
-- **Storybook 中默认 window 模式不可演示** — Storybook 8 autodocs iframe 不暴露稳定的 window scroll + toolbar globals 不刷新,但**业务真实页面上 `<Affix offsetTop={64}>` 零配置即可工作**;在文档站验证时请用 container 模式(三件 sticky stories 已就位)
-
-## Affix 形态 — 旧库 API → 新库映射
-
-| 旧库 (Teamix 1.0 / antd `Affix`) | 新库 (`@teamix-evo/ui` `Affix`) | 备注 |
-| --- | --- | --- |
-| `offsetTop` | `offsetTop` | 行为一致 |
-| `offsetBottom` | `offsetBottom` | 行为一致;与 `offsetTop` 互斥(同传时 `offsetBottom` 优先) |
-| `onAffix` | `onAffixChange` | 重命名;签名一致 `(affixed: boolean) => void` |
-| `target` | `container` | 重命名;返回 `HTMLElement \| Window`,默认 `window` |
-| `useAbsolute` | — | 不修复 — 内部根据 `container` 是否传入自动切 `fixed`/`absolute` |
-
-## Examples
-
-```tsx
-import { Affix } from '@/components/ui/affix';
-import { Button } from '@/components/ui/button';
-
-// 吸顶
-<Affix offsetTop={64}>
-  <div className="rounded-md border bg-card p-3 shadow-sm">
-    <Button>导出全部</Button>
-    <Button variant="outline">批量删除</Button>
-  </div>
-</Affix>
-
-// 吸底
-<Affix offsetBottom={24}>
-  <Button block>立即提交</Button>
-</Affix>
-
-// 监听状态变化
-<Affix offsetTop={0} onAffixChange={(affixed) => console.log('affixed:', affixed)}>
-  <Toolbar />
-</Affix>
-```