add fullcalendar

src/views/subscribe/SubscribeListView.vue

@@ -1,46 +1,46 @@
 <script lang="ts" setup>
-import api from '@/api';
-import { formatSeason } from '@core/utils/formatters';
+import api from "@/api";
+import { formatSeason } from "@core/utils/formatters";
 
 // 定义订阅字典结构
 interface Subscribe {
-  id: number
+  id: number;
   // 订阅名称
-  name: string
+  name: string;
   // 订阅年份
-  year: string
+  year: string;
   // 订阅类型 电影/电视剧
-  type: string
+  type: string;
   // 搜索关键字
-  keyword?: string
-  tmdbid: number
-  doubanid?: string
+  keyword?: string;
+  tmdbid: number;
+  doubanid?: string;
   // 季号
-  season?: number
+  season?: number;
   // 海报
-  poster?: string
+  poster?: string;
   // 背景图
-  backdrop?: string
+  backdrop?: string;
   // 评分
-  vote?: number
+  vote?: number;
   // 描述
-  description?: string
+  description?: string;
   // 过滤规则
-  filter?: string
+  filter?: string;
   // 包含
-  include?: string
+  include?: string;
   // 排除
-  exclude?: string
+  exclude?: string;
   // 总集数
-  total_episode?: number
+  total_episode?: number;
   // 开始集数
-  start_episode?: number
+  start_episode?: number;
   // 缺失集数
-  lack_episode?: number
+  lack_episode?: number;
   // 附加信息
-  note?: string
+  note?: string;
   // 状态：N-新建， R-订阅中
-  state: string
+  state: string;
 }
 
 // 输入参数
@@ -54,7 +54,7 @@ const dataList = ref<Subscribe[]>([]);
 // 获取订阅列表数据
 const fetchData = async () => {
   try {
-    dataList.value = await api.get('/subscribe');
+    dataList.value = await api.get("/subscribe");
   } catch (error) {
     console.error(error);
   }
@@ -70,67 +70,87 @@ const filteredDataList = computed(() => {
 
 // 根据 type 返回不同的图标
 const getIcon = (type: string) => {
-  if (type === '电影') {
-    return 'mdi-movie';
-  } else if (type === '电视剧') {
-    return 'mdi-television-classic';
+  if (type === "电影") {
+    return "mdi-movie";
+  } else if (type === "电视剧") {
+    return "mdi-television-classic";
   } else {
-    return 'mdi-help-circle';
+    return "mdi-help-circle";
   }
-}
+};
 </script>
 
 <template>
-    <VRow>
-        <VCol v-for="data in filteredDataList" :key="data.id" cols="12" md="6" lg="4">
-            <VCard :image="data.backdrop" class="card-with-overlay">
-                <VCardItem>
-                    <template #prepend>
-                        <VIcon size="1.9rem" color="white" :icon="getIcon(data.type)" class="overlay-text"/>
-                    </template>
-                    <VCardTitle class="text-white overlay-text">
-                        {{ data.name }} {{ formatSeason(data.season ? data.season.toString(): '') }}
-                    </VCardTitle>
-                </VCardItem>
+  <VRow>
+    <VCol v-for="data in filteredDataList" :key="data.id" cols="12" md="6" lg="4">
+      <VCard :image="data.backdrop" class="card-with-overlay">
+        <VCardItem>
+          <template #prepend>
+            <VIcon
+              size="1.9rem"
+              color="white"
+              :icon="getIcon(data.type)"
+              class="overlay-text"
+            />
+          </template>
+          <VCardTitle class="text-white overlay-text">
+            {{ data.name }} {{ formatSeason(data.season ? data.season.toString() : "") }}
+          </VCardTitle>
+          <template #append>
+            <div class="me-n3">
+              <MoreBtn color="white" class="overlay-text"/>
+            </div>
+          </template>
+        </VCardItem>
 
-                <VCardText class="overlay-text">
-                    <p class="clamp-text text-white mb-0">
-                        {{ data.description }}
-                    </p>
-                </VCardText>
+        <VCardText class="overlay-text">
+          <p class="clamp-text text-white mb-0">
+            {{ data.description }}
+          </p>
+        </VCardText>
 
-                <VCardText class="d-flex justify-space-between align-center flex-wrap overlay-text">
-                    <div class="d-flex align-center">
-                        <IconBtn icon="mdi-star" color="white" class="me-1" />
-                        <span class="text-subtitle-2 text-white me-4">{{ data.vote }}</span>
+        <VCardText
+          class="d-flex justify-space-between align-center flex-wrap overlay-text"
+        >
+          <div class="d-flex align-center">
+            <IconBtn icon="mdi-star" color="white" class="me-1" />
+            <span class="text-subtitle-2 text-white me-4">{{ data.vote }}</span>
 
-                        <IconBtn icon="mdi-progress-clock" color="white" class="me-1" v-if="data.season" />
-                        <span class="text-subtitle-2 text-white" v-if="data.season">{{ (data.total_episode || 0) - (data.lack_episode || 0) }} / {{ data.total_episode }}</span>
-                    </div>
-                </VCardText>
-            </VCard>
-        </VCol>
-    </VRow>
+            <IconBtn
+              icon="mdi-progress-clock"
+              color="white"
+              class="me-1"
+              v-if="data.season"
+            />
+            <span class="text-subtitle-2 text-white" v-if="data.season"
+              >{{ (data.total_episode || 0) - (data.lack_episode || 0) }} /
+              {{ data.total_episode }}</span
+            >
+          </div>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
 </template>
 
-<style scoped>
-  .card-with-overlay {
-    position: relative;
-  }
+<style lang="scss">
+.card-with-overlay {
+  position: relative;
+}
 
-  .card-with-overlay::before {
-    position: absolute;
-    z-index: 1;
-    background-color: rgba(0, 0, 0, 40%); /* 背景遮罩的颜色和透明度 */
-    block-size: 100%;
-    content: "";
-    inline-size: 100%;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-  }
+.card-with-overlay::before {
+  position: absolute;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 40%); /* 背景遮罩的颜色和透明度 */
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
 
-  .overlay-text {
-    position: relative;
-    z-index: 2;
-  }
+.overlay-text {
+  position: relative;
+  z-index: 2;
+}
 </style>