合并分支 'fk-dev' 到 'pre'

src/components/base/TimeSortSelectBox/down1.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="降序 8" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<rect id="矩形 6349" width="12.000000" height="1.000000" x="2.000000" y="3.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
+	<rect id="矩形 6350" width="12.000000" height="1.000000" x="2.000000" y="6.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
+	<rect id="矩形 6351" width="6.000000" height="1.000000" x="2.000000" y="9.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
+	<rect id="矩形 6352" width="6.000000" height="1.000000" x="2.000000" y="12.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
+	<path id="矢量 1983" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,12,9)" />
+	<path id="矢量 1984" d="M10 12L12 14L14 12" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
+</svg>

src/components/base/TimeSortSelectBox/down2.svg

+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="降序 12" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="路径" d="M12.6473 7.70235L14.0825 6.30313C14.1606 6.22657 14.2121 6.12657 14.2278 6.01719C14.27 5.74376 14.0793 5.49063 13.8059 5.45001L9.83871 4.87344L8.06527 1.27813C8.01683 1.17969 7.93715 1.10001 7.83871 1.05157C7.59183 0.929693 7.29183 1.03126 7.1684 1.27813L5.39496 4.87344L1.42777 5.45001C1.3184 5.46563 1.2184 5.51719 1.14183 5.59532C0.949647 5.79376 0.952772 6.10938 1.15121 6.30313L4.02152 9.10157L3.3434 13.0531C3.32465 13.1609 3.34183 13.2734 3.3934 13.3703C3.52152 13.6141 3.82465 13.7094 4.0684 13.5797L7.61684 11.7141L8.50394 12.1805" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
+	<path id="矢量 1983" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,12,9)" />
+	<path id="矢量 1984" d="M10 12L12 14L14 12" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
+</svg>

src/components/base/TimeSortSelectBox/index.vue

 <template>
   <div class="time-sort-select-box">
-    <el-select v-model="isSort" placeholder="发布时间" style="width: 130px" @change="handlePxChange">
+    <el-select v-model="sortValue" placeholder="排序方式" style="width: 130px" @change="handlePxChange">
       <template #prefix>
         <div style="display: flex; align-items: center; height: 100%">
-          <img v-if="isSort" src="./down.svg" style="width: 16px; height: 16px" />
-          <img v-else src="./up.svg" style="width: 16px; height: 16px" />
+          <img v-if="sortValue === 1" src="./down.svg" style="width: 16px; height: 16px" />
+          <img v-else-if="sortValue === 2" src="./up.svg" style="width: 16px; height: 16px" />
+          <img v-else-if="sortValue === 3" src="./down1.svg" style="width: 16px; height: 16px" />
+          <img v-else-if="sortValue === 4" src="./down2.svg" style="width: 16px; height: 16px" />
         </div>
       </template>
-      <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
+      <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
-const isSort = ref(true)
+const props = defineProps({
+  sortDemension: {
+    type: Number,
+    default: 1
+  }
+})
 
-const timeList = ref([
-  { label: "时间倒序", value: true },
-  { label: "时间正序", value: false }
-])
+const sortValue = ref(1)
+
+const sortList = computed(() => {
+  if (props.sortDemension === 1) {
+    return [
+      { label: "时间倒序", value: 1 },
+      { label: "时间正序", value: 2 },
+    ]
+  } else if (props.sortDemension === 2) {
+    return [
+      { label: "时间倒序", value: 1 },
+      { label: "时间正序", value: 2 },
+      { label: "评分倒序", value: 3 },
+    ]
+  } else {
+    return [
+      { label: "时间倒序", value: 1 },
+      { label: "时间正序", value: 2 },
+      { label: "评分倒序", value: 3 },
+      { label: "热度倒序", value: 4 },
+    ]
+  }
+})
 
 const emits = defineEmits(['handlePxChange'])
 
 const handlePxChange = () => {
-  emits('handlePxChange', isSort.value)
+  emits('handlePxChange', sortValue.value)
 }
 
 </script>

src/styles/components/TimeSortSelectBox/index.vue

@@ -5,20 +5,18 @@
 {{
   `
 import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
-import HeatSortSelectBox from '@/components/base/HeatSortSelectBox/index.vue'
-import GradeSortSelectBox from '@/components/base/GradeSortSelectBox/index.vue'
   <div class="time-box">
     <TimeSortSelectBox @handle-px-change="handleTimePx" />
-    <HeatSortSelectBox @handle-px-change="handleHeatPx" />
-    <GradeSortSelectBox @handle-px-change="handleGradePx" />
+    <TimeSortSelectBox :sort-demension="2" @handle-px-change="handleTimePx" />
+    <TimeSortSelectBox :sort-demension="3" @handle-px-change="handleTimePx" />
   </div>
   `
 }}
       </pre>
       <div class="time-box">
         <TimeSortSelectBox @handle-px-change="handleTimePx" />
-        <HeatSortSelectBox @handle-px-change="handleHeatPx" />
-        <GradeSortSelectBox @handle-px-change="handleGradePx" />
+        <TimeSortSelectBox :sort-demension="2" @handle-px-change="handleTimePx" />
+        <TimeSortSelectBox :sort-demension="3" @handle-px-change="handleTimePx" />
       </div>
 
     </el-col>
@@ -57,5 +55,7 @@ const handleGradePx = (val) => {
   padding: 100px;
   background: #F2F8FF;
   border: 1px solid var(--bg-black-5);
+  display: flex;
+  gap: 8px;
 }
 </style>
\ No newline at end of file