与服务器api连接

dashboard/src/components/library/course/CourseIntro.tsx

@@ -1,51 +1,24 @@
 //课程详情简介
-import { Link } from "react-router-dom";
-import React from 'react';
-import { ProForm, ProFormText } from "@ant-design/pro-components";
-import {Layout,  Descriptions, Space , Col, Row } from 'antd';
-
-import ReactPlayer from 'react-player'
-
-const Widget = () => {
-  
+import { Col, Row } from "antd";
+import { marked } from "marked";
 
+interface IWidget {
+  intro?: string;
+}
+const Widget = ({ intro }: IWidget) => {
   return (
-    <ProForm.Group>
-        <Layout>
-        <Descriptions title="课程简介">
-    <Descriptions.Item label=" ">每一尊佛体证后，都会有一次殊胜的大聚会，那是十方天人的相聚，由此宣说《大集会经》。
-佛陀观察到：天人们内心有种种问题，他们却不知该如何表达……
-于是便有了化身佛在问，本尊佛在答……
- 
-根据众生的根性，佛陀共开示六部经，分别针对贪、瞋、痴、信、觉、寻六种性格习性的天人。
-此部《纷争分歧经》便是专门为瞋行者量身而作，瞋行者往往多思、多慧，佛陀便以智慧循循善诱，抽丝剥茧，层层深入，探究纷争、分歧等八种烦恼根源何在……
- 
-听，佛陀在说——
-让我们以佛陀当年的语言——古老的巴利语——去聆听佛陀的教诲……</Descriptions.Item>
-  </Descriptions>
-  <Descriptions title="电子平台课堂笔记">
-    <Descriptions.Item label="快速预览（课前预习）">
-      <Link to="/course/lesson/12345">原文</Link>  <Link to="/course/lesson/23456">原文+义注</Link> </Descriptions.Item>
-  </Descriptions>
-  <ReactPlayer
-            className='react-player fixed-bottom'
-            url= 'https://assets-hk.wikipali.org/video/admissions1080p.mp4'
-            width='50%'
-            height='50%'
-            controls = {true}
-
-          />
-    </Layout>
-      </ProForm.Group>
-    );
+    <Row>
+      <Col flex="auto"></Col>
+      <Col flex="1260px">
+        <div
+          dangerouslySetInnerHTML={{
+            __html: marked.parse(intro ? intro : ""),
+          }}
+        />
+      </Col>
+      <Col flex="auto"></Col>
+    </Row>
+  );
 };
 
 export default Widget;
-
-
-/*
-<Button type="primary">关注</Button>
-<Button type="primary" disabled>
-  已关注
-</Button>
-*/

dashboard/src/components/library/course/CourseShow.tsx

@@ -1,45 +1,54 @@
 //课程详情图片标题按钮主讲人组合
 import { Link } from "react-router-dom";
-import React from 'react';
-import { ProForm, ProFormText } from "@ant-design/pro-components";
-import {Layout,  Image, Button, Space , Col, Row } from 'antd';
-
-const Widget = () => {
-  
-
+import { Image, Button, Space, Col, Row } from "antd";
+import { Typography } from "antd";
+
+import { IUser } from "../../auth/User";
+import { API_HOST } from "../../../request";
+import UserName from "../../auth/UserName";
+
+const { Title } = Typography;
+
+interface IWidget {
+  title?: string;
+  subtitle?: string;
+  coverUrl?: string;
+  teacher?: IUser;
+}
+const Widget = ({ title, subtitle, coverUrl, teacher }: IWidget) => {
   return (
-    <ProForm.Group>
-        <Layout>
-          <Row>
-    <Image
-    width={200}
-    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F0g%2Fk2%2F7d.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673839902&t=d8f4306ddd6935313c66efb936cbe268"
-  />
-    <h1 style={{ "fontWeight": 'bold', "fontSize": 30}}>wikipali课程</h1>
-
-          <Col flex="auto"></Col>
-          <Col flex="1260px">   </Col>
-          </Row>
-          <Col>
+    <>
+      <Row>
+        <Col flex="auto"></Col>
+        <Col flex="1260px">
+          <Space>
+            <Image
+              width={200}
+              style={{ borderRadius: 12 }}
+              src={API_HOST + "/" + coverUrl}
+              fallback={`${API_HOST}/app/course/img/default.jpg`}
+            />
+            <Space direction="vertical">
+              <Title level={3}>{title}</Title>
+              <Title level={5}>{subtitle}</Title>
+            </Space>
+          </Space>
           <Button type="primary">关注</Button>
-          </Col>
-
-
-
-
-    <p style={{ "fontWeight": 'bold', "fontSize": 15}}>主讲人： <Link to="/course/lesson/12345">小僧善巧</Link> </p>
-    
-    </Layout>
-      </ProForm.Group>
-    );
+          <div>
+            主讲人： <UserName {...teacher} />
+          </div>
+        </Col>
+        <Col flex="auto"></Col>
+      </Row>
+    </>
+  );
 };
 
 export default Widget;
 
