站点拖动排序

src/views/dashboard/MediaServerLatest.vue

@@ -38,9 +38,3 @@ onMounted(() => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.grid-media-card {
-  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-}
-</style>

src/views/dashboard/MediaServerLibrary.vue

@@ -38,10 +38,3 @@ onMounted(() => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.grid-backdrop-card {
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/dashboard/MediaServerPlaying.vue

@@ -38,10 +38,3 @@ onMounted(() => {
     </template>
   </VHover>
 </template>
-
-<style lang="scss">
-.grid-backdrop-card {
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/discover/MediaCardListView.vue

@@ -125,7 +125,5 @@ async function fetchData({ done }: { done: any }) {
 </template>
 
 <style lang="scss">
-.grid-media-card {
-  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-}
+
 </style>

src/views/discover/PersonCardListView.vue

@@ -124,9 +124,3 @@ async function fetchData({ done }: { done: any }) {
     />
   </VInfiniteScroll>
 </template>
-
-<style lang="scss">
-.grid-media-card {
-  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-}
-</style>

src/views/discover/TorrentCardListView.vue

@@ -233,8 +233,5 @@ watchEffect(() => {
 </template>
 
 <style lang="scss">
-.grid-torrent-card {
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-  padding-block-end: 1rem;
-}
+
 </style>

src/views/plugin/PluginCardListView.vue

@@ -516,14 +516,3 @@ onBeforeMount(async () => {
     </VCard>
   </VDialog>
 </template>
-
-<style lang="scss">
-.grid-plugin-card {
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  padding-block-end: 1rem;
-}
-
-.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
-  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-</style>

src/views/reorganize/DownloadingListView.vue

@@ -93,10 +93,3 @@ onUnmounted(() => {
     />
   </PullRefresh>
 </template>
-
-<style lang="scss">
-.grid-downloading-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/setting/AccountSettingDirectory.vue

@@ -310,9 +310,3 @@ onMounted(() => {
     </VCol>
   </VRow>
 </template>
-<style lang="scss">
-.grid-directory-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/setting/AccountSettingSearch.vue

@@ -440,10 +440,3 @@ onMounted(() => {
     <ImportCodeDialog v-model="importCodeString" title="导入优先级规则" @close="importCodeDialog = false" />
   </VDialog>
 </template>
-
-<style lang="scss">
-.grid-filterrule-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/setting/AccountSettingSubscribe.vue

@@ -550,10 +550,3 @@ onMounted(() => {
     <ImportCodeDialog v-model="importCodeString" title="导入优先级规则" @close="importCodeDialog = false" />
   </VDialog>
 </template>
-
-<style lang="scss">
-.grid-filterrule-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/site/SiteCardListView.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import draggable from 'vuedraggable'
 import api from '@/api'
 import type { Site } from '@/api/types'
 import SiteCard from '@/components/cards/SiteCard.vue'
@@ -24,16 +25,40 @@ async function fetchData() {
   }
 }
 
+// 保存站点排序
+async function savaSitesPriority() {
+  // 重新排序
+  const priorities = dataList.value.map((site, index) => ({ id: site.id, pri: index + 1 }))
+  try {
+    const result: { [key: string]: any } = await api.post('site/priorities', priorities)
+    if (result.success) {
+      fetchData()
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
 // 加载时获取数据
 onBeforeMount(fetchData)
 </script>
 
 <template>
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-  <div v-if="dataList.length > 0" class="grid gap-3 grid-site-card">
-    <div v-for="(data, index) in dataList" :key="index">
-      <SiteCard :key="data.id" :site="data" @remove="fetchData" @update="fetchData" />
-    </div>
+  <div>
+    <draggable
+      v-if="dataList.length > 0"
+      v-model="dataList"
+      @end="savaSitesPriority"
+      handle=".cursor-move"
+      item-key="id"
+      tag="div"
+      :component-data="{ 'class': 'grid gap-3 grid-site-card' }"
+    >
+      <template #item="{ element }">
+        <SiteCard :site="element" @remove="fetchData" @update="fetchData" />
+      </template>
+    </draggable>
   </div>
   <NoDataFound
     v-if="dataList.length === 0 && isRefreshed"
@@ -57,10 +82,3 @@ onBeforeMount(fetchData)
     @close="siteAddDialog = false"
   />
 </template>
-
-<style lang="scss">
-.grid-site-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/subscribe/SubscribeListView.vue

@@ -123,10 +123,3 @@ const filteredDataList = computed(() => {
     "
   />
 </template>
-
-<style lang="scss">
-.grid-subscribe-card {
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-  padding-block-end: 1rem;
-}
-</style>

src/views/subscribe/SubscribePopularView.vue

@@ -129,13 +129,3 @@ async function fetchData({ done }: { done: any }) {
     />
   </VInfiniteScroll>
 </template>
-
-<style lang="scss">
-.grid-media-card {
-  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-}
-
-.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
-  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-</style>