feat: 课程创建

apps/admin/src/assets/less/common.less

@@ -24,3 +24,16 @@ ul {
   font-family: "bs";
   src: url("./backset.woff");
 }
+
+.bs-scrollbar {
+  &::-webkit-scrollbar {
+    width: 14px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    background-clip: padding-box;
+    border-radius: 7px;
+    background-color: #d2d2d2;
+  }
+}

apps/admin/src/layout/index.less

@@ -1,8 +1,20 @@
+.container {
+  height: 100%;
+  background: #f1f1f1;
+  header {
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 46px;
+    background: #001529;
+    z-index: 19;
+
     .logo {
-  float: left;
+      width: 320px;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
       display: flex;
       align-items: center;
       color: #fff;
@@ -15,3 +27,24 @@
         font-size: 16px;
       }
     }
+  }
+  aside {
+    position: fixed;
+    left: 0;
+    top: 46px;
+    bottom: 0;
+    width: 200px;
+  }
+  main {
+    position: fixed;
+    left: 200px;
+    right: 0;
+    top: 46px;
+    bottom: 0;
+    overflow-y: auto;
+    .view {
+      width: 1120px;
+      margin: 0 auto;
+    }
+  }
+}

apps/admin/src/layout/index.tsx

@@ -50,8 +50,8 @@ const Index: React.FC = () => {
   };
 
   return (
-    <Layout style={{ height: "100%" }}>
+    <div className="container">
-      <Header className="header">
+      <header>
         <div className="logo">
           <svg
             fill="currentColor"
@@ -71,8 +71,8 @@ const Index: React.FC = () => {
           items={navMenus}
           onClick={onClickNavMenuItem}
         />
-      </Header>
+      </header>
-      <Layout>
+      <aside>
         <Sider width={200} style={{ background: colorBgContainer }}>
           <Menu
             mode="inline"
@@ -83,15 +83,9 @@ const Index: React.FC = () => {
             onClick={onClickSideMenuItem}
           />
         </Sider>
-        <Layout className="site-layout">
+      </aside>
-          <Content
+      <main className="bs-scrollbar">
-            style={{
+        <div className="view">
-              margin: "24px 16px",
-              padding: 24,
-              minHeight: 280,
-              background: colorBgContainer,
-            }}
-          >
           <Routes>
             {[...navRoutes, ...sideMenuRoutes].map((router) => (
               <Route
@@ -106,10 +100,9 @@ const Index: React.FC = () => {
             ))}
             <Route path="*" element={<span>404</span>} />
           </Routes>
-          </Content>
+        </div>
-        </Layout>
+      </main>
-      </Layout>
+    </div>
-    </Layout>
   );
 };
 

apps/admin/src/view/Course/Create/Appendix.tsx

@@ -1,5 +0,0 @@
-const Appendix = () => {
-  return <div>附件</div>;
-};
-
-export default Appendix;

apps/admin/src/view/Course/Create/Appendix/index.tsx

@@ -0,0 +1,10 @@
+interface IProps {
+  onChange?: Function;
+  styles?: React.CSSProperties;
+}
+
+const Appendix = (props: IProps) => {
+  return <div style={{ ...props.styles }}>附件</div>;
+};
+
+export default Appendix;

apps/admin/src/view/Course/Create/BasicForm/index.less

@@ -3,7 +3,7 @@
   background-size: cover;
   background-position: center;
   border-radius: 6px;
-  height: 100%;
+  height: 360px;
   .mask {
     position: absolute;
     left: 50%;
@@ -14,16 +14,19 @@
       color: #fff;
       text-align: center;
       margin: 0;
+      letter-spacing: 2px;
       &.title {
         background: rgba(0, 0, 0, 0.7);
         font-size: 22px;
         padding: 10px;
         line-height: 1.5;
+        border-radius: 6px 6px 0 0;
       }
       &.summary {
         background: rgba(0, 0, 0, 0.3);
         padding: 6px;
         line-height: 1.4;
+        border-radius: 0 0 6px 6px;
       }
     }
   }

apps/admin/src/view/Course/Create/BasicForm/index.tsx

@@ -1,34 +1,24 @@
 import { InboxOutlined } from "@ant-design/icons";
-import {
+import { Col, Form, Input, message, Row, Upload, UploadProps } from "antd";
-  Card,
+import { useEffect, useState } from "react";
-  Col,
-  Form,
-  Input,
-  message,
-  Row,
-  Upload,
-  UploadProps,
-} from "antd";
-import { useState } from "react";
 import "./index.less";
 const { Dragger } = Upload;
-const { Meta } = Card;
 
 interface IProps {
   onChange: Function;
+  styles?: React.CSSProperties;
 }
 
 const BasicForm = (props: IProps) => {
   const [preview, setPreivew] = useState({
     coverUrl: "",
-    title: "标题",
+    title: "",
-    summary: "摘要",
+    summary: "",
   });
   const [form] = Form.useForm();
 
-  const onValuesChange = (_: any, all: any) => {
+  const onValuesChange = (_: any, all: any) =>
     setPreivew((p) => ({ ...p, ...all }));
-  };
 
   const coverDragger: UploadProps = {
     name: "file",
@@ -53,36 +43,12 @@ const BasicForm = (props: IProps) => {
     },
   };
 
+  useEffect(() => props.onChange(preview), [preview]);
+
   return (
-    <div>
+    <div style={{ ...props.styles }}>
-      <Row gutter={24}>
+      <Row style={{ marginBottom: 24 }}>
-        <Col span={12}>
+        <Col span={24}>
-          <Form form={form} onValuesChange={onValuesChange}>
-            <Form.Item>
-              <Dragger {...coverDragger} maxCount={1}>
-                <p className="ant-upload-drag-icon">
-                  <InboxOutlined />
-                </p>
-                <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-                <p className="ant-upload-hint">支持单个或批量上传</p>
-              </Dragger>
-            </Form.Item>
-            <Form.Item name="title" rules={[{ required: true }]}>
-              <Input type="text" placeholder="标题" />
-            </Form.Item>
-            <Form.Item
-              name="summary"
-              rules={[{ required: true }]}
-              style={{ marginBottom: 0 }}
-            >
-              <Input.TextArea
-                placeholder="摘要"
-                style={{ height: 120, resize: "none" }}
-              />
-            </Form.Item>
-          </Form>
-        </Col>
-        <Col span={12}>
           <div
             className="preview-course"
             style={{
@@ -99,12 +65,42 @@ const BasicForm = (props: IProps) => {
             }}
           >
             <div className="mask">
-              <p className="title">{preview.title}</p>
+              <p className="title">{!preview.title ? "标题" : preview.title}</p>
-              <p className="summary">{preview.summary} </p>
+              <p className="summary">
+                {!preview.summary ? "摘要" : preview.summary}{" "}
+              </p>
             </div>
           </div>
         </Col>
       </Row>
+      <Row gutter={24}>
+        <Col span={12}>
+          <Dragger {...coverDragger} maxCount={1}>
+            <p className="ant-upload-drag-icon">
+              <InboxOutlined />
+            </p>
+            <p className="ant-upload-text">上传课程封面图</p>
+            <p className="ant-upload-hint">点击或拖拽文件到此处</p>
+          </Dragger>
+        </Col>
+        <Col span={12}>
+          <Form form={form} onValuesChange={onValuesChange}>
+            <Form.Item name="title" rules={[{ required: true }]}>
+              <Input size="large" type="text" placeholder="标题" />
+            </Form.Item>
+            <Form.Item
+              name="summary"
+              rules={[{ required: true }]}
+              style={{ marginBottom: 0 }}
+            >
+              <Input.TextArea
+                placeholder="摘要"
+                style={{ height: 130, resize: "none" }}
+              />
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
     </div>
   );
 };

apps/admin/src/view/Course/Create/Chatpter/index.tsx

@@ -0,0 +1,10 @@
+interface IProps {
+  onChange?: Function;
+  styles?: React.CSSProperties;
+}
+
+const Chatpter = (props: IProps) => {
+  return <div style={{ ...props.styles }}>123</div>;
+};
+
+export default Chatpter;

apps/admin/src/view/Course/Create/MediaBind.tsx

@@ -1,5 +0,0 @@
-const MediaBind = () => {
-  return <div>123</div>;
-};
-
-export default MediaBind;

apps/admin/src/view/Course/Create/index.less

@@ -1,6 +1,5 @@
 .create-course {
-  display: flex;
+  padding: 24px 0;
-  flex-direction: column;
   .content {
     padding: 20px 0;
     flex: 1;

apps/admin/src/view/Course/Create/index.tsx

@@ -1,5 +1,7 @@
 import {
   Button,
+  Card,
+  Col,
   Form,
   Input,
   InputNumber,
@@ -11,28 +13,27 @@ import {
 import { useState } from "react";
 import Appendix from "./Appendix";
 import BasicForm from "./BasicForm";
+import Chatpter from "./Chatpter";
 import "./index.less";
-import MediaBind from "./MediaBind";
 
 const CourseCreate = () => {
   const [current, setCurrent] = useState(0);
+  const [course, setCourse] = useState({
+    basicInfo: {},
+  });
 
-  const onBasicFormChange = (form: any) => {
+  const onBasicFormChange = (form: any) =>
-    console.log(form);
+    setCourse((p) => ({ ...p, basicInfo: form }));
-  };
 
   const steps = [
     {
       title: "基本信息",
-      content: <BasicForm onChange={onBasicFormChange} />,
     },
     {
-      title: "媒体资源",
+      title: "章节",
-      content: <MediaBind />,
     },
     {
       title: "附件",
-      content: <Appendix />,
     },
   ];
 
@@ -40,18 +41,25 @@ const CourseCreate = () => {
 
   return (
     <div className="create-course">
+      <Card>
         <Steps current={current} items={items} />
-      <div className="content">{steps[current].content}</div>
+        <div className="content">
-      <div style={{ textAlign: "right" }}>
+          <BasicForm
+            onChange={onBasicFormChange}
+            styles={{ display: current === 0 ? "block" : "none" }}
+          />
+          <Chatpter styles={{ display: current === 1 ? "block" : "none" }} />
+          <Appendix styles={{ display: current === 2 ? "block" : "none" }} />
+        </div>
+        <div style={{ textAlign: "right", marginTop: "40px" }}>
+          {current > 0 && (
             <Button
-          style={{
+              style={{ marginRight: "12px" }}
-            margin: "0 8px",
-            visibility: current > 0 ? "visible" : "hidden",
-          }}
               onClick={() => setCurrent(current - 1)}
             >
               上一步
             </Button>
+          )}
           {current < steps.length - 1 && (
             <Button type="primary" onClick={() => setCurrent(current + 1)}>
               下一步
@@ -66,19 +74,7 @@ const CourseCreate = () => {
             </Button>
           )}
         </div>
-      {/* <Form>
+      </Card>
-        <Form.Item
-          wrapperCol={{ span: 24 }}
-          name="title"
-          rules={[{ required: true, message: "Please input your username!" }]}
-        >
-          <Input placeholder="标题" />
-        </Form.Item>
-        <Form.Item><InputNumber placeholder="售价" /></Form.Item>
-        <Form.Item>
-          <Button type="primary">提交</Button>
-        </Form.Item>
-      </Form> */}
     </div>
   );
 };

apps/admin/src/view/Course/Library/index.tsx

@@ -48,7 +48,9 @@ const Library = () => {
             <Row>{record.name}</Row>
             <Row style={{ paddingTop: "5px" }}>
               {record.m3u8SubStreamList.map((item: any, index: number) => (
-                <Tag color={colors[index]}>{item}</Tag>
+                <Tag key={item} color={colors[index]}>
+                  {item}
+                </Tag>
               ))}
             </Row>
             <Row style={{ paddingTop: "5px" }}>
@@ -160,7 +162,7 @@ const Library = () => {
   });
 
   return (
-    <div>
+    <Card style={{ marginTop: 24 }}>
       <Row>
         <Col span={14}>
           <Space>
@@ -197,7 +199,7 @@ const Library = () => {
           />
         </Col>
       </Row>
-    </div>
+    </Card>
   );
 };