diff --git a/src/api/nprogress.ts b/src/api/nprogress.ts
new file mode 100644
index 00000000..ced96e19
--- /dev/null
+++ b/src/api/nprogress.ts
@@ -0,0 +1,16 @@
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+export function configureNProgress() {
+  NProgress.configure({
+    showSpinner: false
+  });
+}
+
+export function startNProgress() {
+  NProgress.start();
+}
+
+export function doneNProgress() {
+  NProgress.done();
+}
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index a1ac04bb..397fd5f3 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import api from "@/api";
+import { doneNProgress, startNProgress } from "@/api/nprogress";
 import { MediaInfo, Subscribe } from "@/api/types";
 
 // 输入参数
@@ -28,6 +29,7 @@ const getChipColor = (type: string) => {
 
 // 添加订阅
 const addSubscribe = async () => {
+  startNProgress();
   try {
     const result: { [key: string]: any } = await api.post("subscribe", {
       name: props.media?.title,
@@ -41,6 +43,7 @@ const addSubscribe = async () => {
   } catch (error) {
     console.error(error);
   }
+  doneNProgress();
 };
 
 // 取消订阅
@@ -86,6 +89,24 @@ const handleSubscribe = () => {
   }
 };
 
+// 拼装详情页链接
+const getDetailLink = () => {
+  let link = "";
+  if (props.media?.douban_id) {
+    link = `https://movie.douban.com/subject/${props.media?.douban_id}/`;
+  } else if (props.media?.type === "电影") {
+    link = `https://www.themoviedb.org/movie/${props.media?.tmdb_id}`;
+  } else if (props.media?.type === "电视剧") {
+    link = `https://www.themoviedb.org/tv/${props.media?.tmdb_id}`;
+  }
+  return link;
+};
+
+// 打开详情页
+const openDetailWindow = () => {
+  window.open(getDetailLink(), "_blank");
+};
+
 // 装载时检查是否已订阅
 onMounted(checkSubscribe);
 </script>
@@ -139,6 +160,7 @@ onMounted(checkSubscribe);
           <VCardText
             class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
             v-show="hover.isHovering"
+            @click.stop="openDetailWindow"
           >
             <span class="font-bold">{{ props.media?.year }}</span>
             <h1
@@ -154,7 +176,7 @@ onMounted(checkSubscribe);
               <IconBtn
                 icon="mdi-heart"
                 :color="isSubscribed ? 'error' : 'white'"
-                @click="handleSubscribe"
+                @click.stop="handleSubscribe"
               />
             </div>
           </VCardText>
diff --git a/src/main.ts b/src/main.ts
index 94773122..e7aac4ec 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 /* eslint-disable import/order */
 import '@/@iconify/icons-bundle'
 import App from '@/App.vue'
+import { configureNProgress, doneNProgress, startNProgress } from '@/api/nprogress'
 import vuetify from '@/plugins/vuetify'
 import { loadFonts } from '@/plugins/webfontloader'
 import router from '@/router'
@@ -8,13 +9,11 @@ import store from '@/store'
 import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
 import { createApp } from 'vue'
 loadFonts()
 
 // Nprogress
-NProgress.configure({ showSpinner: false })
+configureNProgress()
 
 // Create vue app
 const app = createApp(App)
@@ -37,11 +36,11 @@ router.beforeEach((to, from, next) => {
   }
   else {
     // 否则，允许继续进行路由导航
-    NProgress.start()
+    startNProgress()
     next()
   }
 })
 
 router.afterEach(() => {
-  NProgress.done()
+  doneNProgress()
 })