Refactor subscribe views to use VChipGroup for sorting

Co-authored-by: jxxghp <jxxghp@qq.com>

src/views/subscribe/SubscribePopularView.vue

@@ -219,56 +219,66 @@ 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
+      <VChipGroup v-model="filterParams.sort_type">
-        v-model="filterParams.sort_type"
+        <VChip
-        :items="[
+          :color="filterParams.sort_type == 'time' ? 'primary' : ''"
-          { title: t('tmdb.sortType.time'), value: 'time' },
+          filter
-          { title: t('tmdb.sortType.count'), value: 'count' },
+          tile
-          { title: t('tmdb.sortType.rating'), value: 'rating' }
+          value="time"
-        ]"
+        >
-        variant="outlined"
+          {{ t('tmdb.sortType.time') }}
-        density="compact"
+        </VChip>
-        hide-details
+        <VChip
-        style="width: 150px;"
+          :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>
 

src/views/subscribe/SubscribeShareView.vue

@@ -245,7 +245,7 @@ function removeData(id: number) {
         thumb-label
         max="10"
         min="0"
-        :step="0.1"
+        :step="1"
         class="align-center"
         hide-details
         style="width: 200px;"
@@ -260,18 +260,32 @@ function removeData(id: number) {
       <div class="mr-5">
         <VLabel>{{ t('tmdb.sort') }}</VLabel>
       </div>
-      <VSelect
+      <VChipGroup v-model="filterParams.sort_type">
-        v-model="filterParams.sort_type"
+        <VChip
-        :items="[
+          :color="filterParams.sort_type == 'time' ? 'primary' : ''"
-          { title: t('tmdb.sortType.time'), value: 'time' },
+          filter
-          { title: t('tmdb.sortType.count'), value: 'count' },
+          tile
-          { title: t('tmdb.sortType.rating'), value: 'rating' }
+          value="time"
-        ]"
+        >
-        variant="outlined"
+          {{ t('tmdb.sortType.time') }}
-        density="compact"
+        </VChip>
-        hide-details
+        <VChip
-        style="width: 150px;"
+          :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>