@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/pagination/pagination.tsx

@@ -6,16 +6,37 @@ import {
   ChevronsRight,
   MoreHorizontal,
 } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/utils/cn';
 import { Button, type ButtonProps } from '@/components/button/button';
 
+// ─── 尺寸映射 — 对齐 Button/Input 的 h-7 / h-8 / h-9 三档 ──────────────────────
+
+export type PaginationSize = 'sm' | 'md' | 'lg';
+export type PaginationType = 'normal' | 'simple' | 'mini';
+
+const sizeClass: Record<PaginationSize, string> = {
+  sm: 'text-xs',
+  md: 'text-xs',
+  lg: 'text-sm',
+};
+
+const minWClass: Record<PaginationSize, string> = {
+  sm: 'min-w-7',
+  md: 'min-w-8',
+  lg: 'min-w-9',
+};
+
+const inputHeightClass: Record<PaginationSize, string> = {
+  sm: 'h-7 text-xs px-2',
+  md: 'h-8 text-xs px-2.5',
+  lg: 'h-9 text-sm px-3',
+};
+
 // ─── shadcn-style primitives ──────────────────────────────────────────────────
 
-const Pagination = ({
-  className,
-  ...props
-}: React.ComponentProps<'nav'>) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     role="navigation"
     aria-label="pagination"
@@ -46,92 +67,189 @@ const PaginationItem = React.forwardRef<
 PaginationItem.displayName = 'PaginationItem';
 
 interface PaginationLinkProps
