feat: backset.cn web ci

apps/web-main/src/components/Nav/index.less

@@ -1,73 +0,0 @@
-header {
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 19;
-  height: 60px;
-  background: #24292f;
-  color: #d7d7d7;
-
-  nav {
-    display: grid;
-    grid-template-columns: 1fr 4fr 1fr;
-    align-items: center;
-    height: 100%;
-
-    .start {
-      display: flex;
-      align-items: center;
-
-      svg {
-        cursor: pointer;
-        width: 28px;
-      }
-
-      span {
-        cursor: pointer;
-        padding-left: 10px;
-        font-size: 20px;
-        font-family: "bs";
-      }
-    }
-
-    .middle {
-      display: flex;
-      align-items: center;
-
-      > span {
-        color: #d7d7d7;
-        text-decoration: none;
-        cursor: pointer;
-        margin-right: 30px;
-
-        &:hover {
-          color: #fff;
-        }
-
-        &.arco-input-inner-wrapper {
-          border: 0;
-        }
-      }
-    }
-
-    .end {
-      text-align: right;
-
-      span {
-        cursor: pointer;
-        margin-left: 32px;
-
-        &:hover {
-          color: #fff;
-        }
-      }
-    }
-  }
-}
-
-.sms-group {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  column-gap: 10px;
-  align-items: center;
-}

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

@@ -1,5 +0,0 @@
-function Material() {
-  return <div>1</div>;
-}
-
-export default Material;

apps/web/.drone.yml

@@ -0,0 +1,18 @@
+---
+kind: pipeline
+type: exec
+name: backset.cn-web dev publish
+
+steps:
+  - name: 依赖更新
+    commands:
+      - pnpm i
+  
+  - name: vite构建
+    commnads:
+      - pnpm build
+
+  - name: 发布web服务器
+    commands:
+      - ls
+      - cp -r dist/ /www/wwwroot/nginx/html/backset.cn

apps/web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@backset/web-main",
+  "name": "@backset/web",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -17,7 +17,6 @@
     "@ricons/fluent": "0.12.0",
     "@ricons/utils": "0.1.6",
     "dayjs": "1.11.7",
