@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/upload/upload.tsx

@@ -1,398 +0,0 @@
-import * as React from 'react';
-import {
-  File,
-  Image as ImageIcon,
-  Upload as UploadIcon,
-  X,
-} from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Button } from '@/components/button/button';
-import { Progress } from '@/components/progress/progress';
-
-export interface UploadFileItem {
-  /** 稳定 ID(由消费方维护)。 */
-  uid: string;
-  /** 显示文件名。 */
-  name: string;
-  /** 文件原对象(可选,服务端已上传完成的回填可不传)。 */
-  file?: File;
-  /**
-   * 上传状态(antd `status` 并集) — uploading 显示进度条;error 红色文案;done 不显示进度。
-   */
-  status?: 'uploading' | 'done' | 'error' | 'removed';
-  /** 上传百分比(0~100),仅 `status="uploading"` 时显示。 */
-  percent?: number;
-  /** 上传完成后的远程 URL(可选)。 */
-  url?: string;
-  /**
-   * 缩略图 URL(可选) — `listType="image"|"card"` 时以此为展示源;
-   * 未传时回退为 `url` 或默认文件图标。
-   */
-  thumbUrl?: string;
-}
-
-export interface UploadProps {
-  /**
-   * 已上传文件列表(受控)— 不传则组件内部维护本地列表(限制少,通常配 onChange)。
-   */
-  fileList?: UploadFileItem[];
-  /**
-   * 文件接受类型(等价 input.accept) — e.g. `image/*`, `.pdf,.docx`。
-   */
-  accept?: string;
-  /**
-   * 是否支持多文件选择(antd `multiple` 并集)。
-   * @default false
-   */
-  multiple?: boolean;
-  /**
-   * 最大文件数(超出则忽略,触发 `onExceed`)。
-   */
-  maxCount?: number;
-  /**
-   * 单文件最大字节数(超出则忽略,触发 `onExceed`)。
-   */
-  maxSize?: number;
-  /**
-   * 文件添加前的校验钩子(antd `beforeUpload` 并集)。
-   * - 返回 `false` 拒绝当前文件
-   * - 返回 `true` / `undefined` 允许
-   * - 返回 新 `File` 对象可替换原文件(重命名 / 压缩等)
-   * - 支持异步 `Promise`
-   *
-   * 注意: 此钩子在 `maxCount` / `maxSize` 校验**之后**调用。
-   */
-  beforeUpload?: (
-    file: File,
-    fileList: File[],
-  ) => boolean | File | void | Promise<boolean | File | void>;
-  /**
-   * 启用拖拽上传(antd `Dragger` 并集) — 显示大块虚线区,可点击亦可拖拽。
-   * @default false
-   */
-  dragger?: boolean;
-  /** 禁用上传(已选文件不可删除)。 */
-  disabled?: boolean;
-  /**
-   * 是否显示文件列表(antd `showUploadList` 并集)。
-   * @default true
-   */
-  showFileList?: boolean;
-  /**
-   * 文件列表的展示形态(antd `listType` 并集) —
-   *   - `text`(默认):文件名 + 进度条,适用文档上传
-   *   - `image`:小缩略图 + 文件名,适用头像 / 附件预览
-   *   - `card`:网格大缩略图卡,适用多图上传 / 产品图库
-   * @default "text"
-   */
-  listType?: 'text' | 'image' | 'card';
-  /** 文件被添加(用户选择 / 拖入)时的回调 — 返回更新后的列表。 */
-  onChange?: (next: UploadFileItem[]) => void;
-  /** 文件被移除时的回调。 */
-  onRemove?: (file: UploadFileItem) => void;
-  /** 超出 maxCount / maxSize 时的回调。 */
-  onExceed?: (rejected: File[], reason: 'count' | 'size') => void;
-  /** 触发器自定义内容(非 dragger 模式下渲染于 Button 内)。 */
-  children?: React.ReactNode;
-  className?: string;
-}
-
-function makeUid(): string {
-  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
-}
-
-const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
-  (
-    {
-      fileList,
-      accept,
-      multiple = false,
-      maxCount,
-      maxSize,
-      dragger = false,
-      disabled = false,
-      showFileList = true,
-      listType = 'text',
-      onChange,
-      onRemove,
-      onExceed,
-      beforeUpload,
-      children,
-      className,
-    },
-    ref,
-  ) => {
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const [internal, setInternal] = React.useState<UploadFileItem[]>([]);
-    const isControlled = fileList !== undefined;
-    const current = isControlled ? fileList! : internal;
-
-    const [dragOver, setDragOver] = React.useState(false);
-
-    const setList = (next: UploadFileItem[]) => {
-      if (!isControlled) setInternal(next);
-      onChange?.(next);
-    };
-
-    const addFiles = async (files: File[]) => {
-      if (disabled || files.length === 0) return;
-      let candidate = files;
-
-      if (typeof maxSize === 'number') {
-        const tooBig = candidate.filter((f) => f.size > maxSize);
-        if (tooBig.length) onExceed?.(tooBig, 'size');
-        candidate = candidate.filter((f) => f.size <= maxSize);
-      }
-
-      const remaining =
-        typeof maxCount === 'number'
-          ? Math.max(0, maxCount - current.length)
-          : candidate.length;
-      if (typeof maxCount === 'number' && candidate.length > remaining) {
-        onExceed?.(candidate.slice(remaining), 'count');
-        candidate = candidate.slice(0, remaining);
-      }
-
-      // beforeUpload 钩子 — 逐文件校验
-      if (beforeUpload) {
-        const accepted: File[] = [];
-        for (const f of candidate) {
-          try {
-            const result = await beforeUpload(f, candidate);
-            if (result === false) continue; // 拒绝
-            if (result instanceof globalThis.File) {
-              accepted.push(result); // 替换文件
-            } else {
-              accepted.push(f); // 允许原文件
-            }
-          } catch {
-            // Promise reject = 拒绝
-            continue;
-          }
-        }
-        candidate = accepted;
-      }
-
-      if (candidate.length === 0) return;
-
-      const items: UploadFileItem[] = candidate.map((f) => ({
-        uid: makeUid(),
-        name: f.name,
-        file: f,
-        status: 'done',
-      }));
-      setList([...current, ...items]);
-    };
-
-    const handleSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const list = e.target.files ? Array.from(e.target.files) : [];
-      addFiles(list);
-      e.target.value = '';
-    };
-
-    const remove = (uid: string) => {
-      const target = current.find((f) => f.uid === uid);
-      if (!target) return;
-      setList(current.filter((f) => f.uid !== uid));
-      onRemove?.(target);
-    };
-
-    const openPicker = () => {
-      if (disabled) return;
-      inputRef.current?.click();
-    };
-
-    const onDrop = (e: React.DragEvent) => {
-      e.preventDefault();
-      setDragOver(false);
-      if (disabled) return;
-      const files = Array.from(e.dataTransfer.files);
-      addFiles(files);
-    };
-
-    const trigger = dragger ? (
-      <div
-        role="button"
-        tabIndex={disabled ? -1 : 0}
-        aria-disabled={disabled}
-        onClick={openPicker}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            openPicker();
-          }
-        }}
-        onDragOver={(e) => {
-          e.preventDefault();
-          if (!disabled) setDragOver(true);
-        }}
-        onDragLeave={() => setDragOver(false)}
-        onDrop={onDrop}
-        className={cn(
-          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-border border-dashed bg-muted/30 px-6 py-10 text-center text-xs text-muted-foreground transition-colors',
-          'hover:border-primary/50 hover:bg-muted/50',
-          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-          dragOver && 'border-primary bg-primary/5',
-          disabled && 'cursor-not-allowed opacity-60',
-        )}
-      >
-        {children ?? (
-          <>
-            <UploadIcon className="size-8 text-primary/70" />
-            <div className="font-medium text-foreground">
-              点击或拖拽文件到此处上传
-            </div>
-            <div className="text-xs">
-              {multiple ? '可选择多个文件' : '仅支持单个文件'}
-              {accept ? ` · 限 ${accept}` : null}
-            </div>
-          </>
-        )}
-      </div>
-    ) : (
-      <Button
-        type="button"
-        variant="outline"
-        onClick={openPicker}
-        disabled={disabled}
-        icon={<UploadIcon />}
-      >
-        {children ?? '选择文件'}
-      </Button>
-    );
-
-    return (
-      <div ref={ref} className={cn('flex flex-col gap-3', className)}>
-        <input
-          ref={inputRef}
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          disabled={disabled}
-          onChange={handleSelect}
-          className="hidden"
-        />
-        {trigger}
-        {showFileList && current.length > 0 ? (
-          listType === 'card' ? (
-            <ul
-              className="grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-3"
-              role="list"
-            >
-              {current.map((f) => {
-                const thumb = f.thumbUrl ?? f.url;
-                return (
-                  <li
-                    key={f.uid}
-                    className={cn(
-                      'group/uc relative flex aspect-square flex-col items-center justify-center overflow-hidden rounded-md border border-border bg-card text-center text-xs',
-                      f.status === 'error' && 'border-destructive/40',
-                    )}
-                  >
-                    {thumb ? (
-                      <img
-                        src={thumb}
-                        alt={f.name}
-                        className="size-full object-cover"
-                      />
-                    ) : (
-                      <div className="flex flex-col items-center gap-1 px-2 text-muted-foreground">
-                        <ImageIcon className="size-6" />
-                        <span
-                          className={cn(
-                            'line-clamp-2 break-all',
-                            f.status === 'error' && 'text-destructive',
-                          )}
-                          title={f.name}
-                        >
-                          {f.name}
-                        </span>
-                      </div>
-                    )}
-                    {f.status === 'uploading' ? (
-                      <div className="absolute inset-x-0 bottom-0 bg-background/85 px-2 py-1">
-                        <Progress value={f.percent ?? 0} size="sm" />
-                      </div>
-                    ) : null}
-                    {!disabled ? (
-                      <button
-                        type="button"
-                        aria-label={`移除 ${f.name}`}
-                        onClick={() => remove(f.uid)}
-                        className="absolute right-1 top-1 cursor-pointer rounded-sm bg-background/80 p-1 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/uc:opacity-100"
-                      >
-                        <X className="size-3.5" />
-                      </button>
-                    ) : null}
-                  </li>
-                );
-              })}
-            </ul>
-          ) : (
-            <ul className="flex flex-col gap-2">
-              {current.map((f) => {
-                const isImage = listType === 'image';
-                const thumb = f.thumbUrl ?? f.url;
-                return (
-                  <li
-                    key={f.uid}
-                    className={cn(
-                      'flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs',
-                      f.status === 'error' && 'border-destructive/40',
-                    )}
-                  >
-                    {isImage ? (
-                      <div className="size-10 shrink-0 overflow-hidden rounded-sm border border-border bg-muted">
-                        {thumb ? (
-                          <img
-                            src={thumb}
-                            alt={f.name}
-                            className="size-full object-cover"
-                          />
-                        ) : (
-                          <div className="flex size-full items-center justify-center text-muted-foreground">
-                            <ImageIcon className="size-4" />
-                          </div>
-                        )}
-                      </div>
-                    ) : (
-                      <File className="size-4 shrink-0 text-muted-foreground" />
-                    )}
-                    <div className="flex min-w-0 flex-1 flex-col gap-1">
-                      <span
-                        className={cn(
-                          'truncate',
-                          f.status === 'error' && 'text-destructive',
-                        )}
-                        title={f.name}
-                      >
-                        {f.name}
-                      </span>
-                      {f.status === 'uploading' ? (
-                        <Progress value={f.percent ?? 0} size="sm" />
-                      ) : null}
-                    </div>
-                    {!disabled ? (
-                      <button
-                        type="button"
-                        aria-label={`移除 ${f.name}`}
-                        onClick={() => remove(f.uid)}
-                        className="cursor-pointer rounded-sm p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                      >
-                        <X className="size-4" />
-                      </button>
-                    ) : null}
-                  </li>
-                );
-              })}
-            </ul>
-          )
-        ) : null}
-      </div>
-    );
-  },
-);
-Upload.displayName = 'Upload';
-
-export { Upload };

