添加管理端和移动端的多个新功能模块，包括文件上传、在线地图、用户认证、系统设置等，优化代码结构，提升可维护性和用户体验。
This commit is contained in:
629
client/admin/pages_settings.tsx
Normal file
629
client/admin/pages_settings.tsx
Normal file
@@ -0,0 +1,629 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Layout, Menu, Button, Table, Space,
|
||||
Form, Input, Select, message, Modal,
|
||||
Card, Spin, Row, Col, Breadcrumb, Avatar,
|
||||
Dropdown, ConfigProvider, theme, Typography,
|
||||
Switch, Badge, Image, Upload, Divider, Descriptions,
|
||||
Popconfirm, Tag, Statistic, DatePicker, Radio, Progress, Tabs, List, Alert, Collapse, Empty, Drawer, InputNumber,ColorPicker,
|
||||
Popover
|
||||
} from 'antd';
|
||||
import {
|
||||
UploadOutlined,
|
||||
ReloadOutlined,
|
||||
SaveOutlined,
|
||||
BgColorsOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { debounce } from 'lodash';
|
||||
import {
|
||||
useQuery,
|
||||
useMutation,
|
||||
useQueryClient,
|
||||
} from '@tanstack/react-query';
|
||||
import dayjs from 'dayjs';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
import localeData from 'dayjs/plugin/localeData';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import type {
|
||||
FileLibrary, FileCategory, KnowInfo, SystemSetting, SystemSettingValue
|
||||
} from '../share/types.ts';
|
||||
|
||||
import {
|
||||
SystemSettingGroup,
|
||||
SystemSettingKey,
|
||||
ThemeMode,
|
||||
FontSize,
|
||||
CompactMode,
|
||||
AllowedFileType
|
||||
} from '../share/types.ts';
|
||||
|
||||
|
||||
import { getEnumOptions } from './utils.ts';
|
||||
|
||||
import {
|
||||
SystemAPI,
|
||||
} from './api.ts';
|
||||
|
||||
import { useTheme } from './hooks_sys.tsx';
|
||||
|
||||
import { Uploader } from './components_uploader.tsx';
|
||||
|
||||
// 配置 dayjs 插件
|
||||
dayjs.extend(weekday);
|
||||
dayjs.extend(localeData);
|
||||
|
||||
// 设置 dayjs 语言
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
// 分组标题映射
|
||||
const GROUP_TITLES: Record<typeof SystemSettingGroup[keyof typeof SystemSettingGroup], string> = {
|
||||
[SystemSettingGroup.BASIC]: '基础设置',
|
||||
[SystemSettingGroup.FEATURE]: '功能设置',
|
||||
[SystemSettingGroup.UPLOAD]: '上传设置',
|
||||
[SystemSettingGroup.NOTIFICATION]: '通知设置'
|
||||
};
|
||||
|
||||
// 分组描述映射
|
||||
const GROUP_DESCRIPTIONS: Record<typeof SystemSettingGroup[keyof typeof SystemSettingGroup], string> = {
|
||||
[SystemSettingGroup.BASIC]: '配置站点的基本信息',
|
||||
[SystemSettingGroup.FEATURE]: '配置系统功能的开启状态',
|
||||
[SystemSettingGroup.UPLOAD]: '配置文件上传相关的参数',
|
||||
[SystemSettingGroup.NOTIFICATION]: '配置系统通知的触发条件'
|
||||
};
|
||||
|
||||
// 定义预设配色方案
|
||||
const COLOR_SCHEMES = {
|
||||
DEFAULT: {
|
||||
name: '默认',
|
||||
primary: '#1890ff',
|
||||
background: '#f0f2f5',
|
||||
text: '#000000'
|
||||
},
|
||||
DARK: {
|
||||
name: '深色',
|
||||
primary: '#177ddc',
|
||||
background: '#141414',
|
||||
text: '#ffffff'
|
||||
},
|
||||
LIGHT: {
|
||||
name: '浅色',
|
||||
primary: '#40a9ff',
|
||||
background: '#ffffff',
|
||||
text: '#000000'
|
||||
},
|
||||
BLUE: {
|
||||
name: '蓝色',
|
||||
primary: '#096dd9',
|
||||
background: '#e6f7ff',
|
||||
text: '#003a8c'
|
||||
},
|
||||
GREEN: {
|
||||
name: '绿色',
|
||||
primary: '#52c41a',
|
||||
background: '#f6ffed',
|
||||
text: '#135200'
|
||||
},
|
||||
WARM: {
|
||||
name: '暖橙',
|
||||
primary: '#fa8c16',
|
||||
background: '#fff7e6',
|
||||
text: '#873800'
|
||||
},
|
||||
SUNSET: {
|
||||
name: '日落',
|
||||
primary: '#f5222d',
|
||||
background: '#fff1f0',
|
||||
text: '#820014'
|
||||
},
|
||||
GOLDEN: {
|
||||
name: '金色',
|
||||
primary: '#faad14',
|
||||
background: '#fffbe6',
|
||||
text: '#614700'
|
||||
},
|
||||
CORAL: {
|
||||
name: '珊瑚',
|
||||
primary: '#ff7a45',
|
||||
background: '#fff2e8',
|
||||
text: '#ad2102'
|
||||
},
|
||||
ROSE: {
|
||||
name: '玫瑰',
|
||||
primary: '#eb2f96',
|
||||
background: '#fff0f6',
|
||||
text: '#9e1068'
|
||||
}
|
||||
};
|
||||
|
||||
// 颜色选择器组件
|
||||
// const ColorPicker: React.FC<{
|
||||
// value?: string;
|
||||
// onChange?: (color: string) => void;
|
||||
// label?: string;
|
||||
// }> = ({ value = '#1890ff', onChange, label = '选择颜色' }) => {
|
||||
// const [color, setColor] = useState(value);
|
||||
// const [open, setOpen] = useState(false);
|
||||
|
||||
// // 更新颜色（预览）
|
||||
// const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// const newColor = e.target.value;
|
||||
// setColor(newColor);
|
||||
// };
|
||||
|
||||
// // 关闭时确认颜色
|
||||
// const handleOpenChange = (visible: boolean) => {
|
||||
// if (!visible && color) {
|
||||
// onChange?.(color);
|
||||
// }
|
||||
// setOpen(visible);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Popover
|
||||
// open={open}
|
||||
// onOpenChange={handleOpenChange}
|
||||
// trigger="click"
|
||||
// content={
|
||||
// <div style={{ padding: '8px' }}>
|
||||
// <Input
|
||||
// type="color"
|
||||
// value={color}
|
||||
// onChange={handleColorChange}
|
||||
// style={{ width: 60, cursor: 'pointer' }}
|
||||
// />
|
||||
// </div>
|
||||
// }
|
||||
// >
|
||||
// <Button
|
||||
// icon={<BgColorsOutlined />}
|
||||
// style={{
|
||||
// backgroundColor: color,
|
||||
// borderColor: color,
|
||||
// color: '#fff'
|
||||
// }}
|
||||
// >
|
||||
// {label}
|
||||
// </Button>
|
||||
// </Popover>
|
||||
// );
|
||||
// };
|
||||
|
||||
// 基础设置页面
|
||||
export const SettingsPage = () => {
|
||||
const [form] = Form.useForm();
|
||||
const queryClient = useQueryClient();
|
||||
const { isDark } = useTheme();
|
||||
|
||||
// 获取系统设置
|
||||
const { data: settingsData, isLoading: isLoadingSettings } = useQuery({
|
||||
queryKey: ['systemSettings'],
|
||||
queryFn: SystemAPI.getSettings,
|
||||
});
|
||||
|
||||
// 更新系统设置
|
||||
const updateSettingsMutation = useMutation({
|
||||
mutationFn: (values: Partial<SystemSetting>[]) => SystemAPI.updateSettings(values),
|
||||
onSuccess: () => {
|
||||
message.success('基础设置已更新');
|
||||
queryClient.invalidateQueries({ queryKey: ['systemSettings'] });
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('更新基础设置失败');
|
||||
console.error('更新基础设置失败:', error);
|
||||
},
|
||||
});
|
||||
|
||||
// 重置系统设置
|
||||
const resetSettingsMutation = useMutation({
|
||||
mutationFn: SystemAPI.resetSettings,
|
||||
onSuccess: () => {
|
||||
message.success('基础设置已重置');
|
||||
queryClient.invalidateQueries({ queryKey: ['systemSettings'] });
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('重置基础设置失败');
|
||||
console.error('重置基础设置失败:', error);
|
||||
},
|
||||
});
|
||||
|
||||
// 初始化表单数据
|
||||
useEffect(() => {
|
||||
if (settingsData) {
|
||||
const formValues = settingsData.reduce((acc: Record<string, any>, group) => {
|
||||
group.settings.forEach(setting => {
|
||||
// 根据值的类型进行转换
|
||||
let value = setting.value;
|
||||
if (typeof value === 'string') {
|
||||
if (value === 'true' || value === 'false') {
|
||||
value = value === 'true';
|
||||
} else if (!isNaN(Number(value)) && !value.includes('.')) {
|
||||
value = parseInt(value, 10);
|
||||
} else if (setting.key === SystemSettingKey.ALLOWED_FILE_TYPES) {
|
||||
value = (value ? (value as string).split(',') : []) as unknown as string;
|
||||
}
|
||||
}
|
||||
acc[setting.key] = value;
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
form.setFieldsValue(formValues);
|
||||
}
|
||||
}, [settingsData, form]);
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async (values: Record<string, SystemSettingValue>) => {
|
||||
const settings = Object.entries(values).map(([key, value]) => ({
|
||||
key: key as typeof SystemSettingKey[keyof typeof SystemSettingKey],
|
||||
value: String(value),
|
||||
group: key.startsWith('SITE_') ? SystemSettingGroup.BASIC :
|
||||
key.startsWith('ENABLE_') || key.includes('LOGIN_') || key.includes('SESSION_') ? SystemSettingGroup.FEATURE :
|
||||
key.includes('UPLOAD_') || key.includes('FILE_') || key.includes('IMAGE_') ? SystemSettingGroup.UPLOAD :
|
||||
SystemSettingGroup.NOTIFICATION
|
||||
}));
|
||||
updateSettingsMutation.mutate(settings);
|
||||
};
|
||||
|
||||
// 处理重置
|
||||
const handleReset = () => {
|
||||
Modal.confirm({
|
||||
title: '确认重置',
|
||||
content: '确定要将所有设置重置为默认值吗？此操作不可恢复。',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
resetSettingsMutation.mutate();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 根据设置类型渲染不同的输入控件
|
||||
const renderSettingInput = (setting: SystemSetting) => {
|
||||
const value = setting.value;
|
||||
|
||||
if (typeof value === 'boolean' || value === 'true' || value === 'false') {
|
||||
return <Switch checkedChildren="开启" unCheckedChildren="关闭" />;
|
||||
}
|
||||
|
||||
if (setting.key === SystemSettingKey.ALLOWED_FILE_TYPES) {
|
||||
return <Select
|
||||
mode="tags"
|
||||
placeholder="请输入允许的文件类型"
|
||||
tokenSeparators={[',']}
|
||||
options={Object.values(AllowedFileType).map(type => ({
|
||||
label: type.toUpperCase(),
|
||||
value: type
|
||||
}))}
|
||||
/>;
|
||||
}
|
||||
|
||||
if (setting.key.includes('MAX_SIZE') || setting.key.includes('ATTEMPTS') ||
|
||||
setting.key.includes('TIMEOUT') || setting.key.includes('MAX_WIDTH')) {
|
||||
return <InputNumber min={1} style={{ width: '100%' }} />;
|
||||
}
|
||||
|
||||
if (setting.key === SystemSettingKey.SITE_LOGO || setting.key === SystemSettingKey.SITE_FAVICON) {
|
||||
return (
|
||||
<div>
|
||||
{value && <img src={String(value)} alt="图片" style={{ width: 100, height: 100, objectFit: 'contain', marginBottom: 8 }} />}
|
||||
<div style={{ width: 100 }}>
|
||||
<Uploader
|
||||
maxSize={2 * 1024 * 1024}
|
||||
prefix={setting.key === SystemSettingKey.SITE_LOGO ? 'logo/' : 'favicon/'}
|
||||
allowedTypes={['image/jpeg', 'image/png', 'image/svg+xml', 'image/x-icon']}
|
||||
onSuccess={(fileUrl) => {
|
||||
form.setFieldValue(setting.key, fileUrl);
|
||||
updateSettingsMutation.mutate([{
|
||||
key: setting.key,
|
||||
value: fileUrl,
|
||||
group: SystemSettingGroup.BASIC
|
||||
}]);
|
||||
}}
|
||||
onError={(error) => {
|
||||
message.error(`上传失败：${error.message}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <Input placeholder={`请输入${setting.description || setting.key}`} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
title={
|
||||
<Space>
|
||||
<Title level={2} style={{ margin: 0 }}>系统设置</Title>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={handleReset}
|
||||
loading={resetSettingsMutation.isPending}
|
||||
>
|
||||
重置默认
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Spin spinning={isLoadingSettings || updateSettingsMutation.isPending}>
|
||||
<Tabs
|
||||
type="card"
|
||||
items={Object.values(SystemSettingGroup).map(group => ({
|
||||
key: group,
|
||||
label: String(GROUP_TITLES[group]),
|
||||
children: (
|
||||
<div>
|
||||
<Alert
|
||||
message={GROUP_DESCRIPTIONS[group]}
|
||||
type="info"
|
||||
showIcon
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
{settingsData
|
||||
?.find(g => g.name === group)
|
||||
?.settings.map(setting => (
|
||||
<Form.Item
|
||||
key={setting.key}
|
||||
label={setting.description || setting.key}
|
||||
name={setting.key}
|
||||
rules={[{ required: true, message: `请输入${setting.description || setting.key}` }]}
|
||||
>
|
||||
{renderSettingInput(setting)}
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
icon={<SaveOutlined />}
|
||||
loading={updateSettingsMutation.isPending}
|
||||
>
|
||||
保存设置
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}))}
|
||||
/>
|
||||
</Spin>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 主题设置页面
|
||||
export const ThemeSettingsPage = () => {
|
||||
const { isDark, currentTheme, updateTheme, saveTheme, resetTheme } = useTheme();
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 处理配色方案选择
|
||||
const handleColorSchemeChange = (schemeName: keyof typeof COLOR_SCHEMES) => {
|
||||
const scheme = COLOR_SCHEMES[schemeName];
|
||||
form.setFieldsValue({
|
||||
primary_color: scheme.primary,
|
||||
background_color: scheme.background,
|
||||
text_color: scheme.text
|
||||
});
|
||||
updateTheme({
|
||||
primary_color: scheme.primary,
|
||||
background_color: scheme.background,
|
||||
text_color: scheme.text
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化表单数据
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
theme_mode: currentTheme.theme_mode,
|
||||
primary_color: currentTheme.primary_color,
|
||||
background_color: currentTheme.background_color || (isDark ? '#141414' : '#f0f2f5'),
|
||||
font_size: currentTheme.font_size,
|
||||
is_compact: currentTheme.is_compact
|
||||
});
|
||||
}, [currentTheme, form, isDark]);
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async (values: any) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await saveTheme(values);
|
||||
} catch (error) {
|
||||
message.error('保存主题设置失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理重置
|
||||
const handleReset = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await resetTheme();
|
||||
} catch (error) {
|
||||
message.error('重置主题设置失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理表单值变化 - 实时预览
|
||||
const handleValuesChange = (changedValues: any) => {
|
||||
updateTheme(changedValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={2}>主题设置</Title>
|
||||
<Card>
|
||||
<Spin spinning={loading}>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
onValuesChange={handleValuesChange}
|
||||
initialValues={{
|
||||
theme_mode: currentTheme.theme_mode,
|
||||
primary_color: currentTheme.primary_color,
|
||||
background_color: currentTheme.background_color || (isDark ? '#141414' : '#f0f2f5'),
|
||||
font_size: currentTheme.font_size,
|
||||
is_compact: currentTheme.is_compact
|
||||
}}
|
||||
>
|
||||
{/* 配色方案选择 */}
|
||||
<Form.Item label="预设配色方案">
|
||||
<Space wrap>
|
||||
{Object.entries(COLOR_SCHEMES).map(([key, scheme]) => (
|
||||
<Button
|
||||
key={key}
|
||||
onClick={() => handleColorSchemeChange(key as keyof typeof COLOR_SCHEMES)}
|
||||
style={{
|
||||
backgroundColor: scheme.background,
|
||||
color: scheme.text,
|
||||
borderColor: scheme.primary
|
||||
}}
|
||||
>
|
||||
{scheme.name}
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
</Form.Item>
|
||||
|
||||
{/* 主题模式 */}
|
||||
<Form.Item
|
||||
label="主题模式"
|
||||
name="theme_mode"
|
||||
rules={[{ required: true, message: '请选择主题模式' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value={ThemeMode.LIGHT}>浅色模式</Radio>
|
||||
<Radio value={ThemeMode.DARK}>深色模式</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{/* 主题色 */}
|
||||
<Form.Item
|
||||
label="主题色"
|
||||
name="primary_color"
|
||||
rules={[{ required: true, message: '请选择主题色' }]}
|
||||
>
|
||||
<ColorPicker
|
||||
value={form.getFieldValue('primary_color')}
|
||||
onChange={(color) => {
|
||||
form.setFieldValue('primary_color', color.toHexString());
|
||||
updateTheme({ primary_color: color.toHexString() });
|
||||
}}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 背景色 */}
|
||||
<Form.Item
|
||||
label="背景色"
|
||||
name="background_color"
|
||||
rules={[{ required: true, message: '请选择背景色' }]}
|
||||
>
|
||||
<ColorPicker
|
||||
value={form.getFieldValue('background_color')}
|
||||
onChange={(color) => {
|
||||
form.setFieldValue('background_color', color.toHexString());
|
||||
updateTheme({ background_color: color.toHexString() });
|
||||
}}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 文字颜色 */}
|
||||
<Form.Item
|
||||
label="文字颜色"
|
||||
name="text_color"
|
||||
rules={[{ required: true, message: '请选择文字颜色' }]}
|
||||
>
|
||||
<ColorPicker
|
||||
value={form.getFieldValue('text_color')}
|
||||
onChange={(color) => {
|
||||
form.setFieldValue('text_color', color.toHexString());
|
||||
updateTheme({ text_color: color.toHexString() });
|
||||
}}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 圆角大小 */}
|
||||
<Form.Item
|
||||
label="圆角大小"
|
||||
name="border_radius"
|
||||
rules={[{ required: true, message: '请设置圆角大小' }]}
|
||||
initialValue={6}
|
||||
>
|
||||
<InputNumber<number>
|
||||
min={0}
|
||||
max={20}
|
||||
addonAfter="px"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 字体大小 */}
|
||||
<Form.Item
|
||||
label="字体大小"
|
||||
name="font_size"
|
||||
rules={[{ required: true, message: '请选择字体大小' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value={FontSize.SMALL}>小</Radio>
|
||||
<Radio value={FontSize.MEDIUM}>中</Radio>
|
||||
<Radio value={FontSize.LARGE}>大</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{/* 紧凑模式 */}
|
||||
<Form.Item
|
||||
label="紧凑模式"
|
||||
name="is_compact"
|
||||
valuePropName="checked"
|
||||
getValueFromEvent={(checked: boolean) => checked ? CompactMode.COMPACT : CompactMode.NORMAL}
|
||||
getValueProps={(value: CompactMode) => ({
|
||||
checked: value === CompactMode.COMPACT
|
||||
})}
|
||||
>
|
||||
<Switch
|
||||
checkedChildren="开启"
|
||||
unCheckedChildren="关闭"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
保存设置
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要重置主题设置吗？"
|
||||
onConfirm={handleReset}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button>重置为默认值</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user