feat: 订阅

apps/web-main/package.json

@@ -18,7 +18,6 @@
     "@ricons/utils": "0.1.6",
     "dayjs": "1.11.7",
     "identicon": "3.1.1",
-    "react-perfect-scrollbar": "1.5.8",
     "dplayer": "1.27.1"
   },
   "devDependencies": {

apps/web-main/src/router/index.tsx

@@ -1,5 +1,6 @@
 import Course from "../view/Course";
 import CourseDetail from "../view/CourseDetail";
+import Subscribe from "../view/Subscribe";
 import Topic from "../view/Topic";
 
 export const routerList = [
@@ -13,6 +14,11 @@ export const routerList = [
     element: <Topic />,
     name: "讨论",
   },
+  {
+    path: "/subscribe",
+    element: <Subscribe />,
+    name: "订阅",
+  },
   {
     path: "/course/detail/:id",
     element: <CourseDetail />,

apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx

@@ -12,19 +12,18 @@ interface IProps {
 function Player(props: IProps) {
   const playerRef = useRef<any>();
 
-  const baseConf: DPlayerOptions = {
+  useEffect(() => {
+    if (props.video) {
+      new DPlayer({
         container: playerRef.current,
+        video: { ...props.video, type: "hls" },
         preload: "auto",
         playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
         screenshot: true,
         pluginOptions: {
           hls: {},
         },
-  };
+      });
-
-  useEffect(() => {
-    if (props.video) {
-      new DPlayer({ ...baseConf, video: { ...props.video, type: "hls" } });
     }
   }, [props.video]);
 

apps/web-main/src/view/CourseDetail/index.tsx

@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import "./index.less";
 import { ResizeBox, Space, Result, Button } from "@arco-design/web-react";
 import { Icon } from "@ricons/utils";
-import "react-perfect-scrollbar/dist/css/styles.css";
-import PerfectScrollbar from "react-perfect-scrollbar";
 import Material from "./components/Material";
 import { useMount } from "../../hook";
 import Player from "./components/DPlayer";
@@ -99,7 +97,6 @@ function CourseDetail() {
         min={0.1}
         size={0.2}
         panes={[
-          <PerfectScrollbar>
           <aside>
             <h2>基础架构：一条SQL查询语句是如何执行的？</h2>
             <div>
@@ -129,8 +126,7 @@ function CourseDetail() {
                 }
               })}
             </div>
-            </aside>
+          </aside>,
-          </PerfectScrollbar>,
           <article>
             <main>{view}</main>
           </article>,

apps/web-main/src/view/Subscribe/index.less

@@ -0,0 +1,43 @@
+.subscribe {
+  padding: 100px 0 20px 0;
+  h2 {
+    text-align: center;
+  }
+  h4 {
+    text-align: center;
+    font-weight: 400;
+    color: var(--color-text-4);
+  }
+  .options {
+    padding-top: 100px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 20px;
+    > section {
+      padding: 40px;
+      text-align: center;
+      .price {
+        font-family: DINCondensed-Bold, "Century Gothic", CenturyGothic,
+          AppleGothic, sans-serif;
+        font-weight: bold;
+        font-size: 48px;
+        color: var(--color-text-2);
+        line-height: 1;
+        margin-top: 16px;
+        letter-spacing: 1px;
+      }
+      h3 {
+        font-size: 18px;
+        font-weight: bold;
+        color: var(--color-text-2);
+        letter-spacing: 5px;
+        margin-top: 40px;
+      }
+      p {
+        color: var(--color-text-3);
+        letter-spacing: 1px;
+        line-height: 1.9;
+      }
+    }
+  }
+}

apps/web-main/src/view/Subscribe/index.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@arco-design/web-react";
+import "./index.less";
+
+// 季度：三个月内，在线学习 ninghao.net 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+
+function Subscribe() {
+  return (
+    <div className="container subscribe">
+      <h2>订阅选项</h2>
+      <h4>我也不知道该如何劝你们花钱点钱？但是学一点可能就少亏一点</h4>
+      <div className="options">
+        <section className="bs-shadow">
+          <h3>季度</h3>
+          <div className="price">199</div>
+          <p>
+            三个月内，在线学习 ninghao.net
+            上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+          </p>
+          <Button>订阅</Button>
+        </section>
+        <section className="bs-shadow">
+          <h3>季度</h3>
+          <div className="price">299</div>
+          <p>
+            三个月内，在线学习 ninghao.net
+            上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+          </p>
+          <Button>订阅</Button>
+        </section>
+        <section className="bs-shadow">
+          <h3>季度</h3>
+          <div className="price">399</div>
+          <p>
+            三个月内，在线学习 ninghao.net
+            上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
+          </p>
+          <Button>订阅</Button>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default Subscribe;

apps/web-main/src/view/Topic/index.less

@@ -0,0 +1,3 @@
+.topic {
+  padding: 100px 0 20px 0;
+}

apps/web-main/src/view/Topic/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import './index.less'
 
 export default function Index() {
-  return <div>UserIndex</div>;
+  return <div className="container topic">UserIndex</div>;
 }

pnpm-lock.yaml

@@ -191,7 +191,6 @@ importers:
       less: ^4.1.3
       react: ^18.2.0
       react-dom: ^18.2.0
-      react-perfect-scrollbar: 1.5.8
       react-router-dom: 6.8.0
       typescript: ^4.9.3
       vite: ^4.1.0
@@ -206,7 +205,6 @@ importers:
       less: registry.npmmirror.com/less/4.1.3
       react: registry.npmmirror.com/react/18.2.0
       react-dom: registry.npmmirror.com/react-dom/18.2.0_react@18.2.0
-      react-perfect-scrollbar: registry.npmmirror.com/react-perfect-scrollbar/1.5.8_biqbaboplfbrettd7655fr4n2y
       react-router-dom: registry.npmmirror.com/react-router-dom/6.8.0_biqbaboplfbrettd7655fr4n2y
     devDependencies:
       '@types/dplayer': registry.npmmirror.com/@types/dplayer/1.25.2
@@ -9859,12 +9857,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  registry.npmmirror.com/perfect-scrollbar/1.5.5:
-    resolution: {integrity: sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz}
-    name: perfect-scrollbar
-    version: 1.5.5
-    dev: false
-
   registry.npmmirror.com/performance-now/2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz}
     name: performance-now
@@ -11348,21 +11340,6 @@ packages:
     version: 16.13.1
     dev: false
 
-  registry.npmmirror.com/react-perfect-scrollbar/1.5.8_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz}
-    id: registry.npmmirror.com/react-perfect-scrollbar/1.5.8
-    name: react-perfect-scrollbar
-    version: 1.5.8
-    peerDependencies:
-      react: '>=16.3.3'
-      react-dom: '>=16.3.3'
-    dependencies:
-      perfect-scrollbar: registry.npmmirror.com/perfect-scrollbar/1.5.5
-      prop-types: registry.npmmirror.com/prop-types/15.8.1
-      react: registry.npmmirror.com/react/18.2.0
-      react-dom: registry.npmmirror.com/react-dom/18.2.0_react@18.2.0
-    dev: false
-
   registry.npmmirror.com/react-refresh/0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz}
     name: react-refresh