mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
nothing
This commit is contained in:
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page for Vtsuru.live</h1>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
55
src/views/ManageLayout.vue
Normal file
55
src/views/ManageLayout.vue
Normal 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
101
src/views/ViewerLayout.vue
Normal 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>
|
||||
16
src/views/manage/DashboardView.vue
Normal file
16
src/views/manage/DashboardView.vue
Normal 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>
|
||||
13
src/views/view/IndexView.vue
Normal file
13
src/views/view/IndexView.vue
Normal 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>
|
||||
7
src/views/view/QuestionBoxView.vue
Normal file
7
src/views/view/QuestionBoxView.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
1
|
||||
</template>
|
||||
59
src/views/view/SongListView.vue
Normal file
59
src/views/view/SongListView.vue
Normal 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>
|
||||
Reference in New Issue
Block a user