This commit is contained in:
Megghy
2023-06-05 15:31:37 +08:00
parent 4dedacf449
commit 981d873225
30 changed files with 16609 additions and 5653 deletions

View File

@@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page for Vtsuru.live</h1>
</div>
</template>

View File

@@ -1,18 +0,0 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
export default defineComponent({
name: 'HomeView',
components: {
HelloWorld,
},
})
</script>

View File

@@ -1,13 +1,35 @@
<script setup lang="ts">
import RegisterAndLogin from '@/components/RegisterAndLogin.vue';
import { NGradientText, NSpace, NText } from 'naive-ui'
</script>
<template>
<div style="display: flex;justify-content: center;">
<div>
<NText strong tag="h1">
vtsuru
</NText>
<div class="index-background">
<NSpace justify="center">
<NGradientText
:size="50"
:gradient="{
deg: 180,
from: '#e5e5e5',
to: '#c2ebeb',
}"
style="font-family: Microsoft YaHei,Times New Roman, Times, serif;"
>
VTSURU.LIVE
</NGradientText>
</NSpace>
<div style="width:500px;">
<RegisterAndLogin />
</div>
</div>
</template>
<script lang="ts" setup>
import { NButton, NText } from 'naive-ui'
</script>
<style lang="stylus">
body
margin:0
.index-background
height: 100vh;
background: #8360c3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2ebf91, #8360c3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
</style>

View File

@@ -0,0 +1,55 @@
<script setup lang="ts">
import { NAvatar, NButton, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText } from 'naive-ui'
import { h } from 'vue'
import { BookOutline } from '@vicons/ionicons5'
import { useAccount } from '@/api/account'
import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
const accountInfo = useAccount()
function renderIcon(icon: unknown) {
return () => h(NIcon, null, { default: () => h(icon as any) })
}
const menuOptions = [
{
label: '歌单',
key: 'hear-the-wind-sing',
icon: renderIcon(BookOutline),
},
{
label: '舞,舞,舞',
key: 'dance-dance-dance',
icon: renderIcon(BookOutline),
},
]
</script>
<template>
<NLayout v-if="accountInfo">
<NLayoutHeader bordered style="height: 50px"> Header Header Header </NLayoutHeader>
<NLayout has-sider style="height: calc(100vh - 50px)">
<NLayoutSider bordered show-trigger collapse-mode="width" :collapsed-width="64" :width="240" :native-scrollbar="false" style="max-height: 320px">
<NMenu :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
</NLayoutSider>
<NLayout style="height: 100%">
<RouterView v-slot="{ Component }">
<KeepAlive>
<component :is="Component" />
</KeepAlive>
</RouterView>
</NLayout>
</NLayout>
</NLayout>
<template v-else>
<div style="display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 50px;height: 100%;box-sizing: border-box;">
<NText>
请登录或注册后使用
</NText>
<NButton tag="a" href="/">
回到主页
</NButton>
<RegisterAndLogin style="max-width: 500px;min-width: 350px;"/>
</div>
</template>
</template>

101
src/views/ViewerLayout.vue Normal file
View File

