From 87da2c270c1c4421114ad97077000e856daa8d3b Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Sat, 16 Dec 2023 20:19:41 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintignore                                 |   1 +
 CHANGELOG.md                                  |   1 +
 .../fighting-design/table/components/index.ts |   3 -
 .../table/components/table-colgroup/index.vue |  19 ---
 .../components/table-colgroup/interface.ts    |   1 -
 .../table/components/table-colgroup/props.ts  |  11 --
 .../fighting-design/table/src/interface.ts    |   2 -
 .../fighting-design/table/src/table copy.vue  | 153 ++++++++++++++++++
 packages/fighting-design/table/src/table.vue  |  41 +++--
 packages/fighting-eslint-config/index.js      |   2 +-
 packages/fighting-theme/src/table.scss        |  18 +--
 11 files changed, 194 insertions(+), 58 deletions(-)
 delete mode 100644 packages/fighting-design/table/components/index.ts
 delete mode 100644 packages/fighting-design/table/components/table-colgroup/index.vue
 delete mode 100644 packages/fighting-design/table/components/table-colgroup/interface.ts
 delete mode 100644 packages/fighting-design/table/components/table-colgroup/props.ts
 create mode 100644 packages/fighting-design/table/src/table copy.vue

diff --git a/.eslintignore b/.eslintignore
index 72c6dda4be..1329b3865c 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,3 +10,4 @@ fighting-add-component
 scripts/**
 fighting-eslint-config
 fighting-icon
+start
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2695e25842..591455162c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
 - 修复 `f-table` 组件对于英文字母的文字不换行样式的问题
+- 修复 `f-table` 组件返回类型
 
 ## 0.65.0 (2023-12-12)
 
diff --git a/packages/fighting-design/table/components/index.ts b/packages/fighting-design/table/components/index.ts
deleted file mode 100644
index 463bccd832..0000000000
--- a/packages/fighting-design/table/components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as TableColgroupVue } from './table-colgroup/index.vue'
-
-export * from './table-colgroup/interface'
diff --git a/packages/fighting-design/table/components/table-colgroup/index.vue b/packages/fighting-design/table/components/table-colgroup/index.vue
deleted file mode 100644
index 77c174b2b9..0000000000
--- a/packages/fighting-design/table/components/table-colgroup/index.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-  import { Props } from './props'
-  import { sizeChange } from '../../../_utils'
-
-  defineOptions({ name: 'FTableColgroup' })
-
-  defineProps(Props)
-</script>
-
-<template>
-  <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup -->
-  <colgroup>
-    <col
-      v-for="(column, index) in columns"
-      :key="index"
-      :width="sizeChange(column.width)"
-    />
-  </colgroup>
-</template>
diff --git a/packages/fighting-design/table/components/table-colgroup/interface.ts b/packages/fighting-design/table/components/table-colgroup/interface.ts
deleted file mode 100644
index cfaa189b8f..0000000000
--- a/packages/fighting-design/table/components/table-colgroup/interface.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type { TableColgroupProps } from './props'
diff --git a/packages/fighting-design/table/components/table-colgroup/props.ts b/packages/fighting-design/table/components/table-colgroup/props.ts
deleted file mode 100644
index 5bc0189bb4..0000000000
--- a/packages/fighting-design/table/components/table-colgroup/props.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { setArrayProp } from '../../../_utils'
-import type { ExtractPropTypes } from 'vue'
-import type { TableColumns } from '../../index'
-
-export const Props = {
-  /** 标题配置 */
-  columns: setArrayProp<TableColumns[]>()
-}
-
-/** table-colgroup 组件 props 类型 */
-export type TableColgroupProps = ExtractPropTypes<typeof Props>
diff --git a/packages/fighting-design/table/src/interface.ts b/packages/fighting-design/table/src/interface.ts
index 0b58d00fd1..a5000cefbc 100644
--- a/packages/fighting-design/table/src/interface.ts
+++ b/packages/fighting-design/table/src/interface.ts
@@ -6,7 +6,6 @@ export type { TableProps } from './props'
 export type TableAlign = 'left' | 'center' | 'right'
 
 /** 表格数据类型 */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type TableData = Record<string, any>[]
 
 /**
@@ -15,7 +14,6 @@ export type TableData = Record<string, any>[]
 type Children = string | number | boolean | VNode | null | Children[]
 
 /** 自定义模板函数渲染返回值类型 */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type RenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
 
 /**
diff --git a/packages/fighting-design/table/src/table copy.vue b/packages/fighting-design/table/src/table copy.vue
new file mode 100644
index 0000000000..2c18fbc049
--- /dev/null
+++ b/packages/fighting-design/table/src/table copy.vue	
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+  import { Props } from './props'
+  import { h } from 'vue'
+  import { useList } from '../../_hooks'
+  // import { FEmpty } from '../../empty'
+  import { TableColgroupVue } from '../components'
+  import { isFunction } from '../../_utils'
+  import type { VNode } from 'vue'
+  import type {
+    TableColumns,
+    TableRenderData,
+    TableRenderHeader,
+    TableRender
+  } from './interface'
+
+  defineOptions({ name: 'FTable' })
+
+  const prop = defineProps(Props)
+
+  const { styles, classes } = useList(prop, 'table')
+
+  /**
+   * 处理自定义渲染内容
+   *
+   * @param { Function } render 渲染函数
+   */
+  const columnsSlotData = (
+    render: TableRenderData,
+    row: Record<string, any>,
+    column: TableColumns,
+    index: number
+  ): VNode => {
+    return render(h as TableRender, row, column, index)
+  }
+
+  /**
+   * 处理自定义渲染内容
+   *
+   * @param { Function } render 渲染函数
+   */
+  const columnsSlotHeader = (
+    render: TableRenderHeader,
+    item: TableColumns,
+    index: number
+  ): VNode => {
+    return render(h as TableRender, item, index)
+  }
+
+  /** 样式列表 */
+  const styleList = styles(['zebraColor', 'bgColor', 'headBgColor', 'height'])
+
+  /** 类名列表 */
+  const classList = classes(['border', 'zebra'], 'f-table')
+</script>
+
+<template>
+  <div role="table" :class="classList" :style="styleList">
+    <div class="f-table__container">
+      <!-- 内置数据驱动表格 -->
+      <template v-if="columns || data">
+        <!-- 在限制高度时展示的头部 -->
+        <header v-if="height && showHead" class="f-table__header">
+          <table class="f-table__table">
+            <table-colgroup-vue :columns="columns" />
+
+            <thead :align="align">
+              <tr>
+                <th v-if="num">序号</th>
+                <th v-for="(column, index) in columns" :key="index">
+                  <!-- 如果是一个函数，则调用方法 -->
+                  <template v-if="isFunction(column.title)">
+                    <component :is="columnsSlotHeader(column.title, column, index)" />
+                  </template>
+
+                  <!-- 否则全部当字符串处理 -->
+                  <template v-else>
+                    {{ column.title }}
+                  </template>
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </header>
+
+        <!-- 身体 -->
+        <div class="f-table__body">
+          <!-- 有数据 -->
+          <table class="f-table__table">
+            <table-colgroup-vue :columns="columns" />
+
+            <!-- 在没有限制高度时候展示的表头 -->
+            <thead v-if="!height && showHead" :align="align">
+              <tr>
+                <th v-if="num">序号</th>
+                <th v-for="(column, index) in columns" :key="index">
+                  <!-- 如果是一个函数，则调用方法 -->
+                  <template v-if="isFunction(column.title)">
+                    <component :is="columnsSlotHeader(column.title, column, index)" />
+                  </template>
+
+                  <!-- 否则全部当字符串处理 -->
+                  <template v-else>
+                    {{ column.title }}
+                  </template>
+                </th>
+              </tr>
+            </thead>
+
+            <!-- 主要渲染内容的表体 -->
+            <tbody v-if="data && data.length" :align="align">
+              <tr v-for="(item, m) in data" :key="m">
+                <!-- 序号列表 -->
+                <td v-if="num">{{ m + 1 }}</td>
+
+                <!-- 主内容 -->
+                <td v-for="(column, i) in columns" :key="i">
+                  <!-- 如果有自定义插槽渲染 -->
+                  <template v-if="column.render">
+                    <component :is="columnsSlotData(column.render, item, column, m)" />
+                  </template>
+
+                  <!-- 普通渲染数据 -->
+                  <template v-else>
+                    <template v-if="column.key">
+                      {{ item[column.key] }}
+                    </template>
+                  </template>
+                </td>
+              </tr>
+            </tbody>
+
+            <!-- 没有数据 -->
+            <!-- <tfoot v-else>
+              <slot>
+                <f-empty content="暂无数据" />
+              </slot>
+            </tfoot> -->
+
+            <!-- 自定义也叫 -->
+            <tfoot v-if="$slots.tfoot">
+              <slot name="tfoot" />
+            </tfoot>
+          </table>
+        </div>
+      </template>
+
+      <!-- 原生驱动表格 -->
+      <table v-else>
+        <slot />
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/packages/fighting-design/table/src/table.vue b/packages/fighting-design/table/src/table.vue
index 801773ee76..6db3dcff3f 100644
--- a/packages/fighting-design/table/src/table.vue
+++ b/packages/fighting-design/table/src/table.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
   import { Props } from './props'
