zt-admin-template 1.0.0

package/template/src/pages/course/CourseList.tsx

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Table,
+  Button,
+  Space,
+  Typography,
+  message,
+  Card,
+  Empty,
+  Spin
+} from 'antd';
+import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+import { useLocation } from 'react-router-dom';
+
+// 课程类型定义
+interface Course {
+  id: string;
+  title: string;
+  price: number;
+  instructorName: string;
+  coverImage: string;
+  introduction: string;
+  totalDuration: number;
+  chapters: Array<{
+    id: string;
+    title: string;
+    sections: Array<{
+      id: string;
+      title: string;
+      duration: number;
+      videoFile: string;
+    }>;
+  }>;
+}
+
+const { Title } = Typography;
+
+const CourseList: React.FC = () => {
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [loading, setLoading] = useState(true);
+  const location = useLocation();
+
+  // 从localStorage加载课程数据
+  const loadCourses = () => {
+    try {
+      const savedCourses = localStorage.getItem('courses');
+      if (savedCourses) {
+        setCourses(JSON.parse(savedCourses));
+      } else {
+        setCourses([]);
+      }
+    } catch (error) {
+      message.error('加载课程数据失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 每次路由切换到此页面时重新加载
+  useEffect(() => {
+    loadCourses();
+  }, [location.pathname]);
+
+  // 表格列配置
+  const columns = [
+    {
+      title: '课程标题',
+      dataIndex: 'title',
+      key: 'title',
+      ellipsis: true,
+      render: (text: string) => <a>{text}</a>
+    },
+    {
+      title: '主讲老师',
+      dataIndex: 'instructorName',
+      key: 'instructorName'
+    },
+    {
+      title: '价格',
+      dataIndex: 'price',
+      key: 'price',
+      render: (price: number) => `¥${price}`
+    },
+    {
+      title: '总时长',
+      dataIndex: 'totalDuration',
+      key: 'totalDuration',
+      render: (duration: number) => `${duration} 小时`
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_: any, record: Course) => (
+        <Space size="middle">
+          <Button
+            type="primary"
+            icon={<EyeOutlined />}
+            size="small"
+            onClick={() => viewCourse(record)}
+          >
+            查看
+          </Button>
+          <Button
+            icon={<EditOutlined />}
+            size="small"
+            onClick={() => editCourse(record)}
+          >
+            编辑
+          </Button>
+          <Button
+            danger
+            icon={<DeleteOutlined />}
+            size="small"
+            onClick={() => deleteCourse(record.id)}
+          >
+            删除
+          </Button>
+        </Space>
+      )
+    }
+  ];
+
+  // 查看课程详情
+  const viewCourse = (course: Course) => {
+    message.info(`查看课程: ${course.title}`);
+    // 这里可以实现查看课程详情的逻辑
+  };
+
+  // 编辑课程
+  const editCourse = (course: Course) => {
+    message.info(`编辑课程: ${course.title}`);
+    // 这里可以实现编辑课程的逻辑
+  };
+
+  // 删除课程
+  const deleteCourse = (id: string) => {
+    const updatedCourses = courses.filter(course => course.id !== id);
+    setCourses(updatedCourses);
+    localStorage.setItem('courses', JSON.stringify(updatedCourses));
+    message.success('课程已删除');
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <Card>
+        <Title level={4}>课程列表</Title>
+        <Spin spinning={loading}>
+          {courses.length > 0 ? (
+            <Table
+              columns={columns}
+              dataSource={courses}
+              rowKey="id"
+              pagination={{
+                showSizeChanger: true,
+                pageSizeOptions: ['10', '20', '50'],
+                defaultPageSize: 10
+              }}
+            />
+          ) : (
+            <Empty description="暂无课程数据" />
+          )}
+        </Spin>
+      </Card>
+    </div>
+  );
+};
+
+export default CourseList;

package/template/src/pages/system/menu/Menu.tsx

@@ -0,0 +1,501 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  Switch,
+  Space,
+  Popconfirm,
+  message,
+  Card,
+  Row,
+  Col,
+  Tooltip,
+  InputNumber,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  DownloadOutlined,
+  ExpandOutlined,
+  CompressOutlined,
+} from '@ant-design/icons';
+import type { TableColumnsType } from 'antd';
+import { getMenuList, addMenu, updateMenu, deleteMenu, type MenuRecord } from '@/api/menu';
+
+const Menu = () => {
+  const [form] = Form.useForm();
+  const [searchForm] = Form.useForm();
+  const [menus, setMenus] = useState<MenuRecord[]>([]);
+  const [originalMenus, setOriginalMenus] = useState<MenuRecord[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [editingMenu, setEditingMenu] = useState<MenuRecord | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [tableLoading, setTableLoading] = useState(false);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
+
+  // 获取菜单列表
+  const fetchMenus = async () => {
+    try {
+      setTableLoading(true);
+      const response = await getMenuList();
+      setMenus(response);
+      setOriginalMenus(response);
+      // 默认展开第一级
+      const firstLevelIds = response.map(item => item.id);
+      setExpandedRowKeys(firstLevelIds);
+    } catch (error) {
+      console.error('获取菜单列表失败:', error);
+    } finally {
+      setTableLoading(false);
+    }
+  };
+
+  // 初始化加载
+  useEffect(() => {
+    fetchMenus();
+  }, []);
+
+  const columns: TableColumnsType<MenuRecord> = [
+    {
+      title: '菜单名称',
+      dataIndex: 'menuName',
+      key: 'menuName',
+      width: 150,
+    },
+    {
+      title: '排序',
+      dataIndex: 'orderNum',
+      key: 'orderNum',
+      width: 80,
+    },
+    {
+      title: '权限标识',
+      dataIndex: 'perms',
+      key: 'perms',
+      width: 150,
+      render: (perms: any) => perms || '-',
+    },
+    {
+      title: '组件路径',
+      dataIndex: 'component',
+      key: 'component',
+      width: 150,
+      render: (component: any) => component || '-',
+    },
+    {
+      title: '菜单类型',
+      dataIndex: 'menuType',
+      key: 'menuType',
+      width: 100,
+      render: (type: string) => {
+        const typeMap: Record<string, string> = {
+          M: '目录',
+          C: '菜单',
+          F: '按钮',
+        };
+        return typeMap[type] || type;
+      },
+    },
+    {
+      title: '可见',
+      dataIndex: 'visible',
+      key: 'visible',
+      width: 80,
+      render: (visible: number) => (
+        <Switch checked={visible === 0} disabled />
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (status: number) => (
+        <Switch checked={status === 0} disabled />
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 180,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      fixed: 'right',
+      render: (_, record) => (
+        <Space size="small">
+          <Tooltip title="新增">
+            <Button
+              type="primary"
+              size="small"
+              icon={<PlusOutlined />}
+              onClick={() => handleAddChild(record)}
+            />
+          </Tooltip>
+          <Tooltip title="编辑">
+            <Button
+              type="primary"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={() => handleEdit(record)}
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <Popconfirm
+              title="删除菜单"
+              description="确定删除该菜单吗？"
+              onConfirm={() => handleDelete(record.id)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button danger size="small" icon={<DeleteOutlined />} />
+            </Popconfirm>
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  const flattenMenus = (items: MenuRecord[]): MenuRecord[] => {
+    return items.reduce((acc: MenuRecord[], item) => {
+      acc.push(item);
+      if (item.children && item.children.length > 0) {
+        acc.push(...flattenMenus(item.children));
+      }
+      return acc;
+    }, []);
+  };
+
+  const handleAdd = () => {
+    setEditingMenu(null);
+    form.resetFields();
+    form.setFieldsValue({
+      parentId: '0',
+      menuType: 'M',
+      orderNum: 1,
+      isFrame: 1,
+      isCache: 0,
+      visible: 0,
+      status: 0,
+    });
+    setIsModalVisible(true);
+  };
+
+  const handleAddChild = (record: MenuRecord) => {
+    setEditingMenu(null);
+    form.resetFields();
+    form.setFieldsValue({
+      parentId: record.id,
+      menuType: 'C',
+      orderNum: 1,
+      isFrame: 0,
+      isCache: 0,
+      visible: 0,
+      status: 0,
+    });
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (record: MenuRecord) => {
+    setEditingMenu(record);
+    form.setFieldsValue({
+      menuName: record.menuName,
+      parentId: record.parentId,
+      orderNum: record.orderNum,
+      path: record.path,
+      component: record.component,
+      menuType: record.menuType,
+      isFrame: record.isFrame,
+      isCache: record.isCache,
+      visible: record.visible === 0,
+      status: record.status === 0,
+      perms: record.perms,
+      icon: record.icon,
+      remark: record.remark,
+    });
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteMenu(id);
+      message.success('删除成功');
+      fetchMenus();
+    } catch (error) {
+      console.error('删除失败:', error);
+    }
+  };
+
+  const handleModalOk = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+
+      if (editingMenu) {
+        await updateMenu({
+          ...editingMenu,
+          ...values,
+          visible: values.visible ? 0 : 1,
+          status: values.status ? 0 : 1,
+        });
+        message.success('编辑成功');
+      } else {
+        await addMenu({
+          ...values,
+          visible: values.visible ? 0 : 1,
+          status: values.status ? 0 : 1,
+        });
+        message.success('添加成功');
+      }
+
+      setIsModalVisible(false);
+      form.resetFields();
+      fetchMenus();
+    } catch (error) {
+      console.error('操作失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 递归过滤菜单
+  const filterMenus = (items: MenuRecord[], menuName?: string, status?: number): MenuRecord[] => {
+    return items.reduce((acc: MenuRecord[], item) => {
+      // 过滤子菜单
+      let filteredChildren: MenuRecord[] = [];
+      if (item.children && item.children.length > 0) {
+        filteredChildren = filterMenus(item.children, menuName, status);
+      }
+
+      // 检查当前菜单项是否匹配搜索条件
+      const matchesMenuName = !menuName || item.menuName.toLowerCase().includes(menuName.toLowerCase());
+      const matchesStatus = status === undefined || item.status === status;
+
+      // 如果当前菜单项匹配，或者其子菜单匹配，则保留该菜单项
+      if ((matchesMenuName && matchesStatus) || filteredChildren.length > 0) {
+        acc.push({
+          ...item,
+          children: filteredChildren
+        });
+      }
+      return acc;
+    }, []);
+  };
+
+  const handleSearch = (values: any) => {
+    const { menuName, status } = values;
+    const filtered = filterMenus(originalMenus, menuName, status);
+    setMenus(filtered);
+    // 重置展开状态
+    const firstLevelIds = filtered.map(item => item.id);
+    setExpandedRowKeys(firstLevelIds);
+  };
+
+  const handleReset = () => {
+    searchForm.resetFields();
+    setMenus(originalMenus);
+    // 重置展开状态
+    const firstLevelIds = originalMenus.map(item => item.id);
+    setExpandedRowKeys(firstLevelIds);
+  };
+
+  const handleExport = () => {
+    message.success('导出成功');
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <Card style={{ marginBottom: '24px' }}>
+        <Form
+          form={searchForm}
+          layout="inline"
+          onFinish={handleSearch}
+          style={{ marginBottom: '16px' }}
+        >
+          <Form.Item name="menuName" label="菜单名称">
+            <Input placeholder="请输入菜单名称" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select placeholder="请选择状态" style={{ width: 120 }}>
+              <Select.Option value={0}>正常</Select.Option>
+              <Select.Option value={1}>停用</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+              搜索
+            </Button>
+          </Form.Item>
+          <Form.Item>
+            <Button onClick={handleReset}>重置</Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card>
+        <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
+          <Col>
+            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+              新增
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<ReloadOutlined />} onClick={fetchMenus}>
+              刷新
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<ExpandOutlined />} onClick={() => {
+              const allKeys = menus.map(item => item.id);
+              setExpandedRowKeys(allKeys);
+            }}>
+              展开
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<CompressOutlined />} onClick={() => setExpandedRowKeys([])}>
+              折叠
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<DownloadOutlined />} onClick={handleExport}>
+              导出
+            </Button>
+          </Col>
+        </Row>
+
+        <Table
+          columns={columns}
+          dataSource={menus}
+          rowKey="id"
+          loading={tableLoading}
+          pagination={false}
+          expandedRowKeys={expandedRowKeys}
+          onExpandedRowsChange={(keys: any) => setExpandedRowKeys(keys)}
+          scroll={{ x: 1400 }}
+        />
+      </Card>
+
+      <Modal
+        title={editingMenu ? '编辑菜单' : '新增菜单'}
+        open={isModalVisible}
+        onOk={handleModalOk}
+        onCancel={() => {
+          setIsModalVisible(false);
+          form.resetFields();
+        }}
+        width={700}
+        confirmLoading={loading}
+      >
+        <Form form={form} layout="vertical" autoComplete="off">
+          <Form.Item
+            name="menuName"
+            label="菜单名称"
+            rules={[{ required: true, message: '请输入菜单名称' }]}
+          >
+            <Input placeholder="请输入菜单名称" />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="parentId" label="父菜单">
+                <Select placeholder="请选择父菜单">
+                  <Select.Option value="0">主菜单</Select.Option>
+                  {flattenMenus(menus).map(menu => (
+                    <Select.Option key={menu.id} value={menu.id}>
+                      {menu.menuName}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="orderNum"
+                label="显示顺序"
+                rules={[{ required: true, message: '请输入显示顺序' }]}
+              >
+                <InputNumber placeholder="请输入显示顺序" style={{ width: '100%' }} />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item
+                name="menuType"
+                label="菜单类型"
+                rules={[{ required: true, message: '请选择菜单类型' }]}
+              >
+                <Select placeholder="请选择菜单类型">
+                  <Select.Option value="M">目录</Select.Option>
+                  <Select.Option value="C">菜单</Select.Option>
+                  <Select.Option value="F">按钮</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="icon" label="菜单图标">
+                <Input placeholder="请输入菜单图标" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item
+            name="path"
+            label="路由地址"
+            rules={[{ required: true, message: '请输入路由地址' }]}
+          >
+            <Input placeholder="请输入路由地址" />
+          </Form.Item>
+
+          <Form.Item name="component" label="组件路径">
+            <Input placeholder="请输入组件路径" />
+          </Form.Item>
+
+          <Form.Item name="perms" label="权限标识">
+            <Input placeholder="请输入权限标识" />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={8}>
+              <Form.Item name="isFrame" label="是否外链" valuePropName="checked">
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="isCache" label="是否缓存" valuePropName="checked">
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="visible" label="是否可见" valuePropName="checked">
+                <Switch checkedChildren="是" unCheckedChildren="否" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item name="status" label="状态" valuePropName="checked">
+            <Switch checkedChildren="正常" unCheckedChildren="停用" />
+          </Form.Item>
+
+          <Form.Item name="remark" label="备注">
+            <Input.TextArea placeholder="请输入备注" rows={3} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default Menu;