课程代码

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

@@ -0,0 +1,78 @@
+//课程详情页面
+import { Link } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { Layout, Col, Row,Divider } 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'
+const { Content, Header } = Layout;
+
+let arrTocTree: ListNodeData[] = [];
+let  i = 0;
+do {
+  ++i
+  arrTocTree.push({
+    key: i.toString(),
+    title: `课程 ${i}`,
+    level: 1,
+  });
+   }while(i<10)  // 在循环的尾部检查条件
+
+
+   let markdown='# 这是标题\n' +
+   '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
+   '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
+  '**这是加粗的文字**\n\n' +
+   '*这是倾斜的文字*`\n\n' +
+   '***这是斜体加粗的文字***\n\n' +
+   '~~这是加删除线的文字~~ \n\n'+
+   '\`console.log(Hello World)\` \n\n'+
+   '```const a=2; ```'
+
+const Widget = () => {
+  // TODO
+  const { courseid } = useParams(); //url 参数
+  
+  return (
+    <Layout>
+
+
+    <Content>
+      <Row>
+          <Col flex="auto"></Col>
+          <Col flex="1760px">
+    <div>
+      <div>
+      <CourseShow />
+      <Divider />   
+      <ReactMarkdown rehypePlugins={[rehypeRaw]} children={markdown} />
+      <CourseIntro />
+      <Divider />   
+      <TocTree treeData={arrTocTree} />
+        </div>
+
+    </div>
+    </Col>
+    </Row>
+      </Content>
+    </Layout>
+  );
+};
+
+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>
+  );
+*/

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

@@ -1,17 +1,99 @@
-import { useParams } from "react-router-dom";
-
-const Widget = () => {
-	// TODO
-	const { lessonid } = useParams(); //url 参数
-
-	return (
-		<div>
-			<div>课 {lessonid} 详情</div>
-			<div>
-				主显示区
-			</div>
-		</div>
-	);
-};
-
-export default Widget;
+//讲页面
+import { Link } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { Layout, Col, Row,Divider } 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'
+const { Content, Header } = Layout;
+
+let arrTocTree: ListNodeData[] = [];
+let  i = 0;
+do {
+  ++i
+  arrTocTree.push({
+    key: i.toString(),
+    title: `课程 ${i}`,
+    level: 1,
+  });
+   }while(i<10)  // 在循环的尾部检查条件
+
+   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; ```'
+
+const Widget = () => {
+  // TODO
+  const { courseid } = useParams(); //url 参数
+  
+  return (
+    <Layout>
+
+
+    <Content>
+      <Row>
+          <Col flex="auto"></Col>
+          <Col flex="1760px">
+    <div>
+      <div>
+        <h1 style={{ "fontWeight": 'bold', "fontSize": 30}}>课程7</h1>
+      <Divider />   
+      <ReactMarkdown rehypePlugins={[rehypeRaw]} children={markdown} />
+      <Divider /> 
+
+      <TocTree treeData={arrTocTree} />
+        </div>
+
+    </div>
+    </Col>
+    </Row>
+      </Content>
+    </Layout>
+  );
+};
+
+export default Widget;
+/*
+      <p style={{ "fontWeight": 'bold', "fontSize": 15}}>时间安排： 2022/2/2 </p>
+      <p style={{ "fontWeight": 'bold', "fontSize": 15}}>持续时间： 2小时 </p>
+      <p style={{ "fontWeight": 'bold', "fontSize": 15}}>主讲人： <Link to="/course/lesson/12345">小僧善巧</Link> </p>
+    
+      <Divider /> 
+        <h2 style={{ "fontWeight": 'bold', "fontSize": 20}}>直播预告</h2>
+      <p style={{ "fontWeight": 'bold', "fontSize": 15}}>marked is not a function </p>
+        <h2 style={{ "fontWeight": 'bold', "fontSize": 20}}>录播回放</h2>
+      <p style={{ "fontWeight": 'bold', "fontSize": 15}}>marked is not a function </p>
+      <h2 style={{ "fontWeight": 'bold', "fontSize": 20}}>内容</h2>
+      <p style={{ "fontWeight": 'bold', "fontSize": 15}}>marked is not a function </p>
+*/
+
+/*
+import { useParams } from "react-router-dom";
+
+const Widget = () => {
+  // TODO
+  const { lessonid } = useParams(); //url 参数
+
+  return (
+    <div>
+      <div>课 {lessonid} 详情</div>
+      <div>
+        主显示区
+      </div>
+    </div>
+  );
+};
+*/

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

@@ -1,16 +1,77 @@
-import { Link } from "react-router-dom";
-
-const Widget = () => {
-	// TODO
-	return (
-		<div>
-			<div>课程首页</div>
-			<div>
-				<Link to="/course/show/12345">课程1</Link>
-				<Link to="/course/show/23456">课程2</Link>
-			</div>
-		</div>
-	);
-};
-
-export default Widget;
+//课程主页
+import { Link } from "react-router-dom";
+import { Space, Input } from "antd";
+import { Layout, Affix, Col, Row, Divider } from "antd";
+
+import LecturerList from "../../../components/library/course/LecturerList";
+import CourseList from "../../../components/library/course/CourseList";
+const { Content, Header } = Layout;
+const { Search } = Input;
+const Widget = () => {
+  // TODO i18n
+  return (
+    <Layout>
+      <Header style={{ height: 200 }}>
+        <h1 style={{"color": "white", "fontWeight": 'bold', "fontSize": 40}}>课程</h1>
+        <p style={{"color": "white", "fontSize": 17}}>看看世界各地的巴利专家都是如何解析圣典的</p>
+      </Header>
+
+
+      <Content>
+        <Row>
+          <Col flex="auto"></Col>
+          <Col flex="1260px">
+          <Row>
+              
+          <h1>主讲人</h1>
+              </Row>
+            <Row>
+              
+            <div>
+              <LecturerList />
+            </div>
+            </Row>
+          </Col>
+          <Col flex="auto"></Col>
+        </Row>
+        <Space></Space>
+        <Row>
+          <Col flex="auto"></Col>
+          <Col flex="1260px">
+          <Row>
+          <Divider />   
+          <h1>正在进行</h1>
+              </Row>
+            <Row>
+              
+            <div>
+              <CourseList />
+            </div>
+            </Row>
+          </Col>
+          <Col flex="auto"></Col>
+        </Row>
+        <Space></Space>
+        <Row>
+          <Col flex="auto"></Col>
+          <Col flex="1260px">
+          <Row>
+          <Divider />
+          <h1>已经结束</h1>
+              </Row>
+            <Row>
+              
+            <div>
+              <CourseList />
+            </div>
+            </Row>
+          </Col>
+          <Col flex="auto"></Col>
+        </Row>
+      </Content>
+    </Layout>
+
+  );
+};
+
+export default Widget;