Repository: Tencent/tdesign-mobile-vue
Pull request #1327 (2024-04-20 08:21:33)

refactor(indexes): sfc to tsx
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(indexes): `sfc` to `tsx`.

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/8763775673)
<!-- AUTO_PREVIEW_HOOK -->

Patch:
diff --git a/src/indexes/index.ts b/src/indexes/index.ts
index 76523e03..bd5c0ea4 100644
--- a/src/indexes/index.ts
+++ b/src/indexes/index.ts
@@ -1,6 +1,6 @@
 import { withInstall, WithInstallType } from '../shared';
-import LocalIndexes from './indexes.vue';
-import LocalIndexesAnchor from './indexes-anchor.vue';
+import LocalIndexes from './indexes';
+import LocalIndexesAnchor from './indexes-anchor';
 
 import './style';
 
diff --git a/src/indexes/indexes-anchor.tsx b/src/indexes/indexes-anchor.tsx
new file mode 100644
index 00000000..824aa335
--- /dev/null
+++ b/src/indexes/indexes-anchor.tsx
@@ -0,0 +1,30 @@
+import { ComponentInternalInstance, defineComponent, getCurrentInstance, inject } from 'vue';
+import config from '../config';
+import indexesAnchorProps from './indexes-anchor-props';
+import { usePrefixClass } from '../hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-indexes-anchor`;
+
+export default defineComponent({
+  name,
+  props: indexesAnchorProps,
+  setup(props) {
+    const readerTNodeJSX = useTNodeJSX();
+    const indexesAnchorClass = usePrefixClass('indexes-anchor');
+    const instance = getCurrentInstance();
+    const indexesProvide: any = inject('indexesProvide', undefined);
+    const { proxy } = instance as ComponentInternalInstance;
+    indexesProvide.relation(proxy);
+
+    return () => (
+      <div class={indexesAnchorClass.value} data-index={props.index}>
+        <div class={`${indexesAnchorClass.value}__wrapper`}>
+          <div class={`${indexesAnchorClass.value}__slot`}>{readerTNodeJSX('default')}</div>
+          <div class={`${indexesAnchorClass.value}__header`}>{props.index}</div>
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/src/indexes/indexes-anchor.vue b/src/indexes/indexes-anchor.vue
deleted file mode 100644
index 8c0c1f2d..00000000
--- a/src/indexes/indexes-anchor.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div :class="`${name}`" :data-index="index">
-    <div :class="`${name}__wrapper`">
-      <div :class="`${name}__slot`">
-        <slot />
-      </div>
-      <div :class="`${name}__header`">{{ index }}</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { ComponentInternalInstance, defineComponent, getCurrentInstance, inject } from 'vue';
-import config from '../config';
-import indexesAnchorProps from './indexes-anchor-props';
-
-const name = `${config.prefix}-indexes-anchor`;
-
-export default defineComponent({
-  name,
-  props: indexesAnchorProps,
-  setup() {
-    const instance = getCurrentInstance();
-    const indexesProvide: any = inject('indexesProvide', undefined);
-    const { proxy } = instance as ComponentInternalInstance;
-    indexesProvide.relation(proxy);
-    return {
-      name,
-    };
-  },
-});
-</script>
diff --git a/src/indexes/indexes.en-US.md b/src/indexes/indexes.en-US.md
index 4eec154b..f81edd61 100644
--- a/src/indexes/indexes.en-US.md
+++ b/src/indexes/indexes.en-US.md
@@ -19,14 +19,15 @@ name | params | description
 change | `(index: string \| number)` | \-
 select | `(index: string \| number)` | \-
 
+
 ### IndexesAnchor Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 index | String / Number | - | \- | N
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -48,4 +49,4 @@ Name | Default Value | Description
 --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
 --td-indexes-anchor-color | @font-gray-1 | - 
 --td-indexes-anchor-font-size | 14px | - 
---td-indexes-anchor-line-height | 22px | - 
+--td-indexes-anchor-line-height | 22px | -
\ No newline at end of file
diff --git a/src/indexes/indexes.md b/src/indexes/indexes.md
index 7a138781..b6ddab3f 100644
--- a/src/indexes/indexes.md
+++ b/src/indexes/indexes.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Indexes Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 indexList | Array | - | 索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
 sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
@@ -18,14 +19,15 @@ onSelect | Function |  | TS 类型：`(index: string \| number) => void`<br/>点
 change | `(index: string \| number)` | 索引发生变更时触发事件
 select | `(index: string \| number)` | 点击侧边栏时触发事件
 
+
 ### IndexesAnchor Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 index | String / Number | - | 索引字符 | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -47,4 +49,4 @@ index | String / Number | - | 索引字符 | N
 --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
 --td-indexes-anchor-color | @font-gray-1 | - 
 --td-indexes-anchor-font-size | 14px | - 
---td-indexes-anchor-line-height | 22px | - 
+--td-indexes-anchor-line-height | 22px | -
\ No newline at end of file
diff --git a/src/indexes/indexes.vue b/src/indexes/indexes.tsx
similarity index 81%
rename from src/indexes/indexes.vue
rename to src/indexes/indexes.tsx
index 46bbb369..f2a9281a 100644
--- a/src/indexes/indexes.vue
+++ b/src/indexes/indexes.tsx
@@ -1,35 +1,9 @@
-<template>
-  <div ref="indexesRoot" :class="componentName" @scroll="handleRootScroll">
-    <div :class="`${componentName}__sidebar`">
-      <div
-        v-for="item in indexList"
-        :key="item"
-        :class="[
-          `${componentName}__sidebar-item`,
-          activeSidebar === item ? `${componentName}__sidebar-item--active` : '',
-        ]"
-        :data-index="item"
-        @click.prevent="handleSidebarItemClick(item)"
-        @touchmove="handleSidebarTouchmove"
-      >
-        {{ item }}
-        <div v-if="showSidebarTip && activeSidebar === item" :class="`${componentName}__sidebar-tips`">
-          {{ activeSidebar }}
-        </div>
-      </div>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
 import {
   ref,
   reactive,
   defineComponent,
   onMounted,
   watchEffect,
-  toRefs,
   onBeforeUnmount,
   provide,
   computed,
@@ -40,8 +14,8 @@ import throttle from 'lodash/throttle';
 import { preventDefault } from '../shared/dom';
 import config from '../config';
 import IndexesProps from './props';
-
-const { prefix } = config;
+import { usePrefixClass } from '../hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
 
 interface Child extends ComponentInternalInstance {
   [key: string]: any;
@@ -60,13 +34,16 @@ interface GroupTop {
   totalHeight: number;
 }
 
-const componentName = `${prefix}-indexes`;
+const { prefix } = config;
+const name = `${prefix}-indexes`;
 
 export default defineComponent({
-  name: componentName,
+  name,
   props: IndexesProps,
   emits: ['select', 'change'],
   setup(props) {
+    const readerTNodeJSX = useTNodeJSX();
+    const indexesClass = usePrefixClass('indexes');
     let timeOut: number;
     const indexesRoot = ref<HTMLElement>();
     const parentRect = ref();
@@ -106,8 +83,8 @@ export default defineComponent({
         const betwixt = offset < curGroup.height && offset > 0 && scrollTop > stickyTop;
         state.children.forEach((child, index) => {
           const { $el } = child;
-          const wrapperClass = `${componentName}-anchor__wrapper`;
-          const headerClass = `${componentName}-anchor__header`;
+          const wrapperClass = `${indexesClass.value}-anchor__wrapper`;
+          const headerClass = `${indexesClass.value}-anchor__header`;
           const wrapper = $el.querySelector(`.${wrapperClass}`);
           const header = $el.querySelector(`.${headerClass}`);
           if (index === curIndex) {
@@ -189,7 +166,7 @@ export default defineComponent({
       const { touches } = event;
       const { clientX, clientY } = touches[0];
       const target = document.elementFromPoint(clientX, clientY);
-      if (target && target.className === `${componentName}__sidebar-item` && target instanceof HTMLElement) {
+      if (target && target.className === `${indexesClass.value}__sidebar-item` && target instanceof HTMLElement) {
         const { index } = target.dataset;
         const curIndex = /^\d+$/.test(index ?? '') ? Number(index) : index;
         if (curIndex !== undefined && state.activeSidebar !== curIndex) {
@@ -237,15 +214,31 @@ export default defineComponent({
       relation,
     });
 
-    return {
-      ...toRefs(state),
-      componentName,
-      indexList,
-      indexesRoot,
-      handleSidebarItemClick,
-      handleRootScroll,
-      handleSidebarTouchmove,
-    };
+    return () => (
+      <div ref={indexesRoot} class={indexesClass.value} onScroll={handleRootScroll}>
+        <div class={`${indexesClass.value}__sidebar`}>
+          {indexList.value.map((item) => (
+            <div
+              class={[
+                `${indexesClass.value}__sidebar-item`,
+                state.activeSidebar === item ? `${indexesClass.value}__sidebar-item--active` : '',
+              ]}
+              data-index={item}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault();
+                handleSidebarItemClick(item);
+              }}
+              onTouchmove={handleSidebarTouchmove}
+            >
+              {item}
+              {state.showSidebarTip && state.activeSidebar === item && (
+                <div class={`${indexesClass.value}__sidebar-tips`}>{state.activeSidebar}</div>
+              )}
+            </div>
+          ))}
+        </div>
+        {readerTNodeJSX('default')}
+      </div>
+    );
   },
 });
-</script>


Test patch:
diff --git a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
index 99ca4fc7..b4696bb7 100644
--- a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
@@ -15,64 +15,64 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         class="t-indexes__sidebar-item"
         data-index="A"
       >
-        A 
-        <!--v-if-->
+        A
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="B"
       >
-        B 
-        <!--v-if-->
+        B
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="C"
       >
-        C 
-        <!--v-if-->
+        C
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="D"
       >
-        D 
-        <!--v-if-->
+        D
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="E"
       >
-        E 
-        <!--v-if-->
+        E
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="F"
       >
-        F 
-        <!--v-if-->
+        F
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="G"
       >
-        G 
-        <!--v-if-->
+        G
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="J"
       >
-        J 
-        <!--v-if-->
+        J
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="K"
       >
-        K 
-        <!--v-if-->
+        K
+        <!---->
       </div>
       
     </div>
@@ -89,8 +89,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -293,8 +292,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -592,8 +590,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -986,8 +983,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1266,8 +1262,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1356,8 +1351,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1522,8 +1516,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1745,8 +1738,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1987,8 +1979,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -2106,50 +2097,50 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         class="t-indexes__sidebar-item"
         data-index="1"
       >
-        1 
-        <!--v-if-->
+        1
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="3"
       >
-        3 
-        <!--v-if-->
+        3
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="5"
       >
-        5 
-        <!--v-if-->
+        5
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="7"
       >
-        7 
-        <!--v-if-->
+        7
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="8"
       >
-        8 
-        <!--v-if-->
+        8
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="10"
       >
-        10 
-        <!--v-if-->
+        10
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="#"
       >
-        # 
-        <!--v-if-->
+        #
+        <!---->
       </div>
       
     </div>
diff --git a/src/indexes/__test__/__snapshots__/index.test.jsx.snap b/src/indexes/__test__/__snapshots__/index.test.jsx.snap
index 9523fbd0..0b128cb5 100644
--- a/src/indexes/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/index.test.jsx.snap
@@ -12,50 +12,50 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
       class="t-indexes__sidebar-item"
       data-index="1"
     >
-      1 
-      <!--v-if-->
+      1
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="3"
     >
-      3 
-      <!--v-if-->
+      3
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="5"
     >
-      5 
-      <!--v-if-->
+      5
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="7"
     >
-      7 
-      <!--v-if-->
+      7
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="8"
     >
-      8 
-      <!--v-if-->
+      8
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="10"
     >
-      10 
-      <!--v-if-->
+      10
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="#"
     >
-      # 
-      <!--v-if-->
+      #
+      <!---->
     </div>
     
   </div>
@@ -71,8 +71,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -190,8 +189,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -309,8 +307,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -428,8 +425,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -547,8 +543,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -666,8 +661,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -785,8 +779,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"