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',
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 {
NAlert,
NAvatar,
NBackTop,
NButton,
NCard,
NCountdown,
@@ -23,7 +24,7 @@ import {
} from 'naive-ui'
import { h, onMounted, ref } from 'vue'
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 RegisterAndLogin from '@/components/RegisterAndLogin.vue'
import { RouterLink } from 'vue-router'
@@ -60,7 +61,7 @@ const menuOptions = [
{ default: () => '历史' }
),
key: 'manage-history',
disabled: !accountInfo.value?.isEmailVerified,
disabled: accountInfo.value?.isEmailVerified == false,
icon: renderIcon(AnalyticsSharp),
},
{
@@ -75,7 +76,7 @@ const menuOptions = [
{ default: () => '舰长和SC' }
),
key: 'manage-event',
disabled: !accountInfo.value?.isEmailVerified,
disabled: accountInfo.value?.isEmailVerified == false,
icon: renderIcon(VehicleShip24Filled),
},
{
@@ -91,7 +92,7 @@ const menuOptions = [
),
key: 'manage-schedule',
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: () =>
@@ -106,7 +107,7 @@ const menuOptions = [
),
key: 'manage-songList',
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: () =>
@@ -121,7 +122,22 @@ const menuOptions = [
),
key: 'manage-questionBox',
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: () =>
@@ -136,7 +152,7 @@ const menuOptions = [
),
key: 'manage-lottery',
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" />
</NAlert>
</template>
<NBackTop />
</div>
</NLayout>
</NLayout>

View File

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/component-name-in-template-casing -->
<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 { BookOutline as BookIcon, Chatbox, Home, Moon, MusicalNote, PersonOutline as PersonIcon, Sunny, WineOutline as WineIcon } from '@vicons/ionicons5'
import { GetInfo, useUser, useUserWithUId } from '@/api/user'
@@ -122,10 +122,10 @@ onMounted(async () => {
</script>
<template>
<NLayoutContent v-if="!id" style="height: 100vh;">
<NLayoutContent v-if="!id" style="height: 100vh">
<NResult status="error" title="输入的uId无效" description="再检查检查" />
</NLayoutContent>
<NLayoutContent v-else-if="notfount" style="height: 100vh;">
<NLayoutContent v-else-if="notfount" style="height: 100vh">
<NResult status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
</NLayoutContent>
<NLayout v-else style="height: 100vh">
@@ -159,7 +159,13 @@ onMounted(async () => {
<Transition>
<div v-if="biliUserInfo" style="margin-top: 8px">
<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%">
<NText strong>
{{ biliUserInfo.name }}
@@ -183,6 +189,7 @@ onMounted(async () => {
<template v-else>
<NSpin show />
</template>
<NBackTop/>
</div>
</NLayout>
</NLayout>

View File

@@ -35,6 +35,8 @@ import {
} from 'naive-ui'
import { computed, onMounted, ref } from 'vue'
import { saveAs } from 'file-saver'
import { List } from 'linqts'
import { isDarkMode } from '@/Utils'
enum EventType {
Guard,
@@ -72,7 +74,7 @@ const isLoading = ref(false)
const selectedEvents = computed(() => {
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')
async function onDateChange() {
@@ -83,7 +85,7 @@ async function onDateChange() {
})
.then((data) => {
if (data.code == 200) {
events.value = data.data
events.value = new List(data.data).OrderByDescending((d) => d.time).ToArray()
message.success('已获取数据')
//selectedType.value = type
} else {
@@ -200,25 +202,24 @@ onMounted(() => {
<NDivider> {{ selectedEvents.length }} </NDivider>
<NSpin :show="isLoading">
<NRadioGroup v-model:value="displayMode" style="display: flex; justify-content: center" size="small">
<NRadioButton value="column">
<NIcon :component="List16Filled" />
</NRadioButton>
<NRadioButton value="grid">
<NIcon :component="Grid28Filled" />
</NRadioButton>
<NRadioButton value="column">
<NIcon :component="List16Filled" />
</NRadioButton>
</NRadioGroup>
<br />
<Transition mode="out-in" name="fade" appear>
<div v-if="displayMode == 'grid'">
<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">
<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">
<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>
<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 v-else-if="selectedType == EventType.SC" size="tiny" round :color="{ color: GetSCColor(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>
</NSpace>
<NText>
{{ item.name }}

View File

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

View File

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { isDarkMode } from '@/Utils'
import { UserInfo } from '@/api/api-models'
import { NAvatar, NButton, NDivider, NImage, NSpace, NText } from 'naive-ui'
@@ -17,7 +18,14 @@ function navigate(url: string) {
<NDivider />
<template v-if="userInfo?.biliId">
<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">
<NText strong style="font-size: 32px"> {{ biliInfo?.name }} </NText>
<NText strong style="font-size: 20px" depth="3"> ({{ userInfo?.name }}) </NText>