@zhin.js/client 1.0.0 → 1.0.1

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

@@ -1,241 +0,0 @@
-<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

@@ -1,155 +0,0 @@
-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

@@ -1,202 +0,0 @@
-# 通用样式系统
-
-基于 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/global.d.ts

@@ -1,19 +0,0 @@
-/// <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/src/router.ts

@@ -1,44 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import { useCommonStore } from './store.js';
-import { MenuWithComponent, ToolInfo } from './types.js';
-export const router = createRouter({
-  history: createWebHistory(),
-  routes: [],
-});
-
-router.beforeEach(async (to, from, next) => {
-  const commonStore = useCommonStore();
-  if (!commonStore.initialized) {
-    await commonStore.initial;
-    return next({ ...to, replace: true });
-  }
-  return next();
-});
-export function addPage(menu: MenuWithComponent) {
-  if (menu.parentName) {
-    router.addRoute(menu.parentName, {
-      path: menu.path,
-      name: menu.name,
-      component: menu.component,
-      children: [],
-    });
-  } else {
-    router.addRoute({
-      path: menu.path,
-      name: menu.name,
-      component: menu.component,
-      children: [],
-    });
-  }
-  useCommonStore().addData({
-    key: 'menus',
-    value: menu,
-  });
-  return () => router.removeRoute(menu.name);
-}
-export function addTool(tool: ToolInfo) {
-  useCommonStore().addData({
-    key: 'tools',
-    value: tool,
-  });
-}