115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Button, Card, Form, Input, Space, Switch, Tabs, message } from 'antd';
|
|
import { PlusOutlined, SaveOutlined } from '@ant-design/icons';
|
|
import {
|
|
getHomeMaterialCategories,
|
|
getHomeMaterialConfig,
|
|
getHomeMaterialWatermarks,
|
|
saveHomeMaterialConfig,
|
|
} from '../api';
|
|
import type { HomeMaterialCategory, HomeMaterialConfig, HomeMaterialWatermark } from '../types';
|
|
import HomeMaterialAssetTable from './homeMaterials/HomeMaterialAssetTable';
|
|
import HomeMaterialCategoryPanel from './homeMaterials/HomeMaterialCategoryPanel';
|
|
import HomeMaterialUploadModal from './homeMaterials/HomeMaterialUploadModal';
|
|
import WatermarkLibraryModal from './homeMaterials/WatermarkLibraryModal';
|
|
|
|
const AdminHomeMaterials: React.FC = () => {
|
|
const [form] = Form.useForm<HomeMaterialConfig>();
|
|
const [configLoading, setConfigLoading] = useState(false);
|
|
const [categories, setCategories] = useState<HomeMaterialCategory[]>([]);
|
|
const [watermarks, setWatermarks] = useState<HomeMaterialWatermark[]>([]);
|
|
const [uploadOpen, setUploadOpen] = useState(false);
|
|
const [reloadKey, setReloadKey] = useState(0);
|
|
|
|
const loadBase = async () => {
|
|
const [catRes, wmRes] = await Promise.all([
|
|
getHomeMaterialCategories({ page: 1, pageSize: 200 }),
|
|
getHomeMaterialWatermarks({ page: 1, pageSize: 200, isActive: true }),
|
|
]);
|
|
setCategories(catRes.items);
|
|
setWatermarks(wmRes.items);
|
|
};
|
|
|
|
const loadConfig = async () => {
|
|
setConfigLoading(true);
|
|
try {
|
|
const cfg = await getHomeMaterialConfig();
|
|
form.setFieldsValue(cfg);
|
|
} finally {
|
|
setConfigLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadConfig();
|
|
loadBase();
|
|
}, []);
|
|
|
|
const saveConfig = async () => {
|
|
const values = await form.validateFields();
|
|
await saveHomeMaterialConfig(values);
|
|
message.success('配置已保存');
|
|
};
|
|
|
|
const refreshAll = async () => {
|
|
await loadBase();
|
|
setReloadKey(k => k + 1);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Card style={{ marginBottom: 16 }} loading={configLoading}>
|
|
<Form form={form} layout="inline" initialValues={{ enabled: false, title: '行业素材案例', subtitle: '精选图片与视频素材展示', showOriginalInAdmin: true }}>
|
|
<Form.Item name="enabled" label="首页展示" valuePropName="checked"><Switch /></Form.Item>
|
|
<Form.Item name="title" label="标题" rules={[{ required: true, message: '请输入标题' }]}><Input style={{ width: 220 }} /></Form.Item>
|
|
<Form.Item name="subtitle" label="副标题"><Input style={{ width: 320 }} /></Form.Item>
|
|
<Form.Item name="showOriginalInAdmin" label="后台展示原素材" valuePropName="checked"><Switch /></Form.Item>
|
|
<Form.Item>
|
|
<Button type="primary" icon={<SaveOutlined />} onClick={saveConfig}>保存配置</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Card>
|
|
|
|
<Card
|
|
title="首页素材行业装修"
|
|
extra={(
|
|
<Space>
|
|
<Button onClick={refreshAll}>刷新</Button>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setUploadOpen(true)}>上传素材</Button>
|
|
</Space>
|
|
)}
|
|
>
|
|
<Tabs
|
|
items={[
|
|
{
|
|
key: 'assets',
|
|
label: '素材管理',
|
|
children: <HomeMaterialAssetTable categories={categories} watermarks={watermarks} reloadKey={reloadKey} />,
|
|
},
|
|
{
|
|
key: 'categories',
|
|
label: '行业类别',
|
|
children: <HomeMaterialCategoryPanel onChanged={refreshAll} />,
|
|
},
|
|
{
|
|
key: 'watermarks',
|
|
label: '水印库',
|
|
children: <WatermarkLibraryModal embedded onChanged={refreshAll} />,
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
|
|
<HomeMaterialUploadModal
|
|
open={uploadOpen}
|
|
onClose={() => setUploadOpen(false)}
|
|
categories={categories}
|
|
watermarks={watermarks}
|
|
onSuccess={refreshAll}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminHomeMaterials;
|