From 623ffb13e37b129c45c1738fffcded48cd1b3c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Tue, 27 May 2025 15:03:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(Table):=20=E5=A2=9E=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=88=97=E8=87=AA=E5=AE=9A=E4=B9=89=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=8E=A8=E8=8D=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 YlTable 组件中添加 RenderSlot 组件，实现自定义渲染功能
- 在 HomeRecommend 组件中使用自定义渲染功能，根据数据动态显示颜色
- 优化 HomeRecommend组件的代码结构
---
 src/components/YlTable/Index.vue              |  29 +++
 src/hooks/chart/usePieChart.ts                |   2 -
 src/views/Home/Index.vue                      | 202 ++++++++---------
 .../Home/components/HomeRecommend/Index.vue   | 210 +++++++++---------
 4 files changed, 240 insertions(+), 203 deletions(-)

diff --git a/src/components/YlTable/Index.vue b/src/components/YlTable/Index.vue
index 4809cd0..f8083d6 100644
--- a/src/components/YlTable/Index.vue
+++ b/src/components/YlTable/Index.vue
@@ -106,6 +106,26 @@ function tooptipFormatter(data: { row: any; column: any; cellValue: any }): VNod
     content: data
   });
 }
+
+// render
+const RenderSlot = {
+  functional: true,
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(props) {
+    return () => {
+      const { row, index, column } = props;
+      return props.render(h, { row, index, column });
+    };
+  }
+};
 </script>
 
 <template>
@@ -136,10 +156,19 @@ function tooptipFormatter(data: { row: any; column: any; cellValue: any }): VNod
         <template #default="scope">
           <slot name="column-default" :scope="scope">
             <div
+              v-if="!item.render"
               class="table-view-html"
               @click.stop="handleImageClick"
               v-html="scope.row[item.prop]"
             ></div>
+
+            <RenderSlot
+              v-else
+              :row="scope.row"
+              :render="item.render"
+              :index="scope.$index"
+              :column="item"
+            ></RenderSlot>
           </slot>
         </template>
       </el-table-column>
