@zhin.js/client 1.0.0 → 1.0.2

package/app/src/theme/index.ts

@@ -0,0 +1,92 @@
+// Theme configuration
+export const themes = {
+  light: {
+    background: '0 0% 100%',
+    foreground: '222.2 84% 4.9%',
+    card: '0 0% 100%',
+    'card-foreground': '222.2 84% 4.9%',
+    popover: '0 0% 100%',
+    'popover-foreground': '222.2 84% 4.9%',
+    primary: '221.2 83.2% 53.3%',
+    'primary-foreground': '210 40% 98%',
+    secondary: '210 40% 96.1%',
+    'secondary-foreground': '222.2 47.4% 11.2%',
+    muted: '210 40% 96.1%',
+    'muted-foreground': '215.4 16.3% 46.9%',
+    accent: '210 40% 96.1%',
+    'accent-foreground': '222.2 47.4% 11.2%',
+    destructive: '0 84.2% 60.2%',
+    'destructive-foreground': '210 40% 98%',
+    border: '214.3 31.8% 91.4%',
+    input: '214.3 31.8% 91.4%',
+    ring: '221.2 83.2% 53.3%',
+    radius: '0.5rem',
+  },
+  dark: {
+    background: '222.2 84% 4.9%',
+    foreground: '210 40% 98%',
+    card: '222.2 84% 4.9%',
+    'card-foreground': '210 40% 98%',
+    popover: '222.2 84% 4.9%',
+    'popover-foreground': '210 40% 98%',
+    primary: '217.2 91.2% 59.8%',
+    'primary-foreground': '222.2 47.4% 11.2%',
+    secondary: '217.2 32.6% 17.5%',
+    'secondary-foreground': '210 40% 98%',
+    muted: '217.2 32.6% 17.5%',
+    'muted-foreground': '215 20.2% 65.1%',
+    accent: '217.2 32.6% 17.5%',
+    'accent-foreground': '210 40% 98%',
+    destructive: '0 62.8% 30.6%',
+    'destructive-foreground': '210 40% 98%',
+    border: '217.2 32.6% 17.5%',
+    input: '217.2 32.6% 17.5%',
+    ring: '224.3 76.3% 48%',
+    radius: '0.5rem',
+  },
+} as const
+
+export type Theme = keyof typeof themes
+export type ThemeColors = typeof themes.light
+
+// Apply theme to document
+export function applyTheme(theme: Theme) {
+  const root = document.documentElement
+  const colors = themes[theme]
+
+  // Remove old theme class
+  root.classList.remove('light', 'dark')
+  // Add new theme class
+  root.classList.add(theme)
+
+  // Apply CSS variables
+  Object.entries(colors).forEach(([key, value]) => {
+    root.style.setProperty(`--${key}`, value)
+  })
+
+  // Save to localStorage
+  localStorage.setItem('theme', theme)
+}
+
+// Get current theme from localStorage or system preference
+export function getInitialTheme(): Theme {
+  const stored = localStorage.getItem('theme') as Theme | null
+  if (stored && (stored === 'light' || stored === 'dark')) {
+    return stored
+  }
+
+  // Check system preference
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark'
+  }
+
+  return 'light'
+}
+
+// Initialize theme on app load
+export function initializeTheme() {
+  const theme = getInitialTheme()
+  applyTheme(theme)
+  return theme
+}
+

package/app/tailwind.config.js

