sinking-antd 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,58 @@
+# sinking-antd
+
+一个基于 Ant Design 和 antd-style 构建的企业级 React 组件库，专为中后台应用设计。
+
+## ✨ 特性
+
+- 🎨 **主题定制**：完整的主题系统，支持亮色/暗色/跟随系统
+- 📦 **开箱即用**：高质量的 React 组件
+- 🔧 **TypeScript**：完整的类型定义
+- 🎯 **企业级**：适用于中后台产品
+- 🚀 **性能优化**：内置性能优化
+- 📱 **响应式**：自适应各种屏幕
+
+## 📦 安装
+
+```bash
+npm install sinking-antd
+# 或
+yarn add sinking-antd
+# 或
+pnpm add sinking-antd
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom antd @ant-design/icons antd-style
+```
+
+## 🔨 快速开始
+
+```tsx
+import { Theme, Layout, ProTable } from 'sinking-antd';
+
+function App() {
+  return (
+    <Theme>
+      <Layout menus={menus} pathname={pathname}>
+        <ProTable columns={columns} request={fetchData} />
+      </Layout>
+    </Theme>
+  );
+}
+```
+
+## 📚 组件列表
+
+| 组件 | 说明 |
+|------|------|
+| Theme | 主题管理 |
+| Layout | 后台布局 |
+| ProTable | 高级表格 |
+| ProModal | 高级弹窗 |
+| Icon | 图标 |
+| Title | 标题 |
+| Breadcrumb | 面包屑 |
+| Animation | 动画 |
+| Antd | 工具（Message、Notification、Modal）|

package/dist/index.d.mts

