@zhin.js/client 1.0.3 → 1.0.4

package/dist/index.js

@@ -9,7 +9,6 @@ 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));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhin.js/client",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Zhin 客户端",
   "type": "module",
   "main": "./dist/index.js",

package/src/index.ts

@@ -12,7 +12,6 @@ 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/store/index.ts

@@ -108,4 +108,25 @@ export {
     unloadScript
 } from './reducers/script'
 
-export type { RouteMenuItem } from './reducers/route'
+// 导出 Config actions 和 selectors
+export { 
+    setConnected,
+    setLoading,
+    setError,
+    updateConfig,
+    updateSchema,
+    updateConfigs,
+    updateSchemas,
+    removeConfig,
+    clearConfigs,
+    selectConfig,
+    selectSchema,
+    selectConfigLoading,
+    selectConfigError,
+    selectConfigConnected,
+    selectAllConfigs,
+    selectAllSchemas
+} from './reducers/config'
+
+export type { RouteMenuItem } from './reducers/route'
+export type { ConfigMessage } from './reducers/config'

package/src/store/reducers/config.ts

@@ -0,0 +1,135 @@
+/**
+ * 配置管理 Redux Slice
+ * 通过 WebSocket 管理插件配置
+ */
+
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+
+export interface ConfigState {
+  // 所有插件的配置，按插件名分发
+  configs: Record<string, any>
+  // 所有插件的 Schema，按插件名分发
+  schemas: Record<string, any>
+  // 加载状态
+  loading: Record<string, boolean>
+  // 错误信息
+  errors: Record<string, string | null>
+  // WebSocket 连接状态
+  connected: boolean
+}
+
+const initialState: ConfigState = {
+  configs: {},
+  schemas: {},
+  loading: {},
+  errors: {},
+  connected: false
+}
+
+// WebSocket 消息类型
+export interface ConfigMessage {
+  type: 'config:get' | 'config:set' | 'config:updated' | 'schema:get' | 'schema:updated'
+  pluginName: string
+  data?: any
+  error?: string
+}
+
+const configSlice = createSlice({
+  name: 'config',
+  initialState,
+  reducers: {
+    // WebSocket 连接状态
+    setConnected: (state, action: PayloadAction<boolean>) => {
+      state.connected = action.payload
+    },
+
+    // 设置配置加载状态
+    setLoading: (state, action: PayloadAction<{ pluginName: string; loading: boolean }>) => {
+      const { pluginName, loading } = action.payload
+      state.loading[pluginName] = loading
+    },
+
+    // 设置错误信息
+    setError: (state, action: PayloadAction<{ pluginName: string; error: string | null }>) => {
+      const { pluginName, error } = action.payload
+      state.errors[pluginName] = error
+    },
+
+    // 更新插件配置
+    updateConfig: (state, action: PayloadAction<{ pluginName: string; config: any }>) => {
+      const { pluginName, config } = action.payload
+      state.configs[pluginName] = config
+      state.loading[pluginName] = false
+      state.errors[pluginName] = null
+    },
+
+    // 更新插件 Schema
+    updateSchema: (state, action: PayloadAction<{ pluginName: string; schema: any }>) => {
+      const { pluginName, schema } = action.payload
+      state.schemas[pluginName] = schema
+    },
+
+    // 批量更新配置
+    updateConfigs: (state, action: PayloadAction<Record<string, any>>) => {
+      state.configs = { ...state.configs, ...action.payload }
+    },
+
+    // 批量更新 Schema
+    updateSchemas: (state, action: PayloadAction<Record<string, any>>) => {
+      state.schemas = { ...state.schemas, ...action.payload }
+    },
+
+    // 清除插件配置
+    removeConfig: (state, action: PayloadAction<string>) => {
+      const pluginName = action.payload
+      delete state.configs[pluginName]
+      delete state.schemas[pluginName]
+      delete state.loading[pluginName]
+      delete state.errors[pluginName]
+    },
+
+    // 清除所有配置
+    clearConfigs: (state) => {
+      state.configs = {}
+      state.schemas = {}
+      state.loading = {}
+      state.errors = {}
+    }
+  }
+})
+
+export const {
+  setConnected,
+  setLoading,
+  setError,
+  updateConfig,
+  updateSchema,
+  updateConfigs,
+  updateSchemas,
+  removeConfig,
+  clearConfigs
+} = configSlice.actions
+
+export default configSlice.reducer
+
+// Selectors
+export const selectConfig = (state: { config: ConfigState }, pluginName: string) => 
+  state.config.configs[pluginName]
+
+export const selectSchema = (state: { config: ConfigState }, pluginName: string) => 
+  state.config.schemas[pluginName]
+
+export const selectConfigLoading = (state: { config: ConfigState }, pluginName: string) => 
+  state.config.loading[pluginName] || false
+
+export const selectConfigError = (state: { config: ConfigState }, pluginName: string) => 
+  state.config.errors[pluginName] || null
+
+export const selectConfigConnected = (state: { config: ConfigState }) => 
+  state.config.connected
+
+export const selectAllConfigs = (state: { config: ConfigState }) => 
+  state.config.configs
+
+export const selectAllSchemas = (state: { config: ConfigState }) => 
+  state.config.schemas

