add videocollect preview

This commit is contained in:
2023-10-25 13:06:59 +08:00
parent 248825be5b
commit 7f450bfd3b
6 changed files with 61 additions and 20 deletions

View File

@@ -103,6 +103,11 @@ const routes: Array<RouteRecordRaw> = [
name: 'manage-event', name: 'manage-event',
component: () => import('@/views/manage/EventView.vue'), component: () => import('@/views/manage/EventView.vue'),
}, },
{
path: 'video-collect',
name: 'manage-videoCollect',
component: () => import('@/views/manage/VideoCollectManageView.vue'),
},
], ],
}, },
] ]

View File

@@ -2,6 +2,7 @@
import { import {
NAlert, NAlert,
NAvatar, NAvatar,
NBackTop,
NButton, NButton,
NCard, NCard,
NCountdown, NCountdown,
@@ -23,7 +24,7 @@ import {
} from 'naive-ui' } from 'naive-ui'
import { h, onMounted, ref } from 'vue' import { h, onMounted, ref } from 'vue'
import { BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, AnalyticsSharp } from '@vicons/ionicons5' import { BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, AnalyticsSharp } from '@vicons/ionicons5'
import { CalendarClock24Filled, Lottery24Filled, VehicleShip24Filled } from '@vicons/fluent' import { CalendarClock24Filled, Lottery24Filled, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
import { isLoadingAccount, useAccount } from '@/api/account' import { isLoadingAccount, useAccount } from '@/api/account'
import RegisterAndLogin from '@/components/RegisterAndLogin.vue' import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
@@ -60,7 +61,7 @@ const menuOptions = [
{ default: () => '历史' } { default: () => '历史' }
), ),
key: 'manage-history', key: 'manage-history',
disabled: !accountInfo.value?.isEmailVerified, disabled: accountInfo.value?.isEmailVerified == false,
icon: renderIcon(AnalyticsSharp), icon: renderIcon(AnalyticsSharp),
}, },
{ {
@@ -75,7 +76,7 @@ const menuOptions = [
{ default: () => '舰长和SC' } { default: () => '舰长和SC' }
), ),
key: 'manage-event', key: 'manage-event',
disabled: !accountInfo.value?.isEmailVerified, disabled: accountInfo.value?.isEmailVerified == false,
icon: renderIcon(VehicleShip24Filled), icon: renderIcon(VehicleShip24Filled),
}, },
{ {
@@ -91,7 +92,7 @@ const menuOptions = [
), ),
key: 'manage-schedule', key: 'manage-schedule',
icon: renderIcon(CalendarClock24Filled), icon: renderIcon(CalendarClock24Filled),
disabled: !accountInfo.value?.isEmailVerified || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.Schedule) ?? -1) == -1, disabled: accountInfo.value?.isEmailVerified == false || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.Schedule) ?? -1) == -1,
}, },
{ {
label: () => label: () =>
@@ -106,7 +107,7 @@ const menuOptions = [
), ),
key: 'manage-songList', key: 'manage-songList',
icon: renderIcon(MusicalNote), icon: renderIcon(MusicalNote),
disabled: !accountInfo.value?.isEmailVerified || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) == -1, disabled: accountInfo.value?.isEmailVerified == false || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) == -1,
}, },
{ {
label: () => label: () =>
@@ -121,7 +122,22 @@ const menuOptions = [
), ),
key: 'manage-questionBox', key: 'manage-questionBox',
icon: renderIcon(Chatbox), icon: renderIcon(Chatbox),
disabled: !accountInfo.value?.isEmailVerified || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.QuestionBox) ?? -1) == -1, disabled: accountInfo.value?.isEmailVerified == false,
},
{
label: () =>
h(
RouterLink,
{
to: {
name: 'manage-videoCollect',
},
},
{ default: () => '视频征集' }
),
key: 'manage-videoCollect',
icon: renderIcon(VideoAdd20Filled),
//disabled: accountInfo.value?.isEmailVerified == false,
}, },
{ {
label: () => label: () =>
@@ -136,7 +152,7 @@ const menuOptions = [
), ),
key: 'manage-lottery', key: 'manage-lottery',
icon: renderIcon(Lottery24Filled), icon: renderIcon(Lottery24Filled),
disabled: !accountInfo.value?.isEmailVerified, //disabled: accountInfo.value?.isEmailVerified == false,
}, },
] ]
@@ -231,6 +247,7 @@ onMounted(() => {
<NCountdown v-if="!canResendEmail" :duration="(accountInfo?.nextSendEmailTime ?? 0) - Date.now()" @finish="canResendEmail = true" /> <NCountdown v-if="!canResendEmail" :duration="(accountInfo?.nextSendEmailTime ?? 0) - Date.now()" @finish="canResendEmail = true" />
</NAlert> </NAlert>
</template> </template>
<NBackTop />
</div> </div>
</NLayout> </NLayout>
</NLayout> </NLayout>

View File

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/component-name-in-template-casing --> <!-- eslint-disable vue/component-name-in-template-casing -->
<script setup lang="ts"> <script setup lang="ts">
import { NAvatar, NIcon, NLayout, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NResult, NPageHeader, NSwitch, NModal, NEllipsis, MenuOption, NSpin, NLayoutContent } from 'naive-ui' import { NAvatar, NIcon, NLayout, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NResult, NPageHeader, NSwitch, NModal, NEllipsis, MenuOption, NSpin, NLayoutContent, NBackTop } from 'naive-ui'
import { computed, h, onMounted, ref } from 'vue' import { computed, h, onMounted, ref } from 'vue'
import { BookOutline as BookIcon, Chatbox, Home, Moon, MusicalNote, PersonOutline as PersonIcon, Sunny, WineOutline as WineIcon } from '@vicons/ionicons5' import { BookOutline as BookIcon, Chatbox, Home, Moon, MusicalNote, PersonOutline as PersonIcon, Sunny, WineOutline as WineIcon } from '@vicons/ionicons5'
import { GetInfo, useUser, useUserWithUId } from '@/api/user' import { GetInfo, useUser, useUserWithUId } from '@/api/user'
@@ -122,10 +122,10 @@ onMounted(async () => {
</script> </script>
<template> <template>
<NLayoutContent v-if="!id" style="height: 100vh;"> <NLayoutContent v-if="!id" style="height: 100vh">
<NResult status="error" title="输入的uId无效" description="再检查检查" /> <NResult status="error" title="输入的uId无效" description="再检查检查" />
</NLayoutContent> </NLayoutContent>
<NLayoutContent v-else-if="notfount" style="height: 100vh;"> <NLayoutContent v-else-if="notfount" style="height: 100vh">
<NResult status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" /> <NResult status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
</NLayoutContent> </NLayoutContent>
<NLayout v-else style="height: 100vh"> <NLayout v-else style="height: 100vh">
@@ -159,7 +159,13 @@ onMounted(async () => {
<Transition> <Transition>
<div v-if="biliUserInfo" style="margin-top: 8px"> <div v-if="biliUserInfo" style="margin-top: 8px">
<NSpace vertical justify="center" align="center"> <NSpace vertical justify="center" align="center">
<NAvatar :src="biliUserInfo.face" :img-props="{ referrerpolicy: 'no-referrer' }" round bordered style="box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1)" /> <NAvatar
:src="biliUserInfo.face"
: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%"> <NEllipsis v-if="width > 100" style="max-width: 100%">
<NText strong> <NText strong>
{{ biliUserInfo.name }} {{ biliUserInfo.name }}
@@ -183,6 +189,7 @@ onMounted(async () => {
<template v-else> <template v-else>
<NSpin show /> <NSpin show />
</template> </template>
<NBackTop/>
</div> </div>
</NLayout> </NLayout>
</NLayout> </NLayout>

View File

@@ -35,6 +35,8 @@ import {
} from 'naive-ui' } from 'naive-ui'
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { List } from 'linqts'
import { isDarkMode } from '@/Utils'
enum EventType { enum EventType {
Guard, Guard,
@@ -72,7 +74,7 @@ const isLoading = ref(false)
const selectedEvents = computed(() => { const selectedEvents = computed(() => {
return events.value.filter((e) => e.type == selectedType.value) return events.value.filter((e) => e.type == selectedType.value)
}) })
const displayMode = ref<'grid' | 'column'>('column') const displayMode = ref<'grid' | 'column'>('grid')
const exportType = ref<'json' | 'xml' | 'csv'>('csv') const exportType = ref<'json' | 'xml' | 'csv'>('csv')
async function onDateChange() { async function onDateChange() {
@@ -83,7 +85,7 @@ async function onDateChange() {
}) })
.then((data) => { .then((data) => {
if (data.code == 200) { if (data.code == 200) {
events.value = data.data events.value = new List(data.data).OrderByDescending((d) => d.time).ToArray()
message.success('已获取数据') message.success('已获取数据')
//selectedType.value = type //selectedType.value = type
} else { } else {
@@ -200,25 +202,24 @@ onMounted(() => {
<NDivider> {{ selectedEvents.length }} </NDivider> <NDivider> {{ selectedEvents.length }} </NDivider>
<NSpin :show="isLoading"> <NSpin :show="isLoading">
<NRadioGroup v-model:value="displayMode" style="display: flex; justify-content: center" size="small"> <NRadioGroup v-model:value="displayMode" style="display: flex; justify-content: center" size="small">
<NRadioButton value="column">
<NIcon :component="List16Filled" />
</NRadioButton>
<NRadioButton value="grid"> <NRadioButton value="grid">
<NIcon :component="Grid28Filled" /> <NIcon :component="Grid28Filled" />
</NRadioButton> </NRadioButton>
<NRadioButton value="column">
<NIcon :component="List16Filled" />
</NRadioButton>
</NRadioGroup> </NRadioGroup>
<br /> <br />
<Transition mode="out-in" name="fade" appear> <Transition mode="out-in" name="fade" appear>
<div v-if="displayMode == 'grid'"> <div v-if="displayMode == 'grid'">
<NGrid cols="1 500:2 800:3 1000:4" :x-gap="12" :y-gap="8"> <NGrid cols="1 500:2 800:3 1000:4" :x-gap="12" :y-gap="8">
<NGridItem v-for="item in selectedEvents" v-bind:key="item.time"> <NGridItem v-for="item in selectedEvents" v-bind:key="item.time">
<NCard size="small" :style="`height: ${selectedType == EventType.Guard ? '175px' : '220'}px`"> <NCard size="small" :style="`height: ${selectedType == EventType.Guard ? '175px' : '220'}px`" embedded hoverable>
<NSpace align="center" vertical :size="5"> <NSpace align="center" vertical :size="5">
<NAvatar round lazy borderd :size="64" :src="AVATAR_URL + item.uId" :img-props="{ referrerpolicy: 'no-referrer' }" style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)" /> <NAvatar round lazy borderd :size="64" :src="AVATAR_URL + item.uId" :img-props="{ referrerpolicy: 'no-referrer' }" style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)" />
<NSpace> <NSpace>
<NTag size="tiny" v-if="selectedType == EventType.Guard" :bordered="false"> {{ item.msg }} </NTag> <NTag size="tiny" v-if="selectedType == EventType.Guard" :bordered="false"> {{ item.msg }} </NTag>
<NTag v-if="selectedType == EventType.Guard" size="tiny" round :color="{ color: GetGuardColor(item.price), textColor: 'white', borderColor: 'white' }"> {{ item.price }} </NTag> <NTag size="tiny" round :color="{ color: selectedType == EventType.Guard ? GetGuardColor(item.price) : GetSCColor(item.price), textColor: 'white', borderColor: isDarkMode() ? 'white' : '#00000000' }"> {{ item.price }} </NTag>
<NTag v-else-if="selectedType == EventType.SC" size="tiny" round :color="{ color: GetSCColor(item.price), textColor: 'white', borderColor: 'white' }"> {{ item.price }} </NTag>
</NSpace> </NSpace>
<NText> <NText>
{{ item.name }} {{ item.name }}

View File

@@ -0,0 +1,3 @@
<template>
开发中...
</template>

View File

@@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { isDarkMode } from '@/Utils'
import { UserInfo } from '@/api/api-models' import { UserInfo } from '@/api/api-models'
import { NAvatar, NButton, NDivider, NImage, NSpace, NText } from 'naive-ui' import { NAvatar, NButton, NDivider, NImage, NSpace, NText } from 'naive-ui'
@@ -17,7 +18,14 @@ function navigate(url: string) {
<NDivider /> <NDivider />
<template v-if="userInfo?.biliId"> <template v-if="userInfo?.biliId">
<NSpace justify="center" align="center" vertical> <NSpace justify="center" align="center" vertical>
<NAvatar v-if="biliInfo" :src="biliInfo?.face" :size="width > 750 ? 175 : 100" round bordered style="box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2)" /> <NAvatar
v-if="biliInfo"
:src="biliInfo?.face"
:size="width > 750 ? 175 : 100"
round
bordered
:style="{ boxShadow: isDarkMode() ? 'rgb(195 192 192 / 35%) 0px 5px 20px' : '0 5px 15px rgba(0, 0, 0, 0.2)' }"
/>
<NSpace align="baseline" justify="center"> <NSpace align="baseline" justify="center">
<NText strong style="font-size: 32px"> {{ biliInfo?.name }} </NText> <NText strong style="font-size: 32px"> {{ biliInfo?.name }} </NText>
<NText strong style="font-size: 20px" depth="3"> ({{ userInfo?.name }}) </NText> <NText strong style="font-size: 20px" depth="3"> ({{ userInfo?.name }}) </NText>