mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-06 17:46:23 +00:00
619 lines
20 KiB
TypeScript
Vendored
619 lines
20 KiB
TypeScript
Vendored
import { useEffect, useMemo, useState } from 'react'
|
|
import * as z from 'zod'
|
|
import { useForm } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { Plus, Edit, Trash2, Save } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { toast } from 'sonner'
|
|
import dayjs from '@/lib/dayjs'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Input } from '@/components/ui/input'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { DateTimePicker } from '@/components/datetime-picker'
|
|
import { StatusBadge } from '@/components/status-badge'
|
|
import { SettingsSection } from '../components/settings-section'
|
|
import { useUpdateOption } from '../hooks/use-update-option'
|
|
|
|
type Announcement = {
|
|
id: number
|
|
content: string
|
|
publishDate: string
|
|
type: 'default' | 'ongoing' | 'success' | 'warning' | 'error'
|
|
extra?: string
|
|
}
|
|
|
|
type AnnouncementsSectionProps = {
|
|
enabled: boolean
|
|
data: string
|
|
}
|
|
|
|
const announcementSchema = z.object({
|
|
content: z
|
|
.string()
|
|
.min(1, 'Content is required')
|
|
.max(500, 'Content must be less than 500 characters'),
|
|
publishDate: z.string().min(1, 'Publish date is required'),
|
|
type: z.enum(['default', 'ongoing', 'success', 'warning', 'error']),
|
|
extra: z
|
|
.string()
|
|
.max(100, 'Extra must be less than 100 characters')
|
|
.optional(),
|
|
})
|
|
|
|
type AnnouncementFormValues = z.infer<typeof announcementSchema>
|
|
|
|
const typeOptions = [
|
|
{
|
|
value: 'default',
|
|
label: 'Default',
|
|
color: 'bg-gray-500',
|
|
badgeVariant: 'neutral' as const,
|
|
},
|
|
{
|
|
value: 'ongoing',
|
|
label: 'Ongoing',
|
|
color: 'bg-blue-500',
|
|
badgeVariant: 'info' as const,
|
|
},
|
|
{
|
|
value: 'success',
|
|
label: 'Success',
|
|
color: 'bg-green-500',
|
|
badgeVariant: 'success' as const,
|
|
},
|
|
{
|
|
value: 'warning',
|
|
label: 'Warning',
|
|
color: 'bg-orange-500',
|
|
badgeVariant: 'warning' as const,
|
|
},
|
|
{
|
|
value: 'error',
|
|
label: 'Error',
|
|
color: 'bg-red-500',
|
|
badgeVariant: 'danger' as const,
|
|
},
|
|
]
|
|
|
|
export function AnnouncementsSection({
|
|
enabled,
|
|
data,
|
|
}: AnnouncementsSectionProps) {
|
|
const { t } = useTranslation()
|
|
const updateOption = useUpdateOption()
|
|
const [announcements, setAnnouncements] = useState<Announcement[]>([])
|
|
const [isEnabled, setIsEnabled] = useState(enabled)
|
|
const [hasChanges, setHasChanges] = useState(false)
|
|
const [selectedIds, setSelectedIds] = useState<number[]>([])
|
|
const [showDialog, setShowDialog] = useState(false)
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
|
|
const [editingAnnouncement, setEditingAnnouncement] =
|
|
useState<Announcement | null>(null)
|
|
const [deleteTarget, setDeleteTarget] = useState<'single' | 'batch'>('single')
|
|
|
|
const form = useForm<AnnouncementFormValues>({
|
|
resolver: zodResolver(announcementSchema),
|
|
defaultValues: {
|
|
content: '',
|
|
publishDate: new Date().toISOString(),
|
|
type: 'default',
|
|
extra: '',
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const parsed = JSON.parse(data || '[]')
|
|
if (Array.isArray(parsed)) {
|
|
setAnnouncements(
|
|
parsed.map((item, idx) => ({
|
|
...item,
|
|
id: item.id || idx + 1,
|
|
}))
|
|
)
|
|
}
|
|
} catch {
|
|
setAnnouncements([])
|
|
}
|
|
}, [data])
|
|
|
|
useEffect(() => {
|
|
setIsEnabled(enabled)
|
|
}, [enabled])
|
|
|
|
const handleToggleEnabled = async (checked: boolean) => {
|
|
try {
|
|
await updateOption.mutateAsync({
|
|
key: 'console_setting.announcements_enabled',
|
|
value: checked,
|
|
})
|
|
setIsEnabled(checked)
|
|
toast.success(t('Setting saved'))
|
|
} catch {
|
|
toast.error(t('Failed to update setting'))
|
|
}
|
|
}
|
|
|
|
const handleAdd = () => {
|
|
setEditingAnnouncement(null)
|
|
form.reset({
|
|
content: '',
|
|
publishDate: new Date().toISOString(),
|
|
type: 'default',
|
|
extra: '',
|
|
})
|
|
setShowDialog(true)
|
|
}
|
|
|
|
const handleEdit = (announcement: Announcement) => {
|
|
setEditingAnnouncement(announcement)
|
|
form.reset({
|
|
content: announcement.content,
|
|
publishDate: announcement.publishDate,
|
|
type: announcement.type,
|
|
extra: announcement.extra || '',
|
|
})
|
|
setShowDialog(true)
|
|
}
|
|
|
|
const handleDelete = (announcement: Announcement) => {
|
|
setEditingAnnouncement(announcement)
|
|
setDeleteTarget('single')
|
|
setShowDeleteDialog(true)
|
|
}
|
|
|
|
const handleBatchDelete = () => {
|
|
if (selectedIds.length === 0) {
|
|
toast.error(t('Please select items to delete'))
|
|
return
|
|
}
|
|
setDeleteTarget('batch')
|
|
setShowDeleteDialog(true)
|
|
}
|
|
|
|
const confirmDelete = () => {
|
|
if (deleteTarget === 'single' && editingAnnouncement) {
|
|
setAnnouncements((prev) =>
|
|
prev.filter((item) => item.id !== editingAnnouncement.id)
|
|
)
|
|
setHasChanges(true)
|
|
toast.success(t('Announcement deleted. Click "Save Settings" to apply.'))
|
|
} else if (deleteTarget === 'batch') {
|
|
setAnnouncements((prev) =>
|
|
prev.filter((item) => !selectedIds.includes(item.id))
|
|
)
|
|
setSelectedIds([])
|
|
setHasChanges(true)
|
|
toast.success(
|
|
t('{{count}} announcements deleted. Click "Save Settings" to apply.', {
|
|
count: selectedIds.length,
|
|
})
|
|
)
|
|
}
|
|
setShowDeleteDialog(false)
|
|
setEditingAnnouncement(null)
|
|
}
|
|
|
|
const handleSubmitForm = (values: AnnouncementFormValues) => {
|
|
if (editingAnnouncement) {
|
|
setAnnouncements((prev) =>
|
|
prev.map((item) =>
|
|
item.id === editingAnnouncement.id ? { ...item, ...values } : item
|
|
)
|
|
)
|
|
toast.success(t('Announcement updated. Click "Save Settings" to apply.'))
|
|
} else {
|
|
const newId = Math.max(...announcements.map((item) => item.id), 0) + 1
|
|
setAnnouncements((prev) => [...prev, { id: newId, ...values }])
|
|
toast.success(t('Announcement added. Click "Save Settings" to apply.'))
|
|
}
|
|
setHasChanges(true)
|
|
setShowDialog(false)
|
|
}
|
|
|
|
const handleSaveAll = async () => {
|
|
try {
|
|
await updateOption.mutateAsync({
|
|
key: 'console_setting.announcements',
|
|
value: JSON.stringify(announcements),
|
|
})
|
|
setHasChanges(false)
|
|
toast.success(t('Announcements saved successfully'))
|
|
} catch {
|
|
toast.error(t('Failed to save announcements'))
|
|
}
|
|
}
|
|
|
|
const toggleSelectAll = (checked: boolean) => {
|
|
setSelectedIds(checked ? announcements.map((item) => item.id) : [])
|
|
}
|
|
|
|
const toggleSelectOne = (id: number, checked: boolean) => {
|
|
setSelectedIds((prev) =>
|
|
checked ? [...prev, id] : prev.filter((item) => item !== id)
|
|
)
|
|
}
|
|
|
|
const sortedAnnouncements = useMemo(() => {
|
|
return [...announcements].sort((a, b) => {
|
|
return (
|
|
new Date(b.publishDate).getTime() - new Date(a.publishDate).getTime()
|
|
)
|
|
})
|
|
}, [announcements])
|
|
|
|
const getRelativeTime = (date: string) => {
|
|
const now = new Date()
|
|
const past = new Date(date)
|
|
const diffMs = now.getTime() - past.getTime()
|
|
const diffMins = Math.floor(diffMs / 60000)
|
|
const diffHours = Math.floor(diffMins / 60)
|
|
const diffDays = Math.floor(diffHours / 24)
|
|
|
|
if (diffMins < 60) return `${diffMins}m ago`
|
|
if (diffHours < 24) return `${diffHours}h ago`
|
|
return `${diffDays}d ago`
|
|
}
|
|
|
|
return (
|
|
<SettingsSection
|
|
title={t('Announcements')}
|
|
description={t('Broadcast short system notices on the dashboard')}
|
|
>
|
|
<div className='space-y-4'>
|
|
<div className='flex flex-wrap items-center justify-between gap-2'>
|
|
<div className='flex flex-wrap items-center gap-2'>
|
|
<Button onClick={handleAdd} size='sm'>
|
|
<Plus className='mr-2 h-4 w-4' />
|
|
{t('Add Announcement')}
|
|
</Button>
|
|
<Button
|
|
onClick={handleBatchDelete}
|
|
size='sm'
|
|
variant='destructive'
|
|
disabled={selectedIds.length === 0}
|
|
>
|
|
<Trash2 className='mr-2 h-4 w-4' />
|
|
{t('Delete (')}
|
|
{selectedIds.length})
|
|
</Button>
|
|
<Button
|
|
onClick={handleSaveAll}
|
|
size='sm'
|
|
variant='secondary'
|
|
disabled={!hasChanges || updateOption.isPending}
|
|
>
|
|
<Save className='mr-2 h-4 w-4' />
|
|
{updateOption.isPending ? t('Saving...') : t('Save Settings')}
|
|
</Button>
|
|
</div>
|
|
<div className='flex items-center gap-2'>
|
|
<span className='text-muted-foreground text-sm'>
|
|
{t('Enabled')}
|
|
</span>
|
|
<Switch checked={isEnabled} onCheckedChange={handleToggleEnabled} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='rounded-md border'>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className='w-12'>
|
|
<Checkbox
|
|
checked={
|
|
selectedIds.length === announcements.length &&
|
|
announcements.length > 0
|
|
}
|
|
onCheckedChange={toggleSelectAll}
|
|
/>
|
|
</TableHead>
|
|
<TableHead>{t('Content')}</TableHead>
|
|
<TableHead>{t('Publish Date')}</TableHead>
|
|
<TableHead>{t('Type')}</TableHead>
|
|
<TableHead>{t('Extra')}</TableHead>
|
|
<TableHead className='w-32'>{t('Actions')}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sortedAnnouncements.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className='h-24 text-center'>
|
|
{t(
|
|
'No announcements yet. Click "Add Announcement" to create one.'
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
sortedAnnouncements.map((announcement) => (
|
|
<TableRow key={announcement.id}>
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedIds.includes(announcement.id)}
|
|
onCheckedChange={(checked) =>
|
|
toggleSelectOne(announcement.id, checked as boolean)
|
|
}
|
|
/>
|
|
</TableCell>
|
|
<TableCell
|
|
className='max-w-xs truncate'
|
|
title={announcement.content}
|
|
>
|
|
{announcement.content}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className='flex flex-col gap-1'>
|
|
<span className='text-sm font-medium'>
|
|
{getRelativeTime(announcement.publishDate)}
|
|
</span>
|
|
<span className='text-muted-foreground text-xs'>
|
|
{dayjs(announcement.publishDate).format(
|
|
'YYYY-MM-DD HH:mm:ss'
|
|
)}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<StatusBadge
|
|
label={
|
|
typeOptions.find(
|
|
(opt) => opt.value === announcement.type
|
|
)?.label
|
|
}
|
|
variant={
|
|
typeOptions.find(
|
|
(opt) => opt.value === announcement.type
|
|
)?.badgeVariant ?? 'neutral'
|
|
}
|
|
copyable={false}
|
|
/>
|
|
</TableCell>
|
|
<TableCell
|
|
className='text-muted-foreground max-w-xs truncate'
|
|
title={announcement.extra}
|
|
>
|
|
{announcement.extra || '-'}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className='flex gap-2'>
|
|
<Button
|
|
onClick={() => handleEdit(announcement)}
|
|
size='sm'
|
|
variant='ghost'
|
|
>
|
|
<Edit className='h-4 w-4' />
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleDelete(announcement)}
|
|
size='sm'
|
|
variant='ghost'
|
|
>
|
|
<Trash2 className='h-4 w-4' />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={showDialog} onOpenChange={setShowDialog}>
|
|
<DialogContent className='max-w-2xl'>
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{editingAnnouncement
|
|
? t('Edit Announcement')
|
|
: t('Add Announcement')}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t('Create or update system announcements for the dashboard')}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(handleSubmitForm)}
|
|
className='space-y-4'
|
|
>
|
|
<FormField
|
|
control={form.control}
|
|
name='content'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Content')}</FormLabel>
|
|
<FormControl>
|
|
<Textarea
|
|
placeholder={t(
|
|
'Enter announcement content (supports Markdown/HTML)'
|
|
)}
|
|
rows={4}
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t('Maximum 500 characters. Supports Markdown and HTML.')}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name='publishDate'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Publish Date')}</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker
|
|
value={field.value ? new Date(field.value) : undefined}
|
|
onChange={(date) =>
|
|
field.onChange(date ? date.toISOString() : '')
|
|
}
|
|
placeholder={t('Select publish date')}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t(
|
|
'Date and time when this announcement should be displayed'
|
|
)}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name='type'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Type')}</FormLabel>
|
|
<Select
|
|
items={[
|
|
...typeOptions.map((option) => ({
|
|
value: option.value,
|
|
label: (
|
|
<div className='flex items-center gap-2'>
|
|
<div
|
|
className={`h-3 w-3 rounded-full ${option.color}`}
|
|
/>
|
|
{option.label}
|
|
</div>
|
|
),
|
|
})),
|
|
]}
|
|
onValueChange={field.onChange}
|
|
value={field.value}
|
|
>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue
|
|
placeholder={t('Select announcement type')}
|
|
/>
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent alignItemWithTrigger={false}>
|
|
<SelectGroup>
|
|
{typeOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
<div className='flex items-center gap-2'>
|
|
<div
|
|
className={`h-3 w-3 rounded-full ${option.color}`}
|
|
/>
|
|
{option.label}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name='extra'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('Extra Notes (Optional)')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder={t('Additional information')}
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t(
|
|
'Optional supplementary information (max 100 characters)'
|
|
)}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<DialogFooter>
|
|
<Button
|
|
type='button'
|
|
variant='outline'
|
|
onClick={() => setShowDialog(false)}
|
|
>
|
|
{t('Cancel')}
|
|
</Button>
|
|
<Button type='submit'>
|
|
{editingAnnouncement ? t('Update') : t('Add')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</Form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{deleteTarget === 'single'
|
|
? 'This announcement will be removed from the list.'
|
|
: `${selectedIds.length} announcements will be removed from the list.`}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
|
<AlertDialogAction onClick={confirmDelete}>
|
|
{t('Delete')}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</SettingsSection>
|
|
)
|
|
}
|