Merge pull request #394 from jxxghp/cursor/update-subscription-sorting-and-scoring-6aa9

src/views/subscribe/SubscribePopularView.vue

@@ -199,6 +199,38 @@ async function fetchData({ done }: { done: any }) {
 <template>
   <!-- 筛选器 -->
   <div class="px-3 mb-4">
+    <div class="flex justify-start align-center mb-3">
+      <div class="mr-5">
+        <VLabel>{{ t('tmdb.sort') }}</VLabel>
+      </div>
+      <VChipGroup v-model="filterParams.sort_type">
+        <VChip
+          :color="filterParams.sort_type == 'time' ? 'primary' : ''"
+          filter
+          tile
+          value="time"
+        >
+          {{ t('tmdb.sortType.time') }}
+        </VChip>
+        <VChip
+          :color="filterParams.sort_type == 'count' ? 'primary' : ''"
+          filter
+          tile
+          value="count"
+        >
+          {{ t('tmdb.sortType.count') }}
+        </VChip>
+        <VChip
+          :color="filterParams.sort_type == 'rating' ? 'primary' : ''"
+          filter
+          tile
+          value="rating"
+        >
+          {{ t('tmdb.sortType.rating') }}
+        </VChip>
+      </VChipGroup>
+    </div>
+    
     <div class="flex justify-start align-center mb-3">
       <div class="mr-5">
         <VLabel>{{ t('tmdb.genre') }}</VLabel>
@@ -219,56 +251,34 @@ async function fetchData({ done }: { done: any }) {
     
     <div class="flex justify-start align-center mb-3">
       <div class="mr-5">
-        <VLabel>{{ t('tmdb.rating') }}</VLabel>
+        <VLabel>{{ t('tmdb.rating') }} & {{ t('subscribe.minSubscribers') }}</VLabel>
       </div>
-      <VSlider
+      <div class="flex align-center">
-        v-model="filterParams.min_rating"
+        <VSlider
-        thumb-label
+          v-model="filterParams.min_rating"
-        max="10"
+          thumb-label
-        min="0"
+          max="10"
-        :step="0.1"
+          min="0"
-        class="align-center"
+          :step="1"
-        hide-details
+          class="align-center"
-        style="width: 200px;"
+          hide-details
-      >
+          style="width: 200px;"
-        <template v-slot:append>
+        >
-          <span class="ml-2 text-body-2">- 10</span>
+          <template v-slot:append>
-        </template>
+            <span class="ml-2 text-body-2">- 10</span>
-      </VSlider>
+          </template>
-    </div>
+        </VSlider>
-    
+        <VTextField
-    <div class="flex justify-start align-center mb-3">
+          v-model="filterParams.min_sub"
-      <div class="mr-5">
+          variant="outlined"
-        <VLabel>{{ t('subscribe.minSubscribers') }}</VLabel>
+          density="compact"
+          type="number"
+          hide-details
+          single-line
+          min="1"
+          style="width: 120px; margin-left: 20px;"
+        />
       </div>
-      <VTextField
-        v-model="filterParams.min_sub"
-        variant="outlined"
-        density="compact"
-        type="number"
-        hide-details
-        single-line
-        min="1"
-        style="width: 120px;"
-      />
-    </div>
-    
-    <div class="flex justify-start align-center">
-      <div class="mr-5">
-        <VLabel>{{ t('tmdb.sort') }}</VLabel>
-      </div>
-      <VSelect
-        v-model="filterParams.sort_type"
-        :items="[
-          { title: t('tmdb.sortType.time'), value: 'time' },
-          { title: t('tmdb.sortType.count'), value: 'count' },
-          { title: t('tmdb.sortType.rating'), value: 'rating' }
-        ]"
-        variant="outlined"
-        density="compact"
-        hide-details
-        style="width: 150px;"
-      />
     </div>
   </div>
 

src/views/subscribe/SubscribeShareView.vue

@@ -218,6 +218,38 @@ function removeData(id: number) {
 <template>
   <!-- 筛选器 -->
   <div class="px-3 mb-4">
+    <div class="flex justify-start align-center mb-3">
+      <div class="mr-5">
+        <VLabel>{{ t('tmdb.sort') }}</VLabel>
+      </div>
+      <VChipGroup v-model="filterParams.sort_type">
+        <VChip
+          :color="filterParams.sort_type == 'time' ? 'primary' : ''"
+          filter
+          tile
+          value="time"
+        >
+          {{ t('tmdb.sortType.time') }}
+        </VChip>
+        <VChip
+          :color="filterParams.sort_type == 'count' ? 'primary' : ''"
+          filter
+          tile
+          value="count"
+        >
+          {{ t('tmdb.sortType.count') }}
+        </VChip>
+        <VChip
+          :color="filterParams.sort_type == 'rating' ? 'primary' : ''"
+          filter
+          tile
+          value="rating"
+        >
+          {{ t('tmdb.sortType.rating') }}
+        </VChip>
+      </VChipGroup>
+    </div>
+    
     <div class="flex justify-start align-center mb-3">
       <div class="mr-5">
         <VLabel>{{ t('tmdb.genre') }}</VLabel>
@@ -245,7 +277,7 @@ function removeData(id: number) {
         thumb-label
         max="10"
         min="0"
-        :step="0.1"
+        :step="1"
         class="align-center"
         hide-details
         style="width: 200px;"
@@ -255,24 +287,6 @@ function removeData(id: number) {
         </template>
       </VSlider>
     </div>
-    
-    <div class="flex justify-start align-center">
-      <div class="mr-5">
-        <VLabel>{{ t('tmdb.sort') }}</VLabel>
-      </div>
-      <VSelect
-        v-model="filterParams.sort_type"
-        :items="[
-          { title: t('tmdb.sortType.time'), value: 'time' },
-          { title: t('tmdb.sortType.count'), value: 'count' },
-          { title: t('tmdb.sortType.rating'), value: 'rating' }
-        ]"
-        variant="outlined"
-        density="compact"
-        hide-details
-        style="width: 150px;"
-      />
-    </div>
   </div>
 
   <VPageContentTitle v-if="keyword" :title="`${t('common.search')}：${keyword}`" />