Improve dashboard with refresh button, better polling, error handling and updated README

Co-authored-by: SilianZ <113701655+SilianZ@users.noreply.github.com>

Author: Copilot

dashboard/README.md

@@ -1,5 +1,73 @@
-# Vue 3 + TypeScript + Vite
+# Python-OpenBMCLAPI Dashboard
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+基于 Vue 3 + TypeScript + Vite 构建的 Python-OpenBMCLAPI 仪表盘。
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## 特性
+
+- 🎨 使用 PrimeVue 组件库实现现代化 UI
+- 📊 实时数据展示（每 5 秒自动刷新）
+- 📱 响应式设计，支持移动设备
+- 🌙 深色模式支持
+- 📈 多维度统计图表
+  - 当日/当月/当年请求统计
+  - 用户分布分析
+- ⚡ 性能监控
+  - CPU 使用率
+  - 内存使用情况
+  - 连接数
+  - 运行时间
+
+## 技术栈
+
+- [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架
+- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
+- [Vite](https://vitejs.dev/) - 新一代前端构建工具
+- [PrimeVue](https://primevue.org/) - Vue UI 组件库
+- [TailwindCSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
+- [Chart.js](https://www.chartjs.org/) - 图表库
+- [Vue Router](https://router.vuejs.org/) - Vue.js 官方路由
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 预览生产版本
+npm run preview
+
+# 格式化代码
+npm run format
+```
+
+## 项目结构
+
+```
+dashboard/
+├── src/
+│   ├── api/          # API 接口定义
+│   ├── component/    # 可复用组件
+│   ├── router/       # 路由配置
+│   ├── utils/        # 工具函数
+│   └── views/        # 页面视图
+├── public/           # 静态资源
+└── index.html        # 入口 HTML
+```
+
+## IDE 支持
+
+推荐使用 [VSCode](https://code.visualstudio.com/) 配合以下插件：
+- [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (之前称为 Volar)
+- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
+
+## 类型支持
+
+使用 Vue 3 `<script setup>` SFC，了解更多请参考 [script setup 文档](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup)。
+
+更多关于项目设置和 IDE 支持的信息，请参考 [Vue 文档 TypeScript 指南](https://vuejs.org/guide/typescript/overview.html#project-setup)。

dashboard/src/App.vue

@@ -16,7 +16,7 @@ const items = ref([
     {
         label: 'GitHub',
         icon: 'pi pi-github',
-        url: 'https://github.com/SilianZ/one-openbmclapi-dashboard'
+        url: 'https://github.com/TTB-Network/python-openbmclapi-v2'
     }
 ])
 

dashboard/src/views/HomeView.vue

@@ -7,7 +7,10 @@ import { fetchStat } from '../api'
 import { ref } from 'vue'
 import { watch } from 'vue'
 
-const { data } = useRequest((): Promise<StatsRes> => fetchStat(), { pollingInterval: 100000 })
+const { data, refresh, loading, error } = useRequest((): Promise<StatsRes> => fetchStat(), { 
+    pollingInterval: 5000, // Poll every 5 seconds for real-time updates
+    refreshOnWindowFocus: true // Refresh when user returns to tab
+})
 
 const stats = ref<StatsRes | null>(null)
 
@@ -24,7 +27,22 @@ watch(
 </script>
 
 <template>
-    <h1>主页</h1>
+    <div class="flex justify-between items-center mb-4">
+        <h1>主页</h1>
+        <button 
+            @click="refresh" 
+            :disabled="loading"
+            class="refresh-btn px-4 py-2 rounded-lg transition-colors"
+            :class="loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
+        >
+            <i class="pi pi-refresh" :class="loading ? 'pi-spin' : ''"></i>
+            刷新
+        </button>
+    </div>
+    <div v-if="error" class="error-message p-4 mb-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">
+        <i class="pi pi-exclamation-triangle mr-2"></i>
+        加载数据时出错，请稍后重试
+    </div>
     <StatsComponent :data="stats" />
     <ChartsComponent :data="stats" />
 </template>
@@ -41,9 +59,27 @@ h1 {
     unicode-bidi: isolate;
 }
 
+.refresh-btn {
+    border: 1px solid var(--p-content-border-color);
+    background: var(--p-content-background);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.error-message {
+    display: flex;
+    align-items: center;
+}
+
 @media screen and (max-width: 720px) {
     h1 {
         font-size: 30px;
     }
+    .refresh-btn {
+        font-size: 14px;
+        padding: 0.5rem 1rem;
+    }
 }
 </style>