@zhin.js/client 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 凉菜
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# @zhin.js/client
+
+基于 Vue 3 和 PrimeVue 的 Zhin 机器人 Web 客户端，提供现代化的 Web 管理界面。
+
+## 功能特性
+
+- 🎨 基于 Vue 3 和 PrimeVue 的现代界面
+- 📊 机器人状态监控和管理
+- 🔧 插件管理和配置
+- 📝 日志查看和分析
+- 🛠️ 开发工具和调试支持
+- 📱 响应式设计，支持移动端
+
+## 技术栈
+
+- **前端框架**: Vue 3 + TypeScript
+- **UI 组件**: PrimeVue 4.x
+- **状态管理**: Pinia
+- **路由**: Vue Router
+- **构建工具**: Vite
+- **主题**: PrimeUI 主题系统
+
+## 安装
+
+```bash
+npm install @zhin.js/client
+```
+
+## 使用
+
+这个包通常与 `@zhin.js/console` 插件一起使用：
+
+```javascript
+// 插件中
+import '@zhin.js/console'  // 这会自动加载客户端
+```
+
+## 开发
+
+### 项目结构
+
+```
+app/
+├── src/
+│   ├── App.vue          # 主应用组件
+│   ├── main.ts          # 应用入口
+│   └── pages/           # 页面组件
+│       ├── $.vue        # 动态路由
+│       ├── 404.vue      # 404页面
+│       └── dashboard.vue # 仪表板
+├── index.html           # HTML模板
+└── components.d.ts      # 组件类型声明
+```
+
+### 开发命令
+
+```bash
+npm run build  # 构建
+npm run clean  # 清理构建文件
+```
+
+## API 集成
+
+客户端通过以下方式与后端通信：
+- 📡 WebSocket 实时通信
+- 🌐 REST API 调用
+- 📊 状态同步机制
+
+## 路由配置
+
+- `/` - 仪表板首页
+- `/plugins` - 插件管理
+- `/logs` - 日志查看
+- `/settings` - 系统设置
+- `/404` - 错误页面
+
+## 依赖项
+
+- `pinia` - 状态管理
+- `primevue` - UI组件库
+- `@primeuix/themes` - 主题系统
+- `vue-router` - 路由管理
+
+## 自定义扩展
+
+支持通过插件系统扩展：
+- 自定义页面组件
+- 自定义主题样式
+- 自定义功能模块
+
+## 浏览器支持
+
+- Chrome/Edge 88+
+- Firefox 85+
+- Safari 14+
+
+## 许可证
+
+MIT License

package/app/components.d.ts

@@ -0,0 +1,33 @@
+/* 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/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='UTF-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+  <title>Zhin</title>
+</head>
+<body>
+  <div id='app'></div>
+  <script src='/src/main.ts' type='module'></script>
+</body>
+</html>

package/app/src/App.vue

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

package/app/src/main.ts

@@ -0,0 +1,127 @@
+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');