diff --git a/apps/web-antdv-next/src/components/ktTable/KtTable.tsx b/apps/web-antdv-next/src/components/ktTable/KtTable.tsx index 51b4685..1efc542 100644 --- 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({ }} ); - } + }; /** * 渲染操作列里的行操作按钮。 * * @param record 当前行数据。 */ - function renderActionCell(record: KtTableRecord) { + const renderActionCell = (record: KtTableRecord) => { const { inlineActions, overflowActions } = splitRowActions( rowActions.value, ); return ( - {inlineActions.map((action) => renderRowAction(action, record))} - {overflowActions.length > 0 ? ( - - {{ - content: () => ( -
- {overflowActions.map((action) => - renderRowAction(action, record), - )} -
- ), - default: () => ( - ( + <> + {inlineActions.map((action) => renderRowAction(action, record))} + {overflowActions.length > 0 ? ( + - - - ), - }} - - ) : null} + {{ + content: () => ( +
+ {overflowActions.map((action) => + renderRowAction(action, record), + )} +
+ ), + default: () => ( + + + + ), + }} + + ) : null} + + ), + }} ); - } + }; /** * 将行操作按内联展示和弹层展示拆分。 @@ -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 ( - {buttons} - {toolbar} + {{ + default: () => ( + <> + {buttons} + {toolbar} + + ), + }} ); - } + }; /** * 渲染表格头部右侧设置按钮组。 */ - function renderHeaderSettings() { + const renderHeaderSettings = () => { if (!props.showTableSetting) return null; return ( @@ -807,7 +819,7 @@ export default defineComponent({ visibleColumnKeys={visibleColumnKeys.value} /> ); - } + }; /** * 生成表格布局监听签名，只收集会影响容器高度、横向滚动和列宽的轻量信号。 diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx index 217c5b5..a60ef0f 100644 --- 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 ( ); - } + }; /** * 渲染列设置弹层和列设置触发按钮。 */ - function renderColumnSetting() { + const renderColumnSetting = () => { if (!props.setting.column) return null; return ( @@ -353,51 +353,55 @@ export default defineComponent({ }} ); - } + }; return () => ( - {props.setting.reload - ? renderIconButton( - 'reload', - '刷新', - , - () => emit('reload'), - ) - : null} - {props.setting.showSearch - ? renderIconButton( - 'showSearch', - props.searchVisible ? '隐藏搜索' : '显示搜索', - props.searchVisible ? ( - - ) : ( - - ), - () => emit('searchVisibleChange', !props.searchVisible), - ) - : null} - {props.setting.density - ? renderIconButton( - 'density', - `密度：${SIZE_LABEL[props.size]}`, - , - cycleSize, - ) - : null} - {renderColumnSetting()} - {props.setting.fullscreen - ? renderIconButton( - 'fullscreen', - props.fullscreen ? '退出全屏' : '全屏', - props.fullscreen ? ( - - ) : ( - - ), - () => emit('fullscreenChange', !props.fullscreen), - ) - : null} + {{ + default: () => [ + props.setting.reload + ? renderIconButton( + 'reload', + '刷新', + , + () => emit('reload'), + ) + : null, + props.setting.showSearch + ? renderIconButton( + 'showSearch', + props.searchVisible ? '隐藏搜索' : '显示搜索', + props.searchVisible ? ( + + ) : ( + + ), + () => emit('searchVisibleChange', !props.searchVisible), + ) + : null, + props.setting.density + ? renderIconButton( + 'density', + `密度：${SIZE_LABEL[props.size]}`, + , + cycleSize, + ) + : null, + renderColumnSetting(), + props.setting.fullscreen + ? renderIconButton( + 'fullscreen', + props.fullscreen ? '退出全屏' : '全屏', + props.fullscreen ? ( + + ) : ( + + ), + () => emit('fullscreenChange', !props.fullscreen), + ) + : null, + ], + }} ); }, diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx index dace6af..430efc1 100644 --- 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) { {value} ); -} +}; /** * 渲染 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 本页统计; } 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) { ); -} +}; diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx index 85fd42c..f348626 100644 --- 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 ( ); - } + }; /** * 渲染单行操作按钮。 @@ -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} ); - } + }; return { formButtons, diff --git a/apps/web-antdv-next/src/views/qqbot/account/components/AccountConfigPanel.tsx b/apps/web-antdv-next/src/views/qqbot/account/components/AccountConfigPanel.tsx index 8a3a405..f4b8213 100644 --- 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; onUnbind: () => Promise; - }) { + }) => { if (!options.bound) { return ( @@ -306,25 +306,25 @@ export default defineComponent({ ); - } + }; - function renderBoundTag(bound: boolean) { + const renderBoundTag = (bound: boolean) => { return ( {bound ? '已绑定' : '未绑定'} ); - } + }; - function renderEnabledTag(enabled: boolean) { + const renderEnabledTag = (enabled: boolean) => { return ( {enabled ? '启用' : '停用'} ); - } + }; - function renderCommandTable() { + const renderCommandTable = () => { return ( - {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), + }), + }} ); } @@ -367,9 +370,9 @@ export default defineComponent({ }} /> ); - } + }; - function renderEventTable() { + const renderEventTable = () => { return ( - {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), + }), + }} ); } @@ -409,9 +415,9 @@ export default defineComponent({ }} /> ); - } + }; - function renderRuleTable() { + const renderRuleTable = () => { return ( - {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), + }), + }} ); } @@ -461,7 +470,7 @@ export default defineComponent({ }} /> ); - } + }; return () => (