@teamix-evo/ui 0.1.1

package/src/components/tree-select/tree-select.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+import { Button } from '@/components/button/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/popover/popover';
+import { Tree, type TreeNode } from '@/components/tree/tree';
+
+export interface TreeSelectProps {
+  /** 树形数据(antd `treeData` 并集)。 */
+  data: TreeNode[];
+  /**
+   * 多选模式 — 启用后下拉内的 Tree 变为 checkable;value 是 key 数组。
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 受控 value:
+   *   - `multiple=false`:`string`(单 key)/ `undefined`(未选)
+   *   - `multiple=true`:`string[]`
+   */
+  value?: string | string[];
+  /** uncontrolled 初值。 */
+  defaultValue?: string | string[];
+  /** value 变化回调。 */
+  onChange?: (value: string | string[]) => void;
+  /**
+   * 默认展开全部节点(antd `treeDefaultExpandAll` 并集)。
+   * @default false
+   */
+  defaultExpandAll?: boolean;
+  /** 占位文本。 @default "请选择" */
+  placeholder?: string;
+  /** 整体禁用。 */
+  disabled?: boolean;
+  /** 触发器 className。 */
+  className?: string;
+  /**
+   * 触发器尺寸。
+   * @default "default"
+   */
+  size?: 'sm' | 'default' | 'lg';
+}
+
+function flattenLabelMap(nodes: TreeNode[]): Map<string, React.ReactNode> {
+  const map = new Map<string, React.ReactNode>();
+  const walk = (n: TreeNode) => {
+    map.set(n.key, n.title);
+    n.children?.forEach(walk);
+  };
+  nodes.forEach(walk);
+  return map;
+}
+
+/**
+ * 树形下拉选择 — antd 独有补足。**等价 antd `TreeSelect`**。
+ * 把 `Tree` 嵌入 Popover,提供单选(selectable)或多选(checkable)两种模式 — 组织架构 / 分类树形选择常用。
+ */
+const TreeSelect = React.forwardRef<HTMLButtonElement, TreeSelectProps>(
+  (
+    {
+      data,
+      multiple = false,
+      value,
+      defaultValue,
+      onChange,
+      defaultExpandAll = false,
+      placeholder = '请选择',
+      disabled = false,
+      className,
+      size = 'default',
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<string | string[]>(
+      defaultValue ?? (multiple ? [] : ''),
+    );
+    const current = isControlled ? value! : internal;
+
+    const [open, setOpen] = React.useState(false);
+
+    const labelMap = React.useMemo(() => flattenLabelMap(data), [data]);
+
+    const display = React.useMemo(() => {
+      if (multiple) {
+        const arr = (current as string[]) ?? [];
+        if (arr.length === 0) return '';
+        if (arr.length <= 3) return arr.map((k) => labelMap.get(k) ?? k);
+        return `已选 ${arr.length} 项`;
+      }
+      const k = current as string;
+      return k ? labelMap.get(k) : '';
+    }, [current, labelMap, multiple]);
+
+    const renderDisplay = () => {
+      if (!display) return placeholder;
+      if (Array.isArray(display)) {
+        return (
+          <span className="flex flex-wrap gap-1">
+            {display.map((d, i) => (
+              <span
+                key={i}
+                className="inline-flex rounded-sm bg-muted px-1.5 py-0.5 text-xs"
+              >
+                {d}
+              </span>
+            ))}
+          </span>
+        );
+      }
+      return <span className="truncate">{display}</span>;
+    };
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            type="button"
+            variant="outline"
+            size={size}
+            disabled={disabled}
+            className={cn(
+              'min-w-[200px] justify-between font-normal',
+              !display && 'text-muted-foreground',
+              className,
+            )}
+          >
+            <span className="min-w-0 flex-1 text-left">{renderDisplay()}</span>
+            <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-72 p-2" align="start">
+          {multiple ? (
+            <Tree
+              data={data}
+              checkable
+              selectable={false}
+              defaultExpandAll={defaultExpandAll}
+              checkedKeys={current as string[]}
+              onCheck={(next) => {
+                if (!isControlled) setInternal(next);
+                onChange?.(next);
+              }}
+            />
+          ) : (
+            <Tree
+              data={data}
+              defaultExpandAll={defaultExpandAll}
+              selectedKeys={current ? [current as string] : []}
+              onSelect={(next) => {
+                const v = next[0] ?? '';
+                if (!isControlled) setInternal(v);
+                onChange?.(v);
+                setOpen(false);
+              }}
+            />
+          )}
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+TreeSelect.displayName = 'TreeSelect';
+
+export { TreeSelect };

package/src/components/typography/typography.meta.md

@@ -0,0 +1,102 @@
+---
+id: typography
+name: Typography
+type: component
+category: data-display
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Typography
+
+排版组件 — `Prose`(富文本容器)+ shadcn 风格 `Title / Paragraph / Text / Link` + antd `Text` 的 `type / strong / delete / disabled / code / ellipsis / copyable` 并集。
+
+> Prose 不依赖 `@tailwindcss/typography` 插件,样式手写并对齐 OpenTrek tokens。
+
+## When to use
+
+- **Prose**:Markdown / CMS 富文本渲染容器(自动套排版样式)
+- **Title**:页面 / 区块标题(`level={1..5}` 自动映射 `<h1>~<h5>`)
+- **Paragraph**:正文段落(行高 / 字号 / 颜色统一)
+- **Text**:行内文本带语义色 / 强调 / 复制
+- **Link**:语义化链接(类型 + 默认下划线 hover)
+
+## When NOT to use
+
+- 富文本编辑(可编辑) → 用 Tiptap / Lexical 等编辑器
+- 单一颜色文本 → 直接 `<span className="text-...">`,无需包装
+- 多行 ellipsis(2 行 / 3 行) → 自行 `line-clamp-N`(本组件 ellipsis 仅单行)
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `type` | `TextType` | `"default"` | – | 语义色(antd `type` 并集)。 |
+| `delete` | `boolean` | `false` | – | 删除线。 |
+| `disabled` | `boolean` | `false` | – | 不可用(灰色 + 不可选)。 |
+| `strong` | `boolean` | `false` | – | 加粗。 |
+| `code` | `boolean` | `false` | – | 行内代码样式(`code`)。 |
+| `ellipsis` | `boolean` | `false` | – | 单行省略(antd `ellipsis` 简化版 — 只支持 boolean,行数 / suffix 留 v0.x)。 |
+| `copyable` | `boolean \| { text: string; tooltips?: [string, string] }` | `false` | – | 可复制(antd `copyable` 并集)— 末尾追加复制图标按钮。 传对象时可指定要复制的文本(默认是 children 的纯文本);传 `true` 用 children。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add typography` 时,以下 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 -->
+
+> 子组件:`Prose` / `Title`(level 1~5)/ `Paragraph` / `Text`(type / strong / delete / disabled / code / ellipsis / copyable)/ `Link`。各自的 props 详见 [`typography.tsx`](./typography.tsx)。
+
+## AI 生成纪律
+
+- **`Title level` 决定标签**:不要用 `<h2>` 配 `level={1}`,语义会冲突
+- **`Text type` 优先于 className 颜色**:语义色让暗色模式自动适配
+- **`copyable` 仅当 children 是 string**:富节点请显式传 `copyable={{ text: '...' }}`
+- **`ellipsis` 单行**:多行省略请直接 `className="line-clamp-2"`
+- **Prose 内部不要嵌套 Prose**:嵌套排版会双倍间距
+
+## Examples
+
+```tsx
+import { Prose, Title, Paragraph, Text, Link } from '@/components/ui/typography';
+
+// 标题层级
+<Title level={1}>页面标题</Title>
+<Title level={2}>章节标题</Title>
+
+// 段落
+<Paragraph>正文段落,统一字号 / 行高 / 颜色。</Paragraph>
+
+// 行内文本
+<Text type="success" strong>成功</Text>
+<Text type="danger" delete>已废弃</Text>
+<Text disabled>不可用</Text>
+<Text code>const x = 1</Text>
+<Text ellipsis>这是一段非常长的文字...被截断</Text>
+<Text copyable>可复制的文本</Text>
+<Text copyable={{ text: 'lyca@teamix.dev' }}>邮箱(复制不同的内容)</Text>
+
+// 链接
+<Link href="/docs">文档</Link>
+<Link href="/danger" type="danger">危险链接</Link>
+
+// Prose 容器(渲染 Markdown 等富文本)
+<Prose>
+  <h1>Markdown 标题</h1>
+  <p>段落...</p>
+  <ul><li>列表项</li></ul>
+  <pre><code>console.log('hi')</code></pre>
+</Prose>
+```

package/src/components/typography/typography.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Prose, Title, Paragraph, Text, Link } from './typography';
+
+const meta: Meta<typeof Text> = {
+  title: '数据展示 · Data Display/Typography',
+  component: Text,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '排版组件 — Prose 富文本容器 + Title/Paragraph/Text/Link,合并 antd 的 type/strong/delete/disabled/code/ellipsis/copyable 能力。OpenTrek tokens 适配,无 mock。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Titles: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      {([1, 2, 3, 4, 5] as const).map((l) => (
+        <Title key={l} level={l}>
+          Level {l} 标题
+        </Title>
+      ))}
+    </div>
+  ),
+};
+
+export const TextTypes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2 text-sm">
+      <Text>默认</Text>
+      <Text type="secondary">次要</Text>
+      <Text type="success">成功</Text>
+      <Text type="warning">警告</Text>
+      <Text type="danger">危险</Text>
+      <Text strong>加粗</Text>
+      <Text delete>已废弃</Text>
+      <Text disabled>不可用</Text>
+      <Text code>const x = 1</Text>
+    </div>
+  ),
+};
+
+export const Copyable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2 text-sm">
+      <Text copyable>这段文字可复制</Text>
+      <Text copyable={{ text: 'lyca@teamix.dev' }}>邮箱(复制实际地址)</Text>
+    </div>
+  ),
+};
+
+export const Ellipsis: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-48">
+      <Text ellipsis>
+        这是一段非常非常非常长的文字内容,在窄容器内会被自动截断成单行。
+      </Text>
+    </div>
+  ),
+};
+
+export const Links: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2 text-sm">
+      <Link href="#docs" onClick={(e) => e.preventDefault()}>
+        文档
+      </Link>
+      <Link
+        href="#delete"
+        type="danger"
+        onClick={(e) => e.preventDefault()}
+      >
+        危险操作链接
+      </Link>
+    </div>
+  ),
+};
+
+export const ProseDemo: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Prose>
+      <h1>Prose 容器</h1>
+      <p>
+        Prose 给原始 HTML(Markdown 渲染产物 / CMS 富文本)套上一致排版样式 —
+        标题字号、段落行高、列表样式、代码块、引用。
+      </p>
+      <h2>子标题</h2>
+      <p>
+        访问 <a href="#">链接</a> 查看更多。<strong>强调</strong>{' '}
+        <em>斜体</em> <code>inline-code</code>。
+      </p>
+      <ul>
+        <li>列表项 1</li>
+        <li>列表项 2</li>
+        <li>列表项 3</li>
+      </ul>
+      <blockquote>这是一段引用文字。</blockquote>
+      <pre>
+        <code>{`function hello() {\n  return 'world';\n}`}</code>
+      </pre>
+    </Prose>
+  ),
+};

package/src/components/typography/typography.tsx

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import { Check, Copy } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+// ─── Prose container ─────────────────────────────────────────────────────────
+
+export interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Prose 容器 — 给原始 HTML(Markdown 渲染产物 / CMS 富文本)套上一致排版样式。
+ * 内部自动应用 Tailwind typography 风格的边距 / 标题字号 / 列表 / 链接 / 代码 / 引用。
+ *
+ * 注意:本组件刻意**不依赖** `@tailwindcss/typography` 插件 — 改用手写 selector
+ * 链让样式可控、与 design tokens 对齐。
+ */
+const Prose = React.forwardRef<HTMLDivElement, ProseProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'max-w-prose text-sm text-foreground',
+        // headings
+        '[&_h1]:mt-8 [&_h1]:mb-4 [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:tracking-tight',
+        '[&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-semibold',
+        '[&_h3]:mt-5 [&_h3]:mb-2 [&_h3]:text-xl [&_h3]:font-semibold',
+        '[&_h4]:mt-4 [&_h4]:mb-2 [&_h4]:text-lg [&_h4]:font-medium',
+        // paragraphs / lists
+        '[&_p]:my-3 [&_p]:leading-7',
+        '[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6',
+        '[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-6',
+        '[&_li]:my-1',
+        // inline
+        '[&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline',
+        '[&_strong]:font-semibold',
+        '[&_em]:italic',
+        // code
+        '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em]',
+        '[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-4',
+        '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+        // blockquote / hr
+        '[&_blockquote]:my-4 [&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground',
+        '[&_hr]:my-6 [&_hr]:border-border',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Prose.displayName = 'Prose';
+
+// ─── Title ───────────────────────────────────────────────────────────────────
+
+const titleSizes = {
+  1: 'text-3xl font-bold tracking-tight',
+  2: 'text-2xl font-semibold tracking-tight',
+  3: 'text-xl font-semibold',
+  4: 'text-lg font-medium',
+  5: 'text-base font-medium',
+} as const;
+
+export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * 层级(1~5),决定字号 / 粗细;同时映射为 `<h1>~<h5>` 标签。
+   * @default 1
+   */
+  level?: 1 | 2 | 3 | 4 | 5;
+}
+
+const Title = React.forwardRef<HTMLHeadingElement, TitleProps>(
+  ({ level = 1, className, ...props }, ref) => {
+    const Comp = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+    return (
+      <Comp
+        ref={ref}
+        className={cn(titleSizes[level], className)}
+        {...props}
+      />
+    );
+  },
+);
+Title.displayName = 'Title';
+
+// ─── Paragraph ───────────────────────────────────────────────────────────────
+
+export interface ParagraphProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm leading-7 text-foreground', className)}
+      {...props}
+    />
+  ),
+);
+Paragraph.displayName = 'Paragraph';
+
+// ─── Text(行内文本,支持 antd ellipsis / copyable / type)──────────────────
+
+export type TextType = 'default' | 'secondary' | 'success' | 'warning' | 'danger';
+
+export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * 语义色(antd `type` 并集)。
+   * @default "default"
+   */
+  type?: TextType;
+  /**
+   * 删除线。
+   * @default false
+   */
+  delete?: boolean;
+  /**
+   * 不可用(灰色 + 不可选)。
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 加粗。
+   * @default false
+   */
+  strong?: boolean;
+  /**
+   * 行内代码样式(`code`)。
+   * @default false
+   */
+  code?: boolean;
+  /**
+   * 单行省略(antd `ellipsis` 简化版 — 只支持 boolean,行数 / suffix 留 v0.x)。
+   * @default false
+   */
+  ellipsis?: boolean;
+  /**
+   * 可复制(antd `copyable` 并集)— 末尾追加复制图标按钮。
+   * 传对象时可指定要复制的文本(默认是 children 的纯文本);传 `true` 用 children。
+   * @default false
+   */
+  copyable?: boolean | { text: string; tooltips?: [string, string] };
+}
+
+const typeColor: Record<TextType, string> = {
+  default: 'text-foreground',
+  secondary: 'text-muted-foreground',
+  success: 'text-emerald-600',
+  warning: 'text-amber-600',
+  danger: 'text-destructive',
+};
+
+const Text = React.forwardRef<HTMLSpanElement, TextProps>(
+  (
+    {
+      type = 'default',
+      delete: del = false,
+      disabled = false,
+      strong = false,
+      code = false,
+      ellipsis = false,
+      copyable = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [copied, setCopied] = React.useState(false);
+    const handleCopy = () => {
+      const text =
+        typeof copyable === 'object' && copyable.text
+          ? copyable.text
+          : typeof children === 'string'
+            ? children
+            : '';
+      void navigator.clipboard?.writeText(text).then(() => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      });
+    };
+
+    const cls = cn(
+      typeColor[type],
+      strong && 'font-semibold',
+      del && 'line-through',
+      disabled && 'cursor-not-allowed select-none opacity-50',
+      ellipsis && 'inline-block max-w-full truncate align-bottom',
+      code &&
+        'rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em]',
+      className,
+    );
+
+    if (copyable) {
+      return (
+        <span className="inline-flex items-center gap-1">
+          <span ref={ref} className={cls} {...props}>
+            {children}
+          </span>
+          <button
+            type="button"
+            onClick={handleCopy}
+            aria-label={copied ? '已复制' : '复制'}
+            className="rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            {copied ? (
+              <Check className="size-3.5 text-emerald-600" />
+            ) : (
+              <Copy className="size-3.5" />
+            )}
+          </button>
+        </span>
+      );
+    }
+
+    return (
+      <span ref={ref} className={cls} {...props}>
+        {children}
+      </span>
+    );
+  },
+);
+Text.displayName = 'Text';
+
+// ─── Link(antd 风格,默认下划线 hover)────────────────────────────────────
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** 语义色(同 Text 的 type)。 @default "default" */
+  type?: TextType;
+}
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, type = 'default', ...props }, ref) => (
+    <a
+      ref={ref}
+      className={cn(
+        'underline-offset-4 transition-colors hover:underline',
+        type === 'default' ? 'text-primary' : typeColor[type],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Link.displayName = 'Link';
+
+export { Prose, Title, Paragraph, Text, Link };