vtsuru.live/src/views/OpenLiveLayout.vue

<script setup lang="ts">
import { isDarkMode } from '@/Utils'
import { OpenLiveInfo, ThemeType } from '@/api/api-models'
import DanmakuClient, { AuthInfo } from '@/data/DanmakuClient'
import { Lottery24Filled, PeopleQueue24Filled } from '@vicons/fluent'
import { Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
import { useElementSize, useStorage } from '@vueuse/core'
import {
  NAvatar,
  NIcon,
  NLayout,
  NLayoutHeader,
  NLayoutSider,
  NMenu,
  NSpace,
  NText,
  NButton,
  NResult,
  NPageHeader,
  NSwitch,
  NModal,
  NEllipsis,
  MenuOption,
  NSpin,
  NLayoutContent,
  NLayoutFooter,
  NBackTop,
  NScrollbar,
  useMessage,
  NDivider,
  NTag,
  NAlert,
} from 'naive-ui'
import { ref, onMounted, h, onUnmounted } from 'vue'
import { RouterLink, useRoute } from 'vue-router'

const route = useRoute()
const message = useMessage()
const themeType = useStorage('Settings.Theme', ThemeType.Auto)

const sider = ref()
const { width } = useElementSize(sider)

const authInfo = ref<AuthInfo>()
const client = ref<DanmakuClient>()

const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'open-live-lottery',
            query: route.query,
          },
        },
        { default: () => '抽奖' }
      ),
    key: 'open-live-lottery',
    icon: renderIcon(Lottery24Filled),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'open-live-song-request',
            query: route.query,
          },
        },
        { default: () => '点歌' }
      ),
    key: 'open-live-song-request',
    icon: renderIcon(MusicalNote),
  },{
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'open-live-queue',
            query: route.query,
          },
        },
        { default: () => '排队' }
      ),
    key: 'open-live-queue',
    icon: renderIcon(PeopleQueue24Filled),
  },
]

function renderIcon(icon: unknown) {
  return () => h(NIcon, null, { default: () => h(icon as any) })
}
const danmakuClientError = ref<string>()
onMounted(async () => {
  authInfo.value = route.query as unknown as AuthInfo
  if (authInfo.value?.Code) {
    client.value = new DanmakuClient(authInfo.value)
    const result = await client.value.Start()
    if (!result.success) {
      message.error('无法启动弹幕客户端: ' + result.message)
      danmakuClientError.value = result.message
    }
  } else {
    message.error('你不是从幻星平台访问此页面, 或未提供对应参数, 无法使用此功能')
  }
})
onUnmounted(() => {
  client.value?.Stop()
})
</script>

<template>
  <NLayoutContent v-if="!authInfo?.Code" style="height: 100vh">
    <NResult status="error" title="无效访问">
      <template #footer>
        请前往
        <NButton text type="primary" tag="a" href="https://play-live.bilibili.com/details/1698742711771" target="_blank"> 幻星平台 | VTsuru </NButton>
        并点击 获取 , 再点击 获取 H5 插件链接来获取可用链接
        <br />
        或者直接在那个页面用也可以, 虽然并不推荐
      </template>
    </NResult>
  </NLayoutContent>
  <NLayout v-else style="height: 100vh">
    <NLayoutHeader style="height: 45px; padding: 5px 15px 5px 15px" bordered>
      <NPageHeader :subtitle="($route.meta.title as string) ?? ''">
        <template #extra>
          <NSpace align="center">
            <NTag :type="client?.roomAuthInfo.value ? 'success' : 'warning'"> {{ client?.roomAuthInfo.value ? `已连接 | ${client.roomAuthInfo.value?.anchor_info.uname}` : '未连接' }} </NTag>
            <NSwitch :default-value="!isDarkMode()" @update:value="(value: string & number & boolean) => themeType = value ? ThemeType.Light : ThemeType.Dark">
              <template #checked>
                <NIcon :component="Sunny" />
              </template>
              <template #unchecked>
                <NIcon :component="Moon" />
              </template>
            </NSwitch>
          </NSpace>
        </template>
        <template #title>
          <NButton text tag="a" @click="$router.push({ name: 'open-live-index', query: $route.query })">
            <NText strong style="font-size: 1.4rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-justify: auto"> VTSURU | 开放平台 </NText>
          </NButton>
        </template>
      </NPageHeader>
    </NLayoutHeader>
    <NLayout has-sider style="height: calc(100vh - 45px - 30px)">
      <NLayoutSider bordered ref="sider" show-trigger default-collapsed collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false" style="height: 100%">
        <Transition>
          <div v-if="client?.roomAuthInfo" style="margin-top: 8px">
            <NSpace vertical justify="center" align="center">
              <NAvatar
                :src="client?.roomAuthInfo.value?.anchor_info.uface"
                :img-props="{ referrerpolicy: 'no-referrer' }"
                round
                bordered
                :style="{ boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 0px 8px' : '0 2px 3px rgba(0, 0, 0, 0.1)' }"
              />
              <NEllipsis v-if="width > 100" style="max-width: 100%">
                <NText strong>
                  {{ client?.roomAuthInfo.value?.anchor_info.uname }}
                </NText>
              </NEllipsis>
            </NSpace>
          </div>
        </Transition>
        <NMenu :default-value="$route.name?.toString()" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
        <NSpace justify="center">
          <NText depth="3" v-if="width > 150">
            有更多功能建议请
            <NButton text type="info" @click="$router.push({ name: 'about' })"> 反馈 </NButton>
          </NText>
        </NSpace>
      </NLayoutSider>
      <NLayoutContent style="height: 100%; padding: 10px" :native-scrollbar="false">
        <NAlert v-if="danmakuClientError" type="error" title="无法启动弹幕客户端">
          {{ danmakuClientError }}
        </NAlert>
        <RouterView v-if="client?.roomAuthInfo.value" v-slot="{ Component }">
          <KeepAlive>
            <component :is="Component" :room-info="client?.roomAuthInfo" :client="client" :code="authInfo.Code" />
          </KeepAlive>
        </RouterView>
        <template v-else>
          <NAlert type="info" title="正在请求弹幕客户端认证信息...">
            <NSpin show />
          </NAlert>
        </template>
        <NBackTop />
      </NLayoutContent>
    </NLayout>
    <NLayoutFooter style="height: 30px" bordered>
      <NSpace justify="center" align="center" style="height: 100%">
        <NButton text tag="a" href="/" target="_blank" type="info"> vtsuru.live </NButton>
      </NSpace>
    </NLayoutFooter>
  </NLayout>
</template>