-
 /*
 <Button type="primary">关注</Button>
 <Button type="primary" disabled>
   已关注
 </Button>
-*/
+*/

dashboard/src/pages/library/course/course.tsx

@@ -1,83 +1,67 @@
 //课程详情页面
-import { Link } from "react-router-dom";
 import { useParams } from "react-router-dom";
-import { Layout, Col, Row, Divider } from "antd";
+import { useEffect, useState } from "react";
+import { Divider, message } from "antd";
+
 import CourseShow from "../../../components/library/course/CourseShow";
 import CourseIntro from "../../../components/library/course/CourseIntro";
-import TocTree from "../../../components/article/TocTree";
-import { ListNodeData } from "../../../components/article/EditableTree";
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import { marked } from "marked";
-const { Content, Header } = Layout;
-
-let arrTocTree: ListNodeData[] = [];
-let i = 0;
-do {
-  ++i;
-  arrTocTree.push({
-    key: i.toString(),
-    title: `课程 ${i}`,
-    level: 1,
-  });
-} while (i < 10); // 在循环的尾部检查条件
+import TextBook from "../../../components/course/TextBook";
 
-let markdown =
-  "# 这是标题\n" +
-  "[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n" +
-  "> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n" +
-  "**这是加粗的文字**\n\n" +
-  "*这是倾斜的文字*`\n\n" +
-  "***这是斜体加粗的文字***\n\n" +
-  "~~这是加删除线的文字~~ \n\n" +
-  "\n\n" +
-  "|表格头1|表格头2|表格头3| \n\n" +
-  "|------|------|------| \n\n" +
-  "| 文本 | 文本 | 文本 |\n\n" +
-  "\n\n" +
-  "```const a=2; ```";
+import { IUser } from "../../../components/auth/User";
+import { get } from "../../../request";
+import { ICourseResponse } from "../../../components/api/Course";
 
+interface ICourse {
+  id: string; //课程ID
+  title: string; //标题
+  subtitle?: string; //副标题
+  teacher?: IUser; //UserID
+  privacy: number; //公开性-公开/内部
+  createdAt: string; //创建时间
+  updatedAt?: string; //修改时间
+  anthologyId?: string; //文集ID
+  startAt?: string; //课程开始时间
+  endAt?: string; //课程结束时间
+  intro?: string; //简介
+  coverUrl?: string; //封面图片文件名
+}
 const Widget = () => {
   // TODO
-  const { courseid } = useParams(); //url 参数
-
+  const { id } = useParams(); //url 参数
+  const [courseInfo, setCourseInfo] = useState<ICourse>();
+  useEffect(() => {
+    get<ICourseResponse>(`/v2/course/${id}`).then((json) => {
+      if (json.ok) {
+        console.log(json.data);
+        const course: ICourse = {
+          id: json.data.id,
+          title: json.data.title,
+          subtitle: json.data.subtitle,
+          teacher: json.data.teacher,
+          privacy: json.data.publicity,
+          createdAt: json.data.created_at,
+          updatedAt: json.data.updated_at,
+          anthologyId: json.data.anthology_id,
+          startAt: json.data.start_at,
+          endAt: json.data.end_at,
+          intro: json.data.content,
+          coverUrl: json.data.cover,
+        };
+        setCourseInfo(course);
+      } else {
+        message.error(json.message);
+      }
+    });
+  }, [id]);
   return (
-    <Layout>
-      <Content>
-        <Row>
-          <Col flex="auto"></Col>
-          <Col flex="1760px">
-            <div>
-              <div>
-                <CourseShow />
-                <Divider />
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: marked.parse(markdown),
-                  }}
-                ></div>
-                <CourseIntro />
-                <Divider />
-                <TocTree treeData={arrTocTree} />
-              </div>
-            </div>
-          </Col>
-        </Row>
-      </Content>
-    </Layout>
+    <div>
+      <CourseShow {...courseInfo} />
+      <Divider />
+      <CourseIntro {...courseInfo} />
+      <Divider />
+      <TextBook anthologyId={courseInfo?.anthologyId} />
+    </div>
   );
 };
 
 export default Widget;
-
-/*
-  return (
-    <div>
-      <div>课程{courseid} 详情</div>
-      <div>
-        <Link to="/course/lesson/12345">lesson 1</Link>
-        <Link to="/course/lesson/23456">lesson 2</Link>
-      </div>
-    </div>
-  );
-*/