fix bug

src/components/cards/BackdropCard.vue

@@ -18,8 +18,7 @@ function imageLoadHandler() {
 
 // 跳转播放
 function goPlay() {
-  if (props.media?.link)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link) window.open(props.media?.link, '_blank')
 }
 
 // 计算图片地址
@@ -30,11 +29,7 @@ const getImgUrl = computed(() => {
 </script>
 
 <template>
-  <VHover
-    v-bind="props"
-    :height="props.height"
-    :width="props.width"
-  >
+  <VHover v-bind="props">
     <template #default="hover">
       <VCard
         v-bind="hover.props"
@@ -48,12 +43,7 @@ const getImgUrl = computed(() => {
         @click="goPlay"
       >
         <template #image>
-          <VImg
-            :src="getImgUrl"
-            aspect-ratio="2/3"
-            cover
-            @load="imageLoadHandler"
-          >
+          <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler">
             <template #placeholder>
               <div class="w-full h-full">
                 <VSkeletonLoader class="object-cover aspect-w-3 aspect-h-2" />
@@ -62,7 +52,9 @@ const getImgUrl = computed(() => {
             <VCardText
               class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
             >
-              <h1 class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+              <h1
+                class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
+              >
                 {{ props.media?.title }}
               </h1>
               <span class="text-shadow">{{ props.media?.subtitle }}</span>
@@ -83,7 +75,7 @@ const getImgUrl = computed(() => {
 </template>
 
 <style lang="scss">
-.text-shadow{
-  text-shadow:1px 1px #777;
+.text-shadow {
+  text-shadow: 1px 1px #777;
 }
 </style>

src/components/cards/PosterCard.vue

@@ -18,26 +18,21 @@ const imageLoadError = ref(false)
 
 // 角标颜色
 function getChipColor(type: string) {
-  if (type === '电影')
-    return 'border-blue-500 bg-blue-600'
-  else if (type === '电视剧')
-    return ' bg-indigo-500 border-indigo-600'
-  else
-    return 'border-purple-600 bg-purple-600'
+  if (type === '电影') return 'border-blue-500 bg-blue-600'
+  else if (type === '电视剧') return ' bg-indigo-500 border-indigo-600'
+  else return 'border-purple-600 bg-purple-600'
 }
 
 // 计算图片地址
 const getImgUrl = computed(() => {
-  if (imageLoadError.value)
-    return noImage
+  if (imageLoadError.value) return noImage
   const image = props.media?.image || ''
   return `${import.meta.env.VITE_API_BASE_URL}system/img/0?imgurl=${encodeURIComponent(image)}`
 })
 
 // 跳转播放
 function goPlay(isHovering = false) {
-  if (props.media?.link && isHovering)
-    window.open(props.media?.link, '_blank')
+  if (props.media?.link && isHovering) window.open(props.media?.link, '_blank')
 }
 </script>
 
@@ -72,24 +67,24 @@ function goPlay(isHovering = false) {
         </VImg>
         <!-- 类型角标 -->
         <VChip
-            v-show="isImageLoaded"
-            variant="elevated"
-            size="small"
-            :class="getChipColor(props.media?.type || '')"
-            class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
-          >
-            {{ props.media?.type }}
-          </VChip>
-          <!-- 详情 -->
-          <VCardText
-            v-show="hover.isHovering || imageLoadError"
-            class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
-          >
-            <span class="font-bold">{{ props.media?.subtitle }}</span>
-            <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
-              {{ props.media?.title }}
-            </h1>
-          </VCardText>
+          v-show="isImageLoaded"
+          variant="elevated"
+          size="small"
+          :class="getChipColor(props.media?.type || '')"
+          class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
+        >
+          {{ props.media?.type }}
+        </VChip>
+        <!-- 详情 -->
+        <VCardText
+          v-show="hover.isHovering || imageLoadError"
+          class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
+        >
+          <span class="font-bold">{{ props.media?.subtitle }}</span>
+          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+            {{ props.media?.title }}
+          </h1>
+        </VCardText>
       </VCard>
     </template>
   </VHover>

src/components/misc/DashboardElement.vue

@@ -17,8 +17,6 @@ const props = defineProps({
   // 仪表板配置
   config: Object as PropType<DashboardItem>,
 })
-
-console.log(props.config)
 </script>
 <template>
   <!-- 系统内置的仪表板 -->

src/pages/dashboard.vue

@@ -27,6 +27,9 @@ const enableConfig = ref<{ [key: string]: boolean }>({
   latest: true,
 })
 
+// 仪表板顺序配置
+const orderConfig = ref<{ id: string }[]>([])
+
 // 仪表板配置
 const dashboardConfigs = ref<DashboardItem[]>([
   {
@@ -122,31 +125,33 @@ async function loadDashboardConfig() {
   }
   // 顺序配置
   const local_order = localStorage.getItem('MP_DASHBOARD_ORDER')
-  let order = null
   if (local_order) {
-    order = JSON.parse(local_order)
+    orderConfig.value = JSON.parse(local_order)
   } else {
     const response2 = await api.get('/user/config/DashboardOrder')
     if (response2 && response2.data && response2.data.value) {
-      order = response2.data.value
-      localStorage.setItem('MP_DASHBOARD_ORDER', JSON.stringify(order))
+      orderConfig.value = response2.data.value
+      localStorage.setItem('MP_DASHBOARD_ORDER', JSON.stringify(orderConfig.value))
     }
   }
-  // 按order的顺序对dashboardConfigs进行排序
-  if (order) {
-    const newConfigs: DashboardItem[] = []
-    order.forEach((item: { id: string }) => {
-      const config = dashboardConfigs.value.find(c => c.id === item.id)
-      if (config) {
-        newConfigs.push(config)
-      }
-    })
-    dashboardConfigs.value = newConfigs
+  // 排序
+  if (orderConfig.value) {
+    sortDashboardConfigs()
   }
 }
 
+// 按order的顺序对dashboardConfigs进行排序
+function sortDashboardConfigs() {
+  dashboardConfigs.value.sort((a, b) => {
+    return (
+      orderConfig.value.findIndex((item: { id: string }) => item.id === a.id) -
+      orderConfig.value.findIndex((item: { id: string }) => item.id === b.id)
+    )
+  })
+}
+
 // 设置项目
-function setDashboardConfig() {
+function saveDashboardConfig() {
   // 启用配置
   const data = JSON.stringify(enableConfig.value)
   localStorage.setItem('MP_DASHBOARD', data)
@@ -195,6 +200,8 @@ async function getPluginDashboard(id: string) {
       if (res) {
         // 保存到仪表板配置中
         dashboardConfigs.value.push(res)
+        // 排序
+        sortDashboardConfigs()
         // 定时刷新
         if (res.attrs?.refresh) {
           setTimeout(() => {
@@ -211,7 +218,7 @@ async function getPluginDashboard(id: string) {
 // 拖动排序结束
 function dragOrderEnd() {
   // 保存数据
-  setDashboardConfig()
+  saveDashboardConfig()
 }
 
 onBeforeMount(async () => {
@@ -230,7 +237,7 @@ onBeforeMount(async () => {
     :component-data="{ 'class': 'match-height' }"
   >
     <template #item="{ element }">
-      <VCol v-if="enableConfig[element.id]" v-bind:="element.cols">
+      <VCol v-if="enableConfig[element.id] && element.cols" v-bind:="element.cols">
         <DashboardElement :config="element" />
       </VCol>
     </template>
@@ -257,7 +264,7 @@ onBeforeMount(async () => {
       <VCardText class="pt-5 text-end">
         <VSpacer />
         <VBtn variant="outlined" color="secondary" class="me-4" @click="dialog = false"> 关闭 </VBtn>
-        <VBtn @click="setDashboardConfig">
+        <VBtn @click="saveDashboardConfig">
           <template #prepend>
             <VIcon icon="mdi-content-save" />
           </template>