feat: 新增组件

src/renderer/views/rate/components/RateContentSection/index.vue

@@ -1,28 +1,45 @@
 <template>
-    <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[20px]">
-        <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" @update:pageSize="updatePageSize" @update:currentPage="updatePageIndex" />
+    <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[16px]">
+        <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tab-pane :label="`${item.label}(${item.total})`" :name="item.name" v-for="item in tabs"
+                :key="item.label" />
+        </el-tabs>
+
+        <RateFilterSection />
+
+        <!-- 分页 -->
+        <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" />
     </div>
 </template>
 
 <script setup lang="ts" name="RateContentSection">
 import { ref } from 'vue'
 import Pagination from '@/components/Pagination/index.vue'
+import RateFilterSection from '../RateFilterSection/index.vue'
 
+const activeName = ref('all')
+const tabs = ref([
+    {
+        label: '全部评价',
+        name: 'all',
+        total: 200,
+    },
+    {
+        label: '待回复',
+        name: 'second',
+        total: 100,
+    },
+    {
+        label: '差评',
+        name: 'third',
+        total: 50,
+    }
+])
 const total = ref(200)
 const queryParams = ref({
-  pageIndex: 1,
-  pageSize: 10,
+    pageIndex: 1,
+    pageSize: 10,
 })
-
-const updatePageSize = (val: string) => {
-  console.log("🚀 ~ updatePageSize ~ val:", val)
-  queryParams.value.pageSize = Number(val)
-}
-
-const updatePageIndex = (val: number) => {
-  console.log("🚀 ~ updatePageIndex ~ val:", val)
-  queryParams.value.pageIndex = val
-}
 </script>
 
 <style></style>

src/renderer/views/rate/components/RateFilterSection/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex items-center gap-[12px]">
+    <el-form ref="queryRef" :inline="true" :model="queryParams" @keyup.enter="handleQuery">
+      <el-form-item prop="dateRange">
+        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+          start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px;" />
+      </el-form-item>
+      <el-form-item prop="channel">
+        <el-select v-model="queryParams.channel" placeholder="请选择渠道" style="width: 240px;">
+          <el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">搜索</el-button>
+        <el-button @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="RateFilterSection">
+import { ref, getCurrentInstance } from 'vue'
+
+const { proxy }: any = getCurrentInstance()
+const queryParams = ref({
+  pageIndex: 1,
+  pageSize: 10,
+  channel: '',
+  startDate: '',
+  endDate: '',
+})
+const dateRange = ref([])
+const channels = [
+  {
+    label: '全部',
+    value: 'all',
+  },
+  {
+    label: '携程',
+    value: 'ctrip',
+  },
+  {
+    label: '飞猪',
+    value: 'flyingpig',
+  },
+  {
+    label: '抖音',
+    value: 'douyin',
+  },
+]
+
+const loading = ref(false)
+const total = ref(0)
+const queryRef = ref()
+
+/** 查询评论列表 */
+function getList() {
+  loading.value = true
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageIndex = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  queryRef.value.resetFields()
+  handleQuery()
+}
+</script>

src/renderer/views/rate/components/RatePanelSection/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-5 gap-[15px] mb-[20px]">
+  <div class="grid grid-cols-5 gap-[15px] mb-[20px] select-none">
     <div class="bg-[#F5F7FA] box-border flex flex-col p-[16px] rounded-[12px]" v-for="item in channels" :key="item.id">
       <div class="flex items-center mb-[8px]">
         <img :src="item.icon" class="w-[24px] h-[24px] mr-[8px]">
@@ -11,13 +11,14 @@
         {{ item.total }}条
       </div>
       <div class="flex items-center">
-        <RiStarFill :color="i <= item.score ? '#FA7319' : '#CACFD8'" class="w-[20px] h-[20px] mr-[2px]" v-for="i in 5" :key="i" />
+        <RiStarFill :color="i <= item.score ? '#FA7319' : '#CACFD8'" class="w-[20px] h-[20px] mr-[2px]" v-for="i in 5"
+          :key="i" />
         <span class="text-[14px] text-[#525866] leading-[20px] pl-[2px]">
           {{ item.score }}
         </span>
       </div>
     </div>
-  </div>  
+  </div>
 </template>
 
 <script setup lang="ts" name="RatePanelSection">