mirror of
https://github.com/DrizzleTime/Foxel.git
synced 2026-05-07 03:32:41 +08:00
feat: Replace Card components with PageCard
This commit is contained in:
8
web/src/components/PageCard.tsx
Normal file
8
web/src/components/PageCard.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { Card, type CardProps } from 'antd';
|
||||
import { memo } from 'react';
|
||||
|
||||
const PageCard = memo((props: CardProps) => {
|
||||
return <Card styles={{ body: { overflowY: 'auto', height: 'calc(100vh - 145px)' } }} {...props} />;
|
||||
});
|
||||
|
||||
export default PageCard;
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, useState, useEffect, useCallback } from 'react';
|
||||
import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select, Card } from 'antd';
|
||||
import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select } from 'antd';
|
||||
import PageCard from '../components/PageCard';
|
||||
import { adaptersApi } from '../api/client';
|
||||
|
||||
interface AdapterItem {
|
||||
@@ -207,9 +208,8 @@ const AdaptersPage = memo(function AdaptersPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
<PageCard
|
||||
title="存储适配器"
|
||||
style={{ margin: 0 }}
|
||||
extra={
|
||||
<Space>
|
||||
<Button onClick={fetchList} loading={loading}>刷新</Button>
|
||||
@@ -274,7 +274,7 @@ const AdaptersPage = memo(function AdaptersPage() {
|
||||
{renderConfigFields()}
|
||||
</Form>
|
||||
</Drawer>
|
||||
</Card>
|
||||
</PageCard>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, useState, useEffect, useCallback } from 'react';
|
||||
import { Table, Card, message, Tag, Input, Select, Button, Space, Modal, DatePicker } from 'antd';
|
||||
import { Table, message, Tag, Input, Select, Button, Space, Modal, DatePicker } from 'antd';
|
||||
import PageCard from '../components/PageCard';
|
||||
import { logsApi, type LogItem, type PaginatedLogs } from '../api/logs';
|
||||
import { format, formatISO } from 'date-fns';
|
||||
|
||||
@@ -87,9 +88,8 @@ const LogsPage = memo(function LogsPage() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
<PageCard
|
||||
title="系统日志"
|
||||
style={{ margin: 0 }}
|
||||
extra={
|
||||
<Space>
|
||||
<RangePicker
|
||||
@@ -148,7 +148,7 @@ const LogsPage = memo(function LogsPage() {
|
||||
</pre>
|
||||
)}
|
||||
</Modal>
|
||||
</Card>
|
||||
</PageCard>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, useState, useEffect, useCallback } from 'react';
|
||||
import { Table, Button, Space, message, Popconfirm, Card, Tag, Tooltip } from 'antd';
|
||||
import { Table, Button, Space, message, Popconfirm, Tag, Tooltip } from 'antd';
|
||||
import PageCard from '../components/PageCard';
|
||||
import { shareApi, type ShareInfo } from '../api/share';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
import { LinkOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
@@ -92,9 +93,8 @@ const SharePage = memo(function SharePage() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
<PageCard
|
||||
title="我的分享"
|
||||
style={{ margin: 0 }}
|
||||
extra={<Button onClick={fetchList} loading={loading}>刷新</Button>}
|
||||
>
|
||||
<Table
|
||||
@@ -104,7 +104,7 @@ const SharePage = memo(function SharePage() {
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
/>
|
||||
</Card>
|
||||
</PageCard>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, useState } from 'react';
|
||||
import { Card, Button, Typography, Upload, message, Modal } from 'antd';
|
||||
import { Button, Typography, Upload, message, Modal } from 'antd';
|
||||
import PageCard from '../../components/PageCard';
|
||||
import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import { backupApi } from '../../api/backup';
|
||||
|
||||
@@ -49,13 +50,10 @@ const BackupPage = memo(function BackupPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title level={4}>备份与恢复</Title>
|
||||
<Paragraph>
|
||||
在这里,您可以导出整个站点的数据作为备份,或从备份文件中恢复。
|
||||
</Paragraph>
|
||||
<PageCard title="备份和恢复">
|
||||
|
||||
<div style={{ display: 'flex', gap: '16px' }}>
|
||||
<Card title="导出" style={{ flex: 1 }}>
|
||||
<PageCard title="导出" style={{ flex: 1 }}>
|
||||
<Paragraph>
|
||||
点击下面的按钮将所有数据(包括存储、用户、自动化任务和分享)导出为一个 JSON 文件。
|
||||
<Text strong>请妥善保管您的备份文件。</Text>
|
||||
@@ -67,8 +65,8 @@ const BackupPage = memo(function BackupPage() {
|
||||
>
|
||||
导出备份
|
||||
</Button>
|
||||
</Card>
|
||||
<Card title="恢复" style={{ flex: 1 }}>
|
||||
</PageCard>
|
||||
<PageCard title="恢复" style={{ flex: 1 }}>
|
||||
<Paragraph>
|
||||
从之前导出的JSON文件恢复数据。
|
||||
<Text strong type="danger">警告:此操作将清除并覆盖现有数据。</Text>
|
||||
@@ -81,9 +79,9 @@ const BackupPage = memo(function BackupPage() {
|
||||
选择文件并恢复
|
||||
</Button>
|
||||
</Upload>
|
||||
</Card>
|
||||
</PageCard>
|
||||
</div>
|
||||
</Card>
|
||||
</PageCard>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Card, Form, Input, Button, message, Tabs, Space } from 'antd';
|
||||
import { Form, Input, Button, message, Tabs, Space } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import PageCard from '../../components/PageCard';
|
||||
import { getAllConfig, setConfig } from '../../api/config';
|
||||
import { API_BASE_URL } from '../../api/client';
|
||||
import { AppstoreOutlined, RobotOutlined } from '@ant-design/icons';
|
||||
@@ -42,11 +43,11 @@ export default function SystemSettingsPage() {
|
||||
|
||||
// 加载中时不渲染表单
|
||||
if (!config) {
|
||||
return <Card title='系统设置'><div>加载中...</div></Card>;
|
||||
return <PageCard title='系统设置'><div>加载中...</div></PageCard>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
<PageCard
|
||||
title='系统设置'
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={32}>
|
||||
@@ -121,6 +122,6 @@ export default function SystemSettingsPage() {
|
||||
]}
|
||||
/>
|
||||
</Space>
|
||||
</Card>
|
||||
</PageCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { memo, useState, useEffect, useCallback } from 'react';
|
||||
import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select, Card } from 'antd';
|
||||
import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select } from 'antd';
|
||||
import PageCard from '../components/PageCard';
|
||||
import { tasksApi, type AutomationTask } from '../api/tasks';
|
||||
import { processorsApi, type ProcessorTypeMeta } from '../api/processors';
|
||||
import { ProcessorConfigForm } from '../components/ProcessorConfigForm';
|
||||
@@ -109,9 +110,8 @@ const TasksPage = memo(function TasksPage() {
|
||||
|
||||
|
||||
return (
|
||||
<Card
|
||||
<PageCard
|
||||
title="自动化任务"
|
||||
style={{ margin: 0 }}
|
||||
extra={
|
||||
<Space>
|
||||
<Button onClick={fetchList} loading={loading}>刷新</Button>
|
||||
@@ -174,7 +174,7 @@ const TasksPage = memo(function TasksPage() {
|
||||
/>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</Card>
|
||||
</PageCard>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user