package/src/components/watermark/watermark.meta.md

@@ -1,100 +0,0 @@
----
-id: watermark
-name: Watermark
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 水印
----
-
-# Watermark 水印
-
-水印 — antd 独有补足。**等价 antd `Watermark`**(v5.1+)。在容器内部生成重复平铺的 SVG 水印(文字 / 图片),用于敏感页面 / 内部文档 / 演示场景。
-
-## When to use
-
-- 内部管理后台敏感页面(显示用户名 + 工号,起威慑作用)
-- 文档预览(防止截图被盗用)
-- 设计稿 / 评审页(标注"内部" / "Draft")
-- demo 录屏(标注产品名 / 版本)
-
-## When NOT to use
-
-- 真正的版权保护 → **服务端水印** + 数字签名;前端水印可被开发者删除
-- 通知 / 提示语 → `Alert` / `Tag`(语义不一样)
-- 装饰背景图 → CSS `background-image`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `content` | `string \| string[]` | – | – | 水印文字(antd `content` 并集) — 单行字符串或多行字符串数组。 |
-| `image` | `string` | – | – | 水印图片(antd `image` 并集) — 优先级高于 `content`。建议透明 PNG / SVG。 |
-| `width` | `number` | `120` | – | 单块水印宽度(px)。 |
-| `height` | `number` | `64` | – | 单块水印高度(px)。 |
-| `rotate` | `number` | `-22` | – | 水印旋转角度(deg)。 |
-| `fontSize` | `number` | `14` | – | 字体大小(px)。 |
-| `fontColor` | `string` | `"rgba(0,0,0,0.15)"` | – | 字体颜色(支持 rgba 设置透明度)。 |
-| `fontWeight` | `'normal' \| 'medium' \| 'bold'` | `"normal"` | – | 字体粗细。 |
-| `gapX` | `number` | `80` | – | 水印块之间的水平间距(px)。 |
-| `gapY` | `number` | `80` | – | 水印块之间的垂直间距(px)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add watermark` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **不可作为安全防护**:Watermark 是**前端视觉效果**,F12 可删 — 真正合规需要**服务端**水印(后端给图片打水印 / 给 PDF 嵌不可见数字签名)
-- **`content` 短文本**(用户名 + 工号 / 公司名):太长会被截断,可改用多行字符串数组
-- **`fontColor` 必须带 alpha**(默认 `rgba(0,0,0,0.15)`):不透明水印会遮挡内容
-- **`image`** 优先级高于 content;**透明 PNG / SVG** 否则会出现矩形背景
-- **`rotate=-22`** 是 antd 默认角度 — 防止水平 / 垂直地平等被截图工具一键去除
-- **不要嵌套 Watermark** — 双重水印视觉混乱
-
-## Examples
-
-```tsx
-import { Watermark } from '@/components/ui/watermark';
-
-// 单行文本
-<Watermark content="Acme Corp · CONFIDENTIAL">
-  <article className="prose">...内部文档内容...</article>
-</Watermark>
-
-// 多行(用户名 + 工号)
-<Watermark content={['Alice Wong', 'EMP-2026-001']}>
-  <DashboardPage />
-</Watermark>
-
-// 图片水印
-<Watermark image="/brand-mark.svg" width={80} height={40}>
-  ...
-</Watermark>
-
-// 调整密度与角度
-<Watermark
-  content="内部资料"
-  gapX={120}
-  gapY={120}
-  rotate={-30}
-  fontColor="rgba(255,0,0,0.2)"
->
-  ...
-</Watermark>
-```

package/src/components/watermark/watermark.stories.tsx

@@ -1,170 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Watermark } from './watermark';
-
-const meta: Meta<typeof Watermark> = {
-  title: '反馈 · Feedback/Watermark',
-  component: Watermark,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '水印 —— 在容器内重复平铺 SVG 文字 / 图片水印,用于内部敏感页面、文档预览、设计稿评审、demo 录屏等"威慑泄露"场景。antd 独有补足,等价 antd `Watermark`(v5.1+):`content`(单行 / 多行字符串)、`image`(优先级高于 content)、`width` / `height` 单块尺寸、`gapX` / `gapY` 平铺间距、`rotate` 旋转角度(默认 -22°)、`fontSize` / `fontColor` / `fontWeight` 文字样式。**前端视觉效果 ≠ 安全防护**,真正合规需要服务端水印 + 数字签名。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    content: { control: 'text' },
-    rotate: { control: { type: 'number', min: -90, max: 90 } },
-    fontSize: { control: { type: 'number', min: 8, max: 48 } },
-    fontWeight: { control: 'inline-radio', options: ['normal', 'medium', 'bold'] },
-    gapX: { control: 'number' },
-    gapY: { control: 'number' },
-  },
-  args: {
-    content: 'Acme Corp · CONFIDENTIAL',
-    rotate: -22,
-    fontSize: 14,
-    fontWeight: 'normal',
-    gapX: 80,
-    gapY: 80,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Watermark>;
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '基础文字水印 —— 单行 `content` + 默认 `-22°` 旋转,常用于"公司名 · 机密"等场景。',
-      },
-    },
-  },
-  render: (args) => (
-    <Watermark {...args} className="h-72 w-full rounded-md border border-border bg-card p-6">
-      <h3 className="mb-3 text-lg font-semibold">内部文档</h3>
-      <p className="text-sm text-muted-foreground">
-        这是一段示例文档内容。水印铺在底层,内容可正常交互。
-        本组件适合内部管理后台、敏感页面、设计稿评审等场景。
-      </p>
-    </Watermark>
-  ),
-};
-
-export const MultilineUser: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '多行水印 —— `content` 传字符串数组渲染成两行(用户名 + 工号),起到"截图即追溯"的威慑作用。',
-      },
-    },
-  },
-  render: () => (
-    <Watermark
-      content={['Alice Wong', 'EMP-2026-001']}
-      className="h-72 w-full rounded-md border border-border bg-card p-6"
-    >
-      <h3 className="mb-3 text-lg font-semibold">用户信息水印</h3>
-      <p className="text-sm text-muted-foreground">
-        多行水印通常用于"用户名 + 工号",起到威慑截图泄密的作用。
-      </p>
-    </Watermark>
-  ),
-};
-
-export const ImageWatermark: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '图片水印 —— `image` 传 data URL 或 URL,优先级高于 `content`。建议透明 PNG / SVG,否则会出现矩形背景。',
-      },
-    },
-  },
-  render: () => {
-    // 一个简单的内联 SVG 标识,用作水印图片。
-    const svg = encodeURIComponent(
-      '<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40" viewBox="0 0 80 40">' +
-        '<rect x="2" y="2" width="76" height="36" rx="6" fill="none" stroke="rgba(0,0,0,0.25)" stroke-width="1.5"/>' +
-        '<text x="40" y="26" text-anchor="middle" font-family="system-ui" font-size="14" font-weight="600" fill="rgba(0,0,0,0.25)">EVO</text>' +
-        '</svg>',
-    );
-    const dataUrl = `data:image/svg+xml;utf8,${svg}`;
-    return (
-      <Watermark
-        image={dataUrl}
-        width={80}
-        height={40}
-        gapX={60}
-        gapY={60}
-        className="h-72 w-full rounded-md border border-border bg-card p-6"
-      >
-        <h3 className="mb-3 text-lg font-semibold">品牌图标水印</h3>
-        <p className="text-sm text-muted-foreground">
-          适合在内部站点 / 产品截图标注品牌或工作组标识。
-        </p>
-      </Watermark>
-    );
-  },
-};
-
-export const ColoredAndDense: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '自定义样式 —— 通过 `fontColor`(带 alpha)、`fontWeight`、`gapX/Y`、`rotate` 调整视觉强度,适配不同重要级别的页面。',
-      },
-    },
-  },
-  render: () => (
-    <Watermark
-      content="内部资料"
-      fontColor="rgba(220,38,38,0.18)"
-      fontWeight="bold"
-      gapX={60}
-      gapY={60}
-      rotate={-30}
-      className="h-72 w-full rounded-md border border-border bg-card p-6"
-    >
-      <h3 className="mb-3 text-lg font-semibold">红色密集水印</h3>
-      <p className="text-sm text-muted-foreground">
-        配合 fontWeight / gap / rotate 调整视觉强度。
-      </p>
-    </Watermark>
-  ),
-};
-
-export const SparseLayout: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '稀疏布局 —— 增大 `gapX` / `gapY` 让水印块之间留更多空白,适合阅读类页面。',
-      },
-    },
-  },
-  render: () => (
-    <Watermark
-      content="DRAFT"
-      gapX={160}
-      gapY={140}
-      fontSize={18}
-      className="h-72 w-full rounded-md border border-border bg-card p-6"
-    >
-      <h3 className="mb-3 text-lg font-semibold">长文档预览</h3>
-      <p className="text-sm leading-7 text-muted-foreground">
-        这是一份还未定稿的文档。稀疏的 DRAFT 水印不会过度干扰阅读,
-        但能在截图中清晰地传达"非正式版本"的状态。
-      </p>
-    </Watermark>
-  ),
-};