feat: 新增首页推荐组件及相关功能优化

- 新增首页推荐组件 HomeRecommend，用于展示趋势数据
- 新增推荐相关 API 接口 recommend.ts 及类型定义
- 优化 YlTable 组件，添加类型定义文件，支持 emptyText 和 width 属性
- 修改 Home 页面，添加首页推荐组件的展示
- 优化 Survey 页面代码结构，修复加载逻辑
- 添加响应类型定义，规范 API 返回数据格式

src/components/YlTable/Index.vue

@@ -2,13 +2,7 @@
 import { RowAlign, type ColumnStyle } from 'element-plus';
 
 const data = defineModel<unknown[]>('data', { default: [] });
-const props = defineModel<
+const props = defineModel<TablePropsType[]>('props');
-  {
-    prop: any;
-    label: any;
-    width: any;
-  }[]
->('props');
 
 // 是否只显示单行
 const singleLine = defineModel<boolean>('singleLine', { default: false });
@@ -25,6 +19,8 @@ const headerStyle = defineModel<ColumnStyle<any>>('headerStyle', {
 });
 const rounded = defineModel('rounded', { default: true });
 const stripeColor = defineModel('stripeColor', { default: 'red' });
+// 空数据时的提示文本
+const emptyText = defineModel('emptyText', { default: '暂无数据' });
 
 // (data: { row: any; rowIndex: number; }) => string
 function setStripeColor(rowData: { row: any; rowIndex: number }): string {
@@ -34,16 +30,18 @@ function setStripeColor(rowData: { row: any; rowIndex: number }): string {
 </script>
 
 <template>
-  <div :style="{ borderRadius: rounded ? '10px' : '0', overflow: 'hidden' }">
+  <div :style="{ borderRadius: rounded ? '10px' : '0', overflow: 'hidden' }" style="height: 100%">
     <el-table
       :max-height="tableHeight"
       :header-cell-style="{ background: '#f2f8ee' }"
       :row-class-name="setStripeColor"
       :data="data"
+      :empty-text="emptyText"
       style="width: 100%"
     >
       <el-table-column
         v-for="item in props"
+        :width="item.width"
         :prop="item.prop"
         :label="item.label"
         show-overflow-tooltip

src/components/YlTable/types/table.d.ts

@@ -0,0 +1,6 @@
+type TablePropsType = {
+  prop: string;
+  label: string;
+  width?: string;
+};
+  

src/hooks/request/recommend.ts

@@ -0,0 +1,35 @@
+import request from '@/utils/request';
+import type { HomeRecommendResponse } from './types/response';
+import { ref } from 'vue';
+import type { AxiosResponse } from 'axios';
+
+type RecommendParams = {
+  page: string;
+  per_page: string;
+  sort: string;
+};
+/**
+ * 首页推荐内容
+ * @param params 可选参数
+ * @returns  推荐结果
+ */
+export function recommend(params: Partial<RecommendParams>) {
+  const code = ref();
+  const message = ref();
+  const data = ref<HomeRecommendResponse['data']>();
+
+  request<HomeRecommendResponse>({
+    url: `/console/survey/trend/list`,
+    params
+  }).then((res) => {
+    code.value = res.data.code;
+    message.value = res.data.message;
+    data.value = res.data.data;
+  });
+
+  return {
+    code,
+    message,
+    data
+  };
+}

src/hooks/request/types/recommend.d.ts

@@ -0,0 +1,38 @@
+export interface HomeRecommend {
+  meta: Meta;
+  surveyTrendDataVOS: SurveyTrendDataVO[];
+//   [property: string]: any;
+}
+
+export interface Meta {
+  currentPage: number;
+  from: number;
+  lastPage: number;
+  perPage: number;
+  total: number;
+  [property: string]: any;
+}
+
+export interface SurveyTrendDataVO {
+  /**
+   * 声量增长环比
+   */
+  growthRingRatio: number | number;
+  /**
+   * 主键
+   */
+  id: number;
+  /**
+   * 排名
+   */
+  rank: number;
+  /**
+   * 销量增长环比
+   */
+  salesGrowthRingRatio: number;
+  /**
+   * 趋势名称
+   */
+  trendName: string;
+  [property: string]: any;
+}

src/hooks/request/types/response.d.ts

@@ -0,0 +1,9 @@
+import { HomeRecommend } from "./recommend";
+
+export interface CDMResponse<T>{
+  code: number;
+  data: T;
+  message: string;
+}
+
+type HomeRecommendResponse = CDMResponse<HomeRecommend>;

src/views/Home/Index.vue

@@ -9,6 +9,7 @@ import appBridge from '@/assets/js/appBridge';
 import ImageSlider from './components/ImageSlider/Index.vue';
 import SearchBar from '@/components/Search/Index.vue';
 import Navigation from '@/components/Navigation/Index.vue';
+import HomeRecommend from './components/HomeRecommend/Index.vue';
 import MineTask from '@/views/Home/components/MineTask/Index.vue';
 import router from '@/router';
 
@@ -66,7 +67,8 @@ function handleSearchClick() {
       <!--底部新建问卷-->
       <NewSurvey />
 
-      <mine-task />
+      <mine-task v-if="false" />
+      <home-recommend class="home_recommend" v-else />
 
       <navigation />
     </div>
@@ -90,4 +92,8 @@ function handleSearchClick() {
   overflow: hidden;
   border-radius: theme.$card-radius;
 }
+
+.home_recommend {
+  margin: theme.$gap 0;
+}
 </style>

src/views/Home/components/HomeRecommend/Index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { recommend } from '@/hooks/request/recommend';
+import { ref } from 'vue';
+import YlTable from '@/components/YlTable/Index.vue';
+
+// 外部获取的数据
+const { data } = recommend({});
+
+const props = ref<TablePropsType[]>([
+  {
+    prop: 'rank',
+    label: '排名',
+    width: '55'
+  },
+  {
+    prop: 'trend_name',
+    label: '趋势名称',
+    width: '85'
+  },
+  {
+    prop: 'growth_ring_ratio',
+    label: '声量增长环比',
+    width: '113'
+  },
+  {
+    prop: 'sales_growth_ring_ratio',
+    label: '销量增长环比',
+    width: '113'
+  }
+]);
+</script>
+
+<template>
+  <van-cell class="home_recommend">
+    <template #extra>
+      <div style="width: 88vw">
+        <yl-table :data="data?.surveyTrendDataVOS" :props="props" />
+      </div>
+    </template>
+  </van-cell>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/css/theme' as *;
+
+.home_recommend {
+  border-radius: $card-radius;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/Survey/Index.vue

@@ -46,6 +46,7 @@ const blurs = () => {
   survey.value = [];
   fetchSurveys();
 };
+
 const onLoad = () => {
   // 异步更新数据
   setTimeout(() => {