@zhin.js/client 1.0.0 → 1.0.2

package/src/store/reducers/ui.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit"
+
+export interface UIState {
+    sidebarOpen: boolean
+    activeMenu: string
+}
+
+const initialState: UIState = {
+    sidebarOpen: true,
+    activeMenu: 'home'
+}
+
+export const uiSlice = createSlice({
+    name: 'ui',
+    initialState,
+    reducers: {
+        toggleSidebar: (state) => {
+            state.sidebarOpen = !state.sidebarOpen
+        },
+        setSidebarOpen: (state, action: PayloadAction<boolean>) => {
+            state.sidebarOpen = action.payload
+        },
+        setActiveMenu: (state, action: PayloadAction<string>) => {
+            state.activeMenu = action.payload
+        }
+    }
+})
+
+export const { toggleSidebar, setSidebarOpen, setActiveMenu } = uiSlice.actions
+export default uiSlice.reducer
+

package/src/types.ts

@@ -1,18 +1,12 @@
-import { RouteComponent } from 'vue-router';
-
-export interface MenuInfo {
-  icon?: string;
-  parentName?: string;
-  children?: MenuInfo[];
-  path: string;
-  name: string;
+// 消息段类型定义 - 客户端版本
+export interface MessageSegment {
+  type: 'text' | 'image' | 'at' | 'face' | 'video' | 'audio' | 'file' | 'reply'
+  data: Record<string, any>
 }
-export type MenuWithComponent = {
-  component: RouteComponent;
-  children?: MenuWithComponent[];
-} & MenuInfo;
-export type ToolInfo = {
-  name?: string;
-  icon?: string;
-  component: RouteComponent;
-};
+
+// 消息元素别名（兼容不同命名习惯）
+export type MessageElement = MessageSegment
+
+// 发送内容类型
+export type SendContent = MessageSegment | MessageSegment[] | string
+

package/src/websocket/index.ts

@@ -0,0 +1,193 @@
+import { store, loadScripts, loadScript, unloadScript } from '../store'
+/**
+ * WebSocket 客户端管理
+ * 用于连接服务器并接收动态入口脚本
+ * 脚本加载状态由 Redux store 管理
+ */
+
+export interface WebSocketMessage {
+    type: 'sync' | 'add' | 'delete' | 'init-data' | 'data-update'
+    data?: {
+        key: string
+        value: any
+    }
+    timestamp?: number
+}
+
+export interface WebSocketManagerOptions {
+    url?: string
+    reconnectInterval?: number
+    maxReconnectAttempts?: number
+    onConnect?: () => void
+    onDisconnect?: () => void
+    onError?: (error: Event) => void
+    onMessage?: (message: WebSocketMessage) => void
+}
+
+export class WebSocketManager {
+    private ws: WebSocket | null = null
+    private url: string
+    private reconnectInterval: number
+    private maxReconnectAttempts: number
+    private reconnectAttempts = 0
+    private reconnectTimer: NodeJS.Timeout | null = null
+    private options: WebSocketManagerOptions
+
+    constructor(options: WebSocketManagerOptions = {}) {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+        const host = window.location.host
+        
+        this.url = options.url || `${protocol}//${host}/server`
+        this.reconnectInterval = options.reconnectInterval || 3000
+        this.maxReconnectAttempts = options.maxReconnectAttempts || 10
+        this.options = options
+    }
+
+    /**
+     * 连接 WebSocket
+     */
+    connect() {
+        if (this.ws?.readyState === WebSocket.OPEN) return
+
+        try {
+            this.ws = new WebSocket(this.url)
+
+            this.ws.onopen = () => {
+                this.reconnectAttempts = 0
+                this.options.onConnect?.()
+            }
+
+            this.ws.onmessage = (event) => {
+                try {
+                    const message: WebSocketMessage = JSON.parse(event.data)
+                    this.handleMessage(message)
+                    this.options.onMessage?.(message)
+                } catch (error) {
+                    console.error('[WS] Parse error:', error)
+                }
+            }
+
+            this.ws.onclose = () => {
+                this.options.onDisconnect?.()
+                this.attemptReconnect()
+            }
+
+            this.ws.onerror = () => {
+                this.options.onError?.(new Event('error'))
+            }
+        } catch (error) {
+            this.attemptReconnect()
+        }
+    }
+
+    /**
+     * 处理服务器消息
+     */
+    private handleMessage(message: WebSocketMessage) {
+        switch (message.type) {
+            case 'sync':
+                // 同步所有入口 - dispatch 到 Redux
+                if (message.data?.key === 'entries') {
+                    const entries = Array.isArray(message.data.value) 
+                        ? message.data.value 
+                        : [message.data.value]
+                    store.dispatch({ type: 'script/syncEntries', payload: entries })
+                    // 使用 AsyncThunk 加载脚本
+                    store.dispatch(loadScripts(entries))
+                }
+                break
+
+            case 'add':
+                // 添加新入口 - dispatch 到 Redux
+                if (message.data?.key === 'entries') {
+                    store.dispatch({ type: 'script/addEntry', payload: message.data.value })
+                    // 使用 AsyncThunk 加载脚本
+                    store.dispatch(loadScript(message.data.value))
+                }
+                break
+
+            case 'delete':
+                // 删除入口 - dispatch 到 Redux
+                if (message.data?.key === 'entries') {
+                    store.dispatch({ type: 'script/removeEntry', payload: message.data.value })
+                    // 使用 AsyncThunk 卸载脚本
+                    store.dispatch(unloadScript(message.data.value))
+                }
+                break
+
+            case 'init-data':
+            case 'data-update':
+                break
+
+            default:
+                console.warn('[WS] Unknown type:', message.type)
+        }
+    }
+
+    /**
+     * 尝试重新连接
+     */
+    private attemptReconnect() {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) return
+
+        this.reconnectAttempts++
+        this.reconnectTimer = setTimeout(() => {
+            this.connect()
+        }, this.reconnectInterval)
+    }
+
+    /**
+     * 断开连接
+     */
+    disconnect() {
+        if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer)
+            this.reconnectTimer = null
+        }
+
+        if (this.ws) {
+            this.ws.close()
+            this.ws = null
+        }
+    }
+
+    /**
+     * 发送消息
+     */
+    send(message: any) {
+        if (this.ws?.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message))
+        }
+    }
+
+    /**
+     * 检查是否已连接
+     */
+    isConnected() {
+        return this.ws?.readyState === WebSocket.OPEN
+    }
+}
+
+// 创建全局单例并自动连接
+const globalWebSocketManager = new WebSocketManager()
+
+// 模块加载时自动连接
+if (typeof window !== 'undefined') {
+    globalWebSocketManager.connect()
+}
+
+/**
+ * 获取全局 WebSocket 管理器
+ */
+export function getWebSocketManager(): WebSocketManager {
+    return globalWebSocketManager
+}
+
+/**
+ * 销毁全局 WebSocket 管理器
+ */
+export function destroyWebSocketManager() {
+    globalWebSocketManager.disconnect()
+}
+
+export default WebSocketManager