@@ -0,0 +1,70 @@
+/** @type {import('tailwindcss').Config} */
+const cwd = process.cwd();
+export default {
+    content: [
+        "./index.html",
+        './src/**/*.{js,ts,jsx,tsx,mdx}',
+        `${cwd}/**/radix-ui/**/*.{js,ts,jsx,tsx}`,
+        `${cwd}/**/@radix-ui/themes/**/*.{js,ts,jsx,tsx}`,
+    ],
+    theme: {
+        extend: {
+            colors: {
+                border: 'hsl(var(--border))',
+                input: 'hsl(var(--input))',
+                ring: 'hsl(var(--ring))',
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))',
+                primary: {
+                    DEFAULT: 'hsl(var(--primary))',
+                    foreground: 'hsl(var(--primary-foreground))',
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--secondary))',
+                    foreground: 'hsl(var(--secondary-foreground))',
+                },
+                destructive: {
+                    DEFAULT: 'hsl(var(--destructive))',
+                    foreground: 'hsl(var(--destructive-foreground))',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted))',
+                    foreground: 'hsl(var(--muted-foreground))',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent))',
+                    foreground: 'hsl(var(--accent-foreground))',
+                },
+                popover: {
+                    DEFAULT: 'hsl(var(--popover))',
+                    foreground: 'hsl(var(--popover-foreground))',
+                },
+                card: {
+                    DEFAULT: 'hsl(var(--card))',
+                    foreground: 'hsl(var(--card-foreground))',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+            },
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+            },
+        },
+    },
+    darkMode: "class",
+    plugins: [],
+}

package/app/tsconfig.json