@@ -0,0 +1,101 @@
<!-- eslint-disable vue/component-name-in-template-casing -->
<script setup lang="ts">
import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult } from 'naive-ui'
import { computed, h, onMounted, ref } from 'vue'
import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from '@vicons/ionicons5'
import { GetInfo, useUser } from '@/api/user'
import { useRoute } from 'vue-router'
import { UserInfo } from '@/api/api-models'
import { FETCH_API, USER_URL } from '@/data/constants'
import { useAccount } from '@/api/account'
const route = useRoute()
const uId = computed(() => {
return Number(route.params.id)
})
const userInfo = ref<UserInfo>()
const biliUserInfo = ref()
const accountInfo = useAccount()
function renderIcon(icon: unknown) {
return () => h(NIcon, null, { default: () => h(icon as any) })
}
const menuOptions = [
{
label: '歌单',
key: 'hear-the-wind-sing',
icon: renderIcon(BookIcon),
},
{
label: '舞,舞,舞',
key: 'dance-dance-dance',
icon: renderIcon(BookIcon),
},
]
async function RequestBiliUserData() {
await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${uId.value}`)
.then(async (respone) => {
let data = await respone.json()
if (data.code == 0) {
biliUserInfo.value = data.card
} else {
throw new Error('Bili User API Error: ' + data.message)
}
})
.catch((err) => {
console.error(err)
})
}
onMounted(async () => {
await RequestBiliUserData()
userInfo.value = await useUser(uId.value)
})
</script>
<template>
<NResult v-if="!uId" status="error" title="输入的uId无效" description="再检查检查" />
<NResult v-else-if="!userInfo" status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
<NLayout v-else style="height: 100vh">
<NLayoutHeader style="height: 50px; display: flex; justify-content: left; align-items: center; padding-left: 15px">
<NSpace>
<NText> VTSURU </NText>
<span>
{{ $route.meta.title }}
</span>
</NSpace>
<NButton style="right: 0px; position: relative" type="primary"> 控制台 </NButton>
</NLayoutHeader>
<NLayout has-sider style="height: calc(100vh - 50px)">
<NLayoutSider show-trigger collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false">
<Transition>
<div v-if="biliUserInfo">
<NSpace vertical justify="center" align="center">
<NAvatar :src="biliUserInfo.face" :img-props="{ referrerpolicy: 'no-referrer' }" />
</NSpace>
</div>
</Transition>
<NMenu :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
</NLayoutSider>
<NLayout style="height: 100%">
<RouterView v-slot="{ Component }">
<KeepAlive>
<component :is="Component" />
</KeepAlive>
</RouterView>
</NLayout>
</NLayout>
</NLayout>
</template>
<style lang="stylus" scoped>
.viewer-page-content{
height: 100%;
border-radius: 25px;
box-shadow: inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;
padding: 15px;
margin-right: 10px;
box-sizing: border-box;
}
</style>

View File

@@ -0,0 +1,16 @@
<script setup lang="ts">
import { useAccount } from '@/api/account';
import { NThing } from 'naive-ui';
const accountInfo = useAccount()
</script>
<template>
<NThing>
<template #header>
</template>
</NThing>
</template>

View File

@@ -0,0 +1,13 @@
<template>
<div style="display: flex;justify-content: center;">
<div>
<NText strong tag="h1">
vtsuru
</NText>
</div>
</div>
</template>
<script lang="ts" setup>
import { NButton, NText } from 'naive-ui'
</script>

View File

@@ -0,0 +1,7 @@
<script setup lang="ts">
</script>
<template>
1
</template>

View File

@@ -0,0 +1,59 @@
<script setup lang="ts">
import { SongsInfo } from '@/api/api-models'
import { QueryGetPaginationAPI } from '@/api/query'
import SongList from '@/components/SongList.vue'
import { USER_URL } from '@/data/constants'
import { onMounted, ref } from 'vue'
import { useRouteParams } from '@vueuse/router'
const songs = ref<SongsInfo[]>()
const uId = useRouteParams('id', '-1', { transform: Number })
async function RequestData() {
songs.value = [
{
id: '1',
name: 'test',
author: '雪路',
url: 'https://music.163.com/song/media/outer/url?id=1995844771.mp3',
cover: 'https://ukamnads.icu/file/components.png',
from: '网易云',
language: '中文',
desc: 'xuelu',
tags: ['hao'],
},
{
id: '2',
name: 'test2',
author: '雪路2',
url: 'https://music.163.com/song/media/outer/url?id=1995844771.mp3',
cover: 'https://ukamnads.icu/file/components.png',
from: '网易云2',
language: '中文2',
desc: 'xuelu',
tags: ['hao'],
},
]
await QueryGetPaginationAPI<SongsInfo[]>(`${USER_URL}info`, {
uId: uId.value,
})
.then((result) => {
if (result.code == 200) {
songs.value = result.data.datas
} else {
}
})
.catch((err) => {
console.error(err)
})
}
onMounted(async () => {
await RequestData()
})
</script>
<template>
歌单
<SongList :songs="songs ?? []" />
</template>