package/src/websocket/useWebSocket.ts

@@ -0,0 +1,42 @@
+import { useCallback } from 'react'
+import { useSelector } from '../store'
+import { getWebSocketManager } from './index'
+
+/**
+ * WebSocket Hook
+ * 用于在 React 组件中访问 WebSocket 状态和方法
+ * WebSocket 在模块加载时已自动连接，无需手动初始化
+ * 状态由 Redux store 管理
+ */
+export function useWebSocket() {
+    // 从 Redux 读取状态
+    const entries = useSelector((state: any) => state.script.entries || [])
+    const loadedScripts = useSelector((state: any) => state.script.loadedScripts || [])
+
+    const connect = useCallback(() => {
+        getWebSocketManager().connect()
+    }, [])
+
+    const disconnect = useCallback(() => {
+        getWebSocketManager().disconnect()
+    }, [])
+
+    const send = useCallback((message: any) => {
+        getWebSocketManager().send(message)
+    }, [])
+
+    const isConnected = useCallback(() => {
+        return getWebSocketManager().isConnected()
+    }, [])
+
+    return {
+        entries,
+        loadedScripts,
+        connect,
+        disconnect,
+        send,
+        isConnected
+    }
+}
+
+export default useWebSocket

package/app/components.d.ts

@@ -1,33 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    Badge: typeof import('primevue/badge')['default']
-    Breadcrumb: typeof import('primevue/breadcrumb')['default']
-    Button: typeof import('primevue/button')['default']
-    Card: typeof import('primevue/card')['default']
-    Dialog: typeof import('primevue/dialog')['default']
-    Divider: typeof import('primevue/divider')['default']
-    Dropdown: typeof import('primevue/dropdown')['default']
-    InputText: typeof import('primevue/inputtext')['default']
-    OverlayPanel: typeof import('primevue/overlaypanel')['default']
-    PanelMenu: typeof import('primevue/panelmenu')['default']
-    Password: typeof import('primevue/password')['default']
-    ProgressBar: typeof import('primevue/progressbar')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    Sidebar: typeof import('primevue/sidebar')['default']
-    StyleGuide: typeof import('./src/components/StyleGuide.vue')['default']
-    Tag: typeof import('primevue/tag')['default']
-  }
-  export interface GlobalDirectives {
-    Ripple: typeof import('primevue/ripple')['default']
-    Tooltip: typeof import('primevue/tooltip')['default']
-  }
-}

