openclaw-agent-dashboard 1.0.10 → 1.0.11

package/frontend/src/App.vue

@@ -51,6 +51,9 @@
       :agent="selectedAgent"
       @close="selectedAgent = null"
     />
+    
+    <!-- 版本号显示 -->
+    <VersionDisplay />
   </div>
 </template>
 
@@ -65,6 +68,9 @@ import TaskStatusSection from './components/tasks/TaskStatusSection.vue'
 import PerformancePanel from './components/performance/PerformancePanel.vue'
 import ErrorCenterPanel from './components/ErrorCenterPanel.vue'
 
+// 版本显示组件
+import VersionDisplay from './components/common/VersionDisplay.vue'
+
 // 数据管理
 import { getRealtimeManager, getStateManager, getEventDispatcher } from './managers'
 import type { ConnectionState } from './types'

package/frontend/src/components/common/VersionDisplay.vue

@@ -0,0 +1,185 @@
+<template>
+  <!-- 版本号显示组件 -->
+  <div class="version-display">
+    <!-- 加载中状态 -->
+    <template v-if="loading">
+      <span class="loading-text">加载中...</span>
+    </template>
+    
+    <!-- 错误状态 -->
+    <template v-else-if="error">
+      <span class="error-text">版本信息获取失败</span>
+    </template>
+    
+    <!-- 正常显示 -->
+    <template v-else>
+      <span 
+        class="version-text" 
+        @mouseenter="showTooltip = true" 
+        @mouseleave="showTooltip = false"
+      >
+        {{ displayText }}
+      </span>
+      
+      <!-- hover 提示框 -->
+      <div v-if="showTooltip" class="tooltip">
+        <div class="tooltip-item"><strong>名称:</strong> {{ versionInfo.name }}</div>
+        <div class="tooltip-item"><strong>版本:</strong> {{ versionInfo.version }}</div>
+        <div class="tooltip-item"><strong>描述:</strong> {{ versionInfo.description }}</div>
+        <div v-if="versionInfo.build_date" class="tooltip-item">
+          <strong>构建时间:</strong> {{ formatBuildDate(versionInfo.build_date) }}
+        </div>
+        <div v-if="versionInfo.git_commit" class="tooltip-item">
+          <strong>Git 提交:</strong> {{ versionInfo.git_commit }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 版本号显示组件
+ * 
+ * 功能：
+ * 1. 从 /api/version 接口获取版本信息
+ * 2. 在界面右下角显示版本号
+ * 3. hover 时显示完整的版本信息（名称、描述、构建时间等）
+ * 4. 支持加载中、错误等状态显示
+ */
+import { ref, onMounted, computed } from 'vue'
+
+// 版本信息接口定义
+interface VersionInfo {
+  version: string
+  name: string
+  description: string
+  build_date?: string
+  git_commit?: string
+}
+
+// 状态定义
+const loading = ref(true)
+const error = ref(false)
+const versionInfo = ref<VersionInfo>({
+  version: '',
+  name: '',
+  description: '',
+})
+const showTooltip = ref(false)
+
+// 计算显示文本
+const displayText = computed(() => {
+  if (versionInfo.value.name && versionInfo.value.version) {
+    return `${versionInfo.value.name} v${versionInfo.value.version}`
+  }
+  return versionInfo.value.version || 'v?'
+})
+
+/**
+ * 格式化构建时间
+ * @param dateStr 时间字符串
+ * @returns 格式化后的时间字符串
+ */
+const formatBuildDate = (dateStr: string) => {
+  try {
+    return new Date(dateStr).toLocaleString('zh-CN')
+  } catch {
+    return dateStr
+  }
+}
+
+/**
+ * 从 API 获取版本信息
+ */
+const fetchVersionInfo = async () => {
+  try {
+    loading.value = true
+    error.value = false
+    
+    const response = await fetch('/api/version')
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`)
+    }
+    
+    versionInfo.value = await response.json()
+  } catch (err) {
+    console.error('获取版本信息失败:', err)
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+// 组件挂载时获取版本信息
+onMounted(() => {
+  fetchVersionInfo()
+})
+</script>
+
+<style scoped>
+.version-display {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  font-size: 12px;
+  color: #999;
+  display: inline-block;
+  position: relative;
+  z-index: 1000;
+}
+
+.loading-text,
+.error-text {
+  color: #aaa;
+}
+
+.version-text {
+  cursor: pointer;
+  transition: color 0.2s;
+  user-select: none;
+}
+
+.version-text:hover {
+  color: #666;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 8px 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  white-space: nowrap;
+  z-index: 1001;
+  min-width: 200px;
+}
+
+.tooltip-item {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #333;
+}
+
+.tooltip-item strong {
+  color: #666;
+  margin-right: 4px;
+}
+
+/* 响应式调整 */
+@media (max-width: 640px) {
+  .version-display {
+    bottom: 8px;
+    right: 8px;
+    font-size: 11px;
+  }
+  
+  .tooltip {
+    min-width: 160px;
+    font-size: 11px;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openclaw-agent-dashboard",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "多 Agent 可视化看板 - 状态、任务、API、工作流、协作流程",
   "bin": {
     "openclaw-agent-dashboard": "scripts/install.js"

package/plugin/openclaw.plugin.json

@@ -2,7 +2,7 @@
   "id": "openclaw-agent-dashboard",
   "name": "OpenClaw Agent Dashboard",
   "description": "多 Agent 可视化看板 - 状态、任务、API、工作流、协作流程",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "configSchema": {
     "type": "object",
     "additionalProperties": false,

package/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openclaw-agent-dashboard",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "多 Agent 可视化看板 - OpenClaw 插件",
   "main": "index.js",
   "openclaw": {

package/scripts/install-python-deps.js

@@ -115,15 +115,44 @@ function getVenvPython(venvDir) {
 // Pip 镜像
 // ============================================
 
+// ============================================
+// PyPI 连通性检测
+// ============================================
+
+/**
+ * 检测 pypi.org 是否可达（超时 3 秒）
+ * @returns {boolean}
+ */
+function checkPypiReachable() {
+  try {
+    const https = require('https');
+    return new Promise((resolve) => {
+      const req = https.get('https://pypi.org/simple/', { timeout: 3000 }, (res) => {
+        resolve(res.statusCode === 200);
+        req.destroy();
+      });
+      req.on('timeout', () => { req.destroy(); resolve(false); });
+      req.on('error', () => { resolve(false); });
+    });
+  } catch {
+    return false;
+  }
+}
+
 /**
  * 获取 pip 镜像参数
- * 支持环境变量 PIP_INDEX_URL 或 PIP_MIRROR
- * @returns {string[]}
+ * 优先级: 环境变量 > 自动检测（pypi 不通则用清华镜像）> 无镜像
+ * @returns {Promise<string[]>}
  */
-function getPipMirrorArgs() {
-  const mirror = process.env.PIP_INDEX_URL || process.env.PIP_MIRROR || '';
-  if (mirror) {
-    return ['-i', mirror, '--trusted-host', new URL(mirror).hostname];
+async function getPipMirrorArgs() {
+  const envMirror = process.env.PIP_INDEX_URL || process.env.PIP_MIRROR || '';
+  if (envMirror) {
+    return ['-i', envMirror, '--trusted-host', new URL(envMirror).hostname];
+  }
+  const reachable = await checkPypiReachable();
+  if (!reachable) {
+    logInfo('  pypi.org 不可达，使用清华镜像');
+    return ['-i', 'https://pypi.tuna.tsinghua.edu.cn/simple', '--trusted-host', 'pypi.tuna.tsinghua.edu.cn'];
   }
   return [];
 }
@@ -168,7 +197,7 @@ function installWithVenv(reqFile, venvDir, silent) {
 
   // 升级 pip（静默，失败不影响）
   // 如果设了镜像，升级 pip 也用镜像
-  const pipMirrorArgs = getPipMirrorArgs();
+  const pipMirrorArgs = await getPipMirrorArgs();
   runCommand(venvPython, ['-m', 'pip', 'install', '--upgrade', 'pip', '-q', ...pipMirrorArgs], { silent: true });
 
   // 安装依赖
@@ -211,7 +240,7 @@ function installWithVenv(reqFile, venvDir, silent) {
 function installWithPipUser(reqFile, silent) {
   logInfo('  尝试: pip --user（PEP 668 兜底）');
 
-  const pipMirrorArgs = getPipMirrorArgs();
+  const pipMirrorArgs = await getPipMirrorArgs();
   const tsinghuaArgs = ['-i', 'https://pypi.tuna.tsinghua.edu.cn/simple', '--trusted-host', 'pypi.tuna.tsinghua.edu.cn'];
 
   const pipCommands = [

package/scripts/test_version_display.sh

@@ -0,0 +1,128 @@
+#!/bin/bash
+# 版本号显示功能 - 快速测试脚本
+
+set -e
+
+PROJECT_DIR="/home/ubuntu/vrt-projects/projects/openclaw-agent-dashboard"
+cd "$PROJECT_DIR"
+
+echo "=================================="
+echo "版本号显示功能 - 快速测试"
+echo "=================================="
+echo ""
+
+# 颜色定义
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# 测试函数
+test_passed() {
+    echo -e "${GREEN}✅ 通过${NC}: $1"
+}
+
+test_failed() {
+    echo -e "${RED}❌ 失败${NC}: $1"
+}
+
+test_info() {
+    echo -e "${YELLOW}ℹ️  信息${NC}: $1"
+}
+
+echo "1. 检查文件是否存在"
+echo "----------------------------------"
+
+FILES=(
+    "src/backend/data/version_info_reader.py"
+    "src/backend/api/version.py"
+    "frontend/src/components/common/VersionDisplay.vue"
+    ".staging/traceability_manifest.json"
+    ".staging/VERSION_DISPLAY_implementation_summary.md"
+)
+
+for file in "${FILES[@]}"; do
+    if [ -f "$file" ]; then
+        test_passed "文件存在: $file"
+    else
+        test_failed "文件缺失: $file"
+    fi
+done
+
+echo ""
+echo "2. 检查 Python 语法"
+echo "----------------------------------"
+
+python3 -m py_compile src/backend/data/version_info_reader.py && \
+    test_passed "version_info_reader.py 语法正确" || \
+    test_failed "version_info_reader.py 语法错误"
+
+python3 -m py_compile src/backend/api/version.py && \
+    test_passed "version.py 语法正确" || \
+    test_failed "version.py 语法错误"
+
+echo ""
+echo "3. 检查 API 路由注册"
+echo "----------------------------------"
+
+if grep -q "from api import.*version" src/backend/main.py; then
+    test_passed "main.py 已导入 version 模块"
+else
+    test_failed "main.py 未导入 version 模块"
+fi
+
+if grep -q "app.include_router(version.router" src/backend/main.py; then
+    test_passed "main.py 已注册 version 路由"
+else
+    test_failed "main.py 未注册 version 路由"
+fi
+
+echo ""
+echo "4. 检查前端组件集成"
+echo "----------------------------------"
+
+if grep -q "import VersionDisplay from './components/common/VersionDisplay.vue'" frontend/src/App.vue; then
+    test_passed "App.vue 已导入 VersionDisplay 组件"
+else
+    test_failed "App.vue 未导入 VersionDisplay 组件"
+fi
+
+if grep -q "<VersionDisplay />" frontend/src/App.vue; then
+    test_passed "App.vue 模板包含 VersionDisplay 标签"
+else
+    test_failed "App.vue 模板缺少 VersionDisplay 标签"
+fi
+
+echo ""
+echo "5. 检查版本号数据源"
+echo "----------------------------------"
+
+if [ -f "package.json" ]; then
+    VERSION=$(python3 -c "import json; print(json.load(open('package.json')).get('version', 'unknown'))")
+    test_info "当前版本号: $VERSION"
+    test_passed "package.json 存在且可解析"
+else
+    test_failed "package.json 不存在"
+fi
+
+echo ""
+echo "6. 检查组件目录结构"
+echo "----------------------------------"
+
+if [ -d "frontend/src/components/common" ]; then
+    test_passed "common 目录已创建"
+else
+    test_failed "common 目录缺失"
+fi
+
+echo ""
+echo "=================================="
+echo "测试完成"
+echo "=================================="
+echo ""
+echo "后续步骤："
+echo "1. 启动服务: npm start"
+echo "2. 测试 API: curl http://localhost:8000/api/version"
+echo "3. 打开浏览器访问: http://localhost:8000"
+echo "4. 检查右下角是否显示版本号"
+echo ""

package/src/backend/api/version.py

@@ -0,0 +1,35 @@
+"""
+版本信息 API 路由
+
+提供 GET /api/version 端点，返回插件版本信息。
+"""
+from fastapi import APIRouter
+from pydantic import BaseModel
+from typing import Optional
+
+# 导入版本信息读取器
+from data.version_info_reader import get_version_reader
+
+router = APIRouter(prefix="/api", tags=["version"])
+
+
+class VersionInfo(BaseModel):
+    """版本信息数据模型"""
+    version: str  # 版本号，如 "1.0.10"
+    name: str  # 插件名称
+    description: str  # 插件描述
+    build_date: Optional[str] = None  # 构建时间（可选）
+    git_commit: Optional[str] = None  # Git 提交哈希（可选）
+
+
+@router.get("/version", response_model=VersionInfo)
+async def get_version_info() -> VersionInfo:
+    """
+    获取插件版本信息
+    
+    Returns:
+        VersionInfo: 包含版本号、名称、描述等信息的对象
+    """
+    reader = get_version_reader()
+    version_data = reader.read_version_info()
+    return VersionInfo(**version_data)

package/src/backend/data/version_info_reader.py

@@ -0,0 +1,110 @@
+"""
+版本信息读取器
+
+负责从 package.json 读取版本信息，支持缓存机制。
+在应用启动时读取并缓存，后续请求直接返回缓存数据。
+"""
+from pathlib import Path
+from typing import Optional
+import json
+import logging
+import os
+
+logger = logging.getLogger(__name__)
+
+
+class VersionInfoReader:
+    """版本信息读取器，支持缓存"""
+    
+    def __init__(self, package_json_path: Optional[Path] = None):
+        """
+        初始化版本信息读取器
+        
+        Args:
+            package_json_path: package.json 文件路径，默认为项目根目录下的 package.json
+        """
+        # 默认路径：src/backend/data -> src/backend -> src -> package.json
+        self.package_json_path = package_json_path or Path(__file__).parent.parent.parent / "package.json"
+        self._cached_info: Optional[dict] = None
+    
+    def read_version_info(self) -> dict:
+        """
+        读取版本信息（带缓存）
+        
+        Returns:
+            dict: 包含 version, name, description 等字段的字典
+        """
+        if self._cached_info is not None:
+            return self._cached_info
+        
+        try:
+            with open(self.package_json_path, 'r', encoding='utf-8') as f:
+                package_data = json.load(f)
+            
+            self._cached_info = {
+                "version": package_data.get("version", "unknown"),
+                "name": package_data.get("name", "openclaw-agent-dashboard"),
+                "description": package_data.get("description", ""),
+            }
+            
+            # 可选：读取构建时间（从环境变量）
+            build_date = self._read_build_date()
+            if build_date:
+                self._cached_info["build_date"] = build_date
+            
+            # 可选：读取 Git 提交哈希
+            git_commit = self._read_git_commit()
+            if git_commit:
+                self._cached_info["git_commit"] = git_commit
+            
+            logger.info(f"成功读取版本信息: {self._cached_info['version']}")
+            return self._cached_info
+            
+        except Exception as e:
+            # 降级：返回默认值
+            logger.error(f"读取版本信息失败: {e}", exc_info=True)
+            self._cached_info = {
+                "version": "unknown",
+                "name": "openclaw-agent-dashboard",
+                "description": "",
+            }
+            return self._cached_info
+    
+    def _read_build_date(self) -> Optional[str]:
+        """
+        读取构建时间（从环境变量）
+        
+        Returns:
+            Optional[str]: 构建时间字符串，如果未设置则返回 None
+        """
+        return os.getenv("DASHBOARD_BUILD_DATE")
+    
+    def _read_git_commit(self) -> Optional[str]:
+        """
+        读取 Git 提交哈希（从环境变量）
+        
+        Returns:
+            Optional[str]: Git 提交哈希（短格式），如果未设置则返回 None
+        """
+        return os.getenv("DASHBOARD_GIT_COMMIT")
+    
+    def clear_cache(self):
+        """清除缓存（用于测试或强制刷新）"""
+        self._cached_info = None
+
+
+# 全局单例实例
+_version_reader: Optional[VersionInfoReader] = None
+
+
+def get_version_reader() -> VersionInfoReader:
+    """
+    获取全局版本信息读取器实例
+    
+    Returns:
+        VersionInfoReader: 版本信息读取器实例
+    """
+    global _version_reader
+    if _version_reader is None:
+        _version_reader = VersionInfoReader()
+    return _version_reader

package/src/backend/main.py

@@ -47,7 +47,7 @@ app.add_middleware(
 import sys
 sys.path.append(str(Path(__file__).parent))
 
-from api import agents, subagents, websocket, performance, collaboration, agents_config, errors, timeline, chains, agent_config_api, error_analysis, debug_paths
+from api import agents, subagents, websocket, performance, collaboration, agents_config, errors, timeline, chains, agent_config_api, error_analysis, debug_paths, version
 
 # 注册 API 路由
 app.include_router(agents.router, prefix="/api", tags=["agents"])
@@ -62,6 +62,7 @@ app.include_router(chains.router, prefix="/api", tags=["chains"])
 app.include_router(agent_config_api.router, prefix="/api", tags=["agent-config"])
 app.include_router(error_analysis.router, prefix="/api", tags=["error-analysis"])
 app.include_router(debug_paths.router, prefix="/api", tags=["debug"])
+app.include_router(version.router, prefix="/api", tags=["version"])
 
 
 @app.get("/health")