fix: 规范 TSX 渲染函数写法

apps/web-antdv-next/src/components/ktTable/KtTable.tsx

@@ -630,7 +630,7 @@ export default defineComponent({
     /**
      * 渲染搜索表单区域和表单按钮。
      */
-    function renderSearchArea() {
+    const renderSearchArea = () => {
       const hasSearch = (formOptions.value.schema?.length || 0) > 0;
       const hasFormButtons = formButtons.value.length > 0;
       const hasCollapse =
@@ -677,20 +677,23 @@ export default defineComponent({
           }}
         </KtTableSearch>
       );
-    }
+    };
 
     /**
      * 渲染操作列里的行操作按钮。
      *
      * @param record 当前行数据。
      */
-    function renderActionCell(record: KtTableRecord) {
+    const renderActionCell = (record: KtTableRecord) => {
       const { inlineActions, overflowActions } = splitRowActions(
         rowActions.value,
       );
 
       return (
         <ASpace class="kt-table__row-actions" size={0}>
+          {{
+            default: () => (
+              <>
                 {inlineActions.map((action) => renderRowAction(action, record))}
                 {overflowActions.length > 0 ? (
                   <APopover
@@ -718,9 +721,12 @@ export default defineComponent({
                     }}
                   </APopover>
                 ) : null}
+              </>
+            ),
+          }}
         </ASpace>
       );
-    }
+    };
 
     /**
      * 将行操作按内联展示和弹层展示拆分。
@@ -759,7 +765,7 @@ export default defineComponent({
     /**
      * 渲染表格头部左侧业务按钮和 toolbar 插槽。
      */
-    function renderHeaderButtons() {
+    const renderHeaderButtons = () => {
       const toolbar = slots.toolbar?.(context);
       const buttons = headerButtons.value.map((button) => renderButton(button));
 
@@ -767,16 +773,22 @@ export default defineComponent({
 
       return (
         <ASpace wrap>
+          {{
+            default: () => (
+              <>
                 {buttons}
                 {toolbar}
+              </>
+            ),
+          }}
         </ASpace>
       );
-    }
+    };
 
     /**
      * 渲染表格头部右侧设置按钮组。
      */
-    function renderHeaderSettings() {
+    const renderHeaderSettings = () => {
       if (!props.showTableSetting) return null;
 
       return (
@@ -807,7 +819,7 @@ export default defineComponent({
           visibleColumnKeys={visibleColumnKeys.value}
         />
       );
-    }
+    };
 
     /**
      * 生成表格布局监听签名，只收集会影响容器高度、横向滚动和列宽的轻量信号。

apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx

@@ -249,12 +249,12 @@ export default defineComponent({
      * @param icon 按钮图标节点。
      * @param onClick 点击按钮时执行的回调函数。
      */
-    function renderIconButton(
+    const renderIconButton = (
       key: string,
       title: string,
       icon: VNodeChild,
       onClick: () => void,
-    ) {
+    ) => {
       return (
         <ATooltip title={title}>
           <AButton
@@ -269,12 +269,12 @@ export default defineComponent({
           </AButton>
         </ATooltip>
       );
-    }
+    };
 
     /**
      * 渲染列设置弹层和列设置触发按钮。
      */
-    function renderColumnSetting() {
+    const renderColumnSetting = () => {
       if (!props.setting.column) return null;
 
       return (
@@ -353,19 +353,21 @@ export default defineComponent({
           }}
         </APopover>
       );
-    }
+    };
 
     return () => (
       <ASpace size={4}>
-        {props.setting.reload
+        {{
+          default: () => [
+            props.setting.reload
               ? renderIconButton(
                   'reload',
                   '刷新',
                   <RotateCw class="kt-table__toolbar-icon" />,
                   () => emit('reload'),
                 )
-          : null}
+              : null,
-        {props.setting.showSearch
+            props.setting.showSearch
               ? renderIconButton(
                   'showSearch',
                   props.searchVisible ? '隐藏搜索' : '显示搜索',
@@ -376,17 +378,17 @@ export default defineComponent({
                   ),
                   () => emit('searchVisibleChange', !props.searchVisible),
                 )
-          : null}
+              : null,
-        {props.setting.density
+            props.setting.density
               ? renderIconButton(
                   'density',
                   `密度：${SIZE_LABEL[props.size]}`,
                   <Menu class="kt-table__toolbar-icon" />,
                   cycleSize,
                 )
-          : null}
+              : null,
-        {renderColumnSetting()}
+            renderColumnSetting(),
-        {props.setting.fullscreen
+            props.setting.fullscreen
               ? renderIconButton(
                   'fullscreen',
                   props.fullscreen ? '退出全屏' : '全屏',
@@ -397,7 +399,9 @@ export default defineComponent({
                   ),
                   () => emit('fullscreenChange', !props.fullscreen),
                 )
-          : null}
+              : null,
+          ],
+        }}
       </ASpace>
     );
   },

apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx

@@ -30,7 +30,10 @@ type RenderKtTableSummaryOptions = {
  * @param item 当前统计项配置。
  * @param context KtTable 运行时上下文，用于统计项读取行数据、搜索值和选择状态。
  */
-function renderStatisticValue(item: KtTableStatistic, context: KtTableContext) {
+const renderStatisticValue = (
+  item: KtTableStatistic,
+  context: KtTableContext,
+) => {
   const value =
     item.render?.(context) ??
     (typeof item.value === 'function' ? item.value(context) : item.value);
@@ -43,7 +46,7 @@ function renderStatisticValue(item: KtTableStatistic, context: KtTableContext) {
       <span>{value}</span>
     </span>
   );
-}
+};
 
 /**
  * 渲染 summary 单元格内容。
@@ -52,18 +55,18 @@ function renderStatisticValue(item: KtTableStatistic, context: KtTableContext) {
  * @param statistic 当前列匹配到的统计项配置。
  * @param showDefaultLabel 当前单元格是否需要显示默认“本页统计”文案。
  */
-function renderCellContent(
+const renderCellContent = (
   context: KtTableContext,
   statistic: KtTableStatistic | undefined,
   showDefaultLabel: boolean,
-): VNodeChild {
+): VNodeChild => {
   if (statistic) return renderStatisticValue(statistic, context);
   if (showDefaultLabel) {
     return <span class="kt-table__summary-title">本页统计</span>;
   }
 
   return null;
-}
+};
 
 /**
  * 渲染 KtTable 底部固定 summary 行。
@@ -75,7 +78,7 @@ function renderCellContent(
  * @param options.showSelection 当前表格是否启用选择列。
  * @param options.statistics 当前表格和模块提供的统计项列表。
  */
-export function renderKtTableSummary(options: RenderKtTableSummaryOptions) {
+export const renderKtTableSummary = (options: RenderKtTableSummaryOptions) => {
   const { columns, context, customSummary, showSelection, statistics } =
     options;
   if (statistics.length === 0) return customSummary;
@@ -118,4 +121,4 @@ export function renderKtTableSummary(options: RenderKtTableSummaryOptions) {
       </ATableSummaryRow>
     </ATableSummary>
   );
-}
+};

apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx

@@ -79,7 +79,7 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
   /**
    * 生成 KtTable 默认查询和重置按钮。
    */
-  function getDefaultButtons(): KtTableButton[] {
+  const getDefaultButtons = (): KtTableButton[] => {
     if (!props.showDefaultButtons) return [];
 
     return [
@@ -99,7 +99,7 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
         placement: 'form',
       },
     ];
-  }
+  };
 
   /**
    * 渲染按钮图标，兼容静态图标和函数式图标。
@@ -107,13 +107,13 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
    * @param icon 按钮配置中的图标节点或图标渲染函数。
    * @param targetContext 图标渲染时使用的表格上下文。
    */
-  function renderIcon(
+  const renderIcon = (
     icon: KtTableButton['icon'],
     targetContext: KtTableContext = context,
-  ) {
+  ) => {
     if (!icon) return null;
     return typeof icon === 'function' ? icon(targetContext) : icon;
-  }
+  };
 
   /**
    * 执行头部或搜索区按钮动作。
@@ -195,7 +195,7 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
    *
    * @param button 当前按钮配置。
    */
-  function renderButton(button: KtTableButton) {
+  const renderButton = (button: KtTableButton) => {
     return (
       <AButton
         danger={button.danger}
@@ -209,7 +209,7 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
         {button.label}
       </AButton>
     );
-  }
+  };
 
   /**
    * 渲染单行操作按钮。
@@ -217,7 +217,7 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
    * @param action 当前行操作配置。
    * @param row 当前行数据。
    */
-  function renderRowAction(action: KtTableRowAction, row: KtTableRecord) {
+  const renderRowAction = (action: KtTableRowAction, row: KtTableRecord) => {
     const disabled =
       typeof action.disabled === 'function'
         ? action.disabled(row, context)
@@ -235,7 +235,7 @@ export function useKtTableActions(options: UseKtTableActionsOptions) {
         {action.label}
       </AButton>
     );
-  }
+  };
 
   return {
     formButtons,

apps/web-antdv-next/src/views/qqbot/account/components/AccountConfigPanel.tsx

@@ -282,12 +282,12 @@ export default defineComponent({
       return [...map.values()];
     }
 
-    function renderBindAction(options: {
+    const renderBindAction = (options: {
       bound: boolean;
       name: string;
       onBind: () => Promise<void>;
       onUnbind: () => Promise<void>;
-    }) {
+    }) => {
       if (!options.bound) {
         return (
           <AButton onClick={options.onBind} type="link">
@@ -306,25 +306,25 @@ export default defineComponent({
           </AButton>
         </APopconfirm>
       );
-    }
+    };
 
-    function renderBoundTag(bound: boolean) {
+    const renderBoundTag = (bound: boolean) => {
       return (
         <Tag color={bound ? 'success' : 'default'}>
           {bound ? '已绑定' : '未绑定'}
         </Tag>
       );
-    }
+    };
 
-    function renderEnabledTag(enabled: boolean) {
+    const renderEnabledTag = (enabled: boolean) => {
       return (
         <Tag color={enabled ? 'success' : 'default'}>
           {enabled ? '启用' : '停用'}
         </Tag>
       );
-    }
+    };
 
-    function renderCommandTable() {
+    const renderCommandTable = () => {
       return (
         <ATable
           columns={commandColumns}
@@ -353,12 +353,15 @@ export default defineComponent({
               if (column.key === 'action') {
                 return (
                   <ASpace>
-                    {renderBindAction({
+                    {{
+                      default: () =>
+                        renderBindAction({
                           bound,
                           name: row.name || row.code,
                           onBind: () => handleCommandBind(row),
                           onUnbind: () => handleCommandUnbind(row),
-                    })}
+                        }),
+                    }}
                   </ASpace>
                 );
               }
@@ -367,9 +370,9 @@ export default defineComponent({
           }}
         />
       );
-    }
+    };
 
-    function renderEventTable() {
+    const renderEventTable = () => {
       return (
         <ATable
           columns={eventColumns}
@@ -395,12 +398,15 @@ export default defineComponent({
               if (column.key === 'action') {
                 return (
                   <ASpace>
-                    {renderBindAction({
+                    {{
+                      default: () =>
+                        renderBindAction({
                           bound: row.bound,
                           name: row.name,
                           onBind: () => handleEventBind(row),
                           onUnbind: () => handleEventUnbind(row),
-                    })}
+                        }),
+                    }}
                   </ASpace>
                 );
               }
@@ -409,9 +415,9 @@ export default defineComponent({
           }}
         />
       );
-    }
+    };
 
-    function renderRuleTable() {
+    const renderRuleTable = () => {
       return (
         <ATable
           columns={ruleColumns}
@@ -447,12 +453,15 @@ export default defineComponent({
               if (column.key === 'action') {
                 return (
                   <ASpace>
-                    {renderBindAction({
+                    {{
+                      default: () =>
+                        renderBindAction({
                           bound,
                           name: row.name || row.keyword,
                           onBind: () => handleRuleBind(row),
                           onUnbind: () => handleRuleUnbind(row),
-                    })}
+                        }),
+                    }}
                   </ASpace>
                 );
               }
@@ -461,7 +470,7 @@ export default defineComponent({
           }}
         />
       );
-    }
+    };
 
     return () => (
       <div class="qqbot-account-config-panel">

apps/web-antdv-next/src/views/qqbot/permission/list.tsx

@@ -414,7 +414,7 @@ export default defineComponent({
     /**
      * 渲染 KtTable 表头控制区。
      */
-    function renderHeaderControls() {
+    const renderHeaderControls = () => {
       return (
         <>
           <div class="kt-table__header-control-group">
@@ -436,12 +436,12 @@ export default defineComponent({
           </div>
         </>
       );
-    }
+    };
 
     /**
      * 渲染 KtTable 按钮区里的权限过滤模式。
      */
-    function renderPermissionModeToolbar() {
+    const renderPermissionModeToolbar = () => {
       return (
         <div class="kt-table__header-control-group">
           <span class="kt-table__header-control-muted">过滤模式</span>
@@ -453,7 +453,7 @@ export default defineComponent({
           />
         </div>
       );
-    }
+    };
 
     return () => (
       <Page autoContentHeight>

apps/web-antdv-next/src/views/system/ktTableDemo/list.tsx

@@ -563,20 +563,20 @@ export default defineComponent({
       () => `请求 ${requestTimes.value} 次 / 操作 ${actionTimes.value} 次`,
     );
 
-    function renderStatus(status: DemoStatus) {
+    const renderStatus = (status: DemoStatus) => {
       const option = pickOption(statusOptions, status);
       return <Tag color={option?.color}>{option?.label || status}</Tag>;
-    }
+    };
 
-    function renderLevel(level: DemoLevel) {
+    const renderLevel = (level: DemoLevel) => {
       const option = pickOption(levelOptions, level);
       return <Tag color={option?.color}>{option?.label || level}</Tag>;
-    }
+    };
 
-    function renderChannel(channel: DemoChannel) {
+    const renderChannel = (channel: DemoChannel) => {
       const option = pickOption(channelOptions, channel);
       return <Tag color={option?.color}>{option?.label || channel}</Tag>;
-    }
+    };
 
     return () => (
       <Page autoContentHeight>