From 0ae0bd0fdf7c15e52da5af69535de22a88fc9afb Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Wed, 21 May 2025 14:38:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=8E=A8=E8=8D=90=E7=BB=84=E4=BB=B6=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增首页推荐组件 HomeRecommend，用于展示趋势数据
- 新增推荐相关 API 接口 recommend.ts 及类型定义
- 优化 YlTable 组件，添加类型定义文件，支持 emptyText 和 width 属性
- 修改 Home 页面，添加首页推荐组件的展示
- 优化 Survey 页面代码结构，修复加载逻辑
- 添加响应类型定义，规范 API 返回数据格式
---
 src/components/YlTable/Index.vue              | 128 ++++++------
 src/components/YlTable/types/table.d.ts       |   6 +
 src/hooks/request/recommend.ts                |  35 ++++
 src/hooks/request/types/recommend.d.ts        |  38 ++++
 src/hooks/request/types/response.d.ts         |   9 +
 src/views/Home/Index.vue                      |   8 +-
 .../Home/components/HomeRecommend/Index.vue   |  51 +++++
 src/views/Survey/Index.vue                    | 191 +++++++++---------
 8 files changed, 305 insertions(+), 161 deletions(-)
 create mode 100644 src/components/YlTable/types/table.d.ts
 create mode 100644 src/hooks/request/recommend.ts
 create mode 100644 src/hooks/request/types/recommend.d.ts
 create mode 100644 src/hooks/request/types/response.d.ts
 create mode 100644 src/views/Home/components/HomeRecommend/Index.vue

