docs: 完善部署文档和修复 UI 问题

zsio · claude · zsio · commit 734cf3fa3865 · 2025-10-07T20:40:59.000+08:00
- 在 README 中添加 .env 文件配置示例，解决用户部署时环境变量配置不清晰的问题 - 修复统计图表 tooltip 显示空值数据的问题，提升数据可视化体验 - 添加全局 Footer 组件，完善页面布局 - 更新 MCP 工具配置，添加 shadcn 支持 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/.mcp.json b/.mcp.json
@@ -5,6 +5,13 @@
       "command": "npx",
       "args": ["@bytebase/dbhub"],
       "env": {}
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": [
+        "shadcn@latest",
+        "mcp"
+      ]
     }
   }
 }
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -2,6 +2,7 @@
 ## 项目简介
 
 Claude Code Hub 是一个 Claude Code API 代理中转服务平台，用于统一管理多个 CC 服务提供商，提供智能负载均衡、用户权限管理和使用统计功能。
+使用中文和用户沟通。
 
 ## 常用命令
 
diff --git a/README.md b/README.md
@@ -123,7 +123,19 @@ docker compose logs -f
    确保两个容器都是 `healthy` 或 `running` 状态
 
 
-### 环境变量说明
+### 环境变量配置
+
+在项目根目录创建 `.env` 文件：
+
+```bash
+# 管理员登录令牌（必须修改为强密码）
+ADMIN_TOKEN=!!!change-me-to-a-strong-password!!!
+
+# 数据库配置（可选，已有默认值）
+DB_USER=postgres
+DB_PASSWORD=!!!change-me!!!
+DB_NAME=claude_code_hub
+```
 
 <details>
 <summary><b>📝 完整环境变量配置说明</b></summary>
@@ -136,12 +148,6 @@ docker compose logs -f
 | `DB_NAME` | ❌ | `claude_code_hub` | 数据库名称 |
 | `AUTO_MIGRATE` | ❌ | `true` | 启动时自动执行数据库迁移 |
 
-**生产环境安全建议**：
-- ⚠️ 必须修改 `ADMIN_TOKEN` 为强密码（≥20 字符，包含大小写字母、数字、特殊符号）
-- ⚠️ 建议修改 `DB_PASSWORD` 为强密码
-- 🔒 如果暴露到公网，建议配置反向代理（Nginx）+ HTTPS
-- 🔒 限制数据库端口 `35432` 的外部访问
-
 </details>
 
 ### 管理命令
diff --git a/src/app/dashboard/_components/statistics/chart.tsx b/src/app/dashboard/_components/statistics/chart.tsx
@@ -354,19 +354,31 @@ export function UserStatisticsChart({ data, onTimeRangeChange, loading = false }
               content={({ active, payload, label }) => {
                 if (!active || !payload || !payload.length) return null
 
+                const filteredPayload = payload.filter(entry => {
+                  const value =
+                    typeof entry.value === "number"
+                      ? entry.value
+                      : Number(entry.value ?? 0)
+                  return !Number.isNaN(value) && value !== 0
+                })
+
+                if (!filteredPayload.length) {
+                  return <div className="hidden" />
+                }
+
                 return (
                   <div className="rounded-lg border bg-background p-3 shadow-sm min-w-[200px]">
                     <div className="grid gap-2">
                       <div className="font-medium text-center">
                         {formatTooltipDate(label)}
                       </div>
                       <div className="grid gap-1.5">
-                        {payload
-                          .sort((a, b) => (b.value as number) - (a.value as number))
+                        {[...filteredPayload]
+                          .sort((a, b) => (Number(b.value ?? 0) || 0) - (Number(a.value ?? 0) || 0))
                           .map((entry, index) => {
                           const baseKey = entry.dataKey?.toString().replace(`_${activeChart}`, '') || ''
                           const displayUser = userMap.get(baseKey)
-                          const value = entry.value as number
+                          const value = typeof entry.value === "number" ? entry.value : Number(entry.value ?? 0)
                           const color = entry.color
 
                           return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
+import { Footer } from "@/components/customs/footer";
 import { AppProviders } from "./providers";
 import { getSystemSettings } from "@/repository/system-config";
 
@@ -33,7 +34,10 @@ export default function RootLayout({
     <html lang="en">
       <body className="antialiased">
         <AppProviders>
-          {children}
+          <div className="flex min-h-screen flex-col bg-background text-foreground">
+            <main className="flex-1">{children}</main>
+            <Footer />
+          </div>
           <Toaster />
         </AppProviders>
       </body>
diff --git a/src/components/customs/footer.tsx b/src/components/customs/footer.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-border bg-background/80">
+      <div className="mx-auto flex w-full max-w-7xl flex-col items-center justify-between gap-2 px-6 py-6 text-sm text-muted-foreground sm:flex-row">
+        <p className="text-center sm:text-left">© {year} Claude Code Hub</p>
+        <Link
+          href="https://github.com/zsio/claude-code-hub"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="transition-colors hover:text-primary"
+        >
+          GitHub
+        </Link>
+      </div>
+    </footer>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,13 @@`
`5`	`5`	`"command": "npx",`
`6`	`6`	`"args": ["@bytebase/dbhub"],`
`7`	`7`	`"env": {}`
	`8`	`+ },`
	`9`	`+ "shadcn": {`
	`10`	`+ "command": "npx",`
	`11`	`+ "args": [`
	`12`	`+ "shadcn@latest",`
	`13`	`+ "mcp"`
	`14`	`+ ]`
`8`	`15`	`}`
`9`	`16`	`}`
`10`	`17`	`}`