@zhin.js/client 1.0.0

package/app/src/pages/system/status.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="page-layout">
+    <!-- 页面头部 -->
+    <Card class="page-header-card">
+      <template #content>
+        <div class="flex-row justify-between">
+          <div class="flex-row">
+            <div class="icon-container icon-primary">
+              <i class="pi pi-info-circle"></i>
+            </div>
+            <div class="flex-column">
+              <h1>系统状态</h1>
+              <p>实时监控 Zhin Bot 框架运行状态</p>
+            </div>
+          </div>
+          <Button 
+            icon="pi pi-refresh" 
+            label="刷新" 
+            @click="refreshData" 
+            :loading="refreshing"
+            severity="secondary"
+            outlined
+          />
+        </div>
+      </template>
+    </Card>
+
+    <!-- 统计卡片 -->
+    <div class="stats-container">
+      <Card class="stats-card">
+        <template #content>
+          <div class="flex-row gap-large">
+            <div class="icon-container icon-uptime">
+              <i class="pi pi-clock"></i>
+            </div>
+            <div class="flex-column flex-1">
+              <div class="stat-value">{{ formatUptime(systemData?.uptime) }}</div>
+              <div class="stat-label">运行时间</div>
+              <div class="stat-sub">系统持续运行</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+      
+      <Card class="stats-card">
+        <template #content>
+          <div class="flex-row gap-large">
+            <div class="icon-container icon-platform">
+              <i class="pi pi-desktop"></i>
+            </div>
+            <div class="flex-column flex-1">
+              <div class="stat-value">{{ systemData?.platform }}</div>
+              <div class="stat-label">运行平台</div>
+              <div class="stat-sub">操作系统</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+      
+      <Card class="stats-card">
+        <template #content>
+          <div class="flex-row gap-large">
+            <div class="icon-container icon-nodejs">
+              <i class="pi pi-code"></i>
+            </div>
+            <div class="flex-column flex-1">
+              <div class="stat-value">{{ systemData?.nodeVersion }}</div>
+              <div class="stat-label">Node.js</div>
+              <div class="stat-sub">运行时版本</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="layout-container">
+      <!-- 左侧：系统信息 -->
+      <div class="layout-main">
+        <Card class="content-card">
+          <template #title>
+            <i class="pi pi-desktop"></i>
+            <span>系统信息</span>
+          </template>
+          <template #content>
+            <div class="detail-grid">
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-blue">
+                  <i class="pi pi-hashtag"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">进程 ID</div>
+                  <div class="detail-value">{{ systemData?.pid }}</div>
+                </div>
+              </div>
+              
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-green">
+                  <i class="pi pi-clock"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">运行时间</div>
+                  <div class="detail-value">{{ formatUptime(systemData?.uptime) }}</div>
+                </div>
+              </div>
+              
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-purple">
+                  <i class="pi pi-desktop"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">操作系统</div>
+                  <div class="detail-value">{{ systemData?.platform }}</div>
+                </div>
+              </div>
+              
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-orange">
+                  <i class="pi pi-code"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">Node.js 版本</div>
+                  <div class="detail-value">{{ systemData?.nodeVersion }}</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+
+      <!-- 右侧：内存使用 -->
+      <div class="layout-sidebar">
+        <Card class="content-card">
+          <template #title>
+            <i class="pi pi-chart-bar"></i>
+            <span>内存使用</span>
+          </template>
+          <template #content>
+            <div class="detail-grid">
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-blue">
+                  <i class="pi pi-chart-line"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">已用内存</div>
+                  <div class="detail-value">{{ formatMemory(systemData?.memory.heapUsed) }}</div>
+                </div>
+              </div>
+              
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-green">
+                  <i class="pi pi-chart-pie"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">总内存</div>
+                  <div class="detail-value">{{ formatMemory(systemData?.memory.heapTotal) }}</div>
+                </div>
+              </div>
+              
+              <div class="detail-item">
+                <div class="icon-container icon-small icon-purple">
+                  <i class="pi pi-percentage"></i>
+                </div>
+                <div class="flex-column flex-1">
+                  <div class="detail-label">使用率</div>
+                  <div class="detail-value">{{ memoryUsagePercent }}%</div>
+                  <ProgressBar 
+                    :value="memoryUsagePercent" 
+                    :showValue="false"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useCommonStore } from '@zhin.js/client'
+
+const commonStore = useCommonStore()
+const refreshing = ref(false)
+
+// 系统数据
+const systemData = computed(() => (commonStore.store as any).system)
+
+// 内存使用百分比
+const memoryUsagePercent = computed(() => {
+  if (!systemData.value?.memory) return 0
+  const { heapUsed, heapTotal } = systemData.value.memory
+  return Math.round((heapUsed / heapTotal) * 100)
+})
+
+// 格式化函数
+const formatUptime = (seconds?: number) => {
+  if (!seconds) return '0秒'
+  
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  
+  if (hours > 0) {
+    return `${hours}小时${minutes}分钟`
+  } else if (minutes > 0) {
+    return `${minutes}分钟`
+  } else {
+    return `${Math.floor(seconds)}秒`
+  }
+}
+
+const formatMemory = (bytes?: number) => {
+  if (!bytes) return '0B'
+  
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`
+}
+
+// 刷新数据
+const refreshData = async () => {
+  refreshing.value = true
+  try {
+    if (window.ZhinDataAPI?.updateAllData) {
+      await window.ZhinDataAPI.updateAllData()
+    } else {
+      throw new Error('全局API未就绪')
+    }
+  } catch (error) {
+    // console.error 已替换为注释
+  } finally {
+    refreshing.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* 页面特定样式 - 所有样式已移至 common.css，使用PrimeVue组件类名控制 */
+</style>

package/app/src/services/api.ts

@@ -0,0 +1,155 @@
+import { useCommonStore } from '@zhin.js/client'
+
+// API 基础配置
+const getBaseUrl = () => `${window.location.protocol}//${window.location.host}`
+
+// 通用的 API 请求函数
+const apiRequest = async (endpoint: string) => {
+  try {
+    const response = await fetch(`${getBaseUrl()}${endpoint}`)
+    return await response.json()
+  } catch (error) {
+    // console.error 已替换为注释
+    return { success: false, error: error.message }
+  }
+}
+
+// 数据获取服务
+export const DataService = {
+  // 获取系统状态
+  async getSystemStatus() {
+    return await apiRequest('/api/system/status')
+  },
+
+  // 获取插件列表
+  async getPlugins() {
+    return await apiRequest('/api/plugins')
+  },
+
+  // 获取适配器列表
+  async getAdapters() {
+    return await apiRequest('/api/adapters')
+  },
+
+  // 获取配置信息
+  async getConfig() {
+    return await apiRequest('/api/config')
+  },
+
+  // 获取日志
+  async getLogs() {
+    return await apiRequest('/api/logs')
+  },
+
+  // 健康检查
+  async healthCheck() {
+    return await apiRequest('/api/health')
+  },
+
+  // 发送消息
+  async sendMessage(data: {
+    context: string
+    bot: string
+    id: string
+    type: string
+    content: string
+  }) {
+    try {
+      const response = await fetch(`${getBaseUrl()}/api/message/send`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+      return await response.json()
+    } catch (error) {
+      // console.error 已替换为注释
+      return { success: false, error: error.message }
+    }
+  },
+
+  // 重载插件
+  async reloadPlugin(pluginName: string) {
+    try {
+      const response = await fetch(`${getBaseUrl()}/api/plugins/${pluginName}/reload`, {
+        method: 'POST'
+      })
+      return await response.json()
+    } catch (error) {
+      // console.error 已替换为注释
+      return { success: false, error: error.message }
+    }
+  }
+}
+
+// 全面更新所有数据
+export const updateAllData = async () => {
+  const commonStore = useCommonStore()
+  
+  try {
+    // console.log 已替换为注释
+    
+    const [systemRes, pluginsRes, adaptersRes, configRes] = await Promise.all([
+      DataService.getSystemStatus(),
+      DataService.getPlugins(),
+      DataService.getAdapters(),
+      DataService.getConfig()
+    ])
+
+    // 更新系统数据
+    if (systemRes.success) {
+      commonStore.syncData({ key: 'system', value: systemRes.data })
+      // console.log 已替换为注释
+    } else {
+      // console.warn 已替换为注释
+    }
+
+    // 更新插件数据
+    if (pluginsRes.success) {
+      commonStore.syncData({ key: 'plugins', value: pluginsRes.data })
+      // console.log 已替换为注释
+    } else {
+      // console.warn 已替换为注释
+    }
+
+    // 更新适配器数据
+    if (adaptersRes.success) {
+      commonStore.syncData({ key: 'adapters', value: adaptersRes.data })
+      // console.log 已替换为注释
+    } else {
+      // console.warn 已替换为注释
+    }
+
+    // 更新配置数据
+    if (configRes.success) {
+      commonStore.syncData({ key: 'config', value: configRes.data })
+      // console.log 已替换为注释
+    } else {
+      // console.warn 已替换为注释
+    }
+
+    return {
+      success: true,
+      results: { systemRes, pluginsRes, adaptersRes, configRes }
+    }
+    
+  } catch (error) {
+    // console.error 已替换为注释
+    return { success: false, error }
+  }
+}
+
+// 导出给全局使用
+declare global {
+  interface Window {
+    DataService: typeof DataService
+    updateAllData: typeof updateAllData
+  }
+}
+
+// 挂载到 window 对象，方便调试
+if (typeof window !== 'undefined') {
+  window.DataService = DataService
+  window.updateAllData = updateAllData
+}

package/app/src/styles/README.md

@@ -0,0 +1,202 @@
+# 通用样式系统
+
+基于 PrimeVue 的积木式页面构建系统，让开发者无需编写任何自定义样式，就能构建统一、美观、响应式的页面。
+
+## 设计理念
+
+- **零自定义样式**: 页面组件的 `<style>` 部分只需要一行注释
+- **积木式构建**: 使用预定义的 class 和 PrimeVue 组件组合
+- **主题一致性**: 自动适配 PrimeVue 主题，支持明暗切换
+- **响应式优先**: 所有组件都包含完整的响应式断点
+
+## 核心组件
+
+### 页面布局
+
+```vue
+<template>
+  <div class="page-layout">
+    <!-- 页面头部 -->
+    <Card class="page-header-card">
+      <template #content>
+        <div class="flex-row justify-between">
+          <div class="flex-row">
+            <div class="icon-container icon-primary">
+              <i class="pi pi-desktop"></i>
+            </div>
+            <div class="flex-column">
+              <h1>页面标题</h1>
+              <p>页面描述</p>
+            </div>
+          </div>
+          <Button icon="pi pi-refresh" label="操作" />
+        </div>
+      </template>
+    </Card>
+    
+    <!-- 统计卡片 -->
+    <div class="stats-container">
+      <Card class="stats-card">
+        <template #content>
+          <div class="flex-row gap-large">
+            <div class="icon-container icon-blue">
+              <i class="pi pi-chart-bar"></i>
+            </div>
+            <div class="flex-column flex-1">
+              <div class="stat-value">123</div>
+              <div class="stat-label">统计标签</div>
+              <div class="stat-sub">辅助信息</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+    
+    <!-- 主内容区域 -->
+    <div class="layout-container">
+      <div class="layout-main">
+        <Card class="content-card">
+          <template #title>
+            <i class="pi pi-list"></i>
+            <span>内容标题</span>
+          </template>
+          <template #content>
+            <!-- 内容 -->
+          </template>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+### 布局类
+
+| Class | 说明 | 用途 |
+|-------|------|------|
+| `page-layout` | 页面根容器 | 设置基础布局结构 |
+| `page-header-card` | 页面头部卡片 | 渐变背景的页面标题区域 |
+| `stats-container` | 统计卡片容器 | Flex 布局的统计卡片组 |
+| `stats-card` | 统计卡片 | 带悬停效果的统计卡片 |
+| `content-card` | 内容卡片 | 标准内容卡片样式 |
+| `layout-container` | 主布局容器 | 两栏布局容器 |
+| `layout-main` | 主内容区域 | 左侧主要内容 |
+| `layout-sidebar` | 侧边栏区域 | 右侧辅助内容 |
+
+### Flex 工具类
+
+| Class | 说明 |
+|-------|------|
+| `flex-row` | 水平 Flex 布局 |
+| `flex-column` | 垂直 Flex 布局 |
+| `flex-1` | flex: 1 |
+| `flex-none` | flex: none |
+| `justify-between` | justify-content: space-between |
+| `gap-large` | 较大间距 |
+
+### 图标容器
+
+```vue
+<!-- 大图标容器 -->
+<div class="icon-container icon-primary">
+  <i class="pi pi-desktop"></i>
+</div>
+
+<!-- 小图标容器 -->
+<div class="icon-container icon-small icon-blue">
+  <i class="pi pi-user"></i>
+</div>
+```
+
+#### 图标主题色
+
+| Class | 颜色 | 用途 |
+|-------|------|------|
+| `icon-primary` | 主题色 | 通用图标 |
+| `icon-blue` | 蓝色 | 信息类图标 |
+| `icon-green` | 绿色 | 成功/活跃类图标 |
+| `icon-purple` | 紫色 | 特殊功能图标 |
+| `icon-orange` | 橙色 | 警告/重要图标 |
+
+### 详情项目
+
+```vue
+<div class="detail-grid">
+  <div class="detail-item">
+    <div class="icon-container icon-small icon-blue">
+      <i class="pi pi-user"></i>
+    </div>
+    <div class="flex-column flex-1">
+      <div class="detail-label">标签</div>
+      <div class="detail-value">值</div>
+    </div>
+  </div>
+</div>
+```
+
+### 上下文项目
+
+```vue
+<div class="grid-auto-fit">
+  <div class="context-item">
+    <div class="icon-container icon-small icon-primary">
+      <i class="pi pi-server"></i>
+    </div>
+    <div class="flex-column flex-1">
+      <div class="detail-label">服务名称</div>
+      <div class="detail-value">描述</div>
+    </div>
+    <Tag value="状态" severity="success" size="small" />
+  </div>
+</div>
+```
+
+### 空状态
+
+```vue
+<div class="empty-state">
+  <div class="icon-container">
+    <i class="pi pi-inbox"></i>
+  </div>
+  <h3>空状态标题</h3>
+  <p>空状态描述</p>
+</div>
+```
+
+### 文本样式类
+
+| Class | 说明 |
+|-------|------|
+| `stat-value` | 统计数值 |
+| `stat-label` | 统计标签 |
+| `stat-sub` | 统计辅助信息 |
+| `detail-label` | 详情标签 |
+| `detail-value` | 详情值 |
+
+## 响应式断点
+
+- **桌面**: `>1024px` - 完整的两栏布局
+- **平板**: `768px-1024px` - 垂直堆叠布局
+- **手机**: `<768px` - 紧凑单列布局
+- **小屏**: `<480px` - 极简垂直布局
+
+## 主题支持
+
+系统完全基于 PrimeVue CSS 变量，支持：
+
+- 明暗主题自动切换
+- 自定义主题色彩
+- 品牌色彩一致性
+- 无缝主题过渡
+
+## 使用示例
+
+参见 `components/StyleGuide.vue` 中的完整示例，展示了如何使用这个系统快速构建功能完整、外观统一的页面。
+
+## 最佳实践
+
+1. **始终使用预定义类**: 不要编写自定义样式
+2. **保持组件简洁**: 让样式系统处理所有视觉呈现
+3. **利用 PrimeVue 组件**: Card、Button、Tag 等组件已经集成到系统中
+4. **响应式思维**: 系统已处理所有响应式场景
+5. **主题一致性**: 使用标准的图标主题色和 PrimeVue 严重度级别

package/app/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"],
+            "@zhin.js/client": [
+                "../src"
+            ]
+        }
+    }
+}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './router.js';
+export * from './types.js';
+export * from './store.js';
+//# sourceMappingURL=index.js.map

package/global.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+/// <reference types="@ionic/vue" />
+
+declare module '*.vue' {
+  import { Component } from 'vue';
+
+  const component: Component;
+  export default component;
+}
+
+declare module '*.yaml' {
+  const content: {};
+  export default content;
+}
+
+declare module '*.yml' {
+  const content: {};
+  export default content;
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@zhin.js/client",
+  "version": "1.0.0",
+  "description": "Zhin 客户端",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "pinia": "latest",
+    "primevue": "^4.3.7",
+    "primeicons": "latest",
+    "@primeuix/themes": "^1.2.3",
+    "vue-router": "latest"
+  },
+  "files": [
+    "lib",
+    "src",
+    "global.d.ts",
+    "app"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './router.js';
+export * from './types.js';
+export * from './store.js';