zt-admin-template 1.0.0

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

@@ -0,0 +1,586 @@
+import React, { useState } from 'react';
+import { Form, Input, Button, Upload, Steps, Modal, Space, InputNumber, Switch, message, Select } from 'antd';
+import { UploadOutlined, ReadOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import MDEditor from '@uiw/react-md-editor';
+import { useNavigate } from 'react-router-dom';
+import { addCourseBasicInfo, uploadFile, addCourseOutline } from '@/api/course';
+
+interface Chapter {
+  id: string;
+  name: string;
+  sortOrder?: string;
+}
+
+interface Section {
+  id: string;
+  name: string;
+  sortOrder: string;
+  isFree: boolean;
+  videoCover?: string;
+  videoFile?: string;
+  chapterId: string;
+}
+
+const Course = () => {
+  const [form] = Form.useForm();
+  const [chapterForm] = Form.useForm();
+  const [sectionForm] = Form.useForm();
+  const [mdValue, setMdValue] = useState<string | undefined>('');
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isChapterModalVisible, setIsChapterModalVisible] = useState(false);
+  const [isSectionModalVisible, setIsSectionModalVisible] = useState(false);
+  const [chapters, setChapters] = useState<Chapter[]>([]);
+  const [sections, setSections] = useState<Section[]>([]);
+  const [currentChapterId, setCurrentChapterId] = useState<string>('');
+  const [coverImageUrl, setCoverImageUrl] = useState<string>('');
+  const [coverUploading, setCoverUploading] = useState(false);
+  const [videoCoverUrl, setVideoCoverUrl] = useState<string>('');
+  const [videoCoverUploading, setVideoCoverUploading] = useState(false);
+  const [videoFileUrl, setVideoFileUrl] = useState<string>('');
+  const [videoFileUploading, setVideoFileUploading] = useState(false);
+  const [step1Data, setStep1Data] = useState<any>(null); // 保存步骤一表单数据
+  const navigate = useNavigate();
+
+  const handleCoverUpload = async (file: File) => {
+    setCoverUploading(true);
+    try {
+      const url = await uploadFile(file);
+      setCoverImageUrl(url);
+      message.success('封面上传成功');
+    } catch {
+      message.error('封面上传失败');
+    } finally {
+      setCoverUploading(false);
+    }
+    return false;
+  };
+
+  const handleVideoCoverUpload = async (file: File) => {
+    setVideoCoverUploading(true);
+    try {
+      const url = await uploadFile(file);
+      setVideoCoverUrl(url);
+      message.success('视频封面上传成功');
+    } catch {
+      message.error('视频封面上传失败');
+    } finally {
+      setVideoCoverUploading(false);
+    }
+    return false;
+  };
+
+  const handleVideoFileUpload = async (file: File) => {
+    setVideoFileUploading(true);
+    try {
+      const url = await uploadFile(file);
+      setVideoFileUrl(url);
+      message.success('视频上传成功');
+    } catch {
+      message.error('视频上传失败');
+    } finally {
+      setVideoFileUploading(false);
+    }
+    return false;
+  };
+
+  // 老师选项数据
+  const teacherOptions = [
+    { value: 'teacher1', label: '张老师' },
+    { value: 'teacher2', label: '李老师' },
+    { value: 'teacher3', label: '王老师' },
+    { value: 'teacher4', label: '刘老师' },
+    { value: 'teacher5', label: '陈老师' }
+  ];
+
+  const onFinish = (values: any) => {
+    setStep1Data(values); // 保存步骤一数据
+    setCurrentStep(1);
+  };
+
+  const handleAddChapter = () => {
+    chapterForm.validateFields().then(values => {
+      console.log('Add Chapter:', values);
+      const newChapter: Chapter = {
+        id: Date.now().toString(),
+        name: values.chapterName,
+        sortOrder: values.sortOrder,
+      };
+      setChapters([...chapters, newChapter]);
+      setIsChapterModalVisible(false);
+      chapterForm.resetFields();
+    });
+  };
+
+  const handleCancelModal = () => {
+    setIsChapterModalVisible(false);
+    chapterForm.resetFields();
+  };
+
+  const handleDeleteChapter = (id: string) => {
+    setChapters(chapters.filter(chapter => chapter.id !== id));
+    setSections(sections.filter(section => section.chapterId !== id));
+  };
+
+  const handleAddSection = (chapterId: string) => {
+    setCurrentChapterId(chapterId);
+    sectionForm.resetFields();
+    setIsSectionModalVisible(true);
+  };
+
+  const handleSubmitSection = () => {
+    sectionForm.validateFields().then(values => {
+      const newSection: Section = {
+        id: Date.now().toString(),
+        name: values.sectionName,
+        sortOrder: values.sortOrder,
+        isFree: values.isFree ?? false,
+        videoCover: videoCoverUrl,
+        videoFile: videoFileUrl,
+        chapterId: currentChapterId,
+      };
+      setSections([...sections, newSection]);
+      setIsSectionModalVisible(false);
+      sectionForm.resetFields();
+      setVideoCoverUrl('');
+      setVideoFileUrl('');
+    });
+  };
+
+  const handleCancelSectionModal = () => {
+    setIsSectionModalVisible(false);
+    sectionForm.resetFields();
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 0:
+        return (
+          <div style={{ backgroundColor: '#fff', borderRadius: '8px', padding: '40px', minHeight: '600px' }}>
+            <Form
+              form={form}
+              layout="vertical"
+              onFinish={onFinish}
+              style={{ maxWidth: 800, margin: '0 auto' }}
+              colon={false}
+              initialValues={{
+                coverImage: [],
+                videoCover: [],
+                videoFile: []
+              }}
+            >
+              <Form.Item
+                name="courseTitle"
+                label={<span style={{ fontWeight: 500 }}>课程标题</span>}
+                rules={[{ required: true, message: '请输入课程标题' }]}
+              >
+                <Input />
+              </Form.Item>
+
+              <Form.Item name="instructorName" label={<span style={{ fontWeight: 500 }}>课程主讲老师</span>} rules={[{ required: true, message: '请选择课程主讲老师' }]}>
+                <Select
+                  placeholder="请选择主讲老师"
+                  style={{ width: '100%' }}
+                >
+                  {teacherOptions.map(option => (
+                    <Select.Option key={option.value} value={option.label}>
+                      {option.label}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </Form.Item>
+
+              <Form.Item name="totalHours" label={<span style={{ fontWeight: 500 }}>课程总时长</span>}>
+                <Input />
+              </Form.Item>
+
+              <Form.Item label={<span style={{ fontWeight: 500 }}>课程简介</span>}>
+                <div data-color-mode="light">
+                  <MDEditor
+                    value={mdValue}
+                    onChange={setMdValue}
+                    height={300}
+                    preview="live"
+                    hideToolbar={false}
+                  />
+                </div>
+              </Form.Item>
+
+              <Form.Item label={<span style={{ fontWeight: 500 }}>课程封面</span>}>
+                <Upload
+                  listType="picture-card"
+                  showUploadList={false}
+                  beforeUpload={handleCoverUpload}
+                  accept="image/*"
+                >
+                  {coverImageUrl ? (
+                    <img src={coverImageUrl} alt="封面" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                  ) : (
+                    <div>
+                      {coverUploading ? <LoadingOutlined /> : <UploadOutlined />}
+                      <div style={{ marginTop: 8 }}>点击上传</div>
+                    </div>
+                  )}
+                </Upload>
+              </Form.Item>
+
+              <Form.Item name="price" label={<span style={{ fontWeight: 500 }}>课程价格</span>}>
+                <Input />
+              </Form.Item>
+
+              <Form.Item style={{ textAlign: 'right', marginTop: '40px' }}>
+                <Button type="primary" htmlType="submit">
+                  下一步
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
+        );
+      case 1:
+        return (
+          <div style={{ minHeight: '600px', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ flex: 1, backgroundColor: '#fff', borderRadius: '8px', padding: '24px' }}>
+              
+              {/* 课程大纲标题和添加章节按钮 */}
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+                <h2 style={{ margin: 0, fontSize: '18px', fontWeight: 600 }}>课程大纲</h2>
+                <Button type="primary" onClick={() => setIsChapterModalVisible(true)}>添加章节</Button>
+              </div>
+              
+              {/* 章节列表 */}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                {chapters.map((chapter, index) => (
+                  <div key={chapter.id} style={{ border: '1px solid #d9d9d9', borderRadius: '4px' }}>
+                    {/* 章节标题栏 */}
+                    <div style={{ 
+                      display: 'flex', 
+                      justifyContent: 'space-between', 
+                      alignItems: 'center', 
+                      padding: '12px 16px', 
+                      backgroundColor: '#fafafa',
+                      borderBottom: '1px solid #d9d9d9'
+                    }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <span style={{ cursor: 'pointer' }}>▼</span>
+                        <span>章节：{chapter.name}</span>
+                      </div>
+                      <Space size="small">
+                        <a style={{ color: '#1890ff' }} onClick={() => handleAddSection(chapter.id)}>添加小节</a>
+                        <a style={{ color: '#1890ff' }}>修改</a>
+                        <a style={{ color: '#ff4d4f' }} onClick={() => handleDeleteChapter(chapter.id)}>删除</a>
+                      </Space>
+                    </div>
+                    
+                    {/* 小节列表 */}
+                    <div style={{ padding: '16px' }}>
+                      {sections.filter(section => section.chapterId === chapter.id).map((section, sectionIndex) => (
+                        <div key={section.id} style={{ 
+                          display: 'flex', 
+                          alignItems: 'center', 
+                          gap: '12px', 
+                          padding: '8px 0',
+                          borderBottom: '1px solid #f0f0f0'
+                        }}>
+                          <span style={{ width: '24px', textAlign: 'center' }}>{sectionIndex + 1}</span>
+                          <span style={{ flex: 1 }}>{section.name}</span>
+                          {section.isFree && (
+                            <span style={{ 
+                              color: '#52c41a', 
+                              fontSize: '12px', 
+                              backgroundColor: '#f6ffed', 
+                              padding: '2px 8px', 
+                              borderRadius: '10px',
+                              border: '1px solid #b7eb8f'
+                            }}>免费</span>
+                          )}
+                          <Space size="small" style={{ marginLeft: 'auto' }}>
+                            <a style={{ color: '#1890ff' }}>修改</a>
+                            <a style={{ color: '#ff4d4f' }}>删除</a>
+                          </Space>
+                        </div>
+                      ))}
+                      {sections.filter(section => section.chapterId === chapter.id).length === 0 && (
+                        <div style={{ 
+                          textAlign: 'center', 
+                          padding: '24px', 
+                          color: '#999',
+                          fontSize: '14px'
+                        }}>
+                          暂无小节，点击"添加小节"按钮添加
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+                
+                {chapters.length === 0 && (
+                  <div style={{ 
+                    textAlign: 'center', 
+                    padding: '48px', 
+                    color: '#999',
+                    fontSize: '14px',
+                    border: '1px dashed #d9d9d9',
+                    borderRadius: '4px'
+                  }}>
+                    暂无章节，点击"添加章节"按钮添加
+                  </div>
+                )}
+              </div>
+              
+              {/* 底部按钮 */}
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '32px' }}>
+                <Button onClick={() => setCurrentStep(0)}>上一步</Button>
+                <Button type="primary" onClick={() => setCurrentStep(2)}>下一步</Button>
+              </div>
+            </div>
+          </div>
+        );
+      case 2:
+        return (
+          <div style={{ minHeight: '600px', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ flex: 1, backgroundColor: '#fff', borderRadius: '8px', padding: '40px' }}>
+              <div style={{ textAlign: 'center', marginBottom: '40px' }}>
+                <CheckCircleOutlined style={{ fontSize: '64px', color: '#52c41a', marginBottom: '16px' }} />
+                <h2 style={{ margin: '0 0 8px 0' }}>课程信息已完善</h2>
+                <p style={{ color: '#666' }}>请确认以下信息无误后提交审核</p>
+              </div>
+              
+              <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+                <div style={{ marginBottom: '24px' }}>
+                  <h3 style={{ margin: '0 0 16px 0', fontSize: '16px', fontWeight: 600 }}>课程信息</h3>
+                  <div style={{ border: '1px solid #f0f0f0', borderRadius: '4px', padding: '16px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                      <span style={{ color: '#666' }}>课程标题：</span>
+                      <span>{step1Data?.courseTitle || '未设置'}</span>
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                      <span style={{ color: '#666' }}>课程价格：</span>
+                      <span>¥{step1Data?.price || '0'}</span>
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                      <span style={{ color: '#666' }}>主讲老师：</span>
+                      <span>{step1Data?.instructorName || '未设置'}</span>
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <span style={{ color: '#666' }}>章节数量：</span>
+                      <span>{chapters.length} 章</span>
+                    </div>
+                  </div>
+                </div>
+                
+                <div style={{ textAlign: 'center', marginTop: '40px' }}>
+                  <Button style={{ marginRight: '16px' }} onClick={() => setCurrentStep(1)}>
+                    上一步
+                  </Button>
+                  <Button type="primary" onClick={handleSubmitAudit}>
+                    提交审核
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const handleSubmitAudit = () => {
+    const data = step1Data || {};
+    const newCourse = {
+      id: Date.now().toString(),
+      title: data.courseTitle || '未命名课程',
+      price: data.price || 0,
+      instructorName: data.instructorName || '',
+      coverImage: coverImageUrl,
+      introduction: mdValue || '',
+      totalDuration: data.totalHours || 0,
+      chapters: chapters.map(chapter => ({
+        id: chapter.id,
+        title: chapter.name,
+        sections: sections
+          .filter(section => section.chapterId === chapter.id)
+          .map(section => ({
+            id: section.id,
+            title: section.name,
+            duration: 0,
+            videoFile: section.videoFile || ''
+          }))
+      }))
+    };
+
+    try {
+      const existing = localStorage.getItem('courses');
+      const list = existing ? JSON.parse(existing) : [];
+      list.push(newCourse);
+      localStorage.setItem('courses', JSON.stringify(list));
+      message.success('课程提交审核成功！');
+      navigate('/course/list');
+    } catch {
+      message.error('提交审核失败，请重试');
+    }
+  };
+
+  return (
+    <div style={{ padding: '24px', backgroundColor: '#f0f2f5', minHeight: '100vh' }}>
+      {/* 顶部区域：动态渲染以匹配不同步骤的UI */}
+      {currentStep === 0 ? (
+        <div style={{ backgroundColor: '#fff', padding: '16px 24px', marginBottom: '24px', borderRadius: '4px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <ReadOutlined style={{ fontSize: '20px', color: '#1890ff' }} />
+            <span style={{ fontSize: '18px', fontWeight: 600 }}>课程创建向导</span>
+            <span style={{ color: '#1890ff', fontSize: '12px', backgroundColor: '#e6f7ff', padding: '2px 8px', borderRadius: '10px' }}>当前步骤 1 / 3</span>
+          </div>
+          <div style={{ maxWidth: '800px' }}>
+            <Steps
+              current={currentStep}
+              items={[
+                { title: '填写课程基本信息' },
+                { title: '创建课程大纲' },
+                { title: '提交审核' },
+              ]}
+            />
+          </div>
+        </div>
+      ) : currentStep === 1 ? (
+        <div style={{ backgroundColor: '#fff', padding: '16px 24px', marginBottom: '24px', borderRadius: '4px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <ReadOutlined style={{ fontSize: '20px', color: '#1890ff' }} />
+            <span style={{ fontSize: '18px', fontWeight: 600 }}>课程创建向导</span>
+            <span style={{ color: '#1890ff', fontSize: '12px', backgroundColor: '#e6f7ff', padding: '2px 8px', borderRadius: '10px' }}>当前步骤 2 / 3</span>
+          </div>
+          <div style={{ maxWidth: '800px' }}>
+            <Steps
+              current={currentStep}
+              items={[
+                { title: '填写课程基本信息' },
+                { title: '创建课程大纲' },
+                { title: '提交审核' },
+              ]}
+            />
+          </div>
+        </div>
+      ) : null}
+
+      {/* 渲染对应步骤的内容 */}
+      {renderStepContent()}
+
+      {/* 添加章节弹窗 */}
+      <Modal
+        title="添加章节"
+        open={isChapterModalVisible}
+        onCancel={handleCancelModal}
+        footer={[
+          <Button key="cancel" onClick={handleCancelModal}>
+            取消
+          </Button>,
+          <Button key="submit" type="primary" onClick={handleAddChapter}>
+            确定
+          </Button>
+        ]}
+        width={500}
+      >
+        <Form
+          form={chapterForm}
+          layout="horizontal"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          style={{ marginTop: '24px' }}
+          colon={true}
+        >
+          <Form.Item
+            name="chapterName"
+            label="章节名称"
+            rules={[{ required: true, message: '请输入章节名称' }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="sortOrder"
+            label="章节排序"
+          >
+            <InputNumber style={{ width: 120 }} />
+          </Form.Item>
+        </Form>
+      </Modal>
+      {/* 添加小节弹窗 */}
+      <Modal
+        title="添加小节"
+        open={isSectionModalVisible}
+        onCancel={handleCancelSectionModal}
+        footer={[
+          <Button key="cancel" onClick={handleCancelSectionModal}>
+            取消
+          </Button>,
+          <Button key="submit" type="primary" onClick={handleSubmitSection}>
+            确定
+          </Button>
+        ]}
+        width={500}
+      >
+        <Form
+          form={sectionForm}
+          layout="horizontal"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          style={{ marginTop: '24px' }}
+          colon={true}
+          initialValues={{
+            videoCover: [],
+            videoFile: []
+          }}
+        >
+          <Form.Item
+            name="sectionName"
+            label="课时名称"
+            rules={[{ required: true, message: '请输入课时名称' }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="sortOrder"
+            label="课时排序"
+            rules={[{ required: true, message: '请输入课时排序' }]}
+          >
+            <InputNumber style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item
+            name="isFree"
+            label="是否免费"
+            valuePropName="checked"
+            initialValue={false}
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item label="视频封面">
+            <Upload
+              listType="picture"
+              showUploadList={false}
+              beforeUpload={handleVideoCoverUpload}
+              accept="image/*"
+            >
+              <Button icon={videoCoverUploading ? <LoadingOutlined /> : <UploadOutlined />}>
+                {videoCoverUrl ? '重新上传' : '点击上传'}
+              </Button>
+              {videoCoverUrl && <span style={{ marginLeft: 8, color: '#52c41a' }}>已上传</span>}
+            </Upload>
+          </Form.Item>
+          <Form.Item label="视频文件">
+            <Upload
+              listType="text"
+              showUploadList={false}
+              beforeUpload={handleVideoFileUpload}
+              accept="video/*"
+            >
+              <Button icon={videoFileUploading ? <LoadingOutlined /> : <UploadOutlined />}>
+                {videoFileUrl ? '重新上传' : '点击上传'}
+              </Button>
+              {videoFileUrl && <span style={{ marginLeft: 8, color: '#52c41a' }}>已上传</span>}
+            </Upload>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default Course;