src/App.vue

<script setup>
import { message, theme } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { onMounted, provide, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { checkLogin } from '/src/js/users'

const route = useRoute()
const router = useRouter()

//&#24403;&#21069;&#29992;&#25143;&#30340;&#20449;&#24687; &#32452;&#20837;&#32473;&#23376;&#32452;&#20214;&#65292;&#20415;&#20110;&#26681;&#25454;&#24403;&#21069;&#30331;&#24405;&#30340;&#29992;&#25143;&#33719;&#21462;&#19968;&#20123;&#25509;&#21475;&#20449;&#24687;
const user = reactive({
    id: null,
    avatar: '',
    name: '',
    profile: '',
    gender: 0
})


onMounted(async () => {
    await checkLogin(user)
})

//&#24213;&#23618;&#38899;&#39057;&#25773;&#25918;&#22120;
const audio = new Audio()
audio.crossOrigin = 'anonymous'

//&#31616;&#21333;&#23553;&#35013;&#19968;&#19979;&#25773;&#25918;&#22120; &#27880;&#20837;&#32473;&#23376;&#32452;&#20214;
const player = reactive({
    id: null,
    src: null,
    cover: null,
    percent: 0,
    currSec: 0,
    play(newId, newSrc, cover) {
        this.id = newId
        audio.src = newSrc
        if (this.src && this.src.startsWith('blob:')) {
            URL.revokeObjectURL(this.src)
        }
        this.src = newSrc
        this.cover = cover
        audio.play()
    },
    stop() {
        audio.pause()
        if (this.src && this.src.startsWith('blob:')) {
            URL.revokeObjectURL(this.src)
        }
        this.id = null
        this.src = null
        this.cover = null
        this.percent = 0
        this.currSec = 0
    }
})

audio.onended = e => player.stop()
audio.ontimeupdate = e => {
    player.currSec = Math.floor(audio.currentTime)
    player.percent = audio.currentTime * 100 / audio.duration
}
audio.onerror = e => {
    message.warn('&#25773;&#25918;&#22833;&#36133;&#65292;&#21487;&#33021;&#26159;' + (player.src.startsWith('blob:') ? '&#27983;&#35272;&#22120;&#19981;&#25903;&#25345;&#24403;&#21069;&#30340;&#38899;&#39057;&#26684;&#24335;&#65288;&#20294;&#21487;&#33021;&#19981;&#24433;&#21709;&#19978;&#20256;&#65289;' : '&#27983;&#35272;&#22120;&#19981;&#25903;&#25345;&#30340;&#26684;&#24335;&#25110;&#32593;&#26131;&#20113;&#36820;&#22238;&#30340;&#22320;&#22336;&#35775;&#38382;&#22833;&#36133;&#25152;&#33268;'))
    player.stop()
}

const current = ref('list')

watch(current, (name,old) => {
    if (name != 'lite') {
        router.replace({ name })
    } else {
        current.value = old
        let width = 400, height = 680
        window.open('lite.html', 'ncu_lite', `popup=1,location=0,menubar=0,resizable=0,scrollbars=0,status=0,titlebar=0,toolbar=0,width=${width},height=${height},left=${(window.screen.width - width) / 2},top=${(window.screen.height - height) / 2}`)
        window.close()
    }
})

watch(route, route => current.value = route.name)

//&#31995;&#32479;&#28145;&#33394;&#20027;&#39064;&#33258;&#21160;&#30417;&#21548;&#25506;&#27979; &#24182;&#27880;&#20837;&#32473;&#19979;&#28216;&#32452;&#20214;&#20351;&#29992;
const themeMedia = window.matchMedia("(prefers-color-scheme: dark)")
const isDark = ref(themeMedia.matches)
themeMedia.addEventListener('change', e => isDark.value = e.matches)


provide('player', player)
provide('user', user)
provide('isDark', isDark)//&#21518;&#32493;&#22914;&#26524;&#26377;&#19968;&#20123;&#33258;&#23450;&#20041;&#30340;&#20803;&#32032;&#38656;&#35201;&#26681;&#25454;&#28145;&#33394;&#20027;&#39064;&#23450;&#21046;&#25928;&#26524;&#21487;&#20197;&#20351;&#29992;&#36825;&#20010;

</script>

<template>
    <a-config-provider :locale="zhCN"
                       :theme="{ token: { fontFamily: 'jbt', fontSize: 16, controlHeight: 36 }, algorithm: isDark ? [theme.compactAlgorithm, theme.darkAlgorithm] : theme.compactAlgorithm }">
        <template v-if="user.name && user.avatar">
            <app-head />
            <a-tabs v-model:activeKey="current" animated>
                <a-tab-pane key="list" tab="&#32593;&#30424;&#38899;&#20048;&#21015;&#34920;"/>
                <a-tab-pane key="uploader" tab="&#26412;&#22320;&#38899;&#20048;&#19978;&#20256;"/>
                <a-tab-pane key="lite" tab="Lite&#29256;"/>
            </a-tabs>
            <router-view v-slot="{ Component }">
                <transition name="page">
                    <keep-alive>
                        <component :is="Component" />
                    </keep-alive>
                </transition>
            </router-view>
            <spectrum :audio="audio" />
        </template>
        <login v-else />
    </a-config-provider>
</template>

<style>
@font-face {
    font-family: jbt;
    src: url('/fonts/jbt.woff2');
}

#app {
    position: relative;
    max-width: 1440px;
    min-width: 960px;
    width: 90%;
    min-height: 100%;
    margin: auto;
}

.page-enter-active,
.page-leave-active {
    transition: all .3s ease;
    position: absolute !important;
}

.page-enter-from,
.page-leave-to {
    transform: translateY(20px);
    opacity: 0;
}

.ant-page-header {
    padding: 0;
}

.ant-page-header-heading-left,
.ant-tabs-nav-list{
    backdrop-filter: blur(3px);
}

.ant-tabs-nav {
    margin-bottom: 5px !important;
}

.ant-page-header {
    padding-top: 10px;
}

.userinfo img {
    border: 1px solid #aaa;
    border-radius: 50%;
}

.ant-table-row:nth-child(even) {
    background-color: #fafafa;
}

.icn {
    display: inline-block;
    box-sizing: border-box;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    transition: all .3s ease;
    color: #666;
}

.ant-progress:hover .icn {
    color: #1890ff
}

.ant-page-header {
    background: transparent;
}

.ant-page-header .ant-page-header-back {
    margin-right: 0;
}

.playing .ant-page-header-heading-left .ant-avatar img {
    animation: turn 5s linear infinite;
}

#multi-user .ant-avatar {
    cursor: pointer;
    opacity: .3;
    transition: all .2s ease-in-out;
}

#multi-user .ant-avatar:hover {
    opacity: 1;
}

@keyframes turn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        background-color: #141414;
    }

    .ant-table-row:nth-child(even) {
        background-color: rgb(29, 29, 29);
    }
}</style>