diff --git a/src/components/YlTable/Index.vue b/src/components/YlTable/Index.vue
index 84549f2..425eef4 100644
--- a/src/components/YlTable/Index.vue
+++ b/src/components/YlTable/Index.vue
@@ -1,65 +1,63 @@
-<script setup lang="ts">
-import { RowAlign, type ColumnStyle } from 'element-plus';
-
-const data = defineModel<unknown[]>('data', { default: [] });
-const props = defineModel<
-  {
-    prop: any;
-    label: any;
-    width: any;
-  }[]
->('props');
-
-// 是否只显示单行
-const singleLine = defineModel<boolean>('singleLine', { default: false });
-const rowStyle = defineModel<ColumnStyle<any>>('rowStyle', {
-  default: {}
-});
-// 显示表格的高度, 默认的高度是 200px
-const tableHeight = defineModel<string | number>('height', { default: '300px' });
-
-const headerStyle = defineModel<ColumnStyle<any>>('headerStyle', {
-  default: {
-    background: 'red'
-  }
-});
-const rounded = defineModel('rounded', { default: true });
-const stripeColor = defineModel('stripeColor', { default: 'red' });
-
-// (data: { row: any; rowIndex: number; }) => string
-function setStripeColor(rowData: { row: any; rowIndex: number }): string {
-  const { rowIndex } = rowData;
-  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
-}
-</script>
-
-<template>
-  <div :style="{ borderRadius: rounded ? '10px' : '0', overflow: 'hidden' }">
-    <el-table
-      :max-height="tableHeight"
-      :header-cell-style="{ background: '#f2f8ee' }"
-      :row-class-name="setStripeColor"
-      :data="data"
-      style="width: 100%"
-    >
-      <el-table-column
-        v-for="item in props"
-        :prop="item.prop"
-        :label="item.label"
-        show-overflow-tooltip
-      />
-    </el-table>
-  </div>
-</template>
-
-<style lang="scss" scoped module="table">
-:deep(.even-row) {
-  background-color: white;
-}
-:deep(.odd-row) {
-  background-color: #fafbfa;
-}
-:deep(.el-table__header-wrapper) {
-  border-radius: 8px 8px 0 0;
-}
-</style>
+<script setup lang="ts">
+import { RowAlign, type ColumnStyle } from 'element-plus';
+
+const data = defineModel<unknown[]>('data', { default: [] });
+const props = defineModel<TablePropsType[]>('props');
+
+// 是否只显示单行
+const singleLine = defineModel<boolean>('singleLine', { default: false });
+const rowStyle = defineModel<ColumnStyle<any>>('rowStyle', {
+  default: {}
+});
+// 显示表格的高度, 默认的高度是 200px
+const tableHeight = defineModel<string | number>('height', { default: '300px' });
+
+const headerStyle = defineModel<ColumnStyle<any>>('headerStyle', {
+  default: {
+    background: 'red'
+  }
+});
+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 {
+  const { rowIndex } = rowData;
+  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
+}
+</script>
+
+<template>
+  <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
+      />
+    </el-table>
+  </div>
+</template>
+
+<style lang="scss" scoped module="table">
+:deep(.even-row) {
+  background-color: white;
+}
+:deep(.odd-row) {
+  background-color: #fafbfa;
+}
+:deep(.el-table__header-wrapper) {
+  border-radius: 8px 8px 0 0;
+}
+</style>
diff --git a/src/components/YlTable/types/table.d.ts b/src/components/YlTable/types/table.d.ts
new file mode 100644
index 0000000..aaa4bfd
--- /dev/null
+++ b/src/components/YlTable/types/table.d.ts
@@ -0,0 +1,6 @@
+type TablePropsType = {
+  prop: string;
+  label: string;
+  width?: string;
+};
+  
\ No newline at end of file
diff --git a/src/hooks/request/recommend.ts b/src/hooks/request/recommend.ts
new file mode 100644
index 0000000..6cf0454
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/request/types/recommend.d.ts b/src/hooks/request/types/recommend.d.ts
new file mode 100644
index 0000000..fd4d330
--- /dev/null
+++ b/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;
+}
diff --git a/src/hooks/request/types/response.d.ts b/src/hooks/request/types/response.d.ts
new file mode 100644
index 0000000..eafb4f4
--- /dev/null
+++ b/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>;
\ No newline at end of file
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index c1491df..364135a 100644
--- a/src/views/Home/Index.vue
+++ b/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>
diff --git a/src/views/Home/components/HomeRecommend/Index.vue b/src/views/Home/components/HomeRecommend/Index.vue
new file mode 100644
index 0000000..7cdb827
--- /dev/null
+++ b/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>
diff --git a/src/views/Survey/Index.vue b/src/views/Survey/Index.vue
index ddef300..f67ffd9 100644
--- a/src/views/Survey/Index.vue
+++ b/src/views/Survey/Index.vue
@@ -1,95 +1,96 @@
-<template>
-  <div class="survey-search">
-    <nav-search v-model:value="searchValue" @search="blurs" />
-    <!-- <nav-search
-      placeholder="请输入关键词"
-      v-model:value="searchValue"
-      @click="() => $router.push({ name: 'search' })"
-    /> -->
-  </div>
-  <div class="new-survey-container">
-    <div style="margin-bottom: 80px">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
-          <survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
-        </div>
-        <empty-container v-else />
-      </van-list>
-    </div>
-    <NewSurvey v-if="survey.length > 0" />
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from 'vue';
-import NavSearch from '@/components/Search/Index.vue';
-import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
-import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
-import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
-import {
-  form,
-  fetchSurveys,
-  loading,
-  finished,
-  survey,
-  searchValue
-} from '@/views/Survey/hooks/useSurveyData';
-
-const blurs = () => {
-  form.value.page = 1;
-  form.value.project_name = searchValue.value;
-  survey.value = [];
-  fetchSurveys();
-};
-const onLoad = () => {
-  // 异步更新数据
-  setTimeout(() => {
-    form.value.page = form.value.page + 1;
-    fetchSurveys();
-  }, 500);
-};
-
-onMounted(() => {
-  // fetchSurveys();
-});
-</script>
-
-<style scoped lang="scss">
-@use '@/assets/css/theme';
-@import '@/assets/css/base';
-@import '@/assets/css/main';
-
-.el-dropdown-menu__item:not(.is-disabled):focus,
-.el-dropdown-menu__item:not(.is-disabled):hover {
-  background-color: #000;
-}
-
-.survey-search {
-  @extend %search-gradient;
-  padding: 10px 10px;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  background-color: theme.$nav-header-color;
-}
-
-.new-survey-container {
-  margin-top: 10px;
-
-  .new-survey_item {
-    margin: 0 10px 10px;
-    padding: 15px;
-    border-radius: 16px;
-    background-color: white;
-  }
-
-  .new-survey_item + .new-survey_item {
-    margin: 0 10px 10px;
-  }
-}
-</style>
+<template>
+  <div class="survey-search">
+    <nav-search v-model:value="searchValue" @search="blurs" />
+    <!-- <nav-search
+      placeholder="请输入关键词"
+      v-model:value="searchValue"
+      @click="() => $router.push({ name: 'search' })"
+    /> -->
+  </div>
+  <div class="new-survey-container">
+    <div style="margin-bottom: 80px">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
+          <survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
+        </div>
+        <empty-container v-else />
+      </van-list>
+    </div>
+    <NewSurvey v-if="survey.length > 0" />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import NavSearch from '@/components/Search/Index.vue';
+import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
+import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
+import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
+import {
+  form,
+  fetchSurveys,
+  loading,
+  finished,
+  survey,
+  searchValue
+} from '@/views/Survey/hooks/useSurveyData';
+
+const blurs = () => {
+  form.value.page = 1;
+  form.value.project_name = searchValue.value;
+  survey.value = [];
+  fetchSurveys();
+};
+
+const onLoad = () => {
+  // 异步更新数据
+  setTimeout(() => {
+    form.value.page = form.value.page + 1;
+    fetchSurveys();
+  }, 500);
+};
+
+onMounted(() => {
+  // fetchSurveys();
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/theme';
+@import '@/assets/css/base';
+@import '@/assets/css/main';
+
+.el-dropdown-menu__item:not(.is-disabled):focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: #000;
+}
+
+.survey-search {
+  @extend %search-gradient;
+  padding: 10px 10px;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background-color: theme.$nav-header-color;
+}
+
+.new-survey-container {
+  margin-top: 10px;
+
+  .new-survey_item {
+    margin: 0 10px 10px;
+    padding: 15px;
+    border-radius: 16px;
+    background-color: white;
+  }
+
+  .new-survey_item + .new-survey_item {
+    margin: 0 10px 10px;
+  }
+}
+</style>