diff --git a/src/hooks/chart/usePieChart.ts b/src/hooks/chart/usePieChart.ts
index 9155687..62a8043 100644
--- a/src/hooks/chart/usePieChart.ts
+++ b/src/hooks/chart/usePieChart.ts
@@ -33,8 +33,6 @@ function useSetPieChart(
 
   // 如果 data 变动，重新生成图表w
   watch(series, (value) => {
-    console.log(chartInstance);
-
     const currentOptions = chartInstance.getOption();
 
     // 合并新的 series 数据到现有配置中
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index e9d2366..f1e6f8d 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,101 +1,101 @@
-<script setup>
-import { fetchSurveys } from '@/hooks/request/useSurvey';
-import CreateSurvey from './components/CreateSurvey/Index.vue';
-import NewSurvey from './components/NewSurvey/index.vue';
-import { onMounted, ref } from 'vue';
-import utils from '@/assets/js/common';
-import { getUserInfo } from '@/api/common/index.js';
-import { showFailToast } from 'vant';
-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';
-
-const contentShow = ref(false);
-// 获取我的问卷数据
-const { surveys } = fetchSurveys();
-const keyword = ref('');
-onMounted(async () => {
-  if (appBridge.isInReactNative()) {
-    const appToken = utils.getSessionStorage('xToken');
-    getUserInfo(appToken)
-      .then((res) => {
-        if (res.data) {
-          contentShow.value = true;
-          const token = res.data.data.token;
-          localStorage.setItem('plantToken', token);
-          utils.setSessionStorage('userInfo', res.data.data);
-        } else {
-          contentShow.value = false;
-          showFailToast(
-            error.response.data?.message || error.data?.message || error.message || '服务器错误'
-          );
-        }
-      })
-      .catch((error) => {
-        contentShow.value = false;
-        showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
-      });
-  } else {
-    utils.setSessionStorage('xToken', 'f74ba36d7fc3468480648dedba5672ff');
-    contentShow.value = true;
-  }
-});
-
-function handleSearchClick() {
-  router.push({ name: 'search' });
-}
-</script>
-
-<template>
-  <div v-if="contentShow" class="container-home">
-    <div class="container-body">
-      <!-- 搜索栏 -->
-      <section class="search">
-        <search-bar placeholder="请输入关键词" :value="keyword" @click="handleSearchClick" />
-      </section>
-      <!-- 首页轮播图 -->
-      <section class="slider">
-        <image-slider />
-      </section>
-      <create-survey :createdNewPage="false" />
-      <!-- 最新问卷 -->
-      <!--<last-survey/>-->
-      <!-- 模板市场 -->
-      <!-- <Market/> -->
-      <!--底部新建问卷-->
-      <NewSurvey />
-
-      <!-- 我的问卷 部分， 当问卷不存在时，显示推荐内容 -->
-      <mine-task v-if="surveys?.length > 0" :surveys="surveys" />
-      <home-recommend v-else class="home_recommend" />
-      <navigation />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/assets/css/theme';
-
-.container-body {
-  padding: 0 10px 80px;
-}
-
-.search {
-  margin: 0 -10px 0 -10px;
-  padding: 10px;
-  @extend %search-gradient;
-}
-
-.slider {
-  overflow: hidden;
-  border-radius: theme.$card-radius;
-}
-
-.home_recommend {
-  margin: theme.$gap 0;
-}
-</style>
+<script setup>
+import { fetchSurveys } from '@/hooks/request/useSurvey';
+import CreateSurvey from './components/CreateSurvey/Index.vue';
+import NewSurvey from './components/NewSurvey/index.vue';
+import { onMounted, ref } from 'vue';
+import utils from '@/assets/js/common';
+import { getUserInfo } from '@/api/common/index.js';
+import { showFailToast } from 'vant';
+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';
+
+const contentShow = ref(false);
+// 获取我的问卷数据
+const { surveys } = fetchSurveys();
+const keyword = ref('');
+onMounted(async () => {
+  if (appBridge.isInReactNative()) {
+    const appToken = utils.getSessionStorage('xToken');
+    getUserInfo(appToken)
+      .then((res) => {
+        if (res.data) {
+          contentShow.value = true;
+          const token = res.data.data.token;
+          localStorage.setItem('plantToken', token);
+          utils.setSessionStorage('userInfo', res.data.data);
+        } else {
+          contentShow.value = false;
+          showFailToast(
+            error.response.data?.message || error.data?.message || error.message || '服务器错误'
+          );
+        }
+      })
+      .catch((error) => {
+        contentShow.value = false;
+        showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
+      });
+  } else {
+    utils.setSessionStorage('xToken', 'f74ba36d7fc3468480648dedba5672ff');
+    contentShow.value = true;
+  }
+});
+
+function handleSearchClick() {
+  router.push({ name: 'search' });
+}
+</script>
+
+<template>
+  <div v-if="contentShow" class="container-home">
+    <div class="container-body">
+      <!-- 搜索栏 -->
+      <section class="search">
+        <search-bar placeholder="请输入关键词" :value="keyword" @click="handleSearchClick" />
+      </section>
+      <!-- 首页轮播图 -->
+      <section class="slider">
+        <image-slider />
+      </section>
+      <create-survey :createdNewPage="false" />
+      <!-- 最新问卷 -->
+      <!--<last-survey/>-->
+      <!-- 模板市场 -->
+      <!-- <Market/> -->
+      <!--底部新建问卷-->
+      <NewSurvey />
+
+      <!-- 我的问卷 部分， 当问卷不存在时，显示推荐内容 -->
+      <mine-task v-if="surveys?.length > 0" :surveys="surveys" />
+      <home-recommend v-else class="home_recommend" />
+      <navigation />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/css/theme';
+
+.container-body {
+  padding: 0 10px 80px;
+}
+
+.search {
+  margin: 0 -10px 0 -10px;
+  padding: 10px;
+  @extend %search-gradient;
+}
+
+.slider {
+  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
index 30a5eca..0ac7d0d 100644
--- a/src/views/Home/components/HomeRecommend/Index.vue
+++ b/src/views/Home/components/HomeRecommend/Index.vue
@@ -1,100 +1,110 @@
-<script setup lang="ts">
-import { recommend } from '@/hooks/request/recommend';
-import { ref } from 'vue';
-import YlTable from '@/components/YlTable/Index.vue';
-import CommonLayout from '@/components/Layout/CommonLayout.vue';
-
-// 外部获取的数据
-const { data } = recommend({});
-
-const props = ref<TablePropsType[]>([
-  {
-    prop: 'rank',
-    label: '排名',
-    width: 58
-  },
-  {
-    prop: 'trend_name',
-    label: '趋势名称',
-    width: 100
-  },
-  {
-    prop: 'growth_ring_ratio',
-    label: '声量增长环比',
-    width: 120
-  },
-  {
-    prop: 'sales_growth_ring_ratio',
-    label: '销量增长环比',
-    width: 120
-  }
-]);
-</script>
-
-<template>
-  <van-cell class="home_recommend">
-    <template #extra>
-      <div style="width: 90vw">
-        <common-layout title="123">
-          <template #title>
-            <h3 class="recommend-layout-title">内容推荐</h3>
-          </template>
-
-          <span class="recommend-title">{{ data?.title }}</span>
-          <yl-table
-            style="margin-top: 10px"
-            :header-style="{ background: '#E8F9F4' }"
-            :data="data?.surveyTrendDataVOS"
-            :props="props"
-          />
-          <!-- 剧中展示提示语 -->
-          <div class="more">
-            <span>- 最新数据及更多创新趋势请到YIP探索 - </span>
-          </div>
-        </common-layout>
-      </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;
-
-  .recommend-layout-title {
-    font-family:
-      PingFangSC,
-      PingFang SC;
-    font-weight: 800;
-    font-size: 15px;
-    color: #000000;
-    line-height: 20px;
-    text-align: left;
-    font-style: normal;
-  }
-
-  .recommend-title {
-    color: #000000;
-    font-family:
-      PingFangSC,
-      PingFang SC;
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 15px;
-    text-align: left;
-    font-style: normal;
-  }
-
-  .more {
-    margin: 5px;
-    color: #919191;
-    font-weight: 400;
-    font-size: 13px;
-    text-align: center;
-  }
-}
-</style>
+<script setup lang="ts">
+import { recommend } from '@/hooks/request/recommend';
+import { ref } from 'vue';
+import YlTable from '@/components/YlTable/Index.vue';
+import CommonLayout from '@/components/Layout/CommonLayout.vue';
+
+// 外部获取的数据
+const { data } = recommend({});
+const props = ref<TablePropsType[]>([
+  {
+    prop: 'rank',
+    label: '排名',
+    width: 58
+  },
+  {
+    prop: 'trend_name',
+    label: '趋势名称',
+    width: 100
+  },
+  {
+    prop: 'growth_ring_ratio',
+    label: '声量增长环比',
+    width: 120
+  },
+  {
+    prop: 'sales_growth_ring_ratio',
+    label: '销量增长环比',
+    width: 120,
+    render: (h, p) => {
+      return h(
+        'div',
+        {
+          style: {
+            color: p.row.sales_growth_ring_ratio < 0 ? 'red' : 'green'
+          }
+        },
+        p.row.sales_growth_ring_ratio
+      );
+    }
+  }
+]);
+</script>
+
+<template>
+  <van-cell class="home_recommend">
+    <template #extra>
+      <div style="width: 90vw">
+        <common-layout title="123">
+          <template #title>
+            <h3 class="recommend-layout-title">内容推荐</h3>
+          </template>
+
+          <span class="recommend-title">{{ data?.title }}</span>
+          <yl-table
+            style="margin-top: 10px"
+            :header-style="{ background: '#E8F9F4' }"
+            :data="data?.surveyTrendDataVOS"
+            :props="props"
+          />
+          <!-- 剧中展示提示语 -->
+          <div class="more">
+            <span>- 最新数据及更多创新趋势请到YIP探索 - </span>
+          </div>
+        </common-layout>
+      </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;
+
+  .recommend-layout-title {
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-weight: 800;
+    font-size: 15px;
+    color: #000000;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .recommend-title {
+    color: #000000;
+    font-family:
+      PingFangSC,
+      PingFang SC;
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 15px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .more {
+    margin: 5px;
+    color: #919191;
+    font-weight: 400;
+    font-size: 13px;
+    text-align: center;
+  }
+}
+</style>