Compare commits
1 Commits
834aa12076
...
worktree-s
| Author | SHA1 | Date | |
|---|---|---|---|
|
44256a511c |
Binary file not shown.
Binary file not shown.
Submodule .claude/worktrees/saas-backend deleted from 4d8d560d1f
93
.dockerignore
Normal file
93
.dockerignore
Normal file
@@ -0,0 +1,93 @@
|
||||
# ============================================================
|
||||
# ZCLAW SaaS Backend - Docker Ignore
|
||||
# ============================================================
|
||||
|
||||
# Build artifacts
|
||||
target/
|
||||
|
||||
# Frontend applications (not needed for SaaS backend)
|
||||
desktop/
|
||||
admin/
|
||||
design-system/
|
||||
|
||||
# Node.js
|
||||
node_modules/
|
||||
.pnpm-store/
|
||||
bun.lock
|
||||
pnpm-lock.yaml
|
||||
package.json
|
||||
package-lock.json
|
||||
|
||||
# Git
|
||||
.git/
|
||||
.gitignore
|
||||
|
||||
# IDE and editor
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Docker
|
||||
.docker/
|
||||
docker-compose*.yml
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
|
||||
# Documentation
|
||||
docs/
|
||||
*.md
|
||||
!saas-config.toml
|
||||
CLAUDE.md
|
||||
CLAUDE*.md
|
||||
|
||||
# Environment files (secrets)
|
||||
.env
|
||||
.env.*
|
||||
saas-env.example
|
||||
|
||||
# Data files
|
||||
saas-data/
|
||||
saas-data.db
|
||||
saas-data.db-shm
|
||||
saas-data.db-wal
|
||||
*.db
|
||||
*.db-shm
|
||||
*.db-wal
|
||||
|
||||
# Test artifacts
|
||||
tests/
|
||||
test-results/
|
||||
test.rs
|
||||
*.log
|
||||
|
||||
# Temporary files
|
||||
tmp-screenshot.png
|
||||
tmp/
|
||||
temp/
|
||||
*.tmp
|
||||
|
||||
# Claude worktree metadata
|
||||
.claude/
|
||||
plans/
|
||||
pipelines/
|
||||
scripts/
|
||||
hands/
|
||||
skills/
|
||||
plugins/
|
||||
config/
|
||||
extract.js
|
||||
extract_models.js
|
||||
extract_privacy.js
|
||||
start-all.ps1
|
||||
start.ps1
|
||||
start.sh
|
||||
Makefile
|
||||
PROGRESS.md
|
||||
CHANGELOG.md
|
||||
pencil-new.pen
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -12,10 +12,6 @@ build/
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# SaaS config (contains database credentials)
|
||||
saas-config.toml
|
||||
!saas-config.toml.example
|
||||
|
||||
# Logs
|
||||
logs/
|
||||
*.log
|
||||
|
||||
37
CLAUDE.md
37
CLAUDE.md
@@ -36,20 +36,17 @@ ZCLAW/
|
||||
│ ├── zclaw-kernel/ # L4: 核心协调 (注册, 调度, 事件, 工作流)
|
||||
│ ├── zclaw-skills/ # 技能系统 (SKILL.md解析, 执行器)
|
||||
│ ├── zclaw-hands/ # 自主能力 (Hand/Trigger 注册管理)
|
||||
│ ├── zclaw-protocols/ # 协议支持 (MCP, A2A)
|
||||
│ └── zclaw-saas/ # SaaS 后端 (账号, 模型配置, 中转, 配置同步)
|
||||
├── admin/ # Next.js 管理后台
|
||||
│ ├── zclaw-channels/ # 通道适配器 (仅 ConsoleChannel 测试适配器)
|
||||
│ └── zclaw-protocols/ # 协议支持 (MCP, A2A)
|
||||
├── desktop/ # Tauri 桌面应用
|
||||
│ ├── src/
|
||||
│ │ ├── components/ # React UI 组件 (含 SaaS 集成)
|
||||
│ │ ├── store/ # Zustand 状态管理 (含 saasStore)
|
||||
│ │ └── lib/ # 客户端通信 / 工具函数 (含 saas-client)
|
||||
│ │ ├── components/ # React UI 组件
|
||||
│ │ ├── store/ # Zustand 状态管理
|
||||
│ │ └── lib/ # 客户端通信 / 工具函数
|
||||
│ └── src-tauri/ # Tauri Rust 后端 (集成 Kernel)
|
||||
├── skills/ # SKILL.md 技能定义
|
||||
├── hands/ # HAND.toml 自主能力配置
|
||||
├── config/ # TOML 配置文件
|
||||
├── saas-config.toml # SaaS 后端配置 (PostgreSQL 连接等)
|
||||
├── docker-compose.yml # PostgreSQL 容器配置
|
||||
├── docs/ # 架构文档和知识库
|
||||
└── tests/ # Vitest 回归测试
|
||||
```
|
||||
@@ -69,9 +66,7 @@ ZCLAW/
|
||||
| 桌面框架 | Tauri 2.x |
|
||||
| 样式方案 | Tailwind CSS |
|
||||
| 配置格式 | TOML |
|
||||
| 后端核心 | Rust Workspace (9 crates) |
|
||||
| SaaS 后端 | Axum + PostgreSQL (zclaw-saas) |
|
||||
| 管理后台 | Next.js (admin/) |
|
||||
| 后端核心 | Rust Workspace (8 crates) |
|
||||
|
||||
### 2.3 Crate 依赖关系
|
||||
|
||||
@@ -84,9 +79,7 @@ zclaw-runtime (→ types, memory)
|
||||
↑
|
||||
zclaw-kernel (→ types, memory, runtime)
|
||||
↑
|
||||
zclaw-saas (→ types, 独立运行于 8080 端口)
|
||||
↑
|
||||
desktop/src-tauri (→ kernel, skills, hands, protocols)
|
||||
desktop/src-tauri (→ kernel, skills, hands, channels, protocols)
|
||||
```
|
||||
|
||||
***
|
||||
@@ -198,10 +191,10 @@ ZCLAW 提供 11 个自主能力包：
|
||||
| Predictor | 预测分析 | ❌ 已禁用 (enabled=false)，无 Rust 实现 |
|
||||
| Lead | 销售线索发现 | ❌ 已禁用 (enabled=false)，无 Rust 实现 |
|
||||
| Clip | 视频处理 | ⚠️ 需 FFmpeg |
|
||||
| Twitter | Twitter 自动化 | ✅ 可用（12 个 API v2 真实调用，写操作需 OAuth 1.0a） |
|
||||
| Twitter | Twitter 自动化 | ⚠️ 需 API Key |
|
||||
| Whiteboard | 白板演示 | ✅ 可用（导出功能开发中，标注 demo） |
|
||||
| Slideshow | 幻灯片生成 | ✅ 可用 |
|
||||
| Speech | 语音合成 | ✅ 可用（Browser TTS 前端集成完成） |
|
||||
| Speech | 语音合成 | ✅ 可用 |
|
||||
| Quiz | 测验生成 | ✅ 可用 |
|
||||
|
||||
**触发 Hand 时：**
|
||||
@@ -267,18 +260,6 @@ docs/
|
||||
- **面向未来** - 文档要帮助未来的开发者快速理解
|
||||
- **中文优先** - 所有面向用户的文档使用中文
|
||||
|
||||
### 8.3 完成工作后的文档同步（强制）
|
||||
|
||||
每次完成功能实现、架构变更、问题修复后，**必须**同步更新以下文档：
|
||||
|
||||
1. **CLAUDE.md** — 如果涉及项目结构、技术栈、工作流程、命令的变化
|
||||
2. **docs/features/** — 如果涉及新功能、功能变更、功能状态更新
|
||||
3. **docs/knowledge-base/** — 如果涉及新知识、故障排查经验、配置说明
|
||||
4. **saas-config.toml 注释** — 如果涉及 SaaS 配置项变更
|
||||
5. **CHANGELOG** — 如果涉及对外可见的行为变化
|
||||
|
||||
**执行时机：** 代码编译通过且验证成功后，在标记任务完成之前，立即执行文档更新。文档更新是任务完成的必要条件，不是可选步骤。
|
||||
|
||||
***
|
||||
|
||||
## 9. 常见问题排查
|
||||
|
||||
1088
Cargo.lock
generated
1088
Cargo.lock
generated
File diff suppressed because it is too large
Load Diff
10
Cargo.toml
10
Cargo.toml
@@ -9,6 +9,7 @@ members = [
|
||||
# ZCLAW Extension Crates
|
||||
"crates/zclaw-skills",
|
||||
"crates/zclaw-hands",
|
||||
"crates/zclaw-channels",
|
||||
"crates/zclaw-protocols",
|
||||
"crates/zclaw-pipeline",
|
||||
"crates/zclaw-growth",
|
||||
@@ -56,7 +57,7 @@ chrono = { version = "0.4", features = ["serde"] }
|
||||
uuid = { version = "1", features = ["v4", "v5", "serde"] }
|
||||
|
||||
# Database
|
||||
sqlx = { version = "0.7", features = ["runtime-tokio", "sqlite", "postgres"] }
|
||||
sqlx = { version = "0.7", features = ["runtime-tokio", "postgres", "chrono"] }
|
||||
libsqlite3-sys = { version = "0.27", features = ["bundled"] }
|
||||
|
||||
# HTTP client (for LLM drivers)
|
||||
@@ -93,10 +94,6 @@ regex = "1"
|
||||
# Shell parsing
|
||||
shlex = "1"
|
||||
|
||||
# WASM runtime
|
||||
wasmtime = { version = "43", default-features = false, features = ["cranelift"] }
|
||||
wasmtime-wasi = { version = "43" }
|
||||
|
||||
# Testing
|
||||
tempfile = "3"
|
||||
|
||||
@@ -104,7 +101,7 @@ tempfile = "3"
|
||||
axum = { version = "0.7", features = ["macros"] }
|
||||
axum-extra = { version = "0.9", features = ["typed-header"] }
|
||||
tower = { version = "0.4", features = ["util"] }
|
||||
tower-http = { version = "0.5", features = ["cors", "trace", "limit", "timeout"] }
|
||||
tower-http = { version = "0.5", features = ["cors", "trace", "limit"] }
|
||||
jsonwebtoken = "9"
|
||||
argon2 = "0.5"
|
||||
totp-rs = "5"
|
||||
@@ -117,6 +114,7 @@ zclaw-runtime = { path = "crates/zclaw-runtime" }
|
||||
zclaw-kernel = { path = "crates/zclaw-kernel" }
|
||||
zclaw-skills = { path = "crates/zclaw-skills" }
|
||||
zclaw-hands = { path = "crates/zclaw-hands" }
|
||||
zclaw-channels = { path = "crates/zclaw-channels" }
|
||||
zclaw-protocols = { path = "crates/zclaw-protocols" }
|
||||
zclaw-pipeline = { path = "crates/zclaw-pipeline" }
|
||||
zclaw-growth = { path = "crates/zclaw-growth" }
|
||||
|
||||
83
Dockerfile
Normal file
83
Dockerfile
Normal file
@@ -0,0 +1,83 @@
|
||||
# ============================================================
|
||||
# ZCLAW SaaS Backend - Multi-stage Docker Build
|
||||
# ============================================================
|
||||
|
||||
# ---- Stage 1: Builder ----
|
||||
FROM rust:1.75-bookworm AS builder
|
||||
|
||||
# Install build dependencies for sqlx (postgres) and libsqlite3-sys (bundled)
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
pkg-config \
|
||||
libssl-dev \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy workspace manifests first to leverage Docker layer caching
|
||||
COPY Cargo.toml Cargo.lock ./
|
||||
|
||||
# Create stub source files so cargo can resolve and cache dependencies
|
||||
# This avoids rebuilding dependencies when only application code changes
|
||||
RUN mkdir -p crates/zclaw-saas/src \
|
||||
&& echo 'fn main() {}' > crates/zclaw-saas/src/main.rs \
|
||||
&& for crate in zclaw-types zclaw-memory zclaw-runtime zclaw-kernel \
|
||||
zclaw-skills zclaw-hands zclaw-channels zclaw-protocols \
|
||||
zclaw-pipeline zclaw-growth; do \
|
||||
mkdir -p crates/$crate/src && echo '' > crates/$crate/src/lib.rs; \
|
||||
done \
|
||||
&& mkdir -p desktop/src-tauri/src && echo 'fn main() {}' > desktop/src-tauri/src/main.rs
|
||||
|
||||
# Pre-build dependencies (release profile with caching)
|
||||
RUN cargo build --release --package zclaw-saas 2>/dev/null || true
|
||||
|
||||
# Copy actual source code (invalidates stubs, triggers recompile of app code only)
|
||||
COPY crates/ crates/
|
||||
COPY desktop/ desktop/
|
||||
|
||||
# Touch source files to invalidate the stub timestamps
|
||||
RUN touch crates/zclaw-saas/src/main.rs \
|
||||
&& for crate in zclaw-types zclaw-memory zclaw-runtime zclaw-kernel \
|
||||
zclaw-skills zclaw-hands zclaw-channels zclaw-protocols \
|
||||
zclaw-pipeline zclaw-growth; do \
|
||||
touch crates/$crate/src/lib.rs 2>/dev/null || true; \
|
||||
done \
|
||||
&& touch desktop/src-tauri/src/main.rs 2>/dev/null || true
|
||||
|
||||
# Build the actual binary
|
||||
RUN cargo build --release --package zclaw-saas
|
||||
|
||||
# ---- Stage 2: Runtime ----
|
||||
FROM debian:bookworm-slim AS runtime
|
||||
|
||||
# Install runtime dependencies (ca-certificates for HTTPS, libgcc for Rust runtime)
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
ca-certificates \
|
||||
libgcc-s \
|
||||
&& rm -rf /var/lib/apt/lists/* \
|
||||
&& update-ca-certificates
|
||||
|
||||
# Create non-root user for security
|
||||
RUN groupadd --gid 1000 zclaw \
|
||||
&& useradd --uid 1000 --gid zclaw --shell /bin/false zclaw
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy binary from builder
|
||||
COPY --from=builder /app/target/release/zclaw-saas /app/zclaw-saas
|
||||
|
||||
# Copy configuration file
|
||||
COPY saas-config.toml /app/saas-config.toml
|
||||
|
||||
# Ensure the non-root user owns the application files
|
||||
RUN chown -R zclaw:zclaw /app
|
||||
|
||||
USER zclaw
|
||||
|
||||
# Expose the SaaS API port
|
||||
EXPOSE 8080
|
||||
|
||||
# Health check endpoint (matches the saas-config.toml port)
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
|
||||
CMD ["/app/zclaw-saas", "--healthcheck"] || exit 1
|
||||
|
||||
ENTRYPOINT ["/app/zclaw-saas"]
|
||||
33
Makefile
33
Makefile
@@ -1,7 +1,9 @@
|
||||
# ZCLAW Makefile
|
||||
# Cross-platform task runner
|
||||
|
||||
.PHONY: help start start-dev start-no-browser desktop desktop-build setup test clean
|
||||
.PHONY: help start start-dev start-no-browser desktop desktop-build setup test clean \
|
||||
saas-build saas-run saas-test saas-test-integration saas-clippy saas-migrate \
|
||||
saas-docker-up saas-docker-down saas-docker-build
|
||||
|
||||
help: ## Show this help message
|
||||
@echo "ZCLAW - AI Agent Desktop Client"
|
||||
@@ -71,3 +73,32 @@ clean-deep: clean ## Deep clean (including pnpm cache)
|
||||
@rm -rf desktop/pnpm-lock.yaml
|
||||
@rm -rf pnpm-lock.yaml
|
||||
@echo "Deep clean complete. Run 'pnpm install' to reinstall."
|
||||
|
||||
# === SaaS Backend ===
|
||||
|
||||
saas-build: ## Build zclaw-saas crate
|
||||
@cargo build -p zclaw-saas
|
||||
|
||||
saas-run: ## Start SaaS backend (cargo run)
|
||||
@cargo run -p zclaw-saas
|
||||
|
||||
saas-test: ## Run SaaS unit tests
|
||||
@cargo test -p zclaw-saas -- --test-threads=1
|
||||
|
||||
saas-test-integration: ## Run SaaS integration tests (requires PostgreSQL)
|
||||
@cargo test -p zclaw-saas -- --ignored --test-threads=1
|
||||
|
||||
saas-clippy: ## Run clippy on zclaw-saas
|
||||
@cargo clippy -p zclaw-saas -- -D warnings
|
||||
|
||||
saas-migrate: ## Run database migrations
|
||||
@cargo run -p zclaw-saas -- --migrate
|
||||
|
||||
saas-docker-up: ## Start SaaS services (PostgreSQL + backend)
|
||||
@docker compose up -d
|
||||
|
||||
saas-docker-down: ## Stop SaaS services
|
||||
@docker compose down
|
||||
|
||||
saas-docker-build: ## Build SaaS Docker images
|
||||
@docker compose build
|
||||
|
||||
24
admin-v2/.gitignore
vendored
24
admin-v2/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>admin-v2</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
{
|
||||
"name": "admin-v2",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/charts": "^2.6.7",
|
||||
"@ant-design/icons": "^6.1.1",
|
||||
"@ant-design/pro-components": "^2.8.10",
|
||||
"@ant-design/pro-layout": "^7.22.7",
|
||||
"@tanstack/react-query": "^5.95.2",
|
||||
"antd": "^6.3.4",
|
||||
"axios": "^1.14.0",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-router-dom": "^7.13.2",
|
||||
"zustand": "^5.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@types/node": "^24.12.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.4.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.57.0",
|
||||
"vite": "^8.0.1"
|
||||
}
|
||||
}
|
||||
5008
admin-v2/pnpm-lock.yaml
generated
5008
admin-v2/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
@@ -1,24 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -1,103 +0,0 @@
|
||||
// ============================================================
|
||||
// AdminLayout — ProLayout 管理后台布局
|
||||
// ============================================================
|
||||
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
|
||||
import ProLayout from '@ant-design/pro-layout'
|
||||
import {
|
||||
DashboardOutlined,
|
||||
TeamOutlined,
|
||||
CloudServerOutlined,
|
||||
ApiOutlined,
|
||||
KeyOutlined,
|
||||
BarChartOutlined,
|
||||
SwapOutlined,
|
||||
SettingOutlined,
|
||||
FileTextOutlined,
|
||||
MessageOutlined,
|
||||
RobotOutlined,
|
||||
LogoutOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { Avatar, Dropdown, message } from 'antd'
|
||||
import type { MenuDataItem } from '@ant-design/pro-layout'
|
||||
|
||||
const menuConfig: MenuDataItem[] = [
|
||||
{ path: '/', name: '仪表盘', icon: <DashboardOutlined /> },
|
||||
{ path: '/accounts', name: '账号管理', icon: <TeamOutlined />, permission: 'account:admin' },
|
||||
{ path: '/providers', name: '服务商', icon: <CloudServerOutlined />, permission: 'provider:manage' },
|
||||
{ path: '/models', name: '模型管理', icon: <ApiOutlined />, permission: 'model:read' },
|
||||
{ path: '/agent-templates', name: 'Agent 模板', icon: <RobotOutlined />, permission: 'model:read' },
|
||||
{ path: '/api-keys', name: 'API 密钥', icon: <KeyOutlined />, permission: 'admin:full' },
|
||||
{ path: '/usage', name: '用量统计', icon: <BarChartOutlined />, permission: 'admin:full' },
|
||||
{ path: '/relay', name: '中转任务', icon: <SwapOutlined />, permission: 'relay:use' },
|
||||
{ path: '/config', name: '系统配置', icon: <SettingOutlined />, permission: 'config:read' },
|
||||
{ path: '/prompts', name: '提示词管理', icon: <MessageOutlined />, permission: 'prompt:read' },
|
||||
{ path: '/logs', name: '操作日志', icon: <FileTextOutlined />, permission: 'admin:full' },
|
||||
]
|
||||
|
||||
function filterMenuByPermission(
|
||||
items: MenuDataItem[],
|
||||
hasPermission: (p: string) => boolean,
|
||||
): MenuDataItem[] {
|
||||
return items
|
||||
.filter((item) => !item.permission || hasPermission(item.permission as string))
|
||||
.map(({ permission, ...rest }) => ({
|
||||
...rest,
|
||||
children: rest.children ? filterMenuByPermission(rest.children, hasPermission) : undefined,
|
||||
}))
|
||||
}
|
||||
|
||||
export default function AdminLayout() {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const { account, hasPermission, logout } = useAuthStore()
|
||||
|
||||
const menuData = filterMenuByPermission(menuConfig, hasPermission)
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
message.success('已退出登录')
|
||||
navigate('/login', { replace: true })
|
||||
}
|
||||
|
||||
return (
|
||||
<ProLayout
|
||||
title="ZCLAW"
|
||||
logo={<div style={{ width: 28, height: 28, background: '#1677ff', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14 }}>Z</div>}
|
||||
layout="mix"
|
||||
fixSiderbar
|
||||
fixedHeader
|
||||
location={{ pathname: location.pathname }}
|
||||
menuDataRender={() => menuData}
|
||||
menuItemRender={(item, dom) => (
|
||||
<div onClick={() => item.path && navigate(item.path)}>{dom}</div>
|
||||
)}
|
||||
avatarProps={{
|
||||
src: undefined,
|
||||
title: account?.display_name || account?.username || 'Admin',
|
||||
size: 'small',
|
||||
render: (_, dom) => (
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: 'logout',
|
||||
icon: <LogoutOutlined />,
|
||||
label: '退出登录',
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</Dropdown>
|
||||
),
|
||||
}}
|
||||
suppressSiderWhenMenuEmpty
|
||||
contentStyle={{ padding: 24 }}
|
||||
>
|
||||
<Outlet />
|
||||
</ProLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { RouterProvider } from 'react-router-dom'
|
||||
import { ConfigProvider, App as AntApp } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import { router } from './router'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 30_000,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<AntApp>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
</AntApp>
|
||||
</ConfigProvider>,
|
||||
)
|
||||
@@ -1,170 +0,0 @@
|
||||
// ============================================================
|
||||
// 账号管理
|
||||
// ============================================================
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button, message, Tag, Modal, Form, Input, Select, Popconfirm, Space } from 'antd'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { accountService } from '@/services/accounts'
|
||||
import type { AccountPublic } from '@/types'
|
||||
|
||||
const roleLabels: Record<string, string> = {
|
||||
super_admin: '超级管理员',
|
||||
admin: '管理员',
|
||||
user: '用户',
|
||||
}
|
||||
|
||||
const roleColors: Record<string, string> = {
|
||||
super_admin: 'red',
|
||||
admin: 'blue',
|
||||
user: 'default',
|
||||
}
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
active: '正常',
|
||||
disabled: '已禁用',
|
||||
suspended: '已封禁',
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
active: 'green',
|
||||
disabled: 'default',
|
||||
suspended: 'red',
|
||||
}
|
||||
|
||||
export default function Accounts() {
|
||||
const queryClient = useQueryClient()
|
||||
const [form] = Form.useForm()
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['accounts'],
|
||||
queryFn: () => accountService.list(),
|
||||
})
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: Partial<AccountPublic> }) =>
|
||||
accountService.update(id, data),
|
||||
onSuccess: () => {
|
||||
message.success('更新成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['accounts'] })
|
||||
setModalOpen(false)
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '更新失败'),
|
||||
})
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: ({ id, status }: { id: string; status: AccountPublic['status'] }) =>
|
||||
accountService.updateStatus(id, { status }),
|
||||
onSuccess: () => {
|
||||
message.success('状态更新成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['accounts'] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '状态更新失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<AccountPublic>[] = [
|
||||
{ title: '用户名', dataIndex: 'username', width: 120 },
|
||||
{ title: '显示名', dataIndex: 'display_name', width: 120 },
|
||||
{ title: '邮箱', dataIndex: 'email', width: 180 },
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'role',
|
||||
width: 120,
|
||||
render: (_, record) => <Tag color={roleColors[record.role]}>{roleLabels[record.role] || record.role}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (_, record) => <Tag color={statusColors[record.status]}>{statusLabels[record.status] || record.status}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '2FA',
|
||||
dataIndex: 'totp_enabled',
|
||||
width: 80,
|
||||
render: (_, record) => record.totp_enabled ? <Tag color="green">已启用</Tag> : <Tag>未启用</Tag>,
|
||||
},
|
||||
{
|
||||
title: '最后登录',
|
||||
dataIndex: 'last_login_at',
|
||||
width: 180,
|
||||
render: (_, record) => record.last_login_at ? new Date(record.last_login_at).toLocaleString('zh-CN') : '-',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 200,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
|
||||
编辑
|
||||
</Button>
|
||||
{record.status === 'active' ? (
|
||||
<Popconfirm title="确定禁用此账号？" onConfirm={() => statusMutation.mutate({ id: record.id, status: 'disabled' })}>
|
||||
<Button size="small" danger>禁用</Button>
|
||||
</Popconfirm>
|
||||
) : (
|
||||
<Popconfirm title="确定启用此账号？" onConfirm={() => statusMutation.mutate({ id: record.id, status: 'active' })}>
|
||||
<Button size="small" type="primary">启用</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const handleSave = async () => {
|
||||
const values = await form.validateFields()
|
||||
if (editingId) {
|
||||
updateMutation.mutate({ id: editingId, data: values })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProTable<AccountPublic>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={() => []}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: data?.page_size ?? 20,
|
||||
current: data?.page ?? 1,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="编辑账号"
|
||||
open={modalOpen}
|
||||
onOk={handleSave}
|
||||
onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
|
||||
confirmLoading={updateMutation.isPending}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="display_name" label="显示名">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="email" label="邮箱">
|
||||
<Input type="email" />
|
||||
</Form.Item>
|
||||
<Form.Item name="role" label="角色">
|
||||
<Select options={[
|
||||
{ value: 'super_admin', label: '超级管理员' },
|
||||
{ value: 'admin', label: '管理员' },
|
||||
{ value: 'user', label: '用户' },
|
||||
]} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
import { useState } from 'react'
|
||||
@@ -1,190 +0,0 @@
|
||||
// ============================================================
|
||||
// Agent 模板管理
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button, message, Tag, Modal, Form, Input, Select, InputNumber, Space, Popconfirm, Descriptions } from 'antd'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { agentTemplateService } from '@/services/agent-templates'
|
||||
import type { AgentTemplate } from '@/types'
|
||||
|
||||
const { TextArea } = Input
|
||||
|
||||
const sourceLabels: Record<string, string> = { builtin: '内置', custom: '自定义' }
|
||||
const visibilityLabels: Record<string, string> = { public: '公开', team: '团队', private: '私有' }
|
||||
const statusLabels: Record<string, string> = { active: '活跃', archived: '已归档' }
|
||||
const statusColors: Record<string, string> = { active: 'green', archived: 'default' }
|
||||
|
||||
export default function AgentTemplates() {
|
||||
const queryClient = useQueryClient()
|
||||
const [form] = Form.useForm()
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [detailRecord, setDetailRecord] = useState<AgentTemplate | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['agent-templates'],
|
||||
queryFn: () => agentTemplateService.list(),
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Parameters<typeof agentTemplateService.create>[0]) =>
|
||||
agentTemplateService.create(data),
|
||||
onSuccess: () => {
|
||||
message.success('创建成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['agent-templates'] })
|
||||
setModalOpen(false)
|
||||
form.resetFields()
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '创建失败'),
|
||||
})
|
||||
|
||||
const archiveMutation = useMutation({
|
||||
mutationFn: (id: string) => agentTemplateService.archive(id),
|
||||
onSuccess: () => {
|
||||
message.success('已归档')
|
||||
queryClient.invalidateQueries({ queryKey: ['agent-templates'] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '归档失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<AgentTemplate>[] = [
|
||||
{ title: '名称', dataIndex: 'name', width: 160 },
|
||||
{ title: '分类', dataIndex: 'category', width: 100 },
|
||||
{ title: '模型', dataIndex: 'model', width: 140, render: (_, r) => r.model || '-' },
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'source',
|
||||
width: 80,
|
||||
render: (_, r) => <Tag>{sourceLabels[r.source] || r.source}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '可见性',
|
||||
dataIndex: 'visibility',
|
||||
width: 80,
|
||||
render: (_, r) => <Tag color="blue">{visibilityLabels[r.visibility] || r.visibility}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
render: (_, r) => <Tag color={statusColors[r.status]}>{statusLabels[r.status] || r.status}</Tag>,
|
||||
},
|
||||
{ title: '版本', dataIndex: 'current_version', width: 70 },
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => setDetailRecord(record)}>详情</Button>
|
||||
{record.status === 'active' && (
|
||||
<Popconfirm title="确定归档此模板？" onConfirm={() => archiveMutation.mutate(record.id)}>
|
||||
<Button size="small" danger>归档</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const handleCreate = async () => {
|
||||
const values = await form.validateFields()
|
||||
createMutation.mutate(values)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProTable<AgentTemplate>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={() => [
|
||||
<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); setModalOpen(true) }}>
|
||||
新建模板
|
||||
</Button>,
|
||||
]}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: data?.page_size ?? 20,
|
||||
current: data?.page ?? 1,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="新建 Agent 模板"
|
||||
open={modalOpen}
|
||||
onOk={handleCreate}
|
||||
onCancel={() => { setModalOpen(false); form.resetFields() }}
|
||||
confirmLoading={createMutation.isPending}
|
||||
width={640}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Form.Item name="category" label="分类">
|
||||
<Input placeholder="如 assistant, tool" />
|
||||
</Form.Item>
|
||||
<Form.Item name="model" label="默认模型">
|
||||
<Input placeholder="如 gpt-4o" />
|
||||
</Form.Item>
|
||||
<Form.Item name="system_prompt" label="系统提示词">
|
||||
<TextArea rows={4} />
|
||||
</Form.Item>
|
||||
<Form.Item name="temperature" label="Temperature">
|
||||
<InputNumber min={0} max={2} step={0.1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="max_tokens" label="最大 Token">
|
||||
<InputNumber min={1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="visibility" label="可见性">
|
||||
<Select options={[
|
||||
{ value: 'public', label: '公开' },
|
||||
{ value: 'team', label: '团队' },
|
||||
{ value: 'private', label: '私有' },
|
||||
]} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="模板详情"
|
||||
open={!!detailRecord}
|
||||
onCancel={() => setDetailRecord(null)}
|
||||
footer={null}
|
||||
width={640}
|
||||
>
|
||||
{detailRecord && (
|
||||
<Descriptions column={2} bordered size="small">
|
||||
<Descriptions.Item label="名称">{detailRecord.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="分类">{detailRecord.category}</Descriptions.Item>
|
||||
<Descriptions.Item label="模型">{detailRecord.model || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="来源">{sourceLabels[detailRecord.source]}</Descriptions.Item>
|
||||
<Descriptions.Item label="可见性">{visibilityLabels[detailRecord.visibility]}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">{statusLabels[detailRecord.status]}</Descriptions.Item>
|
||||
<Descriptions.Item label="描述" span={2}>{detailRecord.description || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="系统提示词" span={2}>
|
||||
<div style={{ whiteSpace: 'pre-wrap', maxHeight: 200, overflow: 'auto' }}>
|
||||
{detailRecord.system_prompt || '-'}
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="工具" span={2}>
|
||||
{detailRecord.tools?.map((t) => <Tag key={t}>{t}</Tag>) || '-'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="能力" span={2}>
|
||||
{detailRecord.capabilities?.map((c) => <Tag key={c} color="blue">{c}</Tag>) || '-'}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
// ============================================================
|
||||
// API 密钥管理
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button, message, Tag, Modal, Form, Input, InputNumber, Select, Popconfirm, Space, Typography } from 'antd'
|
||||
import { PlusOutlined, CopyOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { apiKeyService } from '@/services/api-keys'
|
||||
import type { TokenInfo } from '@/types'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export default function ApiKeys() {
|
||||
const queryClient = useQueryClient()
|
||||
const [form] = Form.useForm()
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [newToken, setNewToken] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['api-keys'],
|
||||
queryFn: () => apiKeyService.list(),
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: { name: string; expires_days?: number; permissions: string[] }) =>
|
||||
apiKeyService.create(data),
|
||||
onSuccess: (result: TokenInfo) => {
|
||||
message.success('创建成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['api-keys'] })
|
||||
if (result.token) {
|
||||
setNewToken(result.token)
|
||||
}
|
||||
setModalOpen(false)
|
||||
form.resetFields()
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '创建失败'),
|
||||
})
|
||||
|
||||
const revokeMutation = useMutation({
|
||||
mutationFn: (id: string) => apiKeyService.revoke(id),
|
||||
onSuccess: () => {
|
||||
message.success('已撤销')
|
||||
queryClient.invalidateQueries({ queryKey: ['api-keys'] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '撤销失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<TokenInfo>[] = [
|
||||
{ title: '名称', dataIndex: 'name', width: 160 },
|
||||
{ title: '前缀', dataIndex: 'token_prefix', width: 120, render: (_, r) => <Text code>{r.token_prefix}...</Text> },
|
||||
{
|
||||
title: '权限',
|
||||
dataIndex: 'permissions',
|
||||
width: 200,
|
||||
render: (_, r) => r.permissions?.map((p) => <Tag key={p}>{p}</Tag>),
|
||||
},
|
||||
{
|
||||
title: '过期时间',
|
||||
dataIndex: 'expires_at',
|
||||
width: 180,
|
||||
render: (_, r) => r.expires_at ? new Date(r.expires_at).toLocaleString('zh-CN') : '永不过期',
|
||||
},
|
||||
{
|
||||
title: '最后使用',
|
||||
dataIndex: 'last_used_at',
|
||||
width: 180,
|
||||
render: (_, r) => r.last_used_at ? new Date(r.last_used_at).toLocaleString('zh-CN') : '-',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
render: (_, r) => new Date(r.created_at).toLocaleString('zh-CN'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<Popconfirm title="确定撤销此密钥？撤销后无法恢复。" onConfirm={() => revokeMutation.mutate(record.id)}>
|
||||
<Button size="small" danger>撤销</Button>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const handleCreate = async () => {
|
||||
const values = await form.validateFields()
|
||||
createMutation.mutate(values)
|
||||
}
|
||||
|
||||
const copyToken = () => {
|
||||
if (newToken) {
|
||||
navigator.clipboard.writeText(newToken)
|
||||
message.success('已复制到剪贴板')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProTable<TokenInfo>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={() => [
|
||||
<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); setModalOpen(true) }}>
|
||||
创建密钥
|
||||
</Button>,
|
||||
]}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: data?.page_size ?? 20,
|
||||
current: data?.page ?? 1,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="创建 API 密钥"
|
||||
open={modalOpen}
|
||||
onOk={handleCreate}
|
||||
onCancel={() => { setModalOpen(false); form.resetFields() }}
|
||||
confirmLoading={createMutation.isPending}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
||||
<Input placeholder="给密钥起个名字" />
|
||||
</Form.Item>
|
||||
<Form.Item name="expires_days" label="有效期 (天)">
|
||||
<InputNumber min={1} placeholder="留空则永不过期" style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="permissions" label="权限" rules={[{ required: true }]}>
|
||||
<Select mode="multiple" placeholder="选择权限" options={[
|
||||
{ value: 'relay:use', label: '中转使用' },
|
||||
{ value: 'model:read', label: '模型读取' },
|
||||
{ value: 'config:read', label: '配置读取' },
|
||||
]} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="密钥创建成功"
|
||||
open={!!newToken}
|
||||
onOk={() => setNewToken(null)}
|
||||
onCancel={() => setNewToken(null)}
|
||||
>
|
||||
<p>请立即保存此密钥，关闭后将无法再次查看：</p>
|
||||
<Input.TextArea
|
||||
value={newToken || ''}
|
||||
rows={3}
|
||||
readOnly
|
||||
addonAfter={<CopyOutlined onClick={copyToken} style={{ cursor: 'pointer' }} />}
|
||||
/>
|
||||
<Button type="primary" icon={<CopyOutlined />} onClick={copyToken} style={{ marginTop: 8 }}>
|
||||
复制密钥
|
||||
</Button>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
// ============================================================
|
||||
// 系统配置
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, Tabs, message, Tag, Input, Button, Space, Typography } from 'antd'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { configService } from '@/services/config'
|
||||
import type { ConfigItem } from '@/types'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
export default function Config() {
|
||||
const queryClient = useQueryClient()
|
||||
const [category, setCategory] = useState<string>('general')
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
const [editValue, setEditValue] = useState('')
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['config', category],
|
||||
queryFn: () => configService.list({ category }),
|
||||
})
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, value }: { id: string; value: string }) =>
|
||||
configService.update(id, { value }),
|
||||
onSuccess: () => {
|
||||
message.success('配置已更新')
|
||||
queryClient.invalidateQueries({ queryKey: ['config', category] })
|
||||
setEditingId(null)
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '更新失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<ConfigItem>[] = [
|
||||
{ title: '配置路径', dataIndex: 'key_path', width: 200, render: (_, r) => <code>{r.key_path}</code> },
|
||||
{
|
||||
title: '当前值',
|
||||
dataIndex: 'current_value',
|
||||
width: 250,
|
||||
render: (_, record) => {
|
||||
if (editingId === record.id) {
|
||||
return (
|
||||
<Space>
|
||||
<Input
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
style={{ width: 180 }}
|
||||
onPressEnter={() => updateMutation.mutate({ id: record.id, value: editValue })}
|
||||
/>
|
||||
<Button size="small" type="primary" onClick={() => updateMutation.mutate({ id: record.id, value: editValue })}>
|
||||
保存
|
||||
</Button>
|
||||
<Button size="small" onClick={() => setEditingId(null)}>取消</Button>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span
|
||||
onClick={() => { setEditingId(record.id); setEditValue(record.current_value || '') }}
|
||||
style={{ cursor: 'pointer', color: '#1677ff' }}
|
||||
>
|
||||
{record.current_value || <Tag>未设置</Tag>}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
{ title: '默认值', dataIndex: 'default_value', width: 200, render: (_, r) => r.default_value || '-' },
|
||||
{ title: '类型', dataIndex: 'value_type', width: 80, render: (_, r) => <Tag>{r.value_type}</Tag> },
|
||||
{ title: '描述', dataIndex: 'description', width: 200, ellipsis: true },
|
||||
{
|
||||
title: '需要重启',
|
||||
dataIndex: 'requires_restart',
|
||||
width: 90,
|
||||
render: (_, r) => r.requires_restart ? <Tag color="orange">是</Tag> : <Tag>否</Tag>,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={4} style={{ marginBottom: 24 }}>系统配置</Title>
|
||||
|
||||
<Tabs
|
||||
activeKey={category}
|
||||
onChange={(key) => { setCategory(key); setEditingId(null) }}
|
||||
items={[
|
||||
{ key: 'general', label: '通用' },
|
||||
{ key: 'auth', label: '认证' },
|
||||
{ key: 'relay', label: '中转' },
|
||||
{ key: 'model', label: '模型' },
|
||||
{ key: 'rate_limit', label: '限流' },
|
||||
{ key: 'log', label: '日志' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<ProTable<ConfigItem>
|
||||
columns={columns}
|
||||
dataSource={data ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
// ============================================================
|
||||
// 仪表盘页面
|
||||
// ============================================================
|
||||
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Card, Col, Row, Statistic, Table, Tag, Typography, Spin, Alert } from 'antd'
|
||||
import {
|
||||
TeamOutlined,
|
||||
CloudServerOutlined,
|
||||
ApiOutlined,
|
||||
ThunderboltOutlined,
|
||||
ColumnWidthOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { statsService } from '@/services/stats'
|
||||
import { logService } from '@/services/logs'
|
||||
import type { OperationLog } from '@/types'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
const actionLabels: Record<string, string> = {
|
||||
login: '登录', logout: '登出',
|
||||
create_account: '创建账号', update_account: '更新账号', delete_account: '删除账号',
|
||||
create_provider: '创建服务商', update_provider: '更新服务商', delete_provider: '删除服务商',
|
||||
create_model: '创建模型', update_model: '更新模型', delete_model: '删除模型',
|
||||
create_token: '创建密钥', revoke_token: '撤销密钥',
|
||||
update_config: '更新配置',
|
||||
create_prompt: '创建提示词', update_prompt: '更新提示词', archive_prompt: '归档提示词',
|
||||
desktop_audit: '桌面端审计',
|
||||
}
|
||||
|
||||
const actionColors: Record<string, string> = {
|
||||
login: 'green', logout: 'default',
|
||||
create_account: 'blue', update_account: 'orange', delete_account: 'red',
|
||||
create_provider: 'blue', update_provider: 'orange', delete_provider: 'red',
|
||||
create_model: 'blue', update_model: 'orange', delete_model: 'red',
|
||||
create_token: 'blue', revoke_token: 'red',
|
||||
update_config: 'orange',
|
||||
create_prompt: 'blue', update_prompt: 'orange', archive_prompt: 'red',
|
||||
desktop_audit: 'default',
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const { data: stats, isLoading: statsLoading, error: statsError } = useQuery({
|
||||
queryKey: ['dashboard-stats'],
|
||||
queryFn: () => statsService.dashboard(),
|
||||
})
|
||||
|
||||
const { data: logsData, isLoading: logsLoading } = useQuery({
|
||||
queryKey: ['recent-logs'],
|
||||
queryFn: () => logService.list({ page: 1, page_size: 10 }),
|
||||
})
|
||||
|
||||
if (statsError) {
|
||||
return <Alert type="error" message="加载仪表盘数据失败" description={(statsError as Error).message} showIcon />
|
||||
}
|
||||
|
||||
const statCards = [
|
||||
{ title: '总账号', value: stats?.total_accounts ?? 0, icon: <TeamOutlined />, color: '#1677ff' },
|
||||
{ title: '活跃服务商', value: stats?.active_providers ?? 0, icon: <CloudServerOutlined />, color: '#52c41a' },
|
||||
{ title: '活跃模型', value: stats?.active_models ?? 0, icon: <ApiOutlined />, color: '#722ed1' },
|
||||
{ title: '今日请求', value: stats?.tasks_today ?? 0, icon: <ThunderboltOutlined />, color: '#fa8c16' },
|
||||
{ title: '今日 Token', value: ((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0)), icon: <ColumnWidthOutlined />, color: '#eb2f96' },
|
||||
]
|
||||
|
||||
const logColumns = [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
width: 140,
|
||||
render: (action: string) => (
|
||||
<Tag color={actionColors[action] || 'default'}>
|
||||
{actionLabels[action] || action}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{ title: '目标类型', dataIndex: 'target_type', key: 'target_type', width: 100, render: (v: string | null) => v || '-' },
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 180,
|
||||
render: (v: string) => new Date(v).toLocaleString('zh-CN'),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={4} style={{ marginBottom: 24 }}>仪表盘</Title>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
{statsLoading ? (
|
||||
<Col span={24}><Spin /></Col>
|
||||
) : (
|
||||
statCards.map((card) => (
|
||||
<Col xs={24} sm={12} md={8} lg={4} key={card.title}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title={card.title}
|
||||
value={card.value}
|
||||
prefix={<span style={{ color: card.color }}>{card.icon}</span>}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
))
|
||||
)}
|
||||
</Row>
|
||||
|
||||
<Card title="最近操作日志" size="small">
|
||||
<Table<OperationLog>
|
||||
columns={logColumns}
|
||||
dataSource={logsData?.items ?? []}
|
||||
loading={logsLoading}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
// ============================================================
|
||||
// 登录页面
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { LoginForm, ProFormText } from '@ant-design/pro-components'
|
||||
import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons'
|
||||
import { message, Divider, Typography } from 'antd'
|
||||
import { authService } from '@/services/auth'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import type { LoginRequest } from '@/types'
|
||||
|
||||
const { Title, Text } = Typography
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const loginStore = useAuthStore((s) => s.login)
|
||||
const [needTotp, setNeedTotp] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (values: Record<string, string>) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data: LoginRequest = {
|
||||
username: values.username?.trim() || '',
|
||||
password: values.password || '',
|
||||
totp_code: values.totp_code?.trim() || undefined,
|
||||
}
|
||||
|
||||
const res = await authService.login(data)
|
||||
loginStore(res.token, res.refresh_token, res.account)
|
||||
|
||||
message.success('登录成功')
|
||||
const from = searchParams.get('from') || '/'
|
||||
navigate(from, { replace: true })
|
||||
} catch (err: unknown) {
|
||||
const error = err as { message?: string; status?: number }
|
||||
const msg = error.message || ''
|
||||
if (msg.includes('TOTP') || msg.includes('totp') || msg.includes('2FA') || msg.includes('验证码') || error.status === 403) {
|
||||
setNeedTotp(true)
|
||||
message.warning(msg || '请输入两步验证码')
|
||||
} else {
|
||||
message.error(msg || '登录失败，请检查用户名和密码')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', display: 'flex' }}>
|
||||
{/* 左侧品牌区 */}
|
||||
<div
|
||||
style={{
|
||||
flex: '1 1 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'linear-gradient(135deg, #001529 0%, #003a70 50%, #001529 100%)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Title level={1} style={{ color: '#fff', marginBottom: 8, letterSpacing: 4 }}>
|
||||
ZCLAW
|
||||
</Title>
|
||||
<Text style={{ color: 'rgba(255,255,255,0.65)', fontSize: 16 }}>AI Agent 管理平台</Text>
|
||||
<Divider style={{ borderColor: 'rgba(22,119,255,0.3)', width: 100, minWidth: 100 }} />
|
||||
<Text style={{ color: 'rgba(255,255,255,0.45)', fontSize: 13, maxWidth: 320, textAlign: 'center' }}>
|
||||
统一管理 AI 服务商、模型配置、API 密钥、用量监控与系统配置
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 右侧登录表单 */}
|
||||
<div
|
||||
style={{
|
||||
flex: '0 0 480px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 48,
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '100%', maxWidth: 360 }}>
|
||||
<Title level={3} style={{ marginBottom: 4 }}>登录</Title>
|
||||
<Text type="secondary" style={{ display: 'block', marginBottom: 32 }}>
|
||||
输入您的账号信息以继续
|
||||
</Text>
|
||||
|
||||
<LoginForm
|
||||
onFinish={handleSubmit}
|
||||
submitter={{
|
||||
searchConfig: { submitText: '登录' },
|
||||
submitButtonProps: { loading, block: true },
|
||||
}}
|
||||
>
|
||||
<ProFormText
|
||||
name="username"
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <UserOutlined />,
|
||||
autoComplete: 'username',
|
||||
}}
|
||||
placeholder="请输入用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
/>
|
||||
<ProFormText.Password
|
||||
name="password"
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined />,
|
||||
autoComplete: 'current-password',
|
||||
}}
|
||||
placeholder="请输入密码"
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
/>
|
||||
{needTotp && (
|
||||
<ProFormText
|
||||
name="totp_code"
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <SafetyOutlined />,
|
||||
maxLength: 6,
|
||||
autoComplete: 'one-time-code',
|
||||
}}
|
||||
placeholder="请输入 6 位验证码"
|
||||
rules={[{ required: true, message: '请输入验证码' }]}
|
||||
/>
|
||||
)}
|
||||
</LoginForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
// ============================================================
|
||||
// 操作日志
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Tag, Select, Typography } from 'antd'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { logService } from '@/services/logs'
|
||||
import type { OperationLog } from '@/types'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
const actionLabels: Record<string, string> = {
|
||||
login: '登录', logout: '登出',
|
||||
create_account: '创建账号', update_account: '更新账号', delete_account: '删除账号',
|
||||
create_provider: '创建服务商', update_provider: '更新服务商', delete_provider: '删除服务商',
|
||||
create_model: '创建模型', update_model: '更新模型', delete_model: '删除模型',
|
||||
create_token: '创建密钥', revoke_token: '撤销密钥',
|
||||
update_config: '更新配置',
|
||||
create_prompt: '创建提示词', update_prompt: '更新提示词', archive_prompt: '归档提示词',
|
||||
desktop_audit: '桌面端审计',
|
||||
}
|
||||
|
||||
const actionColors: Record<string, string> = {
|
||||
login: 'green', logout: 'default',
|
||||
create_account: 'blue', update_account: 'orange', delete_account: 'red',
|
||||
create_provider: 'blue', update_provider: 'orange', delete_provider: 'red',
|
||||
create_model: 'blue', update_model: 'orange', delete_model: 'red',
|
||||
create_token: 'blue', revoke_token: 'red',
|
||||
update_config: 'orange',
|
||||
create_prompt: 'blue', update_prompt: 'orange', archive_prompt: 'red',
|
||||
desktop_audit: 'default',
|
||||
}
|
||||
|
||||
const actionOptions = Object.entries(actionLabels).map(([value, label]) => ({ value, label }))
|
||||
|
||||
export default function Logs() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [actionFilter, setActionFilter] = useState<string | undefined>(undefined)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['logs', page, actionFilter],
|
||||
queryFn: () => logService.list({ page, page_size: 20, action: actionFilter }),
|
||||
})
|
||||
|
||||
const columns: ProColumns<OperationLog>[] = [
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'action',
|
||||
width: 140,
|
||||
render: (_, r) => (
|
||||
<Tag color={actionColors[r.action] || 'default'}>
|
||||
{actionLabels[r.action] || r.action}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{ title: '目标类型', dataIndex: 'target_type', width: 100, render: (_, r) => r.target_type || '-' },
|
||||
{ title: '目标 ID', dataIndex: 'target_id', width: 120, render: (_, r) => r.target_id ? <code>{r.target_id.substring(0, 8)}...</code> : '-' },
|
||||
{
|
||||
title: '详情',
|
||||
dataIndex: 'details',
|
||||
width: 250,
|
||||
ellipsis: true,
|
||||
render: (_, r) => {
|
||||
if (!r.details) return '-'
|
||||
if (typeof r.details === 'string') return r.details
|
||||
return JSON.stringify(r.details)
|
||||
},
|
||||
},
|
||||
{ title: 'IP 地址', dataIndex: 'ip_address', width: 130, render: (_, r) => <code>{r.ip_address || '-'}</code> },
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
render: (_, r) => new Date(r.created_at).toLocaleString('zh-CN'),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4} style={{ margin: 0 }}>操作日志</Title>
|
||||
<Select
|
||||
value={actionFilter}
|
||||
onChange={(v) => { setActionFilter(v === 'all' ? undefined : v); setPage(1) }}
|
||||
placeholder="操作类型筛选"
|
||||
style={{ width: 160 }}
|
||||
allowClear
|
||||
options={[{ value: 'all', label: '全部操作' }, ...actionOptions]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProTable<OperationLog>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: 20,
|
||||
current: page,
|
||||
onChange: setPage,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
// ============================================================
|
||||
// 模型管理
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Select, Space, Popconfirm } from 'antd'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { modelService } from '@/services/models'
|
||||
import { providerService } from '@/services/providers'
|
||||
import type { Model } from '@/types'
|
||||
|
||||
export default function Models() {
|
||||
const queryClient = useQueryClient()
|
||||
const [form] = Form.useForm()
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['models'],
|
||||
queryFn: () => modelService.list(),
|
||||
})
|
||||
|
||||
const { data: providersData } = useQuery({
|
||||
queryKey: ['providers-for-select'],
|
||||
queryFn: () => providerService.list(),
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Partial<Omit<Model, 'id'>>) => modelService.create(data),
|
||||
onSuccess: () => {
|
||||
message.success('创建成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['models'] })
|
||||
setModalOpen(false)
|
||||
form.resetFields()
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '创建失败'),
|
||||
})
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Model, 'id'>> }) =>
|
||||
modelService.update(id, data),
|
||||
onSuccess: () => {
|
||||
message.success('更新成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['models'] })
|
||||
setModalOpen(false)
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '更新失败'),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => modelService.delete(id),
|
||||
onSuccess: () => {
|
||||
message.success('删除成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['models'] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '删除失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<Model>[] = [
|
||||
{ title: '模型 ID', dataIndex: 'model_id', width: 180, render: (_, r) => <code>{r.model_id}</code> },
|
||||
{ title: '别名', dataIndex: 'alias', width: 140 },
|
||||
{
|
||||
title: '服务商',
|
||||
dataIndex: 'provider_id',
|
||||
width: 140,
|
||||
render: (_, r) => {
|
||||
const provider = providersData?.items?.find((p) => p.id === r.provider_id)
|
||||
return provider?.display_name || r.provider_id.substring(0, 8)
|
||||
},
|
||||
},
|
||||
{ title: '上下文窗口', dataIndex: 'context_window', width: 110, render: (_, r) => r.context_window?.toLocaleString() },
|
||||
{ title: '最大输出', dataIndex: 'max_output_tokens', width: 100, render: (_, r) => r.max_output_tokens?.toLocaleString() },
|
||||
{
|
||||
title: '流式',
|
||||
dataIndex: 'supports_streaming',
|
||||
width: 70,
|
||||
render: (_, r) => r.supports_streaming ? <Tag color="green">是</Tag> : <Tag>否</Tag>,
|
||||
},
|
||||
{
|
||||
title: '视觉',
|
||||
dataIndex: 'supports_vision',
|
||||
width: 70,
|
||||
render: (_, r) => r.supports_vision ? <Tag color="blue">是</Tag> : <Tag>否</Tag>,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
width: 70,
|
||||
render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 160,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm title="确定删除此模型？" onConfirm={() => deleteMutation.mutate(record.id)}>
|
||||
<Button size="small" danger>删除</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const handleSave = async () => {
|
||||
const values = await form.validateFields()
|
||||
if (editingId) {
|
||||
updateMutation.mutate({ id: editingId, data: values })
|
||||
} else {
|
||||
createMutation.mutate(values)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProTable<Model>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={() => [
|
||||
<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
|
||||
新建模型
|
||||
</Button>,
|
||||
]}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: data?.page_size ?? 20,
|
||||
current: data?.page ?? 1,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={editingId ? '编辑模型' : '新建模型'}
|
||||
open={modalOpen}
|
||||
onOk={handleSave}
|
||||
onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
|
||||
confirmLoading={createMutation.isPending || updateMutation.isPending}
|
||||
width={600}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="provider_id" label="服务商" rules={[{ required: true }]}>
|
||||
<Select
|
||||
options={(providersData?.items ?? []).map((p) => ({ value: p.id, label: p.display_name }))}
|
||||
placeholder="选择服务商"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="model_id" label="模型 ID" rules={[{ required: true }]}>
|
||||
<Input placeholder="如 gpt-4o" />
|
||||
</Form.Item>
|
||||
<Form.Item name="alias" label="别名">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="context_window" label="上下文窗口">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="max_output_tokens" label="最大输出 Token">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="enabled" label="启用" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="supports_streaming" label="支持流式" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="supports_vision" label="支持视觉" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="pricing_input" label="输入价格 (每百万 Token)">
|
||||
<InputNumber min={0} step={0.01} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="pricing_output" label="输出价格 (每百万 Token)">
|
||||
<InputNumber min={0} step={0.01} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
// ============================================================
|
||||
// 提示词管理
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button, message, Tag, Modal, Form, Input, Select, Space, Popconfirm, Descriptions, Tabs, Typography } from 'antd'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { promptService } from '@/services/prompts'
|
||||
import type { PromptTemplate, PromptVersion } from '@/types'
|
||||
|
||||
const { TextArea } = Input
|
||||
const { Text } = Typography
|
||||
|
||||
const sourceLabels: Record<string, string> = { builtin: '内置', custom: '自定义' }
|
||||
const statusLabels: Record<string, string> = { active: '活跃', deprecated: '已废弃', archived: '已归档' }
|
||||
const statusColors: Record<string, string> = { active: 'green', deprecated: 'orange', archived: 'default' }
|
||||
|
||||
export default function Prompts() {
|
||||
const queryClient = useQueryClient()
|
||||
const [form] = Form.useForm()
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [detailName, setDetailName] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['prompts'],
|
||||
queryFn: () => promptService.list(),
|
||||
})
|
||||
|
||||
const { data: detailData } = useQuery({
|
||||
queryKey: ['prompt-detail', detailName],
|
||||
queryFn: () => promptService.get(detailName!),
|
||||
enabled: !!detailName,
|
||||
})
|
||||
|
||||
const { data: versionsData } = useQuery({
|
||||
queryKey: ['prompt-versions', detailName],
|
||||
queryFn: () => promptService.listVersions(detailName!),
|
||||
enabled: !!detailName,
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Parameters<typeof promptService.create>[0]) => promptService.create(data),
|
||||
onSuccess: () => {
|
||||
message.success('创建成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['prompts'] })
|
||||
setCreateOpen(false)
|
||||
form.resetFields()
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '创建失败'),
|
||||
})
|
||||
|
||||
const archiveMutation = useMutation({
|
||||
mutationFn: (name: string) => promptService.archive(name),
|
||||
onSuccess: () => {
|
||||
message.success('已归档')
|
||||
queryClient.invalidateQueries({ queryKey: ['prompts'] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '归档失败'),
|
||||
})
|
||||
|
||||
const rollbackMutation = useMutation({
|
||||
mutationFn: ({ name, version }: { name: string; version: number }) =>
|
||||
promptService.rollback(name, version),
|
||||
onSuccess: () => {
|
||||
message.success('回滚成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['prompts'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['prompt-detail', detailName] })
|
||||
queryClient.invalidateQueries({ queryKey: ['prompt-versions', detailName] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '回滚失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<PromptTemplate>[] = [
|
||||
{ title: '名称', dataIndex: 'name', width: 200, render: (_, r) => <Text code>{r.name}</Text> },
|
||||
{ title: '分类', dataIndex: 'category', width: 100 },
|
||||
{ title: '描述', dataIndex: 'description', width: 200, ellipsis: true },
|
||||
{
|
||||
title: '来源',
|
||||
dataIndex: 'source',
|
||||
width: 80,
|
||||
render: (_, r) => <Tag>{sourceLabels[r.source]}</Tag>,
|
||||
},
|
||||
{ title: '版本', dataIndex: 'current_version', width: 70 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 90,
|
||||
render: (_, r) => <Tag color={statusColors[r.status]}>{statusLabels[r.status]}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => setDetailName(record.name)}>详情</Button>
|
||||
{record.status === 'active' && (
|
||||
<Popconfirm title="确定归档此提示词？" onConfirm={() => archiveMutation.mutate(record.name)}>
|
||||
<Button size="small" danger>归档</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const handleCreate = async () => {
|
||||
const values = await form.validateFields()
|
||||
createMutation.mutate(values)
|
||||
}
|
||||
|
||||
const versionColumns: ProColumns<PromptVersion>[] = [
|
||||
{ title: '版本', dataIndex: 'version', width: 60 },
|
||||
{ title: '更新说明', dataIndex: 'changelog', width: 200, ellipsis: true },
|
||||
{ title: '最低版本', dataIndex: 'min_app_version', width: 100, render: (_, r) => r.min_app_version || '-' },
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
render: (_, r) => new Date(r.created_at).toLocaleString('zh-CN'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<Popconfirm
|
||||
title={`确定回滚到版本 ${record.version}？`}
|
||||
onConfirm={() => detailName && rollbackMutation.mutate({ name: detailName, version: record.version })}
|
||||
>
|
||||
<Button size="small">回滚</Button>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProTable<PromptTemplate>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={() => [
|
||||
<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); setCreateOpen(true) }}>
|
||||
新建提示词
|
||||
</Button>,
|
||||
]}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: data?.page_size ?? 20,
|
||||
current: data?.page ?? 1,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="新建提示词"
|
||||
open={createOpen}
|
||||
onOk={handleCreate}
|
||||
onCancel={() => { setCreateOpen(false); form.resetFields() }}
|
||||
confirmLoading={createMutation.isPending}
|
||||
width={640}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
||||
<Input placeholder="唯一标识" />
|
||||
</Form.Item>
|
||||
<Form.Item name="category" label="分类" rules={[{ required: true }]}>
|
||||
<Input placeholder="如 system, tool" />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Form.Item name="system_prompt" label="系统提示词" rules={[{ required: true }]}>
|
||||
<TextArea rows={6} />
|
||||
</Form.Item>
|
||||
<Form.Item name="user_prompt_template" label="用户提示词模板">
|
||||
<TextArea rows={4} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title={`提示词详情: ${detailName || ''}`}
|
||||
open={!!detailName}
|
||||
onCancel={() => setDetailName(null)}
|
||||
footer={null}
|
||||
width={800}
|
||||
>
|
||||
<Tabs items={[
|
||||
{
|
||||
key: 'info',
|
||||
label: '基本信息',
|
||||
children: detailData ? (
|
||||
<Descriptions column={2} bordered size="small">
|
||||
<Descriptions.Item label="名称">{detailData.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="分类">{detailData.category}</Descriptions.Item>
|
||||
<Descriptions.Item label="来源">{sourceLabels[detailData.source]}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">{statusLabels[detailData.status]}</Descriptions.Item>
|
||||
<Descriptions.Item label="当前版本">{detailData.current_version}</Descriptions.Item>
|
||||
<Descriptions.Item label="描述" span={2}>{detailData.description || '-'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
key: 'versions',
|
||||
label: '版本历史',
|
||||
children: (
|
||||
<ProTable<PromptVersion>
|
||||
columns={versionColumns}
|
||||
dataSource={versionsData ?? []}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
loading={!versionsData}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]} />
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
// ============================================================
|
||||
// 服务商管理
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Space, Popconfirm, Typography } from 'antd'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { providerService } from '@/services/providers'
|
||||
import type { Provider, ProviderKey } from '@/types'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
export default function Providers() {
|
||||
const queryClient = useQueryClient()
|
||||
const [form] = Form.useForm()
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
const [keyModalProviderId, setKeyModalProviderId] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['providers'],
|
||||
queryFn: () => providerService.list(),
|
||||
})
|
||||
|
||||
const { data: keysData, isLoading: keysLoading } = useQuery({
|
||||
queryKey: ['provider-keys', keyModalProviderId],
|
||||
queryFn: () => providerService.listKeys(keyModalProviderId!),
|
||||
enabled: !!keyModalProviderId,
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
|
||||
providerService.create(data),
|
||||
onSuccess: () => {
|
||||
message.success('创建成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['providers'] })
|
||||
setModalOpen(false)
|
||||
form.resetFields()
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '创建失败'),
|
||||
})
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>> }) =>
|
||||
providerService.update(id, data),
|
||||
onSuccess: () => {
|
||||
message.success('更新成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['providers'] })
|
||||
setModalOpen(false)
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '更新失败'),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => providerService.delete(id),
|
||||
onSuccess: () => {
|
||||
message.success('删除成功')
|
||||
queryClient.invalidateQueries({ queryKey: ['providers'] })
|
||||
},
|
||||
onError: (err: Error) => message.error(err.message || '删除失败'),
|
||||
})
|
||||
|
||||
const columns: ProColumns<Provider>[] = [
|
||||
{ title: '名称', dataIndex: 'display_name', width: 140 },
|
||||
{ title: '标识', dataIndex: 'name', width: 120, render: (_, r) => <Text code>{r.name}</Text> },
|
||||
{ title: '协议', dataIndex: 'api_protocol', width: 100 },
|
||||
{ title: 'RPM 限制', dataIndex: 'rate_limit_rpm', width: 100, render: (_, r) => r.rate_limit_rpm ?? '-' },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
width: 80,
|
||||
render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 260,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button size="small" onClick={() => setKeyModalProviderId(record.id)}>
|
||||
Key Pool
|
||||
</Button>
|
||||
<Popconfirm title="确定删除此服务商？" onConfirm={() => deleteMutation.mutate(record.id)}>
|
||||
<Button size="small" danger>删除</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const keyColumns: ProColumns<ProviderKey>[] = [
|
||||
{ title: '标签', dataIndex: 'key_label', width: 120 },
|
||||
{ title: '优先级', dataIndex: 'priority', width: 80 },
|
||||
{ title: '请求数', dataIndex: 'total_requests', width: 80 },
|
||||
{ title: 'Token 数', dataIndex: 'total_tokens', width: 100 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'is_active',
|
||||
width: 80,
|
||||
render: (_, r) => r.is_active ? <Tag color="green">活跃</Tag> : <Tag>冷却</Tag>,
|
||||
},
|
||||
]
|
||||
|
||||
const handleSave = async () => {
|
||||
const values = await form.validateFields()
|
||||
if (editingId) {
|
||||
updateMutation.mutate({ id: editingId, data: values })
|
||||
} else {
|
||||
createMutation.mutate(values)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProTable<Provider>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={() => [
|
||||
<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
|
||||
新建服务商
|
||||
</Button>,
|
||||
]}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: data?.page_size ?? 20,
|
||||
current: data?.page ?? 1,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={editingId ? '编辑服务商' : '新建服务商'}
|
||||
open={modalOpen}
|
||||
onOk={handleSave}
|
||||
onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
|
||||
confirmLoading={createMutation.isPending || updateMutation.isPending}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="name" label="标识" rules={[{ required: true }]}>
|
||||
<Input disabled={!!editingId} />
|
||||
</Form.Item>
|
||||
<Form.Item name="display_name" label="显示名称" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="base_url" label="Base URL" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="api_protocol" label="API 协议">
|
||||
<Input placeholder="openai" />
|
||||
</Form.Item>
|
||||
<Form.Item name="enabled" label="启用" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="rate_limit_rpm" label="RPM 限制">
|
||||
<InputNumber min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="Key Pool"
|
||||
open={!!keyModalProviderId}
|
||||
onCancel={() => setKeyModalProviderId(null)}
|
||||
footer={null}
|
||||
width={700}
|
||||
>
|
||||
<ProTable<ProviderKey>
|
||||
columns={keyColumns}
|
||||
dataSource={keysData ?? []}
|
||||
loading={keysLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
// ============================================================
|
||||
// 中转任务
|
||||
// ============================================================
|
||||
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Tag, Select, Typography } from 'antd'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { relayService } from '@/services/relay'
|
||||
import { useState } from 'react'
|
||||
import type { RelayTask } from '@/types'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
queued: '排队中',
|
||||
running: '运行中',
|
||||
completed: '已完成',
|
||||
failed: '失败',
|
||||
cancelled: '已取消',
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
queued: 'default',
|
||||
running: 'processing',
|
||||
completed: 'green',
|
||||
failed: 'red',
|
||||
cancelled: 'default',
|
||||
}
|
||||
|
||||
export default function Relay() {
|
||||
const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined)
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['relay-tasks', page, statusFilter],
|
||||
queryFn: () => relayService.list({ page, page_size: 20, status: statusFilter }),
|
||||
})
|
||||
|
||||
const columns: ProColumns<RelayTask>[] = [
|
||||
{ title: 'ID', dataIndex: 'id', width: 120, render: (_, r) => <code>{r.id.substring(0, 8)}...</code> },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (_, r) => <Tag color={statusColors[r.status] || 'default'}>{statusLabels[r.status] || r.status}</Tag>,
|
||||
},
|
||||
{ title: '模型', dataIndex: 'model_id', width: 160 },
|
||||
{ title: '优先级', dataIndex: 'priority', width: 70 },
|
||||
{ title: '尝试次数', dataIndex: 'attempt_count', width: 80 },
|
||||
{
|
||||
title: 'Token',
|
||||
width: 140,
|
||||
render: (_, r) => `${r.input_tokens.toLocaleString()} / ${r.output_tokens.toLocaleString()}`,
|
||||
},
|
||||
{ title: '错误信息', dataIndex: 'error_message', width: 200, ellipsis: true },
|
||||
{
|
||||
title: '排队时间',
|
||||
dataIndex: 'queued_at',
|
||||
width: 180,
|
||||
render: (_, r) => new Date(r.queued_at).toLocaleString('zh-CN'),
|
||||
},
|
||||
{
|
||||
title: '完成时间',
|
||||
dataIndex: 'completed_at',
|
||||
width: 180,
|
||||
render: (_, r) => r.completed_at ? new Date(r.completed_at).toLocaleString('zh-CN') : '-',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4} style={{ margin: 0 }}>中转任务</Title>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onChange={(v) => { setStatusFilter(v === 'all' ? undefined : v); setPage(1) }}
|
||||
placeholder="状态筛选"
|
||||
style={{ width: 140 }}
|
||||
allowClear
|
||||
options={[
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'queued', label: '排队中' },
|
||||
{ value: 'running', label: '运行中' },
|
||||
{ value: 'completed', label: '已完成' },
|
||||
{ value: 'failed', label: '失败' },
|
||||
{ value: 'cancelled', label: '已取消' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProTable<RelayTask>
|
||||
columns={columns}
|
||||
dataSource={data?.items ?? []}
|
||||
loading={isLoading}
|
||||
rowKey="id"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={{
|
||||
total: data?.total ?? 0,
|
||||
pageSize: 20,
|
||||
current: page,
|
||||
onChange: setPage,
|
||||
showSizeChanger: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
// ============================================================
|
||||
// 用量统计
|
||||
// ============================================================
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Card, Row, Col, Select, Spin, Alert, Statistic, Typography } from 'antd'
|
||||
import { ColumnWidthOutlined, ThunderboltOutlined } from '@ant-design/icons'
|
||||
import type { ProColumns } from '@ant-design/pro-components'
|
||||
import { ProTable } from '@ant-design/pro-components'
|
||||
import { usageService } from '@/services/usage'
|
||||
import { telemetryService } from '@/services/telemetry'
|
||||
import type { DailyUsageStat, ModelUsageStat } from '@/types'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
export default function Usage() {
|
||||
const [days, setDays] = useState(30)
|
||||
|
||||
const { data: dailyData, isLoading: dailyLoading, error: dailyError } = useQuery({
|
||||
queryKey: ['usage-daily', days],
|
||||
queryFn: () => telemetryService.dailyStats({ days }),
|
||||
})
|
||||
|
||||
const { data: modelData, isLoading: modelLoading } = useQuery({
|
||||
queryKey: ['usage-model', days],
|
||||
queryFn: () => telemetryService.modelStats({}),
|
||||
})
|
||||
|
||||
if (dailyError) {
|
||||
return <Alert type="error" message="加载用量数据失败" description={(dailyError as Error).message} showIcon />
|
||||
}
|
||||
|
||||
const totalRequests = dailyData?.reduce((s, d) => s + d.request_count, 0) ?? 0
|
||||
const totalTokens = dailyData?.reduce((s, d) => s + d.input_tokens + d.output_tokens, 0) ?? 0
|
||||
|
||||
const dailyColumns: ProColumns<DailyUsageStat>[] = [
|
||||
{ title: '日期', dataIndex: 'day', width: 120 },
|
||||
{ title: '请求数', dataIndex: 'request_count', width: 100, render: (_, r) => r.request_count.toLocaleString() },
|
||||
{ title: '输入 Token', dataIndex: 'input_tokens', width: 120, render: (_, r) => r.input_tokens.toLocaleString() },
|
||||
{ title: '输出 Token', dataIndex: 'output_tokens', width: 120, render: (_, r) => r.output_tokens.toLocaleString() },
|
||||
{ title: '设备数', dataIndex: 'unique_devices', width: 80 },
|
||||
]
|
||||
|
||||
const modelColumns: ProColumns<ModelUsageStat>[] = [
|
||||
{ title: '模型', dataIndex: 'model_id', width: 200 },
|
||||
{ title: '请求数', dataIndex: 'request_count', width: 100, render: (_, r) => r.request_count.toLocaleString() },
|
||||
{ title: '输入 Token', dataIndex: 'input_tokens', width: 120, render: (_, r) => r.input_tokens.toLocaleString() },
|
||||
{ title: '输出 Token', dataIndex: 'output_tokens', width: 120, render: (_, r) => r.output_tokens.toLocaleString() },
|
||||
{
|
||||
title: '平均延迟',
|
||||
dataIndex: 'avg_latency_ms',
|
||||
width: 100,
|
||||
render: (_, r) => r.avg_latency_ms ? `${Math.round(r.avg_latency_ms)}ms` : '-',
|
||||
},
|
||||
{
|
||||
title: '成功率',
|
||||
dataIndex: 'success_rate',
|
||||
width: 100,
|
||||
render: (_, r) => `${(r.success_rate * 100).toFixed(1)}%`,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4} style={{ margin: 0 }}>用量统计</Title>
|
||||
<Select
|
||||
value={days}
|
||||
onChange={setDays}
|
||||
options={[
|
||||
{ value: 7, label: '最近 7 天' },
|
||||
{ value: 30, label: '最近 30 天' },
|
||||
{ value: 90, label: '最近 90 天' },
|
||||
]}
|
||||
style={{ width: 140 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
<Col span={12}>
|
||||
<Card>
|
||||
<Statistic title="总请求数" value={totalRequests} prefix={<ThunderboltOutlined />} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card>
|
||||
<Statistic title="总 Token 数" value={totalTokens} prefix={<ColumnWidthOutlined />} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card title="每日统计" style={{ marginBottom: 24 }} size="small">
|
||||
<ProTable<DailyUsageStat>
|
||||
columns={dailyColumns}
|
||||
dataSource={dailyData ?? []}
|
||||
loading={dailyLoading}
|
||||
rowKey="day"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="按模型统计" size="small">
|
||||
<ProTable<ModelUsageStat>
|
||||
columns={modelColumns}
|
||||
dataSource={modelData ?? []}
|
||||
loading={modelLoading}
|
||||
rowKey="model_id"
|
||||
search={false}
|
||||
toolBarRender={false}
|
||||
pagination={false}
|
||||
size="small"
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
// ============================================================
|
||||
// 路由守卫 — 未登录重定向到 /login
|
||||
// ============================================================
|
||||
|
||||
import { Navigate, useLocation } from 'react-router-dom'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
|
||||
export function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
const token = useAuthStore((s) => s.token)
|
||||
const location = useLocation()
|
||||
|
||||
if (!token) {
|
||||
return <Navigate to="/login" state={{ from: location }} replace />
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
// ============================================================
|
||||
// 路由定义
|
||||
// ============================================================
|
||||
|
||||
import { createBrowserRouter } from 'react-router-dom'
|
||||
import { AuthGuard } from './AuthGuard'
|
||||
import AdminLayout from '@/layouts/AdminLayout'
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
{
|
||||
path: '/login',
|
||||
lazy: () => import('@/pages/Login').then((m) => ({ Component: m.default })),
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
element: (
|
||||
<AuthGuard>
|
||||
<AdminLayout />
|
||||
</AuthGuard>
|
||||
),
|
||||
children: [
|
||||
{ index: true, lazy: () => import('@/pages/Dashboard').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'accounts', lazy: () => import('@/pages/Accounts').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'providers', lazy: () => import('@/pages/Providers').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'models', lazy: () => import('@/pages/Models').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'agent-templates', lazy: () => import('@/pages/AgentTemplates').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'api-keys', lazy: () => import('@/pages/ApiKeys').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'usage', lazy: () => import('@/pages/Usage').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'relay', lazy: () => import('@/pages/Relay').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'config', lazy: () => import('@/pages/Config').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'prompts', lazy: () => import('@/pages/Prompts').then((m) => ({ Component: m.default })) },
|
||||
{ path: 'logs', lazy: () => import('@/pages/Logs').then((m) => ({ Component: m.default })) },
|
||||
],
|
||||
},
|
||||
])
|
||||
@@ -1,16 +0,0 @@
|
||||
import request from './request'
|
||||
import type { AccountPublic, PaginatedResponse } from '@/types'
|
||||
|
||||
export const accountService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<AccountPublic>>('/accounts', { params }).then((r) => r.data),
|
||||
|
||||
get: (id: string) =>
|
||||
request.get<AccountPublic>(`/accounts/${id}`).then((r) => r.data),
|
||||
|
||||
update: (id: string, data: Partial<Pick<AccountPublic, 'display_name' | 'email' | 'role'>>) =>
|
||||
request.patch<AccountPublic>(`/accounts/${id}`, data).then((r) => r.data),
|
||||
|
||||
updateStatus: (id: string, data: { status: AccountPublic['status'] }) =>
|
||||
request.patch(`/accounts/${id}/status`, data).then((r) => r.data),
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import request from './request'
|
||||
import type { AgentTemplate, PaginatedResponse } from '@/types'
|
||||
|
||||
export const agentTemplateService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<AgentTemplate>>('/agent-templates', { params }).then((r) => r.data),
|
||||
|
||||
get: (id: string) =>
|
||||
request.get<AgentTemplate>(`/agent-templates/${id}`).then((r) => r.data),
|
||||
|
||||
create: (data: {
|
||||
name: string; description?: string; category?: string; source?: string
|
||||
model?: string; system_prompt?: string; tools?: string[]
|
||||
capabilities?: string[]; temperature?: number; max_tokens?: number
|
||||
visibility?: string
|
||||
}) =>
|
||||
request.post<AgentTemplate>('/agent-templates', data).then((r) => r.data),
|
||||
|
||||
update: (id: string, data: {
|
||||
description?: string; model?: string; system_prompt?: string
|
||||
tools?: string[]; capabilities?: string[]; temperature?: number
|
||||
max_tokens?: number; visibility?: string; status?: string
|
||||
}) =>
|
||||
request.post<AgentTemplate>(`/agent-templates/${id}`, data).then((r) => r.data),
|
||||
|
||||
archive: (id: string) =>
|
||||
request.delete<AgentTemplate>(`/agent-templates/${id}`).then((r) => r.data),
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import request from './request'
|
||||
import type { TokenInfo, CreateTokenRequest, PaginatedResponse } from '@/types'
|
||||
|
||||
export const apiKeyService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<TokenInfo>>('/keys', { params }).then((r) => r.data),
|
||||
|
||||
create: (data: CreateTokenRequest) =>
|
||||
request.post<TokenInfo>('/keys', data).then((r) => r.data),
|
||||
|
||||
revoke: (id: string) =>
|
||||
request.delete(`/keys/${id}`).then((r) => r.data),
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import request from './request'
|
||||
import type { AccountPublic, LoginRequest, LoginResponse } from '@/types'
|
||||
|
||||
export const authService = {
|
||||
login: (data: LoginRequest) =>
|
||||
request.post<LoginResponse>('/auth/login', data).then((r) => r.data),
|
||||
|
||||
me: () =>
|
||||
request.get<AccountPublic>('/auth/me').then((r) => r.data),
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import request from './request'
|
||||
import type { ConfigItem, PaginatedResponse } from '@/types'
|
||||
|
||||
export const configService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<ConfigItem>>('/config/items', { params })
|
||||
.then((r) => r.data.items),
|
||||
|
||||
update: (id: string, data: { value: string | number | boolean }) =>
|
||||
request.patch<ConfigItem>(`/config/items/${id}`, data).then((r) => r.data),
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import request from './request'
|
||||
import type { OperationLog, PaginatedResponse } from '@/types'
|
||||
|
||||
export const logService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<OperationLog>>('/logs/operations', { params }).then((r) => r.data),
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import request from './request'
|
||||
import type { Model, PaginatedResponse } from '@/types'
|
||||
|
||||
export const modelService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<Model>>('/models', { params }).then((r) => r.data),
|
||||
|
||||
create: (data: Partial<Omit<Model, 'id'>>) =>
|
||||
request.post<Model>('/models', data).then((r) => r.data),
|
||||
|
||||
update: (id: string, data: Partial<Omit<Model, 'id'>>) =>
|
||||
request.patch<Model>(`/models/${id}`, data).then((r) => r.data),
|
||||
|
||||
delete: (id: string) =>
|
||||
request.delete(`/models/${id}`).then((r) => r.data),
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import request from './request'
|
||||
import type { PromptTemplate, PromptVersion, PaginatedResponse } from '@/types'
|
||||
|
||||
export const promptService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<PromptTemplate>>('/prompts', { params }).then((r) => r.data),
|
||||
|
||||
get: (name: string) =>
|
||||
request.get<PromptTemplate>(`/prompts/${encodeURIComponent(name)}`).then((r) => r.data),
|
||||
|
||||
create: (data: {
|
||||
name: string; category: string; description?: string; source?: string
|
||||
system_prompt: string; user_prompt_template?: string
|
||||
variables?: unknown[]; min_app_version?: string
|
||||
}) =>
|
||||
request.post<PromptTemplate>('/prompts', data).then((r) => r.data),
|
||||
|
||||
update: (name: string, data: { description?: string; status?: string }) =>
|
||||
request.put<PromptTemplate>(`/prompts/${encodeURIComponent(name)}`, data).then((r) => r.data),
|
||||
|
||||
archive: (name: string) =>
|
||||
request.delete<PromptTemplate>(`/prompts/${encodeURIComponent(name)}`).then((r) => r.data),
|
||||
|
||||
listVersions: (name: string) =>
|
||||
request.get<PromptVersion[]>(`/prompts/${encodeURIComponent(name)}/versions`).then((r) => r.data),
|
||||
|
||||
createVersion: (name: string, data: {
|
||||
system_prompt: string; user_prompt_template?: string
|
||||
variables?: unknown[]; changelog?: string; min_app_version?: string
|
||||
}) =>
|
||||
request.post<PromptVersion>(`/prompts/${encodeURIComponent(name)}/versions`, data).then((r) => r.data),
|
||||
|
||||
rollback: (name: string, version: number) =>
|
||||
request.post<PromptTemplate>(`/prompts/${encodeURIComponent(name)}/rollback/${version}`).then((r) => r.data),
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import request from './request'
|
||||
import type { Provider, ProviderKey, PaginatedResponse } from '@/types'
|
||||
|
||||
export const providerService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<Provider>>('/providers', { params }).then((r) => r.data),
|
||||
|
||||
create: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
|
||||
request.post<Provider>('/providers', data).then((r) => r.data),
|
||||
|
||||
update: (id: string, data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
|
||||
request.patch<Provider>(`/providers/${id}`, data).then((r) => r.data),
|
||||
|
||||
delete: (id: string) =>
|
||||
request.delete(`/providers/${id}`).then((r) => r.data),
|
||||
|
||||
listKeys: (providerId: string) =>
|
||||
request.get<ProviderKey[]>(`/providers/${providerId}/keys`).then((r) => r.data),
|
||||
|
||||
addKey: (providerId: string, data: {
|
||||
key_label: string; key_value: string; priority?: number
|
||||
max_rpm?: number; max_tpm?: number; quota_reset_interval?: string
|
||||
}) =>
|
||||
request.post<{ ok: boolean; key_id: string }>(`/providers/${providerId}/keys`, data).then((r) => r.data),
|
||||
|
||||
toggleKey: (providerId: string, keyId: string, active: boolean) =>
|
||||
request.put<{ ok: boolean }>(`/providers/${providerId}/keys/${keyId}/toggle`, { active }).then((r) => r.data),
|
||||
|
||||
deleteKey: (providerId: string, keyId: string) =>
|
||||
request.delete<{ ok: boolean }>(`/providers/${providerId}/keys/${keyId}`).then((r) => r.data),
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import request from './request'
|
||||
import type { RelayTask, PaginatedResponse } from '@/types'
|
||||
|
||||
export const relayService = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get<PaginatedResponse<RelayTask>>('/relay/tasks', { params }).then((r) => r.data),
|
||||
|
||||
get: (id: string) =>
|
||||
request.get<RelayTask>(`/relay/tasks/${id}`).then((r) => r.data),
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
// ============================================================
|
||||
// ZCLAW Admin V2 — Axios 实例 + JWT 拦截器
|
||||
// ============================================================
|
||||
|
||||
import axios from 'axios'
|
||||
import type { AxiosError, InternalAxiosRequestConfig } from 'axios'
|
||||
import type { ApiError } from '@/types'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
|
||||
const BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api/v1'
|
||||
const TIMEOUT_MS = 30_000
|
||||
|
||||
/** API 业务错误 */
|
||||
export class ApiRequestError extends Error {
|
||||
constructor(
|
||||
public status: number,
|
||||
public body: ApiError,
|
||||
) {
|
||||
super(body.message || `Request failed with status ${status}`)
|
||||
this.name = 'ApiRequestError'
|
||||
}
|
||||
}
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
timeout: TIMEOUT_MS,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
// ── 请求拦截器：自动附加 JWT ──────────────────────────────
|
||||
|
||||
request.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||||
const token = useAuthStore.getState().token
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
// ── 响应拦截器：401 自动刷新 ──────────────────────────────
|
||||
|
||||
let isRefreshing = false
|
||||
let pendingRequests: Array<(token: string) => void> = []
|
||||
|
||||
function onTokenRefreshed(newToken: string) {
|
||||
pendingRequests.forEach((cb) => cb(newToken))
|
||||
pendingRequests = []
|
||||
}
|
||||
|
||||
request.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error: AxiosError<{ error?: string; message?: string }>) => {
|
||||
const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
|
||||
|
||||
// 401 → 尝试刷新 Token
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
const store = useAuthStore.getState()
|
||||
if (!store.refreshToken) {
|
||||
store.logout()
|
||||
window.location.href = '/login'
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
if (isRefreshing) {
|
||||
return new Promise((resolve) => {
|
||||
pendingRequests.push((newToken: string) => {
|
||||
originalRequest.headers.Authorization = `Bearer ${newToken}`
|
||||
resolve(request(originalRequest))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
originalRequest._retry = true
|
||||
isRefreshing = true
|
||||
|
||||
try {
|
||||
const res = await axios.post(`${BASE_URL}/auth/refresh`, null, {
|
||||
headers: { Authorization: `Bearer ${store.refreshToken}` },
|
||||
})
|
||||
const newToken = res.data.token as string
|
||||
store.setToken(newToken)
|
||||
onTokenRefreshed(newToken)
|
||||
originalRequest.headers.Authorization = `Bearer ${newToken}`
|
||||
return request(originalRequest)
|
||||
} catch {
|
||||
store.logout()
|
||||
window.location.href = '/login'
|
||||
return Promise.reject(error)
|
||||
} finally {
|
||||
isRefreshing = false
|
||||
}
|
||||
}
|
||||
|
||||
// 构造 ApiRequestError
|
||||
if (error.response) {
|
||||
const body: ApiError = {
|
||||
error: error.response.data?.error || 'unknown',
|
||||
message: error.response.data?.message || `请求失败 (${error.response.status})`,
|
||||
status: error.response.status,
|
||||
}
|
||||
return Promise.reject(new ApiRequestError(error.response.status, body))
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
export default request
|
||||
@@ -1,7 +0,0 @@
|
||||
import request from './request'
|
||||
import type { DashboardStats } from '@/types'
|
||||
|
||||
export const statsService = {
|
||||
dashboard: () =>
|
||||
request.get<DashboardStats>('/stats/dashboard').then((r) => r.data),
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import request from './request'
|
||||
import type { ModelUsageStat, DailyUsageStat } from '@/types'
|
||||
|
||||
export const telemetryService = {
|
||||
modelStats: (params?: Record<string, unknown>) =>
|
||||
request.get<ModelUsageStat[]>('/telemetry/stats', { params }).then((r) => r.data),
|
||||
|
||||
dailyStats: (params?: { days?: number }) =>
|
||||
request.get<DailyUsageStat[]>('/telemetry/daily', { params }).then((r) => r.data),
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import request from './request'
|
||||
import type { UsageRecord, UsageByModel } from '@/types'
|
||||
|
||||
export const usageService = {
|
||||
daily: (params?: { days?: number }) =>
|
||||
request.get<{ by_day: UsageRecord[] }>('/usage', { params: { ...params, group_by: 'day' } })
|
||||
.then((r) => r.data.by_day || []),
|
||||
|
||||
byModel: (params?: { days?: number }) =>
|
||||
request.get<{ by_model: UsageByModel[] }>('/usage', { params: { ...params, group_by: 'model' } })
|
||||
.then((r) => r.data.by_model || []),
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
// ============================================================
|
||||
// ZCLAW Admin V2 — Zustand 认证状态管理
|
||||
// ============================================================
|
||||
|
||||
import { create } from 'zustand'
|
||||
import type { AccountPublic } from '@/types'
|
||||
|
||||
/** 权限常量 — 与后端 db.rs SEED_ROLES 保持同步 */
|
||||
const ROLE_PERMISSIONS: Record<string, string[]> = {
|
||||
super_admin: [
|
||||
'admin:full', 'account:admin', 'provider:manage', 'model:manage',
|
||||
'relay:admin', 'config:write', 'prompt:read', 'prompt:write',
|
||||
'prompt:publish', 'prompt:admin',
|
||||
],
|
||||
admin: [
|
||||
'account:read', 'account:admin', 'provider:manage', 'model:read',
|
||||
'model:manage', 'relay:use', 'relay:admin', 'config:read',
|
||||
'config:write', 'prompt:read', 'prompt:write', 'prompt:publish',
|
||||
],
|
||||
user: ['model:read', 'relay:use', 'config:read', 'prompt:read'],
|
||||
}
|
||||
|
||||
const TOKEN_KEY = 'zclaw_admin_token'
|
||||
const REFRESH_KEY = 'zclaw_admin_refresh_token'
|
||||
const ACCOUNT_KEY = 'zclaw_admin_account'
|
||||
|
||||
function loadFromStorage(): { token: string | null; refreshToken: string | null; account: AccountPublic | null } {
|
||||
const token = localStorage.getItem(TOKEN_KEY)
|
||||
const refreshToken = localStorage.getItem(REFRESH_KEY)
|
||||
const raw = localStorage.getItem(ACCOUNT_KEY)
|
||||
let account: AccountPublic | null = null
|
||||
if (raw) {
|
||||
try { account = JSON.parse(raw) } catch { /* ignore */ }
|
||||
}
|
||||
return { token, refreshToken, account }
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
token: string | null
|
||||
refreshToken: string | null
|
||||
account: AccountPublic | null
|
||||
permissions: string[]
|
||||
|
||||
setToken: (token: string) => void
|
||||
login: (token: string, refreshToken: string, account: AccountPublic) => void
|
||||
logout: () => void
|
||||
hasPermission: (permission: string) => boolean
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>((set, get) => {
|
||||
const stored = loadFromStorage()
|
||||
const perms = stored.account ? (ROLE_PERMISSIONS[stored.account.role] ?? []) : []
|
||||
|
||||
return {
|
||||
token: stored.token,
|
||||
refreshToken: stored.refreshToken,
|
||||
account: stored.account,
|
||||
permissions: perms,
|
||||
|
||||
setToken: (token: string) => {
|
||||
localStorage.setItem(TOKEN_KEY, token)
|
||||
set({ token })
|
||||
},
|
||||
|
||||
login: (token: string, refreshToken: string, account: AccountPublic) => {
|
||||
localStorage.setItem(TOKEN_KEY, token)
|
||||
localStorage.setItem(REFRESH_KEY, refreshToken)
|
||||
localStorage.setItem(ACCOUNT_KEY, JSON.stringify(account))
|
||||
set({
|
||||
token,
|
||||
refreshToken,
|
||||
account,
|
||||
permissions: ROLE_PERMISSIONS[account.role] ?? [],
|
||||
})
|
||||
},
|
||||
|
||||
logout: () => {
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(REFRESH_KEY)
|
||||
localStorage.removeItem(ACCOUNT_KEY)
|
||||
set({ token: null, refreshToken: null, account: null, permissions: [] })
|
||||
},
|
||||
|
||||
hasPermission: (permission: string) => {
|
||||
const { permissions } = get()
|
||||
return permissions.includes(permission) || permissions.includes('admin:full')
|
||||
},
|
||||
}
|
||||
})
|
||||
@@ -1,267 +0,0 @@
|
||||
// ============================================================
|
||||
// ZCLAW SaaS Admin — 全局类型定义
|
||||
// ============================================================
|
||||
|
||||
/** 公共账号信息 */
|
||||
export interface AccountPublic {
|
||||
id: string
|
||||
username: string
|
||||
email: string
|
||||
display_name: string
|
||||
role: 'super_admin' | 'admin' | 'user'
|
||||
status: 'active' | 'disabled' | 'suspended'
|
||||
totp_enabled: boolean
|
||||
last_login_at: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 登录请求 */
|
||||
export interface LoginRequest {
|
||||
username: string
|
||||
password: string
|
||||
totp_code?: string
|
||||
}
|
||||
|
||||
/** 登录响应 */
|
||||
export interface LoginResponse {
|
||||
token: string
|
||||
refresh_token: string
|
||||
account: AccountPublic
|
||||
}
|
||||
|
||||
/** 注册请求 */
|
||||
export interface RegisterRequest {
|
||||
username: string
|
||||
password: string
|
||||
email: string
|
||||
display_name?: string
|
||||
}
|
||||
|
||||
/** 分页响应 */
|
||||
export interface PaginatedResponse<T> {
|
||||
items: T[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
}
|
||||
|
||||
/** 服务商 (Provider) */
|
||||
export interface Provider {
|
||||
id: string
|
||||
name: string
|
||||
display_name: string
|
||||
api_key?: string
|
||||
base_url: string
|
||||
api_protocol: string
|
||||
enabled: boolean
|
||||
rate_limit_rpm: number | null
|
||||
rate_limit_tpm: number | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** 模型 */
|
||||
export interface Model {
|
||||
id: string
|
||||
provider_id: string
|
||||
model_id: string
|
||||
alias: string
|
||||
context_window: number
|
||||
max_output_tokens: number
|
||||
supports_streaming: boolean
|
||||
supports_vision: boolean
|
||||
enabled: boolean
|
||||
pricing_input: number
|
||||
pricing_output: number
|
||||
}
|
||||
|
||||
/** API 密钥信息 */
|
||||
export interface TokenInfo {
|
||||
id: string
|
||||
name: string
|
||||
token_prefix: string
|
||||
permissions: string[]
|
||||
last_used_at?: string
|
||||
expires_at?: string
|
||||
created_at: string
|
||||
token?: string
|
||||
}
|
||||
|
||||
/** 创建 Token 请求 */
|
||||
export interface CreateTokenRequest {
|
||||
name: string
|
||||
expires_days?: number
|
||||
permissions: string[]
|
||||
}
|
||||
|
||||
/** 中转任务 */
|
||||
export interface RelayTask {
|
||||
id: string
|
||||
account_id: string
|
||||
provider_id: string
|
||||
model_id: string
|
||||
status: string
|
||||
priority: number
|
||||
attempt_count: number
|
||||
max_attempts: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
error_message: string | null
|
||||
queued_at: string
|
||||
started_at: string | null
|
||||
completed_at: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 用量记录 */
|
||||
export interface UsageRecord {
|
||||
day: string
|
||||
count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
}
|
||||
|
||||
/** 按模型用量 */
|
||||
export interface UsageByModel {
|
||||
model_id: string
|
||||
count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
}
|
||||
|
||||
/** 系统配置项 */
|
||||
export interface ConfigItem {
|
||||
id: string
|
||||
category: string
|
||||
key_path: string
|
||||
value_type: string
|
||||
current_value: string | null
|
||||
default_value: string | null
|
||||
source: string
|
||||
description: string | null
|
||||
requires_restart: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** 操作日志 */
|
||||
export interface OperationLog {
|
||||
id: number
|
||||
account_id: string | null
|
||||
action: string
|
||||
target_type: string | null
|
||||
target_id: string | null
|
||||
details: Record<string, unknown> | null
|
||||
ip_address: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 仪表盘统计 */
|
||||
export interface DashboardStats {
|
||||
total_accounts: number
|
||||
active_accounts: number
|
||||
tasks_today: number
|
||||
active_providers: number
|
||||
active_models: number
|
||||
tokens_today_input: number
|
||||
tokens_today_output: number
|
||||
}
|
||||
|
||||
/** API 错误响应 */
|
||||
export interface ApiError {
|
||||
error: string
|
||||
message: string
|
||||
status?: number
|
||||
}
|
||||
|
||||
/** 提示词模板 */
|
||||
export interface PromptTemplate {
|
||||
id: string
|
||||
name: string
|
||||
category: string
|
||||
description?: string
|
||||
source: 'builtin' | 'custom'
|
||||
current_version: number
|
||||
status: 'active' | 'deprecated' | 'archived'
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** 提示词版本 */
|
||||
export interface PromptVersion {
|
||||
id: string
|
||||
template_id: string
|
||||
version: number
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables: PromptVariable[]
|
||||
changelog?: string
|
||||
min_app_version?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 提示词变量定义 */
|
||||
export interface PromptVariable {
|
||||
name: string
|
||||
type: 'string' | 'number' | 'select' | 'boolean'
|
||||
default_value?: string
|
||||
description?: string
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
/** Agent 模板 */
|
||||
export interface AgentTemplate {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
category: string
|
||||
source: 'builtin' | 'custom'
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools: string[]
|
||||
capabilities: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility: 'public' | 'team' | 'private'
|
||||
status: 'active' | 'archived'
|
||||
current_version: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** Provider Key */
|
||||
export interface ProviderKey {
|
||||
id: string
|
||||
provider_id: string
|
||||
key_label: string
|
||||
priority: number
|
||||
max_rpm?: number
|
||||
max_tpm?: number
|
||||
quota_reset_interval?: string
|
||||
is_active: boolean
|
||||
last_429_at?: string
|
||||
cooldown_until?: string
|
||||
total_requests: number
|
||||
total_tokens: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** 按模型聚合的用量统计 */
|
||||
export interface ModelUsageStat {
|
||||
model_id: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
avg_latency_ms: number | null
|
||||
success_rate: number
|
||||
}
|
||||
|
||||
/** 按天的用量统计 */
|
||||
export interface DailyUsageStat {
|
||||
day: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
unique_devices: number
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Path alias */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
2
admin/.gitignore
vendored
2
admin/.gitignore
vendored
@@ -1,2 +1,4 @@
|
||||
.next/
|
||||
node_modules/
|
||||
.env.local
|
||||
.env*.local
|
||||
|
||||
@@ -1,10 +1,41 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
async rewrites() {
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: '/api/:path*',
|
||||
destination: 'http://localhost:8080/api/:path*',
|
||||
source: '/(.*)',
|
||||
headers: [
|
||||
{
|
||||
key: 'X-Frame-Options',
|
||||
value: 'DENY',
|
||||
},
|
||||
{
|
||||
key: 'X-Content-Type-Options',
|
||||
value: 'nosniff',
|
||||
},
|
||||
{
|
||||
key: 'Referrer-Policy',
|
||||
value: 'strict-origin-when-cross-origin',
|
||||
},
|
||||
{
|
||||
key: 'Content-Security-Policy',
|
||||
value: [
|
||||
"default-src 'self'",
|
||||
"script-src 'self' 'unsafe-eval' 'unsafe-inline'",
|
||||
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
|
||||
"font-src 'self' https://fonts.gstatic.com",
|
||||
"img-src 'self' data: blob:",
|
||||
"connect-src 'self'",
|
||||
"frame-ancestors 'none'",
|
||||
"base-uri 'self'",
|
||||
"form-action 'self'",
|
||||
].join('; '),
|
||||
},
|
||||
{
|
||||
key: 'Permissions-Policy',
|
||||
value: 'camera=(), microphone=(), geolocation=()',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"recharts": "^2.15.3",
|
||||
"swr": "^2.4.1",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
43
admin/pnpm-lock.yaml
generated
43
admin/pnpm-lock.yaml
generated
@@ -47,9 +47,9 @@ importers:
|
||||
recharts:
|
||||
specifier: ^2.15.3
|
||||
version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
swr:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1(react@18.3.1)
|
||||
sonner:
|
||||
specifier: ^2.0.7
|
||||
version: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
tailwind-merge:
|
||||
specifier: ^3.0.2
|
||||
version: 3.5.0
|
||||
@@ -722,10 +722,6 @@ packages:
|
||||
decimal.js-light@2.5.1:
|
||||
resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
|
||||
|
||||
dequal@2.0.3:
|
||||
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
detect-node-es@1.1.0:
|
||||
resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
|
||||
|
||||
@@ -1070,6 +1066,12 @@ packages:
|
||||
scheduler@0.23.2:
|
||||
resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
|
||||
|
||||
sonner@2.0.7:
|
||||
resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
|
||||
peerDependencies:
|
||||
react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
|
||||
source-map-js@1.2.1:
|
||||
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -1100,11 +1102,6 @@ packages:
|
||||
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
swr@2.4.1:
|
||||
resolution: {integrity: sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA==}
|
||||
peerDependencies:
|
||||
react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
tailwind-merge@3.5.0:
|
||||
resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
|
||||
|
||||
@@ -1171,11 +1168,6 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
use-sync-external-store@1.6.0:
|
||||
resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
|
||||
@@ -1761,8 +1753,6 @@ snapshots:
|
||||
|
||||
decimal.js-light@2.5.1: {}
|
||||
|
||||
dequal@2.0.3: {}
|
||||
|
||||
detect-node-es@1.1.0: {}
|
||||
|
||||
didyoumean@1.2.2: {}
|
||||
@@ -2071,6 +2061,11 @@ snapshots:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
||||
streamsearch@1.1.0: {}
|
||||
@@ -2092,12 +2087,6 @@ snapshots:
|
||||
|
||||
supports-preserve-symlinks-flag@1.0.0: {}
|
||||
|
||||
swr@2.4.1(react@18.3.1):
|
||||
dependencies:
|
||||
dequal: 2.0.3
|
||||
react: 18.3.1
|
||||
use-sync-external-store: 1.6.0(react@18.3.1)
|
||||
|
||||
tailwind-merge@3.5.0: {}
|
||||
|
||||
tailwindcss@3.4.19:
|
||||
@@ -2176,10 +2165,6 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.28
|
||||
|
||||
use-sync-external-store@1.6.0(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
util-deprecate@1.0.2: {}
|
||||
|
||||
victory-vendor@36.9.2:
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
@@ -41,10 +40,7 @@ import {
|
||||
} from '@/components/ui/select'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate, getSwrErrorMessage } from '@/lib/utils'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { useDebounce } from '@/hooks/use-debounce'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import type { AccountPublic } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
@@ -68,28 +64,21 @@ const statusLabels: Record<string, string> = {
|
||||
}
|
||||
|
||||
export default function AccountsPage() {
|
||||
const [accounts, setAccounts] = useState<AccountPublic[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
// 搜索 debounce: 输入后 300ms 再触发请求
|
||||
const [debouncedSearchState, setDebouncedSearchState] = useState('')
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedSearchState(search), 300)
|
||||
return () => clearTimeout(timer)
|
||||
}, [search])
|
||||
const [roleFilter, setRoleFilter] = useState<string>('all')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [mutationError, setMutationError] = useState('')
|
||||
|
||||
const debouncedSearch = useDebounce(search, 300)
|
||||
|
||||
const { data, error: swrError, isLoading, mutate } = useSWR(
|
||||
['accounts', page, debouncedSearch, roleFilter, statusFilter],
|
||||
() => {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (debouncedSearch.trim()) params.search = debouncedSearch.trim()
|
||||
if (roleFilter !== 'all') params.role = roleFilter
|
||||
if (statusFilter !== 'all') params.status = statusFilter
|
||||
return api.accounts.list(params)
|
||||
},
|
||||
)
|
||||
|
||||
const accounts = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
const error = getSwrErrorMessage(swrError) || mutationError
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// 编辑 Dialog
|
||||
const [editTarget, setEditTarget] = useState<AccountPublic | null>(null)
|
||||
@@ -100,6 +89,33 @@ export default function AccountsPage() {
|
||||
const [confirmTarget, setConfirmTarget] = useState<{ id: string; action: string; status: string } | null>(null)
|
||||
const [confirmSaving, setConfirmSaving] = useState(false)
|
||||
|
||||
const fetchAccounts = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (debouncedSearchState.trim()) params.search = debouncedSearchState.trim()
|
||||
if (roleFilter !== 'all') params.role = roleFilter
|
||||
if (statusFilter !== 'all') params.status = statusFilter
|
||||
|
||||
const res = await api.accounts.list(params)
|
||||
setAccounts(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setError(err.body.message)
|
||||
} else {
|
||||
setError('加载失败')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, debouncedSearchState, roleFilter, statusFilter])
|
||||
|
||||
useEffect(() => {
|
||||
fetchAccounts()
|
||||
}, [fetchAccounts])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
function openEditDialog(account: AccountPublic) {
|
||||
@@ -121,10 +137,10 @@ export default function AccountsPage() {
|
||||
role: editForm.role as AccountPublic['role'],
|
||||
})
|
||||
setEditTarget(null)
|
||||
mutate()
|
||||
fetchAccounts()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setMutationError(err.body.message)
|
||||
setError(err.body.message)
|
||||
}
|
||||
} finally {
|
||||
setEditSaving(false)
|
||||
@@ -148,10 +164,10 @@ export default function AccountsPage() {
|
||||
status: confirmTarget.status as AccountPublic['status'],
|
||||
})
|
||||
setConfirmTarget(null)
|
||||
mutate()
|
||||
fetchAccounts()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setMutationError(err.body.message)
|
||||
setError(err.body.message)
|
||||
}
|
||||
} finally {
|
||||
setConfirmSaving(false)
|
||||
@@ -196,13 +212,24 @@ export default function AccountsPage() {
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && <ErrorBanner message={error} onDismiss={() => { setMutationError('') }} />}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 表格 */}
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={7} />
|
||||
) : error ? null : accounts.length === 0 ? (
|
||||
<EmptyState />
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : accounts.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
@@ -1,290 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { AgentTemplate } from '@/lib/types'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
|
||||
export default function AgentTemplatesPage() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [error, setError] = useState('')
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
|
||||
const { data, isLoading, mutate } = useSWR(
|
||||
['agentTemplates.list', page],
|
||||
() => api.agentTemplates.list({ page, page_size: 50 }),
|
||||
)
|
||||
|
||||
const templates = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
const fd = new FormData(e.currentTarget)
|
||||
try {
|
||||
const tools = (fd.get('tools') as string || '').split(',').map(s => s.trim()).filter(Boolean)
|
||||
const capabilities = (fd.get('capabilities') as string || '').split(',').map(s => s.trim()).filter(Boolean)
|
||||
await api.agentTemplates.create({
|
||||
name: fd.get('name') as string,
|
||||
description: (fd.get('description') as string) || undefined,
|
||||
category: (fd.get('category') as string) || 'general',
|
||||
model: (fd.get('model') as string) || undefined,
|
||||
system_prompt: (fd.get('system_prompt') as string) || undefined,
|
||||
tools: tools.length > 0 ? tools : undefined,
|
||||
capabilities: capabilities.length > 0 ? capabilities : undefined,
|
||||
temperature: (fd.get('temperature') as string) ? parseFloat(fd.get('temperature') as string) : undefined,
|
||||
max_tokens: (fd.get('max_tokens') as string) ? parseInt(fd.get('max_tokens') as string, 10) : undefined,
|
||||
visibility: (fd.get('visibility') as string) || 'public',
|
||||
})
|
||||
setShowCreate(false)
|
||||
mutate()
|
||||
} catch {
|
||||
setError('创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async (id: string, name: string) => {
|
||||
if (!confirm(`确认归档模板 "${name}"？`)) return
|
||||
try {
|
||||
await api.agentTemplates.archive(id)
|
||||
mutate()
|
||||
} catch {
|
||||
setError('归档失败')
|
||||
}
|
||||
}
|
||||
|
||||
const statusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
active: 'bg-emerald-500/20 text-emerald-400',
|
||||
archived: 'bg-zinc-500/20 text-zinc-400',
|
||||
}
|
||||
return <span className={`px-2 py-0.5 text-xs rounded-full ${colors[status] || colors.archived}`}>{status}</span>
|
||||
}
|
||||
|
||||
const sourceBadge = (source: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
builtin: 'bg-blue-500/20 text-blue-400',
|
||||
custom: 'bg-purple-500/20 text-purple-400',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${colors[source] || ''}`}>
|
||||
{source === 'builtin' ? '内置' : '自定义'}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Agent 配置模板</h1>
|
||||
<p className="text-sm text-zinc-400 mt-1">管理 Agent 配置模板，支持团队共享和一键复用</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
||||
>
|
||||
+ 新建模板
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-800">
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">名称</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">分类</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">来源</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">模型</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">工具数</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">可见性</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">状态</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">更新时间</th>
|
||||
<th className="text-right px-4 py-3 text-zinc-400 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={9}>
|
||||
<TableSkeleton rows={5} cols={9} hasToolbar={false} />
|
||||
</td>
|
||||
</tr>
|
||||
) : templates.length === 0 ? (
|
||||
<tr><td colSpan={9}><EmptyState message="暂无 Agent 模板" /></td></tr>
|
||||
) : (
|
||||
templates.map(t => (
|
||||
<tr key={t.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/30">
|
||||
<td className="px-4 py-3">
|
||||
<div>
|
||||
<span className="text-white font-medium">{t.name}</span>
|
||||
{t.description && (
|
||||
<p className="text-xs text-zinc-500 mt-0.5 truncate max-w-[200px]">{t.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.category}</td>
|
||||
<td className="px-4 py-3">{sourceBadge(t.source)}</td>
|
||||
<td className="px-4 py-3 text-zinc-300 font-mono text-xs">{t.model || '-'}</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.tools.length}</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.visibility}</td>
|
||||
<td className="px-4 py-3">{statusBadge(t.status)}</td>
|
||||
<td className="px-4 py-3 text-zinc-500 text-xs">
|
||||
{new Date(t.updated_at).toLocaleString('zh-CN')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => setEditingId(editingId === t.id ? null : t.id)}
|
||||
className="text-zinc-400 hover:text-white mr-2"
|
||||
>
|
||||
详情
|
||||
</button>
|
||||
{t.source === 'custom' && (
|
||||
<button
|
||||
onClick={() => handleArchive(t.id, t.name)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
>
|
||||
归档
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="px-4 py-2 text-xs text-zinc-500 border-t border-zinc-800">
|
||||
共 {total} 个模板
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开详情 */}
|
||||
{editingId && (() => {
|
||||
const t = templates.find(t => t.id === editingId)
|
||||
if (!t) return null
|
||||
return (
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold text-white">{t.name} — 详情</h2>
|
||||
<button onClick={() => setEditingId(null)} className="text-zinc-400 hover:text-white text-sm">关闭</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-zinc-500">分类：</span>
|
||||
<span className="text-zinc-300">{t.category}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500">模型：</span>
|
||||
<span className="text-zinc-300 font-mono">{t.model || '未指定'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500">温度：</span>
|
||||
<span className="text-zinc-300">{t.temperature?.toFixed(2) || '默认'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500">最大 Token：</span>
|
||||
<span className="text-zinc-300">{t.max_tokens || '未限制'}</span>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<span className="text-zinc-500">工具：</span>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{t.tools.length > 0 ? t.tools.map(tool => (
|
||||
<span key={tool} className="px-2 py-0.5 bg-zinc-800 rounded text-xs text-zinc-300">{tool}</span>
|
||||
)) : <span className="text-zinc-600">无</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<span className="text-zinc-500">能力：</span>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{t.capabilities.length > 0 ? t.capabilities.map(cap => (
|
||||
<span key={cap} className="px-2 py-0.5 bg-blue-500/10 rounded text-xs text-blue-400">{cap}</span>
|
||||
)) : <span className="text-zinc-600">无</span>}
|
||||
</div>
|
||||
</div>
|
||||
{t.system_prompt && (
|
||||
<div className="col-span-2">
|
||||
<span className="text-zinc-500">系统提示词：</span>
|
||||
<pre className="text-xs text-zinc-400 bg-zinc-800/50 rounded p-2 mt-1 overflow-x-auto max-h-32">
|
||||
{t.system_prompt.substring(0, 500)}{t.system_prompt.length > 500 ? '...' : ''}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreate && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<form onSubmit={handleCreate} className="bg-zinc-900 rounded-xl border border-zinc-700 p-6 w-full max-w-lg space-y-4 max-h-[80vh] overflow-y-auto">
|
||||
<h2 className="text-lg font-semibold text-white">新建 Agent 模板</h2>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">名称 *</label>
|
||||
<input name="name" required className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="my_agent" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">描述</label>
|
||||
<input name="description" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="可选" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">分类</label>
|
||||
<select name="category" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm">
|
||||
<option value="general">通用</option>
|
||||
<option value="coding">编程</option>
|
||||
<option value="research">研究</option>
|
||||
<option value="creative">创意</option>
|
||||
<option value="assistant">助手</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">模型</label>
|
||||
<input name="model" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="如 glm-4-plus" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">系统提示词</label>
|
||||
<textarea name="system_prompt" rows={4} className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm font-mono" placeholder="Agent 系统提示词" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">工具（逗号分隔）</label>
|
||||
<input name="tools" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="browser, file_system, code_execute" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">能力（逗号分隔）</label>
|
||||
<input name="capabilities" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="streaming, vision, function_calling" />
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">温度</label>
|
||||
<input name="temperature" type="number" step="0.1" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="默认" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">最大 Token</label>
|
||||
<input name="max_tokens" type="number" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="不限" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">可见性</label>
|
||||
<select name="visibility" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm">
|
||||
<option value="public">公开</option>
|
||||
<option value="team">团队</option>
|
||||
<option value="private">私有</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => setShowCreate(false)} className="px-4 py-2 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-sm">取消</button>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">创建</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
@@ -33,10 +32,8 @@ import {
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate, getSwrErrorMessage } from '@/lib/utils'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import type { TokenInfo } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
@@ -48,17 +45,11 @@ const allPermissions = [
|
||||
]
|
||||
|
||||
export default function ApiKeysPage() {
|
||||
const [tokens, setTokens] = useState<TokenInfo[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [mutationError, setMutationError] = useState('')
|
||||
|
||||
const { data, error: swrError, isLoading, mutate } = useSWR(
|
||||
['tokens', page],
|
||||
() => api.tokens.list({ page, page_size: PAGE_SIZE }),
|
||||
)
|
||||
|
||||
const tokens = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
const error = getSwrErrorMessage(swrError) || mutationError
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// 创建 Dialog
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
@@ -73,6 +64,25 @@ export default function ApiKeysPage() {
|
||||
const [revokeTarget, setRevokeTarget] = useState<TokenInfo | null>(null)
|
||||
const [revoking, setRevoking] = useState(false)
|
||||
|
||||
const fetchTokens = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.tokens.list({ page, page_size: PAGE_SIZE })
|
||||
setTokens(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page])
|
||||
|
||||
useEffect(() => {
|
||||
fetchTokens()
|
||||
}, [fetchTokens])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
function togglePermission(perm: string) {
|
||||
@@ -97,9 +107,9 @@ export default function ApiKeysPage() {
|
||||
setCreateOpen(false)
|
||||
setCreatedToken(res)
|
||||
setCreateForm({ name: '', expires_days: '', permissions: ['chat'] })
|
||||
mutate()
|
||||
fetchTokens()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setMutationError(err.body.message)
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
setCreating(false)
|
||||
}
|
||||
@@ -111,9 +121,9 @@ export default function ApiKeysPage() {
|
||||
try {
|
||||
await api.tokens.revoke(revokeTarget.id)
|
||||
setRevokeTarget(null)
|
||||
mutate()
|
||||
fetchTokens()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setMutationError(err.body.message)
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
setRevoking(false)
|
||||
}
|
||||
@@ -148,12 +158,21 @@ export default function ApiKeysPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setMutationError('')} />}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={7} />
|
||||
) : error ? null : tokens.length === 0 ? (
|
||||
<EmptyState />
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : tokens.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
Loader2,
|
||||
Pencil,
|
||||
@@ -36,8 +35,6 @@ import {
|
||||
} from '@/components/ui/dialog'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import type { ConfigItem } from '@/lib/types'
|
||||
|
||||
@@ -54,31 +51,56 @@ const sourceVariants: Record<string, 'secondary' | 'info' | 'default'> = {
|
||||
}
|
||||
|
||||
export default function ConfigPage() {
|
||||
const [configs, setConfigs] = useState<ConfigItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [activeTab, setActiveTab] = useState('all')
|
||||
|
||||
// SWR for config list
|
||||
const { data: configs = [], isLoading, mutate } = useSWR(
|
||||
['config', activeTab],
|
||||
() => {
|
||||
const params: Record<string, unknown> = {}
|
||||
if (activeTab !== 'all') params.category = activeTab
|
||||
return api.config.list(params)
|
||||
}
|
||||
)
|
||||
|
||||
// 编辑 Dialog
|
||||
const [editTarget, setEditTarget] = useState<ConfigItem | null>(null)
|
||||
const [editValue, setEditValue] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const fetchConfigs = useCallback(async (category?: string) => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = {}
|
||||
if (category && category !== 'all') params.category = category
|
||||
const res = await api.config.list(params)
|
||||
setConfigs(res)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfigs(activeTab)
|
||||
}, [fetchConfigs, activeTab])
|
||||
|
||||
function openEditDialog(config: ConfigItem) {
|
||||
setEditTarget(config)
|
||||
setEditValue(config.current_value ?? '')
|
||||
setEditValue(config.current_value !== undefined ? String(config.current_value) : '')
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!editTarget) return
|
||||
// 表单验证
|
||||
if (editValue.trim() === '') {
|
||||
setError('配置值不能为空')
|
||||
return
|
||||
}
|
||||
if (editTarget.value_type === 'number' && isNaN(Number(editValue))) {
|
||||
setError('请输入有效的数字')
|
||||
return
|
||||
}
|
||||
if (editTarget.value_type === 'boolean' && editValue !== 'true' && editValue !== 'false') {
|
||||
setError('布尔值只能为 true 或 false')
|
||||
return
|
||||
}
|
||||
setSaving(true)
|
||||
try {
|
||||
let parsedValue: string | number | boolean = editValue
|
||||
@@ -87,9 +109,9 @@ export default function ConfigPage() {
|
||||
} else if (editTarget.value_type === 'boolean') {
|
||||
parsedValue = editValue === 'true'
|
||||
}
|
||||
await api.config.update(editTarget.id, { value: parsedValue })
|
||||
await api.config.update(editTarget.id, { current_value: parsedValue })
|
||||
setEditTarget(null)
|
||||
mutate()
|
||||
fetchConfigs(activeTab)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -103,15 +125,7 @@ export default function ConfigPage() {
|
||||
return String(value)
|
||||
}
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
all: '全部',
|
||||
server: '服务器',
|
||||
agent: 'Agent',
|
||||
memory: '记忆',
|
||||
llm: 'LLM',
|
||||
security: '安全策略',
|
||||
}
|
||||
const categories = Object.keys(categoryLabels)
|
||||
const categories = ['all', 'auth', 'relay', 'model', 'system']
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -120,18 +134,27 @@ export default function ConfigPage() {
|
||||
<TabsList>
|
||||
{categories.map((cat) => (
|
||||
<TabsTrigger key={cat} value={cat}>
|
||||
{categoryLabels[cat] || cat}
|
||||
{cat === 'all' ? '全部' : cat}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={8} cols={8} hasToolbar={false} />
|
||||
) : error ? null : configs.length === 0 ? (
|
||||
<EmptyState message="暂无配置项" />
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : configs.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无配置项
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
@@ -210,7 +233,7 @@ export default function ConfigPage() {
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
新值 {editTarget?.default_value != null && (
|
||||
新值 {editTarget?.default_value !== undefined && (
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
(默认: {formatValue(editTarget.default_value)})
|
||||
</span>
|
||||
@@ -239,7 +262,7 @@ export default function ConfigPage() {
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
if (editTarget?.default_value != null) {
|
||||
if (editTarget?.default_value !== undefined) {
|
||||
setEditValue(String(editTarget.default_value))
|
||||
}
|
||||
}}
|
||||
|
||||
125
admin/src/app/(dashboard)/devices/page.tsx
Normal file
125
admin/src/app/(dashboard)/devices/page.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Monitor, Loader2, RefreshCw } from 'lucide-react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import type { DeviceInfo } from '@/lib/types'
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
const now = Date.now()
|
||||
const then = new Date(dateStr).getTime()
|
||||
const diffMs = now - then
|
||||
const diffMin = Math.floor(diffMs / 60000)
|
||||
const diffHour = Math.floor(diffMs / 3600000)
|
||||
const diffDay = Math.floor(diffMs / 86400000)
|
||||
|
||||
if (diffMin < 1) return '刚刚'
|
||||
if (diffMin < 60) return `${diffMin} 分钟前`
|
||||
if (diffHour < 24) return `${diffHour} 小时前`
|
||||
return `${diffDay} 天前`
|
||||
}
|
||||
|
||||
function isOnline(lastSeen: string): boolean {
|
||||
return Date.now() - new Date(lastSeen).getTime() < 5 * 60 * 1000
|
||||
}
|
||||
|
||||
export default function DevicesPage() {
|
||||
const [devices, setDevices] = useState<DeviceInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
async function fetchDevices() {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.devices.list()
|
||||
setDevices(res)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { fetchDevices() }, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-foreground">设备管理</h2>
|
||||
<button
|
||||
onClick={fetchDevices}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && !devices.length ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : devices.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<Monitor className="h-10 w-10 mb-3" />
|
||||
<p className="text-sm">暂无已注册设备</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>设备名称</TableHead>
|
||||
<TableHead>平台</TableHead>
|
||||
<TableHead>版本</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>最后活跃</TableHead>
|
||||
<TableHead>注册时间</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{devices.map((d) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="font-medium">
|
||||
{d.device_name || d.device_id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">{d.platform || 'unknown'}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{d.app_version || '-'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={isOnline(d.last_seen_at) ? 'success' : 'outline'}>
|
||||
{isOnline(d.last_seen_at) ? '在线' : '离线'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{formatRelativeTime(d.last_seen_at)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-xs">
|
||||
{new Date(d.created_at).toLocaleString('zh-CN')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import { useState, useEffect, type ReactNode } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import {
|
||||
@@ -13,73 +13,75 @@ import {
|
||||
ArrowLeftRight,
|
||||
Settings,
|
||||
FileText,
|
||||
MessageSquare,
|
||||
Bot,
|
||||
LogOut,
|
||||
ChevronLeft,
|
||||
Menu,
|
||||
Bell,
|
||||
UserCog,
|
||||
ShieldCheck,
|
||||
Monitor,
|
||||
} from 'lucide-react'
|
||||
import { AuthGuard, useAuth } from '@/components/auth-guard'
|
||||
import { logout } from '@/lib/auth'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
/** 权限常量 — 与后端 db.rs SEED_ROLES 保持同步 */
|
||||
const ROLE_PERMISSIONS: Record<string, string[]> = {
|
||||
super_admin: ['admin:full', 'account:admin', 'provider:manage', 'model:manage', 'relay:admin', 'config:write', 'prompt:read', 'prompt:write', 'prompt:publish', 'prompt:admin'],
|
||||
admin: ['account:read', 'account:admin', 'provider:manage', 'model:read', 'model:manage', 'relay:use', 'relay:admin', 'config:read', 'config:write', 'prompt:read', 'prompt:write', 'prompt:publish'],
|
||||
user: ['model:read', 'relay:use', 'config:read', 'prompt:read'],
|
||||
}
|
||||
|
||||
/** 根据 role 获取权限列表 */
|
||||
function getPermissionsForRole(role: string): string[] {
|
||||
return ROLE_PERMISSIONS[role] ?? []
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ href: '/', label: '仪表盘', icon: LayoutDashboard },
|
||||
{ href: '/', label: '仪表盘', icon: LayoutDashboard, permission: null },
|
||||
{ href: '/accounts', label: '账号管理', icon: Users, permission: 'account:admin' },
|
||||
{ href: '/providers', label: '服务商', icon: Server, permission: 'provider:manage' },
|
||||
{ href: '/models', label: '模型管理', icon: Cpu, permission: 'model:read' },
|
||||
{ href: '/agent-templates', label: 'Agent 模板', icon: Bot, permission: 'model:read' },
|
||||
{ href: '/api-keys', label: 'API 密钥', icon: Key, permission: 'admin:full' },
|
||||
{ href: '/usage', label: '用量统计', icon: BarChart3, permission: 'admin:full' },
|
||||
{ href: '/relay', label: '中转任务', icon: ArrowLeftRight, permission: 'relay:use' },
|
||||
{ href: '/config', label: '系统配置', icon: Settings, permission: 'config:read' },
|
||||
{ href: '/prompts', label: '提示词管理', icon: MessageSquare, permission: 'prompt:read' },
|
||||
{ href: '/providers', label: '服务商', icon: Server, permission: 'model:admin' },
|
||||
{ href: '/models', label: '模型管理', icon: Cpu, permission: 'model:admin' },
|
||||
{ href: '/api-keys', label: 'API 密钥', icon: Key, permission: null },
|
||||
{ href: '/usage', label: '用量统计', icon: BarChart3, permission: null },
|
||||
{ href: '/relay', label: '中转任务', icon: ArrowLeftRight, permission: 'relay:admin' },
|
||||
{ href: '/config', label: '系统配置', icon: Settings, permission: 'admin:full' },
|
||||
{ href: '/logs', label: '操作日志', icon: FileText, permission: 'admin:full' },
|
||||
{ href: '/profile', label: '个人设置', icon: UserCog, permission: null },
|
||||
{ href: '/security', label: '安全设置', icon: ShieldCheck, permission: null },
|
||||
{ href: '/devices', label: '设备管理', icon: Monitor, permission: null },
|
||||
]
|
||||
|
||||
function Sidebar({
|
||||
collapsed,
|
||||
onToggle,
|
||||
mobileOpen,
|
||||
onMobileClose,
|
||||
}: {
|
||||
collapsed: boolean
|
||||
onToggle: () => void
|
||||
mobileOpen: boolean
|
||||
onMobileClose: () => void
|
||||
}) {
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const { account } = useAuth()
|
||||
|
||||
const permissions = account ? getPermissionsForRole(account.role) : []
|
||||
// 路由变化时关闭移动端菜单
|
||||
useEffect(() => {
|
||||
onMobileClose()
|
||||
}, [pathname, onMobileClose])
|
||||
|
||||
function handleLogout() {
|
||||
logout()
|
||||
router.replace('/login')
|
||||
}
|
||||
|
||||
const filteredNavItems = navItems.filter((item) => {
|
||||
if (!item.permission) return true
|
||||
return permissions.includes(item.permission) || permissions.includes('admin:full')
|
||||
})
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed left-0 top-0 z-40 flex h-screen flex-col border-r border-border bg-card transition-all duration-300',
|
||||
collapsed ? 'w-16' : 'w-64',
|
||||
<>
|
||||
{/* 移动端 overlay */}
|
||||
{mobileOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/50 lg:hidden"
|
||||
onClick={onMobileClose}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed left-0 top-0 z-50 flex h-screen flex-col border-r border-border bg-card transition-all duration-300',
|
||||
collapsed ? 'w-16' : 'w-64',
|
||||
'lg:z-40',
|
||||
mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
|
||||
)}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="flex h-14 items-center border-b border-border px-4">
|
||||
<Link href="/" className="flex items-center gap-2 cursor-pointer">
|
||||
@@ -98,7 +100,15 @@ function Sidebar({
|
||||
{/* 导航 */}
|
||||
<nav className="flex-1 overflow-y-auto scrollbar-thin py-2 px-2">
|
||||
<ul className="space-y-1">
|
||||
{filteredNavItems.map((item) => {
|
||||
{navItems
|
||||
.filter((item) => {
|
||||
if (!item.permission) return true
|
||||
if (!account) return false
|
||||
// super_admin 拥有所有权限
|
||||
if (account.role === 'super_admin') return true
|
||||
return account.permissions?.includes(item.permission) ?? false
|
||||
})
|
||||
.map((item) => {
|
||||
const isActive =
|
||||
item.href === '/'
|
||||
? pathname === '/'
|
||||
@@ -142,6 +152,19 @@ function Sidebar({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 折叠时显示退出按钮 */}
|
||||
{collapsed && (
|
||||
<div className="border-t border-border p-2">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center justify-center rounded-md px-3 py-2 text-muted-foreground hover:bg-muted hover:text-destructive transition-colors duration-200 cursor-pointer"
|
||||
title="退出登录"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 用户信息 */}
|
||||
{!collapsed && (
|
||||
<div className="border-t border-border p-3">
|
||||
@@ -168,10 +191,11 @@ function Sidebar({
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Header() {
|
||||
function Header({ children }: { children?: ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
const currentNav = navItems.find(
|
||||
(item) =>
|
||||
@@ -183,7 +207,7 @@ function Header() {
|
||||
return (
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center border-b border-border bg-background/80 backdrop-blur-sm px-6">
|
||||
{/* 移动端菜单按钮 */}
|
||||
<MobileMenuButton />
|
||||
{children}
|
||||
|
||||
{/* 页面标题 */}
|
||||
<h1 className="text-lg font-semibold text-foreground">
|
||||
@@ -203,10 +227,10 @@ function Header() {
|
||||
)
|
||||
}
|
||||
|
||||
function MobileMenuButton() {
|
||||
// Placeholder for mobile menu toggle
|
||||
function MobileMenuButton({ onClick }: { onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="mr-3 rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors duration-200 lg:hidden cursor-pointer"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
@@ -214,28 +238,68 @@ function MobileMenuButton() {
|
||||
)
|
||||
}
|
||||
|
||||
/** 路由级权限守卫：隐藏导航项但用户直接访问 URL 时拦截 */
|
||||
function PageGuard({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const { account } = useAuth()
|
||||
|
||||
const matchedNav = navItems.find((item) =>
|
||||
item.href === '/' ? pathname === '/' : pathname.startsWith(item.href),
|
||||
)
|
||||
|
||||
if (matchedNav?.permission && account) {
|
||||
if (account.role !== 'super_admin' && !(account.permissions?.includes(matchedNav.permission) ?? false)) {
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-lg font-medium text-muted-foreground">权限不足</p>
|
||||
<p className="text-sm text-muted-foreground">您没有访问「{matchedNav.label}」的权限</p>
|
||||
<button
|
||||
onClick={() => router.replace('/')}
|
||||
className="text-sm text-primary hover:underline cursor-pointer"
|
||||
>
|
||||
返回仪表盘
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<AuthGuard>
|
||||
<div className="flex min-h-screen">
|
||||
<PageGuard>
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
mobileOpen={mobileOpen}
|
||||
onMobileClose={() => setMobileOpen(false)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-1 flex-col transition-all duration-300',
|
||||
sidebarCollapsed ? 'ml-16' : 'ml-64',
|
||||
'ml-0 lg:transition-all',
|
||||
sidebarCollapsed ? 'lg:ml-16' : 'lg:ml-64',
|
||||
)}
|
||||
>
|
||||
<Header />
|
||||
<Header>
|
||||
<MobileMenuButton onClick={() => setMobileOpen(true)} />
|
||||
</Header>
|
||||
<main className="flex-1 overflow-auto p-6 scrollbar-thin">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</PageGuard>
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
@@ -38,8 +37,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatNumber } from '@/lib/utils'
|
||||
@@ -74,29 +71,14 @@ const emptyForm: ModelForm = {
|
||||
}
|
||||
|
||||
export default function ModelsPage() {
|
||||
const [models, setModels] = useState<Model[]>([])
|
||||
const [providers, setProviders] = useState<Provider[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [providerFilter, setProviderFilter] = useState<string>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// SWR for models list
|
||||
const { data, isLoading, mutate } = useSWR(
|
||||
['models', page, providerFilter],
|
||||
() => {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (providerFilter !== 'all') params.provider_id = providerFilter
|
||||
return api.models.list(params)
|
||||
}
|
||||
)
|
||||
const models = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
// SWR for providers list (dropdown)
|
||||
const { data: providersData } = useSWR(
|
||||
['providers.all'],
|
||||
() => api.providers.list({ page: 1, page_size: 100 })
|
||||
)
|
||||
const providers = providersData?.items ?? []
|
||||
|
||||
// Dialog
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [editTarget, setEditTarget] = useState<Model | null>(null)
|
||||
@@ -107,6 +89,37 @@ export default function ModelsPage() {
|
||||
const [deleteTarget, setDeleteTarget] = useState<Model | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const fetchModels = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (providerFilter !== 'all') params.provider_id = providerFilter
|
||||
const res = await api.models.list(params)
|
||||
setModels(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, providerFilter])
|
||||
|
||||
const fetchProviders = useCallback(async () => {
|
||||
try {
|
||||
const res = await api.providers.list()
|
||||
setProviders(res)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchModels()
|
||||
fetchProviders()
|
||||
}, [fetchModels, fetchProviders])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
const providerMap = new Map(providers.map((p) => [p.id, p.display_name || p.name]))
|
||||
@@ -156,7 +169,7 @@ export default function ModelsPage() {
|
||||
await api.models.create(payload)
|
||||
}
|
||||
setDialogOpen(false)
|
||||
mutate()
|
||||
fetchModels()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -170,7 +183,7 @@ export default function ModelsPage() {
|
||||
try {
|
||||
await api.models.delete(deleteTarget.id)
|
||||
setDeleteTarget(null)
|
||||
mutate()
|
||||
fetchModels()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -200,12 +213,21 @@ export default function ModelsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={8} cols={9} hasToolbar={false} />
|
||||
) : error ? null : models.length === 0 ? (
|
||||
<EmptyState />
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : models.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Users,
|
||||
Server,
|
||||
ArrowLeftRight,
|
||||
Zap,
|
||||
Loader2,
|
||||
TrendingUp,
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
@@ -19,12 +21,8 @@ import {
|
||||
Bar,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import useSWR from 'swr'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { StatsSkeleton } from '@/components/ui/skeleton'
|
||||
import { ChartSkeleton } from '@/components/ui/skeleton'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -37,7 +35,7 @@ import { api } from '@/lib/api-client'
|
||||
import { formatNumber, formatDate } from '@/lib/utils'
|
||||
import type {
|
||||
DashboardStats,
|
||||
UsageRecord,
|
||||
UsageStats,
|
||||
OperationLog,
|
||||
} from '@/lib/types'
|
||||
|
||||
@@ -88,26 +86,65 @@ function StatusBadge({ status }: { status: string }) {
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: stats, isLoading: statsLoading } = useSWR(
|
||||
['stats.dashboard'],
|
||||
() => api.stats.dashboard(),
|
||||
)
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null)
|
||||
const [usageStats, setUsageStats] = useState<UsageStats | null>(null)
|
||||
const [recentLogs, setRecentLogs] = useState<OperationLog[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const { data: usageData = [], isLoading: usageLoading } = useSWR(
|
||||
['usage.daily.30'],
|
||||
() => api.usage.daily({ days: 30 }),
|
||||
)
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const [statsRes, usageRes, logsRes] = await Promise.allSettled([
|
||||
api.stats.dashboard(),
|
||||
api.usage.get(),
|
||||
api.logs.list({ page: 1, page_size: 5 }),
|
||||
])
|
||||
|
||||
const { data: logsData, isLoading: logsLoading } = useSWR(
|
||||
['logs.recent'],
|
||||
() => api.logs.list({ page: 1, page_size: 5 }),
|
||||
)
|
||||
if (statsRes.status === 'fulfilled') setStats(statsRes.value)
|
||||
if (usageRes.status === 'fulfilled') setUsageStats(usageRes.value)
|
||||
if (logsRes.status === 'fulfilled') setRecentLogs(logsRes.value)
|
||||
|
||||
const recentLogs: OperationLog[] = logsData?.items ?? []
|
||||
if (statsRes.status === 'rejected' && usageRes.status === 'rejected' && logsRes.status === 'rejected') {
|
||||
setError('加载数据失败，请检查后端服务是否启动')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
const chartData = usageData.map((r: UsageRecord) => ({
|
||||
day: r.day.slice(5), // MM-DD
|
||||
请求量: r.count,
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-destructive">{error}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 text-sm text-primary hover:underline cursor-pointer"
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartData = (usageStats?.by_day ?? []).map((r) => ({
|
||||
day: r.date.slice(5), // MM-DD
|
||||
请求量: r.request_count,
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
}))
|
||||
@@ -115,151 +152,139 @@ export default function DashboardPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 统计卡片 */}
|
||||
{statsLoading ? (
|
||||
<StatsSkeleton count={4} />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="总账号数"
|
||||
value={stats?.total_accounts ?? '-'}
|
||||
icon={<Users className="h-5 w-5 text-blue-400" />}
|
||||
color="bg-blue-500/10"
|
||||
subtitle={`活跃 ${stats?.active_accounts ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="活跃服务商"
|
||||
value={stats?.active_providers ?? '-'}
|
||||
icon={<Server className="h-5 w-5 text-green-400" />}
|
||||
color="bg-green-500/10"
|
||||
subtitle={`模型 ${stats?.active_models ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="今日请求"
|
||||
value={stats?.tasks_today ?? '-'}
|
||||
icon={<ArrowLeftRight className="h-5 w-5 text-purple-400" />}
|
||||
color="bg-purple-500/10"
|
||||
subtitle="中转任务"
|
||||
/>
|
||||
<StatCard
|
||||
title="今日 Token"
|
||||
value={formatNumber((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0))}
|
||||
icon={<Zap className="h-5 w-5 text-orange-400" />}
|
||||
color="bg-orange-500/10"
|
||||
subtitle={`In: ${formatNumber(stats?.tokens_today_input ?? 0)} / Out: ${formatNumber(stats?.tokens_today_output ?? 0)}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="总账号数"
|
||||
value={stats?.total_accounts ?? '-'}
|
||||
icon={<Users className="h-5 w-5 text-blue-400" />}
|
||||
color="bg-blue-500/10"
|
||||
subtitle={`活跃 ${stats?.active_accounts ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="活跃服务商"
|
||||
value={stats?.active_providers ?? '-'}
|
||||
icon={<Server className="h-5 w-5 text-green-400" />}
|
||||
color="bg-green-500/10"
|
||||
subtitle={`模型 ${stats?.active_models ?? 0}`}
|
||||
/>
|
||||
<StatCard
|
||||
title="今日请求"
|
||||
value={stats?.tasks_today ?? '-'}
|
||||
icon={<ArrowLeftRight className="h-5 w-5 text-purple-400" />}
|
||||
color="bg-purple-500/10"
|
||||
subtitle="中转任务"
|
||||
/>
|
||||
<StatCard
|
||||
title="今日 Token"
|
||||
value={formatNumber((stats?.tokens_today_input ?? 0) + (stats?.tokens_today_output ?? 0))}
|
||||
icon={<Zap className="h-5 w-5 text-orange-400" />}
|
||||
color="bg-orange-500/10"
|
||||
subtitle={`In: ${formatNumber(stats?.tokens_today_input ?? 0)} / Out: ${formatNumber(stats?.tokens_today_output ?? 0)}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 图表 */}
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
{/* 请求趋势 */}
|
||||
{usageLoading ? (
|
||||
<ChartSkeleton height={280} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<TrendingUp className="h-4 w-4 text-primary" />
|
||||
请求趋势 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
<linearGradient id="colorRequests" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#22C55E" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#22C55E" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="请求量"
|
||||
stroke="#22C55E"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorRequests)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<TrendingUp className="h-4 w-4 text-primary" />
|
||||
请求趋势 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
<linearGradient id="colorRequests" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#22C55E" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#22C55E" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="请求量"
|
||||
stroke="#22C55E"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorRequests)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Token 用量 */}
|
||||
{usageLoading ? (
|
||||
<ChartSkeleton height={280} />
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-orange-400" />
|
||||
Token 用量 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }}
|
||||
/>
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[2, 2, 0, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[2, 2, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-orange-400" />
|
||||
Token 用量 (30 天)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={280}>
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }}
|
||||
/>
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[2, 2, 0, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[2, 2, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex h-[280px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 最近操作日志 */}
|
||||
@@ -268,9 +293,7 @@ export default function DashboardPage() {
|
||||
<CardTitle className="text-base">最近操作</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{logsLoading ? (
|
||||
<TableSkeleton rows={5} cols={5} hasToolbar={false} />
|
||||
) : recentLogs.length > 0 ? (
|
||||
{recentLogs.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
|
||||
154
admin/src/app/(dashboard)/profile/page.tsx
Normal file
154
admin/src/app/(dashboard)/profile/page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Lock, Loader2, Eye, EyeOff, Check } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
|
||||
export default function ProfilePage() {
|
||||
const [oldPassword, setOldPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [showOld, setShowOld] = useState(false)
|
||||
const [showNew, setShowNew] = useState(false)
|
||||
const [showConfirm, setShowConfirm] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setSuccess('')
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
setError('新密码至少 8 个字符')
|
||||
return
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError('两次输入的新密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
await api.auth.changePassword({ old_password: oldPassword, new_password: newPassword })
|
||||
setSuccess('密码修改成功')
|
||||
setOldPassword('')
|
||||
setNewPassword('')
|
||||
setConfirmPassword('')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
setError(err.body.message || '修改失败')
|
||||
} else {
|
||||
setError('网络错误，请稍后重试')
|
||||
}
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-lg">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Lock className="h-5 w-5" />
|
||||
修改密码
|
||||
</CardTitle>
|
||||
<CardDescription>修改您的登录密码。修改后需要重新登录。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="old-password">当前密码</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="old-password"
|
||||
type={showOld ? 'text' : 'password'}
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
placeholder="请输入当前密码"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowOld(!showOld)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
>
|
||||
{showOld ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="new-password">新密码</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="new-password"
|
||||
type={showNew ? 'text' : 'password'}
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="至少 8 个字符"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNew(!showNew)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
>
|
||||
{showNew ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirm-password">确认新密码</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="confirm-password"
|
||||
type={showConfirm ? 'text' : 'password'}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="再次输入新密码"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirm(!showConfirm)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
>
|
||||
{showConfirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="rounded-md bg-emerald-500/10 border border-emerald-500/20 px-4 py-3 text-sm text-emerald-500 flex items-center gap-2">
|
||||
<Check className="h-4 w-4" />
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={saving || !oldPassword || !newPassword || !confirmPassword}>
|
||||
{saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
修改密码
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,341 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { PromptTemplate, PromptVersion } from '@/lib/types'
|
||||
import { EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
|
||||
export default function PromptsPage() {
|
||||
const [page, setPage] = useState(1)
|
||||
const [selectedName, setSelectedName] = useState<string | null>(null)
|
||||
const [versions, setVersions] = useState<PromptVersion[]>([])
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [showNewVersion, setShowNewVersion] = useState(false)
|
||||
const [filter, setFilter] = useState<{ source?: string; status?: string }>({})
|
||||
|
||||
const { data, error, isLoading, mutate } = useSWR(
|
||||
['prompts.list', page, filter.source, filter.status],
|
||||
() => api.prompts.list({ page, page_size: 50, ...filter }),
|
||||
)
|
||||
|
||||
const templates = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
const fetchVersions = async (name: string) => {
|
||||
try {
|
||||
const res = await api.prompts.listVersions(name)
|
||||
setVersions(res)
|
||||
setSelectedName(name)
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch versions:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
const fd = new FormData(e.currentTarget)
|
||||
try {
|
||||
await api.prompts.create({
|
||||
name: fd.get('name') as string,
|
||||
category: fd.get('category') as string,
|
||||
description: (fd.get('description') as string) || undefined,
|
||||
source: 'custom',
|
||||
system_prompt: fd.get('system_prompt') as string,
|
||||
})
|
||||
setShowCreate(false)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
console.error('Failed to create prompt:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNewVersion = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (!selectedName) return
|
||||
const fd = new FormData(e.currentTarget)
|
||||
try {
|
||||
await api.prompts.createVersion(selectedName, {
|
||||
system_prompt: fd.get('system_prompt') as string,
|
||||
changelog: (fd.get('changelog') as string) || undefined,
|
||||
})
|
||||
setShowNewVersion(false)
|
||||
fetchVersions(selectedName)
|
||||
} catch (err) {
|
||||
console.error('Failed to create version:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRollback = async (name: string, version: number) => {
|
||||
if (!confirm(`确认回退到版本 ${version}？`)) return
|
||||
try {
|
||||
await api.prompts.rollback(name, version)
|
||||
fetchVersions(name)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
console.error('Failed to rollback:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async (name: string) => {
|
||||
if (!confirm(`确认归档 ${name}？`)) return
|
||||
try {
|
||||
await api.prompts.archive(name)
|
||||
mutate()
|
||||
} catch (err) {
|
||||
console.error('Failed to archive:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const statusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
active: 'bg-emerald-500/20 text-emerald-400',
|
||||
deprecated: 'bg-amber-500/20 text-amber-400',
|
||||
archived: 'bg-zinc-500/20 text-zinc-400',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${colors[status] || colors.archived}`}>
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const sourceBadge = (source: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
builtin: 'bg-blue-500/20 text-blue-400',
|
||||
custom: 'bg-purple-500/20 text-purple-400',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${colors[source] || ''}`}>
|
||||
{source === 'builtin' ? '内置' : '自定义'}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">提示词管理</h1>
|
||||
<p className="text-sm text-zinc-400 mt-1">管理内置和自定义提示词模板，支持版本控制和 OTA 分发</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
|
||||
>
|
||||
+ 新建模板
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2">
|
||||
{(['all', 'builtin', 'custom'] as const).map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setFilter(s === 'all' ? {} : { source: s })}
|
||||
className={`px-3 py-1 text-sm rounded-lg transition-colors ${
|
||||
(filter.source || 'all') === s
|
||||
? 'bg-zinc-700 text-white'
|
||||
: 'bg-zinc-800 text-zinc-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{s === 'all' ? '全部' : s === 'builtin' ? '内置' : '自定义'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Template List */}
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-800">
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">名称</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">分类</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">来源</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">版本</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">状态</th>
|
||||
<th className="text-left px-4 py-3 text-zinc-400 font-medium">更新时间</th>
|
||||
<th className="text-right px-4 py-3 text-zinc-400 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading ? (
|
||||
<tr>
|
||||
<td colSpan={7}>
|
||||
<TableSkeleton rows={5} cols={7} hasToolbar={false} />
|
||||
</td>
|
||||
</tr>
|
||||
) : error ? (
|
||||
<tr><td colSpan={7} className="px-4 py-8 text-center text-red-400">加载失败</td></tr>
|
||||
) : templates.length === 0 ? (
|
||||
<tr><td colSpan={7}><EmptyState message="暂无提示词模板" /></td></tr>
|
||||
) : (
|
||||
templates.map(t => (
|
||||
<tr key={t.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/30">
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => fetchVersions(t.name)}
|
||||
className="text-blue-400 hover:text-blue-300 font-mono"
|
||||
>
|
||||
{t.name}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-zinc-400">{t.category}</td>
|
||||
<td className="px-4 py-3">{sourceBadge(t.source)}</td>
|
||||
<td className="px-4 py-3 text-zinc-300">v{t.current_version}</td>
|
||||
<td className="px-4 py-3">{statusBadge(t.status)}</td>
|
||||
<td className="px-4 py-3 text-zinc-500 text-xs">
|
||||
{new Date(t.updated_at).toLocaleString('zh-CN')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => fetchVersions(t.name)}
|
||||
className="text-zinc-400 hover:text-white mr-2"
|
||||
>
|
||||
历史
|
||||
</button>
|
||||
{t.source === 'custom' && (
|
||||
<button
|
||||
onClick={() => handleArchive(t.name)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
>
|
||||
归档
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="px-4 py-2 text-xs text-zinc-500 border-t border-zinc-800">
|
||||
共 {total} 个模板
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Version History Panel */}
|
||||
{selectedName && (
|
||||
<div className="bg-zinc-900 rounded-xl border border-zinc-800 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
{selectedName} — 版本历史
|
||||
</h2>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowNewVersion(true)}
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-xs"
|
||||
>
|
||||
发布新版本
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setSelectedName(null); setVersions([]) }}
|
||||
className="px-3 py-1.5 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-xs"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{versions.map(v => (
|
||||
<div key={v.id} className="bg-zinc-800/50 rounded-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-mono text-zinc-300">v{v.version}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-zinc-500">
|
||||
{new Date(v.created_at).toLocaleString('zh-CN')}
|
||||
</span>
|
||||
{v.changelog && (
|
||||
<span className="text-xs text-zinc-400">— {v.changelog}</span>
|
||||
)}
|
||||
{v.min_app_version && (
|
||||
<span className="text-xs text-amber-400">最低版本: {v.min_app_version}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<pre className="text-xs text-zinc-400 bg-zinc-900 rounded p-2 overflow-x-auto max-h-32">
|
||||
{v.system_prompt.substring(0, 300)}{v.system_prompt.length > 300 ? '...' : ''}
|
||||
</pre>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(v.system_prompt)
|
||||
}}
|
||||
className="text-xs text-zinc-500 hover:text-white"
|
||||
>
|
||||
复制
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRollback(selectedName, v.version)}
|
||||
className="text-xs text-amber-500 hover:text-amber-400"
|
||||
>
|
||||
回退到此版本
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{versions.length === 0 && (
|
||||
<EmptyState message="暂无版本历史" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreate && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<form onSubmit={handleCreate} className="bg-zinc-900 rounded-xl border border-zinc-700 p-6 w-full max-w-lg space-y-4">
|
||||
<h2 className="text-lg font-semibold text-white">新建提示词模板</h2>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">名称</label>
|
||||
<input name="name" required className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="my_prompt" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">分类</label>
|
||||
<select name="category" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm">
|
||||
<option value="custom_system">系统提示词</option>
|
||||
<option value="custom_extraction">提取提示词</option>
|
||||
<option value="custom_compaction">压缩提示词</option>
|
||||
<option value="custom_other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">描述</label>
|
||||
<input name="description" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="可选" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">系统提示词</label>
|
||||
<textarea name="system_prompt" required rows={6} className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm font-mono" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => setShowCreate(false)} className="px-4 py-2 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-sm">取消</button>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">创建</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Version Modal */}
|
||||
{showNewVersion && selectedName && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<form onSubmit={handleNewVersion} className="bg-zinc-900 rounded-xl border border-zinc-700 p-6 w-full max-w-lg space-y-4">
|
||||
<h2 className="text-lg font-semibold text-white">发布 {selectedName} 新版本</h2>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">系统提示词</label>
|
||||
<textarea name="system_prompt" required rows={6} className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm font-mono" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-zinc-400 mb-1">变更说明</label>
|
||||
<input name="changelog" className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-sm" placeholder="描述本次变更" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => setShowNewVersion(false)} className="px-4 py-2 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600 text-sm">取消</button>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">发布</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
Plus,
|
||||
Loader2,
|
||||
@@ -9,9 +8,6 @@ import {
|
||||
ChevronRight,
|
||||
Pencil,
|
||||
Trash2,
|
||||
KeyRound,
|
||||
Power,
|
||||
PowerOff,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -41,18 +37,10 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate, maskApiKey } from '@/lib/utils'
|
||||
|
||||
function formatTokens(tokens: number): string {
|
||||
if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
|
||||
if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`
|
||||
return String(tokens)
|
||||
}
|
||||
import type { Provider, ProviderKey } from '@/lib/types'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import type { Provider } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
@@ -61,7 +49,6 @@ interface ProviderForm {
|
||||
display_name: string
|
||||
base_url: string
|
||||
api_protocol: 'openai' | 'anthropic'
|
||||
api_key: string
|
||||
enabled: boolean
|
||||
rate_limit_rpm: string
|
||||
rate_limit_tpm: string
|
||||
@@ -72,24 +59,18 @@ const emptyForm: ProviderForm = {
|
||||
display_name: '',
|
||||
base_url: '',
|
||||
api_protocol: 'openai',
|
||||
api_key: '',
|
||||
enabled: true,
|
||||
rate_limit_rpm: '',
|
||||
rate_limit_tpm: '',
|
||||
}
|
||||
|
||||
export default function ProvidersPage() {
|
||||
const [providers, setProviders] = useState<Provider[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// SWR for providers list
|
||||
const { data, isLoading, mutate } = useSWR(
|
||||
['providers', page],
|
||||
() => api.providers.list({ page, page_size: PAGE_SIZE })
|
||||
)
|
||||
const providers = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
|
||||
// 创建/编辑 Dialog
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [editTarget, setEditTarget] = useState<Provider | null>(null)
|
||||
@@ -100,24 +81,24 @@ export default function ProvidersPage() {
|
||||
const [deleteTarget, setDeleteTarget] = useState<Provider | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
// Key Pool 管理
|
||||
const [keyPoolProvider, setKeyPoolProvider] = useState<Provider | null>(null)
|
||||
const [showAddKey, setShowAddKey] = useState(false)
|
||||
const [addKeyForm, setAddKeyForm] = useState({
|
||||
key_label: '',
|
||||
key_value: '',
|
||||
priority: 0,
|
||||
max_rpm: '',
|
||||
max_tpm: '',
|
||||
quota_reset_interval: '',
|
||||
})
|
||||
const [addingKey, setAddingKey] = useState(false)
|
||||
const fetchProviders = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.providers.list({ page, page_size: PAGE_SIZE })
|
||||
setProviders(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page])
|
||||
|
||||
// SWR for key pool — only fetches when dialog is open
|
||||
const { data: providerKeys = [], isLoading: keysLoading, mutate: mutateKeys } = useSWR(
|
||||
keyPoolProvider ? ['provider.keys', keyPoolProvider.id] : null,
|
||||
() => api.providers.listKeys(keyPoolProvider!.id)
|
||||
)
|
||||
useEffect(() => {
|
||||
fetchProviders()
|
||||
}, [fetchProviders])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
@@ -134,7 +115,6 @@ export default function ProvidersPage() {
|
||||
display_name: provider.display_name,
|
||||
base_url: provider.base_url,
|
||||
api_protocol: provider.api_protocol,
|
||||
api_key: provider.api_key || '',
|
||||
enabled: provider.enabled,
|
||||
rate_limit_rpm: provider.rate_limit_rpm?.toString() || '',
|
||||
rate_limit_tpm: provider.rate_limit_tpm?.toString() || '',
|
||||
@@ -151,7 +131,6 @@ export default function ProvidersPage() {
|
||||
display_name: form.display_name.trim(),
|
||||
base_url: form.base_url.trim(),
|
||||
api_protocol: form.api_protocol,
|
||||
api_key: form.api_key.trim() || undefined,
|
||||
enabled: form.enabled,
|
||||
rate_limit_rpm: form.rate_limit_rpm ? parseInt(form.rate_limit_rpm, 10) : undefined,
|
||||
rate_limit_tpm: form.rate_limit_tpm ? parseInt(form.rate_limit_tpm, 10) : undefined,
|
||||
@@ -162,7 +141,7 @@ export default function ProvidersPage() {
|
||||
await api.providers.create(payload)
|
||||
}
|
||||
setDialogOpen(false)
|
||||
mutate()
|
||||
fetchProviders()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -176,7 +155,7 @@ export default function ProvidersPage() {
|
||||
try {
|
||||
await api.providers.delete(deleteTarget.id)
|
||||
setDeleteTarget(null)
|
||||
mutate()
|
||||
fetchProviders()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
@@ -184,55 +163,6 @@ export default function ProvidersPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Key Pool 管理 ─────────────────────────────────────
|
||||
|
||||
function openKeyPool(provider: Provider) {
|
||||
setKeyPoolProvider(provider)
|
||||
setShowAddKey(false)
|
||||
}
|
||||
|
||||
async function handleAddKey() {
|
||||
if (!keyPoolProvider || !addKeyForm.key_label.trim() || !addKeyForm.key_value.trim()) return
|
||||
setAddingKey(true)
|
||||
try {
|
||||
await api.providers.addKey(keyPoolProvider.id, {
|
||||
key_label: addKeyForm.key_label.trim(),
|
||||
key_value: addKeyForm.key_value.trim(),
|
||||
priority: addKeyForm.priority,
|
||||
max_rpm: addKeyForm.max_rpm ? parseInt(addKeyForm.max_rpm, 10) : undefined,
|
||||
max_tpm: addKeyForm.max_tpm ? parseInt(addKeyForm.max_tpm, 10) : undefined,
|
||||
quota_reset_interval: addKeyForm.quota_reset_interval.trim() || undefined,
|
||||
})
|
||||
setAddKeyForm({ key_label: '', key_value: '', priority: 0, max_rpm: '', max_tpm: '', quota_reset_interval: '' })
|
||||
setShowAddKey(false)
|
||||
mutateKeys()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
} finally {
|
||||
setAddingKey(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleKey(keyId: string, active: boolean) {
|
||||
if (!keyPoolProvider) return
|
||||
try {
|
||||
await api.providers.toggleKey(keyPoolProvider.id, keyId, active)
|
||||
mutateKeys()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteKey(keyId: string) {
|
||||
if (!keyPoolProvider || !confirm('确认删除此 Key？')) return
|
||||
try {
|
||||
await api.providers.deleteKey(keyPoolProvider.id, keyId)
|
||||
mutateKeys()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 工具栏 */}
|
||||
@@ -244,12 +174,21 @@ export default function ProvidersPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={9} hasToolbar={false} />
|
||||
) : error ? null : providers.length === 0 ? (
|
||||
<EmptyState />
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : providers.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
@@ -259,7 +198,6 @@ export default function ProvidersPage() {
|
||||
<TableHead>显示名</TableHead>
|
||||
<TableHead>Base URL</TableHead>
|
||||
<TableHead>协议</TableHead>
|
||||
<TableHead>API Key</TableHead>
|
||||
<TableHead>启用</TableHead>
|
||||
<TableHead>RPM 限制</TableHead>
|
||||
<TableHead>创建时间</TableHead>
|
||||
@@ -279,9 +217,6 @@ export default function ProvidersPage() {
|
||||
{p.api_protocol}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-xs text-muted-foreground">
|
||||
{maskApiKey(p.api_key)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={p.enabled ? 'success' : 'secondary'}>
|
||||
{p.enabled ? '是' : '否'}
|
||||
@@ -295,9 +230,6 @@ export default function ProvidersPage() {
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" onClick={() => openKeyPool(p)} title="Key Pool">
|
||||
<KeyRound className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => openEditDialog(p)} title="编辑">
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -376,15 +308,6 @@ export default function ProvidersPage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>API Key</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={form.api_key}
|
||||
onChange={(e) => setForm({ ...form, api_key: e.target.value })}
|
||||
placeholder={editTarget ? '留空则不修改' : 'sk-...'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
checked={form.enabled}
|
||||
@@ -441,165 +364,6 @@ export default function ProvidersPage() {
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Key Pool 管理 Dialog */}
|
||||
<Dialog open={!!keyPoolProvider} onOpenChange={() => setKeyPoolProvider(null)}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Key Pool 管理 — {keyPoolProvider?.display_name || keyPoolProvider?.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
管理此服务商的多个 API Key，实现智能轮转绕过限额。优先级数字越小越优先。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[50vh] overflow-y-auto scrollbar-thin">
|
||||
{keysLoading ? (
|
||||
<TableSkeleton rows={4} cols={8} hasToolbar={false} />
|
||||
) : providerKeys.length === 0 && !showAddKey ? (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||
<p>尚未配置 Key Pool</p>
|
||||
<p className="mt-1 text-xs">将使用服务商主 API Key 作为回退</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>标签</TableHead>
|
||||
<TableHead>优先级</TableHead>
|
||||
<TableHead>RPM</TableHead>
|
||||
<TableHead>TPM</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead>请求/Token</TableHead>
|
||||
<TableHead>最后 429</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{providerKeys.map((k) => {
|
||||
const isCooling = k.cooldown_until && new Date(k.cooldown_until) > new Date()
|
||||
return (
|
||||
<TableRow key={k.id} className={isCooling ? 'opacity-60' : ''}>
|
||||
<TableCell className="font-medium">{k.key_label}</TableCell>
|
||||
<TableCell>{k.priority}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{k.max_rpm ?? '-'}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{k.max_tpm ?? '-'}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={k.is_active ? 'success' : 'secondary'}>
|
||||
{isCooling ? '冷却中' : k.is_active ? '活跃' : '禁用'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{k.total_requests} / {formatTokens(k.total_tokens)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{k.last_429_at ? formatDate(k.last_429_at) : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleToggleKey(k.id, !k.is_active)}
|
||||
title={k.is_active ? '禁用' : '启用'}
|
||||
>
|
||||
{k.is_active ? <PowerOff className="h-3.5 w-3.5 text-amber-500" /> : <Power className="h-3.5 w-3.5 text-green-500" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteKey(k.id)}
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!showAddKey ? (
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setKeyPoolProvider(null)}>关闭</Button>
|
||||
<Button onClick={() => setShowAddKey(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
添加 Key
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
) : (
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<p className="text-sm font-medium">添加新 Key</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">标签 *</Label>
|
||||
<Input
|
||||
value={addKeyForm.key_label}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, key_label: e.target.value })}
|
||||
placeholder="如 zhipu-coding-1"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">优先级</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={addKeyForm.priority}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, priority: parseInt(e.target.value, 10) || 0 })}
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">API Key *</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={addKeyForm.key_value}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, key_value: e.target.value })}
|
||||
placeholder="输入 API Key"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">RPM 限额</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={addKeyForm.max_rpm}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, max_rpm: e.target.value })}
|
||||
placeholder="不限"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">TPM 限额</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={addKeyForm.max_tpm}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, max_tpm: e.target.value })}
|
||||
placeholder="不限"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">限额重置周期</Label>
|
||||
<Input
|
||||
value={addKeyForm.quota_reset_interval}
|
||||
onChange={(e) => setAddKeyForm({ ...addKeyForm, quota_reset_interval: e.target.value })}
|
||||
placeholder="如 5h, 1d（可选）"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => { setShowAddKey(false); setAddKeyForm({ key_label: '', key_value: '', priority: 0, max_rpm: '', max_tpm: '', quota_reset_interval: '' }) }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddKey} disabled={addingKey || !addKeyForm.key_label.trim() || !addKeyForm.key_value.trim()}>
|
||||
{addingKey && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
添加
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
Search,
|
||||
Loader2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
RotateCcw,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
@@ -29,9 +28,7 @@ import {
|
||||
} from '@/components/ui/table'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatDate, formatNumber, getSwrErrorMessage } from '@/lib/utils'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton } from '@/components/ui/skeleton'
|
||||
import { formatDate, formatNumber } from '@/lib/utils'
|
||||
import type { RelayTask } from '@/lib/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
@@ -51,22 +48,35 @@ const statusLabels: Record<string, string> = {
|
||||
}
|
||||
|
||||
export default function RelayPage() {
|
||||
const [tasks, setTasks] = useState<RelayTask[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
const [retryingId, setRetryingId] = useState<string | null>(null)
|
||||
|
||||
const { data, error: swrError, isLoading } = useSWR(
|
||||
['relay', page, statusFilter],
|
||||
() => {
|
||||
const fetchTasks = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params: Record<string, unknown> = { page, page_size: PAGE_SIZE }
|
||||
if (statusFilter !== 'all') params.status = statusFilter
|
||||
return api.relay.list(params)
|
||||
},
|
||||
)
|
||||
const res = await api.relay.list(params)
|
||||
setTasks(res.items)
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [page, statusFilter])
|
||||
|
||||
const tasks = data?.items ?? []
|
||||
const total = data?.total ?? 0
|
||||
const error = getSwrErrorMessage(swrError)
|
||||
useEffect(() => {
|
||||
fetchTasks()
|
||||
}, [fetchTasks])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
|
||||
|
||||
@@ -74,6 +84,20 @@ export default function RelayPage() {
|
||||
setExpandedId((prev) => (prev === id ? null : id))
|
||||
}
|
||||
|
||||
async function handleRetry(taskId: string, e: React.MouseEvent) {
|
||||
e.stopPropagation()
|
||||
setRetryingId(taskId)
|
||||
try {
|
||||
await api.relay.retry(taskId)
|
||||
fetchTasks()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('重试失败')
|
||||
} finally {
|
||||
setRetryingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 筛选 */}
|
||||
@@ -92,12 +116,21 @@ export default function RelayPage() {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{error && <ErrorBanner message={error} onDismiss={() => {}} />}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<TableSkeleton rows={6} cols={10} />
|
||||
) : error ? null : tasks.length === 0 ? (
|
||||
<EmptyState />
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : tasks.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
@@ -113,6 +146,7 @@ export default function RelayPage() {
|
||||
<TableHead>Output Tokens</TableHead>
|
||||
<TableHead>错误信息</TableHead>
|
||||
<TableHead>创建时间</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
@@ -151,10 +185,27 @@ export default function RelayPage() {
|
||||
<TableCell className="font-mono text-xs text-muted-foreground">
|
||||
{formatDate(task.created_at)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{task.status === 'failed' && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => handleRetry(task.id, e)}
|
||||
disabled={retryingId === task.id}
|
||||
title="重试"
|
||||
>
|
||||
{retryingId === task.id ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{expandedId === task.id && (
|
||||
<TableRow key={`${task.id}-detail`}>
|
||||
<TableCell colSpan={10} className="bg-muted/20 px-8 py-4">
|
||||
<TableCell colSpan={11} className="bg-muted/20 px-8 py-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-muted-foreground">任务 ID</p>
|
||||
|
||||
203
admin/src/app/(dashboard)/security/page.tsx
Normal file
203
admin/src/app/(dashboard)/security/page.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { ShieldCheck, Loader2, Eye, EyeOff, QrCode, Key, AlertTriangle } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { useAuth } from '@/components/auth-guard'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
|
||||
export default function SecurityPage() {
|
||||
const { account } = useAuth()
|
||||
const totpEnabled = account?.totp_enabled ?? false
|
||||
|
||||
// Setup state
|
||||
const [step, setStep] = useState<'idle' | 'verify' | 'done'>('idle')
|
||||
const [otpauthUri, setOtpauthUri] = useState('')
|
||||
const [secret, setSecret] = useState('')
|
||||
const [verifyCode, setVerifyCode] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// Disable state
|
||||
const [disablePassword, setDisablePassword] = useState('')
|
||||
const [showDisablePassword, setShowDisablePassword] = useState(false)
|
||||
const [disabling, setDisabling] = useState(false)
|
||||
|
||||
async function handleSetup() {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await api.auth.totpSetup()
|
||||
setOtpauthUri(res.otpauth_uri)
|
||||
setSecret(res.secret)
|
||||
setStep('verify')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message || '获取密钥失败')
|
||||
else setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVerify() {
|
||||
if (verifyCode.length !== 6) {
|
||||
setError('请输入 6 位验证码')
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
await api.auth.totpVerify({ code: verifyCode })
|
||||
setStep('done')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message || '验证失败')
|
||||
else setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDisable() {
|
||||
if (!disablePassword) {
|
||||
setError('请输入密码以确认禁用')
|
||||
return
|
||||
}
|
||||
setDisabling(true)
|
||||
setError('')
|
||||
try {
|
||||
await api.auth.totpDisable({ password: disablePassword })
|
||||
setDisablePassword('')
|
||||
window.location.reload()
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message || '禁用失败')
|
||||
else setError('网络错误')
|
||||
} finally {
|
||||
setDisabling(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-lg space-y-6">
|
||||
{/* TOTP 状态 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ShieldCheck className="h-5 w-5" />
|
||||
双因素认证 (TOTP)
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
使用 Google Authenticator 等应用生成一次性验证码，增强账号安全。
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="text-sm text-muted-foreground">当前状态:</span>
|
||||
<Badge variant={totpEnabled ? 'success' : 'secondary'}>
|
||||
{totpEnabled ? '已启用' : '未启用'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-4">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-2 underline cursor-pointer">关闭</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 未启用: 设置流程 */}
|
||||
{!totpEnabled && step === 'idle' && (
|
||||
<Button onClick={handleSetup} disabled={loading}>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
<Key className="mr-2 h-4 w-4" />
|
||||
启用双因素认证
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!totpEnabled && step === 'verify' && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border border-border p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<QrCode className="h-4 w-4" />
|
||||
步骤 1: 扫描二维码或手动输入密钥
|
||||
</div>
|
||||
<div className="bg-muted rounded-md p-3 font-mono text-xs break-all">
|
||||
{otpauthUri}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">手动输入密钥:</p>
|
||||
<p className="font-mono text-sm font-medium select-all">{secret}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
步骤 2: 输入 6 位验证码
|
||||
</Label>
|
||||
<Input
|
||||
value={verifyCode}
|
||||
onChange={(e) => setVerifyCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
placeholder="请输入应用中显示的 6 位数字"
|
||||
maxLength={6}
|
||||
className="font-mono tracking-widest text-center"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => { setStep('idle'); setVerifyCode('') }}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleVerify} disabled={loading || verifyCode.length !== 6}>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
验证并启用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!totpEnabled && step === 'done' && (
|
||||
<div className="rounded-md bg-emerald-500/10 border border-emerald-500/20 p-4 text-sm text-emerald-500">
|
||||
双因素认证已成功启用。下次登录时需要输入验证码。
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 已启用: 禁用流程 */}
|
||||
{totpEnabled && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md bg-amber-500/10 border border-amber-500/20 p-3 flex items-start gap-2 text-sm text-amber-600">
|
||||
<AlertTriangle className="h-4 w-4 mt-0.5 shrink-0" />
|
||||
<span>禁用双因素认证会降低账号安全性，建议仅在必要时操作。</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>输入当前密码以确认禁用</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showDisablePassword ? 'text' : 'password'}
|
||||
value={disablePassword}
|
||||
onChange={(e) => setDisablePassword(e.target.value)}
|
||||
placeholder="请输入当前密码"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowDisablePassword(!showDisablePassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground cursor-pointer"
|
||||
>
|
||||
{showDisablePassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="destructive" onClick={handleDisable} disabled={disabling || !disablePassword}>
|
||||
{disabling && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
禁用双因素认证
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { Zap, Monitor, Smartphone } from 'lucide-react'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { Loader2, Zap } from 'lucide-react'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
@@ -16,8 +15,6 @@ import {
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { ErrorBanner, EmptyState } from '@/components/ui/state'
|
||||
import { TableSkeleton, ChartSkeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -25,87 +22,83 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { api } from '@/lib/api-client'
|
||||
import { ApiRequestError } from '@/lib/api-client'
|
||||
import { formatNumber } from '@/lib/utils'
|
||||
import type { UsageRecord, UsageByModel, ModelUsageStat, DailyUsageStat } from '@/lib/types'
|
||||
import type { UsageStats } from '@/lib/types'
|
||||
|
||||
export default function UsagePage() {
|
||||
const [days, setDays] = useState(7)
|
||||
const [activeTab, setActiveTab] = useState('relay')
|
||||
const [usageStats, setUsageStats] = useState<UsageStats | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// 4 parallel SWR calls — each loads independently
|
||||
const { data: dailyData = [], isLoading: dailyLoading } = useSWR(
|
||||
['usage.daily', days],
|
||||
() => api.usage.daily({ days })
|
||||
)
|
||||
const { data: modelData = [], isLoading: modelLoading } = useSWR(
|
||||
['usage.byModel', days],
|
||||
() => api.usage.byModel({ days })
|
||||
)
|
||||
const { data: telemetryModels = [] } = useSWR(
|
||||
['telemetry.modelStats'],
|
||||
() => api.telemetry.modelStats()
|
||||
)
|
||||
const { data: telemetryDaily = [] } = useSWR(
|
||||
['telemetry.dailyStats', days],
|
||||
() => api.telemetry.dailyStats({ days })
|
||||
)
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const from = new Date()
|
||||
from.setDate(from.getDate() - days)
|
||||
const fromStr = from.toISOString().slice(0, 10)
|
||||
const res = await api.usage.get({ from: fromStr })
|
||||
setUsageStats(res)
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) setError(err.body.message)
|
||||
else setError('加载数据失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [days])
|
||||
|
||||
const relayLoading = dailyLoading || modelLoading
|
||||
const telemetryLoading = !telemetryModels.length && !telemetryDaily.length && (dailyLoading || modelLoading)
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [fetchData])
|
||||
|
||||
// === Relay 用量图表数据 ===
|
||||
const byDay = usageStats?.by_day ?? []
|
||||
|
||||
const relayLineData = dailyData.map((r) => ({
|
||||
day: r.day.slice(5),
|
||||
const lineChartData = byDay.map((r) => ({
|
||||
day: r.date.slice(5),
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
}))
|
||||
|
||||
const relayBarData = modelData.map((r) => ({
|
||||
const barChartData = (usageStats?.by_model ?? []).map((r) => ({
|
||||
model: r.model_id,
|
||||
请求量: r.count,
|
||||
请求量: r.request_count,
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
}))
|
||||
|
||||
const relayTotalInput = dailyData.reduce((s, r) => s + r.input_tokens, 0)
|
||||
const relayTotalOutput = dailyData.reduce((s, r) => s + r.output_tokens, 0)
|
||||
const relayTotalRequests = dailyData.reduce((s, r) => s + r.count, 0)
|
||||
const totalInput = byDay.reduce((s, r) => s + r.input_tokens, 0)
|
||||
const totalOutput = byDay.reduce((s, r) => s + r.output_tokens, 0)
|
||||
const totalRequests = byDay.reduce((s, r) => s + r.request_count, 0)
|
||||
|
||||
// === 遥测图表数据 ===
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const telemetryLineData = telemetryDaily.map((r) => ({
|
||||
day: r.day.slice(5),
|
||||
Input: r.input_tokens,
|
||||
Output: r.output_tokens,
|
||||
设备数: r.unique_devices,
|
||||
}))
|
||||
|
||||
const telemetryTotalInput = telemetryDaily.reduce((s, r) => s + r.input_tokens, 0)
|
||||
const telemetryTotalOutput = telemetryDaily.reduce((s, r) => s + r.output_tokens, 0)
|
||||
const telemetryTotalRequests = telemetryDaily.reduce((s, r) => s + r.request_count, 0)
|
||||
|
||||
// === 合计 ===
|
||||
|
||||
const totalInput = relayTotalInput + telemetryTotalInput
|
||||
const totalOutput = relayTotalOutput + telemetryTotalOutput
|
||||
const totalRequests = relayTotalRequests + telemetryTotalRequests
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-destructive">{error}</p>
|
||||
<button onClick={() => fetchData()} className="mt-4 text-sm text-primary hover:underline cursor-pointer">
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{error && <ErrorBanner message={error} onDismiss={() => setError('')} />}
|
||||
{/* 时间范围 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">时间范围:</span>
|
||||
@@ -121,8 +114,8 @@ export default function UsagePage() {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 汇总统计 — render immediately, use 0 while loading */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
{/* 汇总统计 */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">总请求数</p>
|
||||
@@ -133,7 +126,7 @@ export default function UsagePage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">总 Input Tokens</p>
|
||||
<p className="text-sm text-muted-foreground">Input Tokens</p>
|
||||
<p className="mt-1 text-2xl font-bold text-blue-400">
|
||||
{formatNumber(totalInput)}
|
||||
</p>
|
||||
@@ -141,190 +134,101 @@ export default function UsagePage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">总 Output Tokens</p>
|
||||
<p className="text-sm text-muted-foreground">Output Tokens</p>
|
||||
<p className="mt-1 text-2xl font-bold text-orange-400">
|
||||
{formatNumber(totalOutput)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Monitor className="h-4 w-4 text-green-400" />
|
||||
<p className="text-sm text-muted-foreground">中转请求</p>
|
||||
</div>
|
||||
<p className="mt-1 text-2xl font-bold text-green-400">
|
||||
{formatNumber(relayTotalRequests)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Smartphone className="h-4 w-4 text-purple-400" />
|
||||
<p className="text-sm text-muted-foreground">桌面端调用</p>
|
||||
</div>
|
||||
<p className="mt-1 text-2xl font-bold text-purple-400">
|
||||
{formatNumber(telemetryTotalRequests)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tab 切换 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="relay">
|
||||
<Monitor className="h-4 w-4 mr-1" />
|
||||
中转用量
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="telemetry">
|
||||
<Smartphone className="h-4 w-4 mr-1" />
|
||||
桌面端遥测
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Relay 用量 Tab */}
|
||||
<TabsContent value="relay" className="space-y-6">
|
||||
{relayLoading ? (
|
||||
<>
|
||||
<ChartSkeleton height={320} />
|
||||
<ChartSkeleton height={280} />
|
||||
</>
|
||||
{/* Token 用量趋势 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-primary" />
|
||||
Token 用量趋势
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{lineChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={lineChartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
||||
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Zap className="h-4 w-4 text-primary" />
|
||||
中转 Token 用量趋势
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{relayLineData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={relayLineData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis dataKey="day" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<YAxis tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
||||
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<EmptyState message="暂无中转数据" />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">中转按模型分布</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{relayBarData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={Math.max(200, relayBarData.length * 40)}>
|
||||
<BarChart data={relayBarData} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis type="number" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<YAxis type="category" dataKey="model" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} width={120} />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[0, 2, 2, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[0, 2, 2, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
<div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 遥测 Tab */}
|
||||
<TabsContent value="telemetry" className="space-y-6">
|
||||
{telemetryLoading ? (
|
||||
<>
|
||||
<ChartSkeleton height={320} />
|
||||
<TableSkeleton rows={5} cols={6} hasToolbar={false} />
|
||||
</>
|
||||
{/* 按模型分布 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">按模型分布</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{barChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<BarChart data={barChartData} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis
|
||||
type="number"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="model"
|
||||
tick={{ fontSize: 12, fill: '#94A3B8' }}
|
||||
axisLine={{ stroke: '#1E293B' }}
|
||||
width={120}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0F172A',
|
||||
border: '1px solid #1E293B',
|
||||
borderRadius: '8px',
|
||||
color: '#F8FAFC',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Bar dataKey="Input" fill="#3B82F6" radius={[0, 2, 2, 0]} />
|
||||
<Bar dataKey="Output" fill="#F97316" radius={[0, 2, 2, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Smartphone className="h-4 w-4 text-purple-400" />
|
||||
桌面端 Token 用量趋势
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{telemetryLineData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<LineChart data={telemetryLineData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1E293B" />
|
||||
<XAxis dataKey="day" tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<YAxis tick={{ fontSize: 12, fill: '#94A3B8' }} axisLine={{ stroke: '#1E293B' }} />
|
||||
<Tooltip contentStyle={{ backgroundColor: '#0F172A', border: '1px solid #1E293B', borderRadius: '8px', color: '#F8FAFC', fontSize: '12px' }} />
|
||||
<Legend wrapperStyle={{ fontSize: '12px', color: '#94A3B8' }} />
|
||||
<Line type="monotone" dataKey="Input" stroke="#3B82F6" strokeWidth={2} dot={false} />
|
||||
<Line type="monotone" dataKey="Output" stroke="#F97316" strokeWidth={2} dot={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<EmptyState message="暂无桌面端遥测数据（需要桌面端上报）" />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">桌面端按模型统计</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{telemetryModels.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>模型</TableHead>
|
||||
<TableHead className="text-right">请求数</TableHead>
|
||||
<TableHead className="text-right">Input Tokens</TableHead>
|
||||
<TableHead className="text-right">Output Tokens</TableHead>
|
||||
<TableHead className="text-right">平均延迟</TableHead>
|
||||
<TableHead className="text-right">成功率</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{telemetryModels.map((stat) => (
|
||||
<TableRow key={stat.model_id}>
|
||||
<TableCell className="font-mono text-sm">{stat.model_id}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(stat.request_count)}</TableCell>
|
||||
<TableCell className="text-right text-blue-400">{formatNumber(stat.input_tokens)}</TableCell>
|
||||
<TableCell className="text-right text-orange-400">{formatNumber(stat.output_tokens)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{stat.avg_latency_ms !== null ? `${Math.round(stat.avg_latency_ms)}ms` : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Badge variant={stat.success_rate >= 0.95 ? 'default' : 'destructive'}>
|
||||
{(stat.success_rate * 100).toFixed(1)}%
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
<div className="flex h-[320px] items-center justify-center text-muted-foreground text-sm">
|
||||
暂无数据
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="6" fill="#0f172a"/>
|
||||
<text x="16" y="22" font-family="system-ui, sans-serif" font-size="16" font-weight="700" fill="#60a5fa" text-anchor="middle">Z</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 282 B |
@@ -1,5 +1,5 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { SWRProvider } from '@/lib/swr-provider'
|
||||
import { Toaster } from 'sonner'
|
||||
import './globals.css'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -21,9 +21,8 @@ export default function RootLayout({
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-screen bg-background font-sans antialiased">
|
||||
<SWRProvider>
|
||||
{children}
|
||||
</SWRProvider>
|
||||
{children}
|
||||
<Toaster richColors position="top-right" />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@@ -11,10 +11,9 @@ export default function LoginPage() {
|
||||
const router = useRouter()
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [totpCode, setTotpCode] = useState('')
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [needTotp, setNeedTotp] = useState(false)
|
||||
const [remember, setRemember] = useState(false)
|
||||
const [totpCode, setTotpCode] = useState('')
|
||||
const [showTotp, setShowTotp] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
@@ -36,21 +35,18 @@ export default function LoginPage() {
|
||||
const res = await api.auth.login({
|
||||
username: username.trim(),
|
||||
password,
|
||||
totp_code: totpCode.trim() || undefined,
|
||||
totp_code: showTotp ? totpCode.trim() || undefined : undefined,
|
||||
})
|
||||
login(res.token, res.account)
|
||||
// 用 window.location.href 替代 router.replace 避免 Next.js RSC flight
|
||||
// 导致 client component 树重建和 SWR abort 循环
|
||||
window.location.href = '/'
|
||||
router.replace('/')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiRequestError) {
|
||||
const msg = err.body.message || ''
|
||||
// 后端返回 "需要 TOTP" 时显示 TOTP 输入框
|
||||
if (msg.includes('TOTP') || msg.includes('totp') || msg.includes('2FA') || msg.includes('验证码') || err.status === 403) {
|
||||
setNeedTotp(true)
|
||||
setError(msg || '请输入两步验证码')
|
||||
// 检测 TOTP 错误码，自动显示验证码输入框
|
||||
if (err.body.error === 'totp_required' || err.body.message?.includes('双因素认证') || err.body.message?.includes('TOTP')) {
|
||||
setShowTotp(true)
|
||||
setError(err.body.message || '此账号已启用双因素认证，请输入验证码')
|
||||
} else {
|
||||
setError(msg || '登录失败，请检查用户名和密码')
|
||||
setError(err.body.message || '登录失败，请检查用户名和密码')
|
||||
}
|
||||
} else {
|
||||
setError('网络错误，请稍后重试')
|
||||
@@ -167,52 +163,31 @@ export default function LoginPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TOTP 验证码 */}
|
||||
{needTotp && (
|
||||
{/* TOTP 验证码 (仅账号启用 2FA 时显示) */}
|
||||
{showTotp && (
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="totp"
|
||||
htmlFor="totp_code"
|
||||
className="text-sm font-medium text-foreground"
|
||||
>
|
||||
两步验证码
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<ShieldCheck className="h-3.5 w-3.5" />
|
||||
双因素验证码
|
||||
</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
id="totp"
|
||||
type="text"
|
||||
placeholder="请输入 6 位验证码"
|
||||
value={totpCode}
|
||||
onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
maxLength={6}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-transparent pl-10 pr-3 py-2 text-sm shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring tracking-widest"
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
请使用身份验证器 App（如 Google Authenticator）扫描二维码后生成的验证码
|
||||
</p>
|
||||
<input
|
||||
id="totp_code"
|
||||
type="text"
|
||||
placeholder="请输入 6 位验证码"
|
||||
value={totpCode}
|
||||
onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm tracking-widest text-center font-mono shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
maxLength={6}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 记住我 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id="remember"
|
||||
type="checkbox"
|
||||
checked={remember}
|
||||
onChange={(e) => setRemember(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-input bg-transparent accent-primary cursor-pointer"
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember"
|
||||
className="text-sm text-muted-foreground cursor-pointer select-none"
|
||||
>
|
||||
记住我
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 错误信息 */}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
|
||||
|
||||
@@ -1,44 +1,85 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, type ReactNode } from 'react'
|
||||
import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { isAuthenticated, clearAuth } from '@/lib/auth'
|
||||
import { api, ApiRequestError } from '@/lib/api-client'
|
||||
import { isAuthenticated, getAccount, logout as clearCredentials, scheduleTokenRefresh, cancelTokenRefresh, setOnSessionExpired } from '@/lib/auth'
|
||||
import { api } from '@/lib/api-client'
|
||||
import type { AccountPublic } from '@/lib/types'
|
||||
|
||||
interface AuthContextValue {
|
||||
account: AccountPublic | null
|
||||
loading: boolean
|
||||
refresh: () => Promise<void>
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue>({
|
||||
account: null,
|
||||
loading: true,
|
||||
refresh: async () => {},
|
||||
})
|
||||
|
||||
export function useAuth() {
|
||||
return useContext(AuthContext)
|
||||
}
|
||||
|
||||
interface AuthGuardProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* AuthGuard — 纯 useEffect redirect，始终渲染 children
|
||||
*
|
||||
* 不做任何 loading/authorized 状态切换，避免组件卸载。
|
||||
* useEffect 在客户端 hydration 后执行，检查认证状态。
|
||||
*/
|
||||
export function AuthGuard({ children }: AuthGuardProps) {
|
||||
const router = useRouter()
|
||||
const [account, setAccount] = useState<AccountPublic | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const me = await api.auth.me()
|
||||
setAccount(me)
|
||||
} catch {
|
||||
clearCredentials()
|
||||
router.replace('/login')
|
||||
}
|
||||
}, [router])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated()) {
|
||||
router.replace('/login')
|
||||
return
|
||||
}
|
||||
// 后台验证 token
|
||||
api.auth.me().catch((err) => {
|
||||
if (err instanceof ApiRequestError && (err.status === 401 || err.status === 403)) {
|
||||
clearAuth()
|
||||
router.replace('/login')
|
||||
}
|
||||
})
|
||||
// 验证 token 有效性并获取最新账号信息
|
||||
refresh().finally(() => setLoading(false))
|
||||
}, [router, refresh])
|
||||
|
||||
// Set up proactive token refresh with session-expired handler
|
||||
useEffect(() => {
|
||||
const handleSessionExpired = () => {
|
||||
clearCredentials()
|
||||
router.replace('/login')
|
||||
}
|
||||
setOnSessionExpired(handleSessionExpired)
|
||||
scheduleTokenRefresh()
|
||||
|
||||
return () => {
|
||||
cancelTokenRefresh()
|
||||
setOnSessionExpired(null)
|
||||
}
|
||||
}, [router])
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-screen w-screen items-center justify-center bg-background">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
// 简化版 — 直接读 localStorage
|
||||
const account = typeof window !== 'undefined'
|
||||
? JSON.parse(localStorage.getItem('zclaw_admin_account') || 'null')
|
||||
: null
|
||||
return { account, loading: false, isAuthenticated: !!localStorage.getItem('zclaw_admin_token') }
|
||||
if (!account) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ account, loading, refresh }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
// ============================================================
|
||||
// Skeleton 组件 — 替代全屏 spinner 的骨架屏
|
||||
// ============================================================
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function SkeletonBase({ className }: { className?: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'animate-pulse rounded-md bg-muted',
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
/** 表格骨架屏 */
|
||||
export function TableSkeleton({
|
||||
rows = 5,
|
||||
cols = 5,
|
||||
hasToolbar = true,
|
||||
}: {
|
||||
rows?: number
|
||||
cols?: number
|
||||
hasToolbar?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{hasToolbar && (
|
||||
<div className="flex items-center justify-between">
|
||||
<SkeletonBase className="h-9 w-[200px]" />
|
||||
<SkeletonBase className="h-9 w-[120px]" />
|
||||
</div>
|
||||
)}
|
||||
<div className="rounded-md border border-border overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="border-b border-border bg-muted/30 px-4 py-3">
|
||||
<div className="flex gap-4">
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<SkeletonBase
|
||||
key={i}
|
||||
className={cn(
|
||||
'h-4',
|
||||
i === 0 ? 'w-[120px]' : i === cols - 1 ? 'w-[80px]' : 'w-[100px]',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{Array.from({ length: rows }).map((_, rowIdx) => (
|
||||
<div
|
||||
key={rowIdx}
|
||||
className={cn(
|
||||
'px-4 py-3',
|
||||
rowIdx < rows - 1 && 'border-b border-border',
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
{Array.from({ length: cols }).map((_, colIdx) => (
|
||||
<SkeletonBase
|
||||
key={colIdx}
|
||||
className={cn(
|
||||
'h-4',
|
||||
colIdx === 0 ? 'w-[120px]' : colIdx === cols - 1 ? 'w-[80px]' : 'w-[100px]',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between">
|
||||
<SkeletonBase className="h-4 w-[140px]" />
|
||||
<div className="flex gap-2">
|
||||
<SkeletonBase className="h-8 w-[80px]" />
|
||||
<SkeletonBase className="h-8 w-[80px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 统计卡片骨架屏 */
|
||||
export function StatsSkeleton({ count = 4 }: { count?: number }) {
|
||||
return (
|
||||
<div className={`grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-${count}`}>
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<div key={i} className="rounded-lg border border-border p-6">
|
||||
<SkeletonBase className="h-4 w-[80px]" />
|
||||
<SkeletonBase className="mt-2 h-8 w-[100px]" />
|
||||
<SkeletonBase className="mt-1 h-3 w-[120px]" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 图表骨架屏 */
|
||||
export function ChartSkeleton({ height }: { height?: number }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border">
|
||||
<div className="border-b border-border px-6 py-4">
|
||||
<SkeletonBase className="h-5 w-[140px]" />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<SkeletonBase className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { SkeletonBase as Skeleton }
|
||||
@@ -1,63 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { AlertCircle, Inbox } from 'lucide-react'
|
||||
|
||||
/** 统一的错误提示横幅 */
|
||||
export function ErrorBanner({
|
||||
message,
|
||||
onDismiss,
|
||||
}: {
|
||||
message: string
|
||||
onDismiss?: () => void
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
<span className="flex-1">{message}</span>
|
||||
{onDismiss && (
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="underline cursor-pointer shrink-0"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 统一的空状态占位 */
|
||||
export function EmptyState({
|
||||
message = '暂无数据',
|
||||
}: {
|
||||
message?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-64 flex-col items-center justify-center gap-2 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8" />
|
||||
<span className="text-sm">{message}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 统一的加载失败提示 + 重试 */
|
||||
export function ErrorRetry({
|
||||
message = '请求失败，请重试',
|
||||
onRetry,
|
||||
}: {
|
||||
message?: string
|
||||
onRetry: () => void
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-64 flex-col items-center justify-center gap-3 text-muted-foreground">
|
||||
<AlertCircle className="h-8 w-8 text-destructive" />
|
||||
<span className="text-sm">{message}</span>
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90 transition-colors cursor-pointer"
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
// ============================================================
|
||||
// useDebounce — 防抖 hook
|
||||
// ============================================================
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
export function useDebounce<T>(value: T, delay = 300): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => setDebouncedValue(value), delay)
|
||||
return () => clearTimeout(handler)
|
||||
}, [value, delay])
|
||||
|
||||
return debouncedValue
|
||||
}
|
||||
@@ -2,29 +2,25 @@
|
||||
// ZCLAW SaaS Admin — 类型化 HTTP 客户端
|
||||
// ============================================================
|
||||
|
||||
import { getToken, login as saveToken, logout, getAccount } from './auth'
|
||||
import { getToken, logout, refreshToken } from './auth'
|
||||
import { toast } from 'sonner'
|
||||
import type {
|
||||
AccountPublic,
|
||||
AgentTemplate,
|
||||
ApiError,
|
||||
ConfigItem,
|
||||
CreateTokenRequest,
|
||||
DashboardStats,
|
||||
DailyUsageStat,
|
||||
DeviceInfo,
|
||||
LoginRequest,
|
||||
LoginResponse,
|
||||
Model,
|
||||
ModelUsageStat,
|
||||
OperationLog,
|
||||
PaginatedResponse,
|
||||
PromptTemplate,
|
||||
PromptVersion,
|
||||
Provider,
|
||||
ProviderKey,
|
||||
RelayTask,
|
||||
TokenInfo,
|
||||
UsageByModel,
|
||||
UsageRecord,
|
||||
UsageStats,
|
||||
} from './types'
|
||||
|
||||
// ── 错误类 ────────────────────────────────────────────────
|
||||
@@ -41,132 +37,76 @@ export class ApiRequestError extends Error {
|
||||
|
||||
// ── 基础请求 ──────────────────────────────────────────────
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SAAS_API_URL || '/api/v1'
|
||||
|
||||
const DEFAULT_TIMEOUT_MS = 10_000
|
||||
const MAX_RETRIES = 2
|
||||
|
||||
function sleep(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
/** 判断是否为可重试的网络错误（不含 AbortError） */
|
||||
function isRetryableNetworkError(err: unknown): boolean {
|
||||
// AbortError 不重试：可能是组件卸载或路由切换导致的外部取消
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return false
|
||||
if (err instanceof TypeError) {
|
||||
const msg = (err as TypeError).message
|
||||
return msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('ECONNREFUSED')
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/** 尝试刷新 Token，成功返回新 token，失败返回 null */
|
||||
async function tryRefreshToken(): Promise<string | null> {
|
||||
try {
|
||||
const token = getToken()
|
||||
if (!token) return null
|
||||
|
||||
const res = await fetch(`${BASE_URL}/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
|
||||
if (!res.ok) return null
|
||||
|
||||
const data = await res.json()
|
||||
const newToken = data.token as string
|
||||
const account = getAccount()
|
||||
if (account && newToken) {
|
||||
saveToken(newToken, account)
|
||||
}
|
||||
return newToken
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SAAS_API_URL || 'http://localhost:8080'
|
||||
const API_PREFIX = '/api/v1'
|
||||
|
||||
async function request<T>(
|
||||
method: string,
|
||||
path: string,
|
||||
body?: unknown,
|
||||
_isRetry = false,
|
||||
externalSignal?: AbortSignal,
|
||||
): Promise<T> {
|
||||
let lastError: unknown
|
||||
const token = getToken()
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
|
||||
// Merge external signal (e.g. from SWR) with a timeout signal
|
||||
const signals: AbortSignal[] = [AbortSignal.timeout(DEFAULT_TIMEOUT_MS)]
|
||||
if (externalSignal) signals.push(externalSignal)
|
||||
const signal = signals.length === 1 ? signals[0] : AbortSignal.any(signals)
|
||||
const res = await fetch(`${BASE_URL}${API_PREFIX}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
})
|
||||
|
||||
if (res.status === 401) {
|
||||
// 尝试刷新 token 后重试
|
||||
try {
|
||||
const token = getToken()
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
const res = await fetch(`${BASE_URL}${path}`, {
|
||||
const newToken = await refreshToken()
|
||||
headers['Authorization'] = `Bearer ${newToken}`
|
||||
const retryRes = await fetch(`${BASE_URL}${API_PREFIX}${path}`, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
signal,
|
||||
})
|
||||
|
||||
// 401: 尝试刷新 Token 后重试
|
||||
if (res.status === 401 && !_isRetry) {
|
||||
const newToken = await tryRefreshToken()
|
||||
if (newToken) {
|
||||
return request<T>(method, path, body, true)
|
||||
}
|
||||
logout()
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
throw new ApiRequestError(401, { error: 'unauthorized', message: '登录已过期，请重新登录' })
|
||||
if (retryRes.ok || retryRes.status === 204) {
|
||||
return retryRes.status === 204 ? (undefined as T) : retryRes.json()
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
// 刷新成功但重试仍失败，走正常错误处理
|
||||
if (!retryRes.ok) {
|
||||
let errorBody: ApiError
|
||||
try {
|
||||
errorBody = await res.json()
|
||||
} catch {
|
||||
errorBody = { error: 'unknown', message: `请求失败 (${res.status})` }
|
||||
}
|
||||
throw new ApiRequestError(res.status, errorBody)
|
||||
try { errorBody = await retryRes.json() } catch { errorBody = { error: 'unknown', message: `请求失败 (${retryRes.status})` } }
|
||||
throw new ApiRequestError(retryRes.status, errorBody)
|
||||
}
|
||||
|
||||
// 204 No Content
|
||||
if (res.status === 204) {
|
||||
return undefined as T
|
||||
}
|
||||
|
||||
return res.json() as Promise<T>
|
||||
} catch (err) {
|
||||
// API 错误和外部取消的 AbortError 直接抛出，不重试
|
||||
if (err instanceof ApiRequestError) throw err
|
||||
if (err instanceof DOMException && err.name === 'AbortError') throw err
|
||||
|
||||
lastError = err
|
||||
|
||||
// 仅对可重试的网络错误重试
|
||||
if (attempt < MAX_RETRIES && isRetryableNetworkError(err)) {
|
||||
await sleep(1000 * Math.pow(2, attempt))
|
||||
continue
|
||||
}
|
||||
|
||||
throw err
|
||||
} catch {
|
||||
// 刷新失败，执行登出
|
||||
}
|
||||
logout()
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
throw new ApiRequestError(401, { error: 'unauthorized', message: '登录已过期，请重新登录' })
|
||||
}
|
||||
|
||||
throw lastError
|
||||
if (!res.ok) {
|
||||
let errorBody: ApiError
|
||||
try {
|
||||
errorBody = await res.json()
|
||||
} catch {
|
||||
errorBody = { error: 'unknown', message: `请求失败 (${res.status})` }
|
||||
}
|
||||
if (typeof window !== 'undefined') {
|
||||
toast.error(errorBody.message || `请求失败 (${res.status})`)
|
||||
}
|
||||
throw new ApiRequestError(res.status, errorBody)
|
||||
}
|
||||
|
||||
// 204 No Content
|
||||
if (res.status === 204) {
|
||||
return undefined as T
|
||||
}
|
||||
|
||||
return res.json() as Promise<T>
|
||||
}
|
||||
|
||||
// ── API 客户端 ────────────────────────────────────────────
|
||||
@@ -190,6 +130,22 @@ export const api = {
|
||||
async me(): Promise<AccountPublic> {
|
||||
return request<AccountPublic>('GET', '/auth/me')
|
||||
},
|
||||
|
||||
async changePassword(data: { old_password: string; new_password: string }): Promise<void> {
|
||||
return request<void>('PUT', '/auth/password', data)
|
||||
},
|
||||
|
||||
async totpSetup(): Promise<{ otpauth_uri: string; secret: string; issuer: string }> {
|
||||
return request<{ otpauth_uri: string; secret: string; issuer: string }>('POST', '/auth/totp/setup')
|
||||
},
|
||||
|
||||
async totpVerify(data: { code: string }): Promise<void> {
|
||||
return request<void>('POST', '/auth/totp/verify', data)
|
||||
},
|
||||
|
||||
async totpDisable(data: { password: string }): Promise<void> {
|
||||
return request<void>('POST', '/auth/totp/disable', data)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 账号管理 ──────────────────────────────────────────
|
||||
@@ -213,7 +169,7 @@ export const api = {
|
||||
id: string,
|
||||
data: Partial<Pick<AccountPublic, 'display_name' | 'email' | 'role'>>,
|
||||
): Promise<AccountPublic> {
|
||||
return request<AccountPublic>('PATCH', `/accounts/${id}`, data)
|
||||
return request<AccountPublic>('PUT', `/accounts/${id}`, data)
|
||||
},
|
||||
|
||||
async updateStatus(
|
||||
@@ -234,6 +190,10 @@ export const api = {
|
||||
return request<PaginatedResponse<Provider>>('GET', `/providers${qs}`)
|
||||
},
|
||||
|
||||
async get(id: string): Promise<Provider> {
|
||||
return request<Provider>('GET', `/providers/${id}`)
|
||||
},
|
||||
|
||||
async create(data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>): Promise<Provider> {
|
||||
return request<Provider>('POST', '/providers', data)
|
||||
},
|
||||
@@ -242,36 +202,12 @@ export const api = {
|
||||
id: string,
|
||||
data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>,
|
||||
): Promise<Provider> {
|
||||
return request<Provider>('PATCH', `/providers/${id}`, data)
|
||||
return request<Provider>('PUT', `/providers/${id}`, data)
|
||||
},
|
||||
|
||||
async delete(id: string): Promise<void> {
|
||||
return request<void>('DELETE', `/providers/${id}`)
|
||||
},
|
||||
|
||||
// Key Pool 管理
|
||||
async listKeys(providerId: string): Promise<ProviderKey[]> {
|
||||
return request<ProviderKey[]>('GET', `/providers/${providerId}/keys`)
|
||||
},
|
||||
|
||||
async addKey(providerId: string, data: {
|
||||
key_label: string
|
||||
key_value: string
|
||||
priority?: number
|
||||
max_rpm?: number
|
||||
max_tpm?: number
|
||||
quota_reset_interval?: string
|
||||
}): Promise<{ ok: boolean; key_id: string }> {
|
||||
return request<{ ok: boolean; key_id: string }>('POST', `/providers/${providerId}/keys`, data)
|
||||
},
|
||||
|
||||
async toggleKey(providerId: string, keyId: string, active: boolean): Promise<{ ok: boolean }> {
|
||||
return request<{ ok: boolean }>('PUT', `/providers/${providerId}/keys/${keyId}/toggle`, { active })
|
||||
},
|
||||
|
||||
async deleteKey(providerId: string, keyId: string): Promise<{ ok: boolean }> {
|
||||
return request<{ ok: boolean }>('DELETE', `/providers/${providerId}/keys/${keyId}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 模型管理 ──────────────────────────────────────────
|
||||
@@ -285,12 +221,16 @@ export const api = {
|
||||
return request<PaginatedResponse<Model>>('GET', `/models${qs}`)
|
||||
},
|
||||
|
||||
async get(id: string): Promise<Model> {
|
||||
return request<Model>('GET', `/models/${id}`)
|
||||
},
|
||||
|
||||
async create(data: Partial<Omit<Model, 'id'>>): Promise<Model> {
|
||||
return request<Model>('POST', '/models', data)
|
||||
},
|
||||
|
||||
async update(id: string, data: Partial<Omit<Model, 'id'>>): Promise<Model> {
|
||||
return request<Model>('PATCH', `/models/${id}`, data)
|
||||
return request<Model>('PUT', `/models/${id}`, data)
|
||||
},
|
||||
|
||||
async delete(id: string): Promise<void> {
|
||||
@@ -305,30 +245,23 @@ export const api = {
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<TokenInfo>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<TokenInfo>>('GET', `/keys${qs}`)
|
||||
return request<PaginatedResponse<TokenInfo>>('GET', `/tokens${qs}`)
|
||||
},
|
||||
|
||||
async create(data: CreateTokenRequest): Promise<TokenInfo> {
|
||||
return request<TokenInfo>('POST', '/keys', data)
|
||||
return request<TokenInfo>('POST', '/tokens', data)
|
||||
},
|
||||
|
||||
async revoke(id: string): Promise<void> {
|
||||
return request<void>('DELETE', `/keys/${id}`)
|
||||
return request<void>('DELETE', `/tokens/${id}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 用量统计 ──────────────────────────────────────────
|
||||
usage: {
|
||||
async daily(params?: { days?: number }): Promise<UsageRecord[]> {
|
||||
const qs = buildQueryString({ ...params, group_by: 'day' })
|
||||
const result = await request<{ by_day: UsageRecord[] }>('GET', `/usage${qs}`)
|
||||
return result.by_day || []
|
||||
},
|
||||
|
||||
async byModel(params?: { days?: number }): Promise<UsageByModel[]> {
|
||||
const qs = buildQueryString({ ...params, group_by: 'model' })
|
||||
const result = await request<{ by_model: UsageByModel[] }>('GET', `/usage${qs}`)
|
||||
return result.by_model || []
|
||||
async get(params?: { from?: string; to?: string; provider_id?: string; model_id?: string }): Promise<UsageStats> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<UsageStats>('GET', `/usage${qs}`)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -346,22 +279,23 @@ export const api = {
|
||||
async get(id: string): Promise<RelayTask> {
|
||||
return request<RelayTask>('GET', `/relay/tasks/${id}`)
|
||||
},
|
||||
|
||||
async retry(id: string): Promise<void> {
|
||||
return request<void>('POST', `/relay/tasks/${id}/retry`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 系统配置 ──────────────────────────────────────────
|
||||
config: {
|
||||
async list(params?: {
|
||||
category?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}): Promise<ConfigItem[]> {
|
||||
const qs = buildQueryString(params)
|
||||
const result = await request<PaginatedResponse<ConfigItem>>('GET', `/config/items${qs}`)
|
||||
return result.items
|
||||
return request<ConfigItem[]>('GET', `/config/items${qs}`)
|
||||
},
|
||||
|
||||
async update(id: string, data: { value: string | number | boolean }): Promise<ConfigItem> {
|
||||
return request<ConfigItem>('PATCH', `/config/items/${id}`, data)
|
||||
async update(id: string, data: { current_value: string | number | boolean }): Promise<ConfigItem> {
|
||||
return request<ConfigItem>('PUT', `/config/items/${id}`, data)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -371,9 +305,9 @@ export const api = {
|
||||
page?: number
|
||||
page_size?: number
|
||||
action?: string
|
||||
}): Promise<PaginatedResponse<OperationLog>> {
|
||||
}): Promise<OperationLog[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<OperationLog>>('GET', `/logs/operations${qs}`)
|
||||
return request<OperationLog[]>('GET', `/logs/operations${qs}`)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -384,138 +318,16 @@ export const api = {
|
||||
},
|
||||
},
|
||||
|
||||
// ── 提示词管理 ────────────────────────────────────────
|
||||
prompts: {
|
||||
async list(params?: {
|
||||
category?: string
|
||||
source?: string
|
||||
status?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<PromptTemplate>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<PromptTemplate>>('GET', `/prompts${qs}`)
|
||||
// ── 设备管理 ──────────────────────────────────────────
|
||||
devices: {
|
||||
async list(): Promise<DeviceInfo[]> {
|
||||
return request<DeviceInfo[]>('GET', '/devices')
|
||||
},
|
||||
|
||||
async get(name: string): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('GET', `/prompts/${encodeURIComponent(name)}`)
|
||||
async register(data: { device_id: string; device_name?: string; platform?: string; app_version?: string }) {
|
||||
return request<{ ok: boolean; device_id: string }>('POST', '/devices/register', data)
|
||||
},
|
||||
|
||||
async create(data: {
|
||||
name: string
|
||||
category: string
|
||||
description?: string
|
||||
source?: string
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables?: unknown[]
|
||||
min_app_version?: string
|
||||
}): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('POST', '/prompts', data)
|
||||
},
|
||||
|
||||
async update(name: string, data: {
|
||||
description?: string
|
||||
status?: string
|
||||
}): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('PUT', `/prompts/${encodeURIComponent(name)}`, data)
|
||||
},
|
||||
|
||||
async archive(name: string): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('DELETE', `/prompts/${encodeURIComponent(name)}`)
|
||||
},
|
||||
|
||||
async listVersions(name: string): Promise<PromptVersion[]> {
|
||||
return request<PromptVersion[]>('GET', `/prompts/${encodeURIComponent(name)}/versions`)
|
||||
},
|
||||
|
||||
async createVersion(name: string, data: {
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables?: unknown[]
|
||||
changelog?: string
|
||||
min_app_version?: string
|
||||
}): Promise<PromptVersion> {
|
||||
return request<PromptVersion>('POST', `/prompts/${encodeURIComponent(name)}/versions`, data)
|
||||
},
|
||||
|
||||
async rollback(name: string, version: number): Promise<PromptTemplate> {
|
||||
return request<PromptTemplate>('POST', `/prompts/${encodeURIComponent(name)}/rollback/${version}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── Agent 配置模板 ──────────────────────────────────
|
||||
agentTemplates: {
|
||||
async list(params?: {
|
||||
category?: string
|
||||
source?: string
|
||||
visibility?: string
|
||||
status?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}): Promise<PaginatedResponse<AgentTemplate>> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<PaginatedResponse<AgentTemplate>>('GET', `/agent-templates${qs}`)
|
||||
},
|
||||
|
||||
async get(id: string): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('GET', `/agent-templates/${id}`)
|
||||
},
|
||||
|
||||
async create(data: {
|
||||
name: string
|
||||
description?: string
|
||||
category?: string
|
||||
source?: string
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools?: string[]
|
||||
capabilities?: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility?: string
|
||||
}): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('POST', '/agent-templates', data)
|
||||
},
|
||||
|
||||
async update(id: string, data: {
|
||||
description?: string
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools?: string[]
|
||||
capabilities?: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility?: string
|
||||
status?: string
|
||||
}): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('POST', `/agent-templates/${id}`, data)
|
||||
},
|
||||
|
||||
async archive(id: string): Promise<AgentTemplate> {
|
||||
return request<AgentTemplate>('DELETE', `/agent-templates/${id}`)
|
||||
},
|
||||
},
|
||||
|
||||
// ── 遥测统计 ──────────────────────────────────────────
|
||||
telemetry: {
|
||||
/** 按模型聚合用量统计 */
|
||||
async modelStats(params?: {
|
||||
from?: string
|
||||
to?: string
|
||||
model_id?: string
|
||||
connection_mode?: string
|
||||
}): Promise<ModelUsageStat[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<ModelUsageStat[]>('GET', `/telemetry/stats${qs}`)
|
||||
},
|
||||
|
||||
/** 按天聚合用量统计 */
|
||||
async dailyStats(params?: {
|
||||
days?: number
|
||||
}): Promise<DailyUsageStat[]> {
|
||||
const qs = buildQueryString(params)
|
||||
return request<DailyUsageStat[]>('GET', `/telemetry/daily${qs}`)
|
||||
async heartbeat(data: { device_id: string }) {
|
||||
return request<{ ok: boolean }>('POST', '/devices/heartbeat', data)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
// ============================================================
|
||||
// API Error 类 — 与 swr-fetcher 共享
|
||||
// ============================================================
|
||||
|
||||
export class ApiRequestError extends Error {
|
||||
constructor(
|
||||
public status: number,
|
||||
public body: { error?: string; message?: string },
|
||||
) {
|
||||
super(body.message || `Request failed with status ${status}`)
|
||||
this.name = 'ApiRequestError'
|
||||
}
|
||||
}
|
||||
@@ -2,28 +2,74 @@
|
||||
// ZCLAW SaaS Admin — JWT Token 管理
|
||||
// ============================================================
|
||||
|
||||
import type { AccountPublic } from './types'
|
||||
import type { AccountPublic, LoginResponse } from './types'
|
||||
|
||||
const TOKEN_KEY = 'zclaw_admin_token'
|
||||
const ACCOUNT_KEY = 'zclaw_admin_account'
|
||||
|
||||
/** 保存登录凭证 */
|
||||
// ── JWT 辅助函数 ────────────────────────────────────────────
|
||||
|
||||
interface JwtPayload {
|
||||
exp?: number
|
||||
iat?: number
|
||||
sub?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Decode a JWT payload without verifying the signature.
|
||||
* Returns the parsed JSON payload, or null if the token is malformed.
|
||||
*/
|
||||
function decodeJwtPayload<T = Record<string, unknown>>(token: string): T | null {
|
||||
try {
|
||||
const parts = token.split('.')
|
||||
if (parts.length !== 3) return null
|
||||
const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/')
|
||||
const json = decodeURIComponent(
|
||||
atob(base64)
|
||||
.split('')
|
||||
.map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
|
||||
.join(''),
|
||||
)
|
||||
return JSON.parse(json) as T
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the delay (ms) until 80% of the token's remaining lifetime
|
||||
* has elapsed. Returns null if the token is already past that point.
|
||||
*/
|
||||
function getRefreshDelay(exp: number): number | null {
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
const totalLifetime = exp - now
|
||||
if (totalLifetime <= 0) return null
|
||||
|
||||
const refreshAt = now + Math.floor(totalLifetime * 0.8)
|
||||
const delayMs = (refreshAt - now) * 1000
|
||||
return delayMs > 5000 ? delayMs : 5000
|
||||
}
|
||||
|
||||
// ── 定时刷新状态 ────────────────────────────────────────────
|
||||
|
||||
let refreshTimerId: ReturnType<typeof setTimeout> | null = null
|
||||
let visibilityHandler: (() => void) | null = null
|
||||
let sessionExpiredCallback: (() => void) | null = null
|
||||
|
||||
// ── 凭证操作 ────────────────────────────────────────────────
|
||||
|
||||
/** 保存登录凭证并启动自动刷新 */
|
||||
export function login(token: string, account: AccountPublic): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.setItem(TOKEN_KEY, token)
|
||||
localStorage.setItem(ACCOUNT_KEY, JSON.stringify(account))
|
||||
scheduleTokenRefresh()
|
||||
}
|
||||
|
||||
/** 清除登录凭证 */
|
||||
/** 清除登录凭证并停止自动刷新 */
|
||||
export function logout(): void {
|
||||
if (typeof window === 'undefined') return
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(ACCOUNT_KEY)
|
||||
}
|
||||
|
||||
/** 清除认证状态（用于 Token 验证失败时） */
|
||||
export function clearAuth(): void {
|
||||
if (typeof window === 'undefined') return
|
||||
cancelTokenRefresh()
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(ACCOUNT_KEY)
|
||||
}
|
||||
@@ -50,3 +96,121 @@ export function getAccount(): AccountPublic | null {
|
||||
export function isAuthenticated(): boolean {
|
||||
return !!getToken()
|
||||
}
|
||||
|
||||
/** 尝试刷新 token，成功则更新 localStorage 并返回新 token */
|
||||
export async function refreshToken(): Promise<string> {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_SAAS_API_URL || 'http://localhost:8080'}/api/v1/auth/refresh`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${getToken()}`,
|
||||
},
|
||||
},
|
||||
)
|
||||
if (!res.ok) {
|
||||
throw new Error('Token 刷新失败')
|
||||
}
|
||||
const data: LoginResponse = await res.json()
|
||||
login(data.token, data.account)
|
||||
return data.token
|
||||
}
|
||||
|
||||
// ── 自动刷新调度 ────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Register a callback invoked when the proactive token refresh fails.
|
||||
* The caller should use this to trigger a logout/redirect flow.
|
||||
*/
|
||||
export function setOnSessionExpired(handler: (() => void) | null): void {
|
||||
sessionExpiredCallback = handler
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule a proactive token refresh at 80% of the token's remaining lifetime.
|
||||
* Also registers a visibilitychange listener to re-check when the tab regains focus.
|
||||
*/
|
||||
export function scheduleTokenRefresh(): void {
|
||||
cancelTokenRefresh()
|
||||
|
||||
const token = getToken()
|
||||
if (!token) return
|
||||
|
||||
const payload = decodeJwtPayload<JwtPayload>(token)
|
||||
if (!payload?.exp) return
|
||||
|
||||
const delay = getRefreshDelay(payload.exp)
|
||||
if (delay === null) {
|
||||
attemptTokenRefresh()
|
||||
return
|
||||
}
|
||||
|
||||
refreshTimerId = setTimeout(() => {
|
||||
attemptTokenRefresh()
|
||||
}, delay)
|
||||
|
||||
if (typeof document !== 'undefined' && !visibilityHandler) {
|
||||
visibilityHandler = () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
checkAndRefreshToken()
|
||||
}
|
||||
}
|
||||
document.addEventListener('visibilitychange', visibilityHandler)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel any pending token refresh timer and remove the visibility listener.
|
||||
*/
|
||||
export function cancelTokenRefresh(): void {
|
||||
if (refreshTimerId !== null) {
|
||||
clearTimeout(refreshTimerId)
|
||||
refreshTimerId = null
|
||||
}
|
||||
if (visibilityHandler !== null && typeof document !== 'undefined') {
|
||||
document.removeEventListener('visibilitychange', visibilityHandler)
|
||||
visibilityHandler = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the current token is close to expiry and refresh if needed.
|
||||
* Called on visibility change to handle clock skew / long background tabs.
|
||||
*/
|
||||
function checkAndRefreshToken(): void {
|
||||
const token = getToken()
|
||||
if (!token) return
|
||||
|
||||
const payload = decodeJwtPayload<JwtPayload>(token)
|
||||
if (!payload?.exp) return
|
||||
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
const remaining = payload.exp - now
|
||||
|
||||
if (remaining <= 0) {
|
||||
attemptTokenRefresh()
|
||||
return
|
||||
}
|
||||
|
||||
const delay = getRefreshDelay(payload.exp)
|
||||
if (delay !== null && delay < 60_000) {
|
||||
attemptTokenRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to refresh the token. On success, the new token is persisted via
|
||||
* login() which also reschedules the next refresh. On failure, invoke the
|
||||
* session-expired callback.
|
||||
*/
|
||||
async function attemptTokenRefresh(): Promise<void> {
|
||||
try {
|
||||
await refreshToken()
|
||||
} catch {
|
||||
cancelTokenRefresh()
|
||||
if (sessionExpiredCallback) {
|
||||
sessionExpiredCallback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
// ============================================================
|
||||
// SWR fetcher — 将 SWR key 映射到 api-client 调用
|
||||
// ============================================================
|
||||
|
||||
import { api } from './api-client'
|
||||
import { ApiRequestError } from './api-client'
|
||||
|
||||
type ApiMethod = typeof api
|
||||
|
||||
/** SWR fetcher: key 可以是字符串或 [method-path, params] 元组 */
|
||||
type SwrKey =
|
||||
| string
|
||||
| [string, ...unknown[]]
|
||||
|
||||
/** SWR fetcher 支持 AbortSignal 传递 */
|
||||
type SwrFetcherArgs = { signal?: AbortSignal } | null
|
||||
|
||||
async function resolveApiCall(key: SwrKey, args: SwrFetcherArgs): Promise<unknown> {
|
||||
if (typeof key === 'string') {
|
||||
// 简单字符串 key，直接 fetch
|
||||
return fetchGeneric(key, args?.signal)
|
||||
}
|
||||
|
||||
const [path, ...rest] = key
|
||||
return callByPath(path, rest, args?.signal)
|
||||
}
|
||||
|
||||
async function fetchGeneric(path: string, signal?: AbortSignal): Promise<unknown> {
|
||||
const res = await fetch(path, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
signal,
|
||||
})
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({ error: 'unknown', message: `请求失败 (${res.status})` }))
|
||||
throw new ApiRequestError(res.status, body)
|
||||
}
|
||||
if (res.status === 204) return null
|
||||
return res.json()
|
||||
}
|
||||
|
||||
/** 根据 path 调用对应的 api 方法 */
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
async function callByPath(path: string, callArgs: unknown[], signal?: AbortSignal): Promise<unknown> {
|
||||
const parts = path.split('.')
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let target: any = api
|
||||
for (const part of parts) {
|
||||
target = target[part]
|
||||
if (!target) throw new Error(`API method not found: ${path}`)
|
||||
}
|
||||
// Append signal as last argument if the target is the request function
|
||||
// For api.xxx() calls that ultimately use request(), we pass signal through
|
||||
// The simplest approach: pass signal as part of an options bag
|
||||
return target(...callArgs, signal ? { signal } : undefined)
|
||||
}
|
||||
|
||||
/**
|
||||
* SWR fetcher — 接受 SWR 自动传入的 AbortSignal
|
||||
*
|
||||
* 用法: useSWR(key, swrFetcher)
|
||||
* SWR 会自动在组件卸载或 key 变化时 abort 请求
|
||||
*/
|
||||
export function swrFetcher<T = unknown>(key: SwrKey, args: SwrFetcherArgs): Promise<T> {
|
||||
return resolveApiCall(key, args) as Promise<T>
|
||||
}
|
||||
|
||||
/** 创建 SWR key helper — 类型安全 */
|
||||
export function createKey<TMethod extends string>(
|
||||
method: TMethod,
|
||||
...args: unknown[]
|
||||
): [TMethod, ...unknown[]] {
|
||||
return [method, ...args]
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { SWRConfig } from 'swr'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
/** 判断是否为请求被中断（页面导航等场景） */
|
||||
function isAbortError(err: unknown): boolean {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return true
|
||||
if (err instanceof Error && err.message?.includes('aborted')) return true
|
||||
return false
|
||||
}
|
||||
|
||||
export function SWRProvider({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<SWRConfig
|
||||
value={{
|
||||
// 关闭所有自动 revalidation — 只在手动 mutate 或 key 变化时刷新
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
|
||||
// 60s 去重窗口：Dashboard 数据变化不频繁，避免短时间内重复请求
|
||||
dedupingInterval: 60_000,
|
||||
|
||||
// 保留旧数据直到新数据返回，避免 loading 闪烁
|
||||
keepPreviousData: true,
|
||||
|
||||
// 最多重试 1 次，间隔 3s
|
||||
errorRetryCount: 1,
|
||||
errorRetryInterval: 3000,
|
||||
|
||||
shouldRetryOnError: (err: unknown) => {
|
||||
if (isAbortError(err)) return false
|
||||
if (err && typeof err === 'object' && 'status' in err) {
|
||||
const status = (err as { status: number }).status
|
||||
return status !== 401 && status !== 403 && status !== 404
|
||||
}
|
||||
return true
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
if (isAbortError(err)) return
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SWRConfig>
|
||||
)
|
||||
}
|
||||
@@ -9,9 +9,9 @@ export interface AccountPublic {
|
||||
email: string
|
||||
display_name: string
|
||||
role: 'super_admin' | 'admin' | 'user'
|
||||
permissions: string[]
|
||||
status: 'active' | 'disabled' | 'suspended'
|
||||
totp_enabled: boolean
|
||||
last_login_at: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
@@ -25,7 +25,6 @@ export interface LoginRequest {
|
||||
/** 登录响应 */
|
||||
export interface LoginResponse {
|
||||
token: string
|
||||
refresh_token: string
|
||||
account: AccountPublic
|
||||
}
|
||||
|
||||
@@ -50,12 +49,11 @@ export interface Provider {
|
||||
id: string
|
||||
name: string
|
||||
display_name: string
|
||||
api_key?: string
|
||||
base_url: string
|
||||
api_protocol: string
|
||||
api_protocol: 'openai' | 'anthropic'
|
||||
enabled: boolean
|
||||
rate_limit_rpm: number | null
|
||||
rate_limit_tpm: number | null
|
||||
rate_limit_rpm?: number
|
||||
rate_limit_tpm?: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
@@ -100,31 +98,40 @@ export interface RelayTask {
|
||||
account_id: string
|
||||
provider_id: string
|
||||
model_id: string
|
||||
status: string
|
||||
status: 'queued' | 'processing' | 'completed' | 'failed'
|
||||
priority: number
|
||||
attempt_count: number
|
||||
max_attempts: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
error_message: string | null
|
||||
queued_at: string
|
||||
started_at: string | null
|
||||
completed_at: string | null
|
||||
error_message?: string
|
||||
queued_at?: string
|
||||
started_at?: string
|
||||
completed_at?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 用量记录 */
|
||||
export interface UsageRecord {
|
||||
day: string
|
||||
count: number
|
||||
/** 用量统计 — 后端返回的完整结构 */
|
||||
export interface UsageStats {
|
||||
total_requests: number
|
||||
total_input_tokens: number
|
||||
total_output_tokens: number
|
||||
by_model: UsageByModel[]
|
||||
by_day: DailyUsage[]
|
||||
}
|
||||
|
||||
/** 每日用量 */
|
||||
export interface DailyUsage {
|
||||
date: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
}
|
||||
|
||||
/** 按模型用量 */
|
||||
export interface UsageByModel {
|
||||
provider_id: string
|
||||
model_id: string
|
||||
count: number
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
}
|
||||
@@ -134,11 +141,11 @@ export interface ConfigItem {
|
||||
id: string
|
||||
category: string
|
||||
key_path: string
|
||||
value_type: string
|
||||
current_value: string | null
|
||||
default_value: string | null
|
||||
source: string
|
||||
description: string | null
|
||||
value_type: 'string' | 'number' | 'boolean'
|
||||
current_value?: string
|
||||
default_value?: string
|
||||
source: 'default' | 'env' | 'db'
|
||||
description?: string
|
||||
requires_restart: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
@@ -147,12 +154,12 @@ export interface ConfigItem {
|
||||
/** 操作日志 */
|
||||
export interface OperationLog {
|
||||
id: number
|
||||
account_id: string | null
|
||||
account_id: string
|
||||
action: string
|
||||
target_type: string | null
|
||||
target_id: string | null
|
||||
details: Record<string, unknown> | null
|
||||
ip_address: string | null
|
||||
target_type: string
|
||||
target_id: string
|
||||
details?: Record<string, unknown>
|
||||
ip_address?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
@@ -167,133 +174,20 @@ export interface DashboardStats {
|
||||
tokens_today_output: number
|
||||
}
|
||||
|
||||
/** 设备信息 */
|
||||
export interface DeviceInfo {
|
||||
id: string
|
||||
device_id: string
|
||||
device_name?: string
|
||||
platform?: string
|
||||
app_version?: string
|
||||
last_seen_at: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** API 错误响应 */
|
||||
export interface ApiError {
|
||||
error: string
|
||||
message: string
|
||||
status?: number
|
||||
}
|
||||
|
||||
// ── 提示词模板 ────────────────────────────────────────────
|
||||
|
||||
/** 提示词模板 */
|
||||
export interface PromptTemplate {
|
||||
id: string
|
||||
name: string
|
||||
category: string
|
||||
description?: string
|
||||
source: 'builtin' | 'custom'
|
||||
current_version: number
|
||||
status: 'active' | 'deprecated' | 'archived'
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
/** 提示词版本 */
|
||||
export interface PromptVersion {
|
||||
id: string
|
||||
template_id: string
|
||||
version: number
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables: PromptVariable[]
|
||||
changelog?: string
|
||||
min_app_version?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
/** 提示词变量定义 */
|
||||
export interface PromptVariable {
|
||||
name: string
|
||||
type: 'string' | 'number' | 'select' | 'boolean'
|
||||
default_value?: string
|
||||
description?: string
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
/** OTA 更新检查请求 */
|
||||
export interface PromptCheckRequest {
|
||||
device_id: string
|
||||
versions: Record<string, number>
|
||||
}
|
||||
|
||||
/** OTA 更新响应 */
|
||||
export interface PromptCheckResponse {
|
||||
updates: PromptUpdatePayload[]
|
||||
server_time: string
|
||||
}
|
||||
|
||||
/** 单个更新载荷 */
|
||||
export interface PromptUpdatePayload {
|
||||
name: string
|
||||
version: number
|
||||
system_prompt: string
|
||||
user_prompt_template?: string
|
||||
variables: PromptVariable[]
|
||||
source: string
|
||||
min_app_version?: string
|
||||
changelog?: string
|
||||
}
|
||||
|
||||
// ── Agent 配置模板 ────────────────────────────────────────
|
||||
|
||||
/** Agent 模板 */
|
||||
export interface AgentTemplate {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
category: string
|
||||
source: 'builtin' | 'custom'
|
||||
model?: string
|
||||
system_prompt?: string
|
||||
tools: string[]
|
||||
capabilities: string[]
|
||||
temperature?: number
|
||||
max_tokens?: number
|
||||
visibility: 'public' | 'team' | 'private'
|
||||
status: 'active' | 'archived'
|
||||
current_version: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// ── Provider Key Pool ─────────────────────────────────────
|
||||
|
||||
/** Provider Key */
|
||||
export interface ProviderKey {
|
||||
id: string
|
||||
provider_id: string
|
||||
key_label: string
|
||||
priority: number
|
||||
max_rpm?: number
|
||||
max_tpm?: number
|
||||
quota_reset_interval?: string
|
||||
is_active: boolean
|
||||
last_429_at?: string
|
||||
cooldown_until?: string
|
||||
total_requests: number
|
||||
total_tokens: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// ── 遥测统计 ────────────────────────────────────────────
|
||||
|
||||
/** 按模型聚合的用量统计 */
|
||||
export interface ModelUsageStat {
|
||||
model_id: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
avg_latency_ms: number | null
|
||||
success_rate: number
|
||||
}
|
||||
|
||||
/** 按天的用量统计 */
|
||||
export interface DailyUsageStat {
|
||||
day: string
|
||||
request_count: number
|
||||
input_tokens: number
|
||||
output_tokens: number
|
||||
unique_devices: number
|
||||
}
|
||||
|
||||
@@ -32,14 +32,3 @@ export function maskApiKey(key?: string): string {
|
||||
export function sleep(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
/** 从 SWR error 中提取用户可见消息，过滤 abort 错误 */
|
||||
export function getSwrErrorMessage(err: unknown): string | undefined {
|
||||
if (!err) return undefined
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return undefined
|
||||
if (err instanceof Error) {
|
||||
if (err.name === 'AbortError' || err.message?.includes('aborted')) return undefined
|
||||
return err.message
|
||||
}
|
||||
return String(err)
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
# ZCLAW SaaS 开发环境配置
|
||||
# 通过 ZCLAW_ENV=development 或默认使用此配置
|
||||
|
||||
[server]
|
||||
host = "0.0.0.0"
|
||||
port = 8080
|
||||
cors_origins = [] # 空 = 开发模式允许所有来源
|
||||
|
||||
[database]
|
||||
url = "postgres://postgres:123123@localhost:5432/zclaw"
|
||||
|
||||
[auth]
|
||||
jwt_expiration_hours = 24
|
||||
totp_issuer = "ZCLAW SaaS (dev)"
|
||||
refresh_token_hours = 168
|
||||
|
||||
[relay]
|
||||
max_queue_size = 1000
|
||||
max_concurrent_per_provider = 5
|
||||
batch_window_ms = 50
|
||||
retry_delay_ms = 1000
|
||||
max_attempts = 3
|
||||
|
||||
[rate_limit]
|
||||
requests_per_minute = 120
|
||||
burst = 20
|
||||
|
||||
[scheduler]
|
||||
jobs = [
|
||||
{ name = "cleanup_rate_limit", interval = "5m", task = "cleanup_rate_limit", run_on_start = false },
|
||||
{ name = "cleanup_refresh_tokens", interval = "1h", task = "cleanup_refresh_tokens", run_on_start = false },
|
||||
{ name = "cleanup_devices", interval = "24h", task = "cleanup_devices", run_on_start = false },
|
||||
]
|
||||
@@ -1,35 +0,0 @@
|
||||
# ZCLAW SaaS 生产环境配置
|
||||
# 通过 ZCLAW_ENV=production 使用此配置
|
||||
|
||||
[server]
|
||||
host = "0.0.0.0"
|
||||
port = 8080
|
||||
# 生产环境必须配置 CORS 白名单
|
||||
cors_origins = ["https://admin.zclaw.ai", "https://zclaw.ai"]
|
||||
|
||||
[database]
|
||||
# 生产环境通过 ZCLAW_DATABASE_URL 环境变量覆盖，此处为占位
|
||||
url = "postgres://zclaw:CHANGE_ME@db:5432/zclaw"
|
||||
|
||||
[auth]
|
||||
jwt_expiration_hours = 12
|
||||
totp_issuer = "ZCLAW SaaS"
|
||||
refresh_token_hours = 168
|
||||
|
||||
[relay]
|
||||
max_queue_size = 5000
|
||||
max_concurrent_per_provider = 10
|
||||
batch_window_ms = 50
|
||||
retry_delay_ms = 2000
|
||||
max_attempts = 3
|
||||
|
||||
[rate_limit]
|
||||
requests_per_minute = 60
|
||||
burst = 10
|
||||
|
||||
[scheduler]
|
||||
jobs = [
|
||||
{ name = "cleanup_rate_limit", interval = "5m", task = "cleanup_rate_limit", run_on_start = false },
|
||||
{ name = "cleanup_refresh_tokens", interval = "1h", task = "cleanup_refresh_tokens", run_on_start = false },
|
||||
{ name = "cleanup_devices", interval = "24h", task = "cleanup_devices", run_on_start = true },
|
||||
]
|
||||
@@ -1,31 +0,0 @@
|
||||
# ZCLAW SaaS 测试环境配置
|
||||
# 通过 ZCLAW_ENV=test 使用此配置
|
||||
|
||||
[server]
|
||||
host = "127.0.0.1"
|
||||
port = 8090
|
||||
cors_origins = []
|
||||
|
||||
[database]
|
||||
# 测试环境使用独立数据库
|
||||
url = "postgres://postgres:123123@localhost:5432/zclaw_test"
|
||||
|
||||
[auth]
|
||||
jwt_expiration_hours = 1
|
||||
totp_issuer = "ZCLAW SaaS (test)"
|
||||
refresh_token_hours = 24
|
||||
|
||||
[relay]
|
||||
max_queue_size = 100
|
||||
max_concurrent_per_provider = 2
|
||||
batch_window_ms = 10
|
||||
retry_delay_ms = 100
|
||||
max_attempts = 2
|
||||
|
||||
[rate_limit]
|
||||
requests_per_minute = 200
|
||||
burst = 50
|
||||
|
||||
[scheduler]
|
||||
# 测试环境不启动定时任务
|
||||
jobs = []
|
||||
21
crates/zclaw-channels/Cargo.toml
Normal file
21
crates/zclaw-channels/Cargo.toml
Normal file
@@ -0,0 +1,21 @@
|
||||
[package]
|
||||
name = "zclaw-channels"
|
||||
version.workspace = true
|
||||
edition.workspace = true
|
||||
license.workspace = true
|
||||
repository.workspace = true
|
||||
rust-version.workspace = true
|
||||
description = "ZCLAW Channels - external platform adapters"
|
||||
|
||||
[dependencies]
|
||||
zclaw-types = { workspace = true }
|
||||
|
||||
tokio = { workspace = true }
|
||||
serde = { workspace = true }
|
||||
serde_json = { workspace = true }
|
||||
thiserror = { workspace = true }
|
||||
tracing = { workspace = true }
|
||||
async-trait = { workspace = true }
|
||||
|
||||
reqwest = { workspace = true }
|
||||
chrono = { workspace = true }
|
||||
71
crates/zclaw-channels/src/adapters/console.rs
Normal file
71
crates/zclaw-channels/src/adapters/console.rs
Normal file
@@ -0,0 +1,71 @@
|
||||
//! Console channel adapter for testing
|
||||
|
||||
use async_trait::async_trait;
|
||||
use std::sync::Arc;
|
||||
use tokio::sync::mpsc;
|
||||
use zclaw_types::Result;
|
||||
|
||||
use crate::{Channel, ChannelConfig, ChannelStatus, IncomingMessage, OutgoingMessage};
|
||||
|
||||
/// Console channel adapter (for testing)
|
||||
pub struct ConsoleChannel {
|
||||
config: ChannelConfig,
|
||||
status: Arc<tokio::sync::RwLock<ChannelStatus>>,
|
||||
}
|
||||
|
||||
impl ConsoleChannel {
|
||||
pub fn new(config: ChannelConfig) -> Self {
|
||||
Self {
|
||||
config,
|
||||
status: Arc::new(tokio::sync::RwLock::new(ChannelStatus::Disconnected)),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[async_trait]
|
||||
impl Channel for ConsoleChannel {
|
||||
fn config(&self) -> &ChannelConfig {
|
||||
&self.config
|
||||
}
|
||||
|
||||
async fn connect(&self) -> Result<()> {
|
||||
let mut status = self.status.write().await;
|
||||
*status = ChannelStatus::Connected;
|
||||
tracing::info!("Console channel connected");
|
||||
Ok(())
|
||||
}
|
||||
|
||||
async fn disconnect(&self) -> Result<()> {
|
||||
let mut status = self.status.write().await;
|
||||
*status = ChannelStatus::Disconnected;
|
||||
tracing::info!("Console channel disconnected");
|
||||
Ok(())
|
||||
}
|
||||
|
||||
async fn status(&self) -> ChannelStatus {
|
||||
self.status.read().await.clone()
|
||||
}
|
||||
|
||||
async fn send(&self, message: OutgoingMessage) -> Result<String> {
|
||||
// Print to console for testing
|
||||
let msg_id = format!("console_{}", chrono::Utc::now().timestamp());
|
||||
|
||||
match &message.content {
|
||||
crate::MessageContent::Text { text } => {
|
||||
tracing::info!("[Console] To {}: {}", message.conversation_id, text);
|
||||
}
|
||||
_ => {
|
||||
tracing::info!("[Console] To {}: {:?}", message.conversation_id, message.content);
|
||||
}
|
||||
}
|
||||
|
||||
Ok(msg_id)
|
||||
}
|
||||
|
||||
async fn receive(&self) -> Result<mpsc::Receiver<IncomingMessage>> {
|
||||
let (_tx, rx) = mpsc::channel(100);
|
||||
// Console channel doesn't receive messages automatically
|
||||
// Messages would need to be injected via a separate method
|
||||
Ok(rx)
|
||||
}
|
||||
}
|
||||
5
crates/zclaw-channels/src/adapters/mod.rs
Normal file
5
crates/zclaw-channels/src/adapters/mod.rs
Normal file
@@ -0,0 +1,5 @@
|
||||
//! Channel adapters
|
||||
|
||||
mod console;
|
||||
|
||||
pub use console::ConsoleChannel;
|
||||
94
crates/zclaw-channels/src/bridge.rs
Normal file
94
crates/zclaw-channels/src/bridge.rs
Normal file
@@ -0,0 +1,94 @@
|
||||
//! Channel bridge manager
|
||||
//!
|
||||
//! Coordinates multiple channel adapters and routes messages.
|
||||
|
||||
use std::collections::HashMap;
|
||||
use std::sync::Arc;
|
||||
use tokio::sync::RwLock;
|
||||
use zclaw_types::Result;
|
||||
|
||||
use super::{Channel, ChannelConfig, OutgoingMessage};
|
||||
|
||||
/// Channel bridge manager
|
||||
pub struct ChannelBridge {
|
||||
channels: RwLock<HashMap<String, Arc<dyn Channel>>>,
|
||||
configs: RwLock<HashMap<String, ChannelConfig>>,
|
||||
}
|
||||
|
||||
impl ChannelBridge {
|
||||
pub fn new() -> Self {
|
||||
Self {
|
||||
channels: RwLock::new(HashMap::new()),
|
||||
configs: RwLock::new(HashMap::new()),
|
||||
}
|
||||
}
|
||||
|
||||
/// Register a channel adapter
|
||||
pub async fn register(&self, channel: Arc<dyn Channel>) {
|
||||
let config = channel.config().clone();
|
||||
let mut channels = self.channels.write().await;
|
||||
let mut configs = self.configs.write().await;
|
||||
|
||||
channels.insert(config.id.clone(), channel);
|
||||
configs.insert(config.id.clone(), config);
|
||||
}
|
||||
|
||||
/// Get a channel by ID
|
||||
pub async fn get(&self, id: &str) -> Option<Arc<dyn Channel>> {
|
||||
let channels = self.channels.read().await;
|
||||
channels.get(id).cloned()
|
||||
}
|
||||
|
||||
/// Get channel configuration
|
||||
pub async fn get_config(&self, id: &str) -> Option<ChannelConfig> {
|
||||
let configs = self.configs.read().await;
|
||||
configs.get(id).cloned()
|
||||
}
|
||||
|
||||
/// List all channels
|
||||
pub async fn list(&self) -> Vec<ChannelConfig> {
|
||||
let configs = self.configs.read().await;
|
||||
configs.values().cloned().collect()
|
||||
}
|
||||
|
||||
/// Connect all channels
|
||||
pub async fn connect_all(&self) -> Result<()> {
|
||||
let channels = self.channels.read().await;
|
||||
for channel in channels.values() {
|
||||
channel.connect().await?;
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Disconnect all channels
|
||||
pub async fn disconnect_all(&self) -> Result<()> {
|
||||
let channels = self.channels.read().await;
|
||||
for channel in channels.values() {
|
||||
channel.disconnect().await?;
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Send message through a specific channel
|
||||
pub async fn send(&self, channel_id: &str, message: OutgoingMessage) -> Result<String> {
|
||||
let channel = self.get(channel_id).await
|
||||
.ok_or_else(|| zclaw_types::ZclawError::NotFound(format!("Channel not found: {}", channel_id)))?;
|
||||
|
||||
channel.send(message).await
|
||||
}
|
||||
|
||||
/// Remove a channel
|
||||
pub async fn remove(&self, id: &str) {
|
||||
let mut channels = self.channels.write().await;
|
||||
let mut configs = self.configs.write().await;
|
||||
|
||||
channels.remove(id);
|
||||
configs.remove(id);
|
||||
}
|
||||
}
|
||||
|
||||
impl Default for ChannelBridge {
|
||||
fn default() -> Self {
|
||||
Self::new()
|
||||
}
|
||||
}
|
||||
109
crates/zclaw-channels/src/channel.rs
Normal file
109
crates/zclaw-channels/src/channel.rs
Normal file
@@ -0,0 +1,109 @@
|
||||
//! Channel trait and types
|
||||
|
||||
use async_trait::async_trait;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use zclaw_types::{Result, AgentId};
|
||||
|
||||
/// Channel configuration
|
||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||
pub struct ChannelConfig {
|
||||
/// Unique channel identifier
|
||||
pub id: String,
|
||||
/// Channel type (telegram, discord, slack, etc.)
|
||||
pub channel_type: String,
|
||||
/// Human-readable name
|
||||
pub name: String,
|
||||
/// Whether the channel is enabled
|
||||
#[serde(default = "default_enabled")]
|
||||
pub enabled: bool,
|
||||
/// Channel-specific configuration
|
||||
#[serde(default)]
|
||||
pub config: serde_json::Value,
|
||||
/// Associated agent for this channel
|
||||
pub agent_id: Option<AgentId>,
|
||||
}
|
||||
|
||||
fn default_enabled() -> bool { true }
|
||||
|
||||
/// Incoming message from a channel
|
||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||
pub struct IncomingMessage {
|
||||
/// Message ID from the platform
|
||||
pub platform_id: String,
|
||||
/// Channel/conversation ID
|
||||
pub conversation_id: String,
|
||||
/// Sender information
|
||||
pub sender: MessageSender,
|
||||
/// Message content
|
||||
pub content: MessageContent,
|
||||
/// Timestamp
|
||||
pub timestamp: i64,
|
||||
/// Reply-to message ID if any
|
||||
pub reply_to: Option<String>,
|
||||
}
|
||||
|
||||
/// Message sender information
|
||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||
pub struct MessageSender {
|
||||
pub id: String,
|
||||
pub name: Option<String>,
|
||||
pub username: Option<String>,
|
||||
pub is_bot: bool,
|
||||
}
|
||||
|
||||
/// Message content types
|
||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||
#[serde(tag = "type", rename_all = "snake_case")]
|
||||
pub enum MessageContent {
|
||||
Text { text: String },
|
||||
Image { url: String, caption: Option<String> },
|
||||
File { url: String, filename: String },
|
||||
Audio { url: String },
|
||||
Video { url: String },
|
||||
Location { latitude: f64, longitude: f64 },
|
||||
Sticker { emoji: Option<String>, url: Option<String> },
|
||||
}
|
||||
|
||||
/// Outgoing message to a channel
|
||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
||||
pub struct OutgoingMessage {
|
||||
/// Conversation/channel ID to send to
|
||||
pub conversation_id: String,
|
||||
/// Message content
|
||||
pub content: MessageContent,
|
||||
/// Reply-to message ID if any
|
||||
pub reply_to: Option<String>,
|
||||
/// Whether to send silently (no notification)
|
||||
pub silent: bool,
|
||||
}
|
||||
|
||||
/// Channel connection status
|
||||
#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
|
||||
pub enum ChannelStatus {
|
||||
Disconnected,
|
||||
Connecting,
|
||||
Connected,
|
||||
Error(String),
|
||||
}
|
||||
|
||||
/// Channel trait for platform adapters
|
||||
#[async_trait]
|
||||
pub trait Channel: Send + Sync {
|
||||
/// Get channel configuration
|
||||
fn config(&self) -> &ChannelConfig;
|
||||
|
||||
/// Connect to the platform
|
||||
async fn connect(&self) -> Result<()>;
|
||||
|
||||
/// Disconnect from the platform
|
||||
async fn disconnect(&self) -> Result<()>;
|
||||
|
||||
/// Get current connection status
|
||||
async fn status(&self) -> ChannelStatus;
|
||||
|
||||
/// Send a message
|
||||
async fn send(&self, message: OutgoingMessage) -> Result<String>;
|
||||
|
||||
/// Receive incoming messages (streaming)
|
||||
async fn receive(&self) -> Result<tokio::sync::mpsc::Receiver<IncomingMessage>>;
|
||||
}
|
||||
11
crates/zclaw-channels/src/lib.rs
Normal file
11
crates/zclaw-channels/src/lib.rs
Normal file
@@ -0,0 +1,11 @@
|
||||
//! ZCLAW Channels
|
||||
//!
|
||||
//! External platform adapters for unified message handling.
|
||||
|
||||
mod channel;
|
||||
mod bridge;
|
||||
mod adapters;
|
||||
|
||||
pub use channel::*;
|
||||
pub use bridge::*;
|
||||
pub use adapters::*;
|
||||
@@ -27,7 +27,7 @@ pub struct SqliteStorage {
|
||||
}
|
||||
|
||||
/// Database row structure for memory entry
|
||||
pub(crate) struct MemoryRow {
|
||||
struct MemoryRow {
|
||||
uri: String,
|
||||
memory_type: String,
|
||||
content: String,
|
||||
@@ -289,44 +289,6 @@ impl sqlx::FromRow<'_, SqliteRow> for MemoryRow {
|
||||
}
|
||||
}
|
||||
|
||||
/// Private helper methods on SqliteStorage (NOT in impl VikingStorage block)
|
||||
impl SqliteStorage {
|
||||
/// Fetch memories by scope with importance-based ordering.
|
||||
/// Used internally by find() for scope-based queries.
|
||||
pub(crate) async fn fetch_by_scope_priv(&self, scope: Option<&str>, limit: usize) -> Result<Vec<MemoryRow>> {
|
||||
let rows = if let Some(scope) = scope {
|
||||
sqlx::query_as::<_, MemoryRow>(
|
||||
r#"
|
||||
SELECT uri, memory_type, content, keywords, importance, access_count, created_at, last_accessed, overview, abstract_summary
|
||||
FROM memories
|
||||
WHERE uri LIKE ?
|
||||
ORDER BY importance DESC, access_count DESC
|
||||
LIMIT ?
|
||||
"#
|
||||
)
|
||||
.bind(format!("{}%", scope))
|
||||
.bind(limit as i64)
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
.map_err(|e| ZclawError::StorageError(format!("Failed to fetch by scope: {}", e)))?
|
||||
} else {
|
||||
sqlx::query_as::<_, MemoryRow>(
|
||||
r#"
|
||||
SELECT uri, memory_type, content, keywords, importance, access_count, created_at, last_accessed, overview, abstract_summary
|
||||
FROM memories
|
||||
ORDER BY importance DESC
|
||||
LIMIT ?
|
||||
"#
|
||||
)
|
||||
.bind(limit as i64)
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
.map_err(|e| ZclawError::StorageError(format!("Failed to fetch by scope: {}", e)))?
|
||||
};
|
||||
Ok(rows)
|
||||
}
|
||||
}
|
||||
|
||||
#[async_trait]
|
||||
impl VikingStorage for SqliteStorage {
|
||||
async fn store(&self, entry: &MemoryEntry) -> Result<()> {
|
||||
@@ -412,61 +374,22 @@ impl VikingStorage for SqliteStorage {
|
||||
}
|
||||
|
||||
async fn find(&self, query: &str, options: FindOptions) -> Result<Vec<MemoryEntry>> {
|
||||
let limit = options.limit.unwrap_or(50).max(20); // Fetch more candidates for reranking
|
||||
|
||||
// Strategy: use FTS5 for initial filtering when query is non-empty,
|
||||
// then score candidates with TF-IDF / embedding for precise ranking.
|
||||
// Fallback to scope-only scan when query is empty (e.g., "list all").
|
||||
let rows = if !query.is_empty() {
|
||||
// FTS5-powered candidate retrieval (fast, index-based)
|
||||
let fts_candidates = if let Some(ref scope) = options.scope {
|
||||
sqlx::query_as::<_, MemoryRow>(
|
||||
r#"
|
||||
SELECT m.uri, m.memory_type, m.content, m.keywords, m.importance,
|
||||
m.access_count, m.created_at, m.last_accessed, m.overview, m.abstract_summary
|
||||
FROM memories m
|
||||
INNER JOIN memories_fts f ON m.uri = f.uri
|
||||
WHERE f.memories_fts MATCH ?
|
||||
AND m.uri LIKE ?
|
||||
ORDER BY f.rank
|
||||
LIMIT ?
|
||||
"#
|
||||
)
|
||||
.bind(query)
|
||||
.bind(format!("{}%", scope))
|
||||
.bind(limit as i64)
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
} else {
|
||||
sqlx::query_as::<_, MemoryRow>(
|
||||
r#"
|
||||
SELECT m.uri, m.memory_type, m.content, m.keywords, m.importance,
|
||||
m.access_count, m.created_at, m.last_accessed, m.overview, m.abstract_summary
|
||||
FROM memories m
|
||||
INNER JOIN memories_fts f ON m.uri = f.uri
|
||||
WHERE f.memories_fts MATCH ?
|
||||
ORDER BY f.rank
|
||||
LIMIT ?
|
||||
"#
|
||||
)
|
||||
.bind(query)
|
||||
.bind(limit as i64)
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
};
|
||||
|
||||
match fts_candidates {
|
||||
Ok(rows) if !rows.is_empty() => rows,
|
||||
Ok(_) | Err(_) => {
|
||||
// FTS5 returned nothing or query syntax was invalid —
|
||||
// fallback to scope-based scan (no full table scan unless no scope)
|
||||
tracing::debug!("[SqliteStorage] FTS5 returned no results, falling back to scope scan");
|
||||
self.fetch_by_scope_priv(options.scope.as_deref(), limit).await?
|
||||
}
|
||||
}
|
||||
// Get all matching entries
|
||||
let rows = if let Some(ref scope) = options.scope {
|
||||
sqlx::query_as::<_, MemoryRow>(
|
||||
"SELECT uri, memory_type, content, keywords, importance, access_count, created_at, last_accessed, overview, abstract_summary FROM memories WHERE uri LIKE ?"
|
||||
)
|
||||
.bind(format!("{}%", scope))
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
.map_err(|e| ZclawError::StorageError(format!("Failed to find memories: {}", e)))?
|
||||
} else {
|
||||
// Empty query: scope-based scan only (no FTS5 needed)
|
||||
self.fetch_by_scope_priv(options.scope.as_deref(), limit).await?
|
||||
sqlx::query_as::<_, MemoryRow>(
|
||||
"SELECT uri, memory_type, content, keywords, importance, access_count, created_at, last_accessed, overview, abstract_summary FROM memories"
|
||||
)
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
.map_err(|e| ZclawError::StorageError(format!("Failed to find memories: {}", e)))?
|
||||
};
|
||||
|
||||
// Convert to entries and compute semantic scores
|
||||
@@ -541,8 +464,16 @@ impl VikingStorage for SqliteStorage {
|
||||
}
|
||||
|
||||
async fn find_by_prefix(&self, prefix: &str) -> Result<Vec<MemoryEntry>> {
|
||||
let rows = self.fetch_by_scope_priv(Some(prefix), 100).await?;
|
||||
let rows = sqlx::query_as::<_, MemoryRow>(
|
||||
"SELECT uri, memory_type, content, keywords, importance, access_count, created_at, last_accessed, overview, abstract_summary FROM memories WHERE uri LIKE ?"
|
||||
)
|
||||
.bind(format!("{}%", prefix))
|
||||
.fetch_all(&self.pool)
|
||||
.await
|
||||
.map_err(|e| ZclawError::StorageError(format!("Failed to find by prefix: {}", e)))?;
|
||||
|
||||
let entries = rows.iter().map(|row| self.row_to_entry(row)).collect();
|
||||
|
||||
Ok(entries)
|
||||
}
|
||||
|
||||
@@ -553,13 +484,13 @@ impl VikingStorage for SqliteStorage {
|
||||
.await
|
||||
.map_err(|e| ZclawError::StorageError(format!("Failed to delete memory: {}", e)))?;
|
||||
|
||||
// Remove from FTS index
|
||||
// Remove from FTS
|
||||
let _ = sqlx::query("DELETE FROM memories_fts WHERE uri = ?")
|
||||
.bind(uri)
|
||||
.execute(&self.pool)
|
||||
.await;
|
||||
|
||||
// Remove from in-memory scorer
|
||||
// Remove from scorer
|
||||
let mut scorer = self.scorer.write().await;
|
||||
scorer.remove_entry(uri);
|
||||
|
||||
|
||||
@@ -20,6 +20,3 @@ thiserror = { workspace = true }
|
||||
tracing = { workspace = true }
|
||||
async-trait = { workspace = true }
|
||||
reqwest = { workspace = true }
|
||||
hmac = "0.12"
|
||||
sha1 = "0.10"
|
||||
base64 = { workspace = true }
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user