-  extends Pick<ButtonProps, 'size'>,
-    React.ComponentProps<'button'> {
+  extends Omit<ButtonProps, 'size' | 'variant' | 'shape'> {
+  /** 当前激活状态(高亮选中页)。 */
   isActive?: boolean;
+  /**
+   * 尺寸,对齐 Button/Input 三档。
+   * @default "md"
+   */
+  size?: PaginationSize;
 }
 
 const PaginationLink = ({
   className,
   isActive,
-  size = 'icon',
+  size = 'md',
   ...props
 }: PaginationLinkProps) => (
   <Button
     aria-current={isActive ? 'page' : undefined}
     variant={isActive ? 'outline' : 'ghost'}
     size={size}
-    className={cn(className)}
+    className={cn(
+      // 让数字键看起来近似方块,最小宽度 = 高度
+      minWClass[size],
+      // 数字键以 padding 收紧(等宽数字)
+      'tabular-nums',
+      isActive && 'border-primary text-primary',
+      className,
+    )}
     {...props}
   />
 );
 PaginationLink.displayName = 'PaginationLink';
 
+interface PaginationNavProps extends Omit<PaginationLinkProps, 'isActive'> {
+  /**
+   * 仅显示图标(不显示「上一页 / 下一页」文字),用于 mini 与图标条形态。
+   * @default false
+   */
+  iconOnly?: boolean;
+}
+
 const PaginationPrevious = ({
   className,
+  size = 'md',
+  iconOnly = false,
+  children,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: PaginationNavProps) => (
   <PaginationLink
     aria-label="Go to previous page"
-    size="default"
-    className={cn('gap-1 pl-2.5', className)}
+    size={size}
+    className={cn(iconOnly ? 'aspect-square px-0' : 'gap-1 px-2.5', className)}
     {...props}
   >
     <ChevronLeft className="size-4" />
-    <span>上一页</span>
+    {!iconOnly && (children ?? <span>上一页</span>)}
   </PaginationLink>
 );
 PaginationPrevious.displayName = 'PaginationPrevious';
 
 const PaginationNext = ({
   className,
+  size = 'md',
+  iconOnly = false,
+  children,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: PaginationNavProps) => (
   <PaginationLink
     aria-label="Go to next page"
-    size="default"
-    className={cn('gap-1 pr-2.5', className)}
+    size={size}
+    className={cn(iconOnly ? 'aspect-square px-0' : 'gap-1 px-2.5', className)}
     {...props}
   >
-    <span>下一页</span>
+    {!iconOnly && (children ?? <span>下一页</span>)}
     <ChevronRight className="size-4" />
   </PaginationLink>
 );
 PaginationNext.displayName = 'PaginationNext';
 
+const ellipsisVariants = cva(
+  'flex items-center justify-center text-muted-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'h-7 w-7 [&_svg]:size-3.5',
+        md: 'h-8 w-8 [&_svg]:size-4',
+        lg: 'h-9 w-9 [&_svg]:size-4',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+interface PaginationEllipsisProps
+  extends React.ComponentProps<'span'>,
+    VariantProps<typeof ellipsisVariants> {}
+
 const PaginationEllipsis = ({
   className,
+  size,
   ...props
-}: React.ComponentProps<'span'>) => (
+}: PaginationEllipsisProps) => (
   <span
     aria-hidden="true"
-    className={cn('flex size-9 items-center justify-center', className)}
+    className={cn(ellipsisVariants({ size }), className)}
     {...props}
   >
-    <MoreHorizontal className="size-4" />
+    <MoreHorizontal />
     <span className="sr-only">More pages</span>
   </span>
 );
 PaginationEllipsis.displayName = 'PaginationEllipsis';
 
-// ─── Higher-level wrapper(antd 风格 props 化分页器)───────────────────────
+// ─── 高阶 SimplePagination — antd 风格 props 化 ───────────────────────────────
 
 export interface SimplePaginationProps {
-  /** 当前页(1-based)。 */
+  /**
+   * 当前页(1-based,受控)。与 `defaultCurrent` 互斥。
+   */
   current?: number;
-  /** 受控变化回调。 */
-  onChange?: (page: number) => void;
+  /**
+   * 默认当前页(非受控)。
+   * @default 1
+   */
+  defaultCurrent?: number;
+  /**
+   * 页码 / pageSize 变化回调。第二参为变化后的 pageSize。
+   */
+  onChange?: (page: number, pageSize: number) => void;
   /** 总条数。 */
   total: number;
-  /** 每页大小。 @default 10 */
+  /**
+   * 每页大小(受控)。与 `defaultPageSize` 互斥。
+   */
   pageSize?: number;
-  /** 是否显示首末页快捷按钮。 @default false */
+  /**
+   * 默认每页大小(非受控)。
+   * @default 10
+   */
+  defaultPageSize?: number;
+  /**
+   * 每页大小可选项(用于 `pageSizeSelector`)。
+   * @default [10, 20, 50, 100]
+   */
+  pageSizeList?: number[];
+  /**
+   * 显示每页大小选择器(对齐 antd `showSizeChanger` / cloud-design `pageSizeSelector`)。
+   * @default false
+   */
+  pageSizeSelector?: boolean;
+  /** pageSize 变化回调。 */
+  onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * 组件大小,对齐 Button / Input 的 sm(h-7) / md(h-8) / lg(h-9) 三档。
+   * @default "md"
+   */
+  size?: PaginationSize;
+  /**
+   * 组件类型 — `normal` 完整 / `simple` 简化(prev + 页码/总页 + next) / `mini` 极简(仅前后箭头)。
+   * @default "normal"
+   */
+  type?: PaginationType;
+  /**
+   * `normal` 类型下,显示首末页快捷按钮。
+   * @default false
+   */
   showFirstLast?: boolean;
-  /** 是否显示总数文本(antd `showTotal` 并集,简化版)。 @default true */
+  /**
+   * 显示总数文本(`mini` 类型默认不显示)。
+   * @default true
+   */
   showTotal?: boolean;
-  /** 自定义总数渲染。返回字符串或 ReactNode。 */
+  /** 自定义总数渲染。 */
   totalRender?: (total: number, range: [number, number]) => React.ReactNode;
-  /** 显示页号窗口大小(中间显示几个页号)。 @default 5 */
+  /**
+   * `normal` 类型下,显示跳转输入框。
+   * @default false
+   */
+  showJump?: boolean;
+  /**
+   * 中间显示几个页号。建议奇数。
+   * @default 5
+   */
   siblingCount?: number;
   /** 容器 className。 */
   className?: string;
@@ -139,25 +257,61 @@ export interface SimplePaginationProps {
 
 /**
  * 高阶 Pagination — antd 风格 `total / pageSize / current / onChange` props 化用法,
- * 自动计算页码窗口 + 折叠 ellipsis。
+ * 自动计算页码窗口 + 折叠 ellipsis,并支持 `size` / `type` / `pageSizeSelector` 三档语义化扩展。
  *
  * 内部组合 `Pagination / PaginationContent / PaginationItem / PaginationLink /
  * PaginationPrevious / PaginationNext / PaginationEllipsis` 这套 shadcn primitives,
  * 业务方需要更细粒度时直接使用 primitives 自行拼装。
  */
 const SimplePagination = ({
-  current = 1,
+  current,
+  defaultCurrent = 1,
   onChange,
   total,
-  pageSize = 10,
+  pageSize,
+  defaultPageSize = 10,
+  pageSizeList = [10, 20, 50, 100],
+  pageSizeSelector = false,
+  onPageSizeChange,
+  size = 'md',
+  type = 'normal',
   showFirstLast = false,
   showTotal = true,
   totalRender,
+  showJump = false,
   siblingCount = 5,
   className,
 }: SimplePaginationProps) => {
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const page = Math.min(Math.max(1, current), totalPages);
+  const [innerCurrent, setInnerCurrent] = React.useState(defaultCurrent);
+  const [innerPageSize, setInnerPageSize] = React.useState(defaultPageSize);
+
+  const finalCurrent = current ?? innerCurrent;
+  const finalPageSize = pageSize ?? innerPageSize;
+  const totalPages = Math.max(1, Math.ceil(total / finalPageSize));
+  const page = Math.min(Math.max(1, finalCurrent), totalPages);
+
+  const goto = (n: number) => {
+    if (n < 1 || n > totalPages || n === page) return;
+    if (current === undefined) setInnerCurrent(n);
+    onChange?.(n, finalPageSize);
+  };
+
+  const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const v = Number(e.target.value);
+    if (Number.isNaN(v)) return;
+    if (pageSize === undefined) setInnerPageSize(v);
+    if (current === undefined) setInnerCurrent(1);
+    onPageSizeChange?.(v);
+    onChange?.(1, v);
+  };
+
+  const [jumperVal, setJumperVal] = React.useState('');
+  const handleJumpKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const v = Number(jumperVal);
+    if (Number.isFinite(v)) goto(v);
+    setJumperVal('');
+  };
 
   const pages = React.useMemo(() => {
     const half = Math.floor(siblingCount / 2);
@@ -171,39 +325,106 @@ const SimplePagination = ({
     return arr;
   }, [page, siblingCount, totalPages]);
 
-  const goto = (n: number) => {
-    if (n < 1 || n > totalPages || n === page) return;
-    onChange?.(n);
-  };
+  const rangeStart = total === 0 ? 0 : (page - 1) * finalPageSize + 1;
+  const rangeEnd = Math.min(page * finalPageSize, total);
 
-  const rangeStart = total === 0 ? 0 : (page - 1) * pageSize + 1;
-  const rangeEnd = Math.min(page * pageSize, total);
+  const showLeftEllipsis = (pages[0] ?? 1) > 2;
+  const showRightEllipsis =
+    (pages[pages.length - 1] ?? totalPages) < totalPages - 1;
 
-  const showLeftEllipsis = pages[0]! > 2;
-  const showRightEllipsis = pages[pages.length - 1]! < totalPages - 1;
+  // ─── 总数文本(mini 类型默认隐藏)─────────────────────────────────────────
+  const totalNode =
+    showTotal && type !== 'mini' ? (
+      <p className={cn('text-muted-foreground tabular-nums', sizeClass[size])}>
+        {totalRender
+          ? totalRender(total, [rangeStart, rangeEnd])
+          : `共 ${total} 条 · 第 ${rangeStart}-${rangeEnd} 条`}
+      </p>
+    ) : (
+      <span />
+    );
 
-  return (
-    <div
-      className={cn(
-        'flex w-full flex-wrap items-center justify-between gap-3',
-        className,
-      )}
-    >
-      {showTotal ? (
-        <p className="text-sm text-muted-foreground tabular-nums">
-          {totalRender
-            ? totalRender(total, [rangeStart, rangeEnd])
-            : `共 ${total} 条 · 第 ${rangeStart}-${rangeEnd} 条`}
-        </p>
-      ) : (
-        <span />
-      )}
+  // ─── 主体内容 ────────────────────────────────────────────────────────────
+  let body: React.ReactNode;
+
+  if (type === 'mini') {
+    body = (
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              size={size}
+              iconOnly
+              disabled={page === 1}
+              onClick={() => goto(page - 1)}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <span
+              className={cn(
+                'px-2 tabular-nums text-muted-foreground',
+                sizeClass[size],
+              )}
+            >
+              {page} / {totalPages}
+            </span>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              size={size}
+              iconOnly
+              disabled={page === totalPages}
+              onClick={() => goto(page + 1)}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  } else if (type === 'simple') {
+    body = (
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              size={size}
+              iconOnly
+              disabled={page === 1}
+              onClick={() => goto(page - 1)}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <span
+              className={cn(
+                'flex items-center gap-1 px-2 tabular-nums',
+                sizeClass[size],
+              )}
+            >
+              <strong className="text-foreground">{page}</strong>
+              <span className="text-muted-foreground">/</span>
+              <span className="text-muted-foreground">{totalPages}</span>
+            </span>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              size={size}
+              iconOnly
+              disabled={page === totalPages}
+              onClick={() => goto(page + 1)}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  } else {
+    body = (
       <Pagination className="mx-0 w-auto">
         <PaginationContent>
           {showFirstLast ? (
             <PaginationItem>
               <PaginationLink
                 aria-label="First"
+                size={size}
+                className="aspect-square px-0"
                 disabled={page === 1}
                 onClick={() => goto(1)}
               >
@@ -213,23 +434,28 @@ const SimplePagination = ({
           ) : null}
           <PaginationItem>
             <PaginationPrevious
+              size={size}
+              iconOnly
               disabled={page === 1}
               onClick={() => goto(page - 1)}
             />
           </PaginationItem>
-          {pages[0]! > 1 ? (
+          {(pages[0] ?? 1) > 1 ? (
             <PaginationItem>
-              <PaginationLink onClick={() => goto(1)}>1</PaginationLink>
+              <PaginationLink size={size} onClick={() => goto(1)}>
+                1
+              </PaginationLink>
             </PaginationItem>
           ) : null}
           {showLeftEllipsis ? (
             <PaginationItem>
-              <PaginationEllipsis />
+              <PaginationEllipsis size={size} />
             </PaginationItem>
           ) : null}
           {pages.map((p) => (
             <PaginationItem key={p}>
               <PaginationLink
+                size={size}
                 isActive={p === page}
                 onClick={() => goto(p)}
               >
@@ -239,18 +465,20 @@ const SimplePagination = ({
           ))}
           {showRightEllipsis ? (
             <PaginationItem>
-              <PaginationEllipsis />
+              <PaginationEllipsis size={size} />
             </PaginationItem>
           ) : null}
-          {pages[pages.length - 1]! < totalPages ? (
+          {(pages[pages.length - 1] ?? totalPages) < totalPages ? (
             <PaginationItem>
-              <PaginationLink onClick={() => goto(totalPages)}>
+              <PaginationLink size={size} onClick={() => goto(totalPages)}>
                 {totalPages}
               </PaginationLink>
             </PaginationItem>
           ) : null}
           <PaginationItem>
             <PaginationNext
+              size={size}
+              iconOnly
               disabled={page === totalPages}
               onClick={() => goto(page + 1)}
             />
@@ -259,6 +487,8 @@ const SimplePagination = ({
             <PaginationItem>
               <PaginationLink
                 aria-label="Last"
+                size={size}
+                className="aspect-square px-0"
                 disabled={page === totalPages}
                 onClick={() => goto(totalPages)}
               >
@@ -268,6 +498,68 @@ const SimplePagination = ({
           ) : null}
         </PaginationContent>
       </Pagination>
+    );
+  }
+
+  // ─── 附加 — pageSize 选择器 / 跳转(仅 normal)─────────────────────────────
+  const showAddons = type === 'normal' && (pageSizeSelector || showJump);
+
+  const addons = showAddons ? (
+    <div className={cn('flex items-center gap-2', sizeClass[size])}>
+      {pageSizeSelector ? (
+        <select
+          aria-label="每页显示"
+          value={finalPageSize}
+          onChange={handlePageSizeChange}
+          className={cn(
+            'cursor-pointer rounded-lg border border-input bg-background shadow-sm',
+            'transition-colors hover:border-ring focus:outline-none focus:ring-1 focus:ring-ring',
+            'tabular-nums text-foreground',
+            inputHeightClass[size],
+          )}
+        >
+          {pageSizeList.map((opt) => (
+            <option key={opt} value={opt}>
+              {opt} 条/页
+            </option>
+          ))}
+        </select>
+      ) : null}
+      {showJump ? (
+        <span className="inline-flex items-center gap-1 text-muted-foreground">
+          前往
+          <input
+            type="text"
+            inputMode="numeric"
+            value={jumperVal}
+            onChange={(e) => setJumperVal(e.target.value)}
+            onKeyDown={handleJumpKey}
+            className={cn(
+              'w-12 rounded-lg border border-input bg-background text-center shadow-sm',
+              'transition-colors placeholder:text-muted-foreground',
+              'focus:outline-none focus:ring-1 focus:ring-ring',
+              'tabular-nums text-foreground',
+              inputHeightClass[size],
+            )}
+          />
+          页
+        </span>
+      ) : null}
+    </div>
+  ) : null;
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-wrap items-center justify-between gap-3',
+        className,
+      )}
+    >
+      {totalNode}
+      <div className="flex flex-wrap items-center gap-3">
+        {body}
+        {addons}
+      </div>
     </div>
   );
 };

package/src/components/popconfirm/popconfirm.meta.md

@@ -4,10 +4,11 @@ name: Popconfirm
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 气泡确认
 ---
 
-# Popconfirm
+# Popconfirm 气泡确认
 
 轻量级确认弹层 — antd 独有补足。**等价 antd `Popconfirm`**。用于"小风险"操作的二次确认(删除一行、忽略某条通知),视觉比 `AlertDialog` 更轻、不阻塞页面;`onConfirm` 支持返回 Promise(等待时按钮自动 loading)。
 
@@ -23,6 +24,8 @@ package: "@teamix-evo/ui"
 - 无后果的纯展示 → `Tooltip` / `Popover`
 - 长决策路径(需要填写理由)→ `Dialog` / `Drawer`
 
+## Props
+
 <!-- auto:props:begin -->
 | 名称 | 类型 | 默认值 | 必填 | 说明 |
 | --- | --- | --- | --- | --- |
@@ -40,6 +43,8 @@ package: "@teamix-evo/ui"
 | `disabled` | `boolean` | – | – | 禁用(子节点点击不弹出)。 |
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -48,8 +53,8 @@ package: "@teamix-evo/ui"
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
-| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集 |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
 
 ### npm 依赖
 

package/src/components/popconfirm/popconfirm.stories.tsx

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { RefreshCcw } from 'lucide-react';
 import { Popconfirm } from './popconfirm';
 import { Button } from '@/components/button/button';
 
 const meta: Meta<typeof Popconfirm> = {
-  title: '反馈与浮层 · Feedback/Popconfirm',
+  title: '反馈 · Feedback/Popconfirm',
   component: Popconfirm,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '轻量级确认弹层 — 小风险操作的二次确认(删除一行 / 忽略一条通知)。视觉比 AlertDialog 更轻、不阻塞页面;onConfirm 支持 Promise(等待时按钮自动 loading)。等价 antd `Popconfirm`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '轻量级确认弹层 — 小风险操作的二次确认（删除一行 / 忽略一条通知）。视觉比 AlertDialog 更轻、不阻塞页面；onConfirm 支持 Promise（等待时按钮自动 loading）。等价 antd `Popconfirm`。',
       },
     },
   },
@@ -57,7 +57,6 @@ export const CustomIcon: Story = {
       title="重置所有筛选条件?"
       icon={<RefreshCcw className="size-4 text-primary" />}
       onConfirm={() => {
-        // eslint-disable-next-line no-alert
         alert('已重置');
       }}
     >

package/src/components/popconfirm/popconfirm.tsx

@@ -94,11 +94,11 @@ const Popconfirm: React.FC<PopconfirmProps> = ({
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent className="w-72 p-3" align="start">
         <div className="flex items-start gap-2">
-          <span className="mt-0.5 text-amber-500">
+          <span className="mt-0.5 text-warning">
             {icon ?? <AlertCircle className="size-4" />}
           </span>
           <div className="min-w-0 flex-1">
-            <div className="text-sm font-medium">{title}</div>
+            <div className="text-xs font-medium">{title}</div>
             {description ? (
               <div className={cn('mt-1 text-xs text-muted-foreground')}>
                 {description}