5f4d6648f7
Introduce application uptime monitoring to improve observability and reliability. • Add UptimeService to track process start time and expose uptime in seconds • Create /health/uptime endpoint returning the current uptime in JSON format • Integrate uptime metric into existing health-check middleware • Update README with instructions for consuming the new endpoint • Add unit tests covering UptimeService and new health route This change enables operations teams and dashboards to programmatically determine how long the service has been running, facilitating automated alerts and trend analysis.
485 lines
14 KiB
JavaScript
485 lines
14 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Button,
|
||
Space,
|
||
Table,
|
||
Form,
|
||
Typography,
|
||
Empty,
|
||
Divider,
|
||
Modal,
|
||
Tag
|
||
} from '@douyinfe/semi-ui';
|
||
import {
|
||
IllustrationNoResult,
|
||
IllustrationNoResultDark
|
||
} from '@douyinfe/semi-illustrations';
|
||
import {
|
||
Plus,
|
||
Edit,
|
||
Trash2,
|
||
Save,
|
||
Bell
|
||
} from 'lucide-react';
|
||
import { API, showError, showSuccess, getRelativeTime, formatDateTimeString } from '../../../helpers';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
const { Text } = Typography;
|
||
|
||
const SettingsAnnouncements = ({ options, refresh }) => {
|
||
const { t } = useTranslation();
|
||
|
||
const [announcementsList, setAnnouncementsList] = useState([]);
|
||
const [showAnnouncementModal, setShowAnnouncementModal] = useState(false);
|
||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||
const [deletingAnnouncement, setDeletingAnnouncement] = useState(null);
|
||
const [editingAnnouncement, setEditingAnnouncement] = useState(null);
|
||
const [modalLoading, setModalLoading] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [hasChanges, setHasChanges] = useState(false);
|
||
const [announcementForm, setAnnouncementForm] = useState({
|
||
content: '',
|
||
publishDate: new Date(),
|
||
type: 'default',
|
||
extra: ''
|
||
});
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [pageSize, setPageSize] = useState(10);
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||
|
||
const typeOptions = [
|
||
{ value: 'default', label: t('默认') },
|
||
{ value: 'ongoing', label: t('进行中') },
|
||
{ value: 'success', label: t('成功') },
|
||
{ value: 'warning', label: t('警告') },
|
||
{ value: 'error', label: t('错误') }
|
||
];
|
||
|
||
const getTypeColor = (type) => {
|
||
const colorMap = {
|
||
default: 'grey',
|
||
ongoing: 'blue',
|
||
success: 'green',
|
||
warning: 'orange',
|
||
error: 'red'
|
||
};
|
||
return colorMap[type] || 'grey';
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: t('内容'),
|
||
dataIndex: 'content',
|
||
key: 'content',
|
||
render: (text) => (
|
||
<div style={{
|
||
maxWidth: '300px',
|
||
wordBreak: 'break-word',
|
||
whiteSpace: 'pre-wrap'
|
||
}}>
|
||
{text}
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: t('发布时间'),
|
||
dataIndex: 'publishDate',
|
||
key: 'publishDate',
|
||
width: 180,
|
||
render: (publishDate) => (
|
||
<div>
|
||
<div style={{ fontWeight: 'bold' }}>
|
||
{getRelativeTime(publishDate)}
|
||
</div>
|
||
<div style={{
|
||
fontSize: '12px',
|
||
color: 'var(--semi-color-text-2)',
|
||
marginTop: '2px'
|
||
}}>
|
||
{publishDate ? formatDateTimeString(new Date(publishDate)) : '-'}
|
||
</div>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: t('类型'),
|
||
dataIndex: 'type',
|
||
key: 'type',
|
||
width: 100,
|
||
render: (type) => (
|
||
<Tag color={getTypeColor(type)} shape='circle'>
|
||
{typeOptions.find(opt => opt.value === type)?.label || type}
|
||
</Tag>
|
||
)
|
||
},
|
||
{
|
||
title: t('说明'),
|
||
dataIndex: 'extra',
|
||
key: 'extra',
|
||
render: (text) => (
|
||
<div style={{
|
||
maxWidth: '200px',
|
||
wordBreak: 'break-word',
|
||
color: 'var(--semi-color-text-2)'
|
||
}}>
|
||
{text || '-'}
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: t('操作'),
|
||
key: 'action',
|
||
fixed: 'right',
|
||
width: 150,
|
||
render: (text, record) => (
|
||
<Space>
|
||
<Button
|
||
icon={<Edit size={14} />}
|
||
theme='light'
|
||
type='tertiary'
|
||
size='small'
|
||
className="!rounded-full"
|
||
onClick={() => handleEditAnnouncement(record)}
|
||
>
|
||
{t('编辑')}
|
||
</Button>
|
||
<Button
|
||
icon={<Trash2 size={14} />}
|
||
type='danger'
|
||
theme='light'
|
||
size='small'
|
||
className="!rounded-full"
|
||
onClick={() => handleDeleteAnnouncement(record)}
|
||
>
|
||
{t('删除')}
|
||
</Button>
|
||
</Space>
|
||
)
|
||
}
|
||
];
|
||
|
||
const updateOption = async (key, value) => {
|
||
const res = await API.put('/api/option/', {
|
||
key,
|
||
value,
|
||
});
|
||
const { success, message } = res.data;
|
||
if (success) {
|
||
showSuccess('系统公告已更新');
|
||
if (refresh) refresh();
|
||
} else {
|
||
showError(message);
|
||
}
|
||
};
|
||
|
||
const submitAnnouncements = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const announcementsJson = JSON.stringify(announcementsList);
|
||
await updateOption('Announcements', announcementsJson);
|
||
setHasChanges(false);
|
||
} catch (error) {
|
||
console.error('系统公告更新失败', error);
|
||
showError('系统公告更新失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleAddAnnouncement = () => {
|
||
setEditingAnnouncement(null);
|
||
setAnnouncementForm({
|
||
content: '',
|
||
publishDate: new Date(),
|
||
type: 'default',
|
||
extra: ''
|
||
});
|
||
setShowAnnouncementModal(true);
|
||
};
|
||
|
||
const handleEditAnnouncement = (announcement) => {
|
||
setEditingAnnouncement(announcement);
|
||
setAnnouncementForm({
|
||
content: announcement.content,
|
||
publishDate: announcement.publishDate ? new Date(announcement.publishDate) : new Date(),
|
||
type: announcement.type || 'default',
|
||
extra: announcement.extra || ''
|
||
});
|
||
setShowAnnouncementModal(true);
|
||
};
|
||
|
||
const handleDeleteAnnouncement = (announcement) => {
|
||
setDeletingAnnouncement(announcement);
|
||
setShowDeleteModal(true);
|
||
};
|
||
|
||
const confirmDeleteAnnouncement = () => {
|
||
if (deletingAnnouncement) {
|
||
const newList = announcementsList.filter(item => item.id !== deletingAnnouncement.id);
|
||
setAnnouncementsList(newList);
|
||
setHasChanges(true);
|
||
showSuccess('公告已删除，请及时点击“保存设置”进行保存');
|
||
}
|
||
setShowDeleteModal(false);
|
||
setDeletingAnnouncement(null);
|
||
};
|
||
|
||
const handleSaveAnnouncement = async () => {
|
||
if (!announcementForm.content || !announcementForm.publishDate) {
|
||
showError('请填写完整的公告信息');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setModalLoading(true);
|
||
|
||
// 将publishDate转换为ISO字符串保存
|
||
const formData = {
|
||
...announcementForm,
|
||
publishDate: announcementForm.publishDate.toISOString()
|
||
};
|
||
|
||
let newList;
|
||
if (editingAnnouncement) {
|
||
newList = announcementsList.map(item =>
|
||
item.id === editingAnnouncement.id
|
||
? { ...item, ...formData }
|
||
: item
|
||
);
|
||
} else {
|
||
const newId = Math.max(...announcementsList.map(item => item.id), 0) + 1;
|
||
const newAnnouncement = {
|
||
id: newId,
|
||
...formData
|
||
};
|
||
newList = [...announcementsList, newAnnouncement];
|
||
}
|
||
|
||
setAnnouncementsList(newList);
|
||
setHasChanges(true);
|
||
setShowAnnouncementModal(false);
|
||
showSuccess(editingAnnouncement ? '公告已更新，请及时点击“保存设置”进行保存' : '公告已添加，请及时点击“保存设置”进行保存');
|
||
} catch (error) {
|
||
showError('操作失败: ' + error.message);
|
||
} finally {
|
||
setModalLoading(false);
|
||
}
|
||
};
|
||
|
||
const parseAnnouncements = (announcementsStr) => {
|
||
if (!announcementsStr) {
|
||
setAnnouncementsList([]);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const parsed = JSON.parse(announcementsStr);
|
||
const list = Array.isArray(parsed) ? parsed : [];
|
||
// 确保每个项目都有id
|
||
const listWithIds = list.map((item, index) => ({
|
||
...item,
|
||
id: item.id || index + 1
|
||
}));
|
||
setAnnouncementsList(listWithIds);
|
||
} catch (error) {
|
||
console.error('解析系统公告失败:', error);
|
||
setAnnouncementsList([]);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (options.Announcements !== undefined) {
|
||
parseAnnouncements(options.Announcements);
|
||
}
|
||
}, [options.Announcements]);
|
||
|
||
const handleBatchDelete = () => {
|
||
if (selectedRowKeys.length === 0) {
|
||
showError('请先选择要删除的系统公告');
|
||
return;
|
||
}
|
||
|
||
const newList = announcementsList.filter(item => !selectedRowKeys.includes(item.id));
|
||
setAnnouncementsList(newList);
|
||
setSelectedRowKeys([]);
|
||
setHasChanges(true);
|
||
showSuccess(`已删除 ${selectedRowKeys.length} 个系统公告，请及时点击“保存设置”进行保存`);
|
||
};
|
||
|
||
const renderHeader = () => (
|
||
<div className="flex flex-col w-full">
|
||
<div className="mb-2">
|
||
<div className="flex items-center text-blue-500">
|
||
<Bell size={16} className="mr-2" />
|
||
<Text>{t('系统公告管理，可以发布系统通知和重要消息（最多100个，前端显示最新20条）')}</Text>
|
||
</div>
|
||
</div>
|
||
|
||
<Divider margin="12px" />
|
||
|
||
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
|
||
<div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
|
||
<Button
|
||
theme='light'
|
||
type='primary'
|
||
icon={<Plus size={14} />}
|
||
className="!rounded-full w-full md:w-auto"
|
||
onClick={handleAddAnnouncement}
|
||
>
|
||
{t('添加公告')}
|
||
</Button>
|
||
<Button
|
||
icon={<Trash2 size={14} />}
|
||
type='danger'
|
||
theme='light'
|
||
onClick={handleBatchDelete}
|
||
disabled={selectedRowKeys.length === 0}
|
||
className="!rounded-full w-full md:w-auto"
|
||
>
|
||
{t('批量删除')} {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
|
||
</Button>
|
||
<Button
|
||
icon={<Save size={14} />}
|
||
onClick={submitAnnouncements}
|
||
loading={loading}
|
||
disabled={!hasChanges}
|
||
type='secondary'
|
||
className="!rounded-full w-full md:w-auto"
|
||
>
|
||
{t('保存设置')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// 计算当前页显示的数据
|
||
const getCurrentPageData = () => {
|
||
const startIndex = (currentPage - 1) * pageSize;
|
||
const endIndex = startIndex + pageSize;
|
||
return announcementsList.slice(startIndex, endIndex);
|
||
};
|
||
|
||
const rowSelection = {
|
||
selectedRowKeys,
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
setSelectedRowKeys(selectedRowKeys);
|
||
},
|
||
onSelect: (record, selected, selectedRows) => {
|
||
console.log(`选择行: ${selected}`, record);
|
||
},
|
||
onSelectAll: (selected, selectedRows) => {
|
||
console.log(`全选: ${selected}`, selectedRows);
|
||
},
|
||
getCheckboxProps: (record) => ({
|
||
disabled: false,
|
||
name: record.id,
|
||
}),
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Form.Section text={renderHeader()}>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={getCurrentPageData()}
|
||
rowSelection={rowSelection}
|
||
rowKey="id"
|
||
scroll={{ x: 'max-content' }}
|
||
pagination={{
|
||
currentPage: currentPage,
|
||
pageSize: pageSize,
|
||
total: announcementsList.length,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total, range) => t(`共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`),
|
||
pageSizeOptions: ['5', '10', '20', '50'],
|
||
onChange: (page, size) => {
|
||
setCurrentPage(page);
|
||
setPageSize(size);
|
||
},
|
||
onShowSizeChange: (current, size) => {
|
||
setCurrentPage(1);
|
||
setPageSize(size);
|
||
}
|
||
}}
|
||
size='middle'
|
||
loading={loading}
|
||
empty={
|
||
<Empty
|
||
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
|
||
darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
|
||
description={t('暂无系统公告')}
|
||
style={{ padding: 30 }}
|
||
/>
|
||
}
|
||
className="rounded-xl overflow-hidden"
|
||
/>
|
||
</Form.Section>
|
||
|
||
<Modal
|
||
title={editingAnnouncement ? t('编辑公告') : t('添加公告')}
|
||
visible={showAnnouncementModal}
|
||
onOk={handleSaveAnnouncement}
|
||
onCancel={() => setShowAnnouncementModal(false)}
|
||
okText={t('保存')}
|
||
cancelText={t('取消')}
|
||
className="rounded-xl"
|
||
confirmLoading={modalLoading}
|
||
>
|
||
<Form layout='vertical' initValues={announcementForm} key={editingAnnouncement ? editingAnnouncement.id : 'new'}>
|
||
<Form.TextArea
|
||
field='content'
|
||
label={t('公告内容')}
|
||
placeholder={t('请输入公告内容')}
|
||
maxCount={500}
|
||
rows={3}
|
||
rules={[{ required: true, message: t('请输入公告内容') }]}
|
||
onChange={(value) => setAnnouncementForm({ ...announcementForm, content: value })}
|
||
/>
|
||
<Form.DatePicker
|
||
field='publishDate'
|
||
label={t('发布日期')}
|
||
type='dateTime'
|
||
rules={[{ required: true, message: t('请选择发布日期') }]}
|
||
onChange={(value) => setAnnouncementForm({ ...announcementForm, publishDate: value })}
|
||
/>
|
||
<Form.Select
|
||
field='type'
|
||
label={t('公告类型')}
|
||
optionList={typeOptions}
|
||
onChange={(value) => setAnnouncementForm({ ...announcementForm, type: value })}
|
||
/>
|
||
<Form.Input
|
||
field='extra'
|
||
label={t('说明信息')}
|
||
placeholder={t('可选，公告的补充说明')}
|
||
onChange={(value) => setAnnouncementForm({ ...announcementForm, extra: value })}
|
||
/>
|
||
</Form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
title={t('确认删除')}
|
||
visible={showDeleteModal}
|
||
onOk={confirmDeleteAnnouncement}
|
||
onCancel={() => {
|
||
setShowDeleteModal(false);
|
||
setDeletingAnnouncement(null);
|
||
}}
|
||
okText={t('确认删除')}
|
||
cancelText={t('取消')}
|
||
type="warning"
|
||
className="rounded-xl"
|
||
okButtonProps={{
|
||
type: 'danger',
|
||
theme: 'solid'
|
||
}}
|
||
>
|
||
<Text>{t('确定要删除此公告吗？')}</Text>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default SettingsAnnouncements;
|