@ug666/ui-react 0.1.0 → 0.2.0

package/dist/patterns/index.js

@@ -0,0 +1,320 @@
+"use client";
+import {
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  Sidebar
+} from "../chunk-2IVRUJKO.js";
+import {
+  Button,
+  cn
+} from "../chunk-RUDEZA5Q.js";
+
+// src/patterns/admin-shell.tsx
+import { forwardRef, useState } from "react";
+import { Menu } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AdminShell = forwardRef(
+  ({
+    navItems,
+    sidebarHeader,
+    sidebarFooter,
+    sidebarVariant = "dark",
+    sidebarSearchable = false,
+    sidebarCollapsible = true,
+    sidebarCollapsed,
+    defaultSidebarCollapsed = false,
+    onSidebarCollapsedChange,
+    mobileSidebarOpen,
+    onMobileSidebarOpenChange,
+    topbarStart,
+    topbarEnd,
+    topbar,
+    mainClassName,
+    contentClassName,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [internalMobileOpen, setInternalMobileOpen] = useState(false);
+    const effectiveMobileOpen = mobileSidebarOpen ?? internalMobileOpen;
+    function setMobileOpen(open) {
+      if (mobileSidebarOpen === void 0) {
+        setInternalMobileOpen(open);
+      }
+      onMobileSidebarOpenChange?.(open);
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("min-h-screen bg-surface-0 text-text-primary", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            Sidebar,
+            {
+              items: navItems,
+              variant: sidebarVariant,
+              header: sidebarHeader,
+              footer: sidebarFooter,
+              searchable: sidebarSearchable,
+              collapsible: sidebarCollapsible,
+              collapsed: sidebarCollapsed,
+              defaultCollapsed: defaultSidebarCollapsed,
+              onCollapsedChange: onSidebarCollapsedChange,
+              responsive: true,
+              mobileOpen: effectiveMobileOpen,
+              onMobileOpenChange: setMobileOpen,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-30 flex min-h-14 items-center gap-3 border-b border-border-base bg-surface-0/95 px-4 backdrop-blur sm:px-6 lg:px-8", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "md:hidden",
+                  "aria-label": "\u6253\u5F00\u4FA7\u8FB9\u680F",
+                  onClick: () => setMobileOpen(true),
+                  children: /* @__PURE__ */ jsx(Menu, { size: 18 })
+                }
+              ),
+              topbar ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: topbar }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: topbarStart }),
+                topbarEnd ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: topbarEnd }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("main", { className: cn("min-w-0 flex-1 overflow-x-hidden", mainClassName), children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8", contentClassName), children }) })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+AdminShell.displayName = "AdminShell";
+
+// src/patterns/confirm-dialog.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { AlertTriangle, HelpCircle } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ConfirmDialog = forwardRef2(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    variant = "destructive",
+    icon,
+    cancelText = "\u53D6\u6D88",
+    confirmText = "\u786E\u8BA4",
+    loading = false,
+    disabled = false,
+    closeOnConfirm = true,
+    onCancel,
+    onConfirm,
+    className,
+    ...props
+  }, ref) => {
+    const Icon = icon ?? (variant === "destructive" ? AlertTriangle : HelpCircle);
+    function handleCancel() {
+      onCancel?.();
+      onOpenChange(false);
+    }
+    function handleConfirm() {
+      const result = onConfirm?.();
+      if (closeOnConfirm) onOpenChange(false);
+      return result;
+    }
+    return /* @__PURE__ */ jsx2(Modal, { open, onClose: handleCancel, children: /* @__PURE__ */ jsxs2(
+      ModalContent,
+      {
+        ref,
+        className: cn("max-w-md", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs2(ModalHeader, { className: "items-start gap-3", children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn(
+                  "flex h-10 w-10 shrink-0 items-center justify-center rounded-md",
+                  variant === "destructive" ? "bg-danger-soft text-danger-soft-fg" : "bg-primary-soft text-primary-soft-fg"
+                ),
+                children: /* @__PURE__ */ jsx2(Icon, { size: 20, "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsx2(ModalTitle, { className: "break-words text-base", children: title }),
+              description ? /* @__PURE__ */ jsx2("p", { className: "text-sm leading-6 text-text-secondary", children: description }) : null
+            ] })
+          ] }),
+          children ? /* @__PURE__ */ jsx2("div", { className: "px-6 py-4 text-sm text-text-secondary", children }) : null,
+          /* @__PURE__ */ jsxs2(ModalFooter, { className: "flex-col-reverse gap-2 sm:flex-row", children: [
+            /* @__PURE__ */ jsx2(Button, { type: "button", variant: "outline", disabled: loading, onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                type: "button",
+                variant: variant === "destructive" ? "destructive" : "default",
+                loading,
+                disabled,
+                onClick: handleConfirm,
+                children: confirmText
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+ConfirmDialog.displayName = "ConfirmDialog";
+
+// src/patterns/copy-field.tsx
+import { forwardRef as forwardRef3, useEffect, useRef, useState as useState2 } from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CopyField = forwardRef3(
+  ({
+    value,
+    label,
+    displayValue,
+    monospace = true,
+    disabled = false,
+    copyLabel = "\u590D\u5236",
+    copiedLabel = "\u5DF2\u590D\u5236",
+    onCopied,
+    onCopyError,
+    className,
+    ...props
+  }, ref) => {
+    const [copied, setCopied] = useState2(false);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+    async function handleCopy() {
+      if (disabled) return;
+      try {
+        if (!navigator.clipboard?.writeText) {
+          throw new Error("Clipboard API is not available");
+        }
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        onCopied?.(value);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setCopied(false), 1400);
+      } catch (error) {
+        onCopyError?.(error);
+      }
+    }
+    return /* @__PURE__ */ jsxs3("div", { ref, className: cn("space-y-2", className), ...props, children: [
+      label ? /* @__PURE__ */ jsx3("div", { className: "text-xs font-medium text-text-secondary", children: label }) : null,
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 items-stretch overflow-hidden rounded-md border border-border-base bg-surface-1",
+            disabled && "opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: cn(
+                  "min-w-0 flex-1 truncate px-3 py-2 text-sm text-text-primary",
+                  monospace && "font-mono"
+                ),
+                title: typeof displayValue === "string" ? displayValue : value,
+                children: displayValue ?? value
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 items-center border-l border-border-base bg-surface-2 px-1.5", children: /* @__PURE__ */ jsxs3(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled,
+                onClick: handleCopy,
+                "aria-live": "polite",
+                children: [
+                  copied ? /* @__PURE__ */ jsx3(Check, { size: 15 }) : /* @__PURE__ */ jsx3(Copy, { size: 15 }),
+                  copied ? copiedLabel : copyLabel
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+CopyField.displayName = "CopyField";
+
+// src/patterns/page-header.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PageHeader = forwardRef4(
+  ({
+    eyebrow,
+    title,
+    description,
+    badge,
+    breadcrumb,
+    actions,
+    meta,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs4(
+      "header",
+      {
+        ref,
+        className: cn(
+          "flex min-w-0 flex-col gap-5 border-b border-border-base pb-6",
+          className
+        ),
+        ...props,
+        children: [
+          breadcrumb ? /* @__PURE__ */ jsx4("div", { className: "min-w-0", children: breadcrumb }) : null,
+          /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "min-w-0 space-y-3", children: [
+              eyebrow ? /* @__PURE__ */ jsx4("div", { className: "text-xs font-semibold uppercase text-primary", children: eyebrow }) : null,
+              /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-wrap items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx4("h1", { className: "min-w-0 break-words text-2xl font-bold leading-tight text-text-primary sm:text-3xl", children: title }),
+                badge ? /* @__PURE__ */ jsx4("div", { className: "shrink-0", children: badge }) : null
+              ] }),
+              description ? /* @__PURE__ */ jsx4("p", { className: "max-w-3xl text-sm leading-6 text-text-secondary", children: description }) : null,
+              meta ? /* @__PURE__ */ jsx4("div", { className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2 text-xs text-text-tertiary", children: meta }) : null
+            ] }),
+            actions ? /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 flex-wrap items-center gap-2 lg:justify-end", children: actions }) : null
+          ] }),
+          children ? /* @__PURE__ */ jsx4("div", { className: "min-w-0", children }) : null
+        ]
+      }
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
+export {
+  AdminShell,
+  ConfirmDialog,
+  CopyField,
+  PageHeader,
+  AdminShell as UGAdminShell,
+  ConfirmDialog as UGConfirmDialog,
+  CopyField as UGCopyField,
+  PageHeader as UGPageHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/patterns/admin-shell.tsx","../../src/patterns/confirm-dialog.tsx","../../src/patterns/copy-field.tsx","../../src/patterns/page-header.tsx"],"sourcesContent":["/**\n * @description: AdminShell 后台框架模式 — 组合侧栏、顶栏和内容区域\n * @author: UG - 一个斗码大陆苦逼的三段码之气的少年，并没有神秘戒指中码老的帮助，但总有一天，我会成为斗码大陆中码帝一样的存在。三十年河东，三十年河西，莫欺少年穷。\n * @date: 2026-05-30\n */\n'use client'\n\nimport { forwardRef, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { Menu } from 'lucide-react'\nimport { Button } from '../components/button'\nimport { Sidebar, type SidebarItem, type SidebarVariant } from '../components/sidebar'\nimport { cn } from '../internal/cn'\n\nexport interface AdminShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** 侧栏导航项 */\n  navItems: SidebarItem[]\n  /** 侧栏顶部区域，通常是品牌、租户或产品名 */\n  sidebarHeader?: ReactNode\n  /** 侧栏底部区域，通常是用户区或退出入口 */\n  sidebarFooter?: ReactNode\n  /** 侧栏视觉风格 */\n  sidebarVariant?: SidebarVariant\n  /** 是否启用侧栏搜索 */\n  sidebarSearchable?: boolean\n  /** 是否启用侧栏折叠 */\n  sidebarCollapsible?: boolean\n  /** 受控折叠状态 */\n  sidebarCollapsed?: boolean\n  /** 非受控默认折叠状态 */\n  defaultSidebarCollapsed?: boolean\n  /** 折叠状态变化 */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void\n  /** 受控移动端侧栏状态 */\n  mobileSidebarOpen?: boolean\n  /** 移动端侧栏状态变化 */\n  onMobileSidebarOpenChange?: (open: boolean) => void\n  /** 顶栏左侧内容 */\n  topbarStart?: ReactNode\n  /** 顶栏右侧内容 */\n  topbarEnd?: ReactNode\n  /** 完全自定义顶栏内容 */\n  topbar?: ReactNode\n  /** main 元素类名 */\n  mainClassName?: string\n  /** 内容容器类名 */\n  contentClassName?: string\n  /** 页面内容 */\n  children: ReactNode\n}\n\n/**\n * 后台框架模式\n * @example\n * <AdminShell\n *   navItems={items}\n *   sidebarHeader={<Brand />}\n *   topbarEnd={<UserMenu />}\n * >\n *   <PageHeader title=\"控制台\" />\n * </AdminShell>\n */\nconst AdminShell = forwardRef<HTMLDivElement, AdminShellProps>(\n  (\n    {\n      navItems,\n      sidebarHeader,\n      sidebarFooter,\n      sidebarVariant = 'dark',\n      sidebarSearchable = false,\n      sidebarCollapsible = true,\n      sidebarCollapsed,\n      defaultSidebarCollapsed = false,\n      onSidebarCollapsedChange,\n      mobileSidebarOpen,\n      onMobileSidebarOpenChange,\n      topbarStart,\n      topbarEnd,\n      topbar,\n      mainClassName,\n      contentClassName,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalMobileOpen, setInternalMobileOpen] = useState(false)\n    const effectiveMobileOpen = mobileSidebarOpen ?? internalMobileOpen\n\n    function setMobileOpen(open: boolean) {\n      if (mobileSidebarOpen === undefined) {\n        setInternalMobileOpen(open)\n      }\n      onMobileSidebarOpenChange?.(open)\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('min-h-screen bg-surface-0 text-text-primary', className)}\n        {...props}\n      >\n        <div className=\"flex min-h-screen min-w-0\">\n          <Sidebar\n            items={navItems}\n            variant={sidebarVariant}\n            header={sidebarHeader}\n            footer={sidebarFooter}\n            searchable={sidebarSearchable}\n            collapsible={sidebarCollapsible}\n            collapsed={sidebarCollapsed}\n            defaultCollapsed={defaultSidebarCollapsed}\n            onCollapsedChange={onSidebarCollapsedChange}\n            responsive\n            mobileOpen={effectiveMobileOpen}\n            onMobileOpenChange={setMobileOpen}\n            className=\"shrink-0\"\n          />\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <header className=\"sticky top-0 z-30 flex min-h-14 items-center gap-3 border-b border-border-base bg-surface-0/95 px-4 backdrop-blur sm:px-6 lg:px-8\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"md:hidden\"\n                aria-label=\"打开侧边栏\"\n                onClick={() => setMobileOpen(true)}\n              >\n                <Menu size={18} />\n              </Button>\n\n              {topbar ? (\n                <div className=\"min-w-0 flex-1\">{topbar}</div>\n              ) : (\n                <>\n                  <div className=\"min-w-0 flex-1\">{topbarStart}</div>\n                  {topbarEnd ? (\n                    <div className=\"flex shrink-0 items-center gap-2\">{topbarEnd}</div>\n                  ) : null}\n                </>\n              )}\n            </header>\n\n            <main className={cn('min-w-0 flex-1 overflow-x-hidden', mainClassName)}>\n              <div className={cn('mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8', contentClassName)}>\n                {children}\n              </div>\n            </main>\n          </div>\n        </div>\n      </div>\n    )\n  },\n)\n\nAdminShell.displayName = 'AdminShell'\n\nexport { AdminShell }\n","/**\n * @description: ConfirmDialog 确认弹窗模式 — 统一危险操作和关键确认流程\n * @author: UG - 一个斗码大陆苦逼的三段码之气的少年，并没有神秘戒指中码老的帮助，但总有一天，我会成为斗码大陆中码帝一样的存在。三十年河东，三十年河西，莫欺少年穷。\n * @date: 2026-05-30\n */\n'use client'\n\nimport { forwardRef, type ReactNode } from 'react'\nimport { AlertTriangle, HelpCircle, type LucideIcon } from 'lucide-react'\nimport { Button } from '../components/button'\nimport {\n  Modal,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n  type ModalContentProps,\n} from '../components/modal'\nimport { cn } from '../internal/cn'\n\nexport type ConfirmDialogVariant = 'default' | 'destructive'\n\nexport interface ConfirmDialogProps extends Omit<ModalContentProps, 'children' | 'title'> {\n  /** 是否打开 */\n  open: boolean\n  /** 打开状态变化回调 */\n  onOpenChange: (open: boolean) => void\n  /** 标题 */\n  title: ReactNode\n  /** 描述 */\n  description?: ReactNode\n  /** 自定义正文内容 */\n  children?: ReactNode\n  /** 变体，destructive 用于危险操作 */\n  variant?: ConfirmDialogVariant\n  /** 自定义图标 */\n  icon?: LucideIcon\n  /** 取消按钮文案 */\n  cancelText?: string\n  /** 确认按钮文案 */\n  confirmText?: string\n  /** 是否展示确认按钮 loading */\n  loading?: boolean\n  /** 是否禁用确认按钮 */\n  disabled?: boolean\n  /** 确认后是否自动关闭 */\n  closeOnConfirm?: boolean\n  /** 取消回调 */\n  onCancel?: () => void\n  /** 确认回调 */\n  onConfirm?: () => void | Promise<void>\n}\n\n/**\n * 确认弹窗模式\n * @example\n * <ConfirmDialog\n *   open={open}\n *   onOpenChange={setOpen}\n *   title=\"删除文件？\"\n *   description=\"删除后不可恢复。\"\n *   variant=\"destructive\"\n *   confirmText=\"删除\"\n *   onConfirm={handleDelete}\n * />\n */\nconst ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      title,\n      description,\n      children,\n      variant = 'destructive',\n      icon,\n      cancelText = '取消',\n      confirmText = '确认',\n      loading = false,\n      disabled = false,\n      closeOnConfirm = true,\n      onCancel,\n      onConfirm,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Icon = icon ?? (variant === 'destructive' ? AlertTriangle : HelpCircle)\n\n    function handleCancel() {\n      onCancel?.()\n      onOpenChange(false)\n    }\n\n    function handleConfirm() {\n      const result = onConfirm?.()\n      if (closeOnConfirm) onOpenChange(false)\n      return result\n    }\n\n    return (\n      <Modal open={open} onClose={handleCancel}>\n        <ModalContent\n          ref={ref}\n          className={cn('max-w-md', className)}\n          {...props}\n        >\n          <ModalHeader className=\"items-start gap-3\">\n            <div\n              className={cn(\n                'flex h-10 w-10 shrink-0 items-center justify-center rounded-md',\n                variant === 'destructive'\n                  ? 'bg-danger-soft text-danger-soft-fg'\n                  : 'bg-primary-soft text-primary-soft-fg',\n              )}\n            >\n              <Icon size={20} aria-hidden=\"true\" />\n            </div>\n            <div className=\"min-w-0 flex-1 space-y-1\">\n              <ModalTitle className=\"break-words text-base\">{title}</ModalTitle>\n              {description ? (\n                <p className=\"text-sm leading-6 text-text-secondary\">{description}</p>\n              ) : null}\n            </div>\n          </ModalHeader>\n\n          {children ? <div className=\"px-6 py-4 text-sm text-text-secondary\">{children}</div> : null}\n\n          <ModalFooter className=\"flex-col-reverse gap-2 sm:flex-row\">\n            <Button type=\"button\" variant=\"outline\" disabled={loading} onClick={handleCancel}>\n              {cancelText}\n            </Button>\n            <Button\n              type=\"button\"\n              variant={variant === 'destructive' ? 'destructive' : 'default'}\n              loading={loading}\n              disabled={disabled}\n              onClick={handleConfirm}\n            >\n              {confirmText}\n            </Button>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    )\n  },\n)\n\nConfirmDialog.displayName = 'ConfirmDialog'\n\nexport { ConfirmDialog }\n","/**\n * @description: CopyField 可复制字段模式 — 用于 URL、Token、ID 等只读值展示与复制\n * @author: UG - 一个斗码大陆苦逼的三段码之气的少年，并没有神秘戒指中码老的帮助，但总有一天，我会成为斗码大陆中码帝一样的存在。三十年河东，三十年河西，莫欺少年穷。\n * @date: 2026-05-30\n */\n'use client'\n\nimport { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { Check, Copy } from 'lucide-react'\nimport { Button } from '../components/button'\nimport { cn } from '../internal/cn'\n\nexport interface CopyFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** 实际复制的值 */\n  value: string\n  /** 字段标签 */\n  label?: ReactNode\n  /** 展示值；不传时展示 value */\n  displayValue?: ReactNode\n  /** 是否使用等宽字体展示 */\n  monospace?: boolean\n  /** 是否禁用复制 */\n  disabled?: boolean\n  /** 复制按钮文案 */\n  copyLabel?: string\n  /** 复制成功后的短暂文案 */\n  copiedLabel?: string\n  /** 复制成功回调 */\n  onCopied?: (value: string) => void\n  /** 复制失败回调 */\n  onCopyError?: (error: unknown) => void\n}\n\n/**\n * 可复制字段模式\n * @example\n * <CopyField label=\"访问地址\" value=\"https://cdn.ug666.top/file.png\" />\n */\nconst CopyField = forwardRef<HTMLDivElement, CopyFieldProps>(\n  (\n    {\n      value,\n      label,\n      displayValue,\n      monospace = true,\n      disabled = false,\n      copyLabel = '复制',\n      copiedLabel = '已复制',\n      onCopied,\n      onCopyError,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [copied, setCopied] = useState(false)\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n    useEffect(() => {\n      return () => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      }\n    }, [])\n\n    async function handleCopy() {\n      if (disabled) return\n\n      try {\n        if (!navigator.clipboard?.writeText) {\n          throw new Error('Clipboard API is not available')\n        }\n\n        await navigator.clipboard.writeText(value)\n        setCopied(true)\n        onCopied?.(value)\n\n        if (timeoutRef.current) clearTimeout(timeoutRef.current)\n        timeoutRef.current = setTimeout(() => setCopied(false), 1400)\n      } catch (error) {\n        onCopyError?.(error)\n      }\n    }\n\n    return (\n      <div ref={ref} className={cn('space-y-2', className)} {...props}>\n        {label ? <div className=\"text-xs font-medium text-text-secondary\">{label}</div> : null}\n        <div\n          className={cn(\n            'flex min-w-0 items-stretch overflow-hidden rounded-md border border-border-base bg-surface-1',\n            disabled && 'opacity-60',\n          )}\n        >\n          <div\n            className={cn(\n              'min-w-0 flex-1 truncate px-3 py-2 text-sm text-text-primary',\n              monospace && 'font-mono',\n            )}\n            title={typeof displayValue === 'string' ? displayValue : value}\n          >\n            {displayValue ?? value}\n          </div>\n          <div className=\"flex shrink-0 items-center border-l border-border-base bg-surface-2 px-1.5\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              disabled={disabled}\n              onClick={handleCopy}\n              aria-live=\"polite\"\n            >\n              {copied ? <Check size={15} /> : <Copy size={15} />}\n              {copied ? copiedLabel : copyLabel}\n            </Button>\n          </div>\n        </div>\n      </div>\n    )\n  },\n)\n\nCopyField.displayName = 'CopyField'\n\nexport { CopyField }\n","/**\n * @description: PageHeader 页面标题模式 — 用于后台列表、详情页和工具页的统一页头\n * @author: UG - 一个斗码大陆苦逼的三段码之气的少年，并没有神秘戒指中码老的帮助，但总有一天，我会成为斗码大陆中码帝一样的存在。三十年河东，三十年河西，莫欺少年穷。\n * @date: 2026-05-30\n */\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../internal/cn'\n\nexport interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** 标题上方的短标签，例如模块名或当前范围 */\n  eyebrow?: ReactNode\n  /** 页面主标题 */\n  title: ReactNode\n  /** 页面说明文案 */\n  description?: ReactNode\n  /** 标题旁的状态、徽标或计数 */\n  badge?: ReactNode\n  /** 面包屑、返回入口或路径区域 */\n  breadcrumb?: ReactNode\n  /** 右侧主要操作区 */\n  actions?: ReactNode\n  /** 标题下方的元信息，例如更新时间、所有者、环境 */\n  meta?: ReactNode\n  /** 页头底部扩展区，例如 tabs 或筛选入口 */\n  children?: ReactNode\n}\n\n/**\n * 后台页面标题模式\n * @example\n * <PageHeader\n *   eyebrow=\"Storage\"\n *   title=\"文件空间\"\n *   description=\"管理项目文件、外链和访问策略。\"\n *   actions={<Button>上传文件</Button>}\n * />\n */\nconst PageHeader = forwardRef<HTMLElement, PageHeaderProps>(\n  (\n    {\n      eyebrow,\n      title,\n      description,\n      badge,\n      breadcrumb,\n      actions,\n      meta,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          'flex min-w-0 flex-col gap-5 border-b border-border-base pb-6',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumb ? <div className=\"min-w-0\">{breadcrumb}</div> : null}\n\n        <div className=\"flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n          <div className=\"min-w-0 space-y-3\">\n            {eyebrow ? (\n              <div className=\"text-xs font-semibold uppercase text-primary\">{eyebrow}</div>\n            ) : null}\n            <div className=\"flex min-w-0 flex-wrap items-center gap-2.5\">\n              <h1 className=\"min-w-0 break-words text-2xl font-bold leading-tight text-text-primary sm:text-3xl\">\n                {title}\n              </h1>\n              {badge ? <div className=\"shrink-0\">{badge}</div> : null}\n            </div>\n            {description ? (\n              <p className=\"max-w-3xl text-sm leading-6 text-text-secondary\">{description}</p>\n            ) : null}\n            {meta ? (\n              <div className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2 text-xs text-text-tertiary\">\n                {meta}\n              </div>\n            ) : null}\n          </div>\n\n          {actions ? (\n            <div className=\"flex shrink-0 flex-wrap items-center gap-2 lg:justify-end\">{actions}</div>\n          ) : null}\n        </div>\n\n        {children ? <div className=\"min-w-0\">{children}</div> : null}\n      </header>\n    )\n  },\n)\n\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":"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","names":["forwardRef","jsx","jsxs","forwardRef","forwardRef","useState","jsx","jsxs","forwardRef","useState","forwardRef","jsx","jsxs","forwardRef"]}