feat: 课程创建

2023-03-07 22:08:00 +08:00 · 2023-03-07 22:08:00 +08:00 · ddc823cf9e
commit ddc823cf9e
parent 15537d5c13
12 changed files with 200 additions and 155 deletions
--- a/apps/admin/src/assets/less/common.less
+++ b/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;
+  }
+}
--- a/apps/admin/src/layout/index.less
+++ b/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: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
+      width: 320px;
      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;
+    }
+  }
+}
--- a/apps/admin/src/layout/index.tsx
+++ b/apps/admin/src/layout/index.tsx
@ -50,8 +50,8 @@ const Index: React.FC = () => {
  };

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

--- a/apps/admin/src/view/Course/Create/Appendix.tsx
+++ b/apps/admin/src/view/Course/Create/Appendix.tsx
@ -1,5 +0,0 @@
-const Appendix = () => {
-  return <div>附件</div>;
-};
-
-export default Appendix;
--- a/apps/admin/src/view/Course/Create/Appendix/index.tsx
+++ b/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;
--- a/apps/admin/src/view/Course/Create/BasicForm/index.less
+++ b/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;
      }
    }
  }
--- a/apps/admin/src/view/Course/Create/BasicForm/index.tsx
+++ b/apps/admin/src/view/Course/Create/BasicForm/index.tsx
@ -1,34 +1,24 @@
 import { InboxOutlined } from "@ant-design/icons";
-import {
-  Card,
-  Col,
-  Form,
-  Input,
-  message,
-  Row,
-  Upload,
-  UploadProps,
-} from "antd";
-import { useState } from "react";
+import { Col, Form, Input, message, Row, Upload, UploadProps } from "antd";
+import { useEffect, 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: "标题",
-    summary: "摘要",
+    title: "",
+    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>
-      <Row gutter={24}>
-        <Col span={12}>
-          <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 style={{ ...props.styles }}>
+      <Row style={{ marginBottom: 24 }}>
+        <Col span={24}>
          <div
            className="preview-course"
            style={{
@ -99,12 +65,42 @@ const BasicForm = (props: IProps) => {
            }}
          >
            <div className="mask">
-              <p className="title">{preview.title}</p>
-              <p className="summary">{preview.summary} </p>
+              <p className="title">{!preview.title ? "标题" : preview.title}</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>
  );
 };
--- a/apps/admin/src/view/Course/Create/Chatpter/index.tsx
+++ b/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;
--- a/apps/admin/src/view/Course/Create/MediaBind.tsx
+++ b/apps/admin/src/view/Course/Create/MediaBind.tsx
@ -1,5 +0,0 @@
-const MediaBind = () => {
-  return <div>123</div>;
-};
-
-export default MediaBind;
--- a/apps/admin/src/view/Course/Create/index.less
+++ b/apps/admin/src/view/Course/Create/index.less
@ -1,6 +1,5 @@
 .create-course {
-  display: flex;
-  flex-direction: column;
+  padding: 24px 0;
  .content {
    padding: 20px 0;
    flex: 1;
--- a/apps/admin/src/view/Course/Create/index.tsx
+++ b/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) => {
-    console.log(form);
-  };
+  const onBasicFormChange = (form: any) =>
+    setCourse((p) => ({ ...p, basicInfo: form }));

  const steps = [
    {
      title: "基本信息",
-      content: <BasicForm onChange={onBasicFormChange} />,
    },
    {
-      title: "媒体资源",
-      content: <MediaBind />,
+      title: "章节",
    },
    {
      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 style={{ textAlign: "right" }}>
+        <div className="content">
+          <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={{
-            margin: "0 8px",
-            visibility: current > 0 ? "visible" : "hidden",
-          }}
+              style={{ marginRight: "12px" }}
              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>
-        <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> */}
+      </Card>
    </div>
  );
 };
--- a/apps/admin/src/view/Course/Library/index.tsx
+++ b/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>
  );
 };