fix: 修复 Prettier 格式检查和依赖问题
## 修复内容 ### 依赖修复 - 安装缺失的 `prettier-plugin-organize-imports` 插件 - 修复 CI/CD 中的 "Cannot find package" 错误 - 更新 package.json 和 bun.lockb ### 代码格式化 - 对所有源文件运行 Prettier 自动格式化 - 统一 import 语句排序和组织 - 修复 49 个文件的代码风格问题 - 确保所有文件符合项目代码规范 ### 格式化改进 - Import 语句自动排序和分组 - 统一缩进和空格规范 - 标准化引号和分号使用 - 优化对象和数组格式 ## 验证结果 ✅ `bun run format` 通过 - 所有文件格式正确 ✅ `prettier-plugin-organize-imports` 正常工作 ✅ CI/CD 格式检查将通过 ## 技术细节 - 添加 prettier-plugin-organize-imports@^4.1.0 - 保持现有 .prettierrc 配置不变 - 格式化涉及 TS/TSX/JS/JSX/JSON/CSS/MD 文件 - 代码功能完全不受影响，仅调整格式
This commit is contained in:
xujiang
@ -1,18 +1,18 @@
|
||||
import { Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { useAuthStore } from './stores/authStore'
|
||||
import { Navigate, Route, Routes } from 'react-router-dom'
|
||||
import DashboardLayout from './components/DashboardLayout'
|
||||
import ErrorBoundary from './components/ErrorBoundary'
|
||||
import ProtectedRoute from './components/ProtectedRoute'
|
||||
import Categories from './pages/Categories'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import LoginPage from './pages/LoginPage'
|
||||
import NotFound from './pages/NotFound'
|
||||
import DashboardLayout from './components/DashboardLayout'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import Photos from './pages/Photos'
|
||||
import PhotoUpload from './pages/PhotoUpload'
|
||||
import Categories from './pages/Categories'
|
||||
import Tags from './pages/Tags'
|
||||
import Users from './pages/Users'
|
||||
import Settings from './pages/Settings'
|
||||
import Tags from './pages/Tags'
|
||||
import TestApi from './pages/TestApi'
|
||||
import Users from './pages/Users'
|
||||
import { useAuthStore } from './stores/authStore'
|
||||
|
||||
function App() {
|
||||
const { isAuthenticated } = useAuthStore()
|
||||
|
||||
@ -1,28 +1,35 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
LayoutDashboard,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { authService } from '@/services/authService'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
Bell,
|
||||
Camera,
|
||||
FolderOpen,
|
||||
Tags,
|
||||
Users,
|
||||
Settings,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
Menu,
|
||||
Search,
|
||||
Settings,
|
||||
Tags,
|
||||
User,
|
||||
Bell,
|
||||
Search
|
||||
Users,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { authService } from '@/services/authService'
|
||||
import React, { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
@ -81,7 +88,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1 px-2 py-4">
|
||||
{navigation.map((item) => {
|
||||
{navigation.map(item => {
|
||||
const Icon = item.icon
|
||||
const isActive = isCurrentPath(item.href)
|
||||
|
||||
@ -109,17 +116,16 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={undefined} />
|
||||
<AvatarFallback>
|
||||
{currentUser?.username?.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
<AvatarFallback>{currentUser?.username?.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{currentUser?.username}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{currentUser?.username}</p>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{currentUser?.role === 'admin' ? '管理员' :
|
||||
currentUser?.role === 'editor' ? '编辑者' : '用户'}
|
||||
{currentUser?.role === 'admin'
|
||||
? '管理员'
|
||||
: currentUser?.role === 'editor'
|
||||
? '编辑者'
|
||||
: '用户'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
@ -208,9 +214,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
|
||||
</header>
|
||||
|
||||
{/* Page content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</main>
|
||||
<main className="flex-1 overflow-auto">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { AlertTriangle, Home, RefreshCw } from 'lucide-react'
|
||||
import { Component, ErrorInfo, ReactNode } from 'react'
|
||||
|
||||
interface Props {
|
||||
children: ReactNode
|
||||
@ -28,7 +28,7 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
this.setState({
|
||||
error,
|
||||
errorInfo
|
||||
errorInfo,
|
||||
})
|
||||
|
||||
// 这里可以将错误发送到日志服务
|
||||
@ -82,18 +82,11 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={this.handleRetry}
|
||||
className="flex-1"
|
||||
variant="outline"
|
||||
>
|
||||
<Button onClick={this.handleRetry} className="flex-1" variant="outline">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
重试
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.handleGoHome}
|
||||
className="flex-1"
|
||||
>
|
||||
<Button onClick={this.handleGoHome} className="flex-1">
|
||||
<Home className="h-4 w-4 mr-2" />
|
||||
返回首页
|
||||
</Button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Loader2 } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
interface LoadingProps {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
@ -12,49 +12,53 @@ export function Loading({
|
||||
size = 'md',
|
||||
text = '加载中...',
|
||||
className,
|
||||
fullscreen = false
|
||||
fullscreen = false,
|
||||
}: LoadingProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-6 w-6',
|
||||
lg: 'h-8 w-8'
|
||||
lg: 'h-8 w-8',
|
||||
}
|
||||
|
||||
const textSizeClasses = {
|
||||
sm: 'text-sm',
|
||||
md: 'text-base',
|
||||
lg: 'text-lg'
|
||||
lg: 'text-lg',
|
||||
}
|
||||
|
||||
if (fullscreen) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 className={cn(sizeClasses[size], "animate-spin text-primary")} />
|
||||
<p className={cn(textSizeClasses[size], "text-muted-foreground")}>{text}</p>
|
||||
<Loader2 className={cn(sizeClasses[size], 'animate-spin text-primary')} />
|
||||
<p className={cn(textSizeClasses[size], 'text-muted-foreground')}>{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("flex items-center justify-center gap-2", className)}>
|
||||
<Loader2 className={cn(sizeClasses[size], "animate-spin text-primary")} />
|
||||
<span className={cn(textSizeClasses[size], "text-muted-foreground")}>{text}</span>
|
||||
<div className={cn('flex items-center justify-center gap-2', className)}>
|
||||
<Loader2 className={cn(sizeClasses[size], 'animate-spin text-primary')} />
|
||||
<span className={cn(textSizeClasses[size], 'text-muted-foreground')}>{text}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function LoadingSpinner({ size = 'md', className }: { size?: 'sm' | 'md' | 'lg', className?: string }) {
|
||||
export function LoadingSpinner({
|
||||
size = 'md',
|
||||
className,
|
||||
}: {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
}) {
|
||||
const sizeClasses = {
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-6 w-6',
|
||||
lg: 'h-8 w-8'
|
||||
lg: 'h-8 w-8',
|
||||
}
|
||||
|
||||
return (
|
||||
<Loader2 className={cn(sizeClasses[size], "animate-spin text-primary", className)} />
|
||||
)
|
||||
return <Loader2 className={cn(sizeClasses[size], 'animate-spin text-primary', className)} />
|
||||
}
|
||||
|
||||
export function PageLoading({ text = '页面加载中...' }: { text?: string }) {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { ReactNode } from 'react'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Shield, Home } from 'lucide-react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { Home, Shield } from 'lucide-react'
|
||||
import { ReactNode } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
interface ProtectedRouteProps {
|
||||
@ -11,11 +11,7 @@ interface ProtectedRouteProps {
|
||||
fallback?: ReactNode
|
||||
}
|
||||
|
||||
export function ProtectedRoute({
|
||||
children,
|
||||
requiredRole,
|
||||
fallback
|
||||
}: ProtectedRouteProps) {
|
||||
export function ProtectedRoute({ children, requiredRole, fallback }: ProtectedRouteProps) {
|
||||
const { user, isAuthenticated } = useAuthStore()
|
||||
const navigate = useNavigate()
|
||||
|
||||
@ -27,9 +23,9 @@ export function ProtectedRoute({
|
||||
// 角色权限检查
|
||||
if (requiredRole) {
|
||||
const roleHierarchy = {
|
||||
'user': 0,
|
||||
'editor': 1,
|
||||
'admin': 2
|
||||
user: 0,
|
||||
editor: 1,
|
||||
admin: 2,
|
||||
}
|
||||
|
||||
const userRoleLevel = roleHierarchy[user.role] || 0
|
||||
@ -50,25 +46,19 @@ export function ProtectedRoute({
|
||||
<CardTitle className="text-xl">权限不足</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
抱歉，您没有访问此页面的权限。
|
||||
</p>
|
||||
<p className="text-muted-foreground">抱歉，您没有访问此页面的权限。</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
当前角色: <span className="font-medium">{getRoleText(user.role)}</span><br />
|
||||
当前角色: <span className="font-medium">{getRoleText(user.role)}</span>
|
||||
<br />
|
||||
需要角色: <span className="font-medium">{getRoleText(requiredRole)}</span>
|
||||
</p>
|
||||
|
||||
<Button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="w-full"
|
||||
>
|
||||
<Button onClick={() => navigate('/dashboard')} className="w-full">
|
||||
<Home className="h-4 w-4 mr-2" />
|
||||
返回首页
|
||||
</Button>
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
错误代码: 403
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">错误代码: 403</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@ -81,9 +71,9 @@ export function ProtectedRoute({
|
||||
|
||||
function getRoleText(role: string) {
|
||||
const roleTexts = {
|
||||
'admin': '管理员',
|
||||
'editor': '编辑者',
|
||||
'user': '用户'
|
||||
admin: '管理员',
|
||||
editor: '编辑者',
|
||||
user: '用户',
|
||||
}
|
||||
return roleTexts[role as keyof typeof roleTexts] || role
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
|
||||
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
default: 'bg-background text-foreground',
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
variant: 'default',
|
||||
},
|
||||
}
|
||||
)
|
||||
@ -23,37 +23,27 @@ const Alert = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||
>(({ className, variant, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
|
||||
))
|
||||
Alert.displayName = "Alert"
|
||||
Alert.displayName = 'Alert'
|
||||
|
||||
const AlertTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h5
|
||||
ref={ref}
|
||||
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertTitle.displayName = "AlertTitle"
|
||||
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h5
|
||||
ref={ref}
|
||||
className={cn('mb-1 font-medium leading-none tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
AlertTitle.displayName = 'AlertTitle'
|
||||
|
||||
const AlertDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||
{...props}
|
||||
/>
|
||||
<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
|
||||
))
|
||||
AlertDescription.displayName = "AlertDescription"
|
||||
AlertDescription.displayName = 'AlertDescription'
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
export { Alert, AlertDescription, AlertTitle }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
import * as AvatarPrimitive from '@radix-ui/react-avatar'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Avatar = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||
@ -9,10 +9,7 @@ const Avatar = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -24,7 +21,7 @@ const AvatarImage = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Image
|
||||
ref={ref}
|
||||
className={cn("aspect-square h-full w-full", className)}
|
||||
className={cn('aspect-square h-full w-full', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -37,7 +34,7 @@ const AvatarFallback = React.forwardRef<
|
||||
<AvatarPrimitive.Fallback
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||
'flex h-full w-full items-center justify-center rounded-full bg-muted',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -45,4 +42,4 @@ const AvatarFallback = React.forwardRef<
|
||||
))
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
export { Avatar, AvatarFallback, AvatarImage }
|
||||
|
||||
@ -1,24 +1,23 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
||||
outline: 'text-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
variant: 'default',
|
||||
},
|
||||
}
|
||||
)
|
||||
@ -28,9 +27,7 @@ export interface BadgeProps
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@ -1,34 +1,31 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
}
|
||||
)
|
||||
@ -41,16 +38,12 @@ export interface ButtonProps
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const Comp = asChild ? Slot : 'button'
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
Button.displayName = 'Button'
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@ -1,79 +1,56 @@
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
Card.displayName = 'Card'
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.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 CardHeader = React.forwardRef<HTMLDivElement, React.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 = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
CardTitle.displayName = 'CardTitle'
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
<p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
CardDescription.displayName = 'CardDescription'
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
||||
)
|
||||
)
|
||||
CardContent.displayName = 'CardContent'
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
const CardFooter = React.forwardRef<HTMLDivElement, React.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, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
|
||||
import { Check } from 'lucide-react'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
@ -11,14 +11,12 @@ const Checkbox = React.forwardRef<
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("flex items-center justify-center text-current")}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog'
|
||||
import { X } from 'lucide-react'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Dialog = DialogPrimitive.Root
|
||||
|
||||
@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -51,33 +51,18 @@ const DialogContent = React.forwardRef<
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
DialogHeader.displayName = 'DialogHeader'
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
DialogFooter.displayName = 'DialogFooter'
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
@ -85,10 +70,7 @@ const DialogTitle = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -100,7 +82,7 @@ const DialogDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -108,13 +90,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
|
||||
import { Check, ChevronRight, Circle } from 'lucide-react'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
@ -25,8 +25,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||
inset && "pl-8",
|
||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -35,8 +35,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
@ -45,14 +44,13 @@ const DropdownMenuSubContent = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
@ -63,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -81,8 +79,8 @@ const DropdownMenuItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
inset && "pl-8",
|
||||
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -97,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
@ -111,8 +109,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
@ -121,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -144,11 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -160,39 +153,31 @@ const DropdownMenuSeparator = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
className={cn('-mx-1 my-1 h-px bg-muted', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuTrigger,
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import * as React from 'react'
|
||||
import {
|
||||
Controller,
|
||||
ControllerProps,
|
||||
@ -8,27 +8,25 @@ import {
|
||||
FieldValues,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
} from "react-hook-form"
|
||||
} from 'react-hook-form'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Form = FormProvider
|
||||
|
||||
type FormFieldContextValue<
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
> = {
|
||||
name: TName
|
||||
}
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue
|
||||
)
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
>({
|
||||
...props
|
||||
}: ControllerProps<TFieldValues, TName>) => {
|
||||
@ -47,7 +45,7 @@ const useFormField = () => {
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
throw new Error('useFormField should be used within <FormField>')
|
||||
}
|
||||
|
||||
const { id } = itemContext
|
||||
@ -66,23 +64,20 @@ type FormItemContextValue = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue
|
||||
const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
|
||||
|
||||
const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div ref={ref} className={cn('space-y-2', className)} {...props} />
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
const FormItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div ref={ref} className={cn("space-y-2", className)} {...props} />
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
})
|
||||
FormItem.displayName = "FormItem"
|
||||
FormItem.displayName = 'FormItem'
|
||||
|
||||
const FormLabel = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
@ -93,13 +88,13 @@ const FormLabel = React.forwardRef<
|
||||
return (
|
||||
<Label
|
||||
ref={ref}
|
||||
className={cn(error && "text-destructive", className)}
|
||||
className={cn(error && 'text-destructive', className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
FormLabel.displayName = "FormLabel"
|
||||
FormLabel.displayName = 'FormLabel'
|
||||
|
||||
const FormControl = React.forwardRef<
|
||||
React.ElementRef<typeof Slot>,
|
||||
@ -111,17 +106,13 @@ const FormControl = React.forwardRef<
|
||||
<Slot
|
||||
ref={ref}
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
FormControl.displayName = "FormControl"
|
||||
FormControl.displayName = 'FormControl'
|
||||
|
||||
const FormDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
@ -133,12 +124,12 @@ const FormDescription = React.forwardRef<
|
||||
<p
|
||||
ref={ref}
|
||||
id={formDescriptionId}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
FormDescription.displayName = "FormDescription"
|
||||
FormDescription.displayName = 'FormDescription'
|
||||
|
||||
const FormMessage = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
@ -155,22 +146,22 @@ const FormMessage = React.forwardRef<
|
||||
<p
|
||||
ref={ref}
|
||||
id={formMessageId}
|
||||
className={cn("text-sm font-medium text-destructive", className)}
|
||||
className={cn('text-sm font-medium text-destructive', className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
)
|
||||
})
|
||||
FormMessage.displayName = "FormMessage"
|
||||
FormMessage.displayName = 'FormMessage'
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
useFormField,
|
||||
}
|
||||
@ -1,9 +1,8 @@
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
@ -11,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
@ -20,6 +19,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
Input.displayName = 'Input'
|
||||
|
||||
export { Input }
|
||||
@ -1,23 +1,18 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
|
||||
)
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react"
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||
import * as ProgressPrimitive from '@radix-ui/react-progress'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
@ -9,10 +9,7 @@ const Progress = React.forwardRef<
|
||||
>(({ className, value, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
||||
className
|
||||
)}
|
||||
className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
import * as SelectPrimitive from '@radix-ui/react-select'
|
||||
import { Check, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -36,10 +36,7 @@ const SelectScrollUpButton = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
@ -53,29 +50,25 @@ const SelectScrollDownButton = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
>(({ className, children, position = 'popper', ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
@ -84,9 +77,9 @@ const SelectContent = React.forwardRef<
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
'p-1',
|
||||
position === 'popper' &&
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
@ -103,7 +96,7 @@ const SelectLabel = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
||||
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -116,7 +109,7 @@ const SelectItem = React.forwardRef<
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -138,7 +131,7 @@ const SelectSeparator = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
className={cn('-mx-1 my-1 h-px bg-muted', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -146,13 +139,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@ -1,29 +1,24 @@
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
import * as SeparatorPrimitive from '@radix-ui/react-separator'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(
|
||||
(
|
||||
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||
ref
|
||||
) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
'shrink-0 bg-border',
|
||||
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||
|
||||
export { Separator }
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
import * as SheetPrimitive from '@radix-ui/react-dialog'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { X } from 'lucide-react'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
|
||||
@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -29,20 +29,20 @@ const SheetOverlay = React.forwardRef<
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
|
||||
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
side: 'right',
|
||||
},
|
||||
}
|
||||
)
|
||||
@ -54,14 +54,10 @@ interface SheetContentProps
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
>(({ side = 'right', className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
@ -72,33 +68,18 @@ const SheetContent = React.forwardRef<
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
SheetHeader.displayName = 'SheetHeader'
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
SheetFooter.displayName = 'SheetFooter'
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
@ -106,7 +87,7 @@ const SheetTitle = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
className={cn('text-lg font-semibold text-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -118,7 +99,7 @@ const SheetDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -126,13 +107,13 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetOverlay,
|
||||
SheetPortal,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
}
|
||||
@ -1,16 +1,8 @@
|
||||
import React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
import React from 'react'
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
import * as SwitchPrimitives from '@radix-ui/react-switch'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
@ -9,7 +9,7 @@ const Switch = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -17,7 +17,7 @@ const Switch = React.forwardRef<
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
||||
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
|
||||
@ -1,40 +1,31 @@
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
Table.displayName = "Table"
|
||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
|
||||
</div>
|
||||
)
|
||||
)
|
||||
Table.displayName = 'Table'
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
TableHeader.displayName = 'TableHeader'
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
TableBody.displayName = 'TableBody'
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
@ -42,29 +33,25 @@ const TableFooter = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableFooter.displayName = "TableFooter"
|
||||
TableFooter.displayName = 'TableFooter'
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableRow.displayName = "TableRow"
|
||||
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
TableRow.displayName = 'TableRow'
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
@ -73,13 +60,13 @@ const TableHead = React.forwardRef<
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = "TableHead"
|
||||
TableHead.displayName = 'TableHead'
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
@ -87,31 +74,18 @@ const TableCell = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = "TableCell"
|
||||
TableCell.displayName = 'TableCell'
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
<caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
|
||||
))
|
||||
TableCaption.displayName = "TableCaption"
|
||||
TableCaption.displayName = 'TableCaption'
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface TextareaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
@ -19,6 +18,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
)
|
||||
}
|
||||
)
|
||||
Textarea.displayName = "Textarea"
|
||||
Textarea.displayName = 'Textarea'
|
||||
|
||||
export { Textarea }
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from "react"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
import * as ToastPrimitives from '@radix-ui/react-toast'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { X } from 'lucide-react'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
|
||||
@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -23,25 +23,23 @@ const ToastViewport = React.forwardRef<
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive:
|
||||
"destructive border-destructive bg-destructive text-destructive-foreground",
|
||||
default: 'border bg-background text-foreground',
|
||||
destructive: 'destructive border-destructive bg-destructive text-destructive-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
variant: 'default',
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
@ -60,7 +58,7 @@ const ToastAction = React.forwardRef<
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -75,7 +73,7 @@ const ToastClose = React.forwardRef<
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
|
||||
className
|
||||
)}
|
||||
toast-close=""
|
||||
@ -90,11 +88,7 @@ const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
<ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold', className)} {...props} />
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
@ -104,7 +98,7 @@ const ToastDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
className={cn('text-sm opacity-90', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@ -115,13 +109,13 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
type ToastActionElement,
|
||||
ToastProvider,
|
||||
ToastViewport,
|
||||
Toast,
|
||||
ToastTitle,
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
type ToastActionElement,
|
||||
type ToastProps,
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
@ -62,7 +62,14 @@ export function debounce<T extends (...args: any[]) => any>(
|
||||
}
|
||||
|
||||
export function isImageFile(file: File): boolean {
|
||||
const imageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/bmp']
|
||||
const imageTypes = [
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/webp',
|
||||
'image/bmp',
|
||||
]
|
||||
return imageTypes.includes(file.type)
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import App from './App'
|
||||
import Toaster from './components/Toaster'
|
||||
import './index.css'
|
||||
@ -25,5 +25,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
</React.StrictMode>
|
||||
)
|
||||
@ -1,32 +1,43 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Edit,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
FolderPlus,
|
||||
MoreVertical,
|
||||
Edit,
|
||||
Trash,
|
||||
Plus,
|
||||
Search,
|
||||
TreePine,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Folder,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Search,
|
||||
Trash,
|
||||
TreePine,
|
||||
} from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
|
||||
interface CategoryWithChildren {
|
||||
id: number
|
||||
@ -52,19 +63,19 @@ export default function Categories() {
|
||||
// Form state
|
||||
const [categoryForm, setCategoryForm] = useState({
|
||||
name: '',
|
||||
description: ''
|
||||
description: '',
|
||||
})
|
||||
|
||||
// 获取分类树
|
||||
const { data: categories, isLoading: categoriesLoading } = useQuery({
|
||||
queryKey: ['categories-tree'],
|
||||
queryFn: categoryService.getCategoryTree
|
||||
queryFn: categoryService.getCategoryTree,
|
||||
})
|
||||
|
||||
// 获取分类统计
|
||||
const { data: stats, isLoading: statsLoading } = useQuery({
|
||||
queryKey: ['category-stats'],
|
||||
queryFn: categoryService.getStats
|
||||
queryFn: categoryService.getStats,
|
||||
})
|
||||
|
||||
// 删除分类
|
||||
@ -78,7 +89,7 @@ export default function Categories() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 创建分类
|
||||
@ -94,12 +105,12 @@ export default function Categories() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '创建失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 更新分类
|
||||
const updateCategoryMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number, data: any }) =>
|
||||
mutationFn: ({ id, data }: { id: number; data: any }) =>
|
||||
categoryService.updateCategory(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
|
||||
@ -112,14 +123,14 @@ export default function Categories() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '更新失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
setCategoryForm({
|
||||
name: '',
|
||||
description: ''
|
||||
description: '',
|
||||
})
|
||||
}
|
||||
|
||||
@ -141,7 +152,7 @@ export default function Categories() {
|
||||
setEditingCategory(category)
|
||||
setCategoryForm({
|
||||
name: category.name,
|
||||
description: category.description
|
||||
description: category.description,
|
||||
})
|
||||
setIsEditDialogOpen(true)
|
||||
}
|
||||
@ -155,7 +166,7 @@ export default function Categories() {
|
||||
|
||||
createCategoryMutation.mutate({
|
||||
name: categoryForm.name,
|
||||
description: categoryForm.description
|
||||
description: categoryForm.description,
|
||||
})
|
||||
}
|
||||
|
||||
@ -172,12 +183,11 @@ export default function Categories() {
|
||||
id: editingCategory.id,
|
||||
data: {
|
||||
name: categoryForm.name,
|
||||
description: categoryForm.description
|
||||
}
|
||||
description: categoryForm.description,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 切换展开状态
|
||||
const toggleExpanded = (categoryId: number) => {
|
||||
const newExpanded = new Set(expandedCategories)
|
||||
@ -197,21 +207,24 @@ export default function Categories() {
|
||||
}
|
||||
|
||||
const renderCategoryTree = (categories: CategoryWithChildren[], level = 0) => {
|
||||
const filteredCategories = categories?.filter(category =>
|
||||
search === '' ||
|
||||
category.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
category.description.toLowerCase().includes(search.toLowerCase())
|
||||
const filteredCategories = categories?.filter(
|
||||
category =>
|
||||
search === '' ||
|
||||
category.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
category.description.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
|
||||
return filteredCategories?.map((category) => {
|
||||
return filteredCategories?.map(category => {
|
||||
const hasChildren = category.children && category.children.length > 0
|
||||
const isExpanded = expandedCategories.has(category.id)
|
||||
|
||||
return (
|
||||
<div key={category.id} className="mb-2">
|
||||
<div className={`flex items-center justify-between p-3 border rounded-lg hover:shadow-sm transition-shadow ${
|
||||
level > 0 ? 'ml-6 border-l-4 border-l-primary/20' : ''
|
||||
} ${category.isActive === false ? 'opacity-60 bg-gray-50' : ''}`}>
|
||||
<div
|
||||
className={`flex items-center justify-between p-3 border rounded-lg hover:shadow-sm transition-shadow ${
|
||||
level > 0 ? 'ml-6 border-l-4 border-l-primary/20' : ''
|
||||
} ${category.isActive === false ? 'opacity-60 bg-gray-50' : ''}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* 展开/收起按钮 */}
|
||||
{hasChildren ? (
|
||||
@ -253,22 +266,14 @@ export default function Categories() {
|
||||
禁用
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant="outline">
|
||||
{category.photoCount || 0} 张照片
|
||||
</Badge>
|
||||
{level > 0 && (
|
||||
<Badge variant="secondary">
|
||||
子分类
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant="outline">{category.photoCount || 0} 张照片</Badge>
|
||||
{level > 0 && <Badge variant="secondary">子分类</Badge>}
|
||||
</div>
|
||||
{category.description && (
|
||||
<p className="text-sm text-muted-foreground mt-1">{category.description}</p>
|
||||
)}
|
||||
{category.slug && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Slug: {category.slug}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Slug: {category.slug}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -290,7 +295,10 @@ export default function Categories() {
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteCategory(category.id)}
|
||||
disabled={(category.photoCount || 0) > 0 || (category.children && category.children.length > 0)}
|
||||
disabled={
|
||||
(category.photoCount || 0) > 0 ||
|
||||
(category.children && category.children.length > 0)
|
||||
}
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
@ -301,9 +309,7 @@ export default function Categories() {
|
||||
</div>
|
||||
|
||||
{hasChildren && isExpanded && (
|
||||
<div className="mt-2">
|
||||
{renderCategoryTree(category.children || [], level + 1)}
|
||||
</div>
|
||||
<div className="mt-2">{renderCategoryTree(category.children || [], level + 1)}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
@ -316,9 +322,7 @@ export default function Categories() {
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">分类管理</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
管理照片分类和相册结构
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1">管理照片分类和相册结构</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => handleCreateCategory()} className="flex items-center gap-2">
|
||||
@ -385,7 +389,12 @@ export default function Categories() {
|
||||
<Skeleton className="h-8 w-20" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold text-purple-600">
|
||||
{stats?.data?.total ? Math.round(Object.values(stats.data.photoCounts || {}).reduce((a, b) => a + b, 0) / stats.data.total) : 0}
|
||||
{stats?.data?.total
|
||||
? Math.round(
|
||||
Object.values(stats.data.photoCounts || {}).reduce((a, b) => a + b, 0) /
|
||||
stats.data.total
|
||||
)
|
||||
: 0}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
@ -401,21 +410,20 @@ export default function Categories() {
|
||||
<Input
|
||||
placeholder="搜索分类..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setExpandedCategories(new Set((categories?.data || []).map((c: any) => c.id)))}
|
||||
onClick={() =>
|
||||
setExpandedCategories(new Set((categories?.data || []).map((c: any) => c.id)))
|
||||
}
|
||||
>
|
||||
展开全部
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setExpandedCategories(new Set())}
|
||||
>
|
||||
<Button variant="outline" onClick={() => setExpandedCategories(new Set())}>
|
||||
收起全部
|
||||
</Button>
|
||||
</div>
|
||||
@ -450,9 +458,7 @@ export default function Categories() {
|
||||
<div className="text-center py-12">
|
||||
<FolderOpen className="h-16 w-16 mx-auto mb-4 text-gray-300" />
|
||||
<h3 className="text-lg font-medium mb-2">暂无分类</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
创建您的第一个分类来组织照片
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-4">创建您的第一个分类来组织照片</p>
|
||||
<Button onClick={() => handleCreateCategory()}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建分类
|
||||
@ -467,9 +473,7 @@ export default function Categories() {
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建分类</DialogTitle>
|
||||
<DialogDescription>
|
||||
添加新的照片分类来组织您的作品
|
||||
</DialogDescription>
|
||||
<DialogDescription>添加新的照片分类来组织您的作品</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
@ -478,7 +482,7 @@ export default function Categories() {
|
||||
<Input
|
||||
id="create-name"
|
||||
value={categoryForm.name}
|
||||
onChange={(e) => setCategoryForm(prev => ({ ...prev, name: e.target.value }))}
|
||||
onChange={e => setCategoryForm(prev => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="输入分类名称"
|
||||
/>
|
||||
</div>
|
||||
@ -488,7 +492,7 @@ export default function Categories() {
|
||||
<Textarea
|
||||
id="create-description"
|
||||
value={categoryForm.description}
|
||||
onChange={(e) => setCategoryForm(prev => ({ ...prev, description: e.target.value }))}
|
||||
onChange={e => setCategoryForm(prev => ({ ...prev, description: e.target.value }))}
|
||||
placeholder="分类描述（可选）"
|
||||
rows={3}
|
||||
/>
|
||||
@ -499,10 +503,7 @@ export default function Categories() {
|
||||
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmitCreate}
|
||||
disabled={createCategoryMutation.isPending}
|
||||
>
|
||||
<Button onClick={handleSubmitCreate} disabled={createCategoryMutation.isPending}>
|
||||
{createCategoryMutation.isPending ? '创建中...' : '创建分类'}
|
||||
</Button>
|
||||
</div>
|
||||
@ -514,9 +515,7 @@ export default function Categories() {
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑分类</DialogTitle>
|
||||
<DialogDescription>
|
||||
修改分类的基本信息
|
||||
</DialogDescription>
|
||||
<DialogDescription>修改分类的基本信息</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
@ -525,7 +524,7 @@ export default function Categories() {
|
||||
<Input
|
||||
id="edit-name"
|
||||
value={categoryForm.name}
|
||||
onChange={(e) => setCategoryForm(prev => ({ ...prev, name: e.target.value }))}
|
||||
onChange={e => setCategoryForm(prev => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="输入分类名称"
|
||||
/>
|
||||
</div>
|
||||
@ -535,7 +534,7 @@ export default function Categories() {
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
value={categoryForm.description}
|
||||
onChange={(e) => setCategoryForm(prev => ({ ...prev, description: e.target.value }))}
|
||||
onChange={e => setCategoryForm(prev => ({ ...prev, description: e.target.value }))}
|
||||
placeholder="分类描述（可选）"
|
||||
rows={3}
|
||||
/>
|
||||
@ -546,10 +545,7 @@ export default function Categories() {
|
||||
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmitEdit}
|
||||
disabled={updateCategoryMutation.isPending}
|
||||
>
|
||||
<Button onClick={handleSubmitEdit} disabled={updateCategoryMutation.isPending}>
|
||||
{updateCategoryMutation.isPending ? '保存中...' : '保存更改'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// Dashboard page
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Camera, Folder, Tag, Plus, TrendingUp } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { photoService } from '@/services/photoService'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { photoService } from '@/services/photoService'
|
||||
import { tagService } from '@/services/tagService'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Camera, Folder, Plus, Tag, TrendingUp } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate()
|
||||
@ -16,29 +16,30 @@ export default function Dashboard() {
|
||||
// 获取统计数据
|
||||
const { data: photoStats, isLoading: photoStatsLoading } = useQuery({
|
||||
queryKey: ['photo-stats'],
|
||||
queryFn: photoService.getStats
|
||||
queryFn: photoService.getStats,
|
||||
})
|
||||
|
||||
const { data: categoryStats, isLoading: categoryStatsLoading } = useQuery({
|
||||
queryKey: ['category-stats'],
|
||||
queryFn: categoryService.getStats
|
||||
queryFn: categoryService.getStats,
|
||||
})
|
||||
|
||||
const { data: tagStats, isLoading: tagStatsLoading } = useQuery({
|
||||
queryKey: ['tag-stats'],
|
||||
queryFn: tagService.getStats
|
||||
queryFn: tagService.getStats,
|
||||
})
|
||||
|
||||
// 获取最近照片
|
||||
const { data: recentPhotos, isLoading: recentPhotosLoading } = useQuery({
|
||||
queryKey: ['recent-photos'],
|
||||
queryFn: () => photoService.getPhotos({ page: 1, limit: 5, sort_by: 'created_at', sort_order: 'desc' })
|
||||
queryFn: () =>
|
||||
photoService.getPhotos({ page: 1, limit: 5, sort_by: 'created_at', sort_order: 'desc' }),
|
||||
})
|
||||
|
||||
// 获取热门标签
|
||||
const { data: popularTags, isLoading: popularTagsLoading } = useQuery({
|
||||
queryKey: ['popular-tags'],
|
||||
queryFn: () => tagService.getPopularTags(10)
|
||||
queryFn: () => tagService.getPopularTags(10),
|
||||
})
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
@ -51,21 +52,31 @@ export default function Dashboard() {
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'published': return 'bg-green-100 text-green-800'
|
||||
case 'draft': return 'bg-yellow-100 text-yellow-800'
|
||||
case 'archived': return 'bg-gray-100 text-gray-800'
|
||||
case 'processing': return 'bg-blue-100 text-blue-800'
|
||||
default: return 'bg-gray-100 text-gray-800'
|
||||
case 'published':
|
||||
return 'bg-green-100 text-green-800'
|
||||
case 'draft':
|
||||
return 'bg-yellow-100 text-yellow-800'
|
||||
case 'archived':
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
case 'processing':
|
||||
return 'bg-blue-100 text-blue-800'
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'published': return '已发布'
|
||||
case 'draft': return '草稿'
|
||||
case 'archived': return '已归档'
|
||||
case 'processing': return '处理中'
|
||||
default: return status
|
||||
case 'published':
|
||||
return '已发布'
|
||||
case 'draft':
|
||||
return '草稿'
|
||||
case 'archived':
|
||||
return '已归档'
|
||||
case 'processing':
|
||||
return '处理中'
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +118,9 @@ export default function Dashboard() {
|
||||
{photoStatsLoading ? (
|
||||
<Skeleton className="h-8 w-20" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold text-green-600">{photoStats?.data?.thisMonth || 0}</div>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{photoStats?.data?.thisMonth || 0}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
今日: {photoStats?.data?.today || 0}
|
||||
@ -124,7 +137,9 @@ export default function Dashboard() {
|
||||
{categoryStatsLoading ? (
|
||||
<Skeleton className="h-8 w-20" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold text-blue-600">{categoryStats?.data?.total || 0}</div>
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{categoryStats?.data?.total || 0}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
活跃: {categoryStats?.data?.active || 0}
|
||||
@ -160,9 +175,7 @@ export default function Dashboard() {
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{Object.entries(photoStats.data.statusStats).map(([status, count]) => (
|
||||
<div key={status} className="flex items-center gap-2">
|
||||
<Badge className={getStatusColor(status)}>
|
||||
{getStatusText(status)}
|
||||
</Badge>
|
||||
<Badge className={getStatusColor(status)}>{getStatusText(status)}</Badge>
|
||||
<span className="text-sm text-muted-foreground">{count}</span>
|
||||
</div>
|
||||
))}
|
||||
@ -195,7 +208,7 @@ export default function Dashboard() {
|
||||
</div>
|
||||
) : recentPhotos?.photos?.length ? (
|
||||
<div className="space-y-4">
|
||||
{recentPhotos.photos.map((photo) => (
|
||||
{recentPhotos.photos.map(photo => (
|
||||
<div key={photo.id} className="flex items-center gap-4">
|
||||
<div className="h-12 w-12 bg-gray-100 rounded flex items-center justify-center">
|
||||
<Camera className="h-6 w-6 text-gray-400" />
|
||||
@ -245,8 +258,12 @@ export default function Dashboard() {
|
||||
</div>
|
||||
) : popularTags?.length ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{popularTags.map((tag) => (
|
||||
<Badge key={tag.id} variant="secondary" className="cursor-pointer hover:bg-secondary/80">
|
||||
{popularTags.map(tag => (
|
||||
<Badge
|
||||
key={tag.id}
|
||||
variant="secondary"
|
||||
className="cursor-pointer hover:bg-secondary/80"
|
||||
>
|
||||
{tag.name} ({tag.photoCount})
|
||||
</Badge>
|
||||
))}
|
||||
@ -255,11 +272,7 @@ export default function Dashboard() {
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Tag className="h-12 w-12 mx-auto mb-4 text-gray-300" />
|
||||
<p>暂无标签</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => navigate('/tags')}
|
||||
>
|
||||
<Button variant="outline" className="mt-4" onClick={() => navigate('/tags')}>
|
||||
创建标签
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Loader2, Eye, EyeOff, Camera } from 'lucide-react'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { authService } from '@/services/authService'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { Camera, Eye, EyeOff, Loader2 } from 'lucide-react'
|
||||
import React, { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export default function LoginPage() {
|
||||
@ -17,14 +17,14 @@ export default function LoginPage() {
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
password: ''
|
||||
password: '',
|
||||
})
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: authService.login,
|
||||
onSuccess: (data) => {
|
||||
onSuccess: data => {
|
||||
// 转换后端用户数据到前端格式
|
||||
const user = {
|
||||
id: data.data.user.id,
|
||||
@ -34,7 +34,7 @@ export default function LoginPage() {
|
||||
role: 'admin' as const, // 暂时固定为 admin
|
||||
status: data.data.user.status,
|
||||
created_at: data.data.user.created_at,
|
||||
updated_at: data.data.user.updated_at
|
||||
updated_at: data.data.user.updated_at,
|
||||
}
|
||||
|
||||
login(data.data.token, user)
|
||||
@ -45,7 +45,7 @@ export default function LoginPage() {
|
||||
const message = error?.response?.data?.message || error.message || '登录失败'
|
||||
setError(message)
|
||||
toast.error(message)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
@ -83,9 +83,7 @@ export default function LoginPage() {
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-2xl font-bold text-center">登录</CardTitle>
|
||||
<CardDescription className="text-center">
|
||||
使用您的账户登录管理后台
|
||||
</CardDescription>
|
||||
<CardDescription className="text-center">使用您的账户登录管理后台</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
@ -130,11 +128,7 @@ export default function LoginPage() {
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
disabled={loginMutation.isPending}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -158,8 +152,8 @@ export default function LoginPage() {
|
||||
<div className="mt-6 text-center text-sm text-gray-600">
|
||||
<p>默认管理员账户</p>
|
||||
<p className="mt-1">
|
||||
用户名: <span className="font-medium">admin</span> |
|
||||
密码: <span className="font-medium">admin123</span>
|
||||
用户名: <span className="font-medium">admin</span> | 密码:{' '}
|
||||
<span className="font-medium">admin123</span>
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { FileQuestion, Home, ArrowLeft } from 'lucide-react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { ArrowLeft, FileQuestion, Home } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
export default function NotFound() {
|
||||
const navigate = useNavigate()
|
||||
@ -16,31 +16,20 @@ export default function NotFound() {
|
||||
<CardTitle className="text-2xl">页面未找到</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
抱歉，您访问的页面不存在或已被移动。
|
||||
</p>
|
||||
<p className="text-muted-foreground">抱歉，您访问的页面不存在或已被移动。</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="w-full"
|
||||
>
|
||||
<Button onClick={() => navigate('/dashboard')} className="w-full">
|
||||
<Home className="h-4 w-4 mr-2" />
|
||||
返回首页
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(-1)}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
<Button onClick={() => navigate(-1)} variant="outline" className="w-full">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
返回上一页
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
错误代码: 404
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">错误代码: 404</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -1,31 +1,37 @@
|
||||
import React, { useState, useCallback, useRef, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Upload,
|
||||
X,
|
||||
Image as ImageIcon,
|
||||
Check,
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { photoService } from '@/services/photoService'
|
||||
import { tagService } from '@/services/tagService'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
AlertTriangle,
|
||||
ArrowLeft,
|
||||
Save,
|
||||
Check,
|
||||
FileImage,
|
||||
Trash2
|
||||
Image as ImageIcon,
|
||||
Save,
|
||||
Trash2,
|
||||
Upload,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
import { photoService } from '@/services/photoService'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { tagService } from '@/services/tagService'
|
||||
|
||||
interface UploadFile extends File {
|
||||
id: string
|
||||
@ -52,23 +58,23 @@ export default function PhotoUpload() {
|
||||
description: '',
|
||||
categoryIds: [] as number[],
|
||||
tagIds: [] as number[],
|
||||
status: 'draft' as 'draft' | 'published'
|
||||
status: 'draft' as 'draft' | 'published',
|
||||
})
|
||||
|
||||
// 获取分类和标签
|
||||
const { data: categories } = useQuery({
|
||||
queryKey: ['categories-all'],
|
||||
queryFn: () => categoryService.getCategories()
|
||||
queryFn: () => categoryService.getCategories(),
|
||||
})
|
||||
|
||||
const { data: tags } = useQuery({
|
||||
queryKey: ['tags-all'],
|
||||
queryFn: () => tagService.getAllTags()
|
||||
queryFn: () => tagService.getAllTags(),
|
||||
})
|
||||
|
||||
// 上传照片
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async (uploadData: { files: UploadFile[], metadata: any }) => {
|
||||
mutationFn: async (uploadData: { files: UploadFile[]; metadata: any }) => {
|
||||
setIsUploading(true)
|
||||
const results = []
|
||||
|
||||
@ -76,33 +82,37 @@ export default function PhotoUpload() {
|
||||
const file = uploadData.files[i]
|
||||
try {
|
||||
// 更新文件状态
|
||||
setFiles(prev => prev.map(f =>
|
||||
f.id === file.id ? { ...f, status: 'uploading' as const } : f
|
||||
))
|
||||
setFiles(prev =>
|
||||
prev.map(f => (f.id === file.id ? { ...f, status: 'uploading' as const } : f))
|
||||
)
|
||||
|
||||
// 模拟上传进度 - 创建进度更新函数
|
||||
const progressUpdateInterval = setInterval(() => {
|
||||
setFiles(prev => prev.map(f => {
|
||||
if (f.id === file.id && f.status === 'uploading') {
|
||||
const newProgress = Math.min((f.progress || 0) + Math.random() * 10, 90)
|
||||
return { ...f, progress: newProgress }
|
||||
}
|
||||
return f
|
||||
}))
|
||||
setFiles(prev =>
|
||||
prev.map(f => {
|
||||
if (f.id === file.id && f.status === 'uploading') {
|
||||
const newProgress = Math.min((f.progress || 0) + Math.random() * 10, 90)
|
||||
return { ...f, progress: newProgress }
|
||||
}
|
||||
return f
|
||||
})
|
||||
)
|
||||
}, 200)
|
||||
|
||||
const result = await photoService.uploadPhoto(file, {
|
||||
...uploadData.metadata,
|
||||
title: uploadData.metadata.title || file.name.split('.')[0]
|
||||
title: uploadData.metadata.title || file.name.split('.')[0],
|
||||
})
|
||||
|
||||
// 清除进度更新定时器
|
||||
clearInterval(progressUpdateInterval)
|
||||
|
||||
// 更新文件状态为完成
|
||||
setFiles(prev => prev.map(f =>
|
||||
f.id === file.id ? { ...f, status: 'completed' as const, progress: 100 } : f
|
||||
))
|
||||
setFiles(prev =>
|
||||
prev.map(f =>
|
||||
f.id === file.id ? { ...f, status: 'completed' as const, progress: 100 } : f
|
||||
)
|
||||
)
|
||||
|
||||
// 更新总进度
|
||||
const totalProgress = ((i + 1) / uploadData.files.length) * 100
|
||||
@ -111,26 +121,32 @@ export default function PhotoUpload() {
|
||||
results.push(result)
|
||||
} catch (error: any) {
|
||||
// 更新文件状态为错误
|
||||
setFiles(prev => prev.map(f =>
|
||||
f.id === file.id ? {
|
||||
...f,
|
||||
status: 'error' as const,
|
||||
error: error.message || '上传失败'
|
||||
} : f
|
||||
))
|
||||
setFiles(prev =>
|
||||
prev.map(f =>
|
||||
f.id === file.id
|
||||
? {
|
||||
...f,
|
||||
status: 'error' as const,
|
||||
error: error.message || '上传失败',
|
||||
}
|
||||
: f
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
setIsUploading(false)
|
||||
return results
|
||||
},
|
||||
onSuccess: (results) => {
|
||||
onSuccess: results => {
|
||||
queryClient.invalidateQueries({ queryKey: ['photos'] })
|
||||
const successCount = results.length
|
||||
const failedCount = files.length - successCount
|
||||
|
||||
if (successCount > 0) {
|
||||
toast.success(`成功上传 ${successCount} 张照片${failedCount > 0 ? `，${failedCount} 张失败` : ''}`)
|
||||
toast.success(
|
||||
`成功上传 ${successCount} 张照片${failedCount > 0 ? `，${failedCount} 张失败` : ''}`
|
||||
)
|
||||
}
|
||||
|
||||
if (failedCount === 0) {
|
||||
@ -141,7 +157,7 @@ export default function PhotoUpload() {
|
||||
onError: (error: any) => {
|
||||
setIsUploading(false)
|
||||
toast.error(error?.message || '上传失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 文件拖放处理
|
||||
@ -169,7 +185,7 @@ export default function PhotoUpload() {
|
||||
id: Math.random().toString(36),
|
||||
preview: URL.createObjectURL(file),
|
||||
status: 'pending' as const,
|
||||
progress: 0
|
||||
progress: 0,
|
||||
}))
|
||||
|
||||
setFiles(prev => [...prev, ...newFiles])
|
||||
@ -213,14 +229,17 @@ export default function PhotoUpload() {
|
||||
setDragOver(false)
|
||||
}, [])
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setDragOver(false)
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setDragOver(false)
|
||||
|
||||
const droppedFiles = Array.from(e.dataTransfer.files)
|
||||
onDrop(droppedFiles)
|
||||
}, [onDrop])
|
||||
const droppedFiles = Array.from(e.dataTransfer.files)
|
||||
onDrop(droppedFiles)
|
||||
},
|
||||
[onDrop]
|
||||
)
|
||||
|
||||
// 清理预览图片
|
||||
useEffect(() => {
|
||||
@ -242,7 +261,7 @@ export default function PhotoUpload() {
|
||||
|
||||
uploadMutation.mutate({
|
||||
files,
|
||||
metadata: formData
|
||||
metadata: formData,
|
||||
})
|
||||
}
|
||||
|
||||
@ -257,7 +276,7 @@ export default function PhotoUpload() {
|
||||
...prev,
|
||||
categoryIds: prev.categoryIds.includes(categoryId)
|
||||
? prev.categoryIds.filter(id => id !== categoryId)
|
||||
: [...prev.categoryIds, categoryId]
|
||||
: [...prev.categoryIds, categoryId],
|
||||
}))
|
||||
}
|
||||
|
||||
@ -267,7 +286,7 @@ export default function PhotoUpload() {
|
||||
...prev,
|
||||
tagIds: prev.tagIds.includes(tagId)
|
||||
? prev.tagIds.filter(id => id !== tagId)
|
||||
: [...prev.tagIds, tagId]
|
||||
: [...prev.tagIds, tagId],
|
||||
}))
|
||||
}
|
||||
|
||||
@ -276,11 +295,7 @@ export default function PhotoUpload() {
|
||||
{/* 页面头部 */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate('/photos')}
|
||||
>
|
||||
<Button variant="outline" size="sm" onClick={() => navigate('/photos')}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
返回
|
||||
</Button>
|
||||
@ -302,9 +317,7 @@ export default function PhotoUpload() {
|
||||
<div
|
||||
ref={dropAreaRef}
|
||||
className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer ${
|
||||
dragOver
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
dragOver ? 'border-primary bg-primary/5' : 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
@ -350,7 +363,7 @@ export default function PhotoUpload() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{files.map((file) => (
|
||||
{files.map(file => (
|
||||
<div key={file.id} className="flex items-center gap-4 p-4 border rounded-lg">
|
||||
{file.preview ? (
|
||||
<img
|
||||
@ -365,7 +378,9 @@ export default function PhotoUpload() {
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate" title={file.name}>{file.name}</p>
|
||||
<p className="text-sm font-medium truncate" title={file.name}>
|
||||
{file.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{(file.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
@ -377,9 +392,7 @@ export default function PhotoUpload() {
|
||||
{file.status === 'error' && file.error && (
|
||||
<Alert variant="destructive" className="mt-2">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription className="text-xs">
|
||||
{file.error}
|
||||
</AlertDescription>
|
||||
<AlertDescription className="text-xs">{file.error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
@ -449,7 +462,7 @@ export default function PhotoUpload() {
|
||||
<Input
|
||||
id="title"
|
||||
value={formData.title}
|
||||
onChange={(e) => updateFormData('title', e.target.value)}
|
||||
onChange={e => updateFormData('title', e.target.value)}
|
||||
placeholder="照片标题"
|
||||
/>
|
||||
</div>
|
||||
@ -459,7 +472,7 @@ export default function PhotoUpload() {
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => updateFormData('description', e.target.value)}
|
||||
onChange={e => updateFormData('description', e.target.value)}
|
||||
placeholder="照片描述"
|
||||
rows={3}
|
||||
/>
|
||||
@ -467,7 +480,10 @@ export default function PhotoUpload() {
|
||||
|
||||
<div>
|
||||
<Label htmlFor="status">状态</Label>
|
||||
<Select value={formData.status} onValueChange={(value) => updateFormData('status', value)}>
|
||||
<Select
|
||||
value={formData.status}
|
||||
onValueChange={value => updateFormData('status', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
@ -480,12 +496,13 @@ export default function PhotoUpload() {
|
||||
|
||||
<div>
|
||||
<Label>分类</Label>
|
||||
<div className="text-sm text-muted-foreground mb-2">
|
||||
可选择多个分类
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mb-2">可选择多个分类</div>
|
||||
<div className="max-h-40 overflow-y-auto border rounded-lg p-2">
|
||||
{categories?.data?.categories?.map((category: any) => (
|
||||
<div key={category.id} className="flex items-center space-x-2 p-2 hover:bg-muted rounded">
|
||||
<div
|
||||
key={category.id}
|
||||
className="flex items-center space-x-2 p-2 hover:bg-muted rounded"
|
||||
>
|
||||
<Checkbox
|
||||
id={`category-${category.id}`}
|
||||
checked={formData.categoryIds.includes(category.id)}
|
||||
@ -501,12 +518,13 @@ export default function PhotoUpload() {
|
||||
|
||||
<div>
|
||||
<Label>标签</Label>
|
||||
<div className="text-sm text-muted-foreground mb-2">
|
||||
可选择多个标签
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mb-2">可选择多个标签</div>
|
||||
<div className="max-h-40 overflow-y-auto border rounded-lg p-2">
|
||||
{tags?.map((tag: any) => (
|
||||
<div key={tag.id} className="flex items-center space-x-2 p-2 hover:bg-muted rounded">
|
||||
<div
|
||||
key={tag.id}
|
||||
className="flex items-center space-x-2 p-2 hover:bg-muted rounded"
|
||||
>
|
||||
<Checkbox
|
||||
id={`tag-${tag.id}`}
|
||||
checked={formData.tagIds.includes(tag.id)}
|
||||
|
||||
@ -1,35 +1,52 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { Photo, photoService } from '@/services/photoService'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
Camera,
|
||||
Plus,
|
||||
Search,
|
||||
MoreVertical,
|
||||
Edit,
|
||||
Trash,
|
||||
Eye,
|
||||
Folder,
|
||||
Grid,
|
||||
List,
|
||||
RefreshCw,
|
||||
ImageIcon,
|
||||
List,
|
||||
MoreVertical,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Tag,
|
||||
Folder
|
||||
Trash,
|
||||
} from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
import { photoService, Photo } from '@/services/photoService'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
|
||||
type ViewMode = 'grid' | 'list'
|
||||
|
||||
@ -54,7 +71,7 @@ export default function Photos() {
|
||||
status: '',
|
||||
categoryId: '',
|
||||
tagId: '',
|
||||
dateRange: ''
|
||||
dateRange: '',
|
||||
})
|
||||
|
||||
// 编辑对话框状态
|
||||
@ -63,7 +80,7 @@ export default function Photos() {
|
||||
const [editForm, setEditForm] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
status: 'draft' as 'draft' | 'published' | 'archived' | 'processing'
|
||||
status: 'draft' as 'draft' | 'published' | 'archived' | 'processing',
|
||||
})
|
||||
|
||||
// 详情对话框状态
|
||||
@ -73,24 +90,24 @@ export default function Photos() {
|
||||
// 获取照片列表
|
||||
const { data: photosData, isLoading: photosLoading } = useQuery({
|
||||
queryKey: ['photos', { page, ...filters }],
|
||||
queryFn: () => photoService.getPhotos({
|
||||
page,
|
||||
limit: 20,
|
||||
search: filters.search || undefined,
|
||||
status: filters.status || undefined,
|
||||
category_id: filters.categoryId ? parseInt(filters.categoryId) : undefined,
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc'
|
||||
})
|
||||
queryFn: () =>
|
||||
photoService.getPhotos({
|
||||
page,
|
||||
limit: 20,
|
||||
search: filters.search || undefined,
|
||||
status: filters.status || undefined,
|
||||
category_id: filters.categoryId ? parseInt(filters.categoryId) : undefined,
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc',
|
||||
}),
|
||||
})
|
||||
|
||||
// 获取分类列表
|
||||
const { data: categories } = useQuery({
|
||||
queryKey: ['categories-all'],
|
||||
queryFn: () => categoryService.getCategories()
|
||||
queryFn: () => categoryService.getCategories(),
|
||||
})
|
||||
|
||||
|
||||
// 删除照片
|
||||
const deletePhotoMutation = useMutation({
|
||||
mutationFn: photoService.deletePhoto,
|
||||
@ -100,7 +117,7 @@ export default function Photos() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 批量删除照片
|
||||
@ -113,12 +130,12 @@ export default function Photos() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '批量删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 批量更新状态
|
||||
const batchUpdateMutation = useMutation({
|
||||
mutationFn: ({ ids, status }: { ids: number[], status: string }) =>
|
||||
mutationFn: ({ ids, status }: { ids: number[]; status: string }) =>
|
||||
photoService.batchUpdate(ids, { status }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['photos'] })
|
||||
@ -127,13 +144,12 @@ export default function Photos() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '状态更新失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 编辑照片
|
||||
const editPhotoMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number, data: any }) =>
|
||||
photoService.updatePhoto(id, data),
|
||||
mutationFn: ({ id, data }: { id: number; data: any }) => photoService.updatePhoto(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['photos'] })
|
||||
setIsEditDialogOpen(false)
|
||||
@ -142,7 +158,7 @@ export default function Photos() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '更新失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
@ -184,21 +200,31 @@ export default function Photos() {
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'published': return 'bg-green-100 text-green-800'
|
||||
case 'draft': return 'bg-yellow-100 text-yellow-800'
|
||||
case 'archived': return 'bg-gray-100 text-gray-800'
|
||||
case 'processing': return 'bg-blue-100 text-blue-800'
|
||||
default: return 'bg-gray-100 text-gray-800'
|
||||
case 'published':
|
||||
return 'bg-green-100 text-green-800'
|
||||
case 'draft':
|
||||
return 'bg-yellow-100 text-yellow-800'
|
||||
case 'archived':
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
case 'processing':
|
||||
return 'bg-blue-100 text-blue-800'
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'published': return '已发布'
|
||||
case 'draft': return '草稿'
|
||||
case 'archived': return '已归档'
|
||||
case 'processing': return '处理中'
|
||||
default: return status
|
||||
case 'published':
|
||||
return '已发布'
|
||||
case 'draft':
|
||||
return '草稿'
|
||||
case 'archived':
|
||||
return '已归档'
|
||||
case 'processing':
|
||||
return '处理中'
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
|
||||
@ -216,7 +242,7 @@ export default function Photos() {
|
||||
setEditForm({
|
||||
title: photo.title,
|
||||
description: photo.description,
|
||||
status: photo.status
|
||||
status: photo.status,
|
||||
})
|
||||
setIsEditDialogOpen(true)
|
||||
}
|
||||
@ -233,11 +259,10 @@ export default function Photos() {
|
||||
|
||||
editPhotoMutation.mutate({
|
||||
id: editingPhoto.id,
|
||||
data: editForm
|
||||
data: editForm,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 刷新列表
|
||||
const handleRefresh = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['photos'] })
|
||||
@ -250,9 +275,7 @@ export default function Photos() {
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">照片管理</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
共 {photosData?.total || 0} 张照片
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1">共 {photosData?.total || 0} 张照片</p>
|
||||
</div>
|
||||
<Button onClick={() => navigate('/photos/upload')} className="flex items-center gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
@ -270,14 +293,17 @@ export default function Photos() {
|
||||
<Input
|
||||
placeholder="搜索照片..."
|
||||
value={filters.search}
|
||||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
onChange={e => setFilters({ ...filters, search: e.target.value })}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 过滤器 */}
|
||||
<div className="flex gap-2">
|
||||
<Select value={filters.status} onValueChange={(value) => setFilters({ ...filters, status: value })}>
|
||||
<Select
|
||||
value={filters.status}
|
||||
onValueChange={value => setFilters({ ...filters, status: value })}
|
||||
>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="状态" />
|
||||
</SelectTrigger>
|
||||
@ -290,13 +316,16 @@ export default function Photos() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={filters.categoryId} onValueChange={(value) => setFilters({ ...filters, categoryId: value })}>
|
||||
<Select
|
||||
value={filters.categoryId}
|
||||
onValueChange={value => setFilters({ ...filters, categoryId: value })}
|
||||
>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="分类" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">全部分类</SelectItem>
|
||||
{categories?.data?.categories?.map((category) => (
|
||||
{categories?.data?.categories?.map(category => (
|
||||
<SelectItem key={category.id} value={category.id.toString()}>
|
||||
{category.name}
|
||||
</SelectItem>
|
||||
@ -332,9 +361,7 @@ export default function Photos() {
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm">
|
||||
已选择 {selectedPhotos.length} 张照片
|
||||
</span>
|
||||
<span className="text-sm">已选择 {selectedPhotos.length} 张照片</span>
|
||||
<Button variant="outline" size="sm" onClick={() => setSelectedPhotos([])}>
|
||||
取消选择
|
||||
</Button>
|
||||
@ -374,11 +401,19 @@ export default function Photos() {
|
||||
|
||||
{/* 照片列表 */}
|
||||
{photosLoading ? (
|
||||
<div className={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6' : 'space-y-4'}>
|
||||
<div
|
||||
className={
|
||||
viewMode === 'grid'
|
||||
? 'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6'
|
||||
: 'space-y-4'
|
||||
}
|
||||
>
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-4">
|
||||
<Skeleton className={viewMode === 'grid' ? 'aspect-square mb-4' : 'h-20 w-20 mb-4'} />
|
||||
<Skeleton
|
||||
className={viewMode === 'grid' ? 'aspect-square mb-4' : 'h-20 w-20 mb-4'}
|
||||
/>
|
||||
<Skeleton className="h-4 w-3/4 mb-2" />
|
||||
<Skeleton className="h-3 w-1/2" />
|
||||
</CardContent>
|
||||
@ -390,7 +425,9 @@ export default function Photos() {
|
||||
{/* 全选复选框 */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Checkbox
|
||||
checked={selectedPhotos.length === photosData.photos.length && photosData.photos.length > 0}
|
||||
checked={
|
||||
selectedPhotos.length === photosData.photos.length && photosData.photos.length > 0
|
||||
}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">全选</span>
|
||||
@ -398,7 +435,7 @@ export default function Photos() {
|
||||
|
||||
{viewMode === 'grid' ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{photosData.photos.map((photo) => (
|
||||
{photosData.photos.map(photo => (
|
||||
<Card key={photo.id} className="group">
|
||||
<CardContent className="p-4">
|
||||
<div className="relative mb-4">
|
||||
@ -410,7 +447,9 @@ export default function Photos() {
|
||||
<div className="absolute top-2 left-2">
|
||||
<Checkbox
|
||||
checked={selectedPhotos.includes(photo.id)}
|
||||
onCheckedChange={(checked) => handleSelectPhoto(photo.id, checked as boolean)}
|
||||
onCheckedChange={checked =>
|
||||
handleSelectPhoto(photo.id, checked as boolean)
|
||||
}
|
||||
className="bg-white"
|
||||
/>
|
||||
</div>
|
||||
@ -461,13 +500,13 @@ export default function Photos() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{photosData.photos.map((photo) => (
|
||||
{photosData.photos.map(photo => (
|
||||
<Card key={photo.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Checkbox
|
||||
checked={selectedPhotos.includes(photo.id)}
|
||||
onCheckedChange={(checked) => handleSelectPhoto(photo.id, checked as boolean)}
|
||||
onCheckedChange={checked => handleSelectPhoto(photo.id, checked as boolean)}
|
||||
/>
|
||||
|
||||
<div className="h-16 w-16 bg-gray-100 rounded flex items-center justify-center flex-shrink-0">
|
||||
@ -524,11 +563,7 @@ export default function Photos() {
|
||||
{photosData.pages > 1 && (
|
||||
<div className="flex justify-center mt-8">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={page === 1}
|
||||
onClick={() => setPage(page - 1)}
|
||||
>
|
||||
<Button variant="outline" disabled={page === 1} onClick={() => setPage(page - 1)}>
|
||||
上一页
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
@ -565,9 +600,7 @@ export default function Photos() {
|
||||
<ImageIcon className="h-16 w-16 text-gray-300" />
|
||||
</div>
|
||||
<h3 className="text-xl font-medium mb-2">暂无照片</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
开始上传您的第一张照片，构建精美的作品集
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-6">开始上传您的第一张照片，构建精美的作品集</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button onClick={() => navigate('/photos/upload')}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
@ -588,9 +621,7 @@ export default function Photos() {
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑照片</DialogTitle>
|
||||
<DialogDescription>
|
||||
修改照片的基本信息
|
||||
</DialogDescription>
|
||||
<DialogDescription>修改照片的基本信息</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
@ -599,7 +630,7 @@ export default function Photos() {
|
||||
<Input
|
||||
id="edit-title"
|
||||
value={editForm.title}
|
||||
onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
|
||||
onChange={e => setEditForm({ ...editForm, title: e.target.value })}
|
||||
placeholder="照片标题"
|
||||
/>
|
||||
</div>
|
||||
@ -609,7 +640,7 @@ export default function Photos() {
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
value={editForm.description}
|
||||
onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
|
||||
onChange={e => setEditForm({ ...editForm, description: e.target.value })}
|
||||
placeholder="照片描述"
|
||||
rows={3}
|
||||
/>
|
||||
@ -617,7 +648,10 @@ export default function Photos() {
|
||||
|
||||
<div>
|
||||
<Label htmlFor="edit-status">状态</Label>
|
||||
<Select value={editForm.status} onValueChange={(value) => setEditForm({ ...editForm, status: value as any })}>
|
||||
<Select
|
||||
value={editForm.status}
|
||||
onValueChange={value => setEditForm({ ...editForm, status: value as any })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
@ -646,9 +680,7 @@ export default function Photos() {
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{viewingPhoto?.title}</DialogTitle>
|
||||
<DialogDescription>
|
||||
照片详细信息
|
||||
</DialogDescription>
|
||||
<DialogDescription>照片详细信息</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{viewingPhoto && (
|
||||
@ -667,7 +699,9 @@ export default function Photos() {
|
||||
|
||||
<div>
|
||||
<Label className="text-sm font-medium">文件大小</Label>
|
||||
<p className="text-sm text-muted-foreground">{formatFileSize(viewingPhoto.fileSize)}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{formatFileSize(viewingPhoto.fileSize)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -696,7 +730,7 @@ export default function Photos() {
|
||||
<div>
|
||||
<Label className="text-sm font-medium">分类</Label>
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{viewingPhoto.categories.map((category) => (
|
||||
{viewingPhoto.categories.map(category => (
|
||||
<Badge key={category.id} variant="secondary">
|
||||
<Folder className="h-3 w-3 mr-1" />
|
||||
{category.name}
|
||||
@ -710,7 +744,7 @@ export default function Photos() {
|
||||
<div>
|
||||
<Label className="text-sm font-medium">标签</Label>
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{viewingPhoto.tags.map((tag) => (
|
||||
{viewingPhoto.tags.map(tag => (
|
||||
<Badge key={tag.id} variant="outline">
|
||||
<Tag className="h-3 w-3 mr-1" />
|
||||
{tag.name}
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { settingsService } from '@/services/settingsService'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
Settings as SettingsIcon,
|
||||
Globe,
|
||||
Database,
|
||||
Shield,
|
||||
Bell,
|
||||
Upload,
|
||||
Server,
|
||||
Cpu,
|
||||
Database,
|
||||
Globe,
|
||||
HardDrive,
|
||||
RefreshCw,
|
||||
Save,
|
||||
Server,
|
||||
Settings as SettingsIcon,
|
||||
Shield,
|
||||
Trash2,
|
||||
HardDrive,
|
||||
Cpu,
|
||||
Upload,
|
||||
} from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { settingsService } from '@/services/settingsService'
|
||||
|
||||
interface SystemSettings {
|
||||
site: {
|
||||
@ -103,20 +103,22 @@ interface SystemStatus {
|
||||
|
||||
export default function Settings() {
|
||||
const queryClient = useQueryClient()
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'upload' | 'security' | 'performance' | 'notifications' | 'backup' | 'system'>('general')
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
'general' | 'upload' | 'security' | 'performance' | 'notifications' | 'backup' | 'system'
|
||||
>('general')
|
||||
const [isDirty, setIsDirty] = useState(false)
|
||||
|
||||
// 获取系统设置
|
||||
const { data: settings } = useQuery<SystemSettings>({
|
||||
queryKey: ['settings'],
|
||||
queryFn: settingsService.getSettings
|
||||
queryFn: settingsService.getSettings,
|
||||
})
|
||||
|
||||
// 获取系统状态
|
||||
const { data: status } = useQuery<SystemStatus>({
|
||||
queryKey: ['system-status'],
|
||||
queryFn: settingsService.getSystemStatus,
|
||||
refetchInterval: 30000 // 30秒刷新一次
|
||||
refetchInterval: 30000, // 30秒刷新一次
|
||||
})
|
||||
|
||||
// 更新设置
|
||||
@ -129,7 +131,7 @@ export default function Settings() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '保存失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 系统操作
|
||||
@ -141,7 +143,7 @@ export default function Settings() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '操作失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleSaveSettings = () => {
|
||||
@ -168,7 +170,7 @@ export default function Settings() {
|
||||
{ id: 'performance', label: '性能设置', icon: Cpu },
|
||||
{ id: 'notifications', label: '通知设置', icon: Bell },
|
||||
{ id: 'backup', label: '备份设置', icon: Database },
|
||||
{ id: 'system', label: '系统状态', icon: Server }
|
||||
{ id: 'system', label: '系统状态', icon: Server },
|
||||
]
|
||||
|
||||
const renderGeneralSettings = () => (
|
||||
@ -184,7 +186,7 @@ export default function Settings() {
|
||||
<Input
|
||||
id="site-title"
|
||||
value={settings?.site.title || ''}
|
||||
onChange={(e) => updateSetting('site', 'title', e.target.value)}
|
||||
onChange={e => updateSetting('site', 'title', e.target.value)}
|
||||
placeholder="摄影作品集"
|
||||
/>
|
||||
</div>
|
||||
@ -194,7 +196,7 @@ export default function Settings() {
|
||||
id="contact-email"
|
||||
type="email"
|
||||
value={settings?.site.contactEmail || ''}
|
||||
onChange={(e) => updateSetting('site', 'contactEmail', e.target.value)}
|
||||
onChange={e => updateSetting('site', 'contactEmail', e.target.value)}
|
||||
placeholder="contact@example.com"
|
||||
/>
|
||||
</div>
|
||||
@ -205,7 +207,7 @@ export default function Settings() {
|
||||
<Textarea
|
||||
id="site-description"
|
||||
value={settings?.site.description || ''}
|
||||
onChange={(e) => updateSetting('site', 'description', e.target.value)}
|
||||
onChange={e => updateSetting('site', 'description', e.target.value)}
|
||||
placeholder="分享摄影作品，记录美好时光"
|
||||
rows={3}
|
||||
/>
|
||||
@ -216,7 +218,7 @@ export default function Settings() {
|
||||
<Input
|
||||
id="site-keywords"
|
||||
value={settings?.site.keywords || ''}
|
||||
onChange={(e) => updateSetting('site', 'keywords', e.target.value)}
|
||||
onChange={e => updateSetting('site', 'keywords', e.target.value)}
|
||||
placeholder="摄影, 作品集, 艺术, 照片"
|
||||
/>
|
||||
</div>
|
||||
@ -226,7 +228,7 @@ export default function Settings() {
|
||||
<Input
|
||||
id="copyright"
|
||||
value={settings?.site.copyright || ''}
|
||||
onChange={(e) => updateSetting('site', 'copyright', e.target.value)}
|
||||
onChange={e => updateSetting('site', 'copyright', e.target.value)}
|
||||
placeholder="© 2024 摄影作品集. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
@ -249,7 +251,7 @@ export default function Settings() {
|
||||
id="max-file-size"
|
||||
type="number"
|
||||
value={settings?.upload.maxFileSize || 10}
|
||||
onChange={(e) => updateSetting('upload', 'maxFileSize', parseInt(e.target.value))}
|
||||
onChange={e => updateSetting('upload', 'maxFileSize', parseInt(e.target.value))}
|
||||
min="1"
|
||||
max="100"
|
||||
/>
|
||||
@ -260,7 +262,9 @@ export default function Settings() {
|
||||
id="compression-quality"
|
||||
type="number"
|
||||
value={settings?.upload.compressionQuality || 85}
|
||||
onChange={(e) => updateSetting('upload', 'compressionQuality', parseInt(e.target.value))}
|
||||
onChange={e =>
|
||||
updateSetting('upload', 'compressionQuality', parseInt(e.target.value))
|
||||
}
|
||||
min="1"
|
||||
max="100"
|
||||
/>
|
||||
@ -289,7 +293,7 @@ export default function Settings() {
|
||||
<Switch
|
||||
id="watermark-enabled"
|
||||
checked={settings?.upload.watermarkEnabled || false}
|
||||
onCheckedChange={(checked) => updateSetting('upload', 'watermarkEnabled', checked)}
|
||||
onCheckedChange={checked => updateSetting('upload', 'watermarkEnabled', checked)}
|
||||
/>
|
||||
<Label htmlFor="watermark-enabled">启用水印</Label>
|
||||
</div>
|
||||
@ -301,7 +305,7 @@ export default function Settings() {
|
||||
<Input
|
||||
id="watermark-text"
|
||||
value={settings?.upload.watermarkText || ''}
|
||||
onChange={(e) => updateSetting('upload', 'watermarkText', e.target.value)}
|
||||
onChange={e => updateSetting('upload', 'watermarkText', e.target.value)}
|
||||
placeholder="© 摄影师名字"
|
||||
/>
|
||||
</div>
|
||||
@ -310,7 +314,7 @@ export default function Settings() {
|
||||
<select
|
||||
id="watermark-position"
|
||||
value={settings?.upload.watermarkPosition || 'bottom-right'}
|
||||
onChange={(e) => updateSetting('upload', 'watermarkPosition', e.target.value)}
|
||||
onChange={e => updateSetting('upload', 'watermarkPosition', e.target.value)}
|
||||
className="w-full p-2 border rounded"
|
||||
>
|
||||
<option value="top-left">左上角</option>
|
||||
@ -341,7 +345,7 @@ export default function Settings() {
|
||||
id="jwt-expiration"
|
||||
type="number"
|
||||
value={settings?.security.jwtExpiration || 24}
|
||||
onChange={(e) => updateSetting('security', 'jwtExpiration', parseInt(e.target.value))}
|
||||
onChange={e => updateSetting('security', 'jwtExpiration', parseInt(e.target.value))}
|
||||
min="1"
|
||||
max="168"
|
||||
/>
|
||||
@ -352,7 +356,9 @@ export default function Settings() {
|
||||
id="max-login-attempts"
|
||||
type="number"
|
||||
value={settings?.security.maxLoginAttempts || 5}
|
||||
onChange={(e) => updateSetting('security', 'maxLoginAttempts', parseInt(e.target.value))}
|
||||
onChange={e =>
|
||||
updateSetting('security', 'maxLoginAttempts', parseInt(e.target.value))
|
||||
}
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
@ -364,7 +370,7 @@ export default function Settings() {
|
||||
<Switch
|
||||
id="enable-2fa"
|
||||
checked={settings?.security.enableTwoFactor || false}
|
||||
onCheckedChange={(checked) => updateSetting('security', 'enableTwoFactor', checked)}
|
||||
onCheckedChange={checked => updateSetting('security', 'enableTwoFactor', checked)}
|
||||
/>
|
||||
<Label htmlFor="enable-2fa">启用两步验证</Label>
|
||||
</div>
|
||||
@ -373,7 +379,7 @@ export default function Settings() {
|
||||
<Switch
|
||||
id="enable-audit-log"
|
||||
checked={settings?.security.enableAuditLog || false}
|
||||
onCheckedChange={(checked) => updateSetting('security', 'enableAuditLog', checked)}
|
||||
onCheckedChange={checked => updateSetting('security', 'enableAuditLog', checked)}
|
||||
/>
|
||||
<Label htmlFor="enable-audit-log">启用审计日志</Label>
|
||||
</div>
|
||||
@ -424,7 +430,9 @@ export default function Settings() {
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>连接状态</span>
|
||||
<Badge variant={status?.database.status === 'connected' ? 'default' : 'destructive'}>
|
||||
<Badge
|
||||
variant={status?.database.status === 'connected' ? 'default' : 'destructive'}
|
||||
>
|
||||
{status?.database.status === 'connected' ? '已连接' : '断开连接'}
|
||||
</Badge>
|
||||
</div>
|
||||
@ -496,11 +504,15 @@ export default function Settings() {
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>活跃连接</span>
|
||||
<span className="text-sm text-muted-foreground">{status?.performance.activeConnections}</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{status?.performance.activeConnections}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>响应时间</span>
|
||||
<span className="text-sm text-muted-foreground">{status?.performance.responseTime}ms</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{status?.performance.responseTime}ms
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -565,9 +577,7 @@ export default function Settings() {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<div className="text-center text-muted-foreground">
|
||||
{activeTab} 设置页面开发中...
|
||||
</div>
|
||||
<div className="text-center text-muted-foreground">{activeTab} 设置页面开发中...</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
@ -580,9 +590,7 @@ export default function Settings() {
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">系统设置</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
管理系统配置和运行状态
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1">管理系统配置和运行状态</p>
|
||||
</div>
|
||||
{isDirty && (
|
||||
<Button
|
||||
@ -610,7 +618,9 @@ export default function Settings() {
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as any)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-accent transition-colors ${
|
||||
activeTab === tab.id ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'
|
||||
activeTab === tab.id
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
@ -623,9 +633,7 @@ export default function Settings() {
|
||||
</div>
|
||||
|
||||
{/* 右侧内容 */}
|
||||
<div className="flex-1">
|
||||
{renderTabContent()}
|
||||
</div>
|
||||
<div className="flex-1">{renderTabContent()}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,28 +1,33 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import {
|
||||
Tag as TagIcon,
|
||||
Hash,
|
||||
MoreVertical,
|
||||
Edit,
|
||||
Trash,
|
||||
Plus,
|
||||
Search,
|
||||
Filter,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
TrendingUp,
|
||||
Hash as HashTag
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { tagService } from '@/services/tagService'
|
||||
import { Tag } from '@/types'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
Edit,
|
||||
Filter,
|
||||
Hash,
|
||||
Hash as HashTag,
|
||||
MoreVertical,
|
||||
Plus,
|
||||
Search,
|
||||
Tag as TagIcon,
|
||||
Trash,
|
||||
TrendingUp,
|
||||
} from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export default function Tags() {
|
||||
const queryClient = useQueryClient()
|
||||
@ -34,19 +39,19 @@ export default function Tags() {
|
||||
// 获取标签列表
|
||||
const { data: tagsData, isLoading: tagsLoading } = useQuery<Tag[]>({
|
||||
queryKey: ['tags', { search, sortBy, sortOrder, filterActive }],
|
||||
queryFn: () => tagService.getAllTags()
|
||||
})
|
||||
queryFn: () => tagService.getAllTags(),
|
||||
})
|
||||
|
||||
// 获取标签统计
|
||||
const { data: stats, isLoading: statsLoading } = useQuery({
|
||||
queryKey: ['tag-stats'],
|
||||
queryFn: tagService.getStats
|
||||
queryFn: tagService.getStats,
|
||||
})
|
||||
|
||||
// 获取热门标签
|
||||
const { data: popularTags } = useQuery({
|
||||
queryKey: ['popular-tags'],
|
||||
queryFn: () => tagService.getPopularTags(10)
|
||||
queryFn: () => tagService.getPopularTags(10),
|
||||
})
|
||||
|
||||
// 删除标签
|
||||
@ -59,7 +64,7 @@ export default function Tags() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 切换标签状态
|
||||
@ -73,7 +78,7 @@ export default function Tags() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '更新失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleDeleteTag = (tagId: number, photoCount: number) => {
|
||||
@ -113,9 +118,7 @@ export default function Tags() {
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">标签管理</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
管理照片标签和分类标记
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1">管理照片标签和分类标记</p>
|
||||
</div>
|
||||
<Button className="flex items-center gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
@ -200,7 +203,10 @@ export default function Tags() {
|
||||
key={index}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-1 px-3 py-1 text-sm"
|
||||
style={{ backgroundColor: (tag.color || '#666') + '20', color: tag.color || '#666' }}
|
||||
style={{
|
||||
backgroundColor: (tag.color || '#666') + '20',
|
||||
color: tag.color || '#666',
|
||||
}}
|
||||
>
|
||||
<Hash className="h-3 w-3" />
|
||||
{tag.name}
|
||||
@ -221,14 +227,14 @@ export default function Tags() {
|
||||
<Input
|
||||
placeholder="搜索标签..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={filterActive === undefined ? "default" : "outline"}
|
||||
variant={filterActive === undefined ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilterActive(undefined)}
|
||||
>
|
||||
@ -236,14 +242,14 @@ export default function Tags() {
|
||||
全部
|
||||
</Button>
|
||||
<Button
|
||||
variant={filterActive === true ? "default" : "outline"}
|
||||
variant={filterActive === true ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilterActive(true)}
|
||||
>
|
||||
启用
|
||||
</Button>
|
||||
<Button
|
||||
variant={filterActive === false ? "default" : "outline"}
|
||||
variant={filterActive === false ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilterActive(false)}
|
||||
>
|
||||
@ -267,9 +273,12 @@ export default function Tags() {
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
名称
|
||||
{sortBy === 'name' && (
|
||||
sortOrder === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
)}
|
||||
{sortBy === 'name' &&
|
||||
(sortOrder === 'asc' ? (
|
||||
<ArrowUp className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowDown className="h-3 w-3" />
|
||||
))}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
@ -278,9 +287,12 @@ export default function Tags() {
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
照片数
|
||||
{sortBy === 'photoCount' && (
|
||||
sortOrder === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
)}
|
||||
{sortBy === 'photoCount' &&
|
||||
(sortOrder === 'asc' ? (
|
||||
<ArrowUp className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowDown className="h-3 w-3" />
|
||||
))}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
@ -289,9 +301,12 @@ export default function Tags() {
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
创建时间
|
||||
{sortBy === 'createdAt' && (
|
||||
sortOrder === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
|
||||
)}
|
||||
{sortBy === 'createdAt' &&
|
||||
(sortOrder === 'asc' ? (
|
||||
<ArrowUp className="h-3 w-3" />
|
||||
) : (
|
||||
<ArrowDown className="h-3 w-3" />
|
||||
))}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -313,7 +328,10 @@ export default function Tags() {
|
||||
) : filteredTags?.length ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredTags.map((tag: any) => (
|
||||
<div key={tag.id} className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors">
|
||||
<div
|
||||
key={tag.id}
|
||||
className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className="w-4 h-4 rounded-full border-2"
|
||||
@ -351,9 +369,7 @@ export default function Tags() {
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleToggleStatus(tag.id, tag.isActive)}
|
||||
>
|
||||
<DropdownMenuItem onClick={() => handleToggleStatus(tag.id, tag.isActive)}>
|
||||
{tag.isActive ? '禁用' : '启用'}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { authService } from '@/services/authService'
|
||||
import { categoryService } from '@/services/categoryService'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
const TestApi: React.FC = () => {
|
||||
@ -16,7 +16,7 @@ const TestApi: React.FC = () => {
|
||||
setLoading(true)
|
||||
const response = await authService.login({
|
||||
username: 'admin',
|
||||
password: 'admin123'
|
||||
password: 'admin123',
|
||||
})
|
||||
|
||||
if (response.code === 0) {
|
||||
@ -105,14 +105,14 @@ const TestApi: React.FC = () => {
|
||||
type="text"
|
||||
placeholder="分类名称"
|
||||
value={newCategory.name}
|
||||
onChange={(e) => setNewCategory(prev => ({ ...prev, name: e.target.value }))}
|
||||
onChange={e => setNewCategory(prev => ({ ...prev, name: e.target.value }))}
|
||||
className="flex-1 px-3 py-2 border rounded"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="分类描述"
|
||||
value={newCategory.description}
|
||||
onChange={(e) => setNewCategory(prev => ({ ...prev, description: e.target.value }))}
|
||||
onChange={e => setNewCategory(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="flex-1 px-3 py-2 border rounded"
|
||||
/>
|
||||
<button
|
||||
@ -140,12 +140,13 @@ const TestApi: React.FC = () => {
|
||||
<div>
|
||||
<h3 className="font-medium mb-2">分类列表 ({categories.length})</h3>
|
||||
<div className="space-y-2">
|
||||
{categories.map((category) => (
|
||||
{categories.map(category => (
|
||||
<div key={category.id} className="p-3 bg-gray-50 rounded">
|
||||
<div className="font-medium">{category.name}</div>
|
||||
<div className="text-sm text-gray-600">{category.description}</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
ID: {category.id} | 创建时间: {new Date(category.created_at * 1000).toLocaleString()}
|
||||
ID: {category.id} | 创建时间:{' '}
|
||||
{new Date(category.created_at * 1000).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -1,30 +1,35 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import {
|
||||
Users as UsersIcon,
|
||||
User,
|
||||
MoreVerticalIcon,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { userService } from '@/services/userService'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
CalendarIcon,
|
||||
CrownIcon,
|
||||
EditIcon,
|
||||
TrashIcon,
|
||||
FilterIcon,
|
||||
MailIcon,
|
||||
MoreVerticalIcon,
|
||||
PlusIcon,
|
||||
SearchIcon,
|
||||
FilterIcon,
|
||||
ShieldIcon,
|
||||
TrashIcon,
|
||||
User,
|
||||
UserCheckIcon,
|
||||
Users as UsersIcon,
|
||||
UserXIcon,
|
||||
MailIcon,
|
||||
CalendarIcon,
|
||||
CrownIcon
|
||||
} from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { userService } from '@/services/userService'
|
||||
|
||||
interface UserData {
|
||||
id: number
|
||||
@ -60,17 +65,18 @@ export default function Users() {
|
||||
// 获取用户列表
|
||||
const { data: users, isLoading: usersLoading } = useQuery<UserData[]>({
|
||||
queryKey: ['users', { search, roleFilter, statusFilter }],
|
||||
queryFn: () => userService.getUsers({
|
||||
search,
|
||||
role: roleFilter,
|
||||
isActive: statusFilter
|
||||
})
|
||||
queryFn: () =>
|
||||
userService.getUsers({
|
||||
search,
|
||||
role: roleFilter,
|
||||
isActive: statusFilter,
|
||||
}),
|
||||
})
|
||||
|
||||
// 获取用户统计
|
||||
const { data: stats, isLoading: statsLoading } = useQuery<UserStats>({
|
||||
queryKey: ['user-stats'],
|
||||
queryFn: userService.getStats
|
||||
queryFn: userService.getStats,
|
||||
})
|
||||
|
||||
// 删除用户
|
||||
@ -83,7 +89,7 @@ export default function Users() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 切换用户状态
|
||||
@ -97,7 +103,7 @@ export default function Users() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '更新失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 更新用户角色
|
||||
@ -111,7 +117,7 @@ export default function Users() {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || '更新失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handleDeleteUser = (userId: number, username: string) => {
|
||||
@ -155,8 +161,9 @@ export default function Users() {
|
||||
}
|
||||
|
||||
const filteredUsers = users?.filter(user => {
|
||||
const matchesSearch = user.username.toLowerCase().includes(search.toLowerCase()) ||
|
||||
user.email.toLowerCase().includes(search.toLowerCase())
|
||||
const matchesSearch =
|
||||
user.username.toLowerCase().includes(search.toLowerCase()) ||
|
||||
user.email.toLowerCase().includes(search.toLowerCase())
|
||||
const matchesRole = roleFilter === null || user.role === roleFilter
|
||||
const matchesStatus = statusFilter === null || user.isActive === statusFilter
|
||||
return matchesSearch && matchesRole && matchesStatus
|
||||
@ -168,9 +175,7 @@ export default function Users() {
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">用户管理</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
管理系统用户和权限分配
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-1">管理系统用户和权限分配</p>
|
||||
</div>
|
||||
<Button className="flex items-center gap-2">
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
@ -274,14 +279,14 @@ export default function Users() {
|
||||
<Input
|
||||
placeholder="搜索用户名或邮箱..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={roleFilter === null ? "default" : "outline"}
|
||||
variant={roleFilter === null ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setRoleFilter(null)}
|
||||
>
|
||||
@ -289,7 +294,7 @@ export default function Users() {
|
||||
全部角色
|
||||
</Button>
|
||||
<Button
|
||||
variant={roleFilter === 'admin' ? "default" : "outline"}
|
||||
variant={roleFilter === 'admin' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setRoleFilter('admin')}
|
||||
>
|
||||
@ -297,7 +302,7 @@ export default function Users() {
|
||||
管理员
|
||||
</Button>
|
||||
<Button
|
||||
variant={roleFilter === 'editor' ? "default" : "outline"}
|
||||
variant={roleFilter === 'editor' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setRoleFilter('editor')}
|
||||
>
|
||||
@ -305,7 +310,7 @@ export default function Users() {
|
||||
编辑员
|
||||
</Button>
|
||||
<Button
|
||||
variant={roleFilter === 'viewer' ? "default" : "outline"}
|
||||
variant={roleFilter === 'viewer' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setRoleFilter('viewer')}
|
||||
>
|
||||
@ -316,14 +321,14 @@ export default function Users() {
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={statusFilter === null ? "default" : "outline"}
|
||||
variant={statusFilter === null ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter(null)}
|
||||
>
|
||||
全部状态
|
||||
</Button>
|
||||
<Button
|
||||
variant={statusFilter === true ? "default" : "outline"}
|
||||
variant={statusFilter === true ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter(true)}
|
||||
>
|
||||
@ -331,7 +336,7 @@ export default function Users() {
|
||||
启用
|
||||
</Button>
|
||||
<Button
|
||||
variant={statusFilter === false ? "default" : "outline"}
|
||||
variant={statusFilter === false ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setStatusFilter(false)}
|
||||
>
|
||||
@ -368,8 +373,11 @@ export default function Users() {
|
||||
</div>
|
||||
) : filteredUsers?.length ? (
|
||||
<div className="space-y-4">
|
||||
{filteredUsers.map((user) => (
|
||||
<div key={user.id} className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors">
|
||||
{filteredUsers.map(user => (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="h-12 w-12">
|
||||
<AvatarImage src={user.profile?.avatar} />
|
||||
@ -387,8 +395,11 @@ export default function Users() {
|
||||
<Badge className={getRoleColor(user.role)}>
|
||||
{getRoleIcon(user.role)}
|
||||
<span className="ml-1">
|
||||
{user.role === 'admin' ? '管理员' :
|
||||
user.role === 'editor' ? '编辑员' : '访客'}
|
||||
{user.role === 'admin'
|
||||
? '管理员'
|
||||
: user.role === 'editor'
|
||||
? '编辑员'
|
||||
: '访客'}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
@ -427,9 +438,7 @@ export default function Users() {
|
||||
<ShieldIcon className="h-4 w-4 mr-2" />
|
||||
重置密码
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleToggleStatus(user.id, user.isActive)}
|
||||
>
|
||||
<DropdownMenuItem onClick={() => handleToggleStatus(user.id, user.isActive)}>
|
||||
{user.isActive ? (
|
||||
<>
|
||||
<UserXIcon className="h-4 w-4 mr-2" />
|
||||
@ -444,21 +453,15 @@ export default function Users() {
|
||||
</DropdownMenuItem>
|
||||
{user.role !== 'admin' && (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleUpdateRole(user.id, 'admin')}
|
||||
>
|
||||
<DropdownMenuItem onClick={() => handleUpdateRole(user.id, 'admin')}>
|
||||
<CrownIcon className="h-4 w-4 mr-2" />
|
||||
设为管理员
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleUpdateRole(user.id, 'editor')}
|
||||
>
|
||||
<DropdownMenuItem onClick={() => handleUpdateRole(user.id, 'editor')}>
|
||||
<EditIcon className="h-4 w-4 mr-2" />
|
||||
设为编辑员
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleUpdateRole(user.id, 'viewer')}
|
||||
>
|
||||
<DropdownMenuItem onClick={() => handleUpdateRole(user.id, 'viewer')}>
|
||||
<User className="h-4 w-4 mr-2" />
|
||||
设为访客
|
||||
</DropdownMenuItem>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import axios from 'axios'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
import axios from 'axios'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
const api = axios.create({
|
||||
@ -12,21 +12,21 @@ const api = axios.create({
|
||||
|
||||
// 请求拦截器
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
config => {
|
||||
const { token } = useAuthStore.getState()
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
response => {
|
||||
// 处理后端的响应格式
|
||||
const data = response.data
|
||||
|
||||
@ -39,7 +39,7 @@ api.interceptors.response.use(
|
||||
|
||||
return response
|
||||
},
|
||||
(error) => {
|
||||
error => {
|
||||
const message = error.response?.data?.message || error.message || '请求失败'
|
||||
|
||||
// 显示错误提示
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { LoginRequest, LoginResponse, User } from '@/types'
|
||||
import api from './api'
|
||||
import { User, LoginRequest, LoginResponse } from '@/types'
|
||||
|
||||
export interface RefreshTokenRequest {
|
||||
refresh_token: string
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ApiResponse, Category, PaginatedResponse } from '@/types'
|
||||
import api from './api'
|
||||
import { Category, ApiResponse, PaginatedResponse } from '@/types'
|
||||
|
||||
export interface CreateCategoryRequest {
|
||||
name: string
|
||||
@ -19,7 +19,10 @@ export interface CategoryStats {
|
||||
}
|
||||
|
||||
class CategoryService {
|
||||
async getCategories(page: number = 1, size: number = 10): Promise<ApiResponse<PaginatedResponse<Category>>> {
|
||||
async getCategories(
|
||||
page: number = 1,
|
||||
size: number = 10
|
||||
): Promise<ApiResponse<PaginatedResponse<Category>>> {
|
||||
const response = await api.get('/categories', { params: { page, size } })
|
||||
return response.data
|
||||
}
|
||||
@ -62,8 +65,8 @@ class CategoryService {
|
||||
total: categories.length,
|
||||
active: categories.length,
|
||||
topLevel: categories.length,
|
||||
photoCounts: {}
|
||||
}
|
||||
photoCounts: {},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import api from './api'
|
||||
import { ApiResponse, PhotoStats } from '@/types'
|
||||
import api from './api'
|
||||
|
||||
export interface Photo {
|
||||
id: number
|
||||
|
||||
@ -133,12 +133,16 @@ export const settingsService = {
|
||||
const formData = new FormData()
|
||||
formData.append('config', file)
|
||||
await api.post('/settings/import', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
},
|
||||
|
||||
// 获取系统日志
|
||||
getSystemLogs: async (params: { level?: string; limit?: number; offset?: number }): Promise<any[]> => {
|
||||
getSystemLogs: async (params: {
|
||||
level?: string
|
||||
limit?: number
|
||||
offset?: number
|
||||
}): Promise<any[]> => {
|
||||
const response = await api.get('/system/logs', { params })
|
||||
return response.data
|
||||
},
|
||||
@ -236,5 +240,5 @@ export const settingsService = {
|
||||
getTaskLogs: async (id: string): Promise<any[]> => {
|
||||
const response = await api.get(`/system/tasks/${id}/logs`)
|
||||
return response.data
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { ApiResponse, Tag, TagStats } from '@/types'
|
||||
import api from './api'
|
||||
import { Tag, ApiResponse, TagStats } from '@/types'
|
||||
|
||||
export interface TagWithCount extends Tag {
|
||||
photoCount: number
|
||||
|
||||
@ -153,5 +153,5 @@ export const userService = {
|
||||
// 停用用户账号
|
||||
deactivateUser: async (id: number): Promise<void> => {
|
||||
await api.post(`/users/${id}/deactivate`)
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { User } from '@/types'
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import { User } from '@/types'
|
||||
|
||||
interface AuthState {
|
||||
user: User | null
|
||||
@ -13,7 +13,7 @@ interface AuthState {
|
||||
|
||||
export const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
set => ({
|
||||
user: null,
|
||||
token: null,
|
||||
isAuthenticated: false,
|
||||
@ -40,7 +40,7 @@ export const useAuthStore = create<AuthState>()(
|
||||
}),
|
||||
{
|
||||
name: 'auth-storage',
|
||||
partialize: (state) => ({
|
||||
partialize: state => ({
|
||||
token: state.token,
|
||||
user: state.user,
|
||||
isAuthenticated: state.isAuthenticated,
|
||||
|
||||
Reference in New Issue
Block a user