From 3b1eac7833b116258ffc2d401c7e6e35c0560564 Mon Sep 17 00:00:00 2001 From: CJACK Date: Sun, 1 Feb 2026 19:43:40 +0800 Subject: [PATCH] feat: Implement a new, modern landing page with dynamic styling and feature highlights. --- README.MD | 4 +- app.py | 3 +- routes/admin/auth.py | 19 +- routes/home.py | 254 +++++++++++++++++++------ webui/package.json | 1 + webui/src/App.jsx | 269 +++++++++++++++------------ webui/src/components/LandingPage.jsx | 141 ++++++++++++++ webui/src/main.jsx | 7 +- webui/vite.config.js | 20 +- 9 files changed, 516 insertions(+), 202 deletions(-) create mode 100644 webui/src/components/LandingPage.jsx diff --git a/README.MD b/README.MD index 70459d3..ea35082 100644 --- a/README.MD +++ b/README.MD @@ -32,7 +32,7 @@ [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FCJackHwang%2Fds2api&env=DS2API_ADMIN_KEY&envDescription=管理面板访问密码（必填）&envLink=https%3A%2F%2Fgithub.com%2FCJackHwang%2Fds2api%23环境变量&project-name=ds2api&repository-name=ds2api) 1. 点击上方按钮，填写管理密码 `DS2API_ADMIN_KEY` -2. 部署完成后访问 `/webui` 管理界面 +2. 部署完成后访问 `/admin` 管理界面 3. 添加 DeepSeek 账号和 API Key 4. 点击「同步到 Vercel」保存配置 @@ -105,7 +105,7 @@ curl https://your-domain.com/v1/chat/completions \ | 接口 | 说明 | |-----|------| -| `GET /webui` | 管理界面 | +| `GET /admin` | 管理界面 | | `GET /admin/config` | 获取配置 | | `POST /admin/accounts/test` | 测试单个账号 | | `POST /admin/accounts/test-all` | 批量测试账号 | diff --git a/app.py b/app.py index e3f3556..4c4d70e 100644 --- a/app.py +++ b/app.py @@ -54,8 +54,9 @@ from routes.admin import router as admin_router app.include_router(openai_router) app.include_router(claude_router) -app.include_router(home_router) +# admin_router 必须在 home_router 之前，否则 home.py 的 /admin/{path:path} 会拦截 admin API app.include_router(admin_router) +app.include_router(home_router) # ---------------------------------------------------------------------- diff --git a/routes/admin/auth.py b/routes/admin/auth.py index 01bf2b4..4e855f8 100644 --- a/routes/admin/auth.py +++ b/routes/admin/auth.py @@ -15,8 +15,8 @@ from core.config import logger router = APIRouter() security = HTTPBearer(auto_error=False) -# Admin Key 验证 -ADMIN_KEY = os.getenv("DS2API_ADMIN_KEY", "") +# Admin Key 验证（默认值适用于开发/演示环境，生产环境请务必修改） +ADMIN_KEY = os.getenv("DS2API_ADMIN_KEY", "your-admin-secret-key") # JWT 配置 JWT_SECRET = os.getenv("DS2API_JWT_SECRET", ADMIN_KEY or "ds2api-default-secret") @@ -105,17 +105,6 @@ async def admin_login(request: Request): admin_key = data.get("admin_key", "") expire_hours = data.get("expire_hours", JWT_EXPIRE_HOURS) - # 开发模式：如果没有配置 ADMIN_KEY，允许任意登录 - if not ADMIN_KEY: - logger.warning("[admin_login] 开发模式：未配置 ADMIN_KEY，允许任意登录") - token = create_jwt_token(expire_hours) - return JSONResponse(content={ - "success": True, - "token": token, - "expires_in": expire_hours * 3600, - "warning": "开发模式 - 未配置 ADMIN_KEY" - }) - if admin_key != ADMIN_KEY: raise HTTPException(status_code=401, detail="Invalid admin key") @@ -147,10 +136,6 @@ async def verify_token(credentials: HTTPAuthorizationCredentials = Depends(secur def verify_admin(credentials: HTTPAuthorizationCredentials = Depends(security)): """验证 Admin 权限（支持 JWT 和直接 admin key）""" - # 开发模式：如果没有配置 ADMIN_KEY，允许所有操作 - if not ADMIN_KEY: - return True - if not credentials: raise HTTPException(status_code=401, detail="Authentication required") diff --git a/routes/home.py b/routes/home.py index 2156406..54191d3 100644 --- a/routes/home.py +++ b/routes/home.py @@ -16,117 +16,255 @@ WELCOME_HTML = """ DS2API - DeepSeek to OpenAI API - + + + +
+
+
+
- -

