zt-admin-template 1.0.0

package/template/src/pages/banner/BannerList.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Table, Button, Modal, Form, Input, Upload,
+  message, Space, Typography, Tag, Popconfirm, Select
+} from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, LoadingOutlined } from '@ant-design/icons';
+import { uploadFile } from '@/api/course';
+
+const { Title } = Typography;
+
+interface Banner {
+  id: string;
+  title: string;
+  imageUrl: string;
+  link: string;
+  sort: number;
+  status: 'active' | 'inactive';
+  createdAt: string;
+}
+
+const BannerList: React.FC = () => {
+  const [banners, setBanners] = useState<Banner[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [currentBanner, setCurrentBanner] = useState<Banner | null>(null);
+  const [form] = Form.useForm();
+  const [imageUrl, setImageUrl] = useState<string>('');
+  const [uploading, setUploading] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('banners');
+    if (saved) setBanners(JSON.parse(saved));
+  }, []);
+
+  const save = (data: Banner[]) => {
+    localStorage.setItem('banners', JSON.stringify(data));
+    setBanners(data);
+  };
+
+  const handleAdd = () => {
+    setIsEditing(false);
+    setCurrentBanner(null);
+    setImageUrl('');
+    form.resetFields();
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (banner: Banner) => {
+    setIsEditing(true);
+    setCurrentBanner(banner);
+    setImageUrl(banner.imageUrl);
+    form.setFieldsValue({ title: banner.title, link: banner.link, sort: banner.sort, status: banner.status });
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = (id: string) => {
+    save(banners.filter(b => b.id !== id));
+    message.success('删除成功');
+  };
+
+  const handleUpload = async (file: File) => {
+    setUploading(true);
+    try {
+      const url = await uploadFile(file);
+      setImageUrl(url);
+      message.success('上传成功');
+    } catch {
+      message.error('上传失败');
+    } finally {
+      setUploading(false);
+    }
+    return false; // 阻止默认上传行为
+  };
+
+  const handleSubmit = () => {
+    form.validateFields().then(values => {
+      if (!imageUrl) {
+        message.error('请上传轮播图');
+        return;
+      }
+      if (isEditing && currentBanner) {
+        save(banners.map(b => b.id === currentBanner.id ? { ...b, ...values, imageUrl } : b));
+        message.success('更新成功');
+      } else {
+        save([...banners, {
+          id: Date.now().toString(),
+          ...values,
+          imageUrl,
+          createdAt: new Date().toISOString(),
+        }]);
+        message.success('添加成功');
+      }
+      setIsModalVisible(false);
+    });
+  };
+
+  const columns = [
+    { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+    { title: '标题', dataIndex: 'title', key: 'title' },
+    {
+      title: '轮播图', dataIndex: 'imageUrl', key: 'imageUrl',
+      render: (url: string) => url
+        ? <img src={url} alt="banner" style={{ width: 100, height: 50, objectFit: 'cover' }} />
+        : '-'
+    },
+    { title: '链接', dataIndex: 'link', key: 'link', ellipsis: true },
+    { title: '排序', dataIndex: 'sort', key: 'sort', width: 80 },
+    {
+      title: '状态', dataIndex: 'status', key: 'status', width: 100,
+      render: (s: string) => <Tag color={s === 'active' ? 'green' : 'red'}>{s === 'active' ? '启用' : '禁用'}</Tag>
+    },
+    {
+      title: '创建时间', dataIndex: 'createdAt', key: 'createdAt',
+      render: (t: string) => new Date(t).toLocaleString()
+    },
+    {
+      title: '操作', key: 'action',
+      render: (_: any, record: Banner) => (
+        <Space>
+          <Button icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>编辑</Button>
+          <Popconfirm title="确定删除？" onConfirm={() => handleDelete(record.id)} okText="确定" cancelText="取消">
+            <Button danger icon={<DeleteOutlined />} size="small">删除</Button>
+          </Popconfirm>
+        </Space>
+      )
+    }
+  ];
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <Title level={4} style={{ margin: 0 }}>Banner管理</Title>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加Banner</Button>
+      </div>
+
+      <Table columns={columns} dataSource={banners} rowKey="id"
+        pagination={{ showSizeChanger: true, defaultPageSize: 10 }} />
+
+      <Modal
+        title={isEditing ? '编辑Banner' : '添加Banner'}
+        open={isModalVisible}
+        onOk={handleSubmit}
+        onCancel={() => setIsModalVisible(false)}
+        width={600}
+      >
+        <Form form={form} layout="vertical" initialValues={{ sort: 0, status: 'active' }}>
+          <Form.Item name="title" label="Banner标题" rules={[{ required: true, message: '请输入标题' }]}>
+            <Input placeholder="请输入Banner标题" />
+          </Form.Item>
+          <Form.Item name="link" label="跳转链接" rules={[{ required: true, message: '请输入链接' }]}>
+            <Input placeholder="请输入跳转链接" />
+          </Form.Item>
+          <Form.Item name="sort" label="排序" rules={[{ required: true, message: '请输入排序' }]}>
+            <Input type="number" placeholder="请输入排序" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select options={[{ value: 'active', label: '启用' }, { value: 'inactive', label: '禁用' }]} />
+          </Form.Item>
+          <Form.Item label="轮播图" required>
+            <Upload
+              listType="picture-card"
+              showUploadList={false}
+              beforeUpload={handleUpload}
+              accept="image/*"
+            >
+              {imageUrl ? (
+                <img src={imageUrl} alt="banner" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              ) : (
+                <div>
+                  {uploading ? <LoadingOutlined /> : <PlusOutlined />}
+                  <div style={{ marginTop: 8 }}>上传图片</div>
+                </div>
+              )}
+            </Upload>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default BannerList;