A1300399510/suno
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2024-07-19 18:02:04 +08:00
parent f077d5c10e
commit aa94efc54d
28 changed files with 258 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.rar
View File

Binary file not shown.

310
src/App.vue
View File

@ -4,6 +4,7 @@ import { nextTick, onMounted, ref } from "vue"
import { getQrcode, getList, monitorState, Generate, monitorMusic, getDetails, lyricsGenerateHttp, lyricsMonitorHttp, quitLoginHttp, likeDetailsHttp } from "./utils/api"
import { ElMessage } from "element-plus"
import triangleIcon from "@/components/triangle-icon.vue"
onMounted(() => {
// getLoginQrcode()
@ -22,14 +23,18 @@ const getListData = () => {
if (res.code != 200) return
const data = res.data || []
let isNeedMonitor = false
data.forEach(element => {
// console.log("element", element.metadataid)
if (element.status != "complete") {
isNeedMonitor = true
}
})
// console.log(data[0])
if (isNeedMonitor) {
monitorMusicState()
}
// data[0].audio_url = "./b91dc2e6-120b-4979-9007-347d74a01561.mp3"
// data[0].audio_url = "./21be5d73-221f-4e7b-82f0-26c7c71b797e.mp3"
islogin.value = true
list.value = data || []
@ -189,7 +194,7 @@ const handleMusicList = index => {
listIndex.value = index
// console.log(target.metadataid)
if (target.status !== "complete" && target.metadataid) {
if (target.status !== "complete") {
monitorMusicState(target.metadataid || "没有metadataid")
}
getMusicDetails(target.id)
@ -268,10 +273,12 @@ const getMusicDetails = id => {
const audio = ref(null)
const isPlaying = ref(false)
let audioSrc = ref("")
let previewState = ref(false)
const closeInfo = () => {
previewState.value = false
// previewState.value = false
songInfo.value = {}
}
const playAudio = index => {
@ -280,10 +287,13 @@ const playAudio = index => {
}
let targetlist = list.value || []
let target = targetlist[index] || {}
audio.value.src = target.audio_url || ""
const url = target.audio_url || ""
if (audioSrc.value != url) {
audio.value.src = url
currentTime.value = 0
}
audio.value.play()
listIndex.value = index
currentTime.value = 0
}
const togglePlayPause = () => {
@ -296,6 +306,7 @@ const togglePlayPause = () => {
const updatePlayStatus = () => {
isPlaying.value = !audio.value.paused
audioSrc.value = audio.value.src || ""
}
const pauseAudio = () => {
@ -310,6 +321,7 @@ const nextAudio = () => {
let target = targetlist[index]
audio.value.src = target.audio_url
audio.value.play()
listIndex.value = index
}
@ -352,6 +364,7 @@ const seekAudio = value => {
}
const formatTime = time => {
if (isNaN(time)) return "0:00"
if (time == Infinity) {
return "-- : --"
}
@ -490,6 +503,9 @@ const handlelike = index => {
<!-- <div class="flexflex" style="height: calc(100vh - 69px); overflow: auto;"> -->
<div class="flexflex">
<div class="left-box">
<img class="left-bj left-bj1" src="./assets/img/left-bj1.png" />
<img class="left-bj left-bj2" src="./assets/img/left-bj2.png" />
<img class="left-bj left-bj3" src="./assets/img/left-bj1.png" />
<img class="hemisphere-icon" src="./assets/img/hemisphere-icon.png" />
<img class="logo" src="./assets/img/logo-icon.png" />
<img class="star" src="./assets/img/star-icon.png" />
@ -536,7 +552,7 @@ const handlelike = index => {
</div>
</div>
<el-select v-model="obj.mv" placeholder="选择模型" size="large" popper-class="model-select" :popper-append-to-body="false">
<el-select v-model="obj.mv" placeholder="选择模型" size="large" popper-class="model-select" :popper-append-to-body="false" :suffix-icon="triangleIcon">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
@ -619,7 +635,7 @@ const handlelike = index => {
</div>
</div>
<el-input class="name-input" v-model="obj.title" style="width: 300px;" maxlength="40" placeholder="请输入歌曲名称" />
<el-input class="name-input" v-model="obj.title" style="width: 300px;" maxlength="50" placeholder="请输入歌曲名称" />
</div>
<div class="section model">
<div class="title-box flexacenter">
@ -633,13 +649,13 @@ const handlelike = index => {
</div>
</div>
<el-select v-model="obj.mv" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select">
<el-select v-model="obj.mv" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select" :suffix-icon="triangleIcon">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
</template>
<div class="flex1"></div>
<!-- <div class="flex1"></div> -->
<!-- <div class="user-box" v-if="islogin"> -->
<div class="user-box" v-if="false">
<img class="user-img" src="https://cdn1.suno.ai/defaultPink.jpg" />
@ -661,14 +677,14 @@ const handlelike = index => {
</template>
<template v-else>
<div class="list">
<div class="item flexflex" :class="{ 'sel': listIndex == index }" v-for="(item, index) in list" :key="index" @click="handleMusicList(index)">
<!-- <div class="progress-bar" :style="{ 'width': item.progress + '%' }"></div> -->
<div class="item flexflex" :class="{ 'sel': listIndex == index, 'playing': audioSrc == item.audio_url }" v-for="(item, index) in list" :key="index" @click="handleMusicList(index)">
<div class="progress-bar" v-if="item.status != 'complete'">生成中...</div>
<div class="img-box" @click="playAudio(index)">
<div class="img-box" @click="isPlaying && audioSrc == item.audio_url ? pauseAudio() : playAudio(index)">
<img v-if="item.image_url" class="img" :src="item.image_url" />
<img v-else class="img" src="https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xG7avCGHpt5oNTyM1Nwws44-UqaPEyOpLewjBmkLTe6SsJ5o8oxYDW_C7QrwtE0o7mQElMUC3lm6UrpsPr3ey21qvjUeOOPrNv6_QpsEVrOxyJ36niqc_cWN6UYoEk7POhf2DtewNDQyOQ~~" />
<div class="play flexcenter">
<img class="play-btn" src="./assets/img/play-icon.png" />
<img v-if="audioSrc == item.audio_url && isPlaying" class="suspend-btn" src="./assets/img/suspend.png" />
<img v-else class="play-btn" src="./assets/img/play-icon.png" />
</div>
</div>
<div class="content flexflex flex1">
@ -677,8 +693,8 @@ const handlelike = index => {
</div>
<div class="like-box flexcenter" @click.stop="handlelike(index)">
<img v-if="item.is_upvote == 0" class="like-icon" src="./assets/img/like-icon.png" />
<img v-else class="like-icon" src="./assets/img/like-c-icon.png" />
<img v-if="item.is_upvote == 1" class="like-icon" src="./assets/img/like-c-icon.png" />
<img v-else class="like-icon" src="./assets/img/like-icon.png" />
</div>
<el-popover popper-class="dot-popover" placement="bottom" :width="220" trigger="click" :teleported="false">
@ -728,30 +744,28 @@ const handlelike = index => {
</div>
</div>
<div class="base-bottom flexacenter">
<!-- <div class="base-side"></div> -->
<div class="base-middle flexacenter">
<div class="base-bottom flexflex">
<div class="base-middle flexflex">
<div class="btn flexacenter">
<div class="btn-item btn-left flexcenter" @click="prevAudio()">
<el-icon color="#fff" :size="18"><DArrowLeft /></el-icon>
<img class="btn-icon" src="./assets/img/arrows-icon.svg" />
</div>
<div class="btn-item btn-centre flexcenter" @click="togglePlayPause()">
<img v-if="isPlaying" class="suspend" src="./assets/img/suspend.png" />
<img v-else class="suspend" src="./assets/img/play-icon.png" />
<img v-if="isPlaying" class="suspend" src="./assets/img/suspend-icon.svg" />
<img v-else class="suspend" src="./assets/img/play-icon.svg" />
</div>
<div class="btn-item btn-right flexcenter" @click="nextAudio()">
<el-icon color="#fff" :size="18"><DArrowRight /></el-icon>
<img class="btn-icon" src="./assets/img/arrows-icon.svg" />
</div>
</div>
<div class="audio-box flexacenter">
<div class="time">{{ formatTime(currentTime) }}</div>
<el-slider class="progress-box" :show-tooltip="false" v-model="currentTime" :min="0" :max="duration" @change="seekAudio" />
<div class="time">{{ formatTime(duration) }}</div>
<div class="time time-right">{{ formatTime(duration) }}</div>
</div>
<!-- <img class="cyclical-icon" src="./assets/img/loop.png" />
<img class="cyclical-icon" src="./assets/img/single.png" /> -->
</div>
<!-- <div class="base-side"></div> -->
</div>
<el-dialog class="wxlogin" v-model="wxloginVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
@ -767,26 +781,8 @@ const handlelike = index => {
</div>
</div>
<div class="hint">扫码关注【SunoAI音乐创作工具】即可登录</div>
<!-- <div class="remark flexacenter">
注册/登录表示您已同意
<a>《用户协议》</a>
及
<a>《隐私政策》</a>
</div> -->
</div>
</el-dialog>
<!-- 风格 -->
<!-- <el-dialog class="style-dialog" v-model="styleVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
<div class="style-box">
<div class="title">音乐流派</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</div>
</el-dialog> -->
<audio ref="audio" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" @ended="nextAudio" @play="updatePlayStatus" @pause="updatePlayStatus"></audio>
</div>
@ -807,16 +803,38 @@ body {
overflow: auto;
padding: 10px;
background-color: #000;
background-image: url("./assets/img/left-bj.svg");
// background-image: url("./assets/img/left-bj.svg");
background: -webkit-linear-gradient(289.179008025811deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
background: -moz-linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
background: linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
border-right: 1px solid #252323;
// border-right: 1px solid #252323;
border-right: 1px solid rgba(255, 255, 255, 0.2);
// height: calc(100vh - 69px);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
// display: flex;
// flex-direction: column;
.left-bj {
&.left-bj1 {
top: 0;
height: 341px;
}
&.left-bj2 {
top: 341px;
height: 551px;
transform: rotate(180deg);
}
&.left-bj3 {
top: 892px;
}
position: fixed;
left: 0;
width: 319px;
// height: 440px;
z-index: -1;
}
.hemisphere-icon {
position: absolute;
top: 0;
@ -825,9 +843,10 @@ body {
height: 83px;
}
.logo {
width: 138px;
width: 131px;
height: 32px;
margin: 20px auto 44px;
display: block;
}
.star {
z-index: -1;
@ -874,7 +893,7 @@ body {
display: flex;
align-items: center;
padding: 0 5px;
height: 50px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.196078);
background: rgba(255, 255, 255, 0.0980392);
border-radius: 10px;
@ -885,9 +904,9 @@ body {
flex: 1;
cursor: pointer;
text-align: center;
font-size: 20px;
height: 40px;
line-height: 40px;
font-size: 18px;
height: 36px;
line-height: 36px;
color: rgba(255, 255, 255, 0.8);
&:first-of-type {
margin-right: 5px;
@ -1053,13 +1072,14 @@ body {
color: #fff;
min-height: 107px !important;
max-height: 300px;
padding: 16px 13px;
}
.el-input__count {
background: transparent;
}
}
padding-bottom: 5px;
padding-bottom: 7px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
// border: 1px solid rgba(255, 255, 255, 0.196078);
background: rgba(255, 255, 255, 0.0980392);
@ -1088,6 +1108,7 @@ body {
min-height: 100px !important;
color: #fff;
max-height: 300px;
padding: 16px 13px;
}
}
padding-bottom: 5px;
@ -1108,7 +1129,6 @@ body {
.style-item {
padding: 0 8px;
margin-right: 6px;
font-size: 14px;
color: #000000;
cursor: pointer;
@ -1116,8 +1136,11 @@ body {
height: 26px;
line-height: 26px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 10px;
margin-bottom: 8px;
&:not(:last-of-type) {
margin-right: 6px;
}
}
&::-webkit-scrollbar {
@ -1138,7 +1161,7 @@ body {
.random-btn {
// background: rgba(255, 255, 255, 0.16);
// width: 120px;
margin-left: 5px;
margin-left: 7px;
cursor: pointer;
// padding: 0 12px;
// min-width: 32px;
@ -1169,7 +1192,7 @@ body {
}
.name {
margin-bottom: 10px;
margin-bottom: 24px;
.name-input {
/deep/ .el-input__wrapper {
@ -1275,6 +1298,7 @@ body {
align-items: center;
height: 40px;
padding: 0 15px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(51, 51, 51, 1);
.register-text {
@ -1292,10 +1316,12 @@ body {
}
.middle-box {
border-right: 1px solid #252323;
border-right: 1px solid rgba(255, 255, 255, 0.2);
// height: calc(100vh - 69px);
height: 100vh;
overflow: auto;
padding-top: 10px;
padding-bottom: 120px;
.nodata {
color: #a0aec0;
font-size: 14px;
@ -1305,10 +1331,9 @@ body {
.list {
.item {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 20px;
padding-right: 20px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 10px;
cursor: pointer;
align-items: center;
&.sel,
@ -1316,16 +1341,29 @@ body {
background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%) !important;
}
&.playing {
.img-box {
.play {
display: flex;
}
}
.content {
.name {
color: #e7c25b;
}
}
}
.img-box {
position: relative;
width: 60px;
height: 60px;
margin-right: 10px;
width: 80px;
height: 80px;
margin-right: 20px;
border-radius: 6px;
.img {
width: 60px;
height: 60px;
width: 80px;
height: 80px;
border-radius: 6px;
}
&:hover {
@ -1333,8 +1371,8 @@ body {
display: flex;
}
}
.suspend-box,
.play {
display: none;
position: absolute;
top: 0;
left: 0;
@ -1342,8 +1380,16 @@ body {
height: 100%;
background: rgba(0, 0, 0, 0.6);
.play-btn {
width: 22px;
width: 36px;
}
.suspend-btn {
width: 46px;
}
}
.play {
display: none;
}
}
@ -1388,6 +1434,9 @@ body {
font-weight: 700;
color: #fff;
word-break: break-word;
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 6px;
}
.desc {
overflow: hidden;
@ -1398,7 +1447,8 @@ body {
word-break: break-all;
word-wrap: break-word;
white-space: normal;
color: rgb(203 213 224);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
}
@ -1459,12 +1509,15 @@ body {
.base-bottom {
background-color: rgb(22 22 22);
border-top: 1px solid #222222;
border: 1px solid rgba(255, 255, 255, 0.19);
// border-top: 1px solid #222222;
padding-left: 24px;
padding-right: 24px;
// padding-top: 24px;
height: 68px;
display: flex;
justify-content: center;
// align-items: center;
position: fixed;
bottom: 10px;
width: 540px;
@ -1473,58 +1526,87 @@ body {
z-index: 10;
left: 50%;
transform: translateX(-50%);
.base-side {
width: 450px;
}
.base-middle {
flex-direction: column;
align-items: center;
padding-top: 18px;
margin-bottom: 6px;
.btn {
margin-right: 24px;
// margin-right: 24px;
.btn-item {
width: 32px;
height: 32px;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.08);
width: 36px;
height: 36px;
background: inherit;
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
.el-icon {
font-size: 30px;
// &:hover {
// .el-icon {
// font-size: 30px;
// }
// }
.btn-icon {
width: 15px;
height: 16px;
}
&.btn-left {
.btn-icon {
transform: rotate(180deg);
}
}
&.btn-centre {
margin-left: 6px;
margin-right: 6px;
background-color: #fbd38d;
margin-left: 20px;
margin-right: 20px;
// background-color: #fbd38d;
background: transparent;
img {
width: 20px;
width: 36px;
height: 36px;
// width: 20px;
}
}
}
}
.audio-box {
position: relative;
margin-left: 16px;
margin-right: 16px;
.time {
color: rgb(160 174 192);
font-size: 12px;
top: -17px;
left: 0;
position: absolute;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
&.time-right {
right: 0;
left: auto;
}
}
.progress-box {
width: 390px;
margin-left: 16px;
margin-right: 16px;
width: 500px;
/deep/ .el-slider__runway {
height: 4px;
height: 6px;
background-color: rgba(255, 255, 255, 0.803921568627451);
.el-slider__bar {
background: #fbd38d;
height: 4px;
background: rgba(128, 128, 255, 1);
height: 6px;
}
}
/deep/ .el-slider__button {
border: none;
height: 14px;
width: 14px;
height: 16px;
width: 16px;
background: rgba(128, 128, 255, 1);
}
}
}
@ -1610,16 +1692,6 @@ body {
}
}
}
&.style-dialog {
.el-dialog__body {
.style-box {
.title {
font-size: 18px;
color: #fff;
}
}
}
}
}
</style>
@ -1662,4 +1734,26 @@ body {
color: #fff;
}
}
.el-switch {
.el-switch__core {
height: 24px;
min-width: 48px;
border-radius: 48px;
.el-switch__action {
width: 18px;
height: 18px;
}
}
&.is-checked .el-switch__core {
background: -webkit-linear-gradient(350.53767779deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
background: -moz-linear-gradient(99.46232221deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
background: linear-gradient(99.46232221deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
border: none;
.el-switch__action {
left: calc(100% - 21px);
}
}
}
</style>

6
src/assets/img/arrows-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="16px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -957 -842 )">
<path d="M 6.11801242236025 14.3006012024048 C 6.01449275362319 14.4074816299265 5.96273291925466 14.5303941215765 5.96273291925466 14.6693386773547 C 5.96273291925466 14.8082832331329 6.01449275362319 14.9311957247829 6.11801242236025 15.0380761523046 L 6.8944099378882 15.8396793587174 C 6.99792960662526 15.9465597862391 7.11697722567288 16 7.25155279503106 16 C 7.38612836438923 16 7.50517598343685 15.9465597862391 7.60869565217391 15.8396793587174 L 14.8447204968944 8.3687374749499 C 14.9482401656315 8.26185704742819 15 8.13894455577822 15 8 C 15 7.86105544422178 14.9482401656315 7.73814295257181 14.8447204968944 7.6312625250501 L 7.60869565217391 0.160320641282565 C 7.50517598343685 0.0534402137608545 7.38612836438923 0 7.25155279503106 0 C 7.11697722567288 0 6.99792960662526 0.0534402137608545 6.8944099378882 0.160320641282565 L 6.11801242236025 0.96192384769539 C 6.01449275362319 1.0688042752171 5.96273291925466 1.19171676686707 5.96273291925466 1.33066132264529 C 5.96273291925466 1.46960587842351 6.01449275362319 1.59251837007348 6.11801242236025 1.69939879759519 L 12.2204968944099 8 L 6.11801242236025 14.3006012024048 Z M 0.15527950310559 14.3006012024048 C 0.0517598343685288 14.4074816299265 0 14.5303941215765 0 14.6693386773547 C 0 14.8082832331329 0.0517598343685288 14.9311957247829 0.15527950310559 15.0380761523046 L 0.93167701863354 15.8396793587174 C 1.0351966873706 15.9465597862391 1.15424430641822 16 1.2888198757764 16 C 1.42339544513457 16 1.54244306418219 15.9465597862391 1.64596273291925 15.8396793587174 L 8.88198757763975 8.3687374749499 C 8.98550724637681 8.26185704742819 9.03726708074534 8.13894455577822 9.03726708074534 8 C 9.03726708074534 7.86105544422178 8.98550724637681 7.73814295257181 8.88198757763975 7.6312625250501 L 1.64596273291925 0.160320641282565 C 1.54244306418219 0.0534402137608545 1.42339544513457 0 1.2888198757764 0 C 1.15424430641822 0 1.0351966873706 0.0534402137608545 0.93167701863354 0.160320641282565 L 0.15527950310559 0.96192384769539 C 0.0517598343685288 1.0688042752171 0 1.19171676686707 0 1.33066132264529 C 0 1.46960587842351 0.0517598343685288 1.59251837007348 0.15527950310559 1.69939879759519 L 6.25776397515528 8 L 0.15527950310559 14.3006012024048 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 957 842 )" />
</g>
</svg>

BIN
src/assets/img/left-bj1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/left-bj2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/img/left-box-bj.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 KiB

BIN
src/assets/img/logo-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/img/loop-c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/assets/img/loop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

13
src/assets/img/play-icon.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="36px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="36" y2="36" id="LinearGradient81">
<stop id="Stop82" stop-color="#fee97d" offset="0" />
<stop id="Stop83" stop-color="#e7c25b" offset="0.49" />
<stop id="Stop84" stop-color="#fe8c7d" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -889 -832 )">
<path d="M 8.96484375 2.4140625 C 11.72265625 0.804687499999997 14.734375 0 18 0 C 21.265625 0 24.27734375 0.804687499999997 27.03515625 2.4140625 C 29.79296875 4.0234375 31.9765625 6.20703125 33.5859375 8.96484375 C 35.1953125 11.72265625 36 14.734375 36 18 C 36 21.265625 35.1953125 24.27734375 33.5859375 27.03515625 C 31.9765625 29.79296875 29.79296875 31.9765625 27.03515625 33.5859375 C 24.27734375 35.1953125 21.265625 36 18 36 C 14.734375 36 11.72265625 35.1953125 8.96484375 33.5859375 C 6.20703125 31.9765625 4.0234375 29.79296875 2.4140625 27.03515625 C 0.8046875 24.27734375 0 21.265625 0 18 C 0 14.734375 0.8046875 11.72265625 2.4140625 8.96484375 C 4.0234375 6.20703125 6.20703125 4.0234375 8.96484375 2.4140625 Z M 14.25 26.7890625 L 27 19.2890625 C 27.5 19.0078125 27.75 18.578125 27.75 18 C 27.75 17.421875 27.5 16.9921875 27 16.7109375 L 14.25 9.2109375 C 13.765625 8.9140625 13.265625 8.90625 12.75 9.1875 C 12.25 9.484375 12 9.921875 12 10.5 L 12 25.5 C 12 26.078125 12.25 26.515625 12.75 26.8125 C 13 26.9375 13.25 27 13.5 27 C 13.765625 27 14.015625 26.9296875 14.25 26.7890625 Z " fill-rule="nonzero" fill="url(#LinearGradient81)" stroke="none" transform="matrix(1 0 0 1 889 832 )" />
</g>
</svg>

BIN
src/assets/img/single-c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/assets/img/single.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

13
src/assets/img/suspend-icon.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="36px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="36" y2="36" id="LinearGradient89">
<stop id="Stop90" stop-color="#fee97d" offset="0" />
<stop id="Stop91" stop-color="#e7c25b" offset="0.49" />
<stop id="Stop92" stop-color="#fe8c7d" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -889 -832 )">
<path d="M 16.2890625 25.2890625 C 16.4296875 25.1484375 16.5 24.96875 17 24.75 L 17 11.25 C 16.5 11.03125 16.4296875 10.8515625 16.2890625 10.7109375 C 16.1484375 10.5703125 15.96875 10.5 15.75 10.5 L 9.75 10.5 C 9.53125 10.5 9.3515625 10.5703125 9.2109375 10.7109375 C 9.0703125 10.8515625 9 11.03125 9 11.25 L 9 24.75 C 9 24.96875 9.0703125 25.1484375 9.2109375 25.2890625 C 9.3515625 25.4296875 9.53125 25.5 9.75 25.5 L 15.75 25.5 C 15.96875 25.5 16.1484375 25.4296875 16.2890625 25.2890625 Z M 26.7890625 25.2890625 C 26.9296875 25.1484375 27 24.96875 27 24.75 L 27 11.25 C 27 11.03125 26.9296875 10.8515625 26.7890625 10.7109375 C 26.6484375 10.5703125 26.46875 10.5 26.25 10.5 L 20.25 10.5 C 20.03125 10.5 19.8515625 10.5703125 19.7109375 10.7109375 C 19.5703125 10.8515625 19.5 11.03125 19 11.25 L 19 24.75 C 19.5 24.96875 19.5703125 25.1484375 19.7109375 25.2890625 C 19.8515625 25.4296875 20.03125 25.5 20.25 25.5 L 26.25 25.5 C 26.46875 25.5 26.6484375 25.4296875 26.7890625 25.2890625 Z M 33.5859375 8.96484375 C 35.1953125 11.72265625 36 14.734375 36 18 C 36 21.265625 35.1953125 24.27734375 33.5859375 27.03515625 C 31.9765625 29.79296875 29.79296875 31.9765625 27.03515625 33.5859375 C 24.27734375 35.1953125 21.265625 36 18 36 C 14.734375 36 11.72265625 35.1953125 8.96484375 33.5859375 C 6.20703125 31.9765625 4.0234375 29.79296875 2.4140625 27.03515625 C 0.8046875 24.27734375 0 21.265625 0 18 C 0 14.734375 0.8046875 11.72265625 2.4140625 8.96484375 C 4.0234375 6.20703125 6.20703125 4.0234375 8.96484375 2.4140625 C 11.72265625 0.804687499999997 14.734375 0 18 0 C 21.265625 0 24.27734375 0.804687499999997 27.03515625 2.4140625 C 29.79296875 4.0234375 31.9765625 6.20703125 33.5859375 8.96484375 Z " fill-rule="nonzero" fill="url(#LinearGradient89)" stroke="none" transform="matrix(1 0 0 1 889 832 )" />
</g>
</svg>

6
src/assets/img/triangle-icon.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -285 -760 )">
<path d="M 11.77734375 0.230902777777778 C 11.92578125 0.384837962962962 12 0.567129629629628 12 0.777777777777778 C 12 0.988425925925925 11.92578125 1.17071759259259 11.77734375 1.32465277777778 L 6.52734375 6.76909722222222 C 6.37890625 6.92303240740741 6.203125 7 6 7 C 5.796875 7 5.62109375 6.92303240740741 5.47265625 6.76909722222222 L 0.22265625 1.32465277777778 C 0.07421875 1.17071759259259 0 0.988425925925925 0 0.777777777777778 C 0 0.567129629629628 0.07421875 0.384837962962962 0.22265625 0.230902777777778 C 0.37109375 0.0769675925925917 0.546875 0 0.75 0 L 11.25 0 C 11.453125 0 11.62890625 0.0769675925925917 11.77734375 0.230902777777778 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 285 760 )" />
</g>
</svg>

7
src/assets/main.css
View File

@ -5,6 +5,13 @@
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
}
/* 修改placeholder的颜色，兼容性更好的写法 */
textarea::placeholder,
.el-input .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.498039215686275) !important;
/* 设置placeholder的颜色为灰色 */
}
*::-webkit-scrollbar-track-piece {
background-color: transparent;
}

44
src/components/HelloWorld.vue
View File

@ -1,44 +0,0 @@
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>

88
src/components/TheWelcome.vue
View File

@ -1,88 +0,0 @@
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
>Cypress Component Testing</a
>.
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
Discord server, or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also subscribe to
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
the official
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>

86
src/components/WelcomeItem.vue
View File

@ -1,86 +0,0 @@
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>

7
src/components/icons/IconCommunity.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

7
src/components/icons/IconDocumentation.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

7
src/components/icons/IconEcosystem.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

7
src/components/icons/IconSupport.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

19
src/components/icons/IconTooling.vue
View File

@ -1,19 +0,0 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>

9
src/components/triangle-icon.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<img src="@/assets/img/triangle-icon.svg" />
</template>
<style lang="less" scoped>
img {
width: 12px;
height: 7px;
}
</style>

1
src/main.js
View File

@ -3,7 +3,6 @@ import "./assets/main.css"
import { createApp } from "vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import App from "./App.vue"

8
src/router/index.js
View File

@ -9,14 +9,6 @@ const router = createRouter({
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
]
})

15
src/views/AboutView.vue
View File

@ -1,15 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>

8
src/views/HomeView.vue
View File

@ -1,9 +1,3 @@
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>