diff --git a/.env.development b/.env.development
index 64c2bdd4..b27eade5 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VITE_API_BASE_URL=http://10.10.10.10:3001/api/v1/
+VITE_API_BASE_URL=http://localhost:3001/api/v1/
diff --git a/src/api/types.ts b/src/api/types.ts
index 5b26e2a1..9e60d3f3 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -90,6 +90,8 @@ export interface MediaInfo {
   title?: string
   // 年份
   year?: string
+  // 季号
+  season?: number;
   // TMDB ID
   tmdb_id?: number
   // IMDB ID
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 18b0c3ce..a1ac04bb 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { MediaInfo } from "@/api/types";
+import api from "@/api";
+import { MediaInfo, Subscribe } from "@/api/types";
 
 // 输入参数
 const props = defineProps({
@@ -11,6 +12,10 @@ const props = defineProps({
 // 图片加载状态
 const isImageLoaded = ref(false);
 
+// 订阅状态
+const isSubscribed = ref(false);
+
+// 角标颜色
 const getChipColor = (type: string) => {
   if (type === "电影") {
     return "border-blue-500 bg-blue-600";
@@ -20,6 +25,69 @@ const getChipColor = (type: string) => {
     return "border-purple-600 bg-purple-600";
   }
 };
+
+// 添加订阅
+const addSubscribe = async () => {
+  try {
+    const result: { [key: string]: any } = await api.post("subscribe", {
+      name: props.media?.title,
+      type: props.media?.type,
+      year: props.media?.year,
+      tmdbid: props.media?.tmdb_id,
+      doubanid: props.media?.douban_id,
+      season: props.media?.season,
+    });
+    isSubscribed.value = result.success || false;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 取消订阅
+const removeSubscribe = async () => {
+  try {
+    let mediaid = props.media?.tmdb_id
+      ? `tmdb:${props.media?.tmdb_id}`
+      : `douban:${props.media?.douban_id}`;
+    const result: { [key: string]: any } = await api.delete(`subscribe/${mediaid}`, {
+      params: {
+        season: props.media?.season,
+      },
+    });
+    isSubscribed.value = !(result.success || false);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 查询是否已订阅
+const checkSubscribe = async () => {
+  try {
+    let mediaid = props.media?.tmdb_id
+      ? `tmdb:${props.media?.tmdb_id}`
+      : `douban:${props.media?.douban_id}`;
+    const result: Subscribe = await api.get(`subscribe/${mediaid}`, {
+      params: {
+        season: props.media?.season,
+      },
+    });
+    isSubscribed.value = !!result.id;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 订阅按钮响应
+const handleSubscribe = () => {
+  if (isSubscribed.value) {
+    removeSubscribe();
+  } else {
+    addSubscribe();
+  }
+};
+
+// 装载时检查是否已订阅
+onMounted(checkSubscribe);
 </script>
 
 <template>
@@ -83,7 +151,11 @@ const getChipColor = (type: string) => {
             </p>
             <div class="flex align-center justify-between">
               <IconBtn icon="mdi-magnify" color="white" />
-              <IconBtn icon="mdi-heart" color="white" />
+              <IconBtn
+                icon="mdi-heart"
+                :color="isSubscribed ? 'error' : 'white'"
+                @click="handleSubscribe"
+              />
             </div>
           </VCardText>
         </VImg>
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index df55bb25..5c16fea4 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -42,7 +42,6 @@ const getParams = () => {
 
 // 获取订阅列表数据
 const fetchData = async ({ done }) => {
-  console.log("entry", props.apipath);
   try {
     if (!props.apipath) {
       return;