@@ -1,6 +1,11 @@
 {
     "compilerOptions": {
         "baseUrl": ".",
+        "target": "ES2020",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "moduleResolution": "bundler",
+        "module": "ESNext",
+        "jsx": "react-jsx",
         "paths": {
             "@/*": ["src/*"],
             "@zhin.js/client": [

package/dist/index.js

@@ -1,4 +1,16 @@
-export * from './router.js';
-export * from './types.js';
-export * from './store.js';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+// Types
+export * from './types';
+// Redux Store
+export * from './store';
+// Router
+export * from './router';
+export * as Icons from 'lucide-react';
+// WebSocket
+export * from './websocket';
+export { useWebSocket } from './websocket/useWebSocket';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhin.js/client",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Zhin 客户端",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,18 +12,31 @@
     }
   },
   "dependencies": {
-    "pinia": "latest",
-    "primevue": "^4.3.7",
-    "primeicons": "latest",
-    "@primeuix/themes": "^1.2.3",
-    "vue-router": "latest"
+    "@reduxjs/toolkit": "^2.9.0",
+    "@tailwindcss/postcss": "^4.1.11",
+    "clsx": "^2.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-redux": "9.2.0",
+    "react-router": "7.0.0",
+    "redux-persist": "6.0.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "latest"
   },
   "files": [
     "lib",
     "src",
-    "global.d.ts",
     "app"
   ],
+  "devDependencies": {
+    "radix-ui": "^1.4.3",
+    "@radix-ui/themes": "^3.2.1",
+    "lucide-react": "^0.469.0",
+    "@types/events": "^3.0.3",
+    "@types/node": "^24.7.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1"
+  },
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf dist"

package/src/index.ts

@@ -1,3 +1,19 @@
-export * from './router.js';
-export * from './types.js';
-export * from './store.js';
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+// Types
+export * from './types'
+
+// Redux Store
+export * from './store'
+
+// Router
+export * from './router'
+export * as Icons from 'lucide-react'
+
+// WebSocket
+export * from './websocket'
+export { useWebSocket } from './websocket/useWebSocket'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/router/index.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react'
+import { createBrowserRouter, RouterProvider as ReactRouterProvider, RouteObject, Outlet} from 'react-router'
+import { store, addRoute, removeRoute, updateRoute, clearRoutes, RouteMenuItem, useSelector } from '../store'
+export { useOutlet, Outlet, Link, useNavigate, useParams } from 'react-router'
+
+
+
+
+export const addPage = (route: RouteMenuItem) => store.dispatch(addRoute(route))
+export const removePage = (path: string) => store.dispatch(removeRoute(path))
+export const updatePage = (path: string, route: RouteMenuItem) => store.dispatch(updateRoute({
+  path,
+  updates: route
+}))
+export const getPage = (path: string) => store.getState().route.routes.find(route => route.path === path)
+export const getAllPages = () => store.getState().route.routes
+export const clearPages = () => store.dispatch(clearRoutes())
+
+// 动态路由组件（从 Redux store 读取）
+export function DynamicRouter() {
+  const storeRoutes = useSelector((state) => state.route.routes)
+  console.log(storeRoutes)
+  const router = useMemo(() => {
+    // 递归转换路由（支持多层嵌套）
+    const convertRoute = (route: RouteMenuItem): RouteObject => {
+      const routeObj: RouteObject = {
+        path: route.path,
+        element: route.element,
+        Component: route.Component,
+      }
+      
+      // 递归处理子路由
+      if (route.children && route.children.length > 0) {
+        routeObj.children = route.children.map((child: RouteMenuItem) => convertRoute(child))
+      }
+      return routeObj
+    }
+    const routeObjects: RouteObject[] = storeRoutes.map(convertRoute)
+    const defaultRoutes: RouteObject[] = [
+      {
+        path: '/',
+        element: <Outlet />,
+        children: routeObjects,
+      },
+      {
+        path: '*',
+        element: <div>404 - Page Not Found</div>,
+      }
+    ]
+    
+    return createBrowserRouter(defaultRoutes)
+  }, [storeRoutes])
+
+  return <ReactRouterProvider router={router} />
+}

package/src/store/index.ts

@@ -0,0 +1,111 @@
+import {configureStore, Reducer, Action,combineReducers} from '@reduxjs/toolkit'
+import {
+    FLUSH,
+    PAUSE,
+    PERSIST,
+    persistReducer,
+    persistStore,
+    PURGE,
+    REGISTER,
+    REHYDRATE,
+    createTransform,
+  } from 'redux-persist';
+import storage from 'redux-persist/es/storage';
+import {reducers, Reducers } from './reducers';
+import { useDispatch as useReduxDispatch, TypedUseSelectorHook, useSelector as useReduxSelector } from 'react-redux';
+
+// 创建 transform 过滤不可序列化的字段
+const routeTransform = createTransform(
+    (inboundState: any) => {
+        const { routes, ...rest } = inboundState
+        return rest
+    },
+    (outboundState: any) => {
+        return { ...outboundState, routes: [] }
+    },
+    { whitelist: ['route'] }
+)
+
+const scriptTransform = createTransform(
+    (inboundState: any) => {
+        const { entries, loadedScripts, ...rest } = inboundState
+        return rest
+    },
+    (outboundState: any) => {
+        return { ...outboundState, entries: [], loadedScripts: [] }
+    },
+    { whitelist: ['script'] }
+)
+
+const persistConfig: any = {
+    key: 'root',
+    storage: storage,
+    transforms: [routeTransform, scriptTransform],
+}
+const persistedReducer = persistReducer(persistConfig, combineReducers(reducers)) as any
+export const store = configureStore<Reducers>({
+    reducer:persistedReducer as Reducer,
+    middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [
+          FLUSH, 
+          REHYDRATE, 
+          PAUSE, 
+          PERSIST, 
+          PURGE, 
+          REGISTER,
+          // 忽略包含 React 组件的路由 actions
+          'route/addRoute',
+          'route/updateRoute',
+          'route/setRoutes',
+        ],
+        // 忽略 state 中的 routes 字段
+        ignoredPaths: ['route.routes'],
+      },
+    }),
+})
+export const persistor = persistStore(store);
+
+// 将 store 挂载到 window 以供 DynamicRouter 使用
+if (typeof window !== 'undefined') {
+    // @ts-ignore
+    window.__REDUX_STORE__ = store
+}
+export function addReducer<T,A extends Action>(name:keyof Reducers,reducer:Reducer<T,A>) {
+    reducers[name] = reducer
+    const newPersistedReducer = persistReducer(persistConfig, combineReducers(reducers)) as any
+    store.replaceReducer(newPersistedReducer as Reducer)
+}
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
+export const useDispatch:()=>AppDispatch = useReduxDispatch
+export const useSelector:TypedUseSelectorHook<RootState> = useReduxSelector
+
+// 导出 UI actions
+export { 
+    toggleSidebar, 
+    setSidebarOpen, 
+    setActiveMenu
+} from './reducers/ui'
+
+// 导出 Route actions
+export { 
+    addRoute,
+    removeRoute,
+    updateRoute,
+    setRoutes,
+    clearRoutes
+} from './reducers/route'
+
+// 导出 Script actions 和 thunks
+export { 
+    syncEntries,
+    addEntry,
+    removeEntry,
+    loadScript,
+    loadScripts,
+    unloadScript
+} from './reducers/script'
+
+export type { RouteMenuItem } from './reducers/route'