-  import { h } from 'vue'
+  import { h, computed } from 'vue'
   import { useList } from '../../_hooks'
   // import { FEmpty } from '../../empty'
-  import { TableColgroupVue } from '../components'
-  import { isFunction } from '../../_utils'
+  import { isFunction, sizeChange } from '../../_utils'
   import type { VNode } from 'vue'
   import type {
     TableColumns,
@@ -51,17 +50,33 @@
 
   /** 类名列表 */
   const classList = classes(['border', 'zebra'], 'f-table')
+
+  /** 是否显示表头 */
+  const isHead = computed((): boolean => {
+    return !!(prop.height && prop.showHead)
+  })
 </script>
 
 <template>
   <div role="table" :class="classList" :style="styleList">
+    <!-- 主要容器 -->
     <div class="f-table__container">
       <!-- 内置数据驱动表格 -->
       <template v-if="columns || data">
         <!-- 在限制高度时展示的头部 -->
-        <header v-if="height && showHead" class="f-table__header">
+        <div v-if="isHead" class="f-table__header">
           <table class="f-table__table">
-            <table-colgroup-vue :columns="columns" />
+            <!--
+              为表格的列定义属性，从而方便对表格列的样式和其他属性进行统一设置
+              https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup
+             -->
+            <colgroup>
+              <col
+                v-for="(column, index) in columns"
+                :key="index"
+                :width="sizeChange(column.width)"
+              />
+            </colgroup>
 
             <thead :align="align">
               <tr>
@@ -80,16 +95,22 @@
               </tr>
             </thead>
           </table>
-        </header>
+        </div>
 
         <!-- 身体 -->
-        <main class="f-table__body">
+        <div class="f-table__body">
           <!-- 有数据 -->
           <table class="f-table__table">
-            <table-colgroup-vue :columns="columns" />
+            <colgroup>
+              <col
+                v-for="(column, index) in columns"
+                :key="index"
+                :width="sizeChange(column.width)"
+              />
+            </colgroup>
 
             <!-- 在没有限制高度时候展示的表头 -->
-            <thead v-if="!height && showHead" :align="align">
+            <thead v-if="!isHead" :align="align">
               <tr>
                 <th v-if="num">序号</th>
                 <th v-for="(column, index) in columns" :key="index">
@@ -141,7 +162,7 @@
               <slot name="tfoot" />
             </tfoot>
           </table>
-        </main>
+        </div>
       </template>
 
       <!-- 原生驱动表格 -->
diff --git a/packages/fighting-eslint-config/index.js b/packages/fighting-eslint-config/index.js
index 0581ead415..d0c814d197 100644
--- a/packages/fighting-eslint-config/index.js
+++ b/packages/fighting-eslint-config/index.js
@@ -267,7 +267,7 @@ module.exports = {
     // 禁止未使用的变量 https://typescript-eslint.io/rules/no-unused-vars
     '@typescript-eslint/no-unused-vars': 'error',
     // 不可以有 any https://typescript-eslint.io/rules/no-explicit-any/
-    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
     // 不可以有 require https://typescript-eslint.io/rules/no-var-requires/
     '@typescript-eslint/no-var-requires': 'error',
     // 带有默认值的函数参数在最后 https://typescript-eslint.io/rules/default-param-last
diff --git a/packages/fighting-theme/src/table.scss b/packages/fighting-theme/src/table.scss
index 854c24682f..e3a4e18b6e 100644
--- a/packages/fighting-theme/src/table.scss
+++ b/packages/fighting-theme/src/table.scss
@@ -1,26 +1,20 @@
 .f-table {
+  display: block;
+  position: relative;
+  width: 100%;
+
   // 主容器
   &__container {
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
     background-color: var(--table-bg-color, #fff);
+    width: 100%;
 
     // 身体
     .f-table__body {
       height: var(--table-height);
       overflow: auto;
-
-      // 滚动条
-      &::-webkit-scrollbar {
-        width: 7px;
-      }
-
-      // 滚动滑块
-      &::-webkit-scrollbar-thumb {
-        background-color: #ddd;
-        border-radius: 6px;
-      }
     }
 
     // table 公共样式
@@ -32,6 +26,7 @@
       text-align: left;
       display: inline-table;
 
+      // 头部
       thead {
         background-color: var(--table-head-bg-color, #f7f7f7);
         font-size: 16px;
@@ -55,6 +50,7 @@
         }
       }
 
+      // 身体
       tbody {
         font-size: 16px;
         color: #4e4e4e;