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

src/components/base/GradeSortSelectBox/down.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/GradeSortSelectBox/index.vue

+<template>
+  <div class="grade-sort-select-box">
+    <el-select v-model="isSort" 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" />
+        </div>
+      </template>
+      <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isSort = ref(true)
+
+const gradeList = ref([
+  { label: "评分倒序", value: true },
+  { label: "评分正序", value: false }
+])
+
+const emits = defineEmits(['handlePxChange'])
+
+const handlePxChange = () => {
+  emits('handlePxChange', isSort.value)
+}
+
+</script>
+
+<style scoped>
+.grade-sort-select-box {
+  height: 42px;
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+</style>
\ No newline at end of file

src/components/base/GradeSortSelectBox/up.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="降序 11" width="16.000000" height="16.000000" x="0.000000" y="0.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,10)" />
+	<path id="矢量 1984" d="M10 10.9969L12.0003 9L14 10.9969" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.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.7141L9.39105 12.6469" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
+</svg>

src/components/base/HeatSortSelectBox/down.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/HeatSortSelectBox/index.vue

+<template>
+  <div class="heat-sort-select-box">
+    <el-select v-model="isSort" 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" />
+        </div>
+      </template>
+      <el-option v-for="item in heatList" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isSort = ref(true)
+
+const heatList = ref([
+  { label: "热度倒序", value: true },
+  { label: "热度正序", value: false }
+])
+
+const emits = defineEmits(['handlePxChange'])
+
+const handlePxChange = () => {
+  emits('handlePxChange', isSort.value)
+}
+
+</script>
+
+<style scoped>
+.heat-sort-select-box {
+  height: 42px;
+  box-sizing: border-box;
+  padding: 5px 0;
+}
+</style>
\ No newline at end of file

src/components/base/HeatSortSelectBox/up.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="降序 10" width="16.000000" height="16.000000" x="0.000000" y="0.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,10)" />
+	<path id="矢量 1984" d="M10 10.9969L12.0003 9L14 10.9969" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.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)" />
+</svg>

src/styles/components/TimeSortSelectBox/index.vue

@@ -4,15 +4,21 @@
       <pre>
 {{
   `
-  import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
+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="handlePx" />
+    <TimeSortSelectBox @handle-px-change="handleTimePx" />
+    <HeatSortSelectBox @handle-px-change="handleHeatPx" />
+    <GradeSortSelectBox @handle-px-change="handleGradePx" />
   </div>
   `
 }}
       </pre>
       <div class="time-box">
-        <TimeSortSelectBox @handle-px-change="handlePx" />
+        <TimeSortSelectBox @handle-px-change="handleTimePx" />
+        <HeatSortSelectBox @handle-px-change="handleHeatPx" />
+        <GradeSortSelectBox @handle-px-change="handleGradePx" />
       </div>
 
     </el-col>
@@ -24,12 +30,24 @@
 import { ref } from 'vue'
 import '@/styles/common.scss'
 import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
+import HeatSortSelectBox from '@/components/base/HeatSortSelectBox/index.vue'
+import GradeSortSelectBox from '@/components/base/GradeSortSelectBox/index.vue'
+
 const span = 12
 
-const handlePx = (val) => {
+const handleTimePx = (val) => {
+  alert(val)
+}
+
+const handleHeatPx = (val) => {
   alert(val)
 }
 
+const handleGradePx = (val) => {
+  alert(val)
+}
+
+
 </script>
 
 <style lang="scss" scoped>

src/styles/components/index.vue

@@ -8,8 +8,8 @@
                 <div class="text-title-1-show">文字样式</div>
                 <TextStyle />
                 <div class="text-title-1-show">通用样式/组件</div>
-                <div style="position: relative; min-height: 700px;">
-                    <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs dev-style-tabs">
+                <div style="position: relative; height: 800px;">
+                    <el-tabs tabPosition="left" style="position: relative; height: 700px;" class="tabs-nav-no-wrap left-float-nav-tabs dev-style-tabs">
                         <el-tab-pane label="通用" lazy>
                             <common-page />
                         </el-tab-pane>
@@ -73,10 +73,9 @@
                         <el-tab-pane label="激活工作框" lazy>
                             <WorkingBox />
                         </el-tab-pane>
-                        <el-tab-pane label="时间排序" lazy>
+                        <el-tab-pane label="自定义排序" lazy>
                             <TimeSortSelectBox />
                         </el-tab-pane>
-
                     </el-tabs>
                 </div>
             </el-space>