-    "identicon": "3.1.1",
     "dplayer": "1.27.1"
   },
   "devDependencies": {

apps/web/src/components/Nav/index.less

@@ -0,0 +1,329 @@
+header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 19;
+  height: 60px;
+  background: #24292f;
+  color: #d7d7d7;
+
+  nav {
+    display: grid;
+    grid-template-columns: 1fr 4fr 1fr;
+    align-items: center;
+    height: 100%;
+
+    .start {
+      display: flex;
+      align-items: center;
+
+      svg {
+        cursor: pointer;
+        width: 28px;
+      }
+
+      span {
+        cursor: pointer;
+        padding-left: 10px;
+        font-size: 20px;
+        font-family: "bs";
+      }
+    }
+
+    .middle {
+      display: flex;
+      align-items: center;
+
+      > span {
+        color: #d7d7d7;
+        text-decoration: none;
+        cursor: pointer;
+        margin-right: 30px;
+
+        &:hover {
+          color: #fff;
+        }
+
+        &.arco-input-inner-wrapper {
+          border: 0;
+        }
+      }
+    }
+
+    .end {
+      text-align: right;
+
+      span {
+        cursor: pointer;
+        margin-left: 32px;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.arco-modal {
+  background: transparent;
+  .arco-modal-content {
+    padding: 0;
+  }
+}
+
+.form-structor {
+  height: 550px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.8;
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: 500px;
+    background-image: url("/bg2.avif");
+  }
+
+  .login-sms {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 65%;
+    z-index: 5;
+    transition: all 0.3s ease;
+
+    &.slide-up {
+      top: 5%;
+      transform: translate(-50%, 0%);
+      transition: all 0.3s ease;
+    }
+
+    &.slide-up .form-holder,
+    &.slide-up .submit-btn {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    &.slide-up .form-title {
+      font-size: 1em;
+      cursor: pointer;
+    }
+
+    &.slide-up .form-title span {
+      margin-right: 5px;
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.3s ease;
+    }
+
+    .form-title {
+      color: #fff;
+      font-size: 22px;
+      text-align: center;
+      font-weight: 400;
+
+      span {
+        color: rgba(0, 0, 0, 0.4);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+      }
+    }
+
+    .sms-group {
+      display: flex;
+      align-items: center;
+      button {
+        height: 48px;
+      }
+    }
+
+    .form-holder {
+      border-radius: 6px;
+      background-color: #fff;
+      overflow: hidden;
+      margin-top: 50px;
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.3s ease;
+
+      .input {
+        border: 0;
+        outline: none;
+        box-shadow: none;
+        display: block;
+        height: 48px;
+        line-height: 48px;
+        padding: 4px 15px;
+        border-bottom: 1px solid #eee;
+        width: 100%;
+        font-size: 14px;
+
+        &:last-child {
+          border-bottom: 0;
+        }
+        &::input-placeholder {
+          color: rgba(0, 0, 0, 0.4);
+        }
+      }
+    }
+
+    .submit-btn {
+      background-color: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      border: 0;
+      border-radius: 6px;
+      margin: 15px auto;
+      padding: 15px 45px;
+      width: 100%;
+      cursor: pointer;
+      letter-spacing: 10px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transition: all 0.3s ease;
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+    }
+  }
+
+  .login-pass {
+    position: absolute;
+    top: 20%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    z-index: 5;
+    transition: all 0.3s ease;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: -20px;
+      transform: translate(-50%, 0);
+      background-color: #fff;
+      width: 200%;
+      height: 250px;
+      border-radius: 50%;
+      z-index: 4;
+      transition: all 0.3s ease;
+    }
+
+    .center {
+      position: absolute;
+      top: calc(50% - 10%);
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 65%;
+      z-index: 5;
+      transition: all 0.3s ease;
+
+      .form-title {
+        color: #000;
+        font-weight: 400;
+        font-size: 1.7em;
+        text-align: center;
+
+        span {
+          color: rgba(0, 0, 0, 0.4);
+          opacity: 0;
+          visibility: hidden;
+          transition: all 0.3s ease;
+        }
+      }
+
+      .form-holder {
+        border-radius: 8px;
+        background-color: #fff;
+        border: 1px solid #eee;
+        overflow: hidden;
+        margin-top: 50px;
+        opacity: 1;
+        visibility: visible;
+        transition: all 0.3s ease;
+
+        .input {
+          border: 0;
+          outline: none;
+          box-shadow: none;
+          display: block;
+          height: 48px;
+          line-height: 48px;
+          padding: 4px 15px;
+          border-bottom: 1px solid #eee;
+          width: 100%;
+          font-size: 14px;
+
+          &:last-child {
+            border-bottom: 0;
+          }
+          &::input-placeholder {
+            color: rgba(0, 0, 0, 0.4);
+          }
+        }
+      }
+
+      .submit-btn {
+        background-color: rgb(107, 146, 164);
+        color: #fff;
+        border: 0;
+        border-radius: 6px;
+        margin: 15px auto;
+        padding: 15px 45px;
+        width: 100%;
+        letter-spacing: 10px;
+        cursor: pointer;
+        opacity: 1;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transition: all 0.3s ease;
+          background-color: rgba(107, 146, 164, 0.8);
+        }
+      }
+    }
+
+    &.slide-up {
+      top: 90%;
+      transition: all 0.3s ease;
+    }
+
+    &.slide-up .center {
+      top: 10%;
+      transform: translate(-50%, 0%);
+      transition: all 0.3s ease;
+    }
+
+    &.slide-up .form-holder,
+    &.slide-up .submit-btn {
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+
+    &.slide-up .form-title {
+      font-size: 1em;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    &.slide-up .form-title span {
+      margin-right: 5px;
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.3s ease;
+    }
+  }
+}

apps/web/src/components/Nav/index.tsx

@@ -11,16 +11,13 @@ import {
   Radio,
   Tooltip,
 } from "@arco-design/web-react";
-import FormItem from "@arco-design/web-react/es/Form/form-item";
 const InputSearch = Input.Search;
 const RadioGroup = Radio.Group;
 import { useEffect, useRef, useState } from "react";
-import Row from "@arco-design/web-react/es/Table/summary/row";
-import Col from "@arco-design/web-react/es/Grid/col";
 
 type TLoginMethod = "usePass" | "useSms";
 
-const DURATION = 120; // 验证码倒计时
+const DURATION = 3; // 验证码倒计时
 
 function Nav() {
   const navigate = useNavigate();
@@ -31,17 +28,6 @@ function Nav() {
   let [countdown, setCountdown] = useState(DURATION);
   const timer = useRef<any>();
 
-  const onOk = () => {
-    loginForm.validate().then((res) => {
-      setConfirmLoading(true);
-      setTimeout(() => {
-        Message.success("Success !");
-        setVisible(false);
-        setConfirmLoading(false);
-      }, 1500);
-    });
-  };
-
   const onClickSmsBtn = () => {
     setTimeout(() => {
       Message.success("验证码已发送");
@@ -85,54 +71,73 @@ function Nav() {
         <div className="end">
           <span onClick={() => setVisible(true)}>登录</span>
           <Modal
-            title={
-              <RadioGroup
-                type="button"
-                defaultValue="useSms"
-                onChange={(e) => setLoginMethod(e)}
-              >
-                <Radio value="useSms">验证码</Radio>
-                <Radio value="usePass">密码</Radio>
-              </RadioGroup>
-            }
-            style={{ width: "360px" }}
+            style={{ width: "350px" }}
             visible={visible}
-            onOk={onOk}
-            okText="登录"
-            cancelText="取消"
             closeIcon={false}
+            footer={null}
             confirmLoading={confirmLoading}
             onCancel={() => setVisible(false)}
           >
-            <Form form={loginForm} layout="vertical">
-              <FormItem field="用户名" rules={[{ required: true }]} label="">
-                <Input size="large" placeholder="用户名/手机号" />
-              </FormItem>
-              {loginMethod === "useSms" ? (
-                <FormItem required style={{ marginBottom: 0 }}>
-                  <div className="sms-group">
-                    <Input size="large" placeholder="验证码" type="text" />
-                    <Button
-                      size="large"
-                      type="primary"
-                      onClick={onClickSmsBtn}
-                      disabled={countdown !== DURATION}
+            <div className="form-structor">
+              <div
+                className={`login-sms ${
+                  loginMethod === "useSms" ? "" : "slide-up"
+                }`}
               >
-                      {countdown === DURATION ? "获取验证码" : `${countdown}s`}
+                <h2
+                  className="form-title"
+                  onClick={() => setLoginMethod("useSms")}
+                >
+                  验证码登录{" "}
+                </h2>
+                <div className="form-holder">
+                  <input
+                    type="text"
+                    className="input"
+                    placeholder="用户名/手机"
+                  />
+                  <div className="sms-group">
+                    <input
+                      className="input"
+                      type="password"
+                      placeholder="验证码"
+                    ></input>
+                    <Button type="text" onClick={onClickSmsBtn}>
+                      {countdown === DURATION ? "获取" : countdown + "s"}
                     </Button>
                   </div>
-                </FormItem>
-              ) : (
-                <FormItem
-                  field="密码"
-                  rules={[{ required: true }]}
-                  style={{ marginBottom: 0 }}
-                  label=""
+                </div>
+                <button className="submit-btn">登录</button>
+              </div>
+              {/* 密码 */}
+              <div
+                className={`login-pass ${
+                  loginMethod === "usePass" ? "" : "slide-up"
+                }`}
               >
-                  <Input size="large" type="password" placeholder="密码" />
-                </FormItem>
-              )}
-            </Form>
+                <div className="center">
+                  <h2
+                    className="form-title"
+                    onClick={() => setLoginMethod("usePass")}
+                  >
+                    密码登录
+                  </h2>
+                  <div className="form-holder">
+                    <input
+                      type="text"
+                      className="input"
+                      placeholder="用户名/手机"
+                    />
+                    <input
+                      type="password"
+                      className="input"
+                      placeholder="密码"
+                    />
+                  </div>
+                  <button className="submit-btn">登录</button>
+                </div>
+              </div>
+            </div>
           </Modal>
         </div>
       </nav>

apps/web/src/view/Course/components/Timeline/index.tsx

@@ -46,7 +46,7 @@ function Timeline(props: IProps) {
   const [timelineData, setTimelineData] = useState(filterYearOnce(props.data));
   const cursorActiveRef = useRef<HTMLDivElement | null>(null);
   const cursorStaticRef = useRef<HTMLDivElement | null>(null);
-  const orbitRef = useRef<HTMLDivElement>();
+  const orbitRef = useRef<HTMLDivElement | null>(null);
 
   /**
    * 点击打圈圈 cursorStatic

apps/web/src/view/CourseDetail/components/Material/index.tsx

@@ -0,0 +1,5 @@
+function Material() {
+  return <div>这里放课程资料。例如 指标 等文件下载</div>;
+}
+
+export default Material;

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

@@ -15,9 +15,23 @@ function CourseDetail() {
     {
       title: "资料下载",
       level: 2,
-      active: false,
+      active: true,
       view: <Material />,
     },
+    {
+      title: "第一讲：特殊K线的量化描述",
+      level: 2,
+      time: "00:14:05",
+      active: false,
+      view: (
+        <Player
+          video={{
+            url: "https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/8a1352da243791580308966554/adp.10.m3u8",
+            pic: "https://1500018521.vod2.myqcloud.com/a28b6648vodtranssh1500018521/8a1352da243791580308966554/coverBySnapshot_10_0.jpg",
+          }}
+        />
+      ),
+    },
     {
       title: "学习 html, css, javascript 前的准备",
       level: 2,
@@ -98,7 +112,7 @@ function CourseDetail() {
         size={0.2}
         panes={[
           <aside>
-            <h2>基础架构：一条SQL查询语句是如何执行的？</h2>
+            <h2>云顶计划：K线</h2>
             <div>
               <Space style={{ color: "var(--color-text-3)" }}>
                 <span>2023年3月2日</span>

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

@@ -18,7 +18,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  background-image: url(https://images.unsplash.com/photo-1483794344563-d27a8d18014e?ixlib=rb-0.3.5&s=62d4e79…&auto=format&fit=crop&w=1950&q=80);
+  background-image: url("/bg.avif");
   h2 {
     font-size: 24px;
   }

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

@@ -3,8 +3,6 @@ import Checkmark12Filled from "@ricons/fluent/Checkmark12Filled";
 import { Icon } from "@ricons/utils";
 import "./index.less";
 
-// 季度：三个月内，在线学习 ninghao.net 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
-
 function Subscribe() {
   return (
     <div className="subscribe">
@@ -17,7 +15,7 @@ function Subscribe() {
             <div className="price">199</div>
             <h3>季度</h3>
             <p>
-              三个月内，在线学习 ninghao.net
+              三个月内，在线学习 backset.cn
               上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
             </p>
             <Button type="outline">订阅</Button>
@@ -45,7 +43,7 @@ function Subscribe() {
             <div className="price">299</div>
             <h3>季度</h3>
             <p>
-              三个月内，在线学习 ninghao.net
+              三个月内，在线学习 backset.cn
               上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
             </p>
             <Button type="outline">订阅</Button>
@@ -74,10 +72,10 @@ function Subscribe() {
             <div className="price">399</div>
             <h3>季度</h3>
             <p>
-              三个月内，在线学习 ninghao.net
+              三个月内，在线学习 backset.cn
               上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
             </p>
-            <Button type="primary">订阅</Button>
+            <Button type="primary" size="large" long>订阅</Button>
             <ul>
               <li>
                 <Icon size={20}>