+
+
+
+
+
+
setMobileOpen(false)} />
+
{sidebar}
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/components/LoginForm.tsx b/frontend/src/components/LoginForm.tsx
new file mode 100644
index 0000000..0259ff4
--- /dev/null
+++ b/frontend/src/components/LoginForm.tsx
@@ -0,0 +1,181 @@
+import { useState } from 'react'
+import { Shield, Lock, AlertCircle, Loader2, UserPlus, LogIn } from 'lucide-react'
+import { api, setToken } from '@/lib/api'
+import { setStoredUser } from '@/lib/auth'
+
+interface LoginFormProps {
+ onSuccess: () => void
+}
+
+export function LoginForm({ onSuccess }: LoginFormProps) {
+ const [mode, setMode] = useState<'login' | 'register'>('login')
+ const [username, setUsername] = useState('')
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [error, setError] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ if (!username.trim() || !password.trim()) {
+ setError('请输入用户名和密码')
+ return
+ }
+ if (mode === 'register' && password.length < 6) {
+ setError('密码长度至少 6 位')
+ return
+ }
+ setLoading(true)
+ try {
+ const res =
+ mode === 'login'
+ ? await api.login({ username: username.trim(), password })
+ : await api.register({
+ username: username.trim(),
+ email: email.trim() || undefined,
+ password,
+ })
+ setToken(res.token)
+ setStoredUser(res.user)
+ onSuccess()
+ } catch (err: any) {
+ setError(err?.message || '操作失败，请稍后重试')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+ {mode === 'login' ? '登录账号' : '注册账号'}
+
+
+ {mode === 'login'
+ ? '请输入用户名和密码进入系统。'
+ : '注册后默认获得用户权限。'}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+// 简单内联 motion 组件，避免引入 framer-motion 依赖
+const motion = {
+ div: ({ children, className, ...props }: any) => {
+ return (
+
{
+ if (el && props.initial) {
+ el.style.opacity = String(props.initial.opacity ?? 1)
+ el.style.transform = `translateY(${props.initial.y ?? 0}px)`
+ requestAnimationFrame(() => {
+ el.style.transition = `all ${props.transition?.duration ?? 0.3}s ${(props.transition?.ease || [0.16, 1, 0.3, 1]).join(',')}`
+ el.style.opacity = String(props.animate?.opacity ?? 1)
+ el.style.transform = `translateY(${props.animate?.y ?? 0}px)`
+ })
+ }
+ }}
+ className={className}
+ >
+ {children}
+
+ )
+ },
+}
diff --git a/frontend/src/components/ThemeProvider.tsx b/frontend/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..d642c7a
--- /dev/null
+++ b/frontend/src/components/ThemeProvider.tsx
@@ -0,0 +1,81 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+export type Theme = 'light' | 'dark' | 'system'
+export type ResolvedTheme = 'light' | 'dark'
+
+interface ThemeContextValue {
+ theme: Theme
+ resolved: ResolvedTheme
+ setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext
(null)
+
+function resolveTheme(theme: Theme): ResolvedTheme {
+ if (theme !== 'system') return theme
+ if (typeof window === 'undefined') return 'dark'
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function updateMetaThemeColor(resolved: ResolvedTheme) {
+ if (typeof document === 'undefined') return
+ const meta = document.querySelector('meta[name="theme-color"]')
+ if (!meta) return
+ meta.setAttribute('content', resolved === 'dark' ? '#0A0A0B' : '#FAFAFA')
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setThemeState] = useState(() => {
+ try {
+ const saved = localStorage.getItem('theme')
+ if (saved === 'light' || saved === 'dark' || saved === 'system') return saved
+ } catch {}
+ return 'system'
+ })
+ const [resolved, setResolved] = useState(() => resolveTheme(theme))
+
+ useEffect(() => {
+ const nextResolved = resolveTheme(theme)
+ setResolved(nextResolved)
+
+ const root = document.documentElement
+ root.classList.remove('light', 'dark')
+ root.classList.add(nextResolved)
+ try {
+ localStorage.setItem('theme', theme)
+ } catch {}
+ updateMetaThemeColor(nextResolved)
+ }, [theme])
+
+ useEffect(() => {
+ if (theme !== 'system') return
+ const media = window.matchMedia('(prefers-color-scheme: dark)')
+ const handler = () => {
+ const nextResolved = resolveTheme('system')
+ setResolved(nextResolved)
+ document.documentElement.classList.remove('light', 'dark')
+ document.documentElement.classList.add(nextResolved)
+ updateMetaThemeColor(nextResolved)
+ }
+ media.addEventListener('change', handler)
+ return () => media.removeEventListener('change', handler)
+ }, [theme])
+
+ const setTheme = (next: Theme) => {
+ setThemeState(next)
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useTheme(): ThemeContextValue {
+ const ctx = useContext(ThemeContext)
+ if (!ctx) {
+ throw new Error('useTheme must be used within ThemeProvider')
+ }
+ return ctx
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..dfb2c24
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,72 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 暗色为默认(html.dark) / 亮色用 :root 反转 */
+:root {
+ --base: 0 0% 98%;
+ --surface: 0 0% 100%;
+ --elevated: 240 5% 96%;
+ --border: 240 6% 90%;
+ --fg-primary: 240 6% 10%;
+ --fg-secondary: 240 4% 35%;
+ --fg-muted: 240 5% 65%;
+ --accent: 217 91% 60%;
+ --bull: 4 87% 60%;
+ --bear: 152 67% 45%;
+ --warning: 32 95% 50%;
+ --danger: 4 87% 60%;
+}
+
+html.dark {
+ --base: 240 5% 5%;
+ --surface: 240 7% 10%;
+ --elevated: 240 9% 14%;
+ --border: 240 5% 22%;
+ --fg-primary: 0 0% 98%;
+ --fg-secondary: 240 5% 78%;
+ --fg-muted: 240 5% 58%;
+ --accent: 217 91% 60%;
+ --bull: 4 87% 60%;
+ --bear: 152 67% 45%;
+ --warning: 32 95% 50%;
+ --danger: 4 87% 60%;
+}
+
+.scrollbar-gutter-stable { scrollbar-gutter: stable; }
+
+* {
+ scrollbar-width: thin;
+ scrollbar-color: hsl(var(--border)) transparent;
+}
+*::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+*::-webkit-scrollbar-track {
+ background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+ background: hsl(var(--border) / 0.72);
+ border: 2px solid transparent;
+ border-radius: 999px;
+ background-clip: content-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+ background: hsl(var(--accent) / 0.75);
+ background-clip: content-box;
+}
+
+.tabular { font-variant-numeric: tabular-nums; }
+.num { font-family: theme('fontFamily.mono'); font-variant-numeric: tabular-nums; }
+
+* { border-color: hsl(var(--border)); }
+
+body {
+ background: hsl(var(--base));
+ color: hsl(var(--fg-primary));
+ font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+ -webkit-font-smoothing: subpixel-antialiased;
+ -moz-osx-font-smoothing: auto;
+ text-rendering: optimizeLegibility;
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..ac792c8
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,119 @@
+const API_BASE = import.meta.env.VITE_API_BASE_URL || ''
+
+export interface ApiResponse {
+ success?: boolean
+ data?: T
+ error?: string
+}
+
+export interface UserInfo {
+ id: string
+ username: string
+ email?: string
+ role: 'system_admin' | 'admin' | 'user' | 'guest'
+ status: string
+ created_at: string
+}
+
+export interface Role {
+ id: number
+ name: 'system_admin' | 'admin' | 'user' | 'guest'
+ description?: string
+ permissions: string[]
+ created_at: string
+}
+
+export interface AuthResponse {
+ token: string
+ user: UserInfo
+}
+
+export function getToken(): string | null {
+ try {
+ return localStorage.getItem('access_token')
+ } catch {
+ return null
+ }
+}
+
+export function setToken(token: string) {
+ localStorage.setItem('access_token', token)
+}
+
+export function removeToken() {
+ localStorage.removeItem('access_token')
+}
+
+async function request(
+ path: string,
+ options: RequestInit = {},
+): Promise {
+ const url = `${API_BASE}${path}`
+ const token = getToken()
+ const headers: Record = {
+ 'Content-Type': 'application/json',
+ ...(options.headers as Record),
+ }
+ if (token) {
+ headers['Authorization'] = `Bearer ${token}`
+ }
+
+ const res = await fetch(url, {
+ ...options,
+ headers,
+ })
+
+ let data: any
+ try {
+ data = await res.json()
+ } catch {
+ data = {}
+ }
+
+ if (!res.ok) {
+ const msg = data.error || data.message || `HTTP ${res.status}`
+ throw new Error(msg)
+ }
+
+ return data as T
+}
+
+export const api = {
+ publicInfo: () =>
+ request<{ message: string; guest_allowed: boolean }>('/api/public'),
+
+ register: (body: { username: string; email?: string; password: string }) =>
+ request('/api/auth/register', {
+ method: 'POST',
+ body: JSON.stringify(body),
+ }),
+
+ login: (body: { username: string; password: string }) =>
+ request('/api/auth/login', {
+ method: 'POST',
+ body: JSON.stringify(body),
+ }),
+
+ me: () => request('/api/auth/me'),
+
+ logout: () => request<{ message: string }>('/api/auth/logout', { method: 'POST' }),
+
+ listUsers: () => request('/api/admin/users'),
+
+ createUser: (body: { username: string; email?: string; password: string; role?: string }) =>
+ request('/api/admin/users', {
+ method: 'POST',
+ body: JSON.stringify(body),
+ }),
+
+ updateUser: (id: string, body: Partial<{ email: string; role: string; status: string }>) =>
+ request(`/api/admin/users/${id}`, {
+ method: 'PUT',
+ body: JSON.stringify(body),
+ }),
+
+ deleteUser: (id: string) =>
+ request<{ message: string }>(`/api/admin/users/${id}`, { method: 'DELETE' }),
+
+ listRoles: () => request('/api/admin/roles'),
+}
diff --git a/frontend/src/lib/auth.ts b/frontend/src/lib/auth.ts
new file mode 100644
index 0000000..03e46da
--- /dev/null
+++ b/frontend/src/lib/auth.ts
@@ -0,0 +1,69 @@
+import { UserInfo } from './api'
+
+export function isAuthenticated(): boolean {
+ try {
+ return !!localStorage.getItem('access_token')
+ } catch {
+ return false
+ }
+}
+
+export function getStoredUser(): UserInfo | null {
+ try {
+ const raw = localStorage.getItem('user')
+ return raw ? (JSON.parse(raw) as UserInfo) : null
+ } catch {
+ return null
+ }
+}
+
+export function setStoredUser(user: UserInfo | null) {
+ if (user) {
+ localStorage.setItem('user', JSON.stringify(user))
+ } else {
+ localStorage.removeItem('user')
+ }
+}
+
+export function clearAuth() {
+ localStorage.removeItem('access_token')
+ localStorage.removeItem('user')
+}
+
+export type RoleName = 'system_admin' | 'admin' | 'user' | 'guest'
+
+const ROLE_RANK: Record = {
+ system_admin: 3,
+ admin: 2,
+ user: 1,
+ guest: 0,
+}
+
+export function roleRank(role: RoleName): number {
+ return ROLE_RANK[role] ?? 0
+}
+
+export function roleLabel(role: RoleName): string {
+ switch (role) {
+ case 'system_admin':
+ return '系统管理员'
+ case 'admin':
+ return '管理员'
+ case 'user':
+ return '用户'
+ case 'guest':
+ return '游客'
+ }
+}
+
+export function canAccess(role: RoleName, allowed: RoleName[]): boolean {
+ return allowed.includes(role)
+}
+
+export function canManageUsers(role: RoleName): boolean {
+ return role === 'admin' || role === 'system_admin'
+}
+
+export function canDeleteUsers(role: RoleName): boolean {
+ return role === 'system_admin'
+}
diff --git a/frontend/src/lib/cn.ts b/frontend/src/lib/cn.ts
new file mode 100644
index 0000000..abba253
--- /dev/null
+++ b/frontend/src/lib/cn.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..57accb9
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router'
+import { ThemeProvider } from './components/ThemeProvider'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+)
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..3782de2
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+import { LayoutDashboard, Globe, ShieldCheck } from 'lucide-react'
+import { api } from '@/lib/api'
+import { getStoredUser, roleLabel } from '@/lib/auth'
+
+export function Dashboard() {
+ const [publicInfo, setPublicInfo] = useState<{ message: string } | null>(null)
+ const user = getStoredUser()
+
+ useEffect(() => {
+ api.publicInfo().then(setPublicInfo).catch(() => null)
+ }, [])
+
+ return (
+
+
+
+
+
+
+
看板
+
欢迎回来，{user?.username || '游客'}
+
+
+
+
+ }
+ title="当前身份"
+ value={user ? roleLabel(user.role) : '游客'}
+ desc={user ? `用户：${user.username}` : '未登录，仅可查看公开信息'}
+ />
+ }
+ title="公开信息"
+ value="已接入"
+ desc={publicInfo?.message || '加载中…'}
+ />
+
+
+
+
权限说明
+
+ - 系统管理员：可管理管理员、用户、系统配置
+ - 管理员：可管理普通用户
+ - 用户：可访问业务功能、修改个人资料
+ - 游客：仅查看公开内容，不可操作
+
+
+
+
+ {icon}
+ {title}
+
+
{value}
+
{desc}
+
+
+
+
+
+
+ navigate('/', { replace: true })} />
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {error && (
+
+ )}
+
+
+
+ 用户名
+ {user?.username}
+
+
+ 角色
+ {user ? roleLabel(user.role) : '-'}
+
+
+ 邮箱
+ {user?.email || '未设置'}
+
+
+ 状态
+ {user?.status === 'active' ? '启用' : '禁用'}
+
+
+ 注册时间
+ {user ? new Date(user.created_at).toLocaleString() : '-'}
+
+
+
+
+
关于
+
+ 本系统为 A 股复盘工具的用户权限管理模块。不同角色拥有不同的操作权限，系统管理员可在「用户管理」中分配角色。
+
+
+
+
+
+
+
+
+ {error && (
+
+ )}
+
+ {formOpen && (
+
+ )}
+
+
+
+
+
+ | 用户名 |
+ 角色 |
+ 状态 |
+ 创建时间 |
+ 操作 |
+
+
+
+ {loading ? (
+
+ |
+
+ |
+
+ ) : users.length === 0 ? (
+
+ | 暂无用户 |
+
+ ) : (
+ users.map((u) => (
+
+ | {u.username} |
+
+
+ {roleLabel(u.role)}
+
+ |
+
+
+ |
+
+ {new Date(u.created_at).toLocaleString()}
+ |
+
+ {canDeleteUsers(currentUser?.role || 'user') && u.id !== currentUser?.id && (
+
+ )}
+ |
+
+ ))
+ )}
+
+
+
+