package/src/store/reducers/index.ts

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

package/src/websocket/hooks.ts

@@ -0,0 +1,280 @@
+/**
+ * WebSocket React Hooks
+ * 提供在 React 组件中使用 WebSocket 功能的便捷接口
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { 
+  useSelector, 
+  useDispatch,
+  selectConfig,
+  selectSchema,
+  selectConfigLoading,
+  selectConfigError,
+  selectConfigConnected,
+  selectAllConfigs,
+  selectAllSchemas,
+  setLoading,
+  setError
+} from '../store'
+import { getWebSocketManager } from './instance'
+import type { UseConfigOptions, UseWebSocketOptions, ConnectionState } from './types'
+
+// ============================================================================
+// WebSocket 连接 Hook
+// ============================================================================
+
+/**
+ * WebSocket 连接状态和基础功能 Hook
+ */
+export function useWebSocket(options: UseWebSocketOptions = {}) {
+  const { autoConnect = true } = options
+  
+  const wsManager = getWebSocketManager()
+  
+  // 从 Redux 获取状态
+  const connected = useSelector(selectConfigConnected)
+  const entries = useSelector((state: any) => state.script?.entries || [])
+  const loadedScripts = useSelector((state: any) => state.script?.loadedScripts || [])
+
+  // 连接控制
+  const connect = useCallback(() => {
+    wsManager.connect()
+  }, [wsManager])
+
+  const disconnect = useCallback(() => {
+    wsManager.disconnect()
+  }, [wsManager])
+
+  // 消息发送
+  const send = useCallback((message: any) => {
+    wsManager.send(message)
+  }, [wsManager])
+
+  const sendRequest = useCallback(async <T = any>(message: any): Promise<T> => {
+    // 临时使用旧方法，后续完善
+    return (wsManager as any).sendRequest(message)
+  }, [wsManager])
+
+  // 状态查询
+  const isConnected = useCallback(() => {
+    return wsManager.isConnected()
+  }, [wsManager])
+
+  const getState = useCallback(() => {
+    // 临时返回连接状态，后续完善
+    return wsManager.isConnected() ? 'connected' : 'disconnected'
+  }, [wsManager])
+
+  // 自动连接
+  useEffect(() => {
+    if (autoConnect && !connected) {
+      connect()
+    }
+  }, [autoConnect, connected, connect])
+
+  return {
+    // 状态
+    connected,
+    entries,
+    loadedScripts,
+    
+    // 方法
+    connect,
+    disconnect,
+    send,
+    sendRequest,
+    isConnected,
+    getState,
+    
+    // WebSocket 实例（高级用法）
+    manager: wsManager
+  }
+}
+
+// ============================================================================
+// 配置管理 Hook
+// ============================================================================
+
+/**
+ * 插件配置管理 Hook
+ */
+export function useConfig(pluginName: string, options: UseConfigOptions = {}) {
+  const { autoLoad = true, autoLoadSchema = true } = options
+  
+  const dispatch = useDispatch()
+  const wsManager = getWebSocketManager()
+
+  // 状态选择器
+  const config = useSelector((state: any) => selectConfig(state, pluginName))
+  const schema = useSelector((state: any) => selectSchema(state, pluginName))
+  const loading = useSelector((state: any) => selectConfigLoading(state, pluginName))
+  const error = useSelector((state: any) => selectConfigError(state, pluginName))
+  const connected = useSelector(selectConfigConnected)
+
+  // 配置操作
+  const getConfig = useCallback(async () => {
+    dispatch(setLoading({ pluginName, loading: true }))
+    dispatch(setError({ pluginName, error: null }))
+
+    try {
+      const result = await wsManager.getConfig(pluginName)
+      return result
+    } catch (error) {
+        console.log('getConfig',error)
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+      dispatch(setError({ pluginName, error: errorMessage }))
+      throw error
+    } finally {
+      dispatch(setLoading({ pluginName, loading: false }))
+    }
+  }, [pluginName, wsManager, dispatch])
+
+  const setConfig = useCallback(async (newConfig: any) => {
+    dispatch(setLoading({ pluginName, loading: true }))
+    dispatch(setError({ pluginName, error: null }))
+
+    try {
+      await wsManager.setConfig(pluginName, newConfig)
+    } catch (error) {
+        console.log('setConfig',error)
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+      dispatch(setError({ pluginName, error: errorMessage }))
+      throw error
+    } finally {
+      dispatch(setLoading({ pluginName, loading: false }))
+    }
+  }, [pluginName, wsManager, dispatch])
+
+  const getSchema = useCallback(async () => {
+    try {
+      return await wsManager.getSchema(pluginName)
+    } catch (error) {
+      console.error(`Failed to get schema for plugin ${pluginName}:`, error)
+      throw error
+    }
+  }, [pluginName, wsManager])
+
+  // 重新加载配置和 Schema
+  const reload = useCallback(async () => {
+    const promises = []
+    
+    if (autoLoad) {
+      promises.push(getConfig())
+    }
+    
+    if (autoLoadSchema) {
+      promises.push(getSchema())
+    }
+    
+    await Promise.all(promises)
+  }, [autoLoad, autoLoadSchema, getConfig, getSchema])
+
+  // 自动加载
+  useEffect(() => {
+    if (connected && autoLoad && !config && !loading) {
+      getConfig().catch(console.error)
+    }
+  }, [connected, autoLoad, config, loading, getConfig])
+
+  useEffect(() => {
+    if (connected && autoLoadSchema && !schema) {
+      getSchema().catch(console.error)
+    }
+  }, [connected, autoLoadSchema, schema, getSchema])
+
+  return useMemo(() => ({
+    // 状态
+    config,
+    schema,
+    loading,
+    error,
+    connected,
+    
+    // 方法
+    getConfig,
+    setConfig,
+    getSchema,
+    reload
+  }), [config, schema, loading, error, connected, getConfig, setConfig, getSchema, reload])
+}
+
+// ============================================================================
+// 批量配置管理 Hook
+// ============================================================================
+
+/**
+ * 所有配置管理 Hook
+ */
+export function useAllConfigs() {
+  const wsManager = getWebSocketManager()
+  
+  const allConfigs = useSelector(selectAllConfigs)
+  const allSchemas = useSelector(selectAllSchemas)
+  const connected = useSelector(selectConfigConnected)
+
+  const refreshAll = useCallback(async () => {
+    try {
+      const [configs, schemas] = await Promise.all([
+        (wsManager as any).getAllConfigs(),
+        (wsManager as any).getAllSchemas()
+      ])
+      
+      return { configs, schemas }
+    } catch (error) {
+      console.error('Failed to refresh all configs:', error)
+      throw error
+    }
+  }, [wsManager])
+
+  return useMemo(() => ({
+    configs: allConfigs,
+    schemas: allSchemas,
+    connected,
+    refreshAll
+  }), [allConfigs, allSchemas, connected, refreshAll])
+}
+
+// ============================================================================
+// 高级 Hook
+// ============================================================================
+
+/**
+ * WebSocket 连接状态监听 Hook
+ */
+export function useWebSocketState() {
+  const wsManager = getWebSocketManager()
+  const [state, setState] = useState(wsManager.getState())
+  
+  useEffect(() => {
+    const checkState = () => {
+      const newState = wsManager.getState()
+      if (newState !== state) {
+        setState(newState)
+      }
+    }
+    
+    const interval = setInterval(checkState, 1000)
+    return () => clearInterval(interval)
+  }, [wsManager, state])
+  
+  return state
+}
+
+/**
+ * WebSocket 消息监听 Hook
+ */
+export function useWebSocketMessages<T = any>(
+  filter?: (message: any) => boolean,
+  handler?: (message: T) => void
+) {
+  const [messages, setMessages] = useState<T[]>([])
+  
+  useEffect(() => {
+    const wsManager = getWebSocketManager()
+    // 这里需要扩展 WebSocketManager 来支持消息监听
+    // 暂时留空，后续可以扩展
+  }, [filter, handler])
+  
+  return messages
+}