GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-07 05:32:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新 Tailwind CSS 配置，添加重要性设置；在 Vite 配置中添加 PostCSS 插件；优化多个组件的 VCard 结构，移除多余的 class 属性以提升代码整洁性。

Browse Source
This commit is contained in:
jxxghp
2025-05-08 15:31:57 +08:00
parent e3bff71a91
commit 53a8835b6d
24 changed files with 59 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards/CustomRuleCard.vue
View File

@@ -107,7 +107,7 @@ function onClose() {
</VCardText>
</VCard>
<VDialog v-if="ruleInfoDialog" v-model="ruleInfoDialog" scrollable max-width="40rem">
<VCard :title="t('customRule.title', { id: props.rule.id })" class="rounded-t">
<VCard :title="t('customRule.title', { id: props.rule.id })">
<VDialogCloseBtn v-model="ruleInfoDialog" />
<VDivider />
<VCardText>

2
src/components/cards/FilterRuleGroupCard.vue
View File

@@ -220,7 +220,7 @@ function onClose() {
</VCardText>
</VCard>
<VDialog v-if="groupInfoDialog" v-model="groupInfoDialog" scrollable max-width="80rem">
<VCard :title="`${props.group.name} - ${t('filterRule.title')}`" class="rounded-t">
<VCard :title="`${props.group.name} - ${t('filterRule.title')}`">
<VDialogCloseBtn v-model="groupInfoDialog" />
<VDivider />
<VCardItem class="pt-1">

2
src/components/cards/MediaServerCard.vue
View File

@@ -200,7 +200,7 @@ onMounted(() => {
</VCardText>
</VCard>
<VDialog v-if="mediaServerInfoDialog" v-model="mediaServerInfoDialog" scrollable max-width="40rem">
<VCard :title="`${props.mediaserver.name} - ${t('common.config')}`" class="rounded-t">
<VCard :title="`${props.mediaserver.name} - ${t('common.config')}`">
<VDialogCloseBtn v-model="mediaServerInfoDialog" />
<VDivider />
<VCardText>

2
src/components/cards/NotificationChannelCard.vue
View File

@@ -135,7 +135,7 @@ function onClose() {
</VCardText>
</VCard>
<VDialog v-if="notificationInfoDialog" v-model="notificationInfoDialog" scrollable max-width="40rem">
<VCard :title="`${props.notification.name} - ${t('notification.config')}`" class="rounded-t">
<VCard :title="`${props.notification.name} - ${t('notification.config')}`">
<VDialogCloseBtn v-model="notificationInfoDialog" />
<VDivider />
<VCardText>

60
src/components/cards/SiteCard.vue
View File

@@ -293,9 +293,7 @@ onMounted(() => {
</div>
<!-- 右侧操作按钮区 -->
<VSheet
class="site-card-actions absolute inset-y-0 right-0 z-20 flex flex-col py-2 px-1 transform translate-x-full transition-transform duration-200"
>
<VSheet class="site-card-actions absolute inset-y-0 right-0 z-20 flex flex-col py-2 px-1 transform duration-300">
<!-- 测试按钮 -->
<VBtn
icon
@@ -386,12 +384,6 @@ onMounted(() => {
</template>
<style scoped>
.site-card:hover {
.site-card-actions {
transform: translateX(0);
}
}
.site-status-indicator {
position: absolute;
z-index: 1;
@@ -430,15 +422,15 @@ onMounted(() => {
/* 上传下载条样式 */
.upload-bar {
animation: pulse-width 2s infinite;
background: linear-gradient(90deg, #4d79ff, #07f);
box-shadow: 0 0 4px rgba(0, 119, 255, 50%);
animation: pulse-width 2s infinite;
}
.download-bar {
animation: pulse-width 2s infinite;
background: linear-gradient(90deg, #42d392, #00b77e);
box-shadow: 0 0 4px rgba(0, 183, 126, 50%);
animation: pulse-width 2s infinite;
}
/* 测试状态点样式 */
@@ -446,22 +438,22 @@ onMounted(() => {
position: absolute;
z-index: 1;
border-radius: 50%;
block-size: 70%;
content: '';
height: 70%;
width: 70%;
top: 15%;
left: 15%;
inline-size: 70%;
inset-block-start: 15%;
inset-inline-start: 15%;
}
.pulse-dot::after {
position: absolute;
z-index: 2;
border-radius: 50%;
block-size: 100%;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
inline-size: 100%;
inset-block-start: 0;
inset-inline-start: 0;
}
.pulse-dot.error::before {
@@ -508,11 +500,11 @@ onMounted(() => {
.spinner-circle {
position: absolute;
border: 1px solid rgba(var(--v-theme-primary), 0.2);
border-top-color: rgba(var(--v-theme-primary), 1);
border-radius: 50%;
width: 100%;
height: 100%;
animation: spin 0.8s linear infinite;
block-size: 100%;
border-block-start-color: rgba(var(--v-theme-primary), 1);
inline-size: 100%;
}
/* 动画关键帧 */
@@ -522,6 +514,7 @@ onMounted(() => {
opacity: 0.85;
transform: scaleX(0.95);
}
50% {
opacity: 1;
transform: scaleX(1.05);
@@ -532,9 +525,11 @@ onMounted(() => {
0% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-error), 0.6);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--v-theme-error), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-error), 0);
}
@@ -544,9 +539,11 @@ onMounted(() => {
0% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-warning), 0.6);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--v-theme-warning), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-warning), 0);
}
@@ -556,9 +553,11 @@ onMounted(() => {
0% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-success), 0.6);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--v-theme-success), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-success), 0);
}
@@ -568,9 +567,11 @@ onMounted(() => {
0% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0.6);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--v-theme-secondary), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0);
}
@@ -580,6 +581,7 @@ onMounted(() => {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -589,8 +591,22 @@ onMounted(() => {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.site-card-actions {
opacity: 0;
transform: translateX(100%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
}
.site-card:hover .site-card-actions {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
</style>

2
src/components/dialog/AlistConfigDialog.vue
View File

@@ -34,7 +34,7 @@ async function savaAlistConfig() {
<template>
<VDialog width="50rem" scrollable max-height="85vh">
<VCard :title="t('dialog.alistConfig.title')" class="rounded-t">
<VCard :title="t('dialog.alistConfig.title')">
<VDialogCloseBtn @click="emit('close')" />
<VCardText>
<VRow>

2
src/components/dialog/AliyunAuthDialog.vue
View File

@@ -89,7 +89,7 @@ onUnmounted(() => {
<template>
<VDialog width="40rem" scrollable max-height="85vh">
<VCard :title="t('dialog.aliyunAuth.loginTitle')" class="rounded-t">
<VCard :title="t('dialog.aliyunAuth.loginTitle')">
<VDialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2 flex flex-col items-center">
<div class="my-6 rounded text-center p-3 border">

2
src/components/dialog/ImportCodeDialog.vue
View File

@@ -25,7 +25,7 @@ function handleImport() {
<template>
<VDialog width="40rem" scrollable max-height="85vh">
<VCard :title="props.title" class="rounded-t">
<VCard :title="props.title">
<VDialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2">
<VTextarea v-model="codeString" />

6
src/components/dialog/PluginConfigDialog.vue
View File

@@ -150,11 +150,7 @@ onBeforeMount(async () => {
<template>
<VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
<!-- Vuetify 渲染模式 -->
<VCard
v-if="renderMode === 'vuetify'"
:title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`"
class="rounded-t"
>
<VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`">
<VDialogCloseBtn @click="emit('close')" />
<VDivider />
<LoadingBanner v-if="!isRefreshed" class="mt-5" />

2
src/components/dialog/PluginDataDialog.vue
View File

@@ -120,7 +120,7 @@ onMounted(() => {
<template>
<VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
<!-- Vuetify 渲染模式 -->
<VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name}`" class="rounded-t">
<VCard v-if="renderMode === 'vuetify'" :title="`${props.plugin?.plugin_name}`">
<VDialogCloseBtn @click="emit('close')" />
<LoadingBanner v-if="!isRefreshed" class="mt-5" />
<VCardText v-else class="min-h-40">

2
src/components/dialog/PluginMarketSettingDialog.vue
View File

@@ -45,7 +45,7 @@ onMounted(() => {
<template>
<VDialog width="50rem" scrollable max-height="85vh">
<VCard class="rounded-t">
<VCard>
<VCardItem>
<VCardTitle>
<VIcon icon="mdi-store-cog" class="me-2" />

2
src/components/dialog/RcloneConfigDialog.vue
View File

@@ -42,7 +42,7 @@ async function savaRcloneConfig() {
<template>
<VDialog width="50rem" scrollable max-height="85vh">
<VCard :title="t('dialog.rcloneConfig.title')" class="rounded-t">
<VCard :title="t('dialog.rcloneConfig.title')">
<VDialogCloseBtn @click="emit('close')" />
<VCardText>
<VRow>

2
src/components/dialog/ReorganizeDialog.vue
View File

@@ -250,7 +250,7 @@ onUnmounted(() => {
<template>
<VDialog scrollable max-width="45rem" :fullscreen="!display.mdAndUp.value">
<VCard :title="dialogTitle" class="rounded-t">
<VCard :title="dialogTitle">
<VDialogCloseBtn @click="emit('close')" />
<VDivider />
<VCardText>

1
src/components/dialog/SiteAddEditDialog.vue
View File

@@ -152,7 +152,6 @@ onMounted(async () => {
:title="`${props.oper === 'add' ? t('site.actions.add') : t('site.actions.edit')}${t('site.title')}${
props.oper !== 'add' ? ` - ${siteForm.name}` : ''
}`"
class="rounded-t"
>
<VDialogCloseBtn @click="emit('close')" />
<VDivider />

2
src/components/dialog/SiteUserDataDialog.vue
View File

@@ -283,7 +283,7 @@ onBeforeMount(async () => {
<template>
<VDialog scrollable eager max-width="80rem" :fullscreen="!display.mdAndUp.value">
<VCard class="rounded-t">
<VCard>
<VCardItem>
<VCardTitle
>{{ t('dialog.siteUserData.title') }} - {{ props.site?.name }}

1
src/components/dialog/SubscribeEditDialog.vue
View File

@@ -292,7 +292,6 @@ onMounted(() => {
: '',
})
"
class="rounded-t"
>
<VCardText>
<VDialogCloseBtn @click="emit('close')" />

2
src/components/dialog/SubscribeFilesDialog.vue
View File

@@ -80,7 +80,7 @@ onBeforeMount(() => {
</script>
<template>
<VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
<VCard class="rounded-t">
<VCard>
<VCardItem class="my-2">
<VDialogCloseBtn @click="emit('close')" />
</VCardItem>

1
src/components/dialog/SubscribeShareDialog.vue
View File

@@ -60,7 +60,6 @@ const $toast = useToast()
:title="`${t('dialog.subscribeShare.shareSubscription')} - ${props.sub?.name} ${
props.sub?.season ? t('dialog.subscribeShare.season', { number: props.sub?.season }) : ''
}`"
class="rounded-t"
>
<VCardText>
<VDialogCloseBtn @click="emit('close')" />

2
src/components/dialog/U115AuthDialog.vue
View File

@@ -96,7 +96,7 @@ onUnmounted(() => {
<template>
<VDialog width="40rem" scrollable max-height="85vh">
<VCard :title="t('dialog.u115Auth.loginTitle')" class="rounded-t">
<VCard :title="t('dialog.u115Auth.loginTitle')">
<VDialogCloseBtn @click="emit('close')" />
<VCardText class="pt-2 flex flex-col items-center">
<div class="my-6 rounded text-center p-3 border">

1
src/components/dialog/UserAddEditDialog.vue
View File

@@ -295,7 +295,6 @@ onMounted(() => {
:title="`${props.oper === 'add' ? t('dialog.userAddEdit.add') : t('dialog.userAddEdit.edit')}${
props.oper !== 'add' ? ` - ${userName}` : ''
}`"
class="rounded-t"
>
<VDialogCloseBtn @click="emit('close')" />
<VDivider />

2
src/components/dialog/UserAuthDialog.vue
View File

@@ -134,7 +134,7 @@ onMounted(async () => {
<template>
<VDialog width="40rem" max-height="85vh">
<VCard :title="t('dialog.userAuth.title')" class="rounded-t">
<VCard :title="t('dialog.userAuth.title')">
<VDialogCloseBtn @click="emit('close')" />
<VCardText>
<VRow>

2
src/components/dialog/WorkflowAddEditDialog.vue
View File

@@ -86,7 +86,7 @@ async function editWorkflow() {
<template>
<VDialog scrollable :close-on-back="false" eager max-width="30rem" :fullscreen="!display.mdAndUp.value">
<VCard :title="title" class="rounded-t">
<VCard :title="title">
<VDialogCloseBtn @click="emit('close')" />
<VDivider />
<VCardText>

1
tailwind.config.js
View File

@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
important: true,
theme: {
extend: {},
},

3
vite.config.ts
View File

@@ -200,5 +200,8 @@ export default defineConfig({
quietDeps: true,
},
},
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
})