From 825fe6e6e7bd1cd87b458f0bfd4410573e8c5016 Mon Sep 17 00:00:00 2001
From: Mike <1576271227@qq.com>
Date: Wed, 22 Jan 2025 18:24:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(grid):=20Grid=20=E6=96=B0=E5=A2=9E=20hover?=
 =?UTF-8?q?=20=E5=B1=9E=E6=80=A7=EF=BC=9BGridItem=20=E6=96=B0=E5=A2=9E=20i?=
 =?UTF-8?q?con=20=E5=B1=9E=E6=80=A7=20(#1725)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(grid): grid 新增 hover 属性；GridItem 新增 icon 属性

* refactor(grid): update type
---
 .../__test__/__snapshots__/demo.test.jsx.snap | 198 +++++++-----------
 src/grid/demos/base.vue                       |   2 +-
 src/grid/demos/icon.vue                       |  29 +--
 src/grid/grid-item-props.ts                   |   4 +
 src/grid/grid-item.tsx                        |  21 +-
 src/grid/grid.en-US.md                        |  14 +-
 src/grid/grid.md                              |  12 +-
 src/grid/grid.tsx                             |   3 +-
 src/grid/props.ts                             |   2 +
 src/grid/type.ts                              |   9 +
 10 files changed, 138 insertions(+), 156 deletions(-)

diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
index b918ffb43..2bfbd37f2 100644
--- a/src/grid/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
@@ -2578,26 +2578,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-star"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-star"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -2622,26 +2615,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-download"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-download"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -2666,26 +2652,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-edit-1"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-edit-1"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -5650,26 +5629,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-star"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-star"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
@@ -5694,26 +5666,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-download"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-download"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
@@ -5738,26 +5703,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-edit-1"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-edit-1"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
diff --git a/src/grid/demos/base.vue b/src/grid/demos/base.vue
index 10588dcb2..241d6ac5d 100644
--- a/src/grid/demos/base.vue
+++ b/src/grid/demos/base.vue
@@ -14,7 +14,7 @@
     <t-grid-item text="最多五个字" :image="imgUrl" />
   </t-grid>
 
-  <t-grid :column="3" class="grid-demo">
+  <t-grid :column="3" class="grid-demo" hover>
     <t-grid-item text="标题文字" :image="imgUrl" />
     <t-grid-item text="标题文字" :image="imgUrl" />
     <t-grid-item text="最多六个文字" :image="imgUrl" />
diff --git a/src/grid/demos/icon.vue b/src/grid/demos/icon.vue
index 5d3ca87c4..4c79da61a 100644
--- a/src/grid/demos/icon.vue
+++ b/src/grid/demos/icon.vue
@@ -7,34 +7,21 @@
         </div>
       </template>
     </t-grid-item>
-    <t-grid-item text="收藏">
-      <template #image>
-        <div class="icon-wrapper">
-          <StarIcon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
-    <t-grid-item text="保存">
-      <template #image>
-        <div class="icon-wrapper">
-          <DownloadIcon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
-    <t-grid-item text="编辑">
-      <template #image>
-        <div class="icon-wrapper">
-          <Edit1Icon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
+    <t-grid-item text="收藏" :icon="starIcon" />
+    <t-grid-item text="保存" :icon="downloadIcon" />
+    <t-grid-item text="编辑" :icon="edit1Icon" />
   </t-grid>
 </template>
 
 <script lang="ts" setup>
+import { h } from 'vue';
 import { ShareIcon, StarIcon, DownloadIcon, Edit1Icon } from 'tdesign-icons-vue-next';
 
 const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png';
+
+const starIcon = () => h(StarIcon, { size: '24px' });
+const downloadIcon = () => h(DownloadIcon, { size: '24px' });
+const edit1Icon = () => h(Edit1Icon, { size: '24px' });
 </script>
 <style scoped lang="less">
 .icon-wrapper {
diff --git a/src/grid/grid-item-props.ts b/src/grid/grid-item-props.ts
index 0b61e4409..820d3e25a 100644
--- a/src/grid/grid-item-props.ts
+++ b/src/grid/grid-item-props.ts
@@ -16,6 +16,10 @@ export default {
   description: {
     type: [String, Function] as PropType<TdGridItemProps['description']>,
   },
+  /** 图标名称。 */
+  icon: {
+    type: Function as PropType<TdGridItemProps['icon']>,
+  },
   /** 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件 */
   image: {
     type: [String, Object, Function] as PropType<TdGridItemProps['image']>,
diff --git a/src/grid/grid-item.tsx b/src/grid/grid-item.tsx
index 3c6f5f8e8..895023b24 100644
--- a/src/grid/grid-item.tsx
+++ b/src/grid/grid-item.tsx
@@ -2,6 +2,7 @@ import { defineComponent, computed, inject } from 'vue';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import isFunction from 'lodash/isFunction';
+import { Hover } from '../shared';
 import config from '../config';
 import props from './grid-item-props';
 import { useTNodeJSX } from '../hooks/tnode';
@@ -13,13 +14,14 @@ const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-grid-item`,
+  directives: { Hover },
   components: { TImage, TBadge },
   props,
   setup(props, context) {
     const gridItemClass = usePrefixClass('grid-item');
 
     const renderTNodeJSX = useTNodeJSX();
-    const { column, border, align, gutter } = inject<any>('grid');
+    const { column, border, align, gutter, hover } = inject<any>('grid');
 
     const rootStyle = computed(() => {
       const percent = column.value > 0 ? `${100 / +column.value}%` : 0;
@@ -55,11 +57,22 @@ export default defineComponent({
     ]);
 
     return () => {
-      const renderImage = () =>
-        realImage.value ? <t-image shape="round" {...realImage.value} /> : renderTNodeJSX('image');
+      const renderImage = () => {
+        if (realImage.value) {
+          return <t-image shape="round" {...realImage.value} />;
+        }
+        if (props.icon) {
+          return renderTNodeJSX('icon');
+        }
+        return renderTNodeJSX('image');
+      };
 
       return (
-        <div class={gridItemClasses.value} style={rootStyle.value}>
+        <div
+          class={gridItemClasses.value}
+          style={rootStyle.value}
+          v-hover={{ className: `${gridItemClass.value}--hover`, disabledHover: !hover.value }}
+        >
           <div class={`${gridItemClass.value}__image ${gridItemClass.value}__image--${size.value}`}>
             {props.badge ? <t-badge {...(props.badge as Object)}>{renderImage()}</t-badge> : renderImage()}
           </div>
diff --git a/src/grid/grid.en-US.md b/src/grid/grid.en-US.md
index 6db0d20bb..5311cbd6c 100644
--- a/src/grid/grid.en-US.md
+++ b/src/grid/grid.en-US.md
@@ -1,15 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Grid Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：left/center | N
+align | String | center | options: left/center | N
 border | Boolean | false | \- | N
 column | Number | 4 | \- | N
 gutter | Number | - | \- | N
-theme | String | default | options：default/card | N
+hover | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+
 
 ### GridItem Props
 
@@ -17,12 +20,13 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 badge | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N
 description | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Object / Slot / Function | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-layout | String | vertical | options：vertical/horizontal | N
+layout | String | vertical | options: vertical/horizontal | N
 text | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -47,4 +51,4 @@ Name | Default Value | Description
 --td-grid-item-text-font-size | 14px | - 
 --td-grid-item-text-line-height | 22px | - 
 --td-grid-item-text-padding-top | 8px | - 
---td-grid-item-vertical-padding | 16px 0 12px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | -
\ No newline at end of file
diff --git a/src/grid/grid.md b/src/grid/grid.md
index 933106a9f..73a5c7ca3 100644
--- a/src/grid/grid.md
+++ b/src/grid/grid.md
@@ -1,28 +1,32 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Grid Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 内容对齐方式。可选项：left/center | N
 border | Boolean | false | 是否显示边框 | N
 column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
 gutter | Number | - | 间隔大小 | N
+hover | Boolean | false | 是否开启点击反馈 | N
 theme | String | default | 宫格的风格。可选项：default/card | N
 
+
 ### GridItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 badge | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N
 description | String / Slot / Function | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | 图标名称。。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Object / Slot / Function | - | 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
 text | String / Slot / Function | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -47,4 +51,4 @@ text | String / Slot / Function | - | 文本，可以通过 Props 传入文本
 --td-grid-item-text-font-size | 14px | - 
 --td-grid-item-text-line-height | 22px | - 
 --td-grid-item-text-padding-top | 8px | - 
---td-grid-item-vertical-padding | 16px 0 12px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | -
\ No newline at end of file
diff --git a/src/grid/grid.tsx b/src/grid/grid.tsx
index 4753ec30e..9456b53ed 100644
--- a/src/grid/grid.tsx
+++ b/src/grid/grid.tsx
@@ -11,7 +11,7 @@ export default defineComponent({
   props,
   setup(props, { slots }) {
     const gridClass = usePrefixClass('grid');
-    const { column, gutter, border, align } = toRefs(props);
+    const { column, gutter, border, align, hover } = toRefs(props);
     const rootStyle = computed(() => {
       if (column.value === 0) return [];
       const ans = [
@@ -28,6 +28,7 @@ export default defineComponent({
       border,
       align,
       gutter,
+      hover,
     });
 
     const classes = computed(() => [
diff --git a/src/grid/props.ts b/src/grid/props.ts
index 0d3d740ee..7d24d7eda 100644
--- a/src/grid/props.ts
+++ b/src/grid/props.ts
@@ -28,6 +28,8 @@ export default {
   gutter: {
     type: Number,
   },
+  /** 是否开启点击反馈 */
+  hover: Boolean,
   /** 宫格的风格 */
   theme: {
     type: String as PropType<TdGridProps['theme']>,
diff --git a/src/grid/type.ts b/src/grid/type.ts
index 4158aa4a6..e6e7c4242 100644
--- a/src/grid/type.ts
+++ b/src/grid/type.ts
@@ -27,6 +27,11 @@ export interface TdGridProps {
    * 间隔大小
    */
   gutter?: number;
+  /**
+   * 是否开启点击反馈
+   * @default false
+   */
+  hover?: boolean;
   /**
    * 宫格的风格
    * @default default
@@ -44,6 +49,10 @@ export interface TdGridItemProps {
    * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点
    */
   description?: string | TNode;
+  /**
+   * 图标名称。
+   */
+  icon?: TNode;
   /**
    * 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件
    */