@particle-network/ui-react 0.4.0-beta.0 → 0.4.0-beta.2

package/dist/components/UXThemeSwitch/index.d.ts

@@ -1,3 +1,5 @@
 export * from './theme-data';
 export * from './theme-switch';
+export * from './use-color-scheme';
 export * from './use-theme';
+export * from './use-theme-color';

package/dist/components/UXThemeSwitch/index.js

@@ -1,3 +1,5 @@
 export * from "./theme-data.js";
 export * from "./theme-switch.js";
+export * from "./use-color-scheme.js";
 export * from "./use-theme.js";
+export * from "./use-theme-color.js";

package/dist/components/UXThemeSwitch/theme-data.d.ts

@@ -1,9 +1,10 @@
-export type ThemeKey = 'ux-purple-gold-dark' | 'ux-purple-gold-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-green-red-soft-dark' | 'ux-green-red-soft-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark';
+export type ThemeId = 'ux-purple-gold-dark' | 'ux-purple-gold-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-green-red-soft-dark' | 'ux-green-red-soft-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark';
+export type ColorScheme = 'dark' | 'light';
 export interface ThemeItemType {
-    key: ThemeKey;
+    id: ThemeId;
     zhName: string;
     enName: string;
-    colorScheme: 'dark' | 'light';
+    colorScheme: ColorScheme;
     colorVariables: {
         foreground: string;
         secondary: string;
@@ -25,4 +26,4 @@ export interface ThemeItemType {
     };
 }
 export declare const themeData: ThemeItemType[];
-export declare const themeKeys: ThemeKey[];
+export declare const themeKeys: ThemeId[];

package/dist/components/UXThemeSwitch/theme-data.js

@@ -1,6 +1,6 @@
 const themeData = [
     {
-        key: 'ux-purple-gold-dark',
+        id: 'ux-purple-gold-dark',
         zhName: 'UX 紫金 Dark',
         enName: 'UX Purple/Gold Dark',
         colorScheme: 'dark',
@@ -25,7 +25,7 @@ const themeData = [
         }
     },
     {
-        key: 'ux-purple-gold-light',
+        id: 'ux-purple-gold-light',
         zhName: 'UX 紫金 Light',
         enName: 'UX Purple/Gold Light',
         colorScheme: 'light',
@@ -50,7 +50,7 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-dark',
+        id: 'ux-green-red-dark',
         zhName: 'UX 绿红 Dark',
         enName: 'UX Green/Red Dark',
         colorScheme: 'dark',
@@ -75,7 +75,7 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-light',
+        id: 'ux-green-red-light',
         zhName: 'UX 绿红 Light',
         enName: 'UX Green/Red Light',
         colorScheme: 'light',
@@ -100,7 +100,7 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-soft-dark',
+        id: 'ux-green-red-soft-dark',
         zhName: 'UX 柔和 Dark',
         enName: 'UX Soft Dark',
         colorScheme: 'dark',
@@ -125,7 +125,7 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-soft-light',
+        id: 'ux-green-red-soft-light',
         zhName: 'UX 柔和 Light',
         enName: 'UX Soft Light',
         colorScheme: 'light',
@@ -150,7 +150,7 @@ const themeData = [
         }
     },
     {
-        key: 'gmgn-dark',
+        id: 'gmgn-dark',
         zhName: 'GMGN',
         enName: 'GMGN',
         colorScheme: 'dark',
@@ -175,7 +175,7 @@ const themeData = [
         }
     },
     {
-        key: 'axiom-dark',
+        id: 'axiom-dark',
         zhName: 'AXIOM',
         enName: 'AXIOM',
         colorScheme: 'dark',
@@ -200,7 +200,7 @@ const themeData = [
         }
     },
     {
-        key: 'hyperliquid-dark',
+        id: 'hyperliquid-dark',
         zhName: 'Hyperliquid',
         enName: 'Hyperliquid',
         colorScheme: 'dark',
@@ -225,7 +225,7 @@ const themeData = [
         }
     },
     {
-        key: 'phantom-dark',
+        id: 'phantom-dark',
         zhName: 'Phantom',
         enName: 'Phantom',
         colorScheme: 'dark',
@@ -250,7 +250,7 @@ const themeData = [
         }
     },
     {
-        key: 'binance-dark',
+        id: 'binance-dark',
         zhName: 'Binance',
         enName: 'Binance',
         colorScheme: 'dark',
@@ -275,7 +275,7 @@ const themeData = [
         }
     },
     {
-        key: 'bullx-dark',
+        id: 'bullx-dark',
         zhName: "Bullx's",
         enName: "Bullx's",
         colorScheme: 'dark',
@@ -300,5 +300,5 @@ const themeData = [
         }
     }
 ];
-const themeKeys = themeData.map((theme)=>theme.key);
+const themeKeys = themeData.map((theme)=>theme.id);
 export { themeData, themeKeys };

package/dist/components/UXThemeSwitch/theme-item.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ThemeItemType } from './theme-data';
-export interface ThemeItemProps extends Pick<ThemeItemType, 'zhName' | 'enName' | 'colorVariables'> {
+export interface ThemeItemProps extends ThemeItemType {
     isSelected: boolean;
     onClick: () => void;
 }

package/dist/components/UXThemeSwitch/theme-item.js

@@ -1,20 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
+import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
-const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
+const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
     const lang = useLang();
     return /*#__PURE__*/ jsxs(VStack, {
         center: true,
-        className: "cursor-pointer hover:scale-105 transition-all duration-300",
+        className: cn('cursor-pointer hover:scale-105 transition-all duration-300', id),
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: "rounded-small border-1.5",
-                style: {
-                    borderColor: isSelected ? colorVariables.primary : 'transparent'
-                },
+                className: cn('rounded-small border-1.5', isSelected ? 'border-primary' : 'border-transparent'),
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
                     width: "180",
@@ -29,7 +27,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "116.19",
                             height: "67",
                             rx: "5",
-                            fill: colorVariables.primary
+                            fill: "currentColor",
+                            className: "text-primary"
                         }),
                         /*#__PURE__*/ jsx("mask", {
                             id: "mask0_40928_218196",
@@ -47,7 +46,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                                 width: "116.19",
                                 height: "67",
                                 rx: "5",
-                                fill: colorVariables.background
+                                fill: "currentColor",
+                                className: "text-background"
                             })
                         }),
                         /*#__PURE__*/ jsx("g", {
@@ -58,7 +58,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                                 width: "116.19",
                                 height: "67",
                                 rx: "6",
-                                fill: colorVariables.background
+                                fill: "currentColor",
+                                className: "text-background"
                             })
                         }),
                         /*#__PURE__*/ jsx("rect", {
@@ -66,7 +67,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             y: "31",
                             width: "100",
                             height: "1",
-                            fill: colorVariables.divider
+                            fill: "currentColor",
+                            className: "text-divider"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -74,7 +76,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "30.0917",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.foreground
+                            fill: "currentColor",
+                            className: "text-foreground"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "54.082",
@@ -82,7 +85,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "19.5596",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.bullish
+                            fill: "currentColor",
+                            className: "text-bullish"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "75.8994",
@@ -90,7 +94,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "19.5596",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.bearish
+                            fill: "currentColor",
+                            className: "text-bearish"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "86.4316",
@@ -98,7 +103,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "6.01835",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.secondary
+                            fill: "currentColor",
+                            className: "text-secondary"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "94.707",
@@ -106,7 +112,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "6.01835",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.secondary
+                            fill: "currentColor",
+                            className: "text-secondary"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "102.981",
@@ -114,7 +121,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "6.01835",
                             height: "6.01835",
                             rx: "3.00917",
-                            fill: colorVariables.secondary
+                            fill: "currentColor",
+                            className: "text-secondary"
                         }),
                         /*#__PURE__*/ jsx("rect", {
                             x: "27",
@@ -122,7 +130,8 @@ const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
                             width: "22.5688",
                             height: "22.5688",
                             rx: "11.2844",
-                            fill: colorVariables.primary
+                            fill: "currentColor",
+                            className: "text-primary"
                         })
                     ]
                 })

