Update confirmation dialog styles and props in UserProfile.vue, FileList.vue, PluginCard.vue, and dashboard.vue

This commit is contained in:
jxxghp
2024-05-06 18:18:05 +08:00
parent c44b20bae3
commit aa146b1cdf
7 changed files with 100 additions and 120 deletions

View File

@@ -1,4 +1,4 @@
<script lang='ts' setup>
<script lang="ts" setup>
import { useToast } from 'vue-toast-notification'
import SubscribeEditDialog from '../dialog/SubscribeEditDialog.vue'
import { formatDateDifference } from '@/@core/utils/formatters'
@@ -25,11 +25,7 @@ const imageLoaded = ref(false)
const subscribeEditDialog = ref(false)
// 上一次更新时间
const lastUpdateText = ref(
props.media && props.media.last_update
? formatDateDifference(props.media.last_update)
: '',
)
const lastUpdateText = ref(props.media && props.media.last_update ? formatDateDifference(props.media.last_update) : '')
// 图片加载完成响应
function imageLoadHandler() {
@@ -38,23 +34,17 @@ function imageLoadHandler() {
// 根据 type 返回不同的图标
function getIcon() {
if (props.media?.type === '电影')
return 'mdi-movie'
else if (props.media?.type === '电视剧')
return 'mdi-television-classic'
else
return 'mdi-help-circle'
if (props.media?.type === '电影') return 'mdi-movie'
else if (props.media?.type === '电视剧') return 'mdi-television-classic'
else return 'mdi-help-circle'
}
// 计算百分比
function getPercentage() {
if (props.media?.total_episode === 0)
return 0
if (props.media?.total_episode === 0) return 0
return Math.round(
(((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0))
/ (props.media?.total_episode ?? 1))
* 100,
(((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0)) / (props.media?.total_episode ?? 1)) * 100,
)
}
@@ -71,16 +61,13 @@ function getTextClass() {
// 删除订阅
async function removeSubscribe() {
try {
const result: { [key: string]: any } = await api.delete(
`subscribe/${props.media?.id}`,
)
const result: { [key: string]: any } = await api.delete(`subscribe/${props.media?.id}`)
if (result.success) {
// 通知父组件刷新
emit('remove')
}
}
catch (e) {
} catch (e) {
console.log(e)
}
}
@@ -88,15 +75,11 @@ async function removeSubscribe() {
// 搜索订阅
async function searchSubscribe() {
try {
const result: { [key: string]: any } = await api.get(
`subscribe/search/${props.media?.id}`,
)
const result: { [key: string]: any } = await api.get(`subscribe/search/${props.media?.id}`)
// 提示
if (result.success)
$toast.success(`${props.media?.name} 提交搜索请求成功!`)
}
catch (e) {
if (result.success) $toast.success(`${props.media?.name} 提交搜索请求成功!`)
} catch (e) {
console.log(e)
}
}
@@ -133,11 +116,7 @@ const dropdownItems = ref([
router.push({
path: '/media',
query: {
mediaid: `${
props.media?.tmdbid
? `tmdb:${props.media?.tmdbid}`
: `douban:${props.media?.doubanid}`
}`,
mediaid: `${props.media?.tmdbid ? `tmdb:${props.media?.tmdbid}` : `douban:${props.media?.doubanid}`}`,
type: props.media?.type,
},
})
@@ -160,6 +139,7 @@ const dropdownItems = ref([
<VCard
:key="props.media?.id"
:class="`${props.media?.best_version ? 'outline-dashed outline-1' : ''}`"
class="flex flex-col"
@click="editSubscribeDialog"
>
<template #image>
@@ -173,11 +153,7 @@ const dropdownItems = ref([
</template>
<VCardItem>
<template #prepend>
<VIcon
size="1.9rem"
:color="getTextColor()"
:icon="getIcon()"
/>
<VIcon size="1.9rem" :color="getTextColor()" :icon="getIcon()" />
</template>
<VCardTitle :class="getTextClass()">
{{ props.media?.name }}
@@ -186,14 +162,8 @@ const dropdownItems = ref([
<template #append>
<div class="me-n3">
<IconBtn>
<VIcon
icon="mdi-dots-vertical"
:color="getTextColor()"
/>
<VMenu
activator="parent"
close-on-content-click
>
<VIcon icon="mdi-dots-vertical" :color="getTextColor()" />
<VMenu activator="parent" close-on-content-click>
<VList>
<VListItem
v-for="(item, i) in dropdownItems"
@@ -213,29 +183,15 @@ const dropdownItems = ref([
</div>
</template>
</VCardItem>
<VCardText>
<p
class="clamp-text mb-0"
:class="getTextClass()"
>
<p class="clamp-text mb-0" :class="getTextClass()">
{{ props.media?.description }}
</p>
</VCardText>
<VCardText class="d-flex justify-space-between align-center flex-wrap">
<div class="d-flex align-center">
<IconBtn
icon="mdi-star"
:color="getTextColor()"
class="me-1"
/>
<span
class="text-subtitle-2 me-4"
:class="getTextClass()"
>{{
props.media?.vote
}}</span>
<IconBtn icon="mdi-star" :color="getTextColor()" class="me-1" />
<span class="text-subtitle-2 me-4" :class="getTextClass()">{{ props.media?.vote }}</span>
<IconBtn
v-if="props.media?.total_episode"
v-bind="props"
@@ -243,51 +199,39 @@ const dropdownItems = ref([
:color="getTextColor()"
class="me-1"
/>
<span
v-if="props.media?.season"
class="text-subtitle-2 me-4"
:class="getTextClass()"
>{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
{{ props.media?.total_episode }}</span>
<IconBtn
v-if="props.media?.username"
icon="mdi-account"
:color="getTextColor()"
class="me-1"
/>
<span
v-if="props.media?.username"
class="text-subtitle-2 me-4"
:class="getTextClass()"
<span v-if="props.media?.season" class="text-subtitle-2 me-4" :class="getTextClass()"
>{{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
{{ props.media?.total_episode }}</span
>
<IconBtn v-if="props.media?.username" icon="mdi-account" :color="getTextColor()" class="me-1" />
<span v-if="props.media?.username" class="text-subtitle-2 me-4" :class="getTextClass()">
{{ props.media?.username }}
</span>
</div>
</VCardText>
<VCardText
v-if="lastUpdateText"
class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300"
>
<VIcon
icon="mdi-download"
class="me-1"
/>
<VCardText v-if="lastUpdateText" class="absolute right-0 bottom-0 d-flex align-center p-2 text-gray-300">
<VIcon icon="mdi-download" class="me-1" />
{{ lastUpdateText }}
</VCardText>
<VProgressLinear
v-if="getPercentage() > 0"
:model-value="getPercentage()"
bg-color="success"
color="success"
/>
<VProgressLinear v-if="getPercentage() > 0" :model-value="getPercentage()" bg-color="success" color="success" />
</VCard>
<!-- 订阅编辑弹窗 -->
<SubscribeEditDialog
v-if="subscribeEditDialog"
v-model="subscribeEditDialog"
:subid="props.media?.id"
@remove="() => { emit('remove');subscribeEditDialog = false; }"
@save="() => { emit('save');subscribeEditDialog = false; }"
@remove="
() => {
emit('remove')
subscribeEditDialog = false
}
"
@save="
() => {
emit('save')
subscribeEditDialog = false
}
"
@close="subscribeEditDialog = false"
/>
</template>

View File

@@ -18,27 +18,15 @@ function handleImport() {
</script>
<template>
<VDialog
width="40rem"
scrollable
max-height="85vh"
>
<VCard
:title="props.title"
class="rounded-t"
>
<VDialog width="40rem" scrollable max-height="85vh">
<VCard :title="props.title" class="rounded-t">
<DialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2">
<VTextarea v-model="codeString" />
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
variant="tonal"
@click="handleImport"
>
导入
</VBtn>
<VBtn variant="elevated" @click="handleImport" prepend-icon="mdi-import" class="px-5 me-3"> 导入 </VBtn>
</VCardActions>
</VCard>
</VDialog>

View File

@@ -287,9 +287,8 @@ onMounted(() => {
</VForm>
</VCardText>
<VCardActions>
<VBtn depressed @click="emit('close')"> 取消 </VBtn>
<VSpacer />
<VBtn variant="tonal" @click="transfer"> 开始整理 </VBtn>
<VBtn variant="elevated" @click="transfer" prepend-icon="mdi-arrow-right-bold" class="px-5"> 开始整理 </VBtn>
</VCardActions>
</VCard>
<!-- 手动整理进度框 -->

View File

@@ -5,10 +5,14 @@ import { doneNProgress, startNProgress } from '@/api/nprogress'
import { numberValidator, requiredValidator } from '@/@validators'
import api from '@/api'
import { useDisplay } from 'vuetify'
import { useConfirm } from 'vuetify-use-dialog'
// 显示器宽度
const display = useDisplay()
// 确认框
const createConfirm = useConfirm()
// 输入参数
const props = defineProps({
siteid: Number,
@@ -86,6 +90,13 @@ async function addSite() {
// 调用API删除站点信息
async function deleteSiteInfo() {
const isConfirmed = await createConfirm({
title: '确认',
content: `是否确认删除站点?`,
})
if (!isConfirmed) return
try {
const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
if (result.success) emit('remove')
@@ -220,11 +231,30 @@ async function updateSiteInfo() {
</VForm>
</VCardText>
<VCardActions>
<VBtn v-if="props.oper === 'add'" @click="emit('close')"> 取消 </VBtn>
<VBtn v-else color="error" @click="deleteSiteInfo"> 删除 </VBtn>
<VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
删除
</VBtn>
<VSpacer />
<VBtn v-if="props.oper === 'add'" color="primary" variant="tonal" @click="addSite"> 新增 </VBtn>
<VBtn v-else color="primary" variant="tonal" @click="updateSiteInfo"> 保存 </VBtn>
<VBtn
v-if="props.oper === 'add'"
color="primary"
variant="elevated"
@click="addSite"
prepend-icon="mdi-plus"
class="px-5"
>
新增
</VBtn>
<VBtn
v-else
color="primary"
variant="elevated"
@click="updateSiteInfo"
prepend-icon="mdi-content-save"
class="px-5"
>
保存
</VBtn>
</VCardActions>
</VCard>
</VDialog>

View File

@@ -4,10 +4,14 @@ import { numberValidator } from '@/@validators'
import api from '@/api'
import type { Site, Subscribe } from '@/api/types'
import { useDisplay } from 'vuetify'
import { useConfirm } from 'vuetify-use-dialog'
// 显示器宽度
const display = useDisplay()
// 确认框
const createConfirm = useConfirm()
// 输入参数
const props = defineProps({
subid: Number,
@@ -145,6 +149,12 @@ async function getSubscribeInfo() {
// 删除订阅
async function removeSubscribe() {
const isConfirmed = await createConfirm({
title: '确认',
content: `是否确认取消订阅?`,
})
if (!isConfirmed) return
try {
const result: { [key: string]: any } = await api.delete(`subscribe/${props.subid}`)
@@ -361,9 +371,16 @@ onMounted(() => {
</VCardText>
<VCardActions>
<VBtn v-if="!props.default" color="error" @click="removeSubscribe"> 取消订阅 </VBtn>
<VBtn v-if="!props.default" color="error" @click="removeSubscribe" variant="outlined" class="me-3">
取消订阅
</VBtn>
<VSpacer />
<VBtn variant="tonal" @click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`">
<VBtn
variant="elevated"
@click=";`${props.default ? saveDefaultSubscribeConfig() : updateSubscribeInfo()}`"
prepend-icon="mdi-content-save"
class="px-5"
>
保存
</VBtn>
</VCardActions>