fix: 规范 TSX 渲染函数写法

2026-06-03 07:29:32 +08:00 · 2026-06-03 07:29:32 +08:00 · aec8444121
commit aec8444121
parent c30d7d04a6
7 changed files with 167 additions and 139 deletions
--- a/apps/web-antdv-next/src/components/ktTable/KtTable.tsx
+++ b/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,50 +677,56 @@ 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}>
-          {inlineActions.map((action) => renderRowAction(action, record))}
-          {overflowActions.length > 0 ? (
-            <APopover
-              overlayClassName="kt-table__row-action-popover"
-              placement="bottomRight"
-              trigger="click"
-            >
-              {{
-                content: () => (
-                  <div class="kt-table__row-action-popover-content">
-                    {overflowActions.map((action) =>
-                      renderRowAction(action, record),
-                    )}
-                  </div>
-                ),
-                default: () => (
-                  <AButton
-                    aria-label="更多操作"
-                    class="kt-table__row-action-more"
-                    type="link"
+          {{
+            default: () => (
+              <>
+                {inlineActions.map((action) => renderRowAction(action, record))}
+                {overflowActions.length > 0 ? (
+                  <APopover
+                    overlayClassName="kt-table__row-action-popover"
+                    placement="bottomRight"
+                    trigger="click"
                  >
-                    <EllipsisOutlined class="kt-table__row-action-more-icon" />
-                  </AButton>
-                ),
-              }}
-            </APopover>
-          ) : null}
+                    {{
+                      content: () => (
+                        <div class="kt-table__row-action-popover-content">
+                          {overflowActions.map((action) =>
+                            renderRowAction(action, record),
+                          )}
+                        </div>
+                      ),
+                      default: () => (
+                        <AButton
+                          aria-label="更多操作"
+                          class="kt-table__row-action-more"
+                          type="link"
+                        >
+                          <EllipsisOutlined class="kt-table__row-action-more-icon" />
+                        </AButton>
+                      ),
+                    }}
+                  </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>
-          {buttons}
-          {toolbar}
+          {{
+            default: () => (
+              <>
+                {buttons}
+                {toolbar}
+              </>
+            ),
+          }}
        </ASpace>
      );
-    }
+    };

    /**
     * 渲染表格头部右侧设置按钮组。
     */
-    function renderHeaderSettings() {
+    const renderHeaderSettings = () => {
      if (!props.showTableSetting) return null;

      return (
@ -807,7 +819,7 @@ export default defineComponent({
          visibleColumnKeys={visibleColumnKeys.value}
        />
      );
-    }
+    };

    /**
     * 生成表格布局监听签名，只收集会影响容器高度、横向滚动和列宽的轻量信号。
--- a/apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx
+++ b/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,51 +353,55 @@ export default defineComponent({
          }}
        </APopover>
      );
-    }
+    };

    return () => (
      <ASpace size={4}>
-        {props.setting.reload
-          ? renderIconButton(
-              'reload',
-              '刷新',
-              <RotateCw class="kt-table__toolbar-icon" />,
-              () => emit('reload'),
-            )
-          : null}
-        {props.setting.showSearch
-          ? renderIconButton(
-              'showSearch',
-              props.searchVisible ? '隐藏搜索' : '显示搜索',
-              props.searchVisible ? (
-                <EyeOff class="kt-table__toolbar-icon" />
-              ) : (
-                <Eye class="kt-table__toolbar-icon" />
-              ),
-              () => emit('searchVisibleChange', !props.searchVisible),
-            )
-          : null}
-        {props.setting.density
-          ? renderIconButton(
-              'density',
-              `密度：${SIZE_LABEL[props.size]}`,
-              <Menu class="kt-table__toolbar-icon" />,
-              cycleSize,
-            )
-          : null}
-        {renderColumnSetting()}
-        {props.setting.fullscreen
-          ? renderIconButton(
-              'fullscreen',
-              props.fullscreen ? '退出全屏' : '全屏',
-              props.fullscreen ? (
-                <Minimize2 class="kt-table__toolbar-icon" />
-              ) : (
-                <Fullscreen class="kt-table__toolbar-icon" />
-              ),
-              () => emit('fullscreenChange', !props.fullscreen),
-            )
-          : null}
+        {{
+          default: () => [
+            props.setting.reload
+              ? renderIconButton(
+                  'reload',
+                  '刷新',
+                  <RotateCw class="kt-table__toolbar-icon" />,
+                  () => emit('reload'),
+                )
+              : null,
+            props.setting.showSearch
+              ? renderIconButton(
+                  'showSearch',
+                  props.searchVisible ? '隐藏搜索' : '显示搜索',
+                  props.searchVisible ? (
+                    <EyeOff class="kt-table__toolbar-icon" />
+                  ) : (
+                    <Eye class="kt-table__toolbar-icon" />
+                  ),
+                  () => emit('searchVisibleChange', !props.searchVisible),
+                )
+              : null,
+            props.setting.density
+              ? renderIconButton(
+                  'density',
+                  `密度：${SIZE_LABEL[props.size]}`,
+                  <Menu class="kt-table__toolbar-icon" />,
+                  cycleSize,
+                )
+              : null,
+            renderColumnSetting(),
+            props.setting.fullscreen
+              ? renderIconButton(
+                  'fullscreen',
+                  props.fullscreen ? '退出全屏' : '全屏',
+                  props.fullscreen ? (
+                    <Minimize2 class="kt-table__toolbar-icon" />
+                  ) : (
+                    <Fullscreen class="kt-table__toolbar-icon" />
+                  ),
+                  () => emit('fullscreenChange', !props.fullscreen),
+                )
+              : null,
+          ],
+        }}
      </ASpace>
    );
  },
--- a/apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx
+++ b/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>
  );
-}
+};
--- a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx
+++ b/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,
--- a/apps/web-antdv-next/src/views/qqbot/account/components/AccountConfigPanel.tsx
+++ b/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({
-                      bound,
-                      name: row.name || row.code,
-                      onBind: () => handleCommandBind(row),
-                      onUnbind: () => handleCommandUnbind(row),
-                    })}
+                    {{
+                      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({
-                      bound: row.bound,
-                      name: row.name,
-                      onBind: () => handleEventBind(row),
-                      onUnbind: () => handleEventUnbind(row),
-                    })}
+                    {{
+                      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({
-                      bound,
-                      name: row.name || row.keyword,
-                      onBind: () => handleRuleBind(row),
-                      onUnbind: () => handleRuleUnbind(row),
-                    })}
+                    {{
+                      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">
--- a/apps/web-antdv-next/src/views/qqbot/permission/list.tsx
+++ b/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>
--- a/apps/web-antdv-next/src/views/system/ktTableDemo/list.tsx
+++ b/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>