@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.50

package/fe/packages/react/ui/i18n/I18nProvider.d.ts

@@ -0,0 +1,12 @@
+import type { I18nLanguage, I18nResources } from "../../../common/i18n/index";
+import { type ReactNode } from "react";
+export interface I18nProviderProps {
+    language?: I18nLanguage;
+    fallbackLanguage?: I18nLanguage;
+    resources?: I18nResources;
+    mergeResources?: boolean;
+    persist?: boolean;
+    storageKey?: string;
+    children: ReactNode;
+}
+export declare function I18nProvider({ language, fallbackLanguage, resources, mergeResources, persist, storageKey, children, }: I18nProviderProps): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/i18n/I18nProvider.js

@@ -0,0 +1,38 @@
+import { defaultLanguage, languageLocalKey } from "../../../common/i18n/locales.js";
+import { useI18nStore } from "./useI18n.js";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region packages/react/ui/i18n/I18nProvider.tsx
+function I18nProvider({ language = defaultLanguage, fallbackLanguage = defaultLanguage, resources, mergeResources = true, persist = true, storageKey = languageLocalKey, children }) {
+	const configureI18n = useI18nStore((state) => state.configureI18n);
+	const setLanguage = useI18nStore((state) => state.setLanguage);
+	const setFallbackLanguage = useI18nStore((state) => state.setFallbackLanguage);
+	const setResources = useI18nStore((state) => state.setResources);
+	useEffect(() => {
+		configureI18n({
+			persist,
+			storageKey
+		});
+	}, [
+		configureI18n,
+		persist,
+		storageKey
+	]);
+	useEffect(() => {
+		setLanguage(language);
+	}, [language, setLanguage]);
+	useEffect(() => {
+		setFallbackLanguage(fallbackLanguage);
+	}, [fallbackLanguage, setFallbackLanguage]);
+	useEffect(() => {
+		if (!resources) return;
+		setResources(resources, { merge: mergeResources });
+	}, [
+		mergeResources,
+		resources,
+		setResources
+	]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+//#endregion
+export { I18nProvider };

package/fe/packages/react/ui/i18n/index.d.ts

@@ -0,0 +1,3 @@
+export * from "../../../common/i18n/index";
+export * from "./I18nProvider";
+export * from "./useI18n";

package/fe/packages/react/ui/i18n/index.js

@@ -0,0 +1,7 @@
+import { defaultLanguageResources } from "../../../common/i18n/default.js";
+import { defaultEnglishResources } from "../../../common/i18n/en-US.js";
+import { defaultLanguage, languageLocalKey, translations } from "../../../common/i18n/locales.js";
+import { getI18nPathValue, getLanguage, i18n, i18nStore, interpolateI18nMessage, isPlainI18nDictionary, mergeI18nDictionary, mergeI18nResources, t, translate } from "../../../common/i18n/index.js";
+import { useI18n, useI18nStore } from "./useI18n.js";
+import { I18nProvider } from "./I18nProvider.js";
+export { I18nProvider, defaultEnglishResources, defaultLanguage, defaultLanguageResources, getI18nPathValue, getLanguage, i18n, i18nStore, interpolateI18nMessage, isPlainI18nDictionary, languageLocalKey, mergeI18nDictionary, mergeI18nResources, t, translate, translations, useI18n, useI18nStore };

package/fe/packages/react/ui/i18n/useI18n.d.ts

@@ -0,0 +1,8 @@
+import type { I18nInterpolationValues, I18nTranslateOptions } from "../../../common/i18n/index";
+export declare const useI18nStore: import("../index").StoreHook<{
+    getState: () => import("../index").I18nStore;
+    getInitialState: () => import("../index").I18nStore;
+    setState: (partial: Partial<import("../index").I18nStore> | ((state: import("../index").I18nStore) => Partial<import("../index").I18nStore>)) => void;
+    subscribe: (listener: import("../index").I18nStoreListener) => () => void;
+}>;
+export declare function useI18n(): <T = string>(key: string, fillingData?: I18nInterpolationValues, options?: I18nTranslateOptions) => string | T;

package/fe/packages/react/ui/i18n/useI18n.js

@@ -0,0 +1,25 @@
+import { i18nStore, translate } from "../../../common/i18n/index.js";
+import { createStoreHook } from "../lib/createStoreHook.js";
+import { useCallback } from "react";
+//#region packages/react/ui/i18n/useI18n.ts
+var useI18nStore = createStoreHook(i18nStore);
+/**
+* React 组件内使用的翻译 hook。
+* 会订阅 language、fallbackLanguage、resources，语言或资源变化时触发组件更新。
+*/
+function useI18n() {
+	const language = useI18nStore((state) => state.language);
+	const fallbackLanguage = useI18nStore((state) => state.fallbackLanguage);
+	const resources = useI18nStore((state) => state.resources);
+	return useCallback((key, fillingData, options) => translate({
+		language,
+		fallbackLanguage,
+		resources
+	}, key, fillingData, options), [
+		fallbackLanguage,
+		language,
+		resources
+	]);
+}
+//#endregion
+export { useI18n, useI18nStore };

package/fe/packages/react/ui/index.css

@@ -0,0 +1,299 @@
+@import "tailwindcss";
+
+/* 内容扫描 */
+/* baseComponents */
+@source "./**/*.{js,ts,jsx,tsx}";
+
+/* 暗色模式变体 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+.tc-ui-table-head[data-fixed-active='true'][data-hide-separator-when-fixed-active='true'] > .tc-ui-table-head-separator {
+  display: none;
+}
+
+/* 主题配置 */
+@theme {
+  /* 圆角 */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* 颜色 */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  /* 主题色 - 与 @layer base 中的 CSS 变量对应 */
+  --color-theme: hsl(var(--theme-primary));
+  --color-theme-foreground: hsl(var(--theme-primary-foreground));
+  --color-theme-bg: hsl(var(--theme-bg));
+  --color-theme-text: hsl(var(--theme-text));
+
+  /* 表格颜色 */
+  --color-table-header: hsl(var(--table-header-bg));
+  --color-table-header-text: hsl(var(--table-header-text));
+  --color-table-head-text: hsl(var(--table-head-text));
+  --color-table-cell-text: hsl(var(--table-cell-text));
+  --color-table-action: hsl(var(--table-action-bg));
+  --color-table-action-text: hsl(var(--table-action-text));
+
+  /* 面包屑颜色 */
+  --color-breadcrumb-text: hsl(var(--breadcrumb-text));
+  --color-breadcrumb-border: hsl(var(--breadcrumb-border));
+  --color-breadcrumb-active-text: hsl(var(--breadcrumb-active-text));
+  --color-breadcrumb-active-bg: hsl(var(--breadcrumb-active-bg));
+}
+
+/* CSS 变量定义 */
+:root {
+  --background: 0 0% 99%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 99%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 99%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 97%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  --shadow-panel: 0 18px 60px hsl(240 10% 12% / 0.14);
+  --shadow-floating: 0 18px 48px hsl(240 10% 12% / 0.18), 0 1px 0 hsl(0 0% 100% / 0.82) inset;
+  --shadow-accent: 0 10px 28px hsl(240 5.9% 10% / 0.16);
+
+  /* 主题色 - 默认亮色中性主题 */
+  --theme-primary: 240 5.9% 10%;
+  --theme-primary-foreground: 0 0% 97%;
+  --theme-bg: 210 20% 98%;
+  --theme-text: 222 47% 11%;
+
+  /* 表格颜色 - 默认亮色中性主题 */
+  --table-header-bg: 220 14% 96%;
+  --table-header-text: 220 9% 46%;
+  --table-head-text: 217 19% 27%;
+  --table-cell-text: 180 4% 16%;
+  --table-action-bg: 220 13% 91%;
+  --table-action-text: 240 5.9% 10%;
+
+  /* 面包屑颜色 - 默认亮色中性主题 */
+  --breadcrumb-text: 220 10% 46%;
+  --breadcrumb-border: 0 0% 88%;
+  --breadcrumb-active-text: 0 0% 97%;
+  --breadcrumb-active-bg: 240 5.9% 10%;
+}
+
+/* 绿色主题 */
+[data-theme='green'] {
+  --theme-primary: 142 76% 36%;
+  --theme-primary-foreground: 0 0% 100%;
+  --theme-bg: 120 25% 93%;
+  --theme-text: 141 48% 13%;
+
+  --table-header-bg: 0 0% 88%;
+  --table-header-text: 120 4% 16%;
+  --table-head-text: 120 4% 16%;
+  --table-cell-text: 120 4% 16%;
+  --table-action-bg: 120 25% 93% / 0.8;
+  --table-action-text: 141 48% 13%;
+
+  --breadcrumb-text: 0 0% 27%;
+  --breadcrumb-border: 0 0% 88%;
+  --breadcrumb-active-text: 141 48% 13%;
+  --breadcrumb-active-bg: 140 96% 72%;
+}
+
+/* 暗色模式 */
+.dark {
+  --background: 240 10% 8%;
+  --foreground: 0 0% 95%;
+  --card: 240 10% 8%;
+  --card-foreground: 0 0% 95%;
+  --popover: 240 10% 8%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 0 0% 95%;
+  --primary-foreground: 240 5% 15%;
+  --secondary: 240 6% 20%;
+  --secondary-foreground: 0 0% 95%;
+  --muted: 240 6% 20%;
+  --muted-foreground: 240 5% 75%;
+  --accent: 240 6% 20%;
+  --accent-foreground: 0 0% 95%;
+  --destructive: 0 70% 40%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 6% 20%;
+  --input: 240 6% 20%;
+  --ring: 240 4.9% 83.9%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+  --shadow-panel: 0 18px 60px hsl(240 10% 2% / 0.38);
+  --shadow-floating: 0 20px 64px hsl(240 10% 2% / 0.5), 0 1px 0 hsl(0 0% 100% / 0.05) inset;
+  --shadow-accent: 0 10px 28px hsl(0 0% 95% / 0.16);
+
+  /* 主题色调整 */
+  --theme-primary: 0 0% 92%;
+  --theme-primary-foreground: 240 10% 10%;
+  --theme-bg: 240 8% 12%;
+  --theme-text: 0 0% 95%;
+
+  /* 表格颜色优化 */
+  --table-header-bg: 240 5% 18%;
+  --table-header-text: 240 5% 75%;
+  --table-head-text: 240 5% 85%;
+  --table-cell-text: 0 0% 90%;
+  --table-action-bg: 240 5% 22%;
+  --table-action-text: 0 0% 95%;
+
+  /* 面包屑颜色优化 */
+  --breadcrumb-text: 240 5% 72%;
+  --breadcrumb-border: 240 4% 24%;
+  --breadcrumb-active-text: 240 10% 10%;
+  --breadcrumb-active-bg: 0 0% 92%;
+}
+
+.dark[data-ui-style='shuttle'],
+.dark [data-ui-style='shuttle'] {
+  --background: 240 8% 3%;
+  --foreground: 0 0% 93%;
+
+  --card: 150 5% 7%;
+  --card-foreground: 0 0% 92%;
+
+  --popover: 240 4% 14%;
+  --popover-foreground: 0 0% 94%;
+
+  --primary: 35 100% 55%;
+  --primary-foreground: 240 8% 6%;
+  --secondary: 240 4% 18%;
+  --secondary-foreground: 0 0% 94%;
+  --muted: 240 4% 18%;
+  --muted-foreground: 240 3% 58%;
+  --accent: 247 88% 70%;
+  --accent-foreground: 240 8% 6%;
+  --destructive: 0 72% 58%;
+  --destructive-foreground: 0 0% 94%;
+  --border: 240 4% 18%;
+  --input: 240 4% 16%;
+  --ring: 35 100% 58%;
+  --chart-1: 35 100% 55%;
+  --chart-2: 247 88% 70%;
+  --chart-3: 207 88% 72%;
+  --chart-4: 145 58% 52%;
+  --chart-5: 42 96% 58%;
+  --shadow-panel: 0 18px 60px hsl(240 10% 2% / 0.45);
+  --shadow-floating: 0 22px 70px hsl(240 10% 2% / 0.58), 0 1px 0 hsl(0 0% 100% / 0.06) inset;
+  --shadow-accent: 0 10px 28px hsl(35 100% 55% / 0.25);
+
+  --theme-primary: 35 100% 55%;
+  --theme-primary-foreground: 240 8% 6%;
+  --theme-bg: 240 5% 12%;
+  --theme-text: 0 0% 94%;
+
+  --table-header-bg: 240 5% 12%;
+  --table-header-text: 240 3% 58%;
+  --table-head-text: 0 0% 82%;
+  --table-cell-text: 0 0% 90%;
+  --table-action-bg: 240 4% 18%;
+  --table-action-text: 0 0% 94%;
+
+  --breadcrumb-text: 240 3% 62%;
+  --breadcrumb-border: 240 4% 18%;
+  --breadcrumb-active-text: 240 8% 6%;
+  --breadcrumb-active-bg: 35 100% 55%;
+}
+
+.dark[data-theme='green'],
+.dark [data-theme='green'] {
+  --theme-primary: 142 68% 46%;
+  --theme-primary-foreground: 0 0% 100%;
+  --theme-bg: 145 22% 14%;
+  --theme-text: 140 30% 92%;
+
+  --table-header-bg: 145 18% 18%;
+  --table-header-text: 142 20% 72%;
+  --table-head-text: 140 24% 88%;
+  --table-cell-text: 140 18% 90%;
+  --table-action-bg: 145 16% 22%;
+  --table-action-text: 140 24% 88%;
+
+  --breadcrumb-text: 142 16% 72%;
+  --breadcrumb-border: 145 12% 26%;
+  --breadcrumb-active-text: 0 0% 100%;
+  --breadcrumb-active-bg: 142 68% 46%;
+}
+
+/* 中间态主题 */
+[data-theme='gray'] {
+  --theme-primary: 220 9% 38%;
+  --theme-primary-foreground: 0 0% 100%;
+  --theme-bg: 220 16% 92%;
+  --theme-text: 222 20% 22%;
+
+  --table-header-bg: 220 12% 90%;
+  --table-header-text: 220 9% 38%;
+  --table-head-text: 220 15% 24%;
+  --table-cell-text: 220 10% 22%;
+  --table-action-bg: 220 11% 86%;
+  --table-action-text: 220 15% 24%;
+
+  --breadcrumb-text: 220 10% 40%;
+  --breadcrumb-border: 220 10% 82%;
+  --breadcrumb-active-text: 0 0% 100%;
+  --breadcrumb-active-bg: 220 9% 38%;
+}
+
+/* 全局样式 */
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

package/fe/packages/react/ui/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components";
+export * from "./i18n";
+export * from "./lib/createStoreHook";
+export * from "./lib/utils";

package/fe/packages/react/ui/index.js

@@ -0,0 +1,58 @@
+import { defaultLanguageResources } from "../../common/i18n/default.js";
+import { defaultEnglishResources } from "../../common/i18n/en-US.js";
+import { defaultLanguage, languageLocalKey, translations } from "../../common/i18n/locales.js";
+import { getI18nPathValue, getLanguage, i18n, i18nStore, interpolateI18nMessage, isPlainI18nDictionary, mergeI18nDictionary, mergeI18nResources, t, translate } from "../../common/i18n/index.js";
+import { createStoreHook } from "./lib/createStoreHook.js";
+import { useI18n, useI18nStore } from "./i18n/useI18n.js";
+import { I18nProvider } from "./i18n/I18nProvider.js";
+import "./i18n/index.js";
+import { cn, formatDate, formatDateTime, formatTime, generateStartEndTime } from "./lib/utils.js";
+import { Loading, LoadingIndicator } from "./components/Loading/Loading.js";
+import { Button } from "./components/Button/Button.js";
+import { AsynchronousButton, SubmitButton } from "./components/Button/SubmitButton.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, SimpleBreadcrumb } from "./components/breadcrumb/breadcrumb.js";
+import { Card } from "./components/Card/Card.js";
+import { Checkbox } from "./components/Checkbox/Checkbox.js";
+import { Overlay, canUseDocument } from "./components/Overlay/Overlay.js";
+import { Modal } from "./components/Modal/Modal.js";
+import { modal } from "./components/Modal/ModalManager.js";
+import { ConfirmDialog } from "./components/ConfirmDialog/ConfirmDialog.js";
+import { Input } from "./components/Input/Input.js";
+import { getDefaultDropdownPosition, useDropdownPositioning } from "./components/hooks/useDropdownPositioning.js";
+import { Popup } from "./components/Popup/Popup.js";
+import { Select } from "./components/Select/Select.js";
+import { Pagination } from "./components/Pagination/Pagination.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table/table.js";
+import { Skeleton } from "./components/Skeleton/Skeleton.js";
+import { Dropdown } from "./components/Dropdown/Dropdown.js";
+import { ActionBtn } from "./components/DataTable/ActionBtn.js";
+import { DataTable } from "./components/DataTable/index.js";
+import { Drawer } from "./components/Drawer/Drawer.js";
+import { Form } from "./components/Form/Form.js";
+import { Label } from "./components/Label/Label.js";
+import { FormItem } from "./components/Form/FormItem.js";
+import { useForm } from "./components/Form/useForm.js";
+import { SchemaForm } from "./components/Form/SchemaForm/index.js";
+import { ImagePreviewController } from "./components/ImagePreview/ImagePreview.js";
+import { PreviewImage } from "./components/ImagePreview/PreviewImage.js";
+import { InputNumber } from "./components/InputNumber/InputNumber.js";
+import { Layout } from "./components/Layout/Layout.js";
+import { useMenuStore } from "./components/Menu/MenuContext.js";
+import { MenuItem } from "./components/Menu/MenuItem.js";
+import { SubMenu } from "./components/Menu/SubMenu.js";
+import { CollapseToggle, Menu } from "./components/Menu/Menu.js";
+import { message } from "./components/Message/MessageManager.js";
+import { Notification } from "./components/Notification/Notification.js";
+import { RadioGroup, useRadioGroupContext } from "./components/Radio/RadioGroup.js";
+import { Radio } from "./components/Radio/Radio.js";
+import Search from "./components/Search/Search.js";
+import { Switch } from "./components/Switch/Switch.js";
+import TableSearch from "./components/TableSearch/TableSearch.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
+import { Textarea } from "./components/Textarea/Textarea.js";
+import { Tooltip } from "./components/Tooltip/Tooltip.js";
+import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
+import { FileUpload } from "./components/Upload/Upload.js";
+import { ImageUpload } from "./components/Upload/ImageUpload.js";
+import "./components/index.js";
+export { ActionBtn, AsynchronousButton, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, CollapseToggle, ConfirmDialog, DataTable, Drawer, Dropdown, FileUpload, Form, FormItem, I18nProvider, ImagePreviewController, ImageUpload, Input, InputNumber, Label, Layout, Loading, LoadingIndicator, Menu, MenuItem, Modal, Notification, Overlay, Pagination, Popup, PreviewImage, Radio, RadioGroup, SchemaForm, Search, Select, SimpleBreadcrumb, Skeleton, SubMenu, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSearch, Tabs, Textarea, Tooltip, TreeSelect, canUseDocument, cn, createStoreHook, defaultEnglishResources, defaultLanguage, defaultLanguageResources, formatDate, formatDateTime, formatTime, generateStartEndTime, getDefaultDropdownPosition, getI18nPathValue, getLanguage, i18n, i18nStore, interpolateI18nMessage, isPlainI18nDictionary, languageLocalKey, mergeI18nDictionary, mergeI18nResources, message, modal, t, translate, translations, useDropdownPositioning, useForm, useI18n, useI18nStore, useMenuStore, useRadioGroupContext };

package/fe/packages/react/ui/lib/createStoreHook.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractState, StoreApi } from "zustand/vanilla";
+type ReadonlyStoreApi<T> = Pick<StoreApi<T>, 'getState' | 'getInitialState' | 'subscribe'>;
+export type StoreHook<TStore extends ReadonlyStoreApi<unknown>> = {
+    (): ExtractState<TStore>;
+    <T>(selector: (state: ExtractState<TStore>) => T): T;
+};
+export declare function createStoreHook<TStore extends ReadonlyStoreApi<unknown>>(store: TStore): StoreHook<TStore>;
+export {};

package/fe/packages/react/ui/lib/createStoreHook.js

@@ -0,0 +1,9 @@
+import { useStore } from "zustand";
+//#region packages/react/ui/lib/createStoreHook.ts
+function createStoreHook(store) {
+	return ((selector) => {
+		return selector ? useStore(store, selector) : useStore(store);
+	});
+}
+//#endregion
+export { createStoreHook };

package/fe/packages/react/ui/lib/export.d.ts

@@ -0,0 +1,21 @@
+import { type TableColumnDef } from "../components/index";
+export declare const ExportType: {
+    readonly all: 0;
+    readonly current: 1;
+};
+export type ExportType = (typeof ExportType)[keyof typeof ExportType];
+interface ExportExcelParams<T> {
+    fetchData: (pageNum: number, pageSize: number, searchParams?: Record<string, any>) => Promise<{
+        records: T[];
+        total: number;
+    }>;
+    columns: TableColumnDef<T>[];
+    exportType: ExportType;
+    currentPage?: number;
+    pageSize?: number;
+    maxCount?: number;
+    currentPageData?: T[];
+    fileName?: string;
+}
+export declare function exportToExcel<T>(options: ExportExcelParams<T>): Promise<void>;
+export {};

package/fe/packages/react/ui/lib/export.js

@@ -0,0 +1,112 @@
+import { message } from "../components/Message/MessageManager.js";
+import "../components/index.js";
+import * as XLSX from "xlsx";
+//#region packages/react/ui/lib/export.ts
+/**
+* 导出 Excel 工具方法
+*
+* 功能：
+* - 支持导出「当前页」或「当前查询条件下的全部页数据」
+* - 通过 DataTable 的 columns 控制导出列及顺序
+*
+* 使用方式（示例）：
+* ```ts
+* await exportToExcel({
+*   fetchData: (pageNum, pageSize) => getWithdrawList({ ...searchParams, pageNum, pageSize }),
+*   columns, // 直接复用 DataTable 的 columns
+*   exportType: 'all', // 'all' 导出全部页；'current' 仅导出当前页
+*   currentPage,
+*   pageSize,
+*   total,
+*   currentPageData: tableData, // 可选，导出当前页时直接使用现有数据，避免重复请求
+*   fileName: '提币记录',
+* })
+* ```
+*/
+var getTextFromReactNode = (node) => {
+	if (node == null || typeof node !== "object") return node;
+	if ("props" in node && node.props && typeof node.props === "object" && "children" in node.props) {
+		const children = node.props.children;
+		if (Array.isArray(children)) return children.map((child) => getTextFromReactNode(child)).flat();
+		return getTextFromReactNode(children);
+	}
+	return String(node);
+};
+var ExportType = {
+	/**
+	* 当前查询条件下所有页
+	*/
+	all: 0,
+	/**
+	* 当前页
+	*/
+	current: 1
+};
+/** 读取嵌套字段值，支持 a.b.c 形式 */
+var getValue = (row, dataIndex) => {
+	const key = String(dataIndex);
+	if (!key.includes(".")) return row?.[key];
+	return key.split(".").reduce((acc, cur) => acc == null ? acc : acc[cur], row);
+};
+/**
+* 通用导出 Excel 方法
+*/
+async function exportToExcel(options) {
+	const { fetchData, exportType, currentPage = 1, pageSize = 2e3, maxCount = 1e4, currentPageData, fileName } = options;
+	const defaultSearchParams = { export: true };
+	const fieldConfigs = options.columns.filter((col) => !col.isAction && col.key !== "action").map((col) => ({
+		title: col.title,
+		dataIndex: col.dataIndex || col.key,
+		render: col.renderExport ?? col.render
+	}));
+	if (!fieldConfigs.length) {
+		console.warn("[exportToExcel] 导出列配置为空，已终止导出");
+		return;
+	}
+	const infoMessageId = message.info("导出中...", { duration: 999999999 });
+	try {
+		let allData = [];
+		if (exportType === ExportType.current) if (currentPageData && currentPageData.length) allData = currentPageData;
+		else allData = (await fetchData(currentPage, pageSize, defaultSearchParams)).records || [];
+		else {
+			const list = [];
+			for (let page = 1;; page += 1) {
+				const records = (await fetchData(page, pageSize, defaultSearchParams)).records || [];
+				if (!records.length) break;
+				list.push(...records);
+				if (list.length >= maxCount) {
+					list.length = maxCount;
+					break;
+				}
+				if (records.length < pageSize) break;
+			}
+			allData = list;
+		}
+		if (!allData.length) {
+			message.warning?.("暂无可导出的数据");
+			message.close(infoMessageId);
+			return;
+		}
+		const header = fieldConfigs.map((f) => f.title);
+		const dataRows = allData.map((row, index) => fieldConfigs.map((f) => {
+			const v = f.render ? f.render(getValue(row, f.dataIndex), row, index) : getValue(row, f.dataIndex);
+			if (v && typeof v === "object" && "props" in v && "children" in v.props) return getTextFromReactNode(v);
+			return v;
+		}));
+		const worksheet = XLSX.utils.aoa_to_sheet([header, ...dataRows]);
+		const workbook = XLSX.utils.book_new();
+		XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+		const now = /* @__PURE__ */ new Date();
+		const pad = (n) => n < 10 ? `0${n}` : String(n);
+		const defaultName = `export-${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+		XLSX.writeFile(workbook, `${fileName || defaultName}.xlsx`);
+		message.close(infoMessageId);
+		message.success?.("导出成功");
+	} catch (error) {
+		console.error("[exportToExcel] 导出失败:", error);
+		message.close(infoMessageId);
+		message.error?.("导出失败，请稍后重试");
+	}
+}
+//#endregion
+export { ExportType, exportToExcel };

package/fe/packages/react/ui/lib/utils.d.ts

@@ -0,0 +1,9 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function formatDateTime(date: string | Date | null | undefined | number, format?: string): string;
+export declare function formatDate(date: string | Date | null | undefined): string;
+export declare function formatTime(date: string | Date | null | undefined): string;
+export declare function generateStartEndTime(dates: string[] | Date[] | null | undefined): {
+    start: string;
+    end: string;
+};