package/src/store/reducers/index.ts

@@ -0,0 +1,16 @@
+import { Reducer } from "@reduxjs/toolkit"
+import ui from "./ui"
+import route from "./route"
+import script from "./script"
+
+export interface Reducers {
+    ui: ReturnType<typeof ui>
+    route: ReturnType<typeof route>
+    script: ReturnType<typeof script>
+}
+
+export const reducers: Record<keyof Reducers, Reducer<any, any>> = {
+    ui,
+    route,
+    script
+}

package/src/store/reducers/route.ts

@@ -0,0 +1,122 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { ComponentType, ReactNode } from "react"
+
+// 路由菜单项接口
+export interface RouteMenuItem {
+    key: string
+    path: string
+    title: string
+    index?: boolean
+    icon?: ReactNode
+    element?: ReactNode
+    Component?: ComponentType
+    children?: RouteMenuItem[]
+    meta?: {
+        hideInMenu?: boolean
+        requiresAuth?: boolean
+        order?: number
+    }
+}
+
+export interface RouteState {
+    routes: RouteMenuItem[]
+}
+
+const initialState: RouteState = {
+    routes: []
+}
+
+// 辅助函数：查找最佳父路由
+const findBestParent = (routes: RouteMenuItem[], fullPath: string): RouteMenuItem | null => {
+    const segments = fullPath.split('/').filter(Boolean)
+    
+    for (let i = segments.length - 1; i > 0; i--) {
+        const parentPath = '/' + segments.slice(0, i).join('/')
+        const parent = routes.find(r => r.path === parentPath)
+        if (parent) return parent
+    }
+    
+    return routes.find(r=>r.path==='/')||null
+}
+
+// 辅助函数：计算相对路径
+const calculateRelativePath = (parentPath: string, fullPath: string): string => {
+    if (parentPath === '/') return fullPath
+    return fullPath.replace(parentPath + '/', '')
+}
+
+export const routeSlice = createSlice({
+    name: 'route',
+    initialState,
+    reducers: {
+        addRoute: (state, action: PayloadAction<RouteMenuItem>) => {
+            const route = action.payload
+            const parent = findBestParent(state.routes, route.path)
+            
+            if (parent) {
+                if (!parent.children) parent.children = []
+                const relativePath = calculateRelativePath(parent.path, route.path)
+                parent.children.push({ ...route, path: relativePath })
+            } else {
+                state.routes.push(route)
+            }
+            
+            state.routes.sort((a, b) => (a.meta?.order || 999) - (b.meta?.order || 999))
+        },
+        
+        removeRoute: (state, action: PayloadAction<string>) => {
+            const path = action.payload
+            
+            const removeFromArray = (routes: RouteMenuItem[]): boolean => {
+                const index = routes.findIndex(r => r.path === path)
+                if (index >= 0) {
+                    routes.splice(index, 1)
+                    return true
+                }
+                
+                for (const route of routes) {
+                    if (route.children && removeFromArray(route.children)) {
+                        return true
+                    }
+                }
+                return false
+            }
+            
+            removeFromArray(state.routes)
+        },
+        
+        updateRoute: (state, action: PayloadAction<{ path: string; updates: Partial<RouteMenuItem> }>) => {
+            const { path, updates } = action.payload
+            
+            const updateInArray = (routes: RouteMenuItem[]): boolean => {
+                const index = routes.findIndex(r => r.path === path)
+                if (index >= 0) {
+                    routes[index] = { ...routes[index], ...updates }
+                    return true
+                }
+                
+                for (const route of routes) {
+                    if (route.children && updateInArray(route.children)) {
+                        return true
+                    }
+                }
+                return false
+            }
+            
+            updateInArray(state.routes)
+        },
+        
+        setRoutes: (state, action: PayloadAction<RouteMenuItem[]>) => {
+            state.routes = action.payload
+            state.routes.sort((a, b) => (a.meta?.order || 999) - (b.meta?.order || 999))
+        },
+        
+        clearRoutes: (state) => {
+            state.routes = []
+        }
+    }
+})
+
+export const { addRoute, removeRoute, updateRoute, setRoutes, clearRoutes } = routeSlice.actions
+export default routeSlice.reducer
+

