feat: initial commit - Go + CGO captcha recognition service
Features: - Go + CGO ONNX/OpenCV wrapper for high performance - SQLite (default) / MySQL database support - Optional Redis caching - JWT authentication system - Multiple captcha recognition APIs: - OCR text recognition - Slider captcha matching - Image similarity comparison - Rotation captcha detection - Object detection - React frontend with install wizard - Docker and docker-compose support - Gitea CI/CD pipeline Project structure: - cmd/server: Main entry point - internal/: Core business logic - pkg/onnx: ONNX Runtime CGO wrapper - pkg/opencv: OpenCV CGO wrapper - web/: React frontend - deploy/: Deployment configs - scripts/: Utility scripts
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<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>AntiCaptcha - 验证码识别服务</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "anticaptcha-web",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.24.1",
|
||||
"axios": "^1.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.3.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { useState, useEffect } from 'react'
|
||||
import LoginPage from './pages/Login'
|
||||
import RegisterPage from './pages/Register'
|
||||
import HomePage from './pages/Home'
|
||||
import AdminPage from './pages/Admin'
|
||||
import InstallPage from './pages/Install'
|
||||
|
||||
function App() {
|
||||
const [isInstalled, setIsInstalled] = useState<boolean | null>(null)
|
||||
const [token, setToken] = useState<string | null>(localStorage.getItem('token'))
|
||||
|
||||
useEffect(() => {
|
||||
// 检查是否已安装
|
||||
fetch('/api/install/check')
|
||||
.then(res => res.json())
|
||||
.then(data => setIsInstalled(data.installed))
|
||||
.catch(() => setIsInstalled(false))
|
||||
}, [])
|
||||
|
||||
if (isInstalled === null) {
|
||||
return <div className="container text-center">加载中...</div>
|
||||
}
|
||||
|
||||
if (!isInstalled) {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/install" element={<InstallPage onInstall={() => setIsInstalled(true)} />} />
|
||||
<Route path="*" element={<Navigate to="/install" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage onLogin={setToken} />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/" element={token ? <HomePage token={token} /> : <Navigate to="/login" />} />
|
||||
<Route path="/admin" element={token ? <AdminPage token={token} /> : <Navigate to="/login" />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,160 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--border: #334155;
|
||||
--border-hover: #475569;
|
||||
--error: #ef4444;
|
||||
--success: #22c55e;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px 20px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--success);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,101 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
token: string
|
||||
}
|
||||
|
||||
export default function AdminPage({ token }: Props) {
|
||||
const [points, setPoints] = useState(1000)
|
||||
const [codes, setCodes] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const generateCode = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/admin/generate_code', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ points })
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
loadCodes()
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadCodes = async () => {
|
||||
const res = await fetch('/api/admin/regcodes', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
if (res.ok) {
|
||||
setCodes(await res.json())
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1 className="mb-4">管理后台</h1>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">生成注册码</h2>
|
||||
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="form-group" style={{ flex: 1 }}>
|
||||
<label className="label">积分数量</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={points}
|
||||
onChange={e => setPoints(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="button"
|
||||
onClick={generateCode}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '生成中...' : '生成注册码'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">注册码列表</h2>
|
||||
|
||||
{codes.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)' }}>暂无注册码，点击上方按钮生成</p>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>注册码</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>积分</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{codes.map((code: any) => (
|
||||
<tr key={code.id} style={{ borderBottom: '1px solid var(--border)' }}>
|
||||
<td style={{ padding: '12px' }}>{code.code}</td>
|
||||
<td style={{ padding: '12px' }}>{code.points}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{code.is_used ? '已使用' : '未使用'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
interface Props {
|
||||
token: string
|
||||
}
|
||||
|
||||
export default function HomePage({ token }: Props) {
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('token')
|
||||
window.location.href = '/login'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1>AntiCaptcha 控制台</h1>
|
||||
<div className="flex gap-2">
|
||||
<Link to="/admin" className="button button-secondary">管理后台</Link>
|
||||
<button onClick={handleLogout} className="button button-secondary">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">API 使用说明</h2>
|
||||
<p style={{ color: 'var(--text-secondary)', marginBottom: '16px' }}>
|
||||
使用以下接口进行验证码识别，需要在请求头中携带 Authorization: Bearer {token.substring(0, 20)}...
|
||||
</p>
|
||||
|
||||
<div style={{ background: 'var(--bg-tertiary)', padding: '16px', borderRadius: '8px' }}>
|
||||
<code style={{ color: 'var(--text-primary)' }}>
|
||||
POST /api/ocr - OCR 文字识别<br/>
|
||||
POST /api/slider/match - 滑块缺口匹配<br/>
|
||||
POST /api/compare/similarity - 图片相似度对比<br/>
|
||||
POST /api/rotate/single/rotate - 单图旋转验证码<br/>
|
||||
POST /api/detection/icon - 图标检测<br/>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2 className="mb-4">账户信息</h2>
|
||||
<p style={{ color: 'var(--text-secondary)' }}>
|
||||
请联系管理员获取更多信息
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,319 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
onInstall: () => void
|
||||
}
|
||||
|
||||
export default function InstallPage({ onInstall }: Props) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const [config, setConfig] = useState({
|
||||
database: {
|
||||
type: 'sqlite',
|
||||
host: 'localhost',
|
||||
port: 3306,
|
||||
user: 'root',
|
||||
password: '',
|
||||
database: 'anticaptcha',
|
||||
sqlite: { path: './data/app.db' }
|
||||
},
|
||||
redis: {
|
||||
enabled: false,
|
||||
host: 'localhost',
|
||||
port: 6379,
|
||||
password: '',
|
||||
db: 0
|
||||
},
|
||||
admin: {
|
||||
username: 'admin',
|
||||
password: ''
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/install', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(config)
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || '安装失败')
|
||||
return
|
||||
}
|
||||
|
||||
onInstall()
|
||||
window.location.href = '/'
|
||||
} catch {
|
||||
setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ maxWidth: '600px', marginTop: '50px' }}>
|
||||
<div className="card">
|
||||
<h1 style={{ marginBottom: '8px' }}>AntiCaptcha 安装向导</h1>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '32px' }}>
|
||||
步骤 {step} / 3
|
||||
</p>
|
||||
|
||||
{step === 1 && (
|
||||
<>
|
||||
<h2 className="mb-4">数据库配置</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">数据库类型</label>
|
||||
<select
|
||||
className="input"
|
||||
value={config.database.type}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, type: e.target.value }
|
||||
})}
|
||||
>
|
||||
<option value="sqlite">SQLite</option>
|
||||
<option value="mysql">MySQL</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{config.database.type === 'sqlite' ? (
|
||||
<div className="form-group">
|
||||
<label className="label">数据库文件路径</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.sqlite.path}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: {
|
||||
...config.database,
|
||||
sqlite: { path: e.target.value }
|
||||
}
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">主机</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.host}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, host: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">端口</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={config.database.port}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, port: Number(e.target.value) }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.user}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, user: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={config.database.password}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, password: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">数据库名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.database.database}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
database: { ...config.database, database: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button className="button" onClick={() => setStep(2)}>
|
||||
下一步
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<h2 className="mb-4">Redis 配置（可选）</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="flex gap-2 items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={config.redis.enabled}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, enabled: e.target.checked }
|
||||
})}
|
||||
/>
|
||||
启用 Redis
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{config.redis.enabled && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">主机</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.redis.host}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, host: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">端口</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={config.redis.port}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, port: Number(e.target.value) }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={config.redis.password}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, password: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="label">数据库</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={config.redis.db}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
redis: { ...config.redis, db: Number(e.target.value) }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button className="button button-secondary" onClick={() => setStep(1)}>
|
||||
上一步
|
||||
</button>
|
||||
<button className="button" onClick={() => setStep(3)}>
|
||||
下一步
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<>
|
||||
<h2 className="mb-4">管理员账号</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={config.admin.username}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
admin: { ...config.admin, username: e.target.value }
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={config.admin.password}
|
||||
onChange={e => setConfig({
|
||||
...config,
|
||||
admin: { ...config.admin, password: e.target.value }
|
||||
})}
|
||||
placeholder="请输入管理员密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button className="button button-secondary" onClick={() => setStep(2)}>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
className="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '安装中...' : '完成安装'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
onLogin: (token: string) => void
|
||||
}
|
||||
|
||||
export default function LoginPage({ onLogin }: Props) {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || '登录失败')
|
||||
return
|
||||
}
|
||||
|
||||
localStorage.setItem('token', data.access_token)
|
||||
onLogin(data.access_token)
|
||||
} catch {
|
||||
setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ maxWidth: '400px', marginTop: '100px' }}>
|
||||
<div className="card">
|
||||
<h1 style={{ marginBottom: '24px', textAlign: 'center' }}>登录</h1>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<button type="submit" className="button" style={{ width: '100%' }} disabled={loading}>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="text-center mt-4">
|
||||
<a href="/register" style={{ color: 'var(--primary)' }}>没有账号？立即注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [code, setCode] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setSuccess('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password, registration_code: code }),
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error || '注册失败')
|
||||
return
|
||||
}
|
||||
|
||||
setSuccess('注册成功，请登录')
|
||||
setTimeout(() => window.location.href = '/login', 2000)
|
||||
} catch {
|
||||
setError('网络错误')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container" style={{ maxWidth: '400px', marginTop: '100px' }}>
|
||||
<div className="card">
|
||||
<h1 style={{ marginBottom: '24px', textAlign: 'center' }}>注册</h1>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label className="label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">注册码</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={code}
|
||||
onChange={e => setCode(e.target.value)}
|
||||
placeholder="请输入注册码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
{success && <div className="success">{success}</div>}
|
||||
|
||||
<button type="submit" className="button" style={{ width: '100%' }} disabled={loading}>
|
||||
{loading ? '注册中...' : '注册'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="text-center mt-4">
|
||||
<a href="/login" style={{ color: 'var(--primary)' }}>已有账号？立即登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:6688',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user