优化探索标签排序弹窗样式

src/components/dialog/DiscoverTabOrderDialog.vue

@@ -9,12 +9,10 @@ const display = useDisplay()
 
 const props = withDefaults(
   defineProps<{
-    colors?: Record<string, string>
     modelValue?: boolean
     tabs: DiscoverSource[]
   }>(),
   {
-    colors: () => ({}),
     modelValue: true,
   },
 )
@@ -55,9 +53,16 @@ function submitOrder() {
 </script>
 
 <template>
-  <VDialog v-if="visible" v-model="visible" max-width="35rem" scrollable :fullscreen="!display.mdAndUp.value">
-    <VCard>
-      <VCardItem>
+  <VDialog
+    v-if="visible"
+    v-model="visible"
+    width="35rem"
+    class="settings-dialog"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
+    <VCard class="settings-card">
+      <VCardItem class="settings-card-header">
         <VCardTitle>
           <VIcon icon="mdi-order-alphabetical-ascending" size="small" class="me-2" />
           {{ t('discover.setTabOrder') }}
@@ -72,14 +77,11 @@ function submitOrder() {
           handle=".cursor-move"
           item-key="mediaid_prefix"
           tag="div"
+          :animation="180"
           :component-data="{ 'class': 'settings-grid' }"
         >
           <template #item="{ element }">
-            <VCard
-              variant="text"
-              class="setting-item enabled"
-              :style="{ '--item-color': props.colors[element.mediaid_prefix] }"
-            >
+            <VCard variant="text" class="setting-item enabled">
               <div class="setting-item-inner">
                 <span class="setting-label">{{ element.name }}</span>
                 <VIcon icon="mdi-drag" class="drag-icon cursor-move" />
@@ -102,6 +104,11 @@ function submitOrder() {
 </template>
 
 <style scoped>
+.settings-card-header {
+  padding-block: 16px;
+  padding-inline: 20px;
+}
+
 .settings-hint {
   color: rgba(var(--v-theme-on-surface), 0.7);
   font-size: 0.9rem;
@@ -110,50 +117,86 @@ function submitOrder() {
 
 .settings-grid {
   display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .setting-item {
   position: relative;
   overflow: hidden;
-  background-color: rgba(var(--v-theme-primary), 0.08);
+  min-block-size: 48px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 10px;
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
   cursor: grab;
   padding-block: 10px;
   padding-inline: 12px;
+  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
 }
 
 .setting-item::before {
   position: absolute;
-  background-color: var(--item-color, #4caf50);
+  background-color: rgb(var(--v-theme-primary));
   block-size: 100%;
   content: '';
-  inline-size: 4px;
+  inline-size: 3px;
   inset-block-start: 0;
   inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.setting-item.enabled {
+  border-color: rgba(var(--v-theme-primary), 0.3);
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.setting-item.enabled::before {
+  opacity: 1;
+}
+
+.setting-item:hover {
+  border-color: rgba(var(--v-theme-primary), 0.32);
+  background-color: rgba(var(--v-theme-primary), 0.06);
+}
+
+.setting-item:active {
+  cursor: grabbing;
+  transform: scale(0.99);
 }
 
 .setting-item-inner {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .setting-label {
   flex: 1;
-  color: rgba(var(--v-theme-primary), 0.9);
+  color: rgba(var(--v-theme-on-surface), 0.72);
   font-size: 0.9rem;
-  font-weight: 500;
-  line-height: 1.2;
+  font-weight: 550;
+  line-height: 1.35;
+  transition: color 0.2s ease;
+}
+
+.setting-item.enabled .setting-label {
+  color: rgb(var(--v-theme-on-surface));
 }
 
 .drag-icon {
-  opacity: 0.5;
+  flex-shrink: 0;
+  color: rgba(var(--v-theme-on-surface), 0.52);
+  transition: color 0.2s ease;
 }
 
-@media (width <= 600px) {
+.setting-item:hover .drag-icon {
+  color: rgb(var(--v-theme-primary));
+}
+
+@media (width <= 760px) {
   .settings-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 </style>

src/pages/discover.vue

@@ -8,7 +8,6 @@ import { DiscoverSource } from '@/api/types'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
-import { getItemColor, initializeItemColors } from '@/utils/colorUtils'
 import { openSharedDialog } from '@/composables/useSharedDialog'
 
 const DiscoverTabOrderDialog = defineAsyncComponent(() => import('@/components/dialog/DiscoverTabOrderDialog.vue'))
@@ -41,9 +40,6 @@ const discoverTabItems = computed(() => {
 // 额外的数据源
 const extraDiscoverSources = ref<DiscoverSource[]>([])
 
-// 为每个项目生成随机颜色
-const itemColors = ref<{ [key: string]: string }>({})
-
 let orderDialogController: ReturnType<typeof openSharedDialog> | null = null
 
 // 打开发现页标签排序共享弹窗。
@@ -52,7 +48,6 @@ function openOrderConfigDialog() {
   orderDialogController = openSharedDialog(
     DiscoverTabOrderDialog,
     {
-      colors: itemColors.value,
       tabs: discoverTabs.value,
     },
     {
@@ -74,14 +69,6 @@ function closeOrderConfigDialog() {
   orderDialogController = null
 }
 
-// 初始化颜色
-function initializeColors() {
-  initializeItemColors(discoverTabs.value, item => item.mediaid_prefix)
-  discoverTabs.value.forEach(item => {
-    itemColors.value[item.mediaid_prefix] = getItemColor(item.mediaid_prefix)
-  })
-}
-
 // 初始化发现标签
 function initDiscoverTabs() {
   const tabs = getDiscoverTabs(t)
@@ -108,10 +95,6 @@ async function loadExtraDiscoverSources() {
         continue
       }
       discoverTabs.value.push(source)
-      // 为新增的数据源生成颜色
-      if (!itemColors.value[source.mediaid_prefix]) {
-        itemColors.value[source.mediaid_prefix] = getItemColor(source.mediaid_prefix)
-      }
     }
   } catch (error) {
     console.log(error)
@@ -187,7 +170,6 @@ registerHeaderTab({
 
 onBeforeMount(async () => {
   initDiscoverTabs()
-  initializeColors()
   await loadOrderConfig()
   await loadExtraDiscoverSources()
   sortSubscribeOrder()