课程代码

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

@@ -0,0 +1,51 @@
+//课程详情简介
+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 = () => {
+  
+
+  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>
+    );
+};
+
+export default Widget;
+
+
+/*
+<Button type="primary">关注</Button>
+<Button type="primary" disabled>
+  已关注
+</Button>
+*/

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

@@ -0,0 +1,62 @@
+//课程列表
+import React from 'react';
+import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+import { Avatar, List, Space } from 'antd';
+
+const data = Array.from({ length: 23 }).map((_, i) => ({
+  href: '../course/show',
+  title: `课程 ${i}`,
+  avatar: 'https://joeschmoe.io/api/v1/random',
+  description:
+    '主讲人: 小僧善巧',
+  content:
+    '一年之计在于春，新春佳节修善行； 一周学习与精进，法为伊始吉祥年',
+}));
+
+const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
+  <Space>
+    {React.createElement(icon)}
+    {text}
+  </Space>
+);
+
+const App: React.FC = () => (
+  <List
+    itemLayout="vertical"
+    size="large"
+    pagination={{
+      onChange: (page) => {
+        console.log(page);
+      },
+      pageSize: 5,
+    }}
+    dataSource={data}
+    footer={
+      <div>
+        <b>ant design</b> footer part
+      </div>
+    }
+    renderItem={(item) => (
+      <List.Item
+        key={item.title}
+
+        extra={
+          <img
+            width={272}
+            alt="logo"
+            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"
+          />
+        }
+      >
+        <List.Item.Meta
+          avatar={<Avatar src={item.avatar} />}
+          title={<a href={item.href}>{item.title}</a>}
+          description={item.description}
+        />
+        {item.content}
+      </List.Item>
+    )}
+  />
+);
+
+export default App;

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

@@ -0,0 +1,45 @@
+//课程详情图片标题按钮主讲人组合
+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 = () => {
+  
+
+  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>
+          <Button type="primary">关注</Button>
+          </Col>
+
+
+
+
+    <p style={{ "fontWeight": 'bold', "fontSize": 15}}>主讲人： <Link to="/course/lesson/12345">小僧善巧</Link> </p>
+    
+    </Layout>
+      </ProForm.Group>
+    );
+};
+
+export default Widget;
+
+
+/*
+<Button type="primary">关注</Button>
+<Button type="primary" disabled>
+  已关注
+</Button>
+*/

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

@@ -0,0 +1,116 @@
+//主讲人列表
+import { useIntl } from "react-intl";
+import { ProForm, ProFormText } from "@ant-design/pro-components";
+//import { message } from "antd";
+
+import { post } from "../../../request";
+import { useState } from "react";
+//import React from 'react';
+import { Card, List , Col, Row , Space} from 'antd';
+const { Meta } = Card;
+//const {  Card, Col, Row  } = antd;
+
+const data = [
+  {
+    title: 'U Kuṇḍadhāna Sayadaw',
+    introduction: 'U Kuṇḍadhāna Sayadaw简介 U Kun西亚多今年51岁，30个瓦萨， - 1969年，出生于缅甸...',
+    portrait:'https://img2.baidu.com/it/u=2930319359,2500787374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
+
+  },
+  {
+    title: '某尊者',
+    introduction: '某尊者简介...',
+    portrait:'https://img2.baidu.com/it/u=2930319359,2500787374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
+  },
+  {
+    title: '小僧善巧',
+    introduction: '小僧善巧尊者简介...',
+    portrait:'https://avatars.githubusercontent.com/u/58804044?v=4'
+  },
+  {
+    title: 'Kalyāṇamitta',
+    introduction: 'Kalyāṇamitta尊者简介...',
+    portrait:'https://img2.baidu.com/it/u=2930319359,2500787374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334'
+  },
+];
+/*栅格卡片实现方案 https://ant.design/components/card-cn/
+
+const App = () => (
+  <div className="site-card-wrapper">
+    <Row gutter={16}>
+      <Col span={4}>
+      <Card
+    hoverable
+    style={{ width: 240,  height: 300}}
+    cover={<img alt="example" src={data[0].portrait}  width="240" height="180"/>}
+  >
+    <Meta title={data[0].title} description={data[0].introduction} />
+  </Card>
+      </Col>
+      <Col span={4}>
+      <Card
+    hoverable
+    style={{ width: 240,  height: 300}}
+    cover={<img alt="example" src={data[1].portrait}  width="240" height="180"/>}
+  >
+    <Meta title={data[1].title} description={data[1].introduction} />
+  </Card>
+      </Col>
+      <Col span={4}>
+      <Card
+    hoverable
+    style={{ width: 240,  height: 300}}
+    cover={<img alt="example" src={data[2].portrait}  width="240" height="180"/>}
+  >
+    <Meta title={data[2].title} description={data[2].introduction} />
+  </Card>
+      </Col>
+      <Col span={4}>
+      <Card
+    hoverable
+    style={{ width: 240,  height: 300}}
+    cover={<img alt="example" src={data[3].portrait}  width="240" height="180"/>}
+  >
+    <Meta title={data[3].title} description={data[3].introduction} />
+  </Card>
+      </Col>
+    </Row>
+  </div>
+);
+
+export default App;
+*/
+
+
+/*List实现方案
+
+import { useIntl } from "react-intl";
+import { ProForm, ProFormText } from "@ant-design/pro-components";
+//import { message } from "antd";
+
+import { post } from "../../../request";
+import { useState } from "react";
+//import React from 'react';
+import { Card, List } from 'antd';
+const { Meta } = Card;
+*/
+const App: React.FC = () => (
+
+  <List
+    grid={{ gutter: 16, column: 4 }}
+    dataSource={data}
+    renderItem={(item) => (
+      <List.Item>
+        <Card
+          hoverable
+          style={{ width: 240,  height: 300}}
+          cover={<img alt="example" src={item.portrait}  width="240" height="180"/>}
+          >
+          <Meta title={item.title} description={item.introduction} />
+        </Card>
+      </List.Item>
+    )}
+  />
+      
+);
+export default App;