@zhin.js/client 1.0.2 → 1.0.4

package/app/src/pages/dashboard-plugin-detail.tsx

@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router'
 import * as Themes from '@radix-ui/themes'
 import { Icons } from '@zhin.js/client'
+import {PluginConfigForm} from '../components/PluginConfigForm'
 
-const { Flex, Box, Spinner, Text, Callout, Heading, Badge, Grid, Card, Button, Code, Separator, ScrollArea } = Themes
+const { Flex, Box, Spinner, Text, Callout, Heading, Badge, Grid, Card, Button, Code, Separator, ScrollArea, Dialog } = Themes
 
 interface PluginDetail {
   name: string
@@ -12,10 +13,6 @@ interface PluginDetail {
   description: string
   commands: Array<{
     name: string
-    pattern: string
-    description: string
-    alias: string[]
-    examples: string[]
   }>
   components: Array<{
     name: string
@@ -35,7 +32,7 @@ interface PluginDetail {
     pattern: string
     running: boolean
   }>
-  schemas: Array<{
+  definitions: Array<{
     name: string
     fields: string[]
   }>
@@ -45,7 +42,7 @@ interface PluginDetail {
     middlewareCount: number
     contextCount: number
     cronCount: number
-    schemaCount: number
+    definitionCount: number
   }
 }
 
@@ -81,6 +78,8 @@ export default function DashboardPluginDetail() {
     }
   }
 
+
+
   if (loading) {
     return (
       <Flex align="center" justify="center" className="h-full">
@@ -115,7 +114,7 @@ export default function DashboardPluginDetail() {
     <Box>
       {/* 头部 */}
       <Flex direction="column" gap="3" mb="4">
-        <Button variant="ghost" onClick={() => navigate('/plugins')} size="2" className="self-start">
+        <Button variant="ghost" onClick={() => navigate('/plugins')} size="2">
           <Icons.ArrowLeft className="w-4 h-4" />
           返回
         </Button>
@@ -136,7 +135,15 @@ export default function DashboardPluginDetail() {
         </Flex>
       </Flex>
 
-      <Separator size="4" mb="4" />
+      {/* 插件配置折叠面板 */}
+      <PluginConfigForm
+        pluginName={plugin.name}
+        onSuccess={() => {
+          // 配置更新会通过 WebSocket 自动同步
+        }}
+      />
+
+      <Separator size="4" my="4" />
 
       {/* 统计概览 - 紧凑卡片 */}
       <Grid columns={{ initial: '2', sm: '3', md: '6' }} gap="2" mb="4">
@@ -183,7 +190,7 @@ export default function DashboardPluginDetail() {
         <Card size="1">
           <Flex direction="column" align="center" gap="1" p="2">
             <Icons.FileText className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
-            <Text size="4" weight="bold">{plugin.statistics.schemaCount}</Text>
+            <Text size="4" weight="bold">{plugin.statistics.definitionCount}</Text>
             <Text size="1" color="gray">数据模型</Text>
           </Flex>
         </Card>
@@ -207,14 +214,7 @@ export default function DashboardPluginDetail() {
                     <Flex direction="column" gap="1">
                       <Flex align="center" gap="2">
                         <Code size="2">{cmd.name}</Code>
-                        {cmd.alias.length > 0 && (
-                          <Text size="1" color="gray">别名: {cmd.alias.join(', ')}</Text>
-                        )}
                       </Flex>
-                      <Text size="1" color="gray">{cmd.description}</Text>
-                      {cmd.examples.length > 0 && (
-                        <Text size="1" color="gray" className="italic">示例: {cmd.examples[0]}</Text>
-                      )}
                     </Flex>
                   </Box>
                 ))}
@@ -330,22 +330,22 @@ export default function DashboardPluginDetail() {
         )}
 
         {/* 数据模型列表 */}
-        {plugin.schemas.length > 0 && (
+        {plugin.definitions.length > 0 && (
           <Card size="2">
             <Flex direction="column" gap="2" p="3">
               <Flex align="center" gap="2">
                 <Icons.FileText className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
                 <Heading size="3">数据模型</Heading>
-                <Badge size="1">{plugin.schemas.length}</Badge>
+                <Badge size="1">{plugin.definitions.length}</Badge>
               </Flex>
               <Separator size="4" />
               <Flex direction="column" gap="2" className="max-h-60 overflow-y-auto">
-                {plugin.schemas.map((schema, index) => (
+                {plugin.definitions.map((definition, index) => (
                   <Box key={index} className="rounded-lg bg-gray-50 dark:bg-gray-900 p-2">
                     <Flex direction="column" gap="1">
-                      <Code size="2">{schema.name}</Code>
+                      <Code size="2">{definition.name}</Code>
                       <Text size="1" color="gray">
-                        字段: {schema.fields.join(', ')}
+                        字段: {definition.fields.join(', ')}
                       </Text>
                     </Flex>
                   </Box>

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.2",
+  "version": "1.0.4",
   "description": "Zhin 客户端",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,13 +29,15 @@
     "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"
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "lucide-react": "^0.469.0",
+    "radix-ui": "^1.4.3",
+    "vite": "^7.0.6"
   },
   "scripts": {
     "build": "tsc",

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
+}