feat: backset.cn web ci

This commit is contained in:
mozzie 2023-03-05 17:17:04 +08:00
parent e8da3e4c5a
commit 6ca624f6d2
100 changed files with 435 additions and 145 deletions

View File

@ -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;
}

View File

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

18
apps/web/.drone.yml Normal file
View File

@ -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

View File

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

BIN
apps/web/public/bg.avif Normal file

Binary file not shown.

BIN
apps/web/public/bg2.avif Normal file

Binary file not shown.

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -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;
}
}
}

View File

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

View File

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

View File

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

View File

@ -15,9 +15,23 @@ function CourseDetail() {
{ {
title: "资料下载", title: "资料下载",
level: 2, level: 2,
active: false, active: true,
view: <Material />, 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 前的准备", title: "学习 html, css, javascript 前的准备",
level: 2, level: 2,
@ -98,7 +112,7 @@ function CourseDetail() {
size={0.2} size={0.2}
panes={[ panes={[
<aside> <aside>
<h2>SQL查询语句是如何执行的</h2> <h2>K线</h2>
<div> <div>
<Space style={{ color: "var(--color-text-3)" }}> <Space style={{ color: "var(--color-text-3)" }}>
<span>202332</span> <span>202332</span>

View File

@ -18,7 +18,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; 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 { h2 {
font-size: 24px; font-size: 24px;
} }

View File

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