diff --git a/apps/web-antdv-next/package.json b/apps/web-antdv-next/package.json index 3848873..22cc3bb 100644 --- a/apps/web-antdv-next/package.json +++ b/apps/web-antdv-next/package.json @@ -26,6 +26,7 @@ "#/*": "./src/*" }, "dependencies": { + "@antdv-next/icons": "catalog:", "@tanstack/vue-query": "catalog:", "@vben-core/menu-ui": "workspace:*", "@vben-core/shadcn-ui": "workspace:*", diff --git a/apps/web-antdv-next/src/api/blog/wordpress.ts b/apps/web-antdv-next/src/api/blog/wordpress.ts index bb6a4d2..36c3433 100644 --- a/apps/web-antdv-next/src/api/blog/wordpress.ts +++ b/apps/web-antdv-next/src/api/blog/wordpress.ts @@ -40,6 +40,15 @@ export namespace WordpressBlogApi { title: string; } + export interface ArticleQuery extends Recordable { + categories?: number[] | string; + pageNo?: number; + pageSize?: number; + search?: string; + status?: string; + tags?: number[] | string; + } + export interface Term { count?: number; description?: string; @@ -66,7 +75,7 @@ export namespace WordpressBlogApi { } } -export function getArticleList(params: Recordable) { +export function getArticleList(params: WordpressBlogApi.ArticleQuery) { return requestClient.get< WordpressBlogApi.PageResult >('/wordpress/article/list', { params }); diff --git a/apps/web-antdv-next/src/api/core/menu.ts b/apps/web-antdv-next/src/api/core/menu.ts index 814b53b..5a68c88 100644 --- a/apps/web-antdv-next/src/api/core/menu.ts +++ b/apps/web-antdv-next/src/api/core/menu.ts @@ -21,6 +21,10 @@ const SUPPORTED_ADMIN_MENU_NAMES = new Set([ 'SystemDeptCreate', 'SystemDeptDelete', 'SystemDeptEdit', + 'SystemKtTableDemo', + 'SystemKtTableDemoCreate', + 'SystemKtTableDemoDelete', + 'SystemKtTableDemoEdit', 'SystemMenu', 'SystemMenuCreate', 'SystemMenuDelete', @@ -61,6 +65,6 @@ export async function getAllMenusApi() { const menus = await requestClient.get('/menu/all'); - // 只暴露当前后端真实接口已经支撑的后台菜单，模板演示入口等后续补接口后再放开。 + // 只暴露当前前端页面和后端接口已经支撑的后台菜单。 return filterSupportedAdminMenus(menus); } diff --git a/apps/web-antdv-next/src/app.tsx b/apps/web-antdv-next/src/app.tsx index 2541395..6f284f7 100644 --- a/apps/web-antdv-next/src/app.tsx +++ b/apps/web-antdv-next/src/app.tsx @@ -12,7 +12,7 @@ export default defineComponent({ name: 'App', setup() { const { isDark } = usePreferences(); - const { tokens } = useAntdDesignTokens(); + const { components, tokens } = useAntdDesignTokens(); const tokenTheme = computed(() => { const algorithm = isDark.value @@ -25,6 +25,7 @@ export default defineComponent({ return { algorithm, + components, token: tokens, }; }); diff --git a/apps/web-antdv-next/src/components/ktTable/KtTable.tsx b/apps/web-antdv-next/src/components/ktTable/KtTable.tsx new file mode 100644 index 0000000..146dcca --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/KtTable.tsx @@ -0,0 +1,672 @@ +import type { VNodeChild } from 'vue'; + +import type { + KtTableContext, + KtTableProps, + KtTableRecord, + KtTableRegisterApi, + KtTableRowAction, + KtTableSize, +} from './types'; + +import { + computed, + defineComponent, + onMounted, + reactive, + ref, + watch, +} from 'vue'; + +import { ChevronDown } from '@vben/icons'; + +import { EllipsisOutlined } from '@antdv-next/icons'; +import { Button, Popover, Space, Table } from 'antdv-next'; + +import KtTableFooter from './components/KtTableFooter'; +import KtTableHeader from './components/KtTableHeader'; +import KtTableResizableTitle from './components/KtTableResizableTitle'; +import KtTableSearch from './components/KtTableSearch'; +import KtTableSettings from './components/KtTableSettings'; +import { renderKtTableSummary } from './components/KtTableSummary'; +import { + KT_TABLE_ACTION_COLUMN_KEY, + KT_TABLE_INDEX_COLUMN_KEY, + KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT, + KT_TABLE_ROW_ACTION_VISIBLE_COUNT, +} from './config/constants'; +import { DEFAULT_TABLE_SETTING, ktTableProps } from './config/ktTableProps'; +import { useKtTableActions } from './hooks/useKtTableActions'; +import { useKtTableColumns } from './hooks/useKtTableColumns'; +import { useKtTableForm } from './hooks/useKtTableForm'; +import { useKtTableRuntimeHooks } from './hooks/useKtTableHooks'; +import { useKtTableLayout } from './hooks/useKtTableLayout'; +import { useKtTablePermission } from './hooks/useKtTablePermission'; +import { useKtTableResolvedProps } from './hooks/useKtTableResolvedProps'; +import { useKtTableSelection } from './hooks/useKtTableSelection'; +import { normalizePageResult } from './utils/index'; + +import './style.scss'; + +const AButton = Button as any; +const APopover = Popover as any; +const ASpace = Space as any; +const ATable = Table as any; + +const tableComponents = { + header: { + cell: KtTableResizableTitle, + }, +}; + +type SortState = { + field?: string; + order?: string; +}; + +type LoadOptions = { + validateForm?: boolean; +}; + +export default defineComponent({ + name: 'KtTable', + props: ktTableProps, + emits: ['register'], + /** + * 初始化 KtTable 主组件，组装表单、按钮、列、分页、选择和注册式 API。 + * + * @param rawProps 组件显式传入的 props，后续会和 register 配置合并。 + * @param emit Vue setup context。 + * @param emit.emit Vue 事件发送器，用于向业务侧暴露 register API。 + * @param emit.expose Vue 暴露实例方法的函数，用于模板 ref 直接访问表格 API。 + * @param emit.slots 业务侧传入的 title、toolbar、bodyCell、summary、footer 等插槽。 + */ + setup(rawProps, { emit, expose, slots }) { + const { props, setProps } = useKtTableResolvedProps( + rawProps as KtTableProps, + ); + + const loading = ref(false); + const rows = ref([]); + const sortState = reactive({}); + const pagination = reactive({ + current: 1, + pageSize: props.pageSize, + total: 0, + }); + const fullscreen = ref(false); + const searchCollapsed = ref(false); + const searchVisible = ref(true); + const tableSize = ref(props.size); + const mounted = ref(false); + const autoLoaded = ref(false); + + const { + formApi, + formGrid, + formOptions, + getSearchValues, + resetForm, + SearchForm, + setSearchValues, + } = useKtTableForm(props); + const { registerHook, runHook, unregisterHook } = + useKtTableRuntimeHooks(props); + const { clearSelection, rowSelection, selectedRowKeys, selectedRows } = + useKtTableSelection(props); + + const api = computed( + () => + props.api || props.modules.find((module) => !!module.api)?.api || null, + ); + const tableSetting = computed(() => ({ + ...DEFAULT_TABLE_SETTING, + ...props.tableSettings, + })); + const statistics = computed(() => [ + ...props.statistics, + ...props.modules.flatMap((module) => module.statistics || []), + ]); + const hasSummary = computed( + () => statistics.value.length > 0 || !!slots.summary, + ); + const { + handleSearchTransitionEnd, + handleSearchTransitionStart, + scheduleTableLayout, + tableBodyRef, + tableScrollY, + } = useKtTableLayout({ hasSummary }); + + const context: KtTableContext = { + formApi, + getRows: () => rows.value, + getSearchValues, + registerHook, + reload, + reset, + search, + selectedRowKeys: () => selectedRowKeys.value, + selectedRows: () => selectedRows.value, + setSearchValues, + unregisterHook, + }; + const registerApi: KtTableRegisterApi = { + ...context, + getProps: () => ({ ...props }), + setProps, + }; + + emit('register', registerApi); + + const permissions = useKtTablePermission(context); + const { + formButtons, + headerButtons, + renderButton, + renderRowAction, + rowActions, + } = useKtTableActions({ + context, + permissions, + props, + reload, + reset, + runHook, + search, + }); + const { + columnOrderKeys, + columns, + reorderColumns, + resetColumns, + sourceColumns, + tableScrollX, + visibleColumnKeys, + } = useKtTableColumns({ + props, + rowActions, + scheduleTableLayout, + }); + + watch( + () => props.size, + (size) => { + tableSize.value = size; + }, + { + immediate: true, + }, + ); + watch( + () => props.pageSize, + (pageSize) => { + pagination.pageSize = pageSize; + }, + { + immediate: true, + }, + ); + watch( + () => props.dataSource, + (dataSource) => { + if (!api.value?.list && Array.isArray(dataSource)) { + rows.value = dataSource; + pagination.total = dataSource.length; + } + }, + { + immediate: true, + }, + ); + watch( + [searchCollapsed, formOptions], + ([collapsed]) => { + formApi.setState({ collapsed, showCollapseButton: true }); + }, + { + immediate: true, + }, + ); + + /** + * 根据当前分页状态和当前页行下标计算序号列展示值。 + * + * @param index Antdv Table 当前页内的行下标，从 0 开始。 + */ + function resolveRowIndex(index: number) { + if (!props.showPagination) return index + 1; + + return (pagination.current - 1) * pagination.pageSize + index + 1; + } + + /** + * 从 Antdv bodyCell 参数中解析当前行序号，兼容 slot 未透出 index 的情况。 + * + * @param record 当前行数据。 + * @param index Antdv Table 当前页内的行下标；部分版本可能不传。 + */ + function resolveRecordIndex(record: KtTableRecord, index?: number) { + const rowIndex = + typeof index === 'number' ? index : rows.value.indexOf(record); + + return resolveRowIndex(Math.max(rowIndex, 0)); + } + + /** + * 读取查询参数，并按需触发表单校验。 + * + * @param options 加载参数选项，控制是否在读取参数前校验表单。 + */ + async function getFetchParams(options: LoadOptions = {}) { + if (options.validateForm) { + const { valid } = await formApi.validate(); + if (!valid) return null; + } + + return { + ...(await getSearchValues()), + pageNo: props.showPagination ? pagination.current : undefined, + pageSize: props.showPagination ? pagination.pageSize : undefined, + sortField: sortState.field, + sortOrder: sortState.order, + }; + } + + /** + * 加载表格数据，兼容接口数据源和静态 dataSource。 + * + * @param options 加载参数选项，透传给查询参数构建逻辑。 + */ + async function loadData(options: LoadOptions = {}) { + if (!api.value?.list) { + const list = props.dataSource || []; + rows.value = list; + pagination.total = list.length; + return; + } + + const rawParams = await getFetchParams(options); + if (!rawParams) return; + + const params = + ((await props.beforeFetch?.(rawParams, context)) as KtTableRecord) || + rawParams; + + loading.value = true; + + try { + await runHook('onBeforeFetch', params, context); + const result = await api.value.list(params, context); + const afterResult = + (await props.afterFetch?.(result, context)) || result; + const normalized = normalizePageResult(afterResult); + rows.value = normalized.list; + pagination.total = normalized.total; + clearSelection(); + await runHook('onAfterFetch', afterResult, context); + } catch (error) { + await runHook('onFetchError', error, context); + throw error; + } finally { + loading.value = false; + } + } + + /** + * 执行首次自动加载，register 模式下会等待 api 准备完成。 + */ + async function autoLoadData() { + if (!props.immediate || autoLoaded.value || !api.value?.list) return; + + // register 模式下 api 可能晚于 mounted 合并，首次自动加载要等 api 真正可用。 + autoLoaded.value = true; + await loadData(); + } + + /** + * 执行查询操作，重置到第一页并要求表单校验通过。 + */ + async function search() { + pagination.current = 1; + await loadData({ validateForm: true }); + } + + /** + * 重置查询表单并重新加载第一页数据。 + */ + async function reset() { + await resetForm(); + pagination.current = 1; + await loadData(); + } + + /** + * 按当前分页、排序和搜索条件重新加载数据。 + */ + async function reload() { + await loadData(); + } + + /** + * 从 Antdv Table 排序参数中读取当前排序字段和排序方向。 + * + * @param sorter Antdv Table 传入的排序对象或多排序对象数组。 + */ + function readSorter(sorter: KtTableRecord | KtTableRecord[]) { + const currentSorter = Array.isArray(sorter) ? sorter[0] : sorter; + + sortState.field = currentSorter?.field || currentSorter?.columnKey; + sortState.order = currentSorter?.order; + } + + /** + * 响应 Antdv Table 的排序/过滤/分页变化。 + * + * @param _tablePagination Antdv Table 内部分页参数，KtTable 使用自定义分页所以当前不消费。 + * @param _filters Antdv Table 过滤参数，当前预留给未来列过滤扩展。 + * @param sorter Antdv Table 排序参数，用于更新 KtTable 排序状态。 + */ + function handleTableChange( + _tablePagination: KtTableRecord, + _filters: KtTableRecord, + sorter: KtTableRecord | KtTableRecord[], + ) { + pagination.current = 1; + readSorter(sorter); + loadData(); + } + + /** + * 响应底部分页变化并重新加载数据。 + * + * @param pageInfo 分页组件传回的页码和每页条数。 + */ + function handlePageChange(pageInfo: KtTableRecord) { + pagination.current = pageInfo.current || 1; + pagination.pageSize = pageInfo.pageSize || props.pageSize; + loadData(); + } + + /** + * 渲染搜索表单区域和表单按钮。 + */ + function renderSearchArea() { + const hasSearch = (formOptions.value.schema?.length || 0) > 0; + const hasFormButtons = formButtons.value.length > 0; + const hasCollapse = + hasSearch && (formOptions.value.schema?.length || 0) > 4; + const visible = hasSearch && searchVisible.value; + + if (!visible) return null; + + return ( + + {{ + actions: () => + hasFormButtons || hasCollapse ? ( +
+ {formButtons.value.map((button) => renderButton(button))} + {hasCollapse ? ( + { + searchCollapsed.value = !searchCollapsed.value; + }} + type="link" + > + + {searchCollapsed.value ? '展开' : '收起'} + + ) : null} +
+ ) : null, + form: () => , + }} + + ); + } + + /** + * 渲染操作列里的行操作按钮。 + * + * @param record 当前行数据。 + */ + function 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: () => ( + + + + ), + }} + + ) : null} + + ); + } + + /** + * 将行操作按内联展示和弹层展示拆分。 + * + * @param actions 当前行可见操作按钮列表。 + */ + function splitRowActions(actions: KtTableRowAction[]) { + if (actions.length <= KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT) { + return { + inlineActions: actions, + overflowActions: [], + }; + } + + return { + inlineActions: actions.slice(0, KT_TABLE_ROW_ACTION_VISIBLE_COUNT), + overflowActions: actions.slice(KT_TABLE_ROW_ACTION_VISIBLE_COUNT), + }; + } + + /** + * 渲染表格头部左侧业务按钮和 toolbar 插槽。 + */ + function renderHeaderButtons() { + const toolbar = slots.toolbar?.(context); + const buttons = headerButtons.value.map((button) => renderButton(button)); + + if (!toolbar && buttons.length === 0) return null; + + return ( + + {buttons} + {toolbar} + + ); + } + + /** + * 渲染表格头部右侧设置按钮组。 + */ + function renderHeaderSettings() { + if (!props.showTableSetting) return null; + + return ( + { + reorderColumns(keys); + }} + onFullscreenChange={(value: boolean) => { + fullscreen.value = value; + }} + onReload={reload} + onResetColumns={resetColumns} + onSearchVisibleChange={(value: boolean) => { + searchVisible.value = value; + }} + onSizeChange={(value: KtTableSize) => { + tableSize.value = value; + }} + onVisibleColumnKeysChange={(keys: string[]) => { + visibleColumnKeys.value = keys; + }} + searchVisible={searchVisible.value} + setting={tableSetting.value} + size={tableSize.value} + visibleColumnKeys={visibleColumnKeys.value} + /> + ); + } + + expose(registerApi); + + onMounted(() => { + mounted.value = true; + autoLoadData(); + }); + + watch(api, () => { + if (mounted.value) { + autoLoadData(); + } + }); + + watch( + [columns, rows, searchVisible, fullscreen, tableSize], + () => { + scheduleTableLayout(); + }, + { + deep: true, + }, + ); + + return () => ( +
+
+ {renderSearchArea()} + +
+ {props.showHeader ? ( + + {{ + settings: renderHeaderSettings, + title: () => slots.title?.(), + toolbar: renderHeaderButtons, + }} + + ) : null} + +
+ { + if (column.key === KT_TABLE_INDEX_COLUMN_KEY) { + return resolveRecordIndex(record, index); + } + + if (column.key === KT_TABLE_ACTION_COLUMN_KEY) { + return renderActionCell(record); + } + + return slots.bodyCell?.({ column, record }); + }, + summary: (): VNodeChild => + hasSummary.value + ? renderKtTableSummary({ + columns: columns.value, + context, + customSummary: slots.summary?.({ + columns: columns.value, + context, + rows: rows.value, + }), + showSelection: props.showSelection, + statistics: statistics.value, + }) + : null, + }} + /> +
+ + {props.showFooter ? ( + + {{ + default: () => + slots.footer?.({ + context, + selectedRowKeys: selectedRowKeys.value, + selectedRows: selectedRows.value, + }), + }} + + ) : null} +
+
+
+ ); + }, +}); diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableFooter.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableFooter.tsx new file mode 100644 index 0000000..846119a --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/components/KtTableFooter.tsx @@ -0,0 +1,95 @@ +import type { PropType } from 'vue'; + +import { defineComponent } from 'vue'; + +import { Pagination } from 'antdv-next'; + +const APagination = Pagination as any; + +export default defineComponent({ + name: 'KtTableFooter', + props: { + current: { + default: 1, + type: Number, + }, + pageSize: { + default: 10, + type: Number, + }, + pageSizeOptions: { + default: () => ['10', '20', '50', '100'], + type: Array as PropType, + }, + selectedCount: { + default: 0, + type: Number, + }, + showPagination: { + default: true, + type: Boolean, + }, + showSelection: { + default: false, + type: Boolean, + }, + total: { + default: 0, + type: Number, + }, + }, + emits: ['pageChange'], + /** + * 初始化表格底部选择状态和分页区域。 + * + * @param props 底部分页、选择数量和显示开关配置。 + * @param emit Vue setup context。 + * @param emit.emit 分页变化事件发送器。 + * @param emit.slots 底部左侧自定义内容插槽。 + */ + setup(props, { emit, slots }) { + /** + * 将 Antdv Pagination 的页码变化转成 KtTable 分页事件。 + * + * @param current 当前页码。 + * @param pageSize 当前每页条数。 + */ + function handlePageChange(current: number, pageSize: number) { + emit('pageChange', { current, pageSize }); + } + + return () => ( +
+
+ {props.showSelection ? ( + + {props.selectedCount > 0 ? ( + <> + 已选中 + + {props.selectedCount} + + 条 + + ) : ( + '选中激活' + )} + + ) : null} + {slots.default?.()} +
+ {props.showPagination ? ( + `共 ${total} 条`} + total={props.total} + /> + ) : null} +
+ ); + }, +}); diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableHeader.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableHeader.tsx new file mode 100644 index 0000000..5284431 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/components/KtTableHeader.tsx @@ -0,0 +1,62 @@ +import { Comment, defineComponent, isVNode } from 'vue'; + +import { Divider } from 'antdv-next'; + +const ADivider = Divider as any; + +/** + * 判断标题插槽是否只包含空节点。 + * + * @param title 标题插槽渲染结果。 + */ +function isEmptyTitleSlot(title: unknown) { + return ( + Array.isArray(title) && + title.every( + (item) => item === null || (isVNode(item) && item.type === Comment), + ) + ); +} + +export default defineComponent({ + name: 'KtTableHeader', + props: { + title: { + default: undefined, + type: String, + }, + }, + /** + * 初始化表格头部区域。 + * + * @param props 表格头部 props，目前用于接收默认标题。 + * @param slots Vue setup context。 + * @param slots.slots 头部标题、按钮和设置区插槽。 + */ + setup(props, { slots }) { + return () => { + const slotTitle = slots.title?.(); + const title = + !slotTitle || isEmptyTitleSlot(slotTitle) ? props.title : slotTitle; + const toolbar = slots.toolbar?.(); + const settings = slots.settings?.(); + + if (!title && !toolbar && !settings) return null; + + return ( +
+
+
{title}
+
{toolbar}
+
+ {settings ? ( +
+ + {settings} +
+ ) : null} +
+ ); + }; + }, +}); diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableResizableTitle.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableResizableTitle.tsx new file mode 100644 index 0000000..179a185 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/components/KtTableResizableTitle.tsx @@ -0,0 +1,139 @@ +import type { PropType } from 'vue'; + +import { defineComponent, h, onBeforeUnmount, ref } from 'vue'; + +export interface KtTableResizeInfo { + size: { + width: number; + }; +} + +type KtTableResizableTitleProps = { + onResize?: (event: MouseEvent, info: KtTableResizeInfo) => void; + width?: number; +}; + +export default defineComponent({ + name: 'KtTableResizableTitle', + inheritAttrs: false, + props: { + onResize: { + default: undefined, + type: Function as PropType, + }, + width: { + default: undefined, + type: Number, + }, + }, + /** + * 初始化可拖拽列宽表头单元格。 + * + * @param props 表头单元格宽度和列宽变化回调。 + * @param attrs Vue setup context。 + * @param attrs.attrs Antdv Table 透传给 th 的原生属性。 + * @param attrs.slots 表头默认内容插槽。 + */ + setup(props, { attrs, slots }) { + const dragging = ref(false); + const stopNextClick = ref(false); + let startWidth = 0; + let startX = 0; + + /** + * 停止列宽拖拽并清理全局鼠标事件。 + */ + function stopDragging() { + dragging.value = false; + document.body.classList.remove('kt-table--column-resizing'); + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + } + + /** + * 处理鼠标移动并计算下一列宽。 + * + * @param event 鼠标移动事件，用于读取当前横向坐标。 + */ + function handleMouseMove(event: MouseEvent) { + if (!dragging.value) return; + + stopNextClick.value = true; + const nextWidth = Math.max(startWidth + event.clientX - startX, 40); + props.onResize?.(event, { size: { width: nextWidth } }); + } + + /** + * 处理鼠标释放，结束当前列宽拖拽。 + */ + function handleMouseUp() { + stopDragging(); + window.setTimeout(() => { + stopNextClick.value = false; + }, 0); + } + + /** + * 处理拖拽手柄按下，记录起始宽度和起始坐标。 + * + * @param event 鼠标按下事件，用于读取起始坐标和当前手柄元素。 + */ + function handleMouseDown(event: MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + + const target = event.currentTarget as HTMLElement; + const headerCell = target.parentElement; + + dragging.value = true; + stopNextClick.value = false; + startX = event.clientX; + startWidth = props.width || headerCell?.offsetWidth || 0; + + document.body.classList.add('kt-table--column-resizing'); + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseup', handleMouseUp); + } + + /** + * 阻止拖拽后的冒泡点击，避免误触发表头排序。 + * + * @param event 表头捕获阶段点击事件。 + */ + function handleClickCapture(event: MouseEvent) { + if (!stopNextClick.value) return; + + event.stopPropagation(); + event.preventDefault(); + stopNextClick.value = false; + } + + onBeforeUnmount(stopDragging); + + return () => { + if (!props.width) { + return h('th', attrs, slots.default?.()); + } + + return h( + 'th', + { + ...attrs, + class: ['kt-table__resizable-title', attrs.class], + onClickCapture: handleClickCapture, + style: { + ...(attrs.style as Record | undefined), + width: `${props.width}px`, + }, + }, + [ + slots.default?.(), + h('span', { + class: 'kt-table__resizable-handle', + onMousedown: handleMouseDown, + }), + ], + ); + }; + }, +}); diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableSearch.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableSearch.tsx new file mode 100644 index 0000000..fe529d2 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/components/KtTableSearch.tsx @@ -0,0 +1,243 @@ +import type { PropType } from 'vue'; + +import type { KtTableFormGridOptions } from '../types'; + +import { + computed, + defineComponent, + nextTick, + onBeforeUnmount, + onMounted, + ref, + watch, +} from 'vue'; + +import { KT_TABLE_DEFAULT_FORM_GRID } from '../config/constants'; + +const SEARCH_TRANSITION_DURATION = 220; + +export default defineComponent({ + name: 'KtTableSearch', + props: { + collapsed: { + default: false, + type: Boolean, + }, + visible: { + default: true, + type: Boolean, + }, + formGrid: { + default: () => KT_TABLE_DEFAULT_FORM_GRID, + type: Object as PropType, + }, + }, + emits: ['transitionEnd', 'transitionStart'], + /** + * 初始化搜索区域的展开/收起动画状态。 + * + * @param props 搜索区显示状态和收起状态。 + * @param emit Vue setup context。 + * @param emit.emit 搜索动画开始和结束事件发送器。 + * @param emit.slots 搜索表单和操作按钮插槽。 + */ + setup(props, { emit, slots }) { + const shellRef = ref(null); + const contentRef = ref(null); + const shellHeight = ref(); + const transitioning = ref(false); + let initialized = false; + let resizeObserver: ResizeObserver | undefined; + let transitionTimer: number | undefined; + let animationFrame: number | undefined; + const gridStyle = computed(() => { + const grid = props.formGrid; + + return { + '--kt-table-form-action-fr': `${grid.actionSpan}fr`, + '--kt-table-form-action-min-width': `${grid.actionMinWidth}px`, + '--kt-table-form-action-span': String(grid.actionSpan), + '--kt-table-form-content-fr': `${grid.contentSpan}fr`, + '--kt-table-form-content-span': String(grid.contentSpan), + '--kt-table-form-tablet-columns': String(grid.tabletColumns), + '--kt-table-form-total-span': String(grid.totalSpan), + }; + }); + + /** + * 读取搜索内容区域的真实高度。 + */ + function readContentHeight() { + const content = contentRef.value; + return content ? Math.ceil(content.getBoundingClientRect().height) : 0; + } + + /** + * 读取搜索外壳当前可见高度。 + */ + function readShellHeight() { + const shell = shellRef.value; + return shell ? Math.ceil(shell.getBoundingClientRect().height) : 0; + } + + /** + * 清理搜索动画兜底计时器。 + */ + function clearTransitionTimer() { + if (transitionTimer) { + window.clearTimeout(transitionTimer); + transitionTimer = undefined; + } + } + + /** + * 清理搜索动画 requestAnimationFrame。 + */ + function clearAnimationFrame() { + if (animationFrame) { + window.cancelAnimationFrame(animationFrame); + animationFrame = undefined; + } + } + + /** + * 结束搜索区域高度动画并通知父级恢复布局计算。 + */ + function endTransition() { + if (!transitioning.value && shellHeight.value === undefined) return; + + clearTransitionTimer(); + clearAnimationFrame(); + transitioning.value = false; + shellHeight.value = undefined; + emit('transitionEnd'); + } + + /** + * 开始动画前锁定当前高度，避免高度切换时直接跳变。 + */ + function prepareTransition() { + const shell = shellRef.value; + if (!shell) return false; + + const currentHeight = readShellHeight(); + if (!initialized) { + initialized = true; + return false; + } + + clearAnimationFrame(); + clearTransitionTimer(); + + transitioning.value = false; + shellHeight.value = currentHeight; + emit('transitionStart'); + + return true; + } + + /** + * 将搜索区域从当前高度过渡到下一状态高度。 + */ + async function animateToNextHeight() { + if (!prepareTransition()) return; + + await nextTick(); + await nextTick(); + + const shell = shellRef.value; + const currentHeight = shellHeight.value ?? readShellHeight(); + const targetHeight = readContentHeight(); + if (!shell || Math.abs(currentHeight - targetHeight) <= 1) { + endTransition(); + return; + } + + transitioning.value = true; + await nextTick(); + + animationFrame = window.requestAnimationFrame(() => { + animationFrame = undefined; + shellHeight.value = targetHeight; + transitionTimer = window.setTimeout( + endTransition, + SEARCH_TRANSITION_DURATION + 80, + ); + }); + } + + /** + * 内容尺寸变化后同步高度状态。 + */ + function syncContentHeight() { + if ( + !initialized || + transitioning.value || + shellHeight.value !== undefined + ) { + return; + } + + shellHeight.value = undefined; + } + + onMounted(() => { + if (contentRef.value) { + resizeObserver = new ResizeObserver(syncContentHeight); + resizeObserver.observe(contentRef.value); + } + initialized = true; + }); + + onBeforeUnmount(() => { + resizeObserver?.disconnect(); + clearTransitionTimer(); + clearAnimationFrame(); + }); + + watch( + () => props.collapsed, + () => { + void animateToNextHeight(); + }, + { + flush: 'pre', + }, + ); + + return () => + props.visible ? ( +
+
{ + if ( + event.currentTarget === event.target && + event.propertyName === 'height' + ) { + endTransition(); + } + }} + ref={shellRef} + style={{ + height: + shellHeight.value === undefined + ? undefined + : `${shellHeight.value}px`, + }} + > +
+
{slots.form?.()}
+
{slots.actions?.()}
+
+
+
+
+ ) : null; + }, +}); diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx new file mode 100644 index 0000000..217c5b5 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/components/KtTableSettings.tsx @@ -0,0 +1,404 @@ +import type { TableColumnType } from 'antdv-next'; + +import type { PropType, VNodeChild } from 'vue'; + +import type { KtTableRecord, KtTableSetting, KtTableSize } from '../types'; + +import { computed, defineComponent, ref } from 'vue'; + +import { + Eye, + EyeOff, + Fullscreen, + IconifyIcon, + Menu, + Minimize2, + RotateCw, + Settings, +} from '@vben/icons'; + +import { Button, Checkbox, Popover, Space, Tooltip } from 'antdv-next'; + +import { getColumnKey } from '../utils/index'; + +const AButton = Button as any; +const ACheckbox = Checkbox as any; +const APopover = Popover as any; +const ASpace = Space as any; +const ATooltip = Tooltip as any; + +const SIZE_LABEL: Record = { + large: '宽松', + middle: '默认', + small: '紧凑', +}; + +const SIZE_LIST: KtTableSize[] = ['small', 'middle', 'large']; + +export default defineComponent({ + name: 'KtTableSettings', + props: { + columns: { + default: () => [], + type: Array as PropType>>, + }, + columnOrderKeys: { + default: () => [], + type: Array as PropType, + }, + fullscreen: { + default: false, + type: Boolean, + }, + searchVisible: { + default: true, + type: Boolean, + }, + setting: { + default: () => ({}), + type: Object as PropType, + }, + size: { + default: 'middle', + type: String as PropType, + }, + visibleColumnKeys: { + default: () => [], + type: Array as PropType, + }, + }, + emits: [ + 'columnOrderKeysChange', + 'fullscreenChange', + 'reload', + 'resetColumns', + 'searchVisibleChange', + 'sizeChange', + 'visibleColumnKeysChange', + ], + /** + * 初始化 KtTable 设置栏内部状态和事件。 + * + * @param props 组件入参，包含列配置、列顺序、可见列、密度、搜索显示和全屏状态。 + * @param emit Vue setup context。 + * @param emit.emit 组件事件发送器，用于把刷新、列设置、密度切换等操作同步给父级表格。 + */ + setup(props, { emit }) { + const draggingColumnKey = ref(''); + const dragOverColumnKey = ref(''); + const dragInsertPosition = ref<'after' | 'before'>('before'); + + const sourceColumnOptions = computed(() => + props.columns + .map((column) => ({ + key: getColumnKey(column), + title: String(column.title || getColumnKey(column)), + })) + .filter((item) => !!item.key), + ); + const columnOptions = computed(() => { + const optionMap = new Map( + sourceColumnOptions.value.map((item) => [item.key, item]), + ); + const orderedKeys = props.columnOrderKeys.filter((key) => + optionMap.has(key), + ); + const restKeys = sourceColumnOptions.value + .map((item) => item.key) + .filter((key) => !orderedKeys.includes(key)); + + return [...orderedKeys, ...restKeys] + .map((key) => optionMap.get(key)) + .filter((item) => !!item); + }); + + /** + * 切换单个列的显示状态。 + * + * @param key 当前列的唯一标识，用于和表格列配置、可见列集合对应。 + * @param checked 当前列是否需要显示，true 表示加入可见列，false 表示从可见列中移除。 + */ + function toggleColumn(key: string, checked: boolean) { + if (!checked) { + emit( + 'visibleColumnKeysChange', + props.visibleColumnKeys.filter((item) => item !== key), + ); + return; + } + + emit( + 'visibleColumnKeysChange', + props.visibleColumnKeys.includes(key) + ? [...props.visibleColumnKeys] + : [...props.visibleColumnKeys, key], + ); + } + + /** + * 清空列拖拽过程中的源列、目标列和插入位置状态。 + */ + function clearColumnDragState() { + draggingColumnKey.value = ''; + dragOverColumnKey.value = ''; + dragInsertPosition.value = 'before'; + } + + /** + * 根据拖拽事件计算当前鼠标位于目标列项的上半区还是下半区。 + * + * @param event 列设置列表项触发的拖拽事件，用于读取鼠标位置和目标元素尺寸。 + */ + function readDropPosition(event: DragEvent) { + const target = event.currentTarget as HTMLElement; + const rect = target.getBoundingClientRect(); + + return event.clientY > rect.top + rect.height / 2 ? 'after' : 'before'; + } + + /** + * 移动列设置中的列顺序，并把新的顺序通知给父级表格。 + * + * @param sourceKey 被拖动列的唯一标识。 + * @param targetKey 当前投放目标列的唯一标识。 + */ + function moveColumn(sourceKey: string, targetKey: string) { + if (!sourceKey || !targetKey || sourceKey === targetKey) return; + + const nextKeys = columnOptions.value.map((item) => item.key); + const sourceIndex = nextKeys.indexOf(sourceKey); + const targetIndex = nextKeys.indexOf(targetKey); + if (sourceIndex === -1 || targetIndex === -1) return; + + const [movedKey] = nextKeys.splice(sourceIndex, 1); + if (!movedKey) return; + const nextTargetIndex = nextKeys.indexOf(targetKey); + nextKeys.splice( + dragInsertPosition.value === 'after' + ? nextTargetIndex + 1 + : nextTargetIndex, + 0, + movedKey, + ); + emit('columnOrderKeysChange', nextKeys); + } + + /** + * 记录列拖拽开始时的源列信息。 + * + * @param key 被拖动列的唯一标识。 + * @param event 原生拖拽开始事件，用于写入拖拽数据和设置拖拽效果。 + */ + function handleColumnDragStart(key: string, event: DragEvent) { + draggingColumnKey.value = key; + dragOverColumnKey.value = key; + event.dataTransfer?.setData('text/plain', key); + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = 'move'; + } + } + + /** + * 处理拖拽经过目标列时的投放提示位置。 + * + * @param key 当前经过的目标列唯一标识。 + * @param event 原生拖拽经过事件，用于阻止默认行为并计算投放方向。 + */ + function handleColumnDragOver(key: string, event: DragEvent) { + if (!draggingColumnKey.value || draggingColumnKey.value === key) return; + + event.preventDefault(); + dragOverColumnKey.value = key; + dragInsertPosition.value = readDropPosition(event); + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'move'; + } + } + + /** + * 完成列投放并触发列顺序更新。 + * + * @param key 当前投放目标列的唯一标识。 + * @param event 原生投放事件，用于读取拖拽源列并阻止浏览器默认投放行为。 + */ + function handleColumnDrop(key: string, event: DragEvent) { + event.preventDefault(); + const sourceKey = + draggingColumnKey.value || + event.dataTransfer?.getData('text/plain') || + ''; + + moveColumn(sourceKey, key); + clearColumnDragState(); + } + + /** + * 按宽松、默认、紧凑的顺序切换表格密度。 + */ + function cycleSize() { + const currentIndex = SIZE_LIST.indexOf(props.size); + const next = SIZE_LIST[(currentIndex + 1) % SIZE_LIST.length] || 'middle'; + emit('sizeChange', next); + } + + /** + * 渲染设置栏中的图标按钮。 + * + * @param key 按钮渲染 key，用于让 Vue 稳定追踪按钮节点。 + * @param title 按钮提示文案，同时作为无障碍名称。 + * @param icon 按钮图标节点。 + * @param onClick 点击按钮时执行的回调函数。 + */ + function renderIconButton( + key: string, + title: string, + icon: VNodeChild, + onClick: () => void, + ) { + return ( + + + {icon} + + + ); + } + + /** + * 渲染列设置弹层和列设置触发按钮。 + */ + function renderColumnSetting() { + if (!props.setting.column) return null; + + return ( + + {{ + content: () => ( +
+
+ 列设置 + emit('resetColumns')} + size="small" + type="link" + > + 重置 + +
+
+ {columnOptions.value.map((item) => ( +
+ handleColumnDragOver(item.key, event) + } + onDrop={(event: DragEvent) => + handleColumnDrop(item.key, event) + } + > + + + toggleColumn(item.key, event.target.checked) + } + > + {item.title} + +
+ ))} +
+
+ ), + default: () => + renderIconButton( + 'column', + '列设置', + , + () => {}, + ), + }} + + ); + } + + 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} + + ); + }, +}); diff --git a/apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx b/apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx new file mode 100644 index 0000000..dace6af --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/components/KtTableSummary.tsx @@ -0,0 +1,121 @@ +import type { TableColumnType } from 'antdv-next'; + +import type { VNodeChild } from 'vue'; + +import type { KtTableContext, KtTableRecord, KtTableStatistic } from '../types'; + +import { TableSummary, TableSummaryCell, TableSummaryRow } from 'antdv-next'; + +import { + KT_TABLE_ACTION_COLUMN_KEY, + KT_TABLE_INDEX_COLUMN_KEY, +} from '../config/constants'; +import { getColumnKey } from '../utils/index'; + +const ATableSummary = TableSummary as any; +const ATableSummaryCell = TableSummaryCell as any; +const ATableSummaryRow = TableSummaryRow as any; + +type RenderKtTableSummaryOptions = { + columns: Array>; + context: KtTableContext; + customSummary?: VNodeChild; + showSelection: boolean; + statistics: KtTableStatistic[]; +}; + +/** + * 渲染单个统计项内容。 + * + * @param item 当前统计项配置。 + * @param context KtTable 运行时上下文，用于统计项读取行数据、搜索值和选择状态。 + */ +function renderStatisticValue(item: KtTableStatistic, context: KtTableContext) { + const value = + item.render?.(context) ?? + (typeof item.value === 'function' ? item.value(context) : item.value); + + return ( + + {item.label ? ( + {item.label}: + ) : null} + {value} + + ); +} + +/** + * 渲染 summary 单元格内容。 + * + * @param context KtTable 运行时上下文。 + * @param statistic 当前列匹配到的统计项配置。 + * @param showDefaultLabel 当前单元格是否需要显示默认“本页统计”文案。 + */ +function renderCellContent( + context: KtTableContext, + statistic: KtTableStatistic | undefined, + showDefaultLabel: boolean, +): VNodeChild { + if (statistic) return renderStatisticValue(statistic, context); + if (showDefaultLabel) { + return 本页统计; + } + + return null; +} + +/** + * 渲染 KtTable 底部固定 summary 行。 + * + * @param options summary 渲染参数。 + * @param options.columns 当前最终展示的表格列。 + * @param options.context KtTable 运行时上下文。 + * @param options.customSummary 业务侧传入的自定义 summary 插槽。 + * @param options.showSelection 当前表格是否启用选择列。 + * @param options.statistics 当前表格和模块提供的统计项列表。 + */ +export function renderKtTableSummary(options: RenderKtTableSummaryOptions) { + const { columns, context, customSummary, showSelection, statistics } = + options; + if (statistics.length === 0) return customSummary; + + // summary slot 必须直接返回 TableSummary，Antdv 才会启用 fixed="bottom" 固定层。 + const statisticMap = new Map( + statistics + .filter((item) => !!item.columnKey) + .map((item) => [item.columnKey, item]), + ); + const selectionOffset = showSelection ? 1 : 0; + const defaultLabelColumnKey = columns + .map((column) => getColumnKey(column)) + .find( + (key) => + key && + key !== KT_TABLE_INDEX_COLUMN_KEY && + key !== KT_TABLE_ACTION_COLUMN_KEY, + ); + + return ( + + + {showSelection ? : null} + {columns.map((column, index) => { + const columnKey = getColumnKey(column); + const statistic = statisticMap.get(columnKey); + const showDefaultLabel = + columnKey === defaultLabelColumnKey && !statistic; + + return ( + + {renderCellContent(context, statistic, showDefaultLabel)} + + ); + })} + + + ); +} diff --git a/apps/web-antdv-next/src/components/ktTable/config/constants.ts b/apps/web-antdv-next/src/components/ktTable/config/constants.ts new file mode 100644 index 0000000..b722d5f --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/config/constants.ts @@ -0,0 +1,23 @@ +import type { KtTableFormGridOptions } from '../types'; + +export const KT_TABLE_ACTION_COLUMN_KEY = '__kt_table_actions__'; + +export const KT_TABLE_INDEX_COLUMN_KEY = '__kt_table_index__'; + +export const KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT = 3; + +export const KT_TABLE_ROW_ACTION_VISIBLE_COUNT = 2; + +export const KT_TABLE_DEFAULT_PAGE_SIZE = 10; + +export const KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS = ['10', '20', '50', '100']; + +export const KT_TABLE_DEFAULT_FORM_GRID: KtTableFormGridOptions = { + actionMinWidth: 180, + actionSpan: 6, + contentSpan: 18, + fieldSpan: 4, + rangeSpan: 6, + tabletColumns: 2, + totalSpan: 24, +}; diff --git a/apps/web-antdv-next/src/components/ktTable/config/ktTableProps.ts b/apps/web-antdv-next/src/components/ktTable/config/ktTableProps.ts new file mode 100644 index 0000000..03c26f1 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/config/ktTableProps.ts @@ -0,0 +1,199 @@ +import type { TableColumnType } from 'antdv-next'; + +import type { PropType } from 'vue'; + +import type { + KtTableButton, + KtTableFormOptions, + KtTableHook, + KtTableModule, + KtTableProps, + KtTableRecord, + KtTableResolvedProps, + KtTableRowAction, + KtTableSetting, + KtTableSize, + KtTableStatistic, +} from '../types'; + +import { + KT_TABLE_DEFAULT_PAGE_SIZE, + KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS, +} from './constants'; + +export const DEFAULT_TABLE_SETTING: Required = { + column: true, + density: true, + fullscreen: true, + reload: true, + showSearch: true, +}; + +export const KT_TABLE_PROP_KEYS = [ + 'afterFetch', + 'api', + 'beforeFetch', + 'buttons', + 'columns', + 'dataSource', + 'formOptions', + 'hooks', + 'immediate', + 'modules', + 'pageSize', + 'pageSizeOptions', + 'rowActions', + 'rowKey', + 'showDefaultButtons', + 'showFooter', + 'showHeader', + 'showIndex', + 'showPagination', + 'showSelection', + 'showTableSetting', + 'size', + 'statistics', + 'tableSettings', + 'tableTitle', +] as const satisfies ReadonlyArray; + +/** + * 创建 KtTable 默认 props，供组件初始化和 register 配置合并时复用。 + */ +export function createDefaultTableProps(): KtTableResolvedProps< + KtTableRecord, + KtTableRecord +> { + return { + afterFetch: undefined, + api: undefined, + beforeFetch: undefined, + buttons: [], + columns: [], + dataSource: undefined, + formOptions: undefined, + hooks: [], + immediate: true, + modules: [], + pageSize: KT_TABLE_DEFAULT_PAGE_SIZE, + pageSizeOptions: KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS, + rowActions: [], + rowKey: 'id', + showDefaultButtons: true, + showFooter: true, + showHeader: true, + showIndex: true, + showPagination: true, + showSelection: false, + showTableSetting: true, + size: 'small', + statistics: [], + tableSettings: {}, + tableTitle: undefined, + }; +} + +export const ktTableProps = { + afterFetch: { + default: undefined, + type: Function as PropType, + }, + api: { + default: undefined, + type: Object as PropType, + }, + beforeFetch: { + default: undefined, + type: Function as PropType, + }, + buttons: { + default: () => [], + type: Array as PropType, + }, + columns: { + default: () => [], + type: Array as PropType>>, + }, + dataSource: { + default: undefined, + type: Array as PropType, + }, + formOptions: { + default: undefined, + type: Object as PropType, + }, + hooks: { + default: () => [], + type: Array as PropType, + }, + immediate: { + default: true, + type: Boolean, + }, + modules: { + default: () => [], + type: Array as PropType, + }, + pageSize: { + default: KT_TABLE_DEFAULT_PAGE_SIZE, + type: Number, + }, + pageSizeOptions: { + default: () => KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS, + type: Array as PropType, + }, + rowActions: { + default: () => [], + type: Array as PropType, + }, + rowKey: { + default: 'id', + type: [String, Function] as PropType< + ((row: KtTableRecord) => string) | string + >, + }, + showDefaultButtons: { + default: true, + type: Boolean, + }, + showFooter: { + default: true, + type: Boolean, + }, + showHeader: { + default: true, + type: Boolean, + }, + showIndex: { + default: true, + type: Boolean, + }, + showPagination: { + default: true, + type: Boolean, + }, + showSelection: { + default: false, + type: Boolean, + }, + showTableSetting: { + default: true, + type: Boolean, + }, + size: { + default: 'small', + type: String as PropType, + }, + statistics: { + default: () => [], + type: Array as PropType, + }, + tableSettings: { + default: () => ({}), + type: Object as PropType, + }, + tableTitle: { + default: undefined, + type: String, + }, +}; diff --git a/apps/web-antdv-next/src/components/ktTable/helpers/defineKtTable.ts b/apps/web-antdv-next/src/components/ktTable/helpers/defineKtTable.ts new file mode 100644 index 0000000..c01e492 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/helpers/defineKtTable.ts @@ -0,0 +1,25 @@ +import type { KtTableHook, KtTableModule, KtTableRecord } from '../types'; + +/** + * 定义 KtTable hook，帮助业务侧保留泛型类型推导。 + * + * @param hook 业务侧提供的 KtTable hook 配置。 + */ +export function defineKtTableHook< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +>(hook: KtTableHook) { + return hook; +} + +/** + * 定义 KtTable 可插拔模块，帮助业务侧保留泛型类型推导。 + * + * @param module 业务侧提供的 KtTable 模块配置。 + */ +export function defineKtTableModule< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +>(module: KtTableModule) { + return module; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTable.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTable.ts new file mode 100644 index 0000000..202bc11 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTable.ts @@ -0,0 +1,89 @@ +import type { + KtTableProps, + KtTableRecord, + KtTableRegisterApi, + KtTableRegisterFn, + KtTableSetProps, +} from '../types'; + +/** + * 创建表格未注册时抛出的统一错误。 + */ +function createUnregisteredError() { + return new Error('[KtTable]: table is not registered yet.'); +} + +/** + * 创建 KtTable register 函数和可命令式调用的表格 API。 + * + * @param options 初始化时预先写入的表格配置。 + */ +export function useKtTable< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +>(options: Partial> = {}) { + let tableApi: KtTableRegisterApi | null = null; + let pendingProps: Partial> = { ...options }; + + /** + * 获取已注册的表格 API，未注册时抛出明确错误。 + */ + function getTableApi() { + if (!tableApi) { + throw createUnregisteredError(); + } + + return tableApi; + } + + /** + * 更新表格 props；未注册时先缓存，注册后再一次性同步。 + * + * @param nextProps 需要合并到表格上的 props 补丁，或基于当前 props 返回补丁的函数。 + */ + const setProps: KtTableSetProps = (nextProps) => { + if (tableApi) { + tableApi.setProps(nextProps); + return; + } + + const patch = + typeof nextProps === 'function' + ? nextProps(pendingProps as never) + : nextProps; + pendingProps = { + ...pendingProps, + ...patch, + }; + }; + + /** + * 接收 KtTable 组件实例暴露的 API，并同步注册前缓存的 props。 + * + * @param api KtTable 组件注册时暴露的命令式 API。 + */ + const register: KtTableRegisterFn = (api) => { + tableApi = api; + api.setProps(pendingProps); + }; + + const api = { + get formApi() { + return getTableApi().formApi; + }, + getProps: () => getTableApi().getProps(), + getRows: () => getTableApi().getRows(), + getSearchValues: () => getTableApi().getSearchValues(), + registerHook: (...args) => getTableApi().registerHook(...args), + reload: () => getTableApi().reload(), + reset: () => getTableApi().reset(), + search: () => getTableApi().search(), + selectedRowKeys: () => getTableApi().selectedRowKeys(), + selectedRows: () => getTableApi().selectedRows(), + setProps, + setSearchValues: (...args) => getTableApi().setSearchValues(...args), + unregisterHook: (...args) => getTableApi().unregisterHook(...args), + } as KtTableRegisterApi; + + return [register, api] as const; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx new file mode 100644 index 0000000..85fd42c --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableActions.tsx @@ -0,0 +1,250 @@ +import type { VNodeChild } from 'vue'; + +import type { + KtTableButton, + KtTableContext, + KtTableRecord, + KtTableResolvedProps, + KtTableRowAction, +} from '../types'; +import type { useKtTableRuntimeHooks } from './useKtTableHooks'; +import type { useKtTablePermission } from './useKtTablePermission'; + +import { computed } from 'vue'; + +import { Search, SearchX } from '@vben/icons'; + +import { Button, Modal } from 'antdv-next'; + +const AButton = Button as any; + +type PermissionHelpers = Pick< + ReturnType, + 'filterVisibleActions' | 'filterVisibleButtons' | 'resolveBoolean' +>; + +type RunHook = ReturnType['runHook']; + +interface UseKtTableActionsOptions { + context: KtTableContext; + permissions: PermissionHelpers; + props: KtTableResolvedProps; + reload: () => Promise; + reset: () => Promise; + runHook: RunHook; + search: () => Promise; +} + +/** + * 管理 KtTable 的默认按钮、自定义按钮和行操作渲染。 + * + * @param options 按钮系统初始化参数。 + * @param options.context KtTable 运行时上下文。 + * @param options.permissions 权限和显示状态解析工具。 + * @param options.props 表格最终合并后的配置。 + * @param options.reload 重新加载表格数据的函数。 + * @param options.reset 重置搜索表单和表格数据的函数。 + * @param options.runHook 运行按钮生命周期 hook 的函数。 + * @param options.search 执行表格查询的函数。 + */ +export function useKtTableActions(options: UseKtTableActionsOptions) { + const { context, permissions, props, reload, reset, runHook, search } = + options; + // 按钮 hook 只负责权限过滤、确认弹窗和回调触发，业务行为仍完全由调用方自定义。 + const { filterVisibleActions, filterVisibleButtons, resolveBoolean } = + permissions; + const rowActions = computed(() => + filterVisibleActions([ + ...props.rowActions, + ...props.modules.flatMap((module) => module.rowActions || []), + ]), + ); + const defaultFormButtons = computed(() => + filterVisibleButtons(getDefaultButtons()), + ); + const customButtons = computed(() => + filterVisibleButtons([ + ...props.buttons, + ...props.modules.flatMap((module) => module.buttons || []), + ]), + ); + const formButtons = computed(() => [ + ...defaultFormButtons.value, + ...customButtons.value.filter((button) => button.placement === 'form'), + ]); + const headerButtons = computed(() => + customButtons.value.filter((button) => button.placement !== 'form'), + ); + + /** + * 生成 KtTable 默认查询和重置按钮。 + */ + function getDefaultButtons(): KtTableButton[] { + if (!props.showDefaultButtons) return []; + + return [ + { + icon: , + key: 'search', + label: '查询', + operation: 'search', + placement: 'form', + type: 'primary', + }, + { + icon: , + key: 'reset', + label: '重置', + operation: 'reset', + placement: 'form', + }, + ]; + } + + /** + * 渲染按钮图标，兼容静态图标和函数式图标。 + * + * @param icon 按钮配置中的图标节点或图标渲染函数。 + * @param targetContext 图标渲染时使用的表格上下文。 + */ + function renderIcon( + icon: KtTableButton['icon'], + targetContext: KtTableContext = context, + ) { + if (!icon) return null; + return typeof icon === 'function' ? icon(targetContext) : icon; + } + + /** + * 执行头部或搜索区按钮动作。 + * + * @param button 当前触发的按钮配置。 + */ + async function runButtonAction(button: KtTableButton) { + await runHook('onBeforeAction', button, context); + + let result: unknown; + if (button.onClick) { + result = await button.onClick(context); + } else { + switch (button.operation) { + case 'reload': { + result = await reload(); + + break; + } + case 'reset': { + result = await reset(); + + break; + } + case 'search': { + result = await search(); + + break; + } + default: + } + } + + await runHook('onAfterAction', button, result, context); + } + + /** + * 执行单行操作按钮动作。 + * + * @param action 当前触发的行操作配置。 + * @param row 当前行数据。 + */ + async function runRowAction(action: KtTableRowAction, row: KtTableRecord) { + await runHook('onBeforeAction', action, context); + + let result: unknown; + if (action.onClick) { + result = await action.onClick(row, context); + } + + await runHook('onAfterAction', action, result, context); + } + + /** + * 按配置决定是否弹出确认框后再执行行操作。 + * + * @param action 当前触发的行操作配置。 + * @param row 当前行数据。 + */ + function confirmRowAction(action: KtTableRowAction, row: KtTableRecord) { + if (!action.confirm) { + return runRowAction(action, row); + } + + Modal.confirm({ + content: + typeof action.confirm === 'function' + ? action.confirm(row) + : `确认${action.label}该数据吗？`, + onOk: async () => { + await runRowAction(action, row); + }, + title: action.label, + }); + } + + /** + * 渲染头部或搜索区按钮。 + * + * @param button 当前按钮配置。 + */ + function renderButton(button: KtTableButton) { + return ( + runButtonAction(button)} + type={button.type} + > + {renderIcon(button.icon)} + {button.label} + + ); + } + + /** + * 渲染单行操作按钮。 + * + * @param action 当前行操作配置。 + * @param row 当前行数据。 + */ + function renderRowAction(action: KtTableRowAction, row: KtTableRecord) { + const disabled = + typeof action.disabled === 'function' + ? action.disabled(row, context) + : resolveBoolean(action.disabled, false); + + return ( + confirmRowAction(action, row)} + type={action.type || 'link'} + > + {renderIcon(action.icon)} + {action.label} + + ); + } + + return { + formButtons, + headerButtons, + renderButton, + renderRowAction: renderRowAction as ( + action: KtTableRowAction, + row: KtTableRecord, + ) => VNodeChild, + rowActions, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableColumns.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableColumns.ts new file mode 100644 index 0000000..2120700 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableColumns.ts @@ -0,0 +1,326 @@ +import type { TableColumnType } from 'antdv-next'; + +import type { ComputedRef } from 'vue'; + +import type { + KtTableRecord, + KtTableResolvedProps, + KtTableRowAction, +} from '../types'; + +import { computed, reactive, ref, watch } from 'vue'; + +import { + KT_TABLE_ACTION_COLUMN_KEY, + KT_TABLE_INDEX_COLUMN_KEY, + KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT, +} from '../config/constants'; +import { getColumnKey } from '../utils/index'; + +interface UseKtTableColumnsOptions { + props: KtTableResolvedProps; + rowActions: ComputedRef; + scheduleTableLayout: () => void; +} + +/** + * 管理 KtTable 的列顺序、列显隐、列宽拖拽和横向滚动宽度。 + * + * @param options KtTable 列系统初始化参数。 + * @param options.props 表格最终合并后的配置。 + * @param options.rowActions 当前行操作按钮列表，用于决定是否追加操作列。 + * @param options.scheduleTableLayout 表格布局重算函数，用于列宽变更后同步滚动高度。 + */ +export function useKtTableColumns(options: UseKtTableColumnsOptions) { + const { props, rowActions, scheduleTableLayout } = options; + // 列系统集中处理可见列、拖拽宽度和横向滚动宽度，避免主组件继续堆列计算细节。 + const columnWidths = reactive>({}); + const columnOrderKeys = ref([]); + const visibleColumnKeys = ref([]); + + const moduleColumns = computed(() => + props.modules.flatMap((module) => module.columns || []), + ); + const sourceColumns = computed(() => [ + ...props.columns, + ...moduleColumns.value, + ]); + const orderedSourceColumns = computed(() => { + const columnMap = new Map( + sourceColumns.value.map((column) => [getColumnKey(column), column]), + ); + const orderedKeys = columnOrderKeys.value.filter((key) => + columnMap.has(key), + ); + const restKeys = sourceColumns.value + .map((column) => getColumnKey(column)) + .filter((key) => key && !orderedKeys.includes(key)); + + return [...orderedKeys, ...restKeys] + .map((key) => columnMap.get(key)) + .filter(Boolean) as Array>; + }); + const visibleColumns = computed(() => + orderedSourceColumns.value + .filter((column) => + visibleColumnKeys.value.includes(getColumnKey(column)), + ) + .map((column) => normalizeColumnWidth(column)), + ); + const indexColumn = computed>(() => { + if (!props.showIndex) return null; + + return normalizeColumnWidth({ + className: 'kt-table__index-column', + align: 'center', + fixed: 'left', + key: KT_TABLE_INDEX_COLUMN_KEY, + minWidth: 40, + title: '序号', + width: 48, + } as TableColumnType); + }); + const actionColumn = computed>(() => { + if (rowActions.value.length === 0) return null; + const actionColumnWidth = resolveActionColumnWidth(rowActions.value.length); + + return normalizeColumnWidth({ + className: 'kt-table__action-column', + fixed: 'right', + key: KT_TABLE_ACTION_COLUMN_KEY, + minWidth: actionColumnWidth, + title: '操作', + width: actionColumnWidth, + } as TableColumnType); + }); + const columns = computed( + () => + [indexColumn.value, ...visibleColumns.value, actionColumn.value].filter( + Boolean, + ) as Array>, + ); + const tableScrollX = computed(() => + Math.max( + columns.value.reduce( + (total, column) => total + readColumnWidth(column.width, 140), + props.showSelection ? 48 : 0, + ), + 720, + ), + ); + + watch( + sourceColumns, + (nextColumns) => { + const nextKeys = nextColumns + .map((column) => getColumnKey(column)) + .filter(Boolean); + const current = visibleColumnKeys.value.filter((key) => + nextKeys.includes(key), + ); + const merged = [...new Set([...current, ...nextKeys])]; + visibleColumnKeys.value = merged; + columnOrderKeys.value = mergeColumnOrderKeys(nextKeys); + }, + { + immediate: true, + }, + ); + + /** + * 重置列顺序和可见列到源码配置的初始状态。 + */ + function resetColumns() { + const sourceKeys = sourceColumns.value + .map((column) => getColumnKey(column)) + .filter(Boolean); + columnOrderKeys.value = [...sourceKeys]; + visibleColumnKeys.value = [...sourceKeys]; + } + + /** + * 将现有列顺序和最新源码列 key 合并，保留用户排序并追加新增列。 + * + * @param sourceKeys 当前源码列配置中的全部列 key。 + */ + function mergeColumnOrderKeys(sourceKeys: string[]) { + const current = columnOrderKeys.value.filter((key) => + sourceKeys.includes(key), + ); + + return [...current, ...sourceKeys.filter((key) => !current.includes(key))]; + } + + /** + * 根据列设置面板拖拽后的 key 顺序更新表格列顺序。 + * + * @param keys 列设置面板传入的新列 key 顺序。 + */ + function reorderColumns(keys: string[]) { + const sourceKeys = sourceColumns.value + .map((column) => getColumnKey(column)) + .filter(Boolean); + const nextKeys = keys.filter((key) => sourceKeys.includes(key)); + + columnOrderKeys.value = [ + ...nextKeys, + ...sourceKeys.filter((key) => !nextKeys.includes(key)), + ]; + } + + /** + * 将列宽配置解析成数字宽度。 + * + * @param width Antdv 列配置中的 width，可能是数字、字符串或空值。 + * @param fallback 无法解析 width 时使用的默认宽度。 + */ + function readColumnWidth( + width: TableColumnType['width'], + fallback = 160, + ) { + if (typeof width === 'number') return width; + if (typeof width === 'string') { + const parsed = Number.parseInt(width, 10); + return Number.isFinite(parsed) ? parsed : fallback; + } + + return fallback; + } + + /** + * 读取列最小宽度，保证拖拽后不会小于可用显示宽度。 + * + * @param column 当前表格列配置。 + */ + function getColumnMinWidth(column: TableColumnType) { + const minWidth = Number((column as any).minWidth || 96); + if (getColumnKey(column) === KT_TABLE_INDEX_COLUMN_KEY) { + return Number.isFinite(minWidth) ? Math.max(minWidth, 40) : 40; + } + if (getColumnKey(column) === KT_TABLE_ACTION_COLUMN_KEY) { + return Number.isFinite(minWidth) ? Math.max(minWidth, 96) : 112; + } + + return Number.isFinite(minWidth) ? Math.max(minWidth, 80) : 96; + } + + /** + * 根据行操作按钮数量计算操作列默认宽度。 + * + * @param actionCount 当前可见行操作按钮数量。 + */ + function resolveActionColumnWidth(actionCount: number) { + if (actionCount > KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT) return 112; + if (actionCount === KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT) return 112; + if (actionCount === 2) return 96; + + return 80; + } + + /** + * 为列注入可拖拽列宽配置并补齐默认 ellipsis。 + * + * @param column 当前需要渲染的表格列配置。 + */ + function normalizeColumnWidth(column: TableColumnType) { + const key = getColumnKey(column); + const width = + key && columnWidths[key] + ? columnWidths[key] + : readColumnWidth(column.width, 160); + const originalHeaderCell = column.onHeaderCell; + const originalCell = column.onCell; + const minWidth = getColumnMinWidth(column); + const nextWidth = Math.max(width, minWidth); + + return { + ...column, + ellipsis: column.ellipsis ?? true, + /** + * 合并业务侧 header cell 配置和 KtTable 列宽拖拽配置。 + * + * @param targetColumn Antdv 传入的当前表头列配置。 + */ + onHeaderCell: (targetColumn: TableColumnType) => { + const originalProps = (originalHeaderCell?.(targetColumn) || + {}) as Record; + + return { + ...originalProps, + /** + * 响应表头拖拽列宽事件。 + * + * @param event 鼠标拖拽事件。 + * @param info 拖拽组件返回的新尺寸信息。 + * @param info.size 拖拽后的尺寸对象。 + * @param info.size.width 拖拽后的列宽。 + */ + onResize: (event: MouseEvent, info: { size: { width: number } }) => { + originalProps.onResize?.(event, info); + resizeColumnWidth(column, info.size.width); + }, + style: { + ...(originalProps.style as Record), + minWidth: `${minWidth}px`, + }, + width: nextWidth, + }; + }, + /** + * 合并业务侧 body cell 配置和 KtTable 列最小宽度配置。 + * + * @param record 当前行数据。 + * @param index 当前行在本页的下标。 + */ + onCell: (record: KtTableRecord, index?: number) => { + const originalProps = (originalCell?.(record, index) || {}) as Record< + string, + any + >; + + return { + ...originalProps, + style: { + ...(originalProps.style as Record), + minWidth: `${minWidth}px`, + }, + }; + }, + width: nextWidth, + } as TableColumnType; + } + + /** + * 保存列拖拽后的宽度并触发表格布局重算。 + * + * @param column 当前被拖拽调整宽度的列配置。 + * @param width 拖拽后计算出的目标宽度。 + */ + function resizeColumnWidth( + column: TableColumnType, + width: number, + ) { + const key = getColumnKey(column); + if ( + !key || + key === KT_TABLE_ACTION_COLUMN_KEY || + key === KT_TABLE_INDEX_COLUMN_KEY + ) { + return; + } + + const minWidth = getColumnMinWidth(column); + columnWidths[key] = Math.max(minWidth, Math.round(width)); + scheduleTableLayout(); + } + + return { + columnOrderKeys, + columns, + reorderColumns, + resetColumns, + sourceColumns, + tableScrollX, + visibleColumnKeys, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableForm.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableForm.ts new file mode 100644 index 0000000..b77a94b --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableForm.ts @@ -0,0 +1,80 @@ +import type { KtTableModule, KtTableProps, KtTableRecord } from '../types'; + +import { computed, watch } from 'vue'; + +import { useVbenForm } from '#/adapter/form'; + +import { mergeFormOptions, resolveFormGridOptions } from '../utils/index'; + +type KtTableFormProps = Readonly< + Pick, 'formOptions' | 'modules'> +>; + +/** + * 初始化 KtTable 搜索表单并合并模块注入的表单配置。 + * + * @param props 表格表单相关配置，包含主表单配置和模块列表。 + */ +export function useKtTableForm(props: KtTableFormProps) { + const sourceOptions = computed(() => [ + props.formOptions, + ...(props.modules || []).map((module: KtTableModule) => module.formOptions), + ]); + const formGrid = computed(() => resolveFormGridOptions(sourceOptions.value)); + const formOptions = computed(() => mergeFormOptions(sourceOptions.value)); + + const [SearchForm, formApi] = useVbenForm(formOptions.value); + const hasSearchForm = computed( + () => (formOptions.value.schema?.length || 0) > 0, + ); + + watch( + formOptions, + (options) => { + formApi.setState(options); + }, + { + deep: true, + immediate: true, + }, + ); + + /** + * 获取当前搜索表单值。 + */ + async function getSearchValues() { + if (!hasSearchForm.value) return {}; + + return await formApi.getValues(); + } + + /** + * 设置搜索表单值。 + * + * @param values 需要写入搜索表单的字段值。 + */ + async function setSearchValues(values: KtTableRecord) { + if (!hasSearchForm.value) return; + + await formApi.setValues(values); + } + + /** + * 重置搜索表单。 + */ + async function resetForm() { + if (!hasSearchForm.value) return; + + await formApi.resetForm(); + } + + return { + formApi, + formGrid, + formOptions, + getSearchValues, + resetForm, + SearchForm, + setSearchValues, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableHooks.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableHooks.ts new file mode 100644 index 0000000..f740d77 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableHooks.ts @@ -0,0 +1,81 @@ +import type { + KtTableHook, + KtTableModule, + KtTableProps, + KtTableRecord, +} from '../types'; + +import { computed, shallowRef } from 'vue'; + +type KtTableHookHandler = Exclude; + +type KtTableHookProps = Readonly< + Pick, 'hooks' | 'modules'> +>; + +/** + * 管理 KtTable 的静态 hook、模块 hook 和运行时注册 hook。 + * + * @param props 表格 hook 相关配置，包含主 hook 列表和模块列表。 + */ +export function useKtTableRuntimeHooks(props: KtTableHookProps) { + const runtimeHooks = shallowRef([]); + + const hooks = computed(() => [ + ...(props.hooks || []), + ...(props.modules || []).flatMap( + (module: KtTableModule) => module.hooks || [], + ), + ...runtimeHooks.value, + ]); + + /** + * 注册一个运行时 hook，同名 hook 会被替换。 + * + * @param hook 需要注册的 hook 配置。 + */ + function registerHook(hook: KtTableHook) { + runtimeHooks.value = [ + ...runtimeHooks.value.filter((item) => item.name !== hook.name), + hook, + ]; + + return () => unregisterHook(hook.name); + } + + /** + * 按 hook 名称移除运行时 hook。 + * + * @param name 需要移除的 hook 名称。 + */ + function unregisterHook(name: string) { + runtimeHooks.value = runtimeHooks.value.filter( + (item) => item.name !== name, + ); + } + + /** + * 依次执行所有可用 hook 上的指定生命周期函数。 + * + * @param handler 需要触发的 hook 生命周期名称。 + * @param params 透传给 hook 生命周期函数的参数列表。 + */ + async function runHook(handler: KtTableHookHandler, ...params: unknown[]) { + for (const hook of hooks.value) { + const callback = hook[handler] as + | ((...args: unknown[]) => Promise | void) + | undefined; + + if (callback) { + await callback(...params); + } + } + } + + return { + hooks, + registerHook, + runHook, + unregisterHook, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableLayout.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableLayout.ts new file mode 100644 index 0000000..8a09f49 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableLayout.ts @@ -0,0 +1,152 @@ +import type { ComputedRef } from 'vue'; + +import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'; + +interface UseKtTableLayoutOptions { + hasSummary: ComputedRef; +} + +/** + * 管理 KtTable 可滚动区域高度和搜索动画期间的布局冻结。 + * + * @param options 布局系统初始化参数。 + * @param options.hasSummary 当前表格是否存在 summary 行。 + */ +export function useKtTableLayout(options: UseKtTableLayoutOptions) { + const { hasSummary } = options; + // 搜索区动画期间冻结表格高度重算，等过渡结束后再同步一次，避免频繁重算导致动画卡顿。 + const tableBodyRef = ref(null); + const tableScrollY = ref(260); + const searchTransitioning = ref(false); + let layoutFrame: number | undefined; + let resizeObserver: ResizeObserver | undefined; + let observingTableBody = false; + + /** + * 搜索区域动画结束后恢复布局计算。 + */ + function handleSearchTransitionEnd() { + searchTransitioning.value = false; + observeTableBody(); + scheduleTableLayout(true); + } + + /** + * 搜索区域动画开始时冻结表格高度重算。 + */ + function handleSearchTransitionStart() { + searchTransitioning.value = true; + pauseTableBodyObserver(); + cancelLayoutFrame(); + } + + /** + * 根据表格容器、表头和 summary 高度计算 body 滚动高度。 + * + * @param force 是否无视搜索动画冻结状态强制重算。 + */ + function updateTableScrollY(force = false) { + if (searchTransitioning.value && !force) return; + + const wrapper = tableBodyRef.value; + if (!wrapper) return; + + const header = wrapper.querySelector( + '.ant-table-header', + ) as HTMLElement | null; + const fallbackSummaryHeight = hasSummary.value ? 44 : 0; + const summary = wrapper.querySelector( + '.ant-table-summary', + ) as HTMLElement | null; + const headerHeight = + header?.getBoundingClientRect().height || + ( + wrapper.querySelector('.ant-table-thead') as HTMLElement | null + )?.getBoundingClientRect().height || + 48; + const summaryHeight = + summary?.getBoundingClientRect().height || fallbackSummaryHeight; + const nextHeight = Math.max( + 160, + Math.floor(wrapper.clientHeight - headerHeight - summaryHeight - 2), + ); + + if (Number.isFinite(nextHeight)) { + tableScrollY.value = nextHeight; + } + } + + /** + * 取消已经排队的布局帧，避免搜索动画期间执行无意义的表格高度读写。 + */ + function cancelLayoutFrame() { + if (!layoutFrame) return; + + window.cancelAnimationFrame(layoutFrame); + layoutFrame = undefined; + } + + /** + * 调度下一帧表格布局重算，避免同步频繁读写 DOM。 + * + * @param force 是否无视搜索动画冻结状态强制调度。 + */ + function scheduleTableLayout(force = false) { + if (searchTransitioning.value && !force) return; + + nextTick(() => { + cancelLayoutFrame(); + + layoutFrame = window.requestAnimationFrame(() => { + layoutFrame = undefined; + updateTableScrollY(force); + }); + }); + } + + /** + * 监听表格容器尺寸变化，正常状态下同步 Antdv Table 的 scroll.y。 + */ + function observeTableBody() { + const wrapper = tableBodyRef.value; + if (!resizeObserver || !wrapper || observingTableBody) return; + + resizeObserver.observe(wrapper); + observingTableBody = true; + } + + /** + * 表单动画期间暂停表格尺寸监听，让表格不参与每帧动画计算。 + */ + function pauseTableBodyObserver() { + const wrapper = tableBodyRef.value; + if (!resizeObserver || !wrapper || !observingTableBody) return; + + resizeObserver.unobserve(wrapper); + observingTableBody = false; + } + + onMounted(() => { + resizeObserver = new ResizeObserver(() => { + scheduleTableLayout(); + }); + observeTableBody(); + scheduleTableLayout(); + }); + + onBeforeUnmount(() => { + resizeObserver?.disconnect(); + if (layoutFrame) { + window.cancelAnimationFrame(layoutFrame); + } + document.body.classList.remove('kt-table--column-resizing'); + }); + + return { + handleSearchTransitionEnd, + handleSearchTransitionStart, + scheduleTableLayout, + tableBodyRef, + tableScrollY, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTablePermission.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTablePermission.ts new file mode 100644 index 0000000..b69d346 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTablePermission.ts @@ -0,0 +1,83 @@ +import type { + KtTableButton, + KtTableContext, + KtTableRecord, + KtTableRowAction, +} from '../types'; + +import { useAccess } from '@vben/access'; + +/** + * 初始化 KtTable 按钮和行操作权限解析工具。 + * + * @param context KtTable 运行时上下文，供函数式 visible/disabled 判断读取状态。 + */ +export function useKtTablePermission(context: KtTableContext) { + const { hasAccessByCodes } = useAccess(); + + type ContextBoolean = + | ((context: KtTableContext) => boolean) + | boolean + | undefined; + + /** + * 判断当前用户是否拥有指定权限码。 + * + * @param permissionCodes 按钮或操作配置上的权限码列表。 + */ + function canAccess(permissionCodes?: string[]) { + return !permissionCodes || hasAccessByCodes(permissionCodes); + } + + /** + * 解析 boolean 或函数式 boolean 配置。 + * + * @param value 需要解析的布尔值或根据上下文计算布尔值的函数。 + * @param fallback value 未配置时使用的默认值。 + */ + function resolveBoolean(value: ContextBoolean, fallback: boolean) { + if (typeof value === 'function') return value(context); + if (typeof value === 'boolean') return value; + return fallback; + } + + /** + * 过滤当前用户可见的普通按钮。 + * + * @param items 待过滤的按钮配置列表。 + */ + function filterVisibleButtons(items: KtTableButton[]) { + return items.filter( + (item) => + canAccess(item.permissionCodes) && resolveBoolean(item.visible, true), + ); + } + + /** + * 过滤当前用户可见的行操作按钮。 + * + * @param items 待过滤的行操作配置列表。 + */ + function filterVisibleActions(items: KtTableRowAction[]) { + return items.filter( + (item) => + canAccess(item.permissionCodes) && resolveBoolean(item.visible, true), + ); + } + + /** + * 获取可参与批量操作的行数据。 + * + * @param rows 当前选中的行数据列表。 + */ + function getEnabledRows(rows: KtTableRecord[]) { + return rows.filter(Boolean); + } + + return { + filterVisibleActions, + filterVisibleButtons, + getEnabledRows, + resolveBoolean, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableResolvedProps.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableResolvedProps.ts new file mode 100644 index 0000000..dd7b013 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableResolvedProps.ts @@ -0,0 +1,103 @@ +import type { + KtTableProps, + KtTableResolvedProps, + KtTableSetProps, +} from '../types'; + +import { + getCurrentInstance, + shallowReactive, + shallowRef, + watchEffect, +} from 'vue'; + +import { + createDefaultTableProps, + KT_TABLE_PROP_KEYS, +} from '../config/ktTableProps'; + +/** + * 将 camelCase prop 名转换成模板中常见的 kebab-case。 + * + * @param value camelCase 格式的 prop 名。 + */ +function toKebabCase(value: string) { + return value.replaceAll(/([A-Z])/g, '-$1').toLowerCase(); +} + +/** + * 合并 KtTable 默认配置、register 配置和显式 props。 + * + * @param rawProps 组件当前收到的原始 props。 + */ +export function useKtTableResolvedProps(rawProps: KtTableProps) { + const instance = getCurrentInstance(); + const registeredProps = shallowRef>({}); + const props = shallowReactive({}) as KtTableResolvedProps; + Object.assign(props, createDefaultTableProps()); + + /** + * 判断某个 prop 是否由组件调用方显式传入。 + * + * @param key 需要判断的 KtTable prop 名。 + */ + function hasExplicitProp(key: keyof KtTableProps) { + const vnodeProps = instance?.vnode.props || {}; + const propName = String(key); + + return ( + Object.hasOwn(vnodeProps, propName) || + Object.hasOwn(vnodeProps, toKebabCase(propName)) + ); + } + + /** + * 收集所有显式传入的 props。 + */ + function getExplicitProps() { + const result: Partial = {}; + for (const key of KT_TABLE_PROP_KEYS) { + const value = rawProps[key]; + if (hasExplicitProp(key)) { + (result as Record)[key] = value; + } + } + + return result; + } + + /** + * 同步最终生效的 KtTable props。 + */ + function syncResolvedProps() { + Object.assign( + props, + createDefaultTableProps(), + registeredProps.value, + getExplicitProps(), + ); + } + + /** + * 写入 register 模式下的动态 props，并同步最终 props。 + * + * @param nextProps 需要合并的 props 补丁，或基于当前 props 返回补丁的函数。 + */ + const setProps: KtTableSetProps = (nextProps) => { + const patch = + typeof nextProps === 'function' ? nextProps({ ...props }) : nextProps; + + registeredProps.value = { + ...registeredProps.value, + ...patch, + }; + syncResolvedProps(); + }; + + watchEffect(syncResolvedProps); + + return { + props, + setProps, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableSelection.ts b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableSelection.ts new file mode 100644 index 0000000..51fcc32 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/hooks/useKtTableSelection.ts @@ -0,0 +1,47 @@ +import type { KtTableProps, KtTableRecord } from '../types'; + +import { computed, ref } from 'vue'; + +type KtTableSelectionProps = Readonly< + Pick, 'showSelection'> +>; + +/** + * 管理 KtTable 行选择状态。 + * + * @param props 表格选择列相关配置。 + */ +export function useKtTableSelection(props: KtTableSelectionProps) { + const selectedRowKeys = ref>([]); + const selectedRows = ref([]); + + const rowSelection = computed(() => + props.showSelection + ? { + onChange: ( + keys: Array, + tableRows: KtTableRecord[], + ) => { + selectedRowKeys.value = keys; + selectedRows.value = tableRows; + }, + selectedRowKeys: selectedRowKeys.value, + } + : undefined, + ); + + /** + * 清空当前选中的行 key 和行数据。 + */ + function clearSelection() { + selectedRowKeys.value = []; + selectedRows.value = []; + } + + return { + clearSelection, + rowSelection, + selectedRowKeys, + selectedRows, + }; +} diff --git a/apps/web-antdv-next/src/components/ktTable/index.ts b/apps/web-antdv-next/src/components/ktTable/index.ts new file mode 100644 index 0000000..c839e5b --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/index.ts @@ -0,0 +1,7 @@ +export { + defineKtTableHook, + defineKtTableModule, +} from './helpers/defineKtTable'; +export { useKtTable } from './hooks/useKtTable'; +export { default as KtTable } from './KtTable'; +export type * from './types'; diff --git a/apps/web-antdv-next/src/components/ktTable/style.scss b/apps/web-antdv-next/src/components/ktTable/style.scss new file mode 100644 index 0000000..10c79f9 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/style.scss @@ -0,0 +1,540 @@ +.kt-table { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; + overflow: hidden; + + &--fullscreen { + position: fixed; + inset: 0; + z-index: 1000; + padding: 16px; + background: hsl(var(--background)); + } + + &__main { + display: flex; + flex: 1 1 0; + flex-direction: column; + min-height: 0; + overflow: hidden; + background: hsl(var(--card)); + } + + &__main-content { + display: flex; + flex: 1 1 0; + flex-direction: column; + min-height: 0; + padding: 16px; + } + + &__search { + --kt-table-form-action-fr: 6fr; + --kt-table-form-action-min-width: 180px; + --kt-table-form-content-fr: 18fr; + --kt-table-form-content-span: 18; + --kt-table-form-item-span: 4; + --kt-table-form-tablet-columns: 2; + + flex-shrink: 0; + padding: 12px 16px 0; + background: hsl(var(--card)); + } + + &__search-content-shell { + overflow: hidden; + } + + &__search-content-shell--transitioning { + transition: height 0.22s cubic-bezier(0.22, 1, 0.36, 1); + will-change: height; + } + + &__search-content { + display: grid; + grid-template-columns: 1fr; + gap: 12px; + } + + &__search-form { + min-width: 0; + } + + &__search-actions { + display: flex; + align-items: flex-start; + justify-content: flex-start; + } + + &__search-action-stack { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + justify-content: flex-start; + width: 100%; + } + + &__search-toggle { + padding-inline: 8px; + } + + &__search-toggle-icon { + width: 16px; + height: 16px; + transition: transform 0.2s ease; + } + + &__search-toggle-icon--expanded { + transform: rotate(180deg); + } + + &__search-split { + height: 1px; + margin-top: 12px; + background: hsl(var(--border)); + } + + &__form-grid { + display: grid; + grid-template-columns: 1fr; + gap: 8px; + } + + &__form-item { + min-width: 0; + padding-bottom: 0; + } + + &__form-control { + width: 100%; + } + + &__header { + display: flex; + flex-shrink: 0; + gap: 12px; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + } + + &__header-align { + display: flex; + flex: 1 1 0; + gap: 12px; + align-items: center; + justify-content: flex-start; + min-width: 0; + } + + &__header-title { + min-width: 0; + font-size: 16px; + font-weight: 500; + } + + &__header-button { + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + gap: 8px; + align-items: center; + justify-content: flex-start; + } + + &__header-toolbar { + display: flex; + flex-shrink: 0; + align-items: center; + } + + &__header-divider { + margin-inline: 8px; + } + + &__body { + --kt-table-scroll-y: 260px; + + position: relative; + flex: 1 1 0; + min-height: 0; + overflow: hidden; + border: 1px solid hsl(var(--border)); + border-radius: 6px; + } + + &__ant, + &__ant .ant-spin-nested-loading, + &__ant .ant-spin-container { + height: 100%; + min-height: 0; + } + + &__ant { + .ant-spin-container, + .ant-table { + display: flex; + flex: 1 1 0; + flex-direction: column; + min-height: 0; + } + + .ant-table-container { + display: flex; + flex: 1 1 0; + flex-direction: column; + min-height: 0; + } + + .ant-table-header { + position: relative; + z-index: 5; + flex: 0 0 auto; + background: hsl(var(--card)); + } + + .ant-table-body { + position: relative; + z-index: 1; + min-height: 0; + max-height: var(--kt-table-scroll-y) !important; + overflow: auto !important; + } + + .ant-table-summary { + flex-shrink: 0; + margin-top: auto; + } + + .ant-table-cell { + border-bottom-color: hsl(var(--border)) !important; + } + + .ant-table-cell-fix-left, + .ant-table-cell-fix-right, + .ant-table-cell-fix-start, + .ant-table-cell-fix-end { + background: hsl(var(--card)) !important; + } + + .ant-table-thead > tr > th.ant-table-cell-fix-left, + .ant-table-thead > tr > th.ant-table-cell-fix-right, + .ant-table-thead > tr > th.ant-table-cell-fix-start, + .ant-table-thead > tr > th.ant-table-cell-fix-end { + z-index: 6; + background: hsl(var(--card)) !important; + } + + .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left, + .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right, + .ant-table-tbody > tr:hover > td.ant-table-cell-fix-start, + .ant-table-tbody > tr:hover > td.ant-table-cell-fix-end { + background: hsl(var(--accent)) !important; + } + + .ant-table-summary .ant-table-cell-fix-left, + .ant-table-summary .ant-table-cell-fix-right, + .ant-table-summary .ant-table-cell-fix-start, + .ant-table-summary .ant-table-cell-fix-end { + background: hsl(var(--card)) !important; + } + + .ant-table-thead > tr > th { + position: relative; + top: 0; + z-index: 5; + background: hsl(var(--card)) !important; + } + + tfoot.ant-table-summary .ant-table-cell, + tfoot.ant-table-summary > tr > td { + height: 44px; + padding: 0 16px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 13px; + line-height: 20px; + color: hsl(var(--foreground)); + white-space: nowrap; + border-bottom: 0 !important; + } + } + + &__body + &__footer { + margin-top: 10px; + } + + &__footer { + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + gap: 12px; + align-items: center; + min-height: 32px; + } + + &__footer-settings { + display: flex; + flex: 1 1 0; + gap: 12px; + align-items: center; + font-size: 14px; + } + + &__footer-selection { + color: hsl(var(--muted-foreground)); + } + + &__footer-selection-count { + margin-inline: 4px; + color: hsl(var(--foreground)); + } + + &__summary-value { + display: inline-flex; + gap: 4px; + align-items: center; + } + + &__summary-label { + color: hsl(var(--muted-foreground)); + } + + &__summary-title { + font-weight: 500; + } + + &__row-actions { + white-space: nowrap; + + .ant-btn { + min-width: auto; + padding-inline: 0; + } + } + + &__action-column { + min-width: 112px; + } + + &__row-action-more { + min-width: 18px; + padding-inline: 2px; + } + + &__row-actions &__row-action-more { + min-width: 18px; + padding-inline: 2px; + } + + &__row-action-more-icon { + font-size: 14px; + } + + &__button-icon, + &__toolbar-icon { + width: 16px; + height: 16px; + } + + &__toolbar-button { + width: 32px; + height: 32px; + } + + &__settings-popover { + width: 240px; + } + + &__settings-popover-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + } + + &__settings-popover-title { + font-weight: 500; + } + + &__settings-popover-list { + display: flex; + flex-direction: column; + max-height: 260px; + overflow-y: auto; + } + + &__settings-column-item { + position: relative; + display: flex; + gap: 6px; + align-items: center; + min-height: 32px; + padding: 4px 6px; + border-radius: 4px; + transition: + background 0.16s ease, + opacity 0.16s ease; + } + + &__settings-column-item:hover { + background: hsl(var(--accent)); + } + + &__settings-column-item::before, + &__settings-column-item::after { + position: absolute; + right: 6px; + left: 6px; + height: 2px; + content: ''; + background: transparent; + border-radius: 999px; + } + + &__settings-column-item::before { + top: 0; + } + + &__settings-column-item::after { + bottom: 0; + } + + &__settings-column-item--dragging { + opacity: 0.45; + } + + &__settings-column-item--drop-before::before, + &__settings-column-item--drop-after::after { + background: hsl(var(--primary)); + } + + &__settings-column-drag { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + width: 20px; + height: 24px; + padding: 0; + color: hsl(var(--muted-foreground)); + cursor: grab; + background: transparent; + border: 0; + } + + &__settings-column-drag:active { + cursor: grabbing; + } + + &__settings-column-drag-icon { + width: 16px; + height: 16px; + } + + &__settings-column-checkbox { + flex: 1 1 0; + min-width: 0; + } + + &__resizable-title { + position: relative; + } + + &__resizable-handle { + position: absolute; + top: 0; + right: -4px; + bottom: 0; + z-index: 4; + width: 8px; + cursor: col-resize; + user-select: none; + } + + &__resizable-handle:hover { + background: hsl(var(--primary) / 18%); + } +} + +@media (min-width: 1280px) { + .kt-table { + &__search-content { + grid-template-columns: + minmax(0, var(--kt-table-form-content-fr)) + minmax( + var(--kt-table-form-action-min-width), + var(--kt-table-form-action-fr) + ); + } + + &__search-actions, + &__search-action-stack { + justify-content: flex-end; + } + + &__form-grid { + grid-template-columns: repeat( + var(--kt-table-form-content-span), + minmax(0, 1fr) + ); + } + + &__form-item { + grid-column: span var(--kt-table-form-item-span) / span + var(--kt-table-form-item-span); + } + + &__form-item--collapsed-visible { + display: flex !important; + } + } +} + +@media (min-width: 768px) and (max-width: 1279px) { + .kt-table { + &__form-grid { + grid-template-columns: repeat( + var(--kt-table-form-tablet-columns), + minmax(0, 1fr) + ); + } + + &__form-item { + grid-column: span 1 / span 1; + } + + &__form-item--range { + grid-column: 1 / -1; + } + } +} + +.kt-table--column-resizing, +.kt-table--column-resizing * { + cursor: col-resize !important; + user-select: none !important; +} + +.kt-table__row-action-popover-content { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 72px; + + .ant-btn { + justify-content: flex-start; + padding-inline: 8px; + } +} + +@media (prefers-reduced-motion: reduce) { + .kt-table { + &__search-content-shell--transitioning { + transition: none; + } + } +} diff --git a/apps/web-antdv-next/src/components/ktTable/types.ts b/apps/web-antdv-next/src/components/ktTable/types.ts new file mode 100644 index 0000000..b3621e0 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/types.ts @@ -0,0 +1,274 @@ +import type { TableColumnType } from 'antdv-next'; + +import type { VNodeChild } from 'vue'; + +import type { + ExtendedFormApi, + VbenFormProps, + VbenFormSchema, +} from '@vben/common-ui'; + +export type KtTableRecord = Record; + +export type KtTableSize = 'large' | 'middle' | 'small'; + +export interface KtTableSetting { + column?: boolean; + density?: boolean; + fullscreen?: boolean; + reload?: boolean; + showSearch?: boolean; +} + +export type KtTableOperation = 'custom' | 'reload' | 'reset' | 'search'; + +export type KtTablePermissionChecker = (codes: string[]) => boolean; + +export interface KtTableFormOptions extends Omit< + VbenFormProps, + 'schema' | 'showDefaultActions' +> { + formGrid?: Partial; + labelInInput?: boolean; + schema?: KtTableFormSchema[]; +} + +export interface KtTableFormGridOptions { + actionMinWidth: number; + actionSpan: number; + contentSpan: number; + fieldSpan: number; + rangeSpan: number; + tabletColumns: number; + totalSpan: number; +} + +export type KtTableFormSchema = VbenFormSchema & { + colProps?: { + span?: number; + }; + formGridSpan?: number; +}; + +export interface KtTablePageResult { + items?: Row[]; + list?: Row[]; + records?: Row[]; + total?: number; +} + +export interface KtTableApi< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + list: ( + params: KtTableRecord & SearchValues, + context: KtTableContext, + ) => Promise | Row[]>; +} + +export interface KtTableButton< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + danger?: boolean; + disabled?: + | ((context: KtTableContext) => boolean) + | boolean; + icon?: + | ((context: KtTableContext) => VNodeChild) + | VNodeChild; + key: string; + label: string; + loading?: boolean; + onClick?: ( + context: KtTableContext, + ) => Promise | void; + operation?: KtTableOperation; + permissionCodes?: string[]; + placement?: 'form' | 'header'; + type?: 'dashed' | 'default' | 'link' | 'primary' | 'text'; + visible?: ((context: KtTableContext) => boolean) | boolean; +} + +export interface KtTableRowAction< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> extends Omit, 'disabled' | 'onClick'> { + confirm?: ((row: Row) => string) | boolean; + disabled?: + | ((row: Row, context: KtTableContext) => boolean) + | boolean; + onClick?: ( + row: Row, + context: KtTableContext, + ) => Promise | void; +} + +export interface KtTableStatistic< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + columnKey?: string; + key: string; + label?: string; + render?: (context: KtTableContext) => VNodeChild; + value?: + | (( + context: KtTableContext, + ) => number | string | VNodeChild) + | number + | string; +} + +export interface KtTableHook< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + name: string; + onAfterAction?: ( + action: + | KtTableButton + | KtTableRowAction, + result: unknown, + context: KtTableContext, + ) => Promise | void; + onAfterFetch?: ( + result: KtTablePageResult | Row[], + context: KtTableContext, + ) => Promise | void; + onBeforeAction?: ( + action: + | KtTableButton + | KtTableRowAction, + context: KtTableContext, + ) => Promise | void; + onBeforeFetch?: ( + params: KtTableRecord, + context: KtTableContext, + ) => Promise | void; + onFetchError?: ( + error: unknown, + context: KtTableContext, + ) => Promise | void; +} + +export interface KtTableModule< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + api?: KtTableApi; + buttons?: Array>; + columns?: Array>; + formOptions?: KtTableFormOptions; + hooks?: Array>; + name: string; + rowActions?: Array>; + statistics?: Array>; +} + +export interface KtTableContext< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + formApi: ExtendedFormApi; + getRows: () => Row[]; + getSearchValues: () => Promise; + registerHook: (hook: KtTableHook) => () => void; + reload: () => Promise; + reset: () => Promise; + search: () => Promise; + selectedRowKeys: () => Array; + selectedRows: () => Row[]; + setSearchValues: (values: Partial) => Promise; + unregisterHook: (name: string) => void; +} + +export type KtTableSetProps< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> = ( + props: + | (( + currentProps: KtTableResolvedProps, + ) => Partial>) + | Partial>, +) => void; + +export interface KtTableRegisterApi< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> extends KtTableContext { + getProps: () => KtTableResolvedProps; + setProps: KtTableSetProps; +} + +export type KtTableRegisterFn< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> = (api: KtTableRegisterApi) => void; + +export interface KtTableProps< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> { + api?: KtTableApi; + afterFetch?: ( + result: KtTablePageResult | Row[], + context: KtTableContext, + ) => KtTablePageResult | Promise | Row[]> | Row[]; + beforeFetch?: ( + params: KtTableRecord & SearchValues, + context: KtTableContext, + ) => + | (KtTableRecord & SearchValues) + | Promise + | undefined; + buttons?: Array>; + columns?: Array>; + dataSource?: Row[]; + formOptions?: KtTableFormOptions; + hooks?: Array>; + immediate?: boolean; + modules?: Array>; + pageSize?: number; + pageSizeOptions?: string[]; + rowActions?: Array>; + rowKey?: ((row: Row) => string) | keyof Row | string; + showDefaultButtons?: boolean; + showFooter?: boolean; + showHeader?: boolean; + showIndex?: boolean; + showPagination?: boolean; + showSelection?: boolean; + showTableSetting?: boolean; + size?: KtTableSize; + statistics?: Array>; + tableSettings?: KtTableSetting; + tableTitle?: string; +} + +export type KtTableResolvedProps< + Row extends KtTableRecord = KtTableRecord, + SearchValues extends KtTableRecord = KtTableRecord, +> = KtTableProps & { + buttons: Array>; + columns: Array>; + hooks: Array>; + immediate: boolean; + modules: Array>; + pageSize: number; + pageSizeOptions: string[]; + rowActions: Array>; + rowKey: ((row: Row) => string) | keyof Row | string; + showDefaultButtons: boolean; + showFooter: boolean; + showHeader: boolean; + showIndex: boolean; + showPagination: boolean; + showSelection: boolean; + showTableSetting: boolean; + size: KtTableSize; + statistics: Array>; + tableSettings: KtTableSetting; +}; diff --git a/apps/web-antdv-next/src/components/ktTable/utils/index.ts b/apps/web-antdv-next/src/components/ktTable/utils/index.ts new file mode 100644 index 0000000..6cdba56 --- /dev/null +++ b/apps/web-antdv-next/src/components/ktTable/utils/index.ts @@ -0,0 +1,447 @@ +import type { TableColumnType } from 'antdv-next'; + +import type { + KtTableFormGridOptions, + KtTableFormOptions, + KtTableFormSchema, + KtTablePageResult, + KtTableRecord, +} from '../types'; + +import type { VbenFormProps } from '#/adapter/form'; + +import { KT_TABLE_DEFAULT_FORM_GRID } from '../config/constants'; + +/** + * 统一分页接口和数组数据源的返回结构。 + * + * @param result 接口返回的分页对象或静态数组数据源。 + */ +export function normalizePageResult( + result: KtTablePageResult | Row[], +) { + if (Array.isArray(result)) { + return { + list: result, + total: result.length, + }; + } + + const list = result.list || result.records || result.items || []; + + return { + list, + total: typeof result.total === 'number' ? result.total : list.length, + }; +} + +/** + * 合并主表格和模块注入的 Vben 表单配置。 + * + * @param options 待合并的表单配置列表，undefined 项会被忽略。 + */ +export function mergeFormOptions( + options: Array, +) { + let labelInInput = true; + const formGrid = resolveFormGridOptions(options); + let mergedOptions: KtTableFormOptions = { + commonConfig: { + componentProps: { + class: 'kt-table__form-control', + }, + controlClass: 'kt-table__form-control', + formItemClass: 'kt-table__form-item', + hideLabel: true, + labelWidth: 72, + }, + compact: true, + collapsed: false, + collapsedRows: 1, + collapseReserveAction: false, + layout: 'horizontal', + schema: [], + showCollapseButton: true, + submitOnEnter: true, + // 对齐 ShyTable 的 24 栅格分栏：18 份表单区域 + 6 份操作区域。 + wrapperClass: 'kt-table__form-grid', + }; + + for (const item of options) { + if (!item) continue; + labelInInput = item.labelInInput ?? labelInInput; + + mergedOptions = { + ...mergedOptions, + ...item, + arrayToStringFields: [ + ...(mergedOptions.arrayToStringFields || []), + ...(item.arrayToStringFields || []), + ], + commonConfig: { + ...mergedOptions.commonConfig, + ...item.commonConfig, + }, + fieldMappingTime: [ + ...(mergedOptions.fieldMappingTime || []), + ...(item.fieldMappingTime || []), + ], + schema: [...(mergedOptions.schema || []), ...(item.schema || [])], + }; + } + + mergedOptions = { + ...mergedOptions, + commonConfig: labelInInput + ? { + ...mergedOptions.commonConfig, + hideLabel: true, + } + : mergedOptions.commonConfig, + schema: withKtTableFormLayout( + mergedOptions.schema || [], + mergedOptions.collapsedRows || 1, + formGrid, + labelInInput, + ), + }; + + const { + formGrid: _formGrid, + labelInInput: _labelInInput, + ...formProps + } = mergedOptions; + + // 表格统一接管查询、重置按钮，表单只负责字段渲染和值管理。 + return { + ...formProps, + showDefaultActions: false, + } as VbenFormProps; +} + +/** + * 合并并规范化 KtTable 搜索区的 24 栅格分栏配置。 + * + * @param options 待合并的表单配置列表，后面的配置会覆盖前面的同名分栏参数。 + */ +export function resolveFormGridOptions( + options: Array, +): KtTableFormGridOptions { + const formGrid: KtTableFormGridOptions = { ...KT_TABLE_DEFAULT_FORM_GRID }; + + for (const item of options) { + if (item?.formGrid) { + Object.assign(formGrid, item.formGrid); + } + } + + const totalSpan = Math.max( + toPositiveInteger(formGrid.totalSpan, KT_TABLE_DEFAULT_FORM_GRID.totalSpan), + 2, + ); + const actionSpan = Math.min( + toPositiveInteger( + formGrid.actionSpan, + KT_TABLE_DEFAULT_FORM_GRID.actionSpan, + ), + totalSpan - 1, + ); + const contentSpan = Math.min( + toPositiveInteger( + formGrid.contentSpan, + Math.max(totalSpan - actionSpan, 1), + ), + totalSpan, + ); + + return { + actionMinWidth: toPositiveInteger( + formGrid.actionMinWidth, + KT_TABLE_DEFAULT_FORM_GRID.actionMinWidth, + ), + actionSpan, + contentSpan, + fieldSpan: Math.min( + toPositiveInteger( + formGrid.fieldSpan, + KT_TABLE_DEFAULT_FORM_GRID.fieldSpan, + ), + contentSpan, + ), + rangeSpan: Math.min( + toPositiveInteger( + formGrid.rangeSpan, + KT_TABLE_DEFAULT_FORM_GRID.rangeSpan, + ), + contentSpan, + ), + tabletColumns: toPositiveInteger( + formGrid.tabletColumns, + KT_TABLE_DEFAULT_FORM_GRID.tabletColumns, + ), + totalSpan, + }; +} + +/** + * 将用户传入的栅格数值规整成正整数。 + * + * @param value 待规整的数值。 + * @param fallback 当前值无效时使用的兜底数值。 + */ +function toPositiveInteger(value: number | undefined, fallback: number) { + const normalized = Number(value); + + return Number.isFinite(normalized) && normalized > 0 + ? Math.round(normalized) + : fallback; +} + +/** + * 从表单 label 中读取可用于 placeholder 的文本。 + * + * @param label 表单项 label，只有字符串 label 会参与 placeholder 生成。 + */ +function getTextLabel(label: unknown) { + return typeof label === 'string' ? label : ''; +} + +/** + * 根据组件类型和字段文案生成默认 placeholder。 + * + * @param component 表单组件名，用于判断输入、选择、日期选择等类型。 + * @param label 表单字段文案，用于拼接用户可读的 placeholder。 + */ +function createPlaceholder(component: unknown, label: string) { + if (!label || typeof component !== 'string') return undefined; + + if (component.includes('Picker')) { + return component === 'RangePicker' + ? [`开始${label}`, `结束${label}`] + : `请选择${label}`; + } + + if (component.includes('Select') || component.includes('Cascader')) { + return `请选择${label}`; + } + + if (component.includes('Input')) { + return `请输入${label}`; + } + + return label; +} + +/** + * 合并表单项原有 componentProps 和自动生成的 placeholder。 + * + * @param schema 当前表单项配置，用于读取组件类型、label 和字段信息。 + * @param componentProps 当前表单组件属性，已有 placeholder 时不会覆盖。 + */ +function mergePlaceholder( + schema: NonNullable[number], + componentProps: Record, +) { + const label = getTextLabel(schema.label); + const placeholder = createPlaceholder(schema.component, label); + + if (!placeholder || componentProps.placeholder) return componentProps; + + return { + ...componentProps, + placeholder, + }; +} + +/** + * 补齐 KtTable 表单布局 class，并在需要时将字段 label 收进输入框 placeholder。 + * + * @param schema 表单 schema 列表。 + * @param collapsedRows 表单收起时保留展示的行数。 + * @param formGrid 当前表格搜索区的栅格分栏配置。 + * @param labelInInput 是否将字段 label 转换成表单控件 placeholder。 + */ +function withKtTableFormLayout( + schema: NonNullable, + collapsedRows: number, + formGrid: KtTableFormGridOptions, + labelInInput: boolean, +) { + const collapsedVisibleFields = getCollapsedVisibleFields( + schema, + collapsedRows, + formGrid, + ); + + return schema.map((item) => { + const span = getTableFormSpan(item, formGrid); + const componentProps = item.componentProps; + const formItemClass = mergeFormItemClass( + getTableFormItemClass( + item.component, + collapsedVisibleFields.has(item.fieldName), + ), + item.formItemClass, + ); + + if (typeof componentProps === 'function') { + const resolveComponentProps = componentProps as ( + ...args: any[] + ) => Record; + + return { + ...item, + componentProps: (...args: any[]) => + labelInInput + ? mergePlaceholder(item, resolveComponentProps(...args) || {}) + : resolveComponentProps(...args), + formItemClass, + style: mergeFormItemStyle(item, span), + }; + } + + return { + ...item, + componentProps: labelInInput + ? mergePlaceholder(item, item.componentProps || {}) + : item.componentProps, + formItemClass, + style: mergeFormItemStyle(item, span), + }; + }); +} + +/** + * 计算表单收起后仍然可见的字段集合。 + * + * @param schema 表单 schema 列表。 + * @param collapsedRows 表单收起后允许显示的行数。 + * @param formGrid 当前表格搜索区的栅格分栏配置。 + */ +function getCollapsedVisibleFields( + schema: NonNullable, + collapsedRows: number, + formGrid: KtTableFormGridOptions, +) { + const visibleFields = new Set(); + let currentRowSpan = 0; + let row = 1; + + for (const item of schema) { + const span = getTableFormSpan(item, formGrid); + + if (currentRowSpan + span > formGrid.contentSpan) { + row += 1; + currentRowSpan = 0; + } + + if (row > collapsedRows) break; + + visibleFields.add(item.fieldName); + currentRowSpan += span; + } + + return visibleFields; +} + +/** + * 根据组件类型和收起可见状态生成表单项 class。 + * + * @param component 表单组件名，用于区分普通字段和区间字段宽度。 + * @param keepCollapsedVisible 当前字段在收起态是否仍需要保留显示。 + */ +function getTableFormItemClass( + component: unknown, + keepCollapsedVisible: boolean, +) { + const baseClass = + component === 'RangePicker' + ? 'kt-table__form-item--range' + : 'kt-table__form-item--field'; + + // KtTable 的操作按钮在表单外部，桌面端收起时需要保留完整左侧 18 栅格行。 + return keepCollapsedVisible + ? `${baseClass} kt-table__form-item--collapsed-visible` + : baseClass; +} + +/** + * 获取字段在表单内容区栅格布局中占用的列宽。 + * + * @param schema 当前表单项配置，支持业务侧通过 formGridSpan 或 colProps.span 覆盖宽度。 + * @param formGrid 当前表格搜索区的栅格分栏配置。 + */ +function getTableFormSpan( + schema: KtTableFormSchema, + formGrid: KtTableFormGridOptions, +) { + const customSpan = schema.formGridSpan ?? schema.colProps?.span; + const defaultSpan = + schema.component === 'RangePicker' + ? formGrid.rangeSpan + : formGrid.fieldSpan; + const span = typeof customSpan === 'number' ? customSpan : defaultSpan; + + return Math.min( + toPositiveInteger(span, formGrid.fieldSpan), + formGrid.contentSpan, + ); +} + +/** + * 合并业务侧表单项 style 和 KtTable 根据栅格计算出的 span 变量。 + * + * @param schema 当前表单项配置，用于读取业务侧可能传入的 style。 + * @param span 当前字段在表单内容区内占用的栅格数量。 + */ +function mergeFormItemStyle(schema: KtTableFormSchema, span: number) { + const gridStyle = { + '--kt-table-form-item-span': String(span), + }; + const style = (schema as any).style; + + if (Array.isArray(style)) return [...style, gridStyle]; + if (style && typeof style === 'object') return { ...style, ...gridStyle }; + if (typeof style === 'string') return [style, gridStyle]; + + return gridStyle; +} + +/** + * 合并多个 class 字符串并过滤空值。 + * + * @param classes 待合并的 class 字符串列表。 + */ +function mergeClass(...classes: Array) { + return classes.filter(Boolean).join(' '); +} + +/** + * 合并 KtTable 默认表单项 class 和业务侧自定义 class。 + * + * @param baseClass KtTable 根据布局计算出的基础 class。 + * @param customClass 业务侧传入的静态 class 或动态 class 函数。 + */ +function mergeFormItemClass( + baseClass: string, + customClass: (() => string) | string | undefined, +) { + if (typeof customClass === 'function') { + return () => mergeClass(baseClass, customClass()); + } + + return mergeClass(baseClass, customClass); +} + +/** + * 从 Antdv 列配置中读取稳定的列唯一标识。 + * + * @param column 当前表格列配置，优先使用 key，其次使用 dataIndex。 + */ +export function getColumnKey(column: TableColumnType) { + const dataIndex = Array.isArray(column.dataIndex) + ? column.dataIndex.join('.') + : column.dataIndex; + + return String(column.key || dataIndex || ''); +} diff --git a/apps/web-antdv-next/src/locales/langs/en-US/system.json b/apps/web-antdv-next/src/locales/langs/en-US/system.json index 003dfbb..031820b 100644 --- a/apps/web-antdv-next/src/locales/langs/en-US/system.json +++ b/apps/web-antdv-next/src/locales/langs/en-US/system.json @@ -49,6 +49,9 @@ }, "badgeVariants": "Badge Style" }, + "ktTableDemo": { + "title": "Table Demo" + }, "role": { "title": "Role Management", "list": "Role List", diff --git a/apps/web-antdv-next/src/locales/langs/zh-CN/system.json b/apps/web-antdv-next/src/locales/langs/zh-CN/system.json index be5a7ae..6576be3 100644 --- a/apps/web-antdv-next/src/locales/langs/zh-CN/system.json +++ b/apps/web-antdv-next/src/locales/langs/zh-CN/system.json @@ -51,6 +51,9 @@ "typeLink": "外链", "typeMenu": "菜单" }, + "ktTableDemo": { + "title": "表格演示" + }, "role": { "title": "角色管理", "list": "角色列表", diff --git a/apps/web-antdv-next/src/router/routes/modules/system.ts b/apps/web-antdv-next/src/router/routes/modules/system.ts index e1bf712..96f348c 100644 --- a/apps/web-antdv-next/src/router/routes/modules/system.ts +++ b/apps/web-antdv-next/src/router/routes/modules/system.ts @@ -39,6 +39,15 @@ const routes: RouteRecordRaw[] = [ }, component: () => import('#/views/system/dept/list.vue'), }, + { + path: '/system/ktTableDemo', + name: 'SystemKtTableDemo', + meta: { + icon: 'lucide:table-2', + title: $t('system.ktTableDemo.title'), + }, + component: () => import('#/views/system/ktTableDemo/list'), + }, ], }, ]; diff --git a/apps/web-antdv-next/src/views/blog/article/list.tsx b/apps/web-antdv-next/src/views/blog/article/list.tsx index 6907876..f47af6e 100644 --- a/apps/web-antdv-next/src/views/blog/article/list.tsx +++ b/apps/web-antdv-next/src/views/blog/article/list.tsx @@ -1,23 +1,33 @@ +import type { TableColumnType } from 'antdv-next'; + import type { WordpressBlogApi } from '#/api/blog'; - -import { computed, defineComponent, onMounted, reactive, ref } from 'vue'; -import { useRoute, useRouter } from 'vue-router'; - -import { useAccess } from '@vben/access'; -import { Page } from '@vben/common-ui'; -import { Plus, RotateCw } from '@vben/icons'; +import type { + KtTableApi, + KtTableButton, + KtTableContext, + KtTableRowAction, +} from '#/components/ktTable'; + +import { + computed, + defineComponent, + onActivated, + onMounted, + reactive, + ref, +} from 'vue'; + +import { Page } from '@vben/common-ui'; +import { Plus } from '@vben/icons'; import { - Button, Form, FormItem, Input, message, Modal, Select, - Space, Switch, - Table, Tag, TextArea, } from 'antdv-next'; @@ -30,52 +40,45 @@ import { getTagList, updateArticle, } from '#/api/blog'; +import { KtTable, useKtTable } from '#/components/ktTable'; + +import { consumeBlogArticleFilters } from '../modules/use-article-filters'; type TermOption = { label: string; value: number; }; -const AButton = Button as any; +type ArticleSearchValues = { + categories?: number[]; + search?: string; + status?: string; + tags?: number[]; +}; + +const AKtTable = KtTable as any; const AInput = Input as any; const AModal = Modal as any; const ASelect = Select as any; const ASwitch = Switch as any; -const ATable = Table as any; const ATextArea = TextArea as any; +const articleStatusOptions = [ + { color: 'success', label: '已发布', value: 'publish' }, + { color: 'default', label: '草稿', value: 'draft' }, + { color: 'warning', label: '待审核', value: 'pending' }, + { color: 'processing', label: '私有', value: 'private' }, +]; + export default defineComponent({ name: 'BlogArticleList', setup() { - const route = useRoute(); - const router = useRouter(); - const { hasAccessByCodes } = useAccess(); - - const articleStatusOptions = [ - { color: 'success', label: '已发布', value: 'publish' }, - { color: 'default', label: '草稿', value: 'draft' }, - { color: 'warning', label: '待审核', value: 'pending' }, - { color: 'processing', label: '私有', value: 'private' }, - ]; - - const loading = ref(false); const saving = ref(false); const modalOpen = ref(false); - const rows = ref([]); - const total = ref(0); const editingId = ref(); const categoryOptions = ref([]); const tagOptions = ref([]); - const query = reactive({ - categoryId: undefined as number | undefined, - pageNo: 1, - pageSize: 10, - search: '', - status: undefined as string | undefined, - tagId: undefined as number | undefined, - }); - const form = reactive({ categories: [], content: '', @@ -90,32 +93,116 @@ export default defineComponent({ const modalTitle = computed(() => editingId.value ? '编辑文章' : '新建文章', ); - const canCreate = computed(() => hasAccessByCodes(['Blog:Article:Create'])); - const canEdit = computed(() => hasAccessByCodes(['Blog:Article:Edit'])); - const canDelete = computed(() => hasAccessByCodes(['Blog:Article:Delete'])); - const canOperate = computed(() => canEdit.value || canDelete.value); - const columns = computed(() => { - const baseColumns = [ - { dataIndex: 'title', key: 'title', title: '标题' }, - { dataIndex: 'status', key: 'status', title: '状态', width: 110 }, - { - dataIndex: 'categories', - key: 'categories', - title: '分类', - width: 180, - }, - { dataIndex: 'tags', key: 'tags', title: '标签', width: 180 }, - { - dataIndex: 'modified', - key: 'modified', - title: '更新时间', - width: 180, - }, - ]; + const columns: Array> = [ + { dataIndex: 'title', key: 'title', title: '标题', width: 280 }, + { dataIndex: 'status', key: 'status', title: '状态', width: 110 }, + { dataIndex: 'categories', key: 'categories', title: '分类', width: 180 }, + { dataIndex: 'tags', key: 'tags', title: '标签', width: 180 }, + { dataIndex: 'modified', key: 'modified', title: '更新时间', width: 180 }, + ]; - return canOperate.value - ? [...baseColumns, { key: 'action', title: '操作', width: 150 }] - : baseColumns; + const api: KtTableApi = { + list: async (params) => { + return await getArticleList({ + categories: Array.isArray(params.categories) + ? params.categories.join(',') + : undefined, + pageNo: params.pageNo, + pageSize: params.pageSize, + search: params.search, + status: params.status || undefined, + tags: Array.isArray(params.tags) ? params.tags.join(',') : undefined, + }); + }, + }; + const buttons: Array< + KtTableButton + > = [ + { + icon: , + key: 'create', + label: '新建文章', + onClick: openCreate, + permissionCodes: ['Blog:Article:Create'], + type: 'primary', + }, + ]; + const rowActions: Array< + KtTableRowAction + > = [ + { + key: 'edit', + label: '编辑', + onClick: openEdit, + permissionCodes: ['Blog:Article:Edit'], + }, + { + confirm: (row) => + `确认删除文章「${getRenderedText(row.title) || row.id}」吗？`, + danger: true, + key: 'delete', + label: '删除', + onClick: async (row, context) => { + await deleteArticle(row.id); + message.success('文章删除成功'); + await context.reload(); + }, + permissionCodes: ['Blog:Article:Delete'], + }, + ]; + + const [registerTable, tableApi] = useKtTable< + WordpressBlogApi.Article, + ArticleSearchValues + >({ + api, + buttons, + columns, + formOptions: { + schema: [ + { + component: 'Input', + componentProps: { + allowClear: true, + placeholder: '搜索标题或内容', + }, + fieldName: 'search', + label: '关键词', + }, + { + component: 'Select', + componentProps: { + allowClear: true, + options: articleStatusOptions, + }, + fieldName: 'status', + label: '文章状态', + }, + { + component: 'Select', + componentProps: { + allowClear: true, + mode: 'multiple', + options: categoryOptions.value, + }, + fieldName: 'categories', + label: '文章分类', + }, + { + component: 'Select', + componentProps: { + allowClear: true, + mode: 'multiple', + options: tagOptions.value, + }, + fieldName: 'tags', + label: '文章标签', + }, + ], + }, + immediate: false, + rowActions, + tableTitle: '文章管理', }); function getRenderedText(value?: string | WordpressBlogApi.RenderedField) { @@ -142,38 +229,16 @@ export default defineComponent({ return options.find((item) => item.value === value)?.label || `${value}`; } - function getRouteNumber(name: 'category' | 'tag') { - const value = route.query[name]; - const rawValue = Array.isArray(value) ? value[0] : value; - const id = Number(rawValue); + async function applyPendingFilters() { + const filters = consumeBlogArticleFilters(); + if (!filters) return false; - return Number.isFinite(id) && id > 0 ? id : undefined; - } - - function readRouteFilters() { - query.categoryId = getRouteNumber('category'); - query.tagId = getRouteNumber('tag'); - } - - function syncRouteFilters() { - const nextQuery = { ...route.query }; - - if (query.categoryId) { - nextQuery.category = `${query.categoryId}`; - } else { - delete nextQuery.category; - } - - if (query.tagId) { - nextQuery.tag = `${query.tagId}`; - } else { - delete nextQuery.tag; - } - - return router.replace({ - name: 'BlogArticle', - query: nextQuery, + await tableApi.setSearchValues({ + categories: filters.categories || [], + tags: filters.tags || [], }); + + return true; } async function loadTermOptions() { @@ -189,84 +254,95 @@ export default defineComponent({ label: item.name, value: item.id, })); - } - - async function loadArticles() { - loading.value = true; - try { - const result = await getArticleList({ - categories: query.categoryId ? `${query.categoryId}` : undefined, - pageNo: query.pageNo, - pageSize: query.pageSize, - search: query.search, - status: query.status || undefined, - tags: query.tagId ? `${query.tagId}` : undefined, - }); - rows.value = result.list; - total.value = result.total; - } finally { - loading.value = false; - } - } - - async function searchArticles() { - query.pageNo = 1; - await syncRouteFilters(); - await loadArticles(); - } - - function resetSearch() { - query.categoryId = undefined; - query.search = ''; - query.status = undefined; - query.tagId = undefined; - query.pageNo = 1; - syncRouteFilters(); - loadArticles(); + tableApi.setProps({ + formOptions: { + schema: [ + { + component: 'Input', + componentProps: { + allowClear: true, + placeholder: '搜索标题或内容', + }, + fieldName: 'search', + label: '关键词', + }, + { + component: 'Select', + componentProps: { + allowClear: true, + options: articleStatusOptions, + }, + fieldName: 'status', + label: '文章状态', + }, + { + component: 'Select', + componentProps: { + allowClear: true, + mode: 'multiple', + options: categoryOptions.value, + }, + fieldName: 'categories', + label: '文章分类', + }, + { + component: 'Select', + componentProps: { + allowClear: true, + mode: 'multiple', + options: tagOptions.value, + }, + fieldName: 'tags', + label: '文章标签', + }, + ], + }, + }); } async function filterByCategory(id: number) { - query.categoryId = id; - query.pageNo = 1; - await syncRouteFilters(); - await loadArticles(); + await tableApi.setSearchValues({ categories: [id] }); + await tableApi.search(); } async function filterByTag(id: number) { - query.tagId = id; - query.pageNo = 1; - await syncRouteFilters(); - await loadArticles(); + await tableApi.setSearchValues({ tags: [id] }); + await tableApi.search(); } - function openCreate() { + async function openCreate( + context?: KtTableContext, + ) { + const searchValues = context + ? await context.getSearchValues() + : await tableApi.getSearchValues(); + editingId.value = undefined; Object.assign(form, { - categories: [], + categories: [...(searchValues.categories || [])], content: '', excerpt: '', slug: '', status: 'draft', sticky: false, - tags: [], + tags: [...(searchValues.tags || [])], title: '', }); modalOpen.value = true; } - function openEdit(row: Record | WordpressBlogApi.Article) { - const article = row as WordpressBlogApi.Article; - editingId.value = article.id; + function openEdit(row: WordpressBlogApi.Article) { + editingId.value = row.id; Object.assign(form, { - categories: article.categories || [], - content: getRenderedText(article.content), - excerpt: getRenderedText(article.excerpt), - id: article.id, - slug: article.slug || '', - status: article.status || 'draft', - sticky: !!article.sticky, - tags: article.tags || [], - title: getRenderedText(article.title), + categories: row.categories || [], + content: getRenderedText(row.content), + excerpt: getRenderedText(row.excerpt), + id: row.id, + slug: row.slug || '', + status: row.status || 'draft', + sticky: !!row.sticky, + tags: row.tags || [], + title: getRenderedText(row.title), }); modalOpen.value = true; } @@ -276,6 +352,7 @@ export default defineComponent({ message.warning('请填写文章标题'); return; } + saving.value = true; try { const payload = { @@ -288,202 +365,97 @@ export default defineComponent({ : createArticle(payload)); message.success('文章保存成功'); modalOpen.value = false; - loadArticles(); + await tableApi.reload(); } finally { saving.value = false; } } - function confirmDelete( - row: Record | WordpressBlogApi.Article, - ) { - const article = row as WordpressBlogApi.Article; - Modal.confirm({ - content: `确认删除文章「${getRenderedText(article.title) || article.id}」吗？`, - onOk: async () => { - await deleteArticle(article.id); - message.success('文章删除成功'); - loadArticles(); - }, - title: '删除文章', - }); - } - - function handleTableChange(pagination: any) { - query.pageNo = pagination.current || 1; - query.pageSize = pagination.pageSize || 10; - loadArticles(); - } - onMounted(async () => { - readRouteFilters(); await loadTermOptions(); - await loadArticles(); + await applyPendingFilters(); + await tableApi.reload(); + }); + + onActivated(async () => { + if (await applyPendingFilters()) { + await tableApi.search(); + } }); return () => ( -
-
- - { - query.search = value; - }} - placeholder="搜索标题或内容" - value={query.search} - /> - { - query.status = value; - }} - options={articleStatusOptions} - placeholder="文章状态" - value={query.status} - /> - { - query.categoryId = value; - }} - options={categoryOptions.value} - placeholder="文章分类" - value={query.categoryId} - /> - { - query.tagId = value; - }} - options={tagOptions.value} - placeholder="文章标签" - value={query.tagId} - /> - 查询 - - - 重置 - - - {canCreate.value ? ( - - - 新建文章 - - ) : null} -
+ { + const article = record as WordpressBlogApi.Article; -
- { - if (column.key === 'title') { - return ( -
-
- {getRenderedText(record.title) || '-'} -
- {record.link ? ( - - 查看原文 - - ) : null} -
- ); - } + if (column.key === 'title') { + return ( +
+
+ {getRenderedText(article.title) || '-'} +
+ {article.link ? ( + + 查看原文 + + ) : null} +
+ ); + } - if (column.key === 'status') { - const status = getStatusOption(record.status); - return {status?.label}; - } + if (column.key === 'status') { + const status = getStatusOption(article.status); + return {status?.label}; + } - if (column.key === 'categories') { - return record.categories?.length ? ( - - {record.categories.map((item: number) => ( - filterByCategory(item)} - > - {getTermLabel(categoryOptions.value, item)} - - ))} - - ) : ( - - - ); - } + if (column.key === 'categories') { + return article.categories?.length ? ( +
+ {article.categories.map((item) => ( + filterByCategory(item)} + > + {getTermLabel(categoryOptions.value, item)} + + ))} +
+ ) : ( + - + ); + } - if (column.key === 'tags') { - return record.tags?.length ? ( - - {record.tags.map((item: number) => ( - filterByTag(item)} - > - {getTermLabel(tagOptions.value, item)} - - ))} - - ) : ( - - - ); - } + if (column.key === 'tags') { + return article.tags?.length ? ( +
+ {article.tags.map((item) => ( + filterByTag(item)} + > + {getTermLabel(tagOptions.value, item)} + + ))} +
+ ) : ( + - + ); + } - if (column.key === 'action') { - return ( - - {canEdit.value ? ( - openEdit(record)} type="link"> - 编辑 - - ) : null} - {canDelete.value ? ( - confirmDelete(record)} - type="link" - > - 删除 - - ) : null} - - ); - } - - return undefined; - }, - }} - /> -
-
+ return undefined; + }, + }} + /> ([]); - const total = ref(0); const editingId = ref(); - - const query = reactive({ - pageNo: 1, - pageSize: 10, - search: '', - }); + const tableRows = ref([]); const form = reactive({ description: '', @@ -90,72 +90,139 @@ export default defineComponent({ const permissionModule = computed(() => props.kind === 'category' ? 'Blog:Category' : 'Blog:Tag', ); - const canCreate = computed(() => - hasAccessByCodes([`${permissionModule.value}:Create`]), - ); - const canEdit = computed(() => - hasAccessByCodes([`${permissionModule.value}:Edit`]), - ); - const canDelete = computed(() => - hasAccessByCodes([`${permissionModule.value}:Delete`]), - ); - const canViewArticles = computed(() => - hasAccessByCodes(['Blog:Article:List']), - ); - const canOperate = computed( - () => canViewArticles.value || canEdit.value || canDelete.value, - ); - const columns = computed(() => { - const baseColumns = [ - { dataIndex: 'name', key: 'name', title: '名称' }, + const columns = computed>>( + () => [ + { dataIndex: 'name', key: 'name', title: '名称', width: 220 }, { dataIndex: 'slug', key: 'slug', title: '别名', width: 180 }, { dataIndex: 'count', key: 'count', title: '文章数', width: 100 }, - { dataIndex: 'description', key: 'description', title: '描述' }, - ]; - - return canOperate.value - ? [...baseColumns, { key: 'action', title: '操作', width: 220 }] - : baseColumns; - }); - + { + dataIndex: 'description', + key: 'description', + title: '描述', + width: 300, + }, + ], + ); const parentOptions = computed(() => - rows.value + tableRows.value .filter((item) => item.id !== editingId.value) .map((item) => ({ label: item.name, value: item.id })), ); + const api: KtTableApi = { + list: async (params) => { + const requestParams = { + hide_empty: false, + pageNo: params.pageNo, + pageSize: params.pageSize, + search: params.search, + }; + + return props.kind === 'category' + ? await getCategoryList(requestParams) + : await getTagList(requestParams); + }, + }; + const buttons = computed< + Array> + >(() => [ + { + icon: , + key: 'create', + label: `新建${props.title}`, + onClick: openCreate, + permissionCodes: [`${permissionModule.value}:Create`], + type: 'primary', + }, + ]); + const rowActions = computed< + Array> + >(() => [ + { + key: 'articles', + label: '查看文章', + onClick: openRelatedArticles, + permissionCodes: ['Blog:Article:List'], + }, + { + key: 'edit', + label: '编辑', + onClick: openEdit, + permissionCodes: [`${permissionModule.value}:Edit`], + }, + { + confirm: (row) => + `确认删除${props.title}「${row.name}」吗？WordPress 分类和标签不支持回收站，本操作会强制删除该条目，但不会删除已关联文章。`, + danger: true, + key: 'delete', + label: '删除', + onClick: async (row, context) => { + await (props.kind === 'category' + ? deleteCategory(row.id) + : deleteTag(row.id)); + message.success(`${props.title}删除成功`); + await context.reload(); + }, + permissionCodes: [`${permissionModule.value}:Delete`], + }, + ]); + + const [registerTable, tableApi] = useKtTable< + WordpressBlogApi.Term, + TermSearchValues + >({ + afterFetch: (result) => { + tableRows.value = Array.isArray(result) + ? result + : result.list || result.records || result.items || []; + return result; + }, + api, + buttons: buttons.value, + columns: columns.value, + formOptions: { + schema: [ + { + component: 'Input', + componentProps: { + allowClear: true, + placeholder: `搜索${props.title}名称`, + }, + fieldName: 'search', + label: '关键词', + }, + ], + }, + immediate: false, + rowActions: rowActions.value, + tableTitle: props.title, + }); + function getRouteSearch() { const value = route.query.search; return Array.isArray(value) ? value[0] || '' : value || ''; } - async function requestList() { - const params = { - hide_empty: false, - pageNo: query.pageNo, - pageSize: query.pageSize, - search: query.search, - }; - return props.kind === 'category' - ? await getCategoryList(params) - : await getTagList(params); - } - - async function loadTerms() { - loading.value = true; - try { - const result = await requestList(); - rows.value = result.list; - total.value = result.total; - } finally { - loading.value = false; - } - } - - function resetSearch() { - query.search = ''; - query.pageNo = 1; - loadTerms(); + function syncTableProps() { + tableApi.setProps({ + buttons: buttons.value, + columns: columns.value, + formOptions: { + schema: [ + { + component: 'Input', + componentProps: { + allowClear: true, + placeholder: `搜索${props.title}名称`, + }, + fieldName: 'search', + label: '关键词', + }, + ], + }, + rowActions: rowActions.value, + tableTitle: props.title, + }); } function openCreate() { @@ -169,15 +236,14 @@ export default defineComponent({ modalOpen.value = true; } - function openEdit(row: Record | WordpressBlogApi.Term) { - const term = row as WordpressBlogApi.Term; - editingId.value = term.id; + function openEdit(row: WordpressBlogApi.Term) { + editingId.value = row.id; Object.assign(form, { - description: term.description || '', - id: term.id, - name: term.name, - parent: term.parent || undefined, - slug: term.slug || '', + description: row.description || '', + id: row.id, + name: row.name, + parent: row.parent || undefined, + slug: row.slug || '', }); modalOpen.value = true; } @@ -187,6 +253,7 @@ export default defineComponent({ message.warning(`请填写${props.title}名称`); return; } + saving.value = true; try { const payload = { @@ -203,148 +270,58 @@ export default defineComponent({ } message.success(`${props.title}保存成功`); modalOpen.value = false; - loadTerms(); + await tableApi.reload(); } finally { saving.value = false; } } - function confirmDelete(row: Record | WordpressBlogApi.Term) { - const term = row as WordpressBlogApi.Term; - Modal.confirm({ - content: `确认删除${props.title}「${term.name}」吗？`, - onOk: async () => { - await (props.kind === 'category' - ? deleteCategory(term.id) - : deleteTag(term.id)); - message.success(`${props.title}删除成功`); - loadTerms(); - }, - title: `删除${props.title}`, - }); - } - - function openRelatedArticles( - row: Record | WordpressBlogApi.Term, - ) { - const term = row as WordpressBlogApi.Term; + function openRelatedArticles(row: WordpressBlogApi.Term) { + setBlogArticleFilters( + props.kind === 'category' + ? { categories: [row.id] } + : { tags: [row.id] }, + ); router.push({ name: 'BlogArticle', - query: - props.kind === 'category' - ? { category: `${term.id}` } - : { tag: `${term.id}` }, }); } - function handleTableChange(pagination: any) { - query.pageNo = pagination.current || 1; - query.pageSize = pagination.pageSize || 10; - loadTerms(); + async function reloadWithRouteSearch() { + syncTableProps(); + await tableApi.setSearchValues({ search: getRouteSearch() }); + await tableApi.reload(); } watch( () => props.kind, () => { - query.search = getRouteSearch(); - query.pageNo = 1; - loadTerms(); + reloadWithRouteSearch(); }, ); onMounted(() => { - query.search = getRouteSearch(); - loadTerms(); + reloadWithRouteSearch(); }); return () => ( -
-
- - { - query.search = value; - }} - placeholder={`搜索${props.title}名称`} - value={query.search} - /> - 查询 - - - 重置 - - - {canCreate.value ? ( - - - 新建{props.title} - - ) : null} -
+ { + const term = record as WordpressBlogApi.Term; -
- { - if (column.key === 'description') { - return ( - - {record.description || '-'} - - ); - } + if (column.key === 'description') { + return ( + {term.description || '-'} + ); + } - if (column.key === 'action') { - return ( - - {canViewArticles.value ? ( - openRelatedArticles(record)} - type="link" - > - 查看文章 - - ) : null} - {canEdit.value ? ( - openEdit(record)} type="link"> - 编辑 - - ) : null} - {canDelete.value ? ( - confirmDelete(record)} - type="link" - > - 删除 - - ) : null} - - ); - } - - return undefined; - }, - }} - /> -
-
+ return undefined; + }, + }} + /> -import type { - OnActionClickParams, - VxeTableGridOptions, -} from '#/adapter/vxe-table'; -import type { SystemDeptApi } from '#/api/system/dept'; +import type { TableColumnType } from 'antdv-next'; + +import type { SystemDeptApi } from '#/api/system/dept'; +import type { + KtTableApi, + KtTableButton, + KtTableContext, + KtTableRowAction, +} from '#/components/ktTable'; + +import { h } from 'vue'; -import { useAccess } from '@vben/access'; import { Page, useVbenModal } from '@vben/common-ui'; import { Plus } from '@vben/icons'; -import { Button, message } from 'antdv-next'; +import { message, Tag } from 'antdv-next'; -import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { deleteDept, getDeptList } from '#/api/system/dept'; +import { KtTable, useKtTable } from '#/components/ktTable'; import { $t } from '#/locales'; -import { useColumns } from './data'; import Form from './modules/form.vue'; const [FormModal, formModalApi] = useVbenModal({ @@ -23,132 +27,139 @@ const [FormModal, formModalApi] = useVbenModal({ destroyOnClose: true, }); -const { hasAccessByCodes } = useAccess(); +const columns: Array> = [ + { + dataIndex: 'name', + fixed: 'left', + key: 'name', + title: $t('system.dept.deptName'), + width: 180, + }, + { + align: 'center', + dataIndex: 'status', + key: 'status', + title: $t('system.dept.status'), + width: 100, + }, + { + dataIndex: 'createTime', + key: 'createTime', + title: $t('system.dept.createTime'), + width: 180, + }, + { + dataIndex: 'remark', + key: 'remark', + title: $t('system.dept.remark'), + width: 260, + }, +]; -function hasPermission(code: string) { - return hasAccessByCodes([code]); -} +const api: KtTableApi = { + list: async () => { + return await getDeptList(); + }, +}; + +const buttons: Array> = [ + { + icon: () => h(Plus, { class: 'kt-table__button-icon' }), + key: 'create', + label: $t('ui.actionTitle.create', [$t('system.dept.name')]), + onClick: onCreate, + permissionCodes: ['System:Dept:Create'], + type: 'primary', + }, +]; + +const rowActions: Array> = [ + { + key: 'append', + label: '新增下级', + onClick: onAppend, + permissionCodes: ['System:Dept:Create'], + }, + { + key: 'edit', + label: $t('common.edit'), + onClick: onEdit, + permissionCodes: ['System:Dept:Edit'], + }, + { + confirm: (row) => `确认删除「${row.name}」吗？`, + danger: true, + disabled: (row) => !!row.children?.length, + key: 'delete', + label: $t('common.delete'), + onClick: onDelete, + permissionCodes: ['System:Dept:Delete'], + }, +]; + +const [registerTable, tableApi] = useKtTable({ + api, + buttons, + columns, + rowActions, + showDefaultButtons: false, + showFooter: false, + showPagination: false, + tableTitle: '部门列表', +}); -/** - * 编辑部门 - * @param row - */ function onEdit(row: SystemDeptApi.SystemDept) { formModalApi.setData(row).open(); } -/** - * 添加下级部门 - * @param row - */ function onAppend(row: SystemDeptApi.SystemDept) { formModalApi.setData({ pid: row.id }).open(); } -/** - * 创建新部门 - */ function onCreate() { formModalApi.setData(null).open(); } -/** - * 删除部门 - * @param row - */ -function onDelete(row: SystemDeptApi.SystemDept) { +async function onDelete( + row: SystemDeptApi.SystemDept, + context?: KtTableContext, +) { const hideLoading = message.loading({ content: $t('ui.actionMessage.deleting', [row.name]), duration: 0, key: 'action_process_msg', }); - deleteDept(row.id) - .then(() => { - message.success({ - content: $t('ui.actionMessage.deleteSuccess', [row.name]), - key: 'action_process_msg', - }); - refreshGrid(); - }) - .catch(() => { - hideLoading(); - }); -} -/** - * 表格操作按钮的回调函数 - */ -function onActionClick({ - code, - row, -}: OnActionClickParams) { - switch (code) { - case 'append': { - onAppend(row); - break; - } - case 'delete': { - onDelete(row); - break; - } - case 'edit': { - onEdit(row); - break; - } + try { + await deleteDept(row.id); + message.success({ + content: $t('ui.actionMessage.deleteSuccess', [row.name]), + key: 'action_process_msg', + }); + await (context || tableApi).reload(); + } catch { + hideLoading(); } } -const [Grid, gridApi] = useVbenVxeGrid({ - gridEvents: {}, - gridOptions: { - columns: useColumns(onActionClick, { canAccess: hasPermission }), - height: 'auto', - keepSource: true, - pagerConfig: { - enabled: false, - }, - proxyConfig: { - ajax: { - query: async (_params) => { - return await getDeptList(); - }, - }, - }, - toolbarConfig: { - custom: true, - export: false, - refresh: true, - zoom: true, - }, - treeConfig: { - parentField: 'pid', - rowField: 'id', - transform: false, - }, - } as VxeTableGridOptions, -}); - -/** - * 刷新表格 - */ -function refreshGrid() { - gridApi.query(); +function refreshTable() { + tableApi.reload(); } +