GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-28 02:51:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
jxxghp
2023-06-24 20:25:03 +08:00
parent d637d6cbc6
commit 5e3fd33599
11 changed files with 208 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/@core/components/ThemeSwitcher.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { ThemeSwitcherTheme } from '@layouts/types';
import { ref, watch } from 'vue';
import { useTheme } from 'vuetify';
import { ref, watch } from 'vue'
import { useTheme } from 'vuetify'
import type { ThemeSwitcherTheme } from '@layouts/types'
const props = defineProps<{
themes: ThemeSwitcherTheme[]
@@ -15,6 +15,7 @@ const { state: currentThemeName, next: getNextThemeName, index: currentThemeInde
const changeTheme = () => {
const nextTheme = getNextThemeName()
globalTheme.name.value = nextTheme
savedTheme.value = nextTheme
localStorage.setItem('theme', nextTheme)
@@ -29,7 +30,6 @@ watch(() => globalTheme.name.value, val => {
onMounted(() => {
globalTheme.name.value = savedTheme.value
})
</script>
<template>

2
src/@layouts/components/VerticalNav.vue
View File

@@ -1,8 +1,8 @@
<script lang="ts" setup>
import logo from '@images/logo.svg?raw'
import type { Component } from 'vue'
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
import { useDisplay } from 'vuetify'
import logo from '@images/logo.svg?raw'
interface Props {
tag?: string | Component

17
src/api/index.ts
View File

@@ -1,6 +1,5 @@
import router from '@/router'
import axios from 'axios'
import router from '@/router'
// 创建axios实例
const api = axios.create({
@@ -10,11 +9,10 @@ const api = axios.create({
// 添加请求拦截器
api.interceptors.request.use(config => {
const token = localStorage.getItem('token')
// 在请求头中添加token
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
if (token)
config.headers.Authorization = `Bearer ${token}`
return config
})
@@ -23,14 +21,15 @@ api.interceptors.request.use(config => {
api.interceptors.response.use(response => {
return response.data
}, error => {
if (! error.response) {
if (!error.response) {
// 请求超时
return Promise.reject(error)
} else if (error.response.status === 403) {
}
else if (error.response.status === 403) {
// token验证失败，跳转到登录页面
router.push('/login')
}
return Promise.reject(error)
})

14
src/layouts/components/DefaultLayoutWithVerticalNav.vue
View File

@@ -1,9 +1,5 @@
<script lang="ts" setup>
import { useTheme } from 'vuetify'
import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
import upgradeBannerDark from '@images/pro/upgrade-banner-dark.png'
import upgradeBannerLight from '@images/pro/upgrade-banner-light.png'
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
@@ -13,12 +9,6 @@ import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
import UserProfile from '@/layouts/components/UserProfile.vue'
// Banner
const vuetifyTheme = useTheme()
const upgradeBanner = computed(() => {
return vuetifyTheme.global.name.value === 'light' ? upgradeBannerLight : upgradeBannerDark
})
</script>
<template>
@@ -93,7 +83,7 @@ const upgradeBanner = computed(() => {
to: '/ranking',
}"
/>
<VerticalNavLink
:item="{
title: '资源搜索',
@@ -142,7 +132,7 @@ const upgradeBanner = computed(() => {
to: '/history',
}"
/>
<!-- 👉 用户设置 -->
<VerticalNavSectionTitle
:item="{

64
src/layouts/components/UserProfile.vue
View File

@@ -1,24 +1,40 @@
<script setup lang="ts">
import router from "@/router";
import avatar1 from "@images/avatars/avatar-1.png";
import router from '@/router'
import avatar1 from '@images/avatars/avatar-1.png'
// 执行注销操作
const logout = () => {
// 清除登录状态信息，例如删除令牌
localStorage.removeItem("token");
localStorage.removeItem('token')
// 重定向到登录页面或其他适当的页面
router.push("/login");
};
router.push('/login')
}
</script>
<template>
<VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
<VAvatar class="cursor-pointer" color="primary" variant="tonal">
<VBadge
dot
location="bottom right"
offset-x="3"
offset-y="3"
color="success"
bordered
>
<VAvatar
class="cursor-pointer"
color="primary"
variant="tonal"
>
<VImg :src="avatar1" />
<!-- SECTION Menu -->
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
<VMenu
activator="parent"
width="230"
location="bottom end"
offset="14px"
>
<VList>
<!-- 👉 User Avatar & Name -->
<VListItem>
@@ -31,22 +47,34 @@ const logout = () => {
offset-y="3"
color="success"
>
<VAvatar color="primary" variant="tonal">
<VAvatar
color="primary"
variant="tonal"
>
<VImg :src="avatar1" />
</VAvatar>
</VBadge>
</VListItemAction>
</template>
<VListItemTitle class="font-weight-semibold"> 管理员 </VListItemTitle>
<VListItemTitle class="font-weight-semibold">
管理员
</VListItemTitle>
<VListItemSubtitle>Admin</VListItemSubtitle>
</VListItem>
<VDivider class="my-2" />
<!-- 👉 Profile -->
<VListItem link to="account-settings">
<VListItem
link
to="account-settings"
>
<template #prepend>
<VIcon class="me-2" icon="mdi-account-outline" size="22" />
<VIcon
class="me-2"
icon="mdi-account-outline"
size="22"
/>
</template>
<VListItemTitle>个人中心</VListItemTitle>
@@ -55,7 +83,11 @@ const logout = () => {
<!-- 👉 FAQ -->
<VListItem link>
<template #prepend>
<VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
<VIcon
class="me-2"
icon="mdi-help-circle-outline"
size="22"
/>
</template>
<VListItemTitle>帮助</VListItemTitle>
@@ -67,7 +99,11 @@ const logout = () => {
<!-- 👉 Logout -->
<VListItem @click="logout">
<template #prepend>
<VIcon class="me-2" icon="mdi-logout" size="22" />
<VIcon
class="me-2"
icon="mdi-logout"
size="22"
/>
</template>
<VListItemTitle>注销</VListItemTitle>

41
src/pages/[...all].vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
import misc404 from "@images/pages/404.png";
import miscMaskDark from "@images/pages/misc-mask-dark.png";
import miscMaskLight from "@images/pages/misc-mask-light.png";
import tree from "@images/pages/tree.png";
import { useTheme } from "vuetify";
import { useTheme } from 'vuetify'
import misc404 from '@images/pages/404.png'
import miscMaskDark from '@images/pages/misc-mask-dark.png'
import miscMaskLight from '@images/pages/misc-mask-light.png'
import tree from '@images/pages/tree.png'
const vuetifyTheme = useTheme()
const vuetifyTheme = useTheme();
const authThemeMask = computed(() => {
return vuetifyTheme.global.name.value === "light" ? miscMaskLight : miscMaskDark;
});
return vuetifyTheme.global.name.value === 'light' ? miscMaskLight : miscMaskDark
})
</script>
<template>
@@ -21,14 +22,30 @@ const authThemeMask = computed(() => {
<!-- 👉 Image -->
<div class="misc-avatar w-100 text-center">
<VImg :src="misc404" alt="Coming Soon" :max-width="800" class="mx-auto" />
<VBtn to="/" class="mt-10"> 返回 </VBtn>
<VImg
:src="misc404"
alt="Coming Soon"
:max-width="800"
class="mx-auto"
/>
<VBtn
to="/"
class="mt-10"
>
返回
</VBtn>
</div>
<!-- 👉 Footer -->
<VImg :src="tree" class="misc-footer-tree d-none d-md-block" />
<VImg
:src="tree"
class="misc-footer-tree d-none d-md-block"
/>
<VImg :src="authThemeMask" class="misc-footer-img d-none d-md-block" />
<VImg
:src="authThemeMask"
class="misc-footer-img d-none d-md-block"
/>
</div>
</template>

20
src/pages/dashboard.vue
View File

@@ -1,14 +1,14 @@
<script setup lang="ts">
import AnalyticsAward from '@/views/dashboard/AnalyticsAward.vue';
import AnalyticsBarCharts from '@/views/dashboard/AnalyticsBarCharts.vue';
import AnalyticsDepositWithdraw from '@/views/dashboard/AnalyticsDepositWithdraw.vue';
import AnalyticsSalesByCountries from '@/views/dashboard/AnalyticsSalesByCountries.vue';
import AnalyticsTotalEarning from '@/views/dashboard/AnalyticsTotalEarning.vue';
import AnalyticsTotalProfitLineCharts from '@/views/dashboard/AnalyticsTotalProfitLineCharts.vue';
import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue';
import AnalyticsUserTable from '@/views/dashboard/AnalyticsUserTable.vue';
import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue';
import CardStatisticsVertical from '@core/components/cards/CardStatisticsVertical.vue';
import AnalyticsAward from '@/views/dashboard/AnalyticsAward.vue'
import AnalyticsBarCharts from '@/views/dashboard/AnalyticsBarCharts.vue'
import AnalyticsDepositWithdraw from '@/views/dashboard/AnalyticsDepositWithdraw.vue'
import AnalyticsSalesByCountries from '@/views/dashboard/AnalyticsSalesByCountries.vue'
import AnalyticsTotalEarning from '@/views/dashboard/AnalyticsTotalEarning.vue'
import AnalyticsTotalProfitLineCharts from '@/views/dashboard/AnalyticsTotalProfitLineCharts.vue'
import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
import AnalyticsUserTable from '@/views/dashboard/AnalyticsUserTable.vue'
import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
import CardStatisticsVertical from '@core/components/cards/CardStatisticsVertical.vue'
const totalProfit = {
title: 'Total Profit',

158
src/pages/login.vue
View File

@@ -1,90 +1,104 @@
<script setup lang="ts">
import { useTheme } from "vuetify";
import { useTheme } from 'vuetify'
import api from "@/api";
import router from "@/router";
import logo from "@images/logo.svg?raw";
import authV1MaskDark from "@images/pages/auth-v1-mask-dark.png";
import authV1MaskLight from "@images/pages/auth-v1-mask-light.png";
import authV1Tree2 from "@images/pages/auth-v1-tree-2.png";
import authV1Tree from "@images/pages/auth-v1-tree.png";
import api from '@/api'
import router from '@/router'
import logo from '@images/logo.svg?raw'
import authV1MaskDark from '@images/pages/auth-v1-mask-dark.png'
import authV1MaskLight from '@images/pages/auth-v1-mask-light.png'
import authV1Tree2 from '@images/pages/auth-v1-tree-2.png'
import authV1Tree from '@images/pages/auth-v1-tree.png'
const form = ref({
username: "",
password: "",
username: '',
password: '',
remember: true,
});
})
const vuetifyTheme = useTheme();
const vuetifyTheme = useTheme()
const authThemeMask = computed(() => {
return vuetifyTheme.global.name.value === "light" ? authV1MaskLight : authV1MaskDark;
});
return vuetifyTheme.global.name.value === 'light' ? authV1MaskLight : authV1MaskDark
})
const isPasswordVisible = ref(false);
const errorMessage = ref("");
const isPasswordVisible = ref(false)
const errorMessage = ref('')
// 登录获取token事件
const login = () => {
errorMessage.value = "";
errorMessage.value = ''
if (!form.value.username || !form.value.password) {
errorMessage.value = "请输入用户名和密码";
return;
errorMessage.value = '请输入用户名和密码'
return
}
// 用户名密码
const formData = new FormData();
formData.append("username", form.value.username);
formData.append("password", form.value.password);
const formData = new FormData()
formData.append('username', form.value.username)
formData.append('password', form.value.password)
// 请求token
api
.post("/login/access-token", formData, {
.post('/login/access-token', formData, {
headers: {
Accept: "application/json", // 设置 Accept 类型
Accept: 'application/json', // 设置 Accept 类型
},
})
.then((response: any) => {
// 获取token
const token = response.access_token;
const token = response.access_token
// 将token保存在本地存储中，用于后续请求
localStorage.setItem("token", token);
//保存保持登录状态
localStorage.setItem("remember", form.value.remember.toString());
localStorage.setItem('token', token)
// 保存保持登录状态
localStorage.setItem('remember', form.value.remember.toString())
// 跳转到首页
router.push("/");
router.push('/')
})
.catch((error: any) => {
// 登录失败，显示错误提示
if (!error.response) {
errorMessage.value = "登录失败，请检查网络连接";
} else if (error.response.status === 401) {
errorMessage.value = "登录失败，请检查用户名和密码是否正确";
} else if (error.response.status === 403) {
errorMessage.value = "登录失败，您没有权限访问";
} else if (error.response.status === 500) {
errorMessage.value = "登录失败，服务器错误";
} else {
errorMessage.value = `登录失败 ${error.response.status}，请检查用户名和密码是否正确`;
}
});
};
if (!error.response)
errorMessage.value = '登录失败，请检查网络连接'
else if (error.response.status === 401)
errorMessage.value = '登录失败，请检查用户名和密码是否正确'
else if (error.response.status === 403)
errorMessage.value = '登录失败，您没有权限访问'
else if (error.response.status === 500)
errorMessage.value = '登录失败，服务器错误'
else
errorMessage.value = `登录失败 ${error.response.status}，请检查用户名和密码是否正确`
})
}
// 自动登录
onMounted(() => {
// 获取token
const token = localStorage.getItem("token");
// 获取保持登录状态
const remember = localStorage.getItem("remember");
// 如果token存在，且保持登录状态为true，则跳转到首页
if (token && remember === "true") {
router.push("/");
}
});
const token = localStorage.getItem('token')
// 获取保持登录状态
const remember = localStorage.getItem('remember')
// 如果token存在，且保持登录状态为true，则跳转到首页
if (token && remember === 'true')
router.push('/')
})
</script>
<template>
<div class="auth-wrapper d-flex align-center justify-center pa-4">
<VCard class="auth-card pa-4 pt-7" max-width="448" min-width="448">
<VCard
class="auth-card pa-4 pt-7"
max-width="448"
min-width="448"
>
<VCardItem class="justify-center">
<template #prepend>
<div class="d-flex">
@@ -98,8 +112,12 @@ onMounted(() => {
</VCardItem>
<VCardText class="pt-2">
<h5 class="text-h5 font-weight-semibold mb-1">欢迎使用 MoviePilot! 👋🏻</h5>
<p class="mb-0">请输入用户名密码登录</p>
<h5 class="text-h5 font-weight-semibold mb-1">
欢迎使用 MoviePilot! 👋🏻
</h5>
<p class="mb-0">
请输入用户名密码登录
</p>
</VCardText>
<VCardText>
@@ -107,7 +125,12 @@ onMounted(() => {
<VRow>
<!-- username -->
<VCol cols="12">
<VTextField v-model="form.username" label="用户名" type="text" required />
<VTextField
v-model="form.username"
label="用户名"
type="text"
required
/>
</VCol>
<!-- password -->
@@ -119,19 +142,33 @@ onMounted(() => {
:append-inner-icon="
isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
"
@click:append-inner="isPasswordVisible = !isPasswordVisible"
required
@click:append-inner="isPasswordVisible = !isPasswordVisible"
/>
<div v-if="errorMessage" class="text-error mt-1">{{ errorMessage }}</div>
<div
v-if="errorMessage"
class="text-error mt-1"
>
{{ errorMessage }}
</div>
<!-- remember me checkbox -->
<div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
<VCheckbox v-model="form.remember" label="保持登录" required />
<VCheckbox
v-model="form.remember"
label="保持登录"
required
/>
</div>
<!-- login button -->
<VBtn block type="submit"> 登录 </VBtn>
<VBtn
block
type="submit"
>
登录
</VBtn>
</VCol>
</VRow>
</VForm>
@@ -151,7 +188,10 @@ onMounted(() => {
/>
<!-- bg img -->
<VImg class="auth-footer-mask d-none d-md-block" :src="authThemeMask" />
<VImg
class="auth-footer-mask d-none d-md-block"
:src="authThemeMask"
/>
</div>
</template>

6
src/pages/ranking.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue';
import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue';
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue';
import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue'
import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue'
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
</script>
<template>

2
src/pages/subscribe-movie.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue';
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
</script>
<template>

2
src/pages/subscribe-tv.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue';
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
</script>
<template>