package/src/store/reducers/script.ts

@@ -0,0 +1,103 @@
+import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"
+
+export interface ScriptState {
+    entries: string[]
+    loadedScripts: string[]
+}
+
+const initialState: ScriptState = {
+    entries: [],
+    loadedScripts: []
+}
+
+// AsyncThunk: 加载单个脚本
+export const loadScript = createAsyncThunk(
+    'script/loadScript',
+    async (src: string) => {
+        return new Promise<string>((resolve, reject) => {
+            const script = document.createElement('script')
+            script.type = 'module'
+            script.src = src
+            script.dataset.dynamicEntry = 'true'
+            
+            script.onload = () => resolve(src)
+            script.onerror = (error) => {
+                console.error('[Script] Load failed:', src)
+                reject(error)
+            }
+
+            document.body.appendChild(script)
+        })
+    }
+)
+
+// AsyncThunk: 批量加载脚本
+export const loadScripts = createAsyncThunk(
+    'script/loadScripts',
+    async (entries: string[], { dispatch }) => {
+        const results = await Promise.allSettled(
+            entries.map(entry => dispatch(loadScript(entry)).unwrap())
+        )
+        
+        return results
+            .filter((r): r is PromiseFulfilledResult<string> => r.status === 'fulfilled')
+            .map(r => r.value)
+    }
+)
+
+// AsyncThunk: 卸载脚本
+export const unloadScript = createAsyncThunk(
+    'script/unloadScript',
+    async (src: string) => {
+        const scripts = document.querySelectorAll(`script[src="${src}"][data-dynamic-entry="true"]`)
+        scripts.forEach(script => script.remove())
+        return src
+    }
+)
+
+export const scriptSlice = createSlice({
+    name: 'script',
+    initialState,
+    reducers: {
+        syncEntries: (state, action: PayloadAction<string[]>) => {
+            state.entries = action.payload
+        },
+        
+        addEntry: (state, action: PayloadAction<string>) => {
+            if (!state.entries.includes(action.payload)) {
+                state.entries.push(action.payload)
+            }
+        },
+        
+        removeEntry: (state, action: PayloadAction<string>) => {
+            state.entries = state.entries.filter(e => e !== action.payload)
+            state.loadedScripts = state.loadedScripts.filter(s => s !== action.payload)
+        }
+    },
+    extraReducers: (builder) => {
+        // loadScript 成功
+        builder.addCase(loadScript.fulfilled, (state, action) => {
+            if (!state.loadedScripts.includes(action.payload)) {
+                state.loadedScripts.push(action.payload)
+            }
+        })
+        
+        // loadScripts 成功
+        builder.addCase(loadScripts.fulfilled, (state, action) => {
+            action.payload.forEach(src => {
+                if (!state.loadedScripts.includes(src)) {
+                    state.loadedScripts.push(src)
+                }
+            })
+        })
+        
+        // unloadScript 成功
+        builder.addCase(unloadScript.fulfilled, (state, action) => {
+            state.loadedScripts = state.loadedScripts.filter(s => s !== action.payload)
+        })
+    }
+})
+
+export const { syncEntries, addEntry, removeEntry } = scriptSlice.actions
+export default scriptSlice.reducer
+