mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-03 23:06:36 +08:00
[优化] 界面优化
This commit is contained in:
ryan
@@ -1,20 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { EmptyState } from '@/components/feedback/empty-state';
|
||||
import { ErrorState } from '@/components/feedback/error-state';
|
||||
import { InlineMessage } from '@/components/feedback/inline-message';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { useAuth } from '@/components/providers/auth-provider';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { InlineMessage } from '@/components/feedback/inline-message';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { useAuth } from '@/components/providers/auth-provider';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import {
|
||||
createUser,
|
||||
getUser,
|
||||
@@ -93,15 +93,15 @@ function toPayload(values: UserFormValues): UserMutationPayload {
|
||||
};
|
||||
}
|
||||
|
||||
export function UsersPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { user: currentUser } = useAuth();
|
||||
const [page, setPage] = useState(0);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [editingUserId, setEditingUserId] = useState<number | null>(null);
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
export function UsersPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { user: currentUser } = useAuth();
|
||||
const [page, setPage] = useState(0);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [editingUserId, setEditingUserId] = useState<number | null>(null);
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
|
||||
const form = useForm<UserFormValues>({
|
||||
resolver: zodResolver(userSchema),
|
||||
@@ -129,15 +129,15 @@ export function UsersPage() {
|
||||
enabled: isAdmin && editingUserId !== null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (editingUserQuery.data) {
|
||||
form.reset({
|
||||
username: editingUserQuery.data.username,
|
||||
display_name: editingUserQuery.data.display_name || '',
|
||||
password: '',
|
||||
});
|
||||
}
|
||||
}, [editingUserQuery.data, form]);
|
||||
useEffect(() => {
|
||||
if (editingUserQuery.data) {
|
||||
form.reset({
|
||||
username: editingUserQuery.data.username,
|
||||
display_name: editingUserQuery.data.display_name || '',
|
||||
password: '',
|
||||
});
|
||||
}
|
||||
}, [editingUserQuery.data, form]);
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async (values: UserFormValues) => {
|
||||
@@ -155,13 +155,13 @@ export function UsersPage() {
|
||||
await createUser(payload);
|
||||
return '用户已创建。';
|
||||
},
|
||||
onSuccess: async (message) => {
|
||||
setFeedback({ tone: 'success', message });
|
||||
setEditingUserId(null);
|
||||
setIsEditorOpen(false);
|
||||
form.reset(defaultValues);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: usersListQueryKey }),
|
||||
onSuccess: async (message) => {
|
||||
setFeedback({ tone: 'success', message });
|
||||
setEditingUserId(null);
|
||||
setIsEditorOpen(false);
|
||||
form.reset(defaultValues);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: usersListQueryKey }),
|
||||
queryClient.invalidateQueries({ queryKey: ['users', 'detail'] }),
|
||||
]);
|
||||
},
|
||||
@@ -198,7 +198,7 @@ export function UsersPage() {
|
||||
const activeQuery = searchKeyword.length > 0 ? searchQuery : usersQuery;
|
||||
const users = useMemo(() => activeQuery.data ?? [], [activeQuery.data]);
|
||||
|
||||
const handleSearchSubmit = () => {
|
||||
const handleSearchSubmit = () => {
|
||||
setFeedback(null);
|
||||
setPage(0);
|
||||
setSearchKeyword(searchInput.trim());
|
||||
@@ -211,25 +211,25 @@ export function UsersPage() {
|
||||
setFeedback(null);
|
||||
};
|
||||
|
||||
const handleResetForm = () => {
|
||||
setEditingUserId(null);
|
||||
setIsEditorOpen(false);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingUserId(null);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (targetUser: UserItem) => {
|
||||
setFeedback(null);
|
||||
setEditingUserId(targetUser.id);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
const handleResetForm = () => {
|
||||
setEditingUserId(null);
|
||||
setIsEditorOpen(false);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingUserId(null);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (targetUser: UserItem) => {
|
||||
setFeedback(null);
|
||||
setEditingUserId(targetUser.id);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleManage = (targetUser: UserItem, action: ManageUserAction) => {
|
||||
const actionText = {
|
||||
@@ -258,10 +258,10 @@ export function UsersPage() {
|
||||
});
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='用户管理'
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='用户管理'
|
||||
description='阶段 4 已迁移用户管理页面，但当前账户没有管理员权限。'
|
||||
/>
|
||||
<EmptyState
|
||||
@@ -272,24 +272,23 @@ export function UsersPage() {
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='用户管理'
|
||||
description='支持搜索、分页、创建、编辑以及启用、封禁、权限调整等常见账户管理动作。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={handleCreate}>
|
||||
新建用户
|
||||
</PrimaryButton>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<AppCard
|
||||
title='用户列表'
|
||||
description='搜索会切换到全量匹配结果；分页模式下按服务器默认每页 10 条加载。'
|
||||
return (
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='用户管理'
|
||||
description='支持搜索、分页、创建、编辑以及启用、封禁、权限调整等常见账户管理动作。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={handleCreate}>
|
||||
新建用户
|
||||
</PrimaryButton>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<AppCard
|
||||
title='用户列表'
|
||||
action={
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<SecondaryButton
|
||||
@@ -420,67 +419,67 @@ export function UsersPage() {
|
||||
)}
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
<AppModal
|
||||
isOpen={isEditorOpen}
|
||||
onClose={handleResetForm}
|
||||
title={editingUserId ? '编辑用户' : '创建新用户'}
|
||||
description={editingUserId ? '可更新用户名、显示名称与密码。留空密码表示不修改。' : '新建用户默认创建为普通用户。'}
|
||||
footer={
|
||||
<div className='flex flex-wrap justify-end gap-3'>
|
||||
<SecondaryButton type='button' onClick={handleResetForm} disabled={saveMutation.isPending}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type='submit' form='user-editor-form' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingUserId ? '保存修改' : '创建用户'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{editingUserId && editingUserQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : editingUserId && editingUserQuery.isError ? (
|
||||
<ErrorState title='用户详情加载失败' description={getErrorMessage(editingUserQuery.error)} />
|
||||
) : (
|
||||
<form id='user-editor-form' className='space-y-5' onSubmit={handleSubmit}>
|
||||
<ResourceField label='用户名' error={form.formState.errors.username?.message}>
|
||||
<ResourceInput placeholder='请输入用户名' {...form.register('username')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label='显示名称' error={form.formState.errors.display_name?.message}>
|
||||
<ResourceInput placeholder='请输入显示名称' {...form.register('display_name')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField
|
||||
label={editingUserId ? '新密码' : '密码'}
|
||||
hint={editingUserId ? '留空表示保持原密码不变。' : '密码长度需为 8 到 20 个字符。'}
|
||||
error={form.formState.errors.password?.message}
|
||||
>
|
||||
<ResourceInput type='password' placeholder='请输入密码' {...form.register('password')} />
|
||||
</ResourceField>
|
||||
|
||||
{editingUserId && editingUserQuery.data ? (
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>绑定邮箱</p>
|
||||
<p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
|
||||
{editingUserQuery.data.email || '未绑定'}
|
||||
</p>
|
||||
</div>
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>第三方账号</p>
|
||||
<p className='mt-2 text-sm text-[var(--foreground-primary)]'>
|
||||
GitHub：{editingUserQuery.data.github_id || '未绑定'}
|
||||
</p>
|
||||
<p className='mt-1 text-sm text-[var(--foreground-primary)]'>
|
||||
微信：{editingUserQuery.data.wechat_id || '未绑定'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</form>
|
||||
)}
|
||||
</AppModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
<AppModal
|
||||
isOpen={isEditorOpen}
|
||||
onClose={handleResetForm}
|
||||
title={editingUserId ? '编辑用户' : '创建新用户'}
|
||||
description={editingUserId ? '可更新用户名、显示名称与密码。留空密码表示不修改。' : '新建用户默认创建为普通用户。'}
|
||||
footer={
|
||||
<div className='flex flex-wrap justify-end gap-3'>
|
||||
<SecondaryButton type='button' onClick={handleResetForm} disabled={saveMutation.isPending}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type='submit' form='user-editor-form' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingUserId ? '保存修改' : '创建用户'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{editingUserId && editingUserQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : editingUserId && editingUserQuery.isError ? (
|
||||
<ErrorState title='用户详情加载失败' description={getErrorMessage(editingUserQuery.error)} />
|
||||
) : (
|
||||
<form id='user-editor-form' className='space-y-5' onSubmit={handleSubmit}>
|
||||
<ResourceField label='用户名' error={form.formState.errors.username?.message}>
|
||||
<ResourceInput placeholder='请输入用户名' {...form.register('username')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label='显示名称' error={form.formState.errors.display_name?.message}>
|
||||
<ResourceInput placeholder='请输入显示名称' {...form.register('display_name')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField
|
||||
label={editingUserId ? '新密码' : '密码'}
|
||||
hint={editingUserId ? '留空表示保持原密码不变。' : '密码长度需为 8 到 20 个字符。'}
|
||||
error={form.formState.errors.password?.message}
|
||||
>
|
||||
<ResourceInput type='password' placeholder='请输入密码' {...form.register('password')} />
|
||||
</ResourceField>
|
||||
|
||||
{editingUserId && editingUserQuery.data ? (
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>绑定邮箱</p>
|
||||
<p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
|
||||
{editingUserQuery.data.email || '未绑定'}
|
||||
</p>
|
||||
</div>
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>第三方账号</p>
|
||||
<p className='mt-2 text-sm text-[var(--foreground-primary)]'>
|
||||
GitHub：{editingUserQuery.data.github_id || '未绑定'}
|
||||
</p>
|
||||
<p className='mt-1 text-sm text-[var(--foreground-primary)]'>
|
||||
微信：{editingUserQuery.data.wechat_id || '未绑定'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</form>
|
||||
)}
|
||||
</AppModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user