@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/watermark/watermark.tsx

@@ -1,166 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-
-export interface WatermarkProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
-  /**
-   * 水印文字(antd `content` 并集) — 单行字符串或多行字符串数组。
-   */
-  content?: string | string[];
-  /**
-   * 水印图片(antd `image` 并集) — 优先级高于 `content`。建议透明 PNG / SVG。
-   */
-  image?: string;
-  /**
-   * 单块水印宽度(px)。
-   * @default 120
-   */
-  width?: number;
-  /**
-   * 单块水印高度(px)。
-   * @default 64
-   */
-  height?: number;
-  /**
-   * 水印旋转角度(deg)。
-   * @default -22
-   */
-  rotate?: number;
-  /**
-   * 字体大小(px)。
-   * @default 14
-   */
-  fontSize?: number;
-  /**
-   * 字体颜色(支持 rgba 设置透明度)。
-   * @default "rgba(0,0,0,0.15)"
-   */
-  fontColor?: string;
-  /**
-   * 字体粗细。
-   * @default "normal"
-   */
-  fontWeight?: 'normal' | 'medium' | 'bold';
-  /**
-   * 水印块之间的水平间距(px)。
-   * @default 80
-   */
-  gapX?: number;
-  /**
-   * 水印块之间的垂直间距(px)。
-   * @default 80
-   */
-  gapY?: number;
-}
-
-function buildSvg(opts: {
-  content?: string | string[];
-  image?: string;
-  width: number;
-  height: number;
-  rotate: number;
-  fontSize: number;
-  fontColor: string;
-  fontWeight: 'normal' | 'medium' | 'bold';
-  gapX: number;
-  gapY: number;
-}): string {
-  const w = opts.width + opts.gapX;
-  const h = opts.height + opts.gapY;
-  const cx = w / 2;
-  const cy = h / 2;
-  const fontWeightValue =
-    opts.fontWeight === 'bold' ? 700 : opts.fontWeight === 'medium' ? 500 : 400;
-
-  let body = '';
-  if (opts.image) {
-    body = `<image href="${opts.image}" x="${cx - opts.width / 2}" y="${cy - opts.height / 2}" width="${opts.width}" height="${opts.height}" transform="rotate(${opts.rotate} ${cx} ${cy})" />`;
-  } else if (opts.content) {
-    const lines = Array.isArray(opts.content) ? opts.content : [opts.content];
-    const lineHeight = opts.fontSize * 1.4;
-    const totalH = lineHeight * (lines.length - 1);
-    body = `<g transform="rotate(${opts.rotate} ${cx} ${cy})" fill="${opts.fontColor}" font-size="${opts.fontSize}" font-weight="${fontWeightValue}" font-family="system-ui, sans-serif" text-anchor="middle">${lines
-      .map(
-        (line, i) =>
-          `<text x="${cx}" y="${cy - totalH / 2 + i * lineHeight}">${line
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')}</text>`,
-      )
-      .join('')}</g>`;
-  }
-
-  return `data:image/svg+xml;utf8,${encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">${body}</svg>`,
-  )}`;
-}
-
-/**
- * 水印 — antd 独有补足。**等价 antd `Watermark`**(v5.1+)。在容器内部生成
- * 重复平铺的 SVG 水印(文字 / 图片),用于敏感页面 / 内部文档 / 演示场景。
- *
- * **安全声明**:Watermark 是**前端视觉效果**,可被开发者删除或绕过 — **不能**作为防截图 / 防盗用的真正保护,
- * 真正合规需要服务端水印 + 数字签名等手段。
- */
-const Watermark = React.forwardRef<HTMLDivElement, WatermarkProps>(
-  (
-    {
-      content,
-      image,
-      width = 120,
-      height = 64,
-      rotate = -22,
-      fontSize = 14,
-      // eslint-disable-next-line teamix-evo/no-color-literal -- Watermark renders to canvas; CSS var() not supported in canvas API. Default value matches --overlay-watermark token.
-      fontColor = 'rgba(0,0,0,0.15)',
-      fontWeight = 'normal',
-      gapX = 80,
-      gapY = 80,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const dataUrl = React.useMemo(
-      () =>
-        buildSvg({
-          content,
-          image,
-          width,
-          height,
-          rotate,
-          fontSize,
-          fontColor,
-          fontWeight,
-          gapX,
-          gapY,
-        }),
-      [content, image, width, height, rotate, fontSize, fontColor, fontWeight, gapX, gapY],
-    );
-
-    return (
-      <div
-        ref={ref}
-        className={cn('relative isolate', className)}
-        {...props}
-      >
-        {children}
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-0 select-none"
-          style={{
-            backgroundImage: `url("${dataUrl}")`,
-            backgroundRepeat: 'repeat',
-            ...style,
-          }}
-        />
-      </div>
-    );
-  },
-);
-Watermark.displayName = 'Watermark';
-
-export { Watermark };

package/src/hooks/use-breakpoint.ts

@@ -1,117 +0,0 @@
-import * as React from 'react';
-
-/**
- * 响应式断点 5 档 — 对齐《Teamix UI 表单设计规范》§4.1。
- * CSS 真值见 `@teamix-evo/tokens` 的 `--bp-*` 变量(theme.css)。
- */
-export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
-
-export const BREAKPOINTS: Record<Breakpoint, number> = {
-  xs: 432,
-  s: 672,
-  m: 944,
-  l: 1200,
-  xl: 1600,
-};
-
-const ORDER: Breakpoint[] = ['xl', 'l', 'm', 's', 'xs'];
-
-function resolveCurrent(width: number): Breakpoint | null {
-  for (const bp of ORDER) {
-    if (width >= BREAKPOINTS[bp]) return bp;
-  }
-  return null;
-}
-
-/**
- * 检测当前视口落在哪一档断点上。
- *
- * 返回 ≤ viewport 的最大档位(`viewport ≥ 1600` → `xl`;`viewport < 432` → `null`)。
- *
- * 服务端渲染场景下首次返回 `null`,客户端 hydrate 后基于 `matchMedia` 实时同步。
- *
- * @example
- * ```tsx
- * const bp = useBreakpoint();
- * const orientation = bp === null ? 'vertical' : 'horizontal';
- * ```
- */
-export function useBreakpoint(): Breakpoint | null {
-  const [current, setCurrent] = React.useState<Breakpoint | null>(null);
-
-  React.useEffect(() => {
-    const update = () => setCurrent(resolveCurrent(window.innerWidth));
-    update();
-
-    const queries = ORDER.map((bp) => {
-      const mql = window.matchMedia(`(min-width: ${BREAKPOINTS[bp]}px)`);
-      mql.addEventListener('change', update);
-      return mql;
-    });
-
-    return () => {
-      for (const mql of queries) mql.removeEventListener('change', update);
-    };
-  }, []);
-
-  return current;
-}
-
-/**
- * 响应式值 — 标量或断点映射对象。`base` 槽是兜底(没有任何断点匹配时使用)。
- *
- * @example
- * ```ts
- * const orientation: ResponsiveValue<'vertical' | 'horizontal'> = {
- *   base: 'vertical',  // < 432
- *   xs: 'horizontal',  // ≥ 432
- * };
- * ```
- */
-export type ResponsiveValue<T> =
-  | T
-  | (Partial<Record<Breakpoint, T>> & { base?: T });
-
-function isResponsiveObject<T>(
-  value: ResponsiveValue<T>,
-): value is Partial<Record<Breakpoint, T>> & { base?: T } {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    !Array.isArray(value) &&
-    !React.isValidElement(value as React.ReactNode)
-  );
-}
-
-/**
- * 从响应式值中挑选适合当前断点的真值。
- *
- * 解析规则(级联回退):
- *   `current` → 下移到 ≤ current 的最大档位 → ... → `base` → `undefined`
- *
- * 例:`current='m'`,值为 `{ base: 1, xs: 2, m: 3 }`,返回 `3`;
- *     `current='s'`,值同上,返回 `2`(xs 是 s 之下的最大档位);
- *     `current=null`,值同上,返回 `1`(base 兜底)。
- *
- * 传入标量时原样返回,不做断点匹配。
- */
-export function pickByBreakpoint<T>(
-  value: ResponsiveValue<T> | undefined,
-  current: Breakpoint | null,
-): T | undefined {
-  if (value === undefined) return undefined;
-  if (!isResponsiveObject(value)) return value as T;
-
-  const map = value as Partial<Record<Breakpoint, T>> & { base?: T };
-
-  if (current === null) return map.base;
-
-  // 从 current 档位往下回退,找到第一个定义过的值
-  const startIdx = ORDER.indexOf(current);
-  for (let i = startIdx; i < ORDER.length; i++) {
-    const bp = ORDER[i]!;
-    const v = map[bp];
-    if (v !== undefined) return v;
-  }
-  return map.base;
-}

package/src/hooks/use-debounce-callback.ts

@@ -1,52 +0,0 @@
-import * as React from 'react';
-
-/**
- * 防抖回调 hook — 返回一个防抖包装后的函数,在指定 `delay` 毫秒内
- * 连续调用只会执行最后一次。适用于搜索输入、筛选变更等高频场景。
- *
- * @param callback - 需要防抖的回调函数
- * @param delay - 防抖延迟(ms)
- * @default delay 300
- *
- * @example
- * ```tsx
- * const debouncedSearch = useDebounceCallback((value: string) => {
- *   fetchResults(value);
- * }, 300);
- * ```
- */
-export function useDebounceCallback<T extends (...args: any[]) => any>(
-  callback: T,
-  delay: number = 300,
-): (...args: Parameters<T>) => void {
-  const callbackRef = React.useRef(callback);
-  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // 始终持有最新 callback 引用,避免闭包陈旧
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-
-  // 组件卸载时清除 timer
-  React.useEffect(() => {
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-
-  const debouncedFn = React.useCallback(
-    (...args: Parameters<T>) => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-      timerRef.current = setTimeout(() => {
-        callbackRef.current(...args);
-      }, delay);
-    },
-    [delay],
-  );
-
-  return debouncedFn;
-}