DeepSeek to OpenAI Compatible API

-
- 🎛️ 管理面板 - 📡 API 端点 - 📦 GitHub +
+ +

DeepSeek to OpenAI & Claude Compatible API Interface

+
+ +
+ + 🎛️ 管理面板 + + + 📡 API 状态 + + + 📦 GitHub +
-
-
-

🚀 OpenAI 兼容

-

完全兼容 OpenAI API 格式

+ +
+
+ 🚀 +

全面兼容

+

完美适配 OpenAI 与 Claude API 格式，无缝集成现有工具。

-
-

🔄 多账号轮询

-

Round-Robin 负载均衡

+
+ ⚖️ +

负载均衡

+

内置智能轮询机制，支持多账号并发，稳定高效。

-
-

🧠 深度思考

-

支持 R1 推理模式

+
+ 🧠 +

深度思考

+

完整支持 DeepSeek-R1 推理过程输出，让思考可见。

-
-

🔍 联网搜索

-

DeepSeek 搜索增强

+
+ 🔍 +

联网搜索

+

集成 DeepSeek 原生搜索能力，获取最新实时资讯。

+ +
+

© 2024 DS2API Project. Designed for flexibility & performance.

+
""" @@ -137,8 +275,8 @@ def index(request: Request): return HTMLResponse(content=WELCOME_HTML) -@router.get("/webui") -@router.get("/webui/{path:path}") +@router.get("/admin") +@router.get("/admin/{path:path}") async def webui(request: Request, path: str = ""): """提供 WebUI 静态文件""" # 检查 static/admin 目录是否存在 diff --git a/webui/package.json b/webui/package.json index 00cec33..124e27b 100644 --- a/webui/package.json +++ b/webui/package.json @@ -13,6 +13,7 @@ "lucide-react": "^0.563.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^7.13.0", "tailwind-merge": "^3.4.0" }, "devDependencies": { diff --git a/webui/src/App.jsx b/webui/src/App.jsx index 57e15a9..38b1cbc 100644 --- a/webui/src/App.jsx +++ b/webui/src/App.jsx @@ -1,4 +1,11 @@ import { useState, useEffect } from 'react' +import { + Routes, + Route, + Navigate, + useNavigate, + useLocation +} from 'react-router-dom' import { LayoutDashboard, Key, @@ -17,6 +24,7 @@ import ApiTester from './components/ApiTester' import BatchImport from './components/BatchImport' import VercelSync from './components/VercelSync' import Login from './components/Login' +import LandingPage from './components/LandingPage' const NAV_ITEMS = [ { id: 'accounts', label: '账号管理', icon: Users, description: '管理 DeepSeek 账号池' }, @@ -25,39 +33,10 @@ const NAV_ITEMS = [ { id: 'vercel', label: 'Vercel 同步', icon: Cloud, description: '同步配置到 Vercel' }, ] -export default function App() { +function Dashboard({ token, onLogout, config, fetchConfig, showMessage, message }) { const [activeTab, setActiveTab] = useState('accounts') - const [config, setConfig] = useState({ keys: [], accounts: [] }) - const [loading, setLoading] = useState(true) - const [message, setMessage] = useState(null) - const [token, setToken] = useState(null) - const [authChecking, setAuthChecking] = useState(true) const [sidebarOpen, setSidebarOpen] = useState(false) - - // 检查已存储的 Token - useEffect(() => { - const checkAuth = async () => { - const storedToken = localStorage.getItem('ds2api_token') || sessionStorage.getItem('ds2api_token') - const expiresAt = parseInt(localStorage.getItem('ds2api_token_expires') || sessionStorage.getItem('ds2api_token_expires') || '0') - - if (storedToken && expiresAt > Date.now()) { - try { - const res = await fetch('/admin/verify', { - headers: { 'Authorization': `Bearer ${storedToken}` } - }) - if (res.ok) { - setToken(storedToken) - } else { - handleLogout() - } - } catch { - setToken(storedToken) - } - } - setAuthChecking(false) - } - checkAuth() - }, []) + const [loading, setLoading] = useState(false) const authFetch = async (url, options = {}) => { const headers = { @@ -67,52 +46,12 @@ export default function App() { const res = await fetch(url, { ...options, headers }) if (res.status === 401) { - handleLogout() + onLogout() throw new Error('认证已过期，请重新登录') } return res } - const fetchConfig = async () => { - if (!token) return - try { - setLoading(true) - const res = await authFetch('/admin/config') - if (res.ok) { - const data = await res.json() - setConfig(data) - } - } catch (e) { - console.error('获取配置失败:', e) - showMessage('error', e.message) - } finally { - setLoading(false) - } - } - - useEffect(() => { - if (token) { - fetchConfig() - } - }, [token]) - - const showMessage = (type, text) => { - setMessage({ type, text }) - setTimeout(() => setMessage(null), 5000) - } - - const handleLogin = (newToken) => { - setToken(newToken) - } - - const handleLogout = () => { - setToken(null) - localStorage.removeItem('ds2api_token') - localStorage.removeItem('ds2api_token_expires') - sessionStorage.removeItem('ds2api_token') - sessionStorage.removeItem('ds2api_token_expires') - } - const renderTab = () => { switch (activeTab) { case 'accounts': @@ -128,43 +67,8 @@ export default function App() { } } - if (authChecking) { - return ( -
-
-
-

正在检查登录状态...

-
-
- ) - } - - if (!token) { - return ( -
- {/* Background decorative elements */} -
-
-
-
- - {message && ( -
- {message.text} -
- )} - -
- ) - } - return (
- {/* Mobile Sidebar Overlay */} {sidebarOpen && (
)} - {/* Sidebar */}
- {/* Main Content */}
- {/* Mobile Header */}
@@ -261,7 +162,6 @@ export default function App() {
- {/* Content Area */}
@@ -285,14 +185,7 @@ export default function App() { )}
- {loading ? ( -
-
-

正在加载数据，请稍候...

-
- ) : ( - renderTab() - )} + {renderTab()}
@@ -300,3 +193,139 @@ export default function App() {
) } + +export default function App() { + const navigate = useNavigate() + const location = useLocation() + const [config, setConfig] = useState({ keys: [], accounts: [] }) + const [loading, setLoading] = useState(true) + const [message, setMessage] = useState(null) + const [token, setToken] = useState(null) + const [authChecking, setAuthChecking] = useState(true) + + const isProduction = import.meta.env.MODE === 'production' + const isAdminRoute = location.pathname.startsWith('/admin') || isProduction + + useEffect(() => { + // 只在 admin 路由时检查登录状态 + if (!isAdminRoute) { + setAuthChecking(false) + return + } + + const checkAuth = async () => { + const storedToken = localStorage.getItem('ds2api_token') || sessionStorage.getItem('ds2api_token') + const expiresAt = parseInt(localStorage.getItem('ds2api_token_expires') || sessionStorage.getItem('ds2api_token_expires') || '0') + + if (storedToken && expiresAt > Date.now()) { + try { + const res = await fetch('/admin/verify', { + headers: { 'Authorization': `Bearer ${storedToken}` } + }) + if (res.ok) { + setToken(storedToken) + } else { + handleLogout() + } + } catch { + setToken(storedToken) + } + } + setAuthChecking(false) + } + checkAuth() + }, [isAdminRoute]) + + const fetchConfig = async () => { + if (!token) return + try { + setLoading(true) + const res = await fetch('/admin/config', { + headers: { 'Authorization': `Bearer ${token}` } + }) + if (res.ok) { + const data = await res.json() + setConfig(data) + } + } catch (e) { + console.error('获取配置失败:', e) + showMessage('error', e.message) + } finally { + setLoading(false) + } + } + + useEffect(() => { + if (token) { + fetchConfig() + } + }, [token]) + + const showMessage = (type, text) => { + setMessage({ type, text }) + setTimeout(() => setMessage(null), 5000) + } + + const handleLogin = (newToken) => { + setToken(newToken) + } + + const handleLogout = () => { + setToken(null) + localStorage.removeItem('ds2api_token') + localStorage.removeItem('ds2api_token_expires') + sessionStorage.removeItem('ds2api_token') + sessionStorage.removeItem('ds2api_token_expires') + } + + // 在 admin 路由时，等待认证检查完成 + if (isAdminRoute && authChecking) { + return ( +
+
+
+

正在检查登录状态...

+
+
+ ) + } + + return ( + + {!isProduction && ( + navigate('/admin')} />} /> + )} + + ) : ( +
+
+
+
+
+ + {message && ( +
+ {message.text} +
+ )} + +
+ ) + } /> + } /> + + ) +} diff --git a/webui/src/components/LandingPage.jsx b/webui/src/components/LandingPage.jsx new file mode 100644 index 0000000..dd1a674 --- /dev/null +++ b/webui/src/components/LandingPage.jsx @@ -0,0 +1,141 @@ +import React from 'react' + +const LandingPage = ({ onEnter }) => { + return ( +
+ {/* Animated Background Elements - using Tailwind with some custom CSS in styles.css if needed, + but for simplicity I will use inline styles to match the backend version precisely */} +