@@ -0,0 +1,413 @@
+import React, { ReactNode } from 'react';
+import { MessageInstance } from 'antd/es/message/interface';
+import { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import { NotificationInstance } from 'antd/es/notification/interface';
+import { ThemeMode } from 'antd-style';
+import { TableColumnProps, TableProps, PaginationProps, FormInstance, ModalProps } from 'antd';
+
+/**
+ * Icon 组件 - 支持 Ant Design 图标和 iconfont 图标
+ *
+ * 使用方式：
+ *
+ * 1. 全局配置（推荐，应用启动时设置一次）
+ *    ```tsx
+ *    import { setIconfontUrl } from '@/components/icon';
+ *
+ *    // 设置单个 iconfont 地址
+ *    setIconfontUrl('//at.alicdn.com/t/c/font_xxx.js');
+ *
+ *    // 设置多个 iconfont 地址（支持多个图标库）
+ *    setIconfontUrl([
+ *      '//at.alicdn.com/t/c/font_xxx1.js',
+ *      '//at.alicdn.com/t/c/font_xxx2.js'
+ *    ]);
+ *    ```
+ *
+ * 2. 使用 Provider 局部配置（适用于特定区域需要不同图标库）
+ *    ```tsx
+ *    import { Icon, IconFontProvider } from '@/components/icon';
+ *
+ *    <IconFontProvider iconfontUrl="//at.alicdn.com/t/c/font_xxx.js">
+ *      <Icon type="icon-xxx" />
+ *    </IconFontProvider>
+ *    ```
+ *
+ * 3. 直接在组件上配置（优先级最高，适用于个别图标需要特殊处理）
+ *    ```tsx
+ *    import { Icon } from '@/components/icon';
+ *
+ *    <Icon type="icon-xxx" iconfontUrl="//at.alicdn.com/t/c/font_xxx.js" />
+ *    ```
+ *
+ * 优先级：组件 props > IconFontProvider > 全局配置 > 默认值
+ */
+
+/**
+ * 设置全局 iconfont 地址
+ * @param url iconfont 脚本地址（单个或多个）
+ */
+declare const setIconfontUrl: (url: string | string[]) => void;
+/**
+ * 获取当前 iconfont 地址
+ * @returns 当前配置的 iconfont 地址（未配置时返回 undefined）
+ */
+declare const getIconfontUrl: () => string | string[] | undefined;
+/**
+ * IconFont 配置 Provider 组件属性
+ */
+interface IconFontProviderProps {
+    iconfontUrl?: string | string[];
+    children: React.ReactNode;
+}
+/**
+ * IconFont 配置 Provider 组件
+ * 用于为子组件提供自定义的 iconfont 地址
+ */
+declare const IconFontProvider: React.FC<IconFontProviderProps>;
+/**
+ * Icon 组件属性
+ */
+interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    type: string;
+    iconfontUrl?: string | string[];
+    ref?: any;
+    className?: any;
+    style?: any;
+    onClick?: any;
+}
+/**
+ * Icon 组件
+ * 支持 Ant Design 图标和 iconfont 图标
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * 获取所有 Antd 图标名称
+ */
+declare const getAntdIconNames: () => string[];
+/**
+ * 获取所有 iconfont 图标名称
+ * @param url 可选的 iconfont 地址（不传则使用全局配置）
+ * @returns iconfont 图标名称数组
+ */
+declare const getIconfontIconNames: (url?: string | string[]) => Promise<string[]>;
+/**
+ * 获取所有图标名称（Antd + Iconfont）
+ * @param iconfontUrl 可选的 iconfont 地址（不传则使用全局配置）
+ * @returns 所有图标名称数组
+ */
+declare const getAllIconNames: (iconfontUrl?: string | string[]) => Promise<string[]>;
+
+/**
+ * 面包屑项目类型
+ */
+type BreadCrumbItem$1 = {
+    title: string;
+    path?: string;
+    onClick?: () => void;
+};
+/**
+ * 面包屑组件属性
+ */
+type BreadCrumbProps = {
+    style?: React.CSSProperties;
+    className?: string;
+    enabled?: boolean;
+    items?: BreadCrumbItem$1[];
+    hideBreadCrumb?: boolean;
+};
+/**
+ * 面包屑组件
+ * @param props
+ * @constructor
+ */
+declare const BreadCrumb: React.FC<BreadCrumbProps>;
+
+declare let Message: MessageInstance;
+declare let Notification: NotificationInstance;
+declare let Modal: Omit<ModalStaticFunctions, 'warn'>;
+declare const _default: () => null;
+
+/**
+ * 主题上下文类型
+ * 提供主题管理的所有方法和状态
+ */
+interface ThemeContextType {
+    themes: any;
+    setColor: (color: string) => void;
+    setRadius: (radius: number) => void;
+    setThemes: (theme: any) => void;
+    setDefaultTheme: () => void;
+    setCompactTheme: () => void;
+    appearance: any;
+    setAppearance: (appearance: any) => void;
+    mode: ThemeMode;
+    getModeName: (mode: ThemeMode) => string;
+    lightMode: ThemeMode;
+    darkMode: ThemeMode;
+    autoMode: ThemeMode;
+    setLightMode: () => void;
+    setDarkMode: () => void;
+    setAutoMode: () => void;
+    isLightMode: () => boolean;
+    isDarkMode: () => boolean;
+    isAutoMode: () => boolean;
+    isLightTheme: () => boolean;
+    isDarkTheme: () => boolean;
+    isCompactTheme: () => boolean;
+    toggle: () => void;
+}
+declare const useTheme: () => ThemeContextType | undefined;
+/**
+ * 主题组件属性
+ */
+type ThemeProps = {
+    theme?: any;
+    mode?: ThemeMode;
+    appearance?: any;
+    onAppearanceChange?: (appearance: any) => void;
+    children?: ReactNode;
+};
+declare const Theme: React.FC<ThemeProps>;
+
+type AnimationProps = {
+    animate?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+declare const Animate: {
+    readonly None: "";
+    readonly FadeUp: "fadeInUp";
+    readonly FadeDown: "fadeInDown";
+};
+declare const Animation: React.FC<AnimationProps>;
+
+/**
+ * 标题条位置类型
+ */
+type TitlePlacement = 'left' | 'right';
+/**
+ * 标题条大小类型
+ */
+type TitleSize = 'small' | 'normal' | 'larger';
+/**
+ * 标题条组件属性
+ */
+type TitleProps = {
+    children?: any;
+    placement?: TitlePlacement;
+    size?: TitleSize;
+    open?: boolean;
+    width?: number;
+    height?: number;
+    radius?: number;
+    space?: number;
+};
+declare const Title: React.FC<TitleProps>;
+
+type BodyProps = {
+    loading?: boolean;
+    space?: boolean;
+    animation?: boolean;
+    style?: any;
+    className?: any;
+    children?: any;
+};
+/**
+ * 页面主体部分
+ * @param props
+ * @constructor
+ */
+declare const Body: React.FC<BodyProps>;
+
+type FooterProps = {
+    children?: any;
+};
+declare const Footer: React.FC<FooterProps>;
+
+type HeaderProps = {
+    right?: any;
+    left?: any;
+};
+declare const Header: React.FC<HeaderProps>;
+
+/**
+ * 侧边栏菜单组件属性
+ */
+type SiderProps = {
+    collapsed?: boolean;
+    menus?: any;
+    classNames?: any;
+    pathname?: string;
+    matchedRoutes?: string[];
+    onNavigate?: (path: string) => void;
+    onMenuClick?: (item: any) => void;
+    onLogoClick?: () => void;
+    collapsedLogo?: (isLight: boolean | undefined) => any;
+    unCollapsedLogo?: (isLight: boolean | undefined) => any;
+    menuBottomBtnIcon?: string;
+    menuBottomBtnText?: any;
+    onMenuBottomBtnClick?: () => void;
+    layout?: string;
+    theme?: string;
+};
+declare const Sider: React.FC<SiderProps>;
+
+/**
+ * 面包屑项目类型
+ */
+type BreadCrumbItem = {
+    title: string;
+    path?: string;
+    onClick?: () => void;
+};
+/**
+ * 布局组件属性
+ */
+type LayoutProps = {
+    ref?: React.Ref<SinKingRef>;
+    loading?: boolean;
+    breadCrumb?: boolean;
+    breadCrumbItems?: BreadCrumbItem[];
+    hideBreadCrumb?: boolean;
+    menuCollapsedWidth?: number;
+    menuUnCollapsedWidth?: number;
+    menus?: any;
+    menuClassNames?: any;
+    pathname?: string;
+    matchedRoutes?: any;
+    onNavigate?: (path: string) => void;
+    onMenuClick?: (item: any) => void;
+    onMenuBtnClick?: (state: boolean) => void;
+    footer?: any;
+    headerRight?: any;
+    headerLeft?: any;
+    headerHidden?: boolean;
+    headerFixed?: boolean;
+    onLogoClick?: () => void;
+    collapsedLogo?: (isLight: boolean) => any;
+    unCollapsedLogo?: (isLight: boolean) => any;
+    menuBottomBtnIcon?: any;
+    menuBottomBtnText?: any;
+    onMenuBottomBtnClick?: () => void;
+    layout?: string;
+    flowLayout?: boolean;
+    menuTheme?: string;
+    waterMark?: any;
+    children?: React.ReactNode;
+};
+/**
+ * 布局组件引用接口
+ * 用于父组件通过 ref 调用布局组件的方法
+ */
+interface SinKingRef {
+    collapsedMenu?: () => void;
+    unCollapsedMenu?: () => void;
+    toggleCollapsedMenu?: () => void;
+}
+
+declare const Layout: React.FC<LayoutProps>;
+
+/**
+ * ProTable 列配置接口
+ * 扩展自 Ant Design 的 TableColumnProps，添加了更多功能
+ */
+interface ProColumns<T = any> extends TableColumnProps<T> {
+    hideInSearch?: boolean;
+    hideInTable?: boolean;
+    valueType?: 'text' | 'time' | 'date' | 'dateTime' | 'dateRange' | 'dateTimeRange' | 'timeRange' | 'rate' | 'digit' | 'progress' | 'percent' | 'switch' | 'select';
+    copyable?: boolean;
+    tip?: string;
+    valueEnum?: Record<string, {
+        text: string;
+        color?: string;
+    }>;
+    transform?: (value: any) => any;
+    fieldProps?: any;
+    formItemProps?: any;
+    props?: any;
+}
+/**
+ * ProTable 搜索表单配置接口
+ */
+interface ProTableSearch<T = any> {
+    layout?: "horizontal" | "vertical";
+}
+/**
+ * ProTable 组件属性
+ */
+type ProTableProps = {
+    title?: any;
+    extra?: any;
+    extraRefreshBtn?: boolean;
+    rowKey?: string;
+    columns?: ProColumns[];
+    tableProps?: TableProps<any> & undefined;
+    search?: ProTableSearch | boolean;
+    pageHidden?: boolean;
+    pageInTable?: boolean;
+    paginationProps?: PaginationProps;
+    defaultPage?: number;
+    defaultPageSize?: number;
+    request?: (params: any, sort: any) => Promise<any>;
+    virtual?: boolean;
+    rowSelection?: {
+        selectedRowKeys?: React.Key[];
+        onChange?: (selectedRowKeys: React.Key[], selectedRows: any[]) => void;
+        onSelect?: (record: any, selected: boolean, selectedRows: any[]) => void;
+        onSelectAll?: (selected: boolean, selectedRows: any[], changeRows: any[]) => void;
+        onSelectInvert?: (selectedRowKeys: React.Key[]) => void;
+        align?: string;
+        columnWidth?: number;
+        fixed?: boolean;
+        leftExtra?: any;
+        rightExtra?: any;
+        hideExtra?: boolean;
+    } | false | true;
+    selectionAffix?: boolean;
+    paginationAffix?: boolean;
+};
+/**
+ * ProTable 组件引用接口
+ * 用于父组件通过 ref 调用表格的方法
+ */
+interface ProTableRef {
+    searchForm?: FormInstance | any;
+    refreshTableData?: () => void | any;
+    resetTableData?: () => void | any;
+    getTableData?: () => any;
+    getSelectedRowKeys?: () => React.Key[];
+    getSelectedRows?: () => any[];
+    setSelectedRowKeys?: (keys: React.Key[]) => void;
+    clearSelectedRows?: () => void;
+    invertSelectedRow?: () => void;
+    allSelectedRow?: () => void;
+}
+declare const ProTableComponent: React.ForwardRefExoticComponent<ProTableProps & React.RefAttributes<ProTableRef>>;
+
+/**
+ * ProModal 组件属性
+ */
+type ProModalProps = {
+    modalProps?: ModalProps & any & undefined;
+    title?: any;
+    onOk?: () => void | any;
+    onCancel?: () => void | any;
+    afterClose?: () => void | any;
+    okText?: string;
+    okType?: "primary" | "default" | "dashed" | "link" | "text";
+    width?: number | string;
+    afterOpenChange?: (open: boolean) => void | any;
+    children?: React.ReactNode;
+};
+/**
+ * ProModal 组件引用接口
+ * 用于父组件通过 ref 调用模态框的方法
+ */
+interface ProModalRef {
+    show: () => void;
+    hide: () => void;
+}
+declare const ProModal: React.ForwardRefExoticComponent<ProModalProps & React.RefAttributes<ProModalRef>>;
+
+export { Animate, Animation, type AnimationProps, _default as Antd, Body, type BreadCrumbItem$1 as BreadCrumbItem, type BreadCrumbProps, BreadCrumb as Breadcrumb, Footer, Header, Icon, IconFontProvider, type IconFontProviderProps, Layout, type LayoutProps, Message, Modal, Notification, type ProColumns, ProModal, type ProModalProps, type ProModalRef, ProTableComponent as ProTable, type ProTableProps, type ProTableRef, type ProTableSearch, Sider, type SinKingRef, Theme, type ThemeContextType, type ThemeProps, Title, type TitlePlacement, type TitleProps, type TitleSize, getAllIconNames, getAntdIconNames, getIconfontIconNames, getIconfontUrl, setIconfontUrl, useTheme };