34 changed files with 6061 additions and 1 deletions
@ -0,0 +1,24 @@ |
|||||
|
# 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? |
||||
@ -0,0 +1,73 @@ |
|||||
|
# 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 [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
||||
|
|
||||
|
## 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... |
||||
|
}, |
||||
|
}, |
||||
|
]) |
||||
|
``` |
||||
@ -0,0 +1,23 @@ |
|||||
|
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, |
||||
|
}, |
||||
|
}, |
||||
|
]) |
||||
@ -0,0 +1,17 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="zh-CN" class="dark"> |
||||
|
<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>Base Admin Panel</title> |
||||
|
<!-- Google Fonts --> |
||||
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
||||
|
</head> |
||||
|
<body class="bg-gray-950 text-gray-100 antialiased"> |
||||
|
<div id="root"></div> |
||||
|
<script type="module" src="/src/main.tsx"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,40 @@ |
|||||
|
{ |
||||
|
"name": "pc", |
||||
|
"private": true, |
||||
|
"version": "0.0.0", |
||||
|
"type": "module", |
||||
|
"scripts": { |
||||
|
"dev": "vite", |
||||
|
"build": "tsc -b && vite build", |
||||
|
"lint": "eslint .", |
||||
|
"preview": "vite preview" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"class-variance-authority": "^0.7.1", |
||||
|
"clsx": "^2.1.1", |
||||
|
"lucide-react": "^0.563.0", |
||||
|
"react": "^19.2.0", |
||||
|
"react-dom": "^19.2.0", |
||||
|
"react-router-dom": "^7.13.0", |
||||
|
"tailwind-merge": "^3.4.0", |
||||
|
"tailwindcss-animate": "^1.0.7" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@eslint/js": "^9.39.1", |
||||
|
"@tailwindcss/postcss": "^4.1.18", |
||||
|
"@types/node": "^24.10.12", |
||||
|
"@types/react": "^19.2.7", |
||||
|
"@types/react-dom": "^19.2.3", |
||||
|
"@vitejs/plugin-react": "^5.1.1", |
||||
|
"autoprefixer": "^10.4.24", |
||||
|
"eslint": "^9.39.1", |
||||
|
"eslint-plugin-react-hooks": "^7.0.1", |
||||
|
"eslint-plugin-react-refresh": "^0.4.24", |
||||
|
"globals": "^16.5.0", |
||||
|
"postcss": "^8.5.6", |
||||
|
"tailwindcss": "^4.1.18", |
||||
|
"typescript": "~5.9.3", |
||||
|
"typescript-eslint": "^8.48.0", |
||||
|
"vite": "^7.3.1" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
export default { |
||||
|
plugins: { |
||||
|
'@tailwindcss/postcss': {}, |
||||
|
autoprefixer: {}, |
||||
|
}, |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,35 @@ |
|||||
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' |
||||
|
import { AuthProvider } from './contexts/AuthContext' |
||||
|
import { ProtectedRoute } from './components/layout/ProtectedRoute' |
||||
|
import { MainLayout } from './components/layout/MainLayout' |
||||
|
import { LoginPage } from './pages/LoginPage' |
||||
|
import { DashboardPage } from './pages/DashboardPage' |
||||
|
import { UserManagementPage } from './pages/UserManagementPage' |
||||
|
import { SettingsPage } from './pages/SettingsPage' |
||||
|
|
||||
|
function App() { |
||||
|
return ( |
||||
|
<AuthProvider> |
||||
|
<BrowserRouter> |
||||
|
<Routes> |
||||
|
<Route path="/login" element={<LoginPage />} /> |
||||
|
<Route |
||||
|
path="/" |
||||
|
element={ |
||||
|
<ProtectedRoute> |
||||
|
<MainLayout /> |
||||
|
</ProtectedRoute> |
||||
|
} |
||||
|
> |
||||
|
<Route index element={<Navigate to="/dashboard" replace />} /> |
||||
|
<Route path="dashboard" element={<DashboardPage />} /> |
||||
|
<Route path="users" element={<UserManagementPage />} /> |
||||
|
<Route path="settings" element={<SettingsPage />} /> |
||||
|
</Route> |
||||
|
</Routes> |
||||
|
</BrowserRouter> |
||||
|
</AuthProvider> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default App |
||||
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,23 @@ |
|||||
|
interface HeaderProps { |
||||
|
title: string |
||||
|
subtitle?: string |
||||
|
} |
||||
|
|
||||
|
export function Header({ title, subtitle }: HeaderProps) { |
||||
|
return ( |
||||
|
<header className="h-16 border-b border-gray-800 bg-gray-900/50 backdrop-blur-xl flex items-center px-6 fixed top-0 left-64 right-0 z-30"> |
||||
|
<div className="flex-1"> |
||||
|
<h1 className="text-xl font-bold text-white font-display">{title}</h1> |
||||
|
{subtitle && ( |
||||
|
<p className="text-xs text-gray-500 font-body mt-0.5">{subtitle}</p> |
||||
|
)} |
||||
|
</div> |
||||
|
|
||||
|
{/* Decorative elements */} |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" /> |
||||
|
<span className="text-xs text-gray-500 font-body">系统正常</span> |
||||
|
</div> |
||||
|
</header> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
import { Outlet } from 'react-router-dom' |
||||
|
import { Sidebar } from './Sidebar' |
||||
|
import { Header } from './Header' |
||||
|
|
||||
|
const pageTitles: Record<string, { title: string; subtitle?: string }> = { |
||||
|
'/dashboard': { title: '仪表盘', subtitle: '系统概览与数据统计' }, |
||||
|
'/users': { title: '用户管理', subtitle: '管理系统用户账号' }, |
||||
|
'/settings': { title: '系统设置', subtitle: '配置系统参数' }, |
||||
|
} |
||||
|
|
||||
|
export function MainLayout() { |
||||
|
const pathname = window.location.pathname |
||||
|
const pageInfo = pageTitles[pathname] || { title: 'BASE', subtitle: '' } |
||||
|
|
||||
|
return ( |
||||
|
<div className="min-h-screen bg-gray-950"> |
||||
|
<Sidebar /> |
||||
|
<div className="ml-64"> |
||||
|
<Header title={pageInfo.title} subtitle={pageInfo.subtitle} /> |
||||
|
<main className="p-6 pt-24"> |
||||
|
<Outlet /> |
||||
|
</main> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
import { Navigate } from 'react-router-dom' |
||||
|
import { useAuth } from '@/contexts/AuthContext' |
||||
|
|
||||
|
export function ProtectedRoute({ children }: { children: React.ReactNode }) { |
||||
|
const { isAuthenticated, isLoading } = useAuth() |
||||
|
|
||||
|
if (isLoading) { |
||||
|
return ( |
||||
|
<div className="min-h-screen flex items-center justify-center"> |
||||
|
<div className="animate-spin rounded-full h-12 w-12 border-2 border-sky-500 border-t-transparent" /> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
if (!isAuthenticated) { |
||||
|
return <Navigate to="/login" replace /> |
||||
|
} |
||||
|
|
||||
|
return <>{children}</> |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
import { NavLink } from 'react-router-dom' |
||||
|
import { LayoutDashboard, Users, LogOut, Settings } from 'lucide-react' |
||||
|
import { useAuth } from '@/contexts/AuthContext' |
||||
|
|
||||
|
const navItems = [ |
||||
|
{ path: '/dashboard', icon: LayoutDashboard, label: '首页' }, |
||||
|
{ path: '/users', icon: Users, label: '用户管理' }, |
||||
|
{ path: '/settings', icon: Settings, label: '设置' }, |
||||
|
] |
||||
|
|
||||
|
export function Sidebar() { |
||||
|
const { user, logout } = useAuth() |
||||
|
|
||||
|
return ( |
||||
|
<aside className="w-64 h-screen bg-gray-900/80 backdrop-blur-xl border-r border-gray-800 flex flex-col fixed left-0 top-0 z-40"> |
||||
|
{/* Logo */} |
||||
|
<div className="p-6 border-b border-gray-800"> |
||||
|
<div className="flex items-center gap-3"> |
||||
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-sky-500 to-blue-600 flex items-center justify-center glow-primary"> |
||||
|
<span className="text-xl font-bold text-white font-display">B</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<h1 className="text-lg font-bold text-white font-display">BASE</h1> |
||||
|
<p className="text-xs text-gray-500 font-body">管理面板</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Navigation */} |
||||
|
<nav className="flex-1 p-4 space-y-1"> |
||||
|
{navItems.map((item) => ( |
||||
|
<NavLink |
||||
|
key={item.path} |
||||
|
to={item.path} |
||||
|
className={({ isActive }) => |
||||
|
cn( |
||||
|
'flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200', |
||||
|
'font-body text-sm font-medium', |
||||
|
isActive |
||||
|
? 'bg-gradient-to-r from-sky-500/20 to-blue-600/20 text-sky-400 border border-sky-500/30' |
||||
|
: 'text-gray-400 hover:bg-gray-800/50 hover:text-gray-200' |
||||
|
) |
||||
|
} |
||||
|
> |
||||
|
<item.icon className="h-5 w-5" /> |
||||
|
{item.label} |
||||
|
</NavLink> |
||||
|
))} |
||||
|
</nav> |
||||
|
|
||||
|
{/* User Info */} |
||||
|
<div className="p-4 border-t border-gray-800"> |
||||
|
<div className="flex items-center gap-3 p-3 rounded-lg bg-gray-800/50"> |
||||
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center"> |
||||
|
<span className="text-lg font-bold text-white font-display"> |
||||
|
{user?.username?.[0]?.toUpperCase() || 'U'} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="flex-1 min-w-0"> |
||||
|
<p className="text-sm font-medium text-white font-body truncate"> |
||||
|
{user?.username || 'User'} |
||||
|
</p> |
||||
|
<p className="text-xs text-gray-500 font-body truncate"> |
||||
|
{user?.email || ''} |
||||
|
</p> |
||||
|
</div> |
||||
|
<button |
||||
|
onClick={logout} |
||||
|
className="p-2 text-gray-500 hover:text-red-400 transition-colors" |
||||
|
title="退出登录" |
||||
|
> |
||||
|
<LogOut className="h-4 w-4" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</aside> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function cn(...classes: (string | undefined | false | null)[]) { |
||||
|
return classes.filter(Boolean).join(' ') |
||||
|
} |
||||
@ -0,0 +1,74 @@ |
|||||
|
import { forwardRef, type ButtonHTMLAttributes } from 'react' |
||||
|
import { cn } from '@/lib/utils' |
||||
|
|
||||
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { |
||||
|
variant?: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline' |
||||
|
size?: 'sm' | 'md' | 'lg' |
||||
|
isLoading?: boolean |
||||
|
} |
||||
|
|
||||
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>( |
||||
|
({ className, variant = 'primary', size = 'md', isLoading, disabled, children, ...props }, ref) => { |
||||
|
const variants = { |
||||
|
primary: |
||||
|
'bg-gradient-to-r from-sky-500 to-blue-600 text-white hover:from-sky-400 hover:to-blue-500 glow-primary border-sky-500/50', |
||||
|
secondary: |
||||
|
'bg-gray-800/80 text-gray-200 hover:bg-gray-700/80 border-gray-700/50', |
||||
|
destructive: |
||||
|
'bg-gradient-to-r from-red-600 to-rose-600 text-white hover:from-red-500 hover:to-rose-500 border-red-500/50', |
||||
|
ghost: 'bg-transparent text-gray-300 hover:bg-gray-800/50 border-transparent', |
||||
|
outline: 'bg-transparent text-gray-200 hover:bg-gray-800/50 border-gray-700', |
||||
|
} |
||||
|
|
||||
|
const sizes = { |
||||
|
sm: 'px-3 py-1.5 text-sm', |
||||
|
md: 'px-4 py-2 text-base', |
||||
|
lg: 'px-6 py-3 text-lg', |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<button |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
'relative inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-all duration-200', |
||||
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950', |
||||
|
'disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed', |
||||
|
'tech-border', |
||||
|
variants[variant], |
||||
|
sizes[size], |
||||
|
className |
||||
|
)} |
||||
|
disabled={disabled || isLoading} |
||||
|
{...props} |
||||
|
> |
||||
|
{isLoading && ( |
||||
|
<svg |
||||
|
className="animate-spin h-4 w-4" |
||||
|
xmlns="http://www.w3.org/2000/svg" |
||||
|
fill="none" |
||||
|
viewBox="0 0 24 24" |
||||
|
> |
||||
|
<circle |
||||
|
className="opacity-25" |
||||
|
cx="12" |
||||
|
cy="12" |
||||
|
r="10" |
||||
|
stroke="currentColor" |
||||
|
strokeWidth="4" |
||||
|
/> |
||||
|
<path |
||||
|
className="opacity-75" |
||||
|
fill="currentColor" |
||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" |
||||
|
/> |
||||
|
</svg> |
||||
|
)} |
||||
|
{children} |
||||
|
</button> |
||||
|
) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
Button.displayName = 'Button' |
||||
|
|
||||
|
export { Button } |
||||
@ -0,0 +1,80 @@ |
|||||
|
import { forwardRef, type HTMLAttributes } from 'react' |
||||
|
import { cn } from '@/lib/utils' |
||||
|
|
||||
|
const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
|
({ className, children, ...props }, ref) => ( |
||||
|
<div |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
'rounded-xl border bg-gray-900/80 backdrop-blur-sm tech-border', |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
> |
||||
|
{children} |
||||
|
</div> |
||||
|
) |
||||
|
) |
||||
|
|
||||
|
Card.displayName = 'Card' |
||||
|
|
||||
|
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
|
({ className, ...props }, ref) => ( |
||||
|
<div |
||||
|
ref={ref} |
||||
|
className={cn('flex flex-col space-y-1.5 p-6', className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
) |
||||
|
|
||||
|
CardHeader.displayName = 'CardHeader' |
||||
|
|
||||
|
const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>( |
||||
|
({ className, ...props }, ref) => ( |
||||
|
<h3 |
||||
|
ref={ref} |
||||
|
className={cn( |
||||
|
'text-2xl font-bold leading-none tracking-tight font-display text-white', |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
) |
||||
|
|
||||
|
CardTitle.displayName = 'CardTitle' |
||||
|
|
||||
|
const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>( |
||||
|
({ className, ...props }, ref) => ( |
||||
|
<p |
||||
|
ref={ref} |
||||
|
className={cn('text-sm text-gray-400 font-body', className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
) |
||||
|
|
||||
|
CardDescription.displayName = 'CardDescription' |
||||
|
|
||||
|
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
|
({ className, ...props }, ref) => ( |
||||
|
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} /> |
||||
|
) |
||||
|
) |
||||
|
|
||||
|
CardContent.displayName = 'CardContent' |
||||
|
|
||||
|
const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
||||
|
({ className, ...props }, ref) => ( |
||||
|
<div |
||||
|
ref={ref} |
||||
|
className={cn('flex items-center p-6 pt-0', className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
) |
||||
|
|
||||
|
CardFooter.displayName = 'CardFooter' |
||||
|
|
||||
|
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } |
||||
@ -0,0 +1,65 @@ |
|||||
|
import { forwardRef, type InputHTMLAttributes } from 'react' |
||||
|
import { cn } from '@/lib/utils' |
||||
|
|
||||
|
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> { |
||||
|
label?: string |
||||
|
error?: string |
||||
|
leftIcon?: React.ReactNode |
||||
|
rightIcon?: React.ReactNode |
||||
|
} |
||||
|
|
||||
|
const Input = forwardRef<HTMLInputElement, InputProps>( |
||||
|
({ className, label, error, leftIcon, rightIcon, type = 'text', id, ...props }, ref) => { |
||||
|
const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}` |
||||
|
|
||||
|
return ( |
||||
|
<div className="w-full space-y-1"> |
||||
|
{label && ( |
||||
|
<label |
||||
|
htmlFor={inputId} |
||||
|
className="block text-sm font-medium text-gray-300 font-body" |
||||
|
> |
||||
|
{label} |
||||
|
</label> |
||||
|
)} |
||||
|
<div className="relative"> |
||||
|
{leftIcon && ( |
||||
|
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"> |
||||
|
{leftIcon} |
||||
|
</div> |
||||
|
)} |
||||
|
<input |
||||
|
ref={ref} |
||||
|
type={type} |
||||
|
id={inputId} |
||||
|
className={cn( |
||||
|
'flex h-11 w-full rounded-lg border bg-gray-900/80 px-4 py-2.5 text-sm text-gray-100', |
||||
|
'placeholder:text-gray-500', |
||||
|
'transition-all duration-200', |
||||
|
'focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/50', |
||||
|
'disabled:cursor-not-allowed disabled:opacity-50', |
||||
|
'tech-border', |
||||
|
leftIcon && 'pl-10', |
||||
|
rightIcon && 'pr-10', |
||||
|
error && 'border-red-500/50 focus:ring-red-500/50 focus:border-red-500/50', |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
{rightIcon && ( |
||||
|
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"> |
||||
|
{rightIcon} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
{error && ( |
||||
|
<p className="text-xs text-red-400 font-body">{error}</p> |
||||
|
)} |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
Input.displayName = 'Input' |
||||
|
|
||||
|
export { Input } |
||||
@ -0,0 +1,83 @@ |
|||||
|
import { useEffect, type ReactNode } from 'react' |
||||
|
import { X } from 'lucide-react' |
||||
|
import { cn } from '@/lib/utils' |
||||
|
import { Button } from './Button' |
||||
|
|
||||
|
interface ModalProps { |
||||
|
isOpen: boolean |
||||
|
onClose: () => void |
||||
|
title?: string |
||||
|
children: ReactNode |
||||
|
footer?: ReactNode |
||||
|
size?: 'sm' | 'md' | 'lg' | 'xl' |
||||
|
} |
||||
|
|
||||
|
export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }: ModalProps) { |
||||
|
useEffect(() => { |
||||
|
if (isOpen) { |
||||
|
document.body.style.overflow = 'hidden' |
||||
|
} else { |
||||
|
document.body.style.overflow = '' |
||||
|
} |
||||
|
return () => { |
||||
|
document.body.style.overflow = '' |
||||
|
} |
||||
|
}, [isOpen]) |
||||
|
|
||||
|
if (!isOpen) return null |
||||
|
|
||||
|
const sizes = { |
||||
|
sm: 'max-w-md', |
||||
|
md: 'max-w-lg', |
||||
|
lg: 'max-w-2xl', |
||||
|
xl: 'max-w-4xl', |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center"> |
||||
|
{/* Backdrop */} |
||||
|
<div |
||||
|
className="absolute inset-0 bg-black/70 backdrop-blur-sm" |
||||
|
onClick={onClose} |
||||
|
/> |
||||
|
|
||||
|
{/* Modal */} |
||||
|
<div |
||||
|
className={cn( |
||||
|
'relative w-full bg-gray-900/95 backdrop-blur-xl rounded-xl border border-gray-800 shadow-2xl tech-border animate-scale-in', |
||||
|
sizes[size] |
||||
|
)} |
||||
|
onClick={(e) => e.stopPropagation()} |
||||
|
> |
||||
|
{/* Header */} |
||||
|
{title && ( |
||||
|
<div className="flex items-center justify-between p-6 border-b border-gray-800"> |
||||
|
<h2 className="text-xl font-bold text-white font-display">{title}</h2> |
||||
|
{onClose && ( |
||||
|
<Button |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={onClose} |
||||
|
className="h-8 w-8 p-0" |
||||
|
> |
||||
|
<X className="h-4 w-4" /> |
||||
|
</Button> |
||||
|
)} |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* Content */} |
||||
|
<div className="p-6 max-h-[70vh] overflow-y-auto"> |
||||
|
{children} |
||||
|
</div> |
||||
|
|
||||
|
{/* Footer */} |
||||
|
{footer && ( |
||||
|
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-800"> |
||||
|
{footer} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
import { cn } from '@/lib/utils' |
||||
|
|
||||
|
export const Table = ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => ( |
||||
|
<div className="relative w-full overflow-auto"> |
||||
|
<table className={cn('w-full caption-bottom text-sm', className)} {...props} /> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
export const TableHeader = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => ( |
||||
|
<thead className={cn('[&_tr]:border-b', className)} {...props} /> |
||||
|
) |
||||
|
|
||||
|
export const TableBody = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => ( |
||||
|
<tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} /> |
||||
|
) |
||||
|
|
||||
|
export const TableFooter = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => ( |
||||
|
<tfoot |
||||
|
className={cn('border-t bg-gray-900/50 font-medium text-gray-400 font-body', className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
|
||||
|
export const TableRow = ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => ( |
||||
|
<tr |
||||
|
className={cn( |
||||
|
'border-b border-gray-800 transition-colors hover:bg-gray-800/30 data-[state=selected]:bg-gray-800/50', |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
|
||||
|
export const TableHead = ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => ( |
||||
|
<th |
||||
|
className={cn( |
||||
|
'h-12 px-4 text-left align-middle font-medium text-gray-400 font-display uppercase tracking-wider text-xs [&:has([role=checkbox])]:pr-0', |
||||
|
className |
||||
|
)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
|
||||
|
export const TableCell = ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => ( |
||||
|
<td |
||||
|
className={cn('p-4 align-middle text-gray-300 font-body', className)} |
||||
|
{...props} |
||||
|
/> |
||||
|
) |
||||
|
|
||||
|
export const TableCaption = ({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => ( |
||||
|
<caption className={cn('mt-4 text-sm text-gray-500 font-body', className)} {...props} /> |
||||
|
) |
||||
@ -0,0 +1,88 @@ |
|||||
|
import { createContext, useContext, useState, useEffect, type ReactNode } from 'react' |
||||
|
import type { User } from '@/types' |
||||
|
import { apiClient } from '@/services/api' |
||||
|
|
||||
|
interface AuthContextType { |
||||
|
user: User | null |
||||
|
token: string | null |
||||
|
isAuthenticated: boolean |
||||
|
isLoading: boolean |
||||
|
login: (email: string, password: string) => Promise<void> |
||||
|
logout: () => void |
||||
|
} |
||||
|
|
||||
|
const AuthContext = createContext<AuthContextType | undefined>(undefined) |
||||
|
|
||||
|
export function AuthProvider({ children }: { children: ReactNode }) { |
||||
|
const [user, setUser] = useState<User | null>(null) |
||||
|
const [token, setToken] = useState<string | null>(null) |
||||
|
const [isLoading, setIsLoading] = useState(true) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
const storedToken = localStorage.getItem('token') |
||||
|
const storedUser = localStorage.getItem('user') |
||||
|
|
||||
|
if (storedToken) { |
||||
|
setToken(storedToken) |
||||
|
} |
||||
|
|
||||
|
if (storedUser) { |
||||
|
try { |
||||
|
setUser(JSON.parse(storedUser)) |
||||
|
} catch { |
||||
|
localStorage.removeItem('user') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
setIsLoading(false) |
||||
|
}, []) |
||||
|
|
||||
|
const login = async (email: string, password: string) => { |
||||
|
try { |
||||
|
const response = await apiClient.login({ email, password }) |
||||
|
|
||||
|
if (response.success && response.token) { |
||||
|
setToken(response.token) |
||||
|
|
||||
|
// Mock user data - in real app, fetch from API
|
||||
|
const userData: User = { |
||||
|
id: 1, |
||||
|
username: email.split('@')[0], |
||||
|
email, |
||||
|
createdAt: new Date().toISOString(), |
||||
|
updatedAt: new Date().toISOString(), |
||||
|
} |
||||
|
setUser(userData) |
||||
|
localStorage.setItem('user', JSON.stringify(userData)) |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const logout = () => { |
||||
|
apiClient.logout() |
||||
|
setToken(null) |
||||
|
setUser(null) |
||||
|
localStorage.removeItem('user') |
||||
|
} |
||||
|
|
||||
|
const value: AuthContextType = { |
||||
|
user, |
||||
|
token, |
||||
|
isAuthenticated: !!token, |
||||
|
isLoading, |
||||
|
login, |
||||
|
logout, |
||||
|
} |
||||
|
|
||||
|
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider> |
||||
|
} |
||||
|
|
||||
|
export function useAuth() { |
||||
|
const context = useContext(AuthContext) |
||||
|
if (context === undefined) { |
||||
|
throw new Error('useAuth must be used within an AuthProvider') |
||||
|
} |
||||
|
return context |
||||
|
} |
||||
@ -0,0 +1,183 @@ |
|||||
|
@import "tailwindcss"; |
||||
|
|
||||
|
@theme { |
||||
|
--color-background: oklch(0.15 0 0); |
||||
|
--color-foreground: oklch(0.98 0.005 240); |
||||
|
--color-card: oklch(0.15 0 0); |
||||
|
--color-card-foreground: oklch(0.98 0.005 240); |
||||
|
--color-popover: oklch(0.15 0 0); |
||||
|
--color-popover-foreground: oklch(0.98 0.005 240); |
||||
|
--color-primary: oklch(0.65 0.2 240); |
||||
|
--color-primary-foreground: oklch(0.98 0.005 240); |
||||
|
--color-secondary: oklch(0.20 0.03 240); |
||||
|
--color-secondary-foreground: oklch(0.98 0.005 240); |
||||
|
--color-muted: oklch(0.20 0.03 240); |
||||
|
--color-muted-foreground: oklch(0.60 0.02 240); |
||||
|
--color-accent: oklch(0.20 0.03 240); |
||||
|
--color-accent-foreground: oklch(0.98 0.005 240); |
||||
|
--color-destructive: oklch(0.55 0.22 25); |
||||
|
--color-destructive-foreground: oklch(0.98 0.005 240); |
||||
|
--color-border: oklch(0.22 0.03 240); |
||||
|
--color-input: oklch(0.22 0.03 240); |
||||
|
--color-ring: oklch(0.65 0.2 240); |
||||
|
--radius: 0.5rem; |
||||
|
|
||||
|
--font-display: 'Oswald', sans-serif; |
||||
|
--font-body: 'Space Grotesk', sans-serif; |
||||
|
|
||||
|
--animate-accordion-down: accordion-down 0.2s ease-out; |
||||
|
--animate-accordion-up: accordion-up 0.2s ease-out; |
||||
|
--animate-slide-in-left: slide-in-left 0.4s ease-out; |
||||
|
--animate-slide-in-right: slide-in-right 0.4s ease-out; |
||||
|
--animate-fade-in: fade-in 0.3s ease-out; |
||||
|
--animate-scale-in: scale-in 0.2s ease-out; |
||||
|
|
||||
|
@keyframes accordion-down { |
||||
|
from { height: 0; } |
||||
|
to { height: var(--radix-accordion-content-height); } |
||||
|
} |
||||
|
|
||||
|
@keyframes accordion-up { |
||||
|
from { height: var(--radix-accordion-content-height); } |
||||
|
to { height: 0; } |
||||
|
} |
||||
|
|
||||
|
@keyframes slide-in-left { |
||||
|
from { transform: translateX(-100%); opacity: 0; } |
||||
|
to { transform: translateX(0); opacity: 1; } |
||||
|
} |
||||
|
|
||||
|
@keyframes slide-in-right { |
||||
|
from { transform: translateX(100%); opacity: 0; } |
||||
|
to { transform: translateX(0); opacity: 1; } |
||||
|
} |
||||
|
|
||||
|
@keyframes fade-in { |
||||
|
from { opacity: 0; } |
||||
|
to { opacity: 1; } |
||||
|
} |
||||
|
|
||||
|
@keyframes scale-in { |
||||
|
from { transform: scale(0.95); opacity: 0; } |
||||
|
to { transform: scale(1); opacity: 1; } |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
background-color: oklch(0.10 0.01 240); |
||||
|
color: oklch(0.98 0.005 240); |
||||
|
font-family: var(--font-body); |
||||
|
background-image: |
||||
|
radial-gradient(circle at 15% 50%, rgba(30, 58, 138, 0.15) 0%, transparent 25%), |
||||
|
radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 25%), |
||||
|
linear-gradient(rgba(15, 23, 42, 0.95) 1px, transparent 1px), |
||||
|
linear-gradient(90deg, rgba(15, 23, 42, 0.95) 1px, transparent 1px); |
||||
|
background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; |
||||
|
} |
||||
|
|
||||
|
/* Custom scrollbar */ |
||||
|
::-webkit-scrollbar { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-track { |
||||
|
background-color: oklch(0.15 0.01 240); |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb { |
||||
|
background-color: oklch(0.30 0.02 240); |
||||
|
border-radius: 0.125rem; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb:hover { |
||||
|
background-color: oklch(0.35 0.02 240); |
||||
|
} |
||||
|
|
||||
|
/* Typography utilities */ |
||||
|
.font-display { |
||||
|
font-family: var(--font-display); |
||||
|
} |
||||
|
|
||||
|
.font-body { |
||||
|
font-family: var(--font-body); |
||||
|
} |
||||
|
|
||||
|
/* Industrial grid pattern */ |
||||
|
.grid-pattern { |
||||
|
background-image: |
||||
|
linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), |
||||
|
linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); |
||||
|
background-size: 60px 60px; |
||||
|
} |
||||
|
|
||||
|
/* Glowing effects */ |
||||
|
.glow-primary { |
||||
|
box-shadow: 0 0 20px rgba(56, 189, 248, 0.3), 0 0 40px rgba(56, 189, 248, 0.1); |
||||
|
} |
||||
|
|
||||
|
.glow-accent { |
||||
|
box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* Diagonal stripe pattern */ |
||||
|
.stripe-pattern { |
||||
|
background: repeating-linear-gradient( |
||||
|
45deg, |
||||
|
transparent, |
||||
|
transparent 10px, |
||||
|
rgba(56, 189, 248, 0.02) 10px, |
||||
|
rgba(56, 189, 248, 0.02) 20px |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/* Tech border effect */ |
||||
|
.tech-border { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tech-border::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
border: 1px solid transparent; |
||||
|
background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(168, 85, 247, 0.5), rgba(56, 189, 248, 0.5)) border-box; |
||||
|
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); |
||||
|
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); |
||||
|
-webkit-mask-composite: xor; |
||||
|
mask-composite: exclude; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
/* Scanline effect */ |
||||
|
.scanline { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.scanline::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
background: linear-gradient( |
||||
|
to bottom, |
||||
|
transparent 50%, |
||||
|
rgba(0, 0, 0, 0.02) 51% |
||||
|
); |
||||
|
background-size: 100% 4px; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
/* Noise texture overlay */ |
||||
|
.noise-overlay { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.noise-overlay::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
inset: 0; |
||||
|
opacity: 0.03; |
||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); |
||||
|
pointer-events: none; |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
import { type ClassValue, clsx } from "clsx" |
||||
|
import { twMerge } from "tailwind-merge" |
||||
|
|
||||
|
export function cn(...inputs: ClassValue[]) { |
||||
|
return twMerge(clsx(inputs)) |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { StrictMode } from 'react' |
||||
|
import { createRoot } from 'react-dom/client' |
||||
|
import './index.css' |
||||
|
import App from './App.tsx' |
||||
|
|
||||
|
createRoot(document.getElementById('root')!).render( |
||||
|
<StrictMode> |
||||
|
<App /> |
||||
|
</StrictMode>, |
||||
|
) |
||||
@ -0,0 +1,165 @@ |
|||||
|
import { Users, Zap, Activity, Database } from 'lucide-react' |
||||
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card' |
||||
|
|
||||
|
const stats = [ |
||||
|
{ |
||||
|
title: '总用户数', |
||||
|
value: '1,234', |
||||
|
change: '+12%', |
||||
|
icon: Users, |
||||
|
color: 'from-sky-500 to-blue-600', |
||||
|
}, |
||||
|
{ |
||||
|
title: '活跃用户', |
||||
|
value: '856', |
||||
|
change: '+8%', |
||||
|
icon: Activity, |
||||
|
color: 'from-green-500 to-emerald-600', |
||||
|
}, |
||||
|
{ |
||||
|
title: '系统负载', |
||||
|
value: '32%', |
||||
|
change: '-5%', |
||||
|
icon: Zap, |
||||
|
color: 'from-amber-500 to-orange-600', |
||||
|
}, |
||||
|
{ |
||||
|
title: '数据库状态', |
||||
|
value: '正常', |
||||
|
change: '稳定', |
||||
|
icon: Database, |
||||
|
color: 'from-purple-500 to-violet-600', |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
const recentActivity = [ |
||||
|
{ id: 1, user: 'john@example.com', action: '登录系统', time: '5 分钟前', status: 'success' }, |
||||
|
{ id: 2, user: 'jane@example.com', action: '更新资料', time: '15 分钟前', status: 'success' }, |
||||
|
{ id: 3, user: 'admin@example.com', action: '创建用户', time: '1 小时前', status: 'success' }, |
||||
|
{ id: 4, user: 'bob@example.com', action: '修改密码', time: '2 小时前', status: 'success' }, |
||||
|
{ id: 5, user: 'alice@example.com', action: '登录失败', time: '3 小时前', status: 'error' }, |
||||
|
] |
||||
|
|
||||
|
export function DashboardPage() { |
||||
|
return ( |
||||
|
<div className="space-y-6"> |
||||
|
{/* Stats Grid */} |
||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 animate-fade-in" style={{ animationDelay: '0.1s' }}> |
||||
|
{stats.map((stat, index) => ( |
||||
|
<Card key={index} className="overflow-hidden hover:border-gray-700 transition-colors"> |
||||
|
<CardContent className="p-6"> |
||||
|
<div className="flex items-start justify-between"> |
||||
|
<div className="space-y-1"> |
||||
|
<p className="text-sm font-medium text-gray-400 font-body">{stat.title}</p> |
||||
|
<p className="text-3xl font-bold text-white font-display">{stat.value}</p> |
||||
|
<p className="text-xs text-green-400 font-body">{stat.change}</p> |
||||
|
</div> |
||||
|
<div className={`p-3 rounded-lg bg-gradient-to-br ${stat.color}`}> |
||||
|
<stat.icon className="h-5 w-5 text-white" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
))} |
||||
|
</div> |
||||
|
|
||||
|
{/* Main Content Grid */} |
||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
||||
|
{/* Chart Placeholder */} |
||||
|
<Card className="lg:col-span-2 animate-fade-in" style={{ animationDelay: '0.2s' }}> |
||||
|
<CardHeader> |
||||
|
<CardTitle>用户增长趋势</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent> |
||||
|
<div className="h-64 flex items-end justify-between gap-2 px-4"> |
||||
|
{[65, 72, 68, 80, 75, 85, 82, 90, 88, 95, 92, 100].map((height, i) => ( |
||||
|
<div |
||||
|
key={i} |
||||
|
className="flex-1 max-w-8 bg-gradient-to-t from-sky-600 to-sky-400 rounded-t-sm transition-all duration-300 hover:from-sky-500 hover:to-sky-300 relative group" |
||||
|
style={{ height: `${height}%` }} |
||||
|
> |
||||
|
<div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap"> |
||||
|
{height}% |
||||
|
</div> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
<div className="flex justify-between mt-4 px-4 text-xs text-gray-500 font-body"> |
||||
|
<span>1月</span> |
||||
|
<span>2月</span> |
||||
|
<span>3月</span> |
||||
|
<span>4月</span> |
||||
|
<span>5月</span> |
||||
|
<span>6月</span> |
||||
|
<span>7月</span> |
||||
|
<span>8月</span> |
||||
|
<span>9月</span> |
||||
|
<span>10月</span> |
||||
|
<span>11月</span> |
||||
|
<span>12月</span> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Recent Activity */} |
||||
|
<Card className="animate-fade-in" style={{ animationDelay: '0.3s' }}> |
||||
|
<CardHeader> |
||||
|
<CardTitle>最近活动</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent> |
||||
|
<div className="space-y-4"> |
||||
|
{recentActivity.map((activity) => ( |
||||
|
<div |
||||
|
key={activity.id} |
||||
|
className="flex items-start gap-3 p-3 rounded-lg bg-gray-800/50 hover:bg-gray-800 transition-colors" |
||||
|
> |
||||
|
<div |
||||
|
className={`w-2 h-2 rounded-full mt-2 flex-shrink-0 ${ |
||||
|
activity.status === 'success' ? 'bg-green-500' : 'bg-red-500' |
||||
|
}`}
|
||||
|
/> |
||||
|
<div className="flex-1 min-w-0"> |
||||
|
<p className="text-sm text-gray-300 font-body truncate"> |
||||
|
{activity.user} |
||||
|
</p> |
||||
|
<p className="text-xs text-gray-500 font-body">{activity.action}</p> |
||||
|
</div> |
||||
|
<span className="text-xs text-gray-600 font-body whitespace-nowrap"> |
||||
|
{activity.time} |
||||
|
</span> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
</div> |
||||
|
|
||||
|
{/* Quick Actions */} |
||||
|
<Card className="animate-fade-in" style={{ animationDelay: '0.4s' }}> |
||||
|
<CardHeader> |
||||
|
<CardTitle>快捷操作</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent> |
||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> |
||||
|
{[ |
||||
|
{ label: '添加用户', icon: Users, action: 'users' }, |
||||
|
{ label: '系统设置', icon: Zap, action: 'settings' }, |
||||
|
{ label: '数据备份', icon: Database, action: 'backup' }, |
||||
|
{ label: '查看日志', icon: Activity, action: 'logs' }, |
||||
|
].map((item, index) => ( |
||||
|
<button |
||||
|
key={index} |
||||
|
className="flex flex-col items-center gap-2 p-4 rounded-lg border border-gray-800 hover:border-sky-500/50 hover:bg-gray-800/50 transition-all duration-200 group" |
||||
|
> |
||||
|
<item.icon className="h-6 w-6 text-gray-500 group-hover:text-sky-400 transition-colors" /> |
||||
|
<span className="text-sm text-gray-400 group-hover:text-gray-200 font-body transition-colors"> |
||||
|
{item.label} |
||||
|
</span> |
||||
|
</button> |
||||
|
))} |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,135 @@ |
|||||
|
import { useState } from 'react' |
||||
|
import { useNavigate } from 'react-router-dom' |
||||
|
import { Mail, Lock, AlertCircle, Zap } from 'lucide-react' |
||||
|
import { useAuth } from '@/contexts/AuthContext' |
||||
|
import { Input } from '@/components/ui/Input' |
||||
|
import { Button } from '@/components/ui/Button' |
||||
|
import { Card } from '@/components/ui/Card' |
||||
|
|
||||
|
export function LoginPage() { |
||||
|
const [email, setEmail] = useState('') |
||||
|
const [password, setPassword] = useState('') |
||||
|
const [error, setError] = useState('') |
||||
|
const [isLoading, setIsLoading] = useState(false) |
||||
|
const navigate = useNavigate() |
||||
|
const { login } = useAuth() |
||||
|
|
||||
|
const handleSubmit = async (e: React.FormEvent) => { |
||||
|
e.preventDefault() |
||||
|
setError('') |
||||
|
setIsLoading(true) |
||||
|
|
||||
|
try { |
||||
|
await login(email, password) |
||||
|
navigate('/dashboard') |
||||
|
} catch (err) { |
||||
|
setError(err instanceof Error ? err.message : '登录失败') |
||||
|
} finally { |
||||
|
setIsLoading(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className="min-h-screen flex items-center justify-center relative overflow-hidden grid-pattern"> |
||||
|
{/* Animated background elements */} |
||||
|
<div className="absolute inset-0 overflow-hidden"> |
||||
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-sky-500/10 rounded-full blur-3xl animate-pulse" /> |
||||
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} /> |
||||
|
</div> |
||||
|
|
||||
|
{/* Decorative grid lines */} |
||||
|
<div className="absolute inset-0 pointer-events-none"> |
||||
|
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-sky-500/30 to-transparent" /> |
||||
|
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" /> |
||||
|
<div className="absolute top-0 bottom-0 left-0 w-px bg-gradient-to-b from-transparent via-sky-500/30 to-transparent" /> |
||||
|
<div className="absolute top-0 bottom-0 right-0 w-px bg-gradient-to-b from-transparent via-purple-500/30 to-transparent" /> |
||||
|
</div> |
||||
|
|
||||
|
{/* Main content */} |
||||
|
<div className="relative z-10 w-full max-w-md px-4 animate-scale-in"> |
||||
|
{/* Logo and title */} |
||||
|
<div className="text-center mb-8"> |
||||
|
<div className="inline-flex items-center justify-center w-20 h-20 mb-6 rounded-2xl bg-gradient-to-br from-sky-500 to-blue-600 glow-primary relative overflow-hidden"> |
||||
|
<div className="absolute inset-0 stripe-pattern" /> |
||||
|
<Zap className="h-10 w-10 text-white relative z-10" /> |
||||
|
</div> |
||||
|
<h1 className="text-4xl font-bold text-white font-display tracking-wide mb-2"> |
||||
|
BASE<span className="text-sky-400">.</span> |
||||
|
</h1> |
||||
|
<p className="text-gray-500 font-body">管理面板登录</p> |
||||
|
</div> |
||||
|
|
||||
|
{/* Login form */} |
||||
|
<Card className="backdrop-blur-xl bg-gray-900/90 border-gray-800"> |
||||
|
<form onSubmit={handleSubmit} className="space-y-6"> |
||||
|
<div className="space-y-4"> |
||||
|
<Input |
||||
|
type="email" |
||||
|
label="邮箱地址" |
||||
|
placeholder="user@example.com" |
||||
|
value={email} |
||||
|
onChange={(e) => setEmail(e.target.value)} |
||||
|
required |
||||
|
leftIcon={<Mail className="h-4 w-4" />} |
||||
|
disabled={isLoading} |
||||
|
/> |
||||
|
|
||||
|
<Input |
||||
|
type="password" |
||||
|
label="密码" |
||||
|
placeholder="••••••••" |
||||
|
value={password} |
||||
|
onChange={(e) => setPassword(e.target.value)} |
||||
|
required |
||||
|
leftIcon={<Lock className="h-4 w-4" />} |
||||
|
disabled={isLoading} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{error && ( |
||||
|
<div className="flex items-center gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm font-body"> |
||||
|
<AlertCircle className="h-4 w-4 flex-shrink-0" /> |
||||
|
<span>{error}</span> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
<Button |
||||
|
type="submit" |
||||
|
variant="primary" |
||||
|
size="lg" |
||||
|
className="w-full" |
||||
|
isLoading={isLoading} |
||||
|
> |
||||
|
登录 |
||||
|
</Button> |
||||
|
|
||||
|
<div className="text-center"> |
||||
|
<p className="text-sm text-gray-500 font-body"> |
||||
|
还没有账号？{' '} |
||||
|
<button |
||||
|
type="button" |
||||
|
className="text-sky-400 hover:text-sky-300 transition-colors font-medium" |
||||
|
> |
||||
|
注册账号 |
||||
|
</button> |
||||
|
</p> |
||||
|
</div> |
||||
|
</form> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Footer info */} |
||||
|
<div className="mt-8 text-center"> |
||||
|
<p className="text-xs text-gray-600 font-body"> |
||||
|
© 2026 Base System. All rights reserved. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Corner decorations */} |
||||
|
<div className="absolute top-0 left-0 w-24 h-24 border-l-2 border-t-2 border-sky-500/30 rounded-tl-3xl" /> |
||||
|
<div className="absolute top-0 right-0 w-24 h-24 border-r-2 border-t-2 border-purple-500/30 rounded-tr-3xl" /> |
||||
|
<div className="absolute bottom-0 left-0 w-24 h-24 border-l-2 border-b-2 border-purple-500/30 rounded-bl-3xl" /> |
||||
|
<div className="absolute bottom-0 right-0 w-24 h-24 border-r-2 border-b-2 border-sky-500/30 rounded-br-3xl" /> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,105 @@ |
|||||
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card' |
||||
|
import { Input } from '@/components/ui/Input' |
||||
|
import { Button } from '@/components/ui/Button' |
||||
|
import { Settings, Save, Bell, Lock, Palette } from 'lucide-react' |
||||
|
|
||||
|
export function SettingsPage() { |
||||
|
return ( |
||||
|
<div className="space-y-6 animate-fade-in max-w-2xl"> |
||||
|
{/* Profile Settings */} |
||||
|
<Card> |
||||
|
<CardHeader> |
||||
|
<CardTitle className="flex items-center gap-2"> |
||||
|
<Settings className="h-5 w-5 text-sky-400" /> |
||||
|
个人设置 |
||||
|
</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent className="space-y-4"> |
||||
|
<Input label="用户名" placeholder="请输入用户名" /> |
||||
|
<Input label="邮箱" type="email" placeholder="请输入邮箱" /> |
||||
|
<Input label="手机号" placeholder="请输入手机号" /> |
||||
|
<div className="pt-4"> |
||||
|
<Button variant="primary"> |
||||
|
<Save className="h-4 w-4" /> |
||||
|
保存设置 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Notification Settings */} |
||||
|
<Card> |
||||
|
<CardHeader> |
||||
|
<CardTitle className="flex items-center gap-2"> |
||||
|
<Bell className="h-5 w-5 text-sky-400" /> |
||||
|
通知设置 |
||||
|
</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent className="space-y-4"> |
||||
|
<div className="flex items-center justify-between p-4 rounded-lg bg-gray-800/50"> |
||||
|
<div> |
||||
|
<p className="text-sm font-medium text-white">邮件通知</p> |
||||
|
<p className="text-xs text-gray-500">接收重要操作邮件通知</p> |
||||
|
</div> |
||||
|
<label className="relative inline-flex items-center cursor-pointer"> |
||||
|
<input type="checkbox" defaultChecked className="sr-only peer" /> |
||||
|
<div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-500" /> |
||||
|
</label> |
||||
|
</div> |
||||
|
<div className="flex items-center justify-between p-4 rounded-lg bg-gray-800/50"> |
||||
|
<div> |
||||
|
<p className="text-sm font-medium text-white">系统消息</p> |
||||
|
<p className="text-xs text-gray-500">接收系统更新消息</p> |
||||
|
</div> |
||||
|
<label className="relative inline-flex items-center cursor-pointer"> |
||||
|
<input type="checkbox" defaultChecked className="sr-only peer" /> |
||||
|
<div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-500" /> |
||||
|
</label> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Security Settings */} |
||||
|
<Card> |
||||
|
<CardHeader> |
||||
|
<CardTitle className="flex items-center gap-2"> |
||||
|
<Lock className="h-5 w-5 text-sky-400" /> |
||||
|
安全设置 |
||||
|
</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent className="space-y-4"> |
||||
|
<Input label="当前密码" type="password" placeholder="请输入当前密码" /> |
||||
|
<Input label="新密码" type="password" placeholder="请输入新密码" /> |
||||
|
<Input label="确认密码" type="password" placeholder="请确认新密码" /> |
||||
|
<div className="pt-4"> |
||||
|
<Button variant="primary"> |
||||
|
修改密码 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Theme Settings */} |
||||
|
<Card> |
||||
|
<CardHeader> |
||||
|
<CardTitle className="flex items-center gap-2"> |
||||
|
<Palette className="h-5 w-5 text-sky-400" /> |
||||
|
外观设置 |
||||
|
</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent className="space-y-4"> |
||||
|
<div className="flex items-center justify-between p-4 rounded-lg bg-gray-800/50"> |
||||
|
<div> |
||||
|
<p className="text-sm font-medium text-white">深色模式</p> |
||||
|
<p className="text-xs text-gray-500">使用深色主题</p> |
||||
|
</div> |
||||
|
<label className="relative inline-flex items-center cursor-pointer"> |
||||
|
<input type="checkbox" defaultChecked className="sr-only peer" /> |
||||
|
<div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-500" /> |
||||
|
</label> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,279 @@ |
|||||
|
import { useState, useEffect } from 'react' |
||||
|
import { Plus, Search, Edit2, Trash2 } from 'lucide-react' |
||||
|
import { Button } from '@/components/ui/Button' |
||||
|
import { Input } from '@/components/ui/Input' |
||||
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card' |
||||
|
import { Modal } from '@/components/ui/Modal' |
||||
|
import { |
||||
|
Table, |
||||
|
TableHeader, |
||||
|
TableBody, |
||||
|
TableRow, |
||||
|
TableHead, |
||||
|
TableCell, |
||||
|
} from '@/components/ui/Table' |
||||
|
import type { User, CreateUserRequest, UpdateUserRequest } from '@/types' |
||||
|
import { apiClient } from '@/services/api' |
||||
|
|
||||
|
export function UserManagementPage() { |
||||
|
const [users, setUsers] = useState<User[]>([]) |
||||
|
const [isLoading, setIsLoading] = useState(true) |
||||
|
const [searchQuery, setSearchQuery] = useState('') |
||||
|
const [isModalOpen, setIsModalOpen] = useState(false) |
||||
|
const [editingUser, setEditingUser] = useState<User | null>(null) |
||||
|
const [formData, setFormData] = useState<Partial<CreateUserRequest> & { password?: string }>({ |
||||
|
username: '', |
||||
|
email: '', |
||||
|
password: '', |
||||
|
phone: '', |
||||
|
}) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
fetchUsers() |
||||
|
}, []) |
||||
|
|
||||
|
const fetchUsers = async () => { |
||||
|
try { |
||||
|
setIsLoading(true) |
||||
|
const response = await apiClient.getUsers({ page: 1, pageSize: 100 }) |
||||
|
if (response.success && response.data) { |
||||
|
setUsers(response.data.users) |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('Failed to fetch users:', error) |
||||
|
// Use mock data if API fails
|
||||
|
setUsers([ |
||||
|
{ id: 1, username: 'admin', email: 'admin@example.com', createdAt: '2024-01-01', updatedAt: '2024-01-01' }, |
||||
|
{ id: 2, username: 'user1', email: 'user1@example.com', phone: '13800138000', createdAt: '2024-01-02', updatedAt: '2024-01-02' }, |
||||
|
{ id: 3, username: 'user2', email: 'user2@example.com', phone: '13900139000', createdAt: '2024-01-03', updatedAt: '2024-01-03' }, |
||||
|
]) |
||||
|
} finally { |
||||
|
setIsLoading(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleCreateUser = async () => { |
||||
|
try { |
||||
|
await apiClient.createUser(formData as CreateUserRequest) |
||||
|
await fetchUsers() |
||||
|
setIsModalOpen(false) |
||||
|
resetForm() |
||||
|
} catch (error) { |
||||
|
console.error('Failed to create user:', error) |
||||
|
alert('创建用户失败') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleUpdateUser = async () => { |
||||
|
if (!editingUser) return |
||||
|
try { |
||||
|
const { password, ...data } = formData as UpdateUserRequest & { password?: string } |
||||
|
await apiClient.updateUser(editingUser.id, data) |
||||
|
await fetchUsers() |
||||
|
setIsModalOpen(false) |
||||
|
resetForm() |
||||
|
} catch (error) { |
||||
|
console.error('Failed to update user:', error) |
||||
|
alert('更新用户失败') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleDeleteUser = async (id: number) => { |
||||
|
if (!confirm('确定要删除该用户吗？')) return |
||||
|
try { |
||||
|
await apiClient.deleteUser(id) |
||||
|
await fetchUsers() |
||||
|
} catch (error) { |
||||
|
console.error('Failed to delete user:', error) |
||||
|
alert('删除用户失败') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const openModal = (user?: User) => { |
||||
|
if (user) { |
||||
|
setEditingUser(user) |
||||
|
setFormData({ |
||||
|
username: user.username, |
||||
|
email: user.email, |
||||
|
phone: user.phone, |
||||
|
}) |
||||
|
} else { |
||||
|
setEditingUser(null) |
||||
|
setFormData({ |
||||
|
username: '', |
||||
|
email: '', |
||||
|
password: '', |
||||
|
phone: '', |
||||
|
}) |
||||
|
} |
||||
|
setIsModalOpen(true) |
||||
|
} |
||||
|
|
||||
|
const resetForm = () => { |
||||
|
setFormData({ |
||||
|
username: '', |
||||
|
email: '', |
||||
|
password: '', |
||||
|
phone: '', |
||||
|
}) |
||||
|
setEditingUser(null) |
||||
|
} |
||||
|
|
||||
|
const filteredUsers = users.filter( |
||||
|
(user) => |
||||
|
user.username.toLowerCase().includes(searchQuery.toLowerCase()) || |
||||
|
user.email.toLowerCase().includes(searchQuery.toLowerCase()) |
||||
|
) |
||||
|
|
||||
|
return ( |
||||
|
<div className="space-y-6 animate-fade-in"> |
||||
|
{/* Header */} |
||||
|
<Card> |
||||
|
<CardContent className="p-6"> |
||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> |
||||
|
<div className="flex-1 w-full sm:max-w-md"> |
||||
|
<Input |
||||
|
placeholder="搜索用户..." |
||||
|
value={searchQuery} |
||||
|
onChange={(e) => setSearchQuery(e.target.value)} |
||||
|
leftIcon={<Search className="h-4 w-4" />} |
||||
|
/> |
||||
|
</div> |
||||
|
<Button |
||||
|
onClick={() => openModal()} |
||||
|
className="whitespace-nowrap" |
||||
|
> |
||||
|
<Plus className="h-4 w-4" /> |
||||
|
添加用户 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Users Table */} |
||||
|
<Card> |
||||
|
<CardHeader> |
||||
|
<CardTitle>用户列表 ({filteredUsers.length})</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardContent> |
||||
|
<div className="overflow-x-auto"> |
||||
|
<Table> |
||||
|
<TableHeader> |
||||
|
<TableRow> |
||||
|
<TableHead>ID</TableHead> |
||||
|
<TableHead>用户名</TableHead> |
||||
|
<TableHead>邮箱</TableHead> |
||||
|
<TableHead>手机号</TableHead> |
||||
|
<TableHead>创建时间</TableHead> |
||||
|
<TableHead className="text-right">操作</TableHead> |
||||
|
</TableRow> |
||||
|
</TableHeader> |
||||
|
<TableBody> |
||||
|
{isLoading ? ( |
||||
|
<TableRow> |
||||
|
<TableCell>加载中...</TableCell> |
||||
|
</TableRow> |
||||
|
) : filteredUsers.length === 0 ? ( |
||||
|
<TableRow> |
||||
|
<TableCell>暂无数据</TableCell> |
||||
|
</TableRow> |
||||
|
) : ( |
||||
|
filteredUsers.map((user) => ( |
||||
|
<TableRow key={user.id}> |
||||
|
<TableCell className="text-gray-400">#{user.id}</TableCell> |
||||
|
<TableCell className="font-medium text-white">{user.username}</TableCell> |
||||
|
<TableCell className="text-gray-400">{user.email}</TableCell> |
||||
|
<TableCell className="text-gray-400">{user.phone || '-'}</TableCell> |
||||
|
<TableCell className="text-gray-400"> |
||||
|
{new Date(user.createdAt).toLocaleDateString('zh-CN')} |
||||
|
</TableCell> |
||||
|
<TableCell className="text-right"> |
||||
|
<div className="flex items-center justify-end gap-2"> |
||||
|
<Button |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={() => openModal(user)} |
||||
|
> |
||||
|
<Edit2 className="h-4 w-4" /> |
||||
|
</Button> |
||||
|
<Button |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={() => handleDeleteUser(user.id)} |
||||
|
className="text-red-400 hover:text-red-300" |
||||
|
> |
||||
|
<Trash2 className="h-4 w-4" /> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</TableCell> |
||||
|
</TableRow> |
||||
|
)) |
||||
|
)} |
||||
|
</TableBody> |
||||
|
</Table> |
||||
|
</div> |
||||
|
</CardContent> |
||||
|
</Card> |
||||
|
|
||||
|
{/* Modal */} |
||||
|
<Modal |
||||
|
isOpen={isModalOpen} |
||||
|
onClose={() => { |
||||
|
setIsModalOpen(false) |
||||
|
resetForm() |
||||
|
}} |
||||
|
title={editingUser ? '编辑用户' : '添加用户'} |
||||
|
size="md" |
||||
|
footer={ |
||||
|
<> |
||||
|
<Button |
||||
|
variant="outline" |
||||
|
onClick={() => { |
||||
|
setIsModalOpen(false) |
||||
|
resetForm() |
||||
|
}} |
||||
|
> |
||||
|
取消 |
||||
|
</Button> |
||||
|
<Button |
||||
|
onClick={editingUser ? handleUpdateUser : handleCreateUser} |
||||
|
> |
||||
|
{editingUser ? '保存' : '创建'} |
||||
|
</Button> |
||||
|
</> |
||||
|
} |
||||
|
> |
||||
|
<div className="space-y-4"> |
||||
|
<Input |
||||
|
label="用户名" |
||||
|
placeholder="请输入用户名" |
||||
|
value={formData.username} |
||||
|
onChange={(e) => setFormData({ ...formData, username: e.target.value })} |
||||
|
/> |
||||
|
<Input |
||||
|
label="邮箱" |
||||
|
type="email" |
||||
|
placeholder="请输入邮箱" |
||||
|
value={formData.email} |
||||
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })} |
||||
|
/> |
||||
|
{!editingUser && ( |
||||
|
<Input |
||||
|
label="密码" |
||||
|
type="password" |
||||
|
placeholder="请输入密码" |
||||
|
value={formData.password} |
||||
|
onChange={(e) => setFormData({ ...formData, password: e.target.value })} |
||||
|
/> |
||||
|
)} |
||||
|
<Input |
||||
|
label="手机号" |
||||
|
placeholder="请输入手机号" |
||||
|
value={formData.phone} |
||||
|
onChange={(e) => setFormData({ ...formData, phone: e.target.value })} |
||||
|
/> |
||||
|
</div> |
||||
|
</Modal> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,139 @@ |
|||||
|
import type { |
||||
|
ApiResponse, |
||||
|
LoginResponse, |
||||
|
LoginRequest, |
||||
|
User, |
||||
|
UserListRequest, |
||||
|
UserListResponse, |
||||
|
CreateUserRequest, |
||||
|
UpdateUserRequest, |
||||
|
} from '@/types' |
||||
|
|
||||
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8888/api/v1' |
||||
|
|
||||
|
class ApiClient { |
||||
|
private get token(): string | null { |
||||
|
return localStorage.getItem('token') |
||||
|
} |
||||
|
|
||||
|
private set token(value: string | null) { |
||||
|
if (value) { |
||||
|
localStorage.setItem('token', value) |
||||
|
} else { |
||||
|
localStorage.removeItem('token') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private async request<T>( |
||||
|
endpoint: string, |
||||
|
options: RequestInit = {} |
||||
|
): Promise<T> { |
||||
|
const url = `${API_BASE_URL}${endpoint}` |
||||
|
const headers: Record<string, string> = { |
||||
|
'Content-Type': 'application/json', |
||||
|
} |
||||
|
|
||||
|
// Merge additional headers
|
||||
|
if (options.headers) { |
||||
|
Object.assign(headers, options.headers) |
||||
|
} |
||||
|
|
||||
|
if (this.token) { |
||||
|
headers['Authorization'] = `Bearer ${this.token}` |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
const response = await fetch(url, { |
||||
|
...options, |
||||
|
headers, |
||||
|
}) |
||||
|
|
||||
|
const data = await response.json() |
||||
|
|
||||
|
if (!response.ok) { |
||||
|
throw new Error(data.message || 'Request failed') |
||||
|
} |
||||
|
|
||||
|
return data |
||||
|
} catch (error) { |
||||
|
console.error('API request error:', error) |
||||
|
throw error |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Auth
|
||||
|
async login(credentials: LoginRequest): Promise<LoginResponse> { |
||||
|
const response = await this.request<LoginResponse>('/auth/login', { |
||||
|
method: 'POST', |
||||
|
body: JSON.stringify(credentials), |
||||
|
}) |
||||
|
|
||||
|
if (response.success && response.token) { |
||||
|
this.token = response.token |
||||
|
} |
||||
|
|
||||
|
return response |
||||
|
} |
||||
|
|
||||
|
async logout(): Promise<void> { |
||||
|
this.token = null |
||||
|
} |
||||
|
|
||||
|
async refreshToken(refreshToken: string): Promise<LoginResponse> { |
||||
|
return this.request<LoginResponse>('/auth/refresh', { |
||||
|
method: 'POST', |
||||
|
body: JSON.stringify({ token: refreshToken }), |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// User Management
|
||||
|
async getUsers(params: UserListRequest = {}): Promise<UserListResponse> { |
||||
|
const queryParams = new URLSearchParams() |
||||
|
if (params.page) queryParams.append('page', params.page.toString()) |
||||
|
if (params.pageSize) queryParams.append('pageSize', params.pageSize.toString()) |
||||
|
if (params.keyword) queryParams.append('keyword', params.keyword) |
||||
|
|
||||
|
return this.request<UserListResponse>(`/user/users?${queryParams}`) |
||||
|
} |
||||
|
|
||||
|
async getUser(id: number): Promise<ApiResponse<User>> { |
||||
|
return this.request<ApiResponse<User>>(`/user/user/${id}`) |
||||
|
} |
||||
|
|
||||
|
async createUser(data: CreateUserRequest): Promise<ApiResponse<User>> { |
||||
|
return this.request<ApiResponse<User>>('/user/user', { |
||||
|
method: 'POST', |
||||
|
body: JSON.stringify(data), |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
async updateUser(id: number, data: UpdateUserRequest): Promise<ApiResponse<User>> { |
||||
|
return this.request<ApiResponse<User>>(`/user/user/${id}`, { |
||||
|
method: 'PUT', |
||||
|
body: JSON.stringify(data), |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
async deleteUser(id: number): Promise<ApiResponse<void>> { |
||||
|
return this.request<ApiResponse<void>>(`/user/user/${id}`, { |
||||
|
method: 'DELETE', |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// Profile
|
||||
|
async getProfile(): Promise<ApiResponse> { |
||||
|
return this.request<ApiResponse>('/profile/me') |
||||
|
} |
||||
|
|
||||
|
// Health check
|
||||
|
async healthCheck(): Promise<{ status: string }> { |
||||
|
try { |
||||
|
const response = await fetch(`${API_BASE_URL}/health`) |
||||
|
return response.json() |
||||
|
} catch { |
||||
|
return { status: 'error' } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const apiClient = new ApiClient() |
||||
@ -0,0 +1,96 @@ |
|||||
|
// API Response Types
|
||||
|
export interface ApiResponse<T = any> { |
||||
|
code: number |
||||
|
message: string |
||||
|
success: boolean |
||||
|
data?: T |
||||
|
} |
||||
|
|
||||
|
export interface LoginResponse { |
||||
|
code: number |
||||
|
message: string |
||||
|
success: boolean |
||||
|
token: string |
||||
|
} |
||||
|
|
||||
|
// User Types
|
||||
|
export interface User { |
||||
|
id: number |
||||
|
username: string |
||||
|
email: string |
||||
|
phone?: string |
||||
|
avatar?: string |
||||
|
createdAt: string |
||||
|
updatedAt: string |
||||
|
} |
||||
|
|
||||
|
export interface UserInfo extends User {} |
||||
|
|
||||
|
// Request Types
|
||||
|
export interface LoginRequest { |
||||
|
email: string |
||||
|
password: string |
||||
|
} |
||||
|
|
||||
|
export interface RegisterRequest { |
||||
|
username: string |
||||
|
email: string |
||||
|
password: string |
||||
|
phone?: string |
||||
|
} |
||||
|
|
||||
|
export interface CreateUserRequest { |
||||
|
username: string |
||||
|
email: string |
||||
|
password: string |
||||
|
phone?: string |
||||
|
} |
||||
|
|
||||
|
export interface UpdateUserRequest { |
||||
|
username?: string |
||||
|
email?: string |
||||
|
phone?: string |
||||
|
avatar?: string |
||||
|
} |
||||
|
|
||||
|
export interface UserListRequest { |
||||
|
page?: number |
||||
|
pageSize?: number |
||||
|
keyword?: string |
||||
|
} |
||||
|
|
||||
|
export interface UserListResponse { |
||||
|
code: number |
||||
|
message: string |
||||
|
success: boolean |
||||
|
data: { |
||||
|
users: User[] |
||||
|
total: number |
||||
|
page: number |
||||
|
pageSize: number |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Profile Types
|
||||
|
export interface Profile { |
||||
|
id: number |
||||
|
userId: number |
||||
|
username: string |
||||
|
email: string |
||||
|
phone?: string |
||||
|
bio?: string |
||||
|
avatar?: string |
||||
|
createdAt: string |
||||
|
updatedAt: string |
||||
|
} |
||||
|
|
||||
|
export interface UpdateProfileRequest { |
||||
|
bio?: string |
||||
|
avatar?: string |
||||
|
phone?: string |
||||
|
} |
||||
|
|
||||
|
export interface ChangePasswordRequest { |
||||
|
oldPassword: string |
||||
|
newPassword: string |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", |
||||
|
"target": "ES2022", |
||||
|
"useDefineForClassFields": true, |
||||
|
"lib": ["ES2022", "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", |
||||
|
|
||||
|
/* Linting */ |
||||
|
"strict": true, |
||||
|
"noUnusedLocals": true, |
||||
|
"noUnusedParameters": true, |
||||
|
"erasableSyntaxOnly": true, |
||||
|
"noFallthroughCasesInSwitch": true, |
||||
|
"noUncheckedSideEffectImports": true, |
||||
|
|
||||
|
/* Path Alias */ |
||||
|
"baseUrl": ".", |
||||
|
"paths": { |
||||
|
"@/*": ["./src/*"] |
||||
|
} |
||||
|
}, |
||||
|
"include": ["src"] |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"files": [], |
||||
|
"references": [ |
||||
|
{ "path": "./tsconfig.app.json" }, |
||||
|
{ "path": "./tsconfig.node.json" } |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
{ |
||||
|
"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"] |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import { defineConfig } from 'vite' |
||||
|
import react from '@vitejs/plugin-react' |
||||
|
import path from 'path' |
||||
|
|
||||
|
// https://vite.dev/config/
|
||||
|
export default defineConfig({ |
||||
|
plugins: [react()], |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@': path.resolve(__dirname, './src'), |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
Loading…
Reference in new issue