package/app/src/App.vue

@@ -1,7 +0,0 @@
-<template>
-  <router-view/>
-</template>
-
-<script setup lang="ts">
-</script>
-<style></style>

package/app/src/main.ts

@@ -1,127 +0,0 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from "primevue/config";
-import { addPage, router, useCommonStore } from '@zhin.js/client';
-import { updateAllData, DataService } from './services/api';
-import App from './App.vue';
-// 引入通用样式
-import './styles/common.css';
-
-// 全局暴露数据管理方法，供外部模块使用
-declare global {
-    interface Window {
-        ZhinDataAPI: {
-            updateAllData: () => Promise<void>
-            getSystemStatus: () => Promise<any>
-            getPlugins: () => Promise<any>
-            getAdapters: () => Promise<any>
-            reloadPlugin: (pluginName: string) => Promise<any>
-            sendMessage: (payload: any) => Promise<any>
-        }
-        ZhinStore: {
-            getCommonStore: () => any
-        }
-    }
-}
-
-const pinia = createPinia();
-
-// 暴露全局API，供外部模块和适配器使用
-window.ZhinDataAPI = {
-    updateAllData: () => updateAllData().then(() => Promise.resolve()),
-    getSystemStatus: DataService.getSystemStatus,
-    getPlugins: DataService.getPlugins,
-    getAdapters: DataService.getAdapters,
-    reloadPlugin: DataService.reloadPlugin,
-    sendMessage: DataService.sendMessage,
-}
-
-// 暴露全局Store访问器
-window.ZhinStore = {
-    getCommonStore: () => useCommonStore(pinia)
-}
-
-// 🌍 Zhin 全局API已暴露到 window 对象
-
-const wsUrl = `${window.location.protocol.replace(/^http?/, 'ws')}${window.location.host}/server`;
-const ws = new WebSocket(wsUrl);
-
-ws.onopen = () => {
-    // WebSocket连接已建立
-};
-
-ws.onmessage = message => {
-    const payload = JSON.parse(message.data || '{}');
-    const commonStore = useCommonStore(pinia);
-    
-    switch (payload.type) {
-        case 'sync':
-            return commonStore.syncData(payload.data);
-        case 'add':
-            return commonStore.addData(payload.data);
-        case 'delete':
-            return commonStore.deleteData(payload.data);
-        case 'init-data':
-            // 初始化时获取数据
-            // 🚀 收到初始化数据通知
-            updateAllData();
-            break;
-        case 'data-update':
-            // 收到更新通知时获取最新数据
-            // 🔄 收到数据更新通知
-            updateAllData();
-            break;
-        default:
-            return;
-    }
-};
-
-ws.onclose = () => {
-    // WebSocket连接已关闭
-};
-const app = createApp(App);
-app.use(pinia).use(router).use(PrimeVue, {
-    // 临时移除主题配置以修复类型错误
-});
-app.config.globalProperties.$ws = ws;
-// 注册主布局路由
-router.addRoute({
-    path: '/',
-    name: 'Zhin',
-    component: () => import('./pages/$.vue'),
-});
-
-// 注册所有内置页面（addPage 会自动添加路由和菜单）
-addPage({
-    parentName: 'Zhin',
-    path: '/dashboard',
-    name: 'Dashboard',
-    component: () => import('./pages/dashboard.vue'),
-});
-
-addPage({
-    parentName: 'Zhin',
-    path: '/system/status',
-    name: 'Status',
-    component: () => import('./pages/system/status.vue'),
-});
-
-addPage({
-    parentName: 'Zhin',
-    path: '/contexts/overview',
-    name: 'Overview',
-    component: () => import('./pages/contexts/overview.vue'),
-});
-
-
-
-addPage({
-    parentName: 'Zhin',
-    path: '/plugins/installed',
-    name: 'Installed',
-    component: () => import('./pages/plugins/installed.vue'),
-});
-
-// 📝 所有内置页面已通过 addPage 注册
-
-app.mount('#app');