package/dist/components/UXThemeSwitch/theme-switch.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+import type { DrawerProps } from '@heroui/drawer';
+export type UXThemeSwitchDrawerProps = Omit<DrawerProps, 'children'>;
+export declare const UXThemeSwitchDrawer: React.FC<UXThemeSwitchDrawerProps>;
 export interface UXThemeSwitchProps {
     children?: (onOpen: () => void) => React.ReactNode;
 }

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -2,22 +2,22 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
 import { useDisclosure } from "@heroui/use-disclosure";
-import ThemeSwitchIcon from "@particle-network/icons/web/ThemeSwitchIcon";
+import { ThemeSwitchIcon } from "@particle-network/icons/web";
 import { useI18n } from "../../hooks/index.js";
 import { Flex, HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";
 import { UXDivider } from "../UXDivider/index.js";
 import { UXInput } from "../UXInput/index.js";
+import { UXSpinner } from "../UXSpinner/index.js";
 import { themeData } from "./theme-data.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
-const UXThemeSwitch = ({ children })=>{
+const UXThemeSwitchDrawer = ({ isOpen, onClose, onOpenChange, ...props })=>{
     const i18n = useI18n();
-    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
-    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink } = useTheme();
+    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink, fontName, fontLoadStatus, fontLoadError } = useTheme();
     const handleOpenChange = (_isOpen)=>{
-        onOpenChange();
+        onOpenChange?.(_isOpen);
         if (!_isOpen) {
             setSelectedTheme(savedTheme);
             setSelectedFontLink(savedFontLink);
@@ -26,12 +26,106 @@ const UXThemeSwitch = ({ children })=>{
     const handleApplyTheme = ()=>{
         setSavedTheme(selectedTheme);
         setSavedFontLink(selectedFontLink);
-        onClose();
+        onClose?.();
     };
     const handleReset = ()=>{
         setSelectedTheme(savedTheme);
         setSelectedFontLink(savedFontLink);
     };
+    return /*#__PURE__*/ jsx(Drawer, {
+        isOpen: isOpen,
+        backdrop: "transparent",
+        onOpenChange: handleOpenChange,
+        ...props,
+        children: /*#__PURE__*/ jsxs(DrawerContent, {
+            children: [
+                /*#__PURE__*/ jsx(DrawerHeader, {
+                    className: "flex flex-col gap-1",
+                    children: i18n.theme.title
+                }),
+                /*#__PURE__*/ jsxs(DrawerBody, {
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            wrap: true,
+                            justify: "between",
+                            className: "gap-y-5",
+                            children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
+                                    isSelected: selectedTheme.id === theme.id,
+                                    onClick: ()=>setSelectedTheme(theme),
+                                    ...theme
+                                }, theme.id))
+                        }),
+                        /*#__PURE__*/ jsx(UXDivider, {
+                            className: "my-lg"
+                        }),
+                        /*#__PURE__*/ jsxs(VStack, {
+                            gap: "md",
+                            children: [
+                                /*#__PURE__*/ jsx(Text, {
+                                    body1Bold: true,
+                                    children: i18n.theme.font.title
+                                }),
+                                /*#__PURE__*/ jsx(UXInput, {
+                                    isClearable: true,
+                                    startContent: 'loading' === fontLoadStatus && /*#__PURE__*/ jsx(UXSpinner, {
+                                        size: 18
+                                    }),
+                                    isInvalid: 'error' === fontLoadStatus,
+                                    className: "w-full",
+                                    placeholder: i18n.theme.font.placeholder,
+                                    value: selectedFontLink,
+                                    description: /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            'success' === fontLoadStatus && /*#__PURE__*/ jsxs(Text, {
+                                                body3Bold: true,
+                                                color: "success",
+                                                children: [
+                                                    i18n.theme.font.success,
+                                                    fontName
+                                                ]
+                                            }),
+                                            'error' === fontLoadStatus && fontLoadError && /*#__PURE__*/ jsx(Text, {
+                                                body3Bold: true,
+                                                color: "danger",
+                                                children: fontLoadError
+                                            })
+                                        ]
+                                    }),
+                                    onValueChange: setSelectedFontLink
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(DrawerFooter, {
+                    className: "mb-8",
+                    children: /*#__PURE__*/ jsxs(HStack, {
+                        fullWidth: true,
+                        gap: "lg",
+                        children: [
+                            /*#__PURE__*/ jsx(UXButton, {
+                                fullWidth: true,
+                                size: "lg",
+                                onPress: handleReset,
+                                children: i18n.theme.reset
+                            }),
+                            /*#__PURE__*/ jsx(UXButton, {
+                                fullWidth: true,
+                                isDisabled: 'error' === fontLoadStatus,
+                                size: "lg",
+                                color: "primary",
+                                onPress: handleApplyTheme,
+                                children: i18n.theme.apply
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+const UXThemeSwitch = ({ children })=>{
+    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
     const renderChildren = ()=>{
         if (children) return children(onOpen);
         return /*#__PURE__*/ jsx(UXButton, {
@@ -44,78 +138,12 @@ const UXThemeSwitch = ({ children })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             renderChildren(),
-            /*#__PURE__*/ jsx(Drawer, {
+            /*#__PURE__*/ jsx(UXThemeSwitchDrawer, {
                 isOpen: isOpen,
-                backdrop: "transparent",
-                onOpenChange: handleOpenChange,
-                children: /*#__PURE__*/ jsxs(DrawerContent, {
-                    children: [
-                        /*#__PURE__*/ jsx(DrawerHeader, {
-                            className: "flex flex-col gap-1",
-                            children: i18n.theme.title
-                        }),
-                        /*#__PURE__*/ jsxs(DrawerBody, {
-                            children: [
-                                /*#__PURE__*/ jsx(Flex, {
-                                    wrap: true,
-                                    justify: "between",
-                                    className: "gap-y-5",
-                                    children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
-                                            isSelected: selectedTheme.key === theme.key,
-                                            zhName: theme.zhName,
-                                            enName: theme.enName,
-                                            colorVariables: theme.colorVariables,
-                                            onClick: ()=>setSelectedTheme(theme)
-                                        }, theme.key))
-                                }),
-                                /*#__PURE__*/ jsx(UXDivider, {
-                                    className: "my-lg"
-                                }),
-                                /*#__PURE__*/ jsxs(VStack, {
-                                    gap: "md",
-                                    className: "w-full",
-                                    children: [
-                                        /*#__PURE__*/ jsx(Text, {
-                                            className: "text-sm font-medium",
-                                            children: i18n.theme.font.title
-                                        }),
-                                        /*#__PURE__*/ jsx(UXInput, {
-                                            isClearable: true,
-                                            className: "w-full",
-                                            placeholder: i18n.theme.font.placeholder,
-                                            value: selectedFontLink,
-                                            onValueChange: setSelectedFontLink
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(DrawerFooter, {
-                            className: "mb-8",
-                            children: /*#__PURE__*/ jsxs(HStack, {
-                                fullWidth: true,
-                                gap: "lg",
-                                children: [
-                                    /*#__PURE__*/ jsx(UXButton, {
-                                        fullWidth: true,
-                                        size: "lg",
-                                        onPress: handleReset,
-                                        children: i18n.theme.reset
-                                    }),
-                                    /*#__PURE__*/ jsx(UXButton, {
-                                        fullWidth: true,
-                                        size: "lg",
-                                        color: "primary",
-                                        onPress: handleApplyTheme,
-                                        children: i18n.theme.apply
-                                    })
-                                ]
-                            })
-                        })
-                    ]
-                })
+                onClose: onClose,
+                onOpenChange: onOpenChange
             })
         ]
     });
 };
-export { UXThemeSwitch };
+export { UXThemeSwitch, UXThemeSwitchDrawer };

package/dist/components/UXThemeSwitch/use-color-scheme.d.ts

@@ -0,0 +1,5 @@
+export declare const useColorScheme: () => {
+    colorScheme: import("./theme-data").ColorScheme;
+    isDark: boolean;
+    isLight: boolean;
+};

package/dist/components/UXThemeSwitch/use-color-scheme.js

@@ -0,0 +1,11 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useColorScheme = ()=>{
+    const { selectedTheme } = useThemeStore();
+    const { colorScheme } = selectedTheme;
+    return {
+        colorScheme,
+        isDark: 'dark' === colorScheme,
+        isLight: 'light' === colorScheme
+    };
+};
+export { useColorScheme };

package/dist/components/UXThemeSwitch/use-theme-color.d.ts

@@ -0,0 +1,19 @@
+export declare const useThemeColor: () => {
+    foreground: string;
+    secondary: string;
+    tertiary: string;
+    primary: string;
+    success: string;
+    danger: string;
+    alert: string;
+    warning: string;
+    gold: string;
+    background: string;
+    'background-200': string;
+    'background-300': string;
+    'background-400': string;
+    overlay: string;
+    divider: string;
+    bullish: string;
+    bearish: string;
+};

package/dist/components/UXThemeSwitch/use-theme-color.js

@@ -0,0 +1,6 @@
+import { useThemeStore } from "./use-theme-store.js";
+const useThemeColor = ()=>{
+    const { selectedTheme } = useThemeStore();
+    return selectedTheme.colorVariables;
+};
+export { useThemeColor };

package/dist/components/UXThemeSwitch/use-theme-store.d.ts

@@ -1,4 +1,5 @@
 import { type ThemeItemType } from './theme-data';
+export type FontLoadStatus = 'idle' | 'loading' | 'success' | 'error';
 interface State {
     /**
      * 临时选中的 theme（用于预览）
@@ -16,12 +17,27 @@ interface State {
      * 保存的字体链接
      */
     savedFontLink: string;
+    /**
+     * 应用的字体名称
+     */
+    fontName: string;
+    /**
+     * 字体加载状态
+     */
+    fontLoadStatus: FontLoadStatus;
+    /**
+     * 字体加载错误信息
+     */
+    fontLoadError: string | null;
 }
 interface Actions {
     setSelectedTheme: (theme: ThemeItemType) => void;
     setSavedTheme: (theme: ThemeItemType) => void;
     setSelectedFontLink: (link: string) => void;
     setSavedFontLink: (link: string) => void;
+    setFontLoadStatus: (status: FontLoadStatus) => void;
+    setFontLoadError: (error: string | null) => void;
+    setFontName: (name: string) => void;
 }
 type ThemeStore = State & Actions;
 export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeStore>, "setState" | "persist"> & {

package/dist/components/UXThemeSwitch/use-theme-store.js

@@ -6,6 +6,9 @@ const useThemeStore = create()(persist((set)=>({
         savedTheme: themeData["0"],
         selectedFontLink: '',
         savedFontLink: '',
+        fontName: '',
+        fontLoadStatus: 'idle',
+        fontLoadError: null,
         setSelectedTheme: (theme)=>set({
                 selectedTheme: theme
             }),
@@ -17,9 +20,25 @@ const useThemeStore = create()(persist((set)=>({
             }),
         setSavedFontLink: (link)=>set({
                 savedFontLink: link
+            }),
+        setFontLoadStatus: (status)=>set({
+                fontLoadStatus: status
+            }),
+        setFontLoadError: (error)=>set({
+                fontLoadError: error
+            }),
+        setFontName: (name)=>set({
+                fontName: name
             })
     }), {
     name: 'ux-theme',
-    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {})
+    storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
+    partialize: (state)=>({
+            selectedTheme: state.selectedTheme,
+            savedTheme: state.savedTheme,
+            fontName: state.fontName,
+            selectedFontLink: state.selectedFontLink,
+            savedFontLink: state.savedFontLink
+        })
 }));
 export { useThemeStore };

package/dist/components/UXThemeSwitch/use-theme.d.ts

@@ -1,4 +1,5 @@
 import { type ThemeItemType } from './theme-data';
+import { type FontLoadStatus } from './use-theme-store';
 /**
  * UX 主题管理 Hook
  */
@@ -11,4 +12,7 @@ export declare const useTheme: () => {
     setSelectedFontLink: (link: string) => void;
     savedFontLink: string;
     setSavedFontLink: (link: string) => void;
+    fontLoadStatus: FontLoadStatus;
+    fontLoadError: string | null;
+    fontName: string;
 };

package/dist/components/UXThemeSwitch/use-theme.js

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useDebounceFn } from "ahooks";
 import { themeKeys } from "./theme-data.js";
 import { useThemeStore } from "./use-theme-store.js";
 const DEFAULT_FONT_FAMILY = 'ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji';
@@ -10,7 +11,7 @@ const applyTheme = (theme)=>{
     themeKeys.forEach((key)=>{
         root.classList.remove(key);
     });
-    root.classList.add(theme.key);
+    root.classList.add(theme.id);
 };
 const extractFontFamilyFromLink = (link)=>{
     if (!link) return null;
@@ -24,38 +25,70 @@ const extractFontFamilyFromLink = (link)=>{
         return null;
     }
 };
-const loadGoogleFont = (link)=>{
+const loadGoogleFont = (link, options)=>{
+    const { setFontLoadStatus, setFontLoadError, setFontName } = options;
     if ('undefined' == typeof window) return;
     const existingLink = document.getElementById('ux-google-font-link');
     if (existingLink) existingLink.remove();
     if (!link?.trim()) {
         document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
         document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+        setFontLoadStatus('idle');
+        setFontLoadError(null);
+        setFontName('');
         return;
     }
+    setFontLoadStatus('loading');
+    setFontLoadError(null);
     const linkElement = document.createElement('link');
     linkElement.id = 'ux-google-font-link';
     linkElement.rel = 'stylesheet';
     linkElement.href = link;
+    linkElement.onload = ()=>{
+        setFontLoadStatus('success');
+        setFontLoadError(null);
+        const fontFamily = extractFontFamilyFromLink(link);
+        if (fontFamily) {
+            document.documentElement.style.setProperty('--ux-font-family', `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`);
+            document.body.style.fontFamily = `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`;
+            setFontName(fontFamily);
+        }
+    };
+    linkElement.onerror = ()=>{
+        const errorMessage = '字体加载失败，请检查链接是否正确';
+        setFontLoadStatus('error');
+        setFontLoadError(errorMessage);
+        setFontName('');
+        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
+        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+    };
     document.head.appendChild(linkElement);
-    const fontFamily = extractFontFamilyFromLink(link);
-    if (fontFamily) {
-        document.documentElement.style.setProperty('--ux-font-family', `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`);
-        document.body.style.fontFamily = `"${fontFamily}", ${DEFAULT_FONT_FAMILY}`;
-    }
 };
 const useTheme = ()=>{
     const selectedTheme = useThemeStore((state)=>state.selectedTheme);
     const savedTheme = useThemeStore((state)=>state.savedTheme);
     const selectedFontLink = useThemeStore((state)=>state.selectedFontLink);
     const savedFontLink = useThemeStore((state)=>state.savedFontLink);
+    const fontName = useThemeStore((state)=>state.fontName);
+    const fontLoadStatus = useThemeStore((state)=>state.fontLoadStatus);
+    const fontLoadError = useThemeStore((state)=>state.fontLoadError);
     const storeSetSelectedTheme = useThemeStore((state)=>state.setSelectedTheme);
     const storeSetSavedTheme = useThemeStore((state)=>state.setSavedTheme);
     const storeSetSelectedFontLink = useThemeStore((state)=>state.setSelectedFontLink);
     const storeSetSavedFontLink = useThemeStore((state)=>state.setSavedFontLink);
+    const storeSetFontLoadStatus = useThemeStore((state)=>state.setFontLoadStatus);
+    const storeSetFontLoadError = useThemeStore((state)=>state.setFontLoadError);
+    const storeSetFontName = useThemeStore((state)=>state.setFontName);
+    const { run: debouncedLoadGoogleFont } = useDebounceFn((link)=>loadGoogleFont(link, {
+            setFontLoadStatus: storeSetFontLoadStatus,
+            setFontLoadError: storeSetFontLoadError,
+            setFontName: storeSetFontName
+        }), {
+        wait: 500
+    });
     useEffect(()=>{
         applyTheme(savedTheme);
-        loadGoogleFont(savedFontLink);
+        debouncedLoadGoogleFont(savedFontLink);
     }, [
         savedTheme,
         savedFontLink
@@ -70,11 +103,11 @@ const useTheme = ()=>{
     };
     const setSelectedFontLink = (link)=>{
         storeSetSelectedFontLink(link);
-        loadGoogleFont(link);
+        debouncedLoadGoogleFont(link);
     };
     const setSavedFontLink = (link)=>{
         storeSetSavedFontLink(link);
-        loadGoogleFont(link);
+        debouncedLoadGoogleFont(link);
     };
     return {
         selectedTheme,
@@ -84,7 +117,10 @@ const useTheme = ()=>{
         selectedFontLink,
         setSelectedFontLink,
         savedFontLink,
-        setSavedFontLink
+        setSavedFontLink,
+        fontLoadStatus,
+        fontLoadError,
+        fontName
     };
 };
 export { useTheme };

package/dist/hooks/useI18n.d.ts

@@ -15,6 +15,9 @@ export declare const useI18n: () => {
         font: {
             title: string;
             placeholder: string;
+            loading: string;
+            success: string;
+            error: string;
         };
     };
 };

package/dist/hooks/useI18n.js

@@ -15,7 +15,10 @@ const en = {
         apply: 'Apply Theme',
         font: {
             title: 'Custom Font',
-            placeholder: 'Enter Google Fonts link'
+            placeholder: 'Enter Google Fonts URL or custom font URL',
+            loading: 'Loading font...',
+            success: 'Font loaded: ',
+            error: 'Failed to load font'
         }
     }
 };
@@ -35,7 +38,10 @@ const zh = {
         apply: '应用主题',
         font: {
             title: '自定义字体',
-            placeholder: '输入 Google Fonts 链接'
+            placeholder: '输入 Google Fonts 或自定义字体链接',
+            loading: '正在加载字体...',
+            success: '字体加载成功：',
+            error: '字体加载失败'
         }
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.4.0-beta.0",
+  "version": "0.4.0-beta.2",
   "type": "module",
   "exports": {
     ".": {
@@ -50,8 +50,8 @@
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.3.1",
-    "@particle-network/ui-shared": "0.2.0"
+    "@particle-network/icons": "0.4.0-beta.0",
+    "@particle-network/ui-shared": "0.3.0-beta.0"
   },
   "scripts": {
     "build": "rslib build",