From 979b834facbabf50d711b76ca5180f07b319b432 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Mon, 27 Oct 2025 19:55:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(design,=20tdesign-vue-next-adapter,=20tabl?= =?UTF-8?q?e,=20element-plus-adapter):=20=E5=AE=8C=E5=96=84tdesign?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design/src/Pagination.vue | 11 ++++- packages/design/src/index.ts | 41 ++++++++---------- packages/design/src/types.ts | 13 +++++- .../element-plus-adapter/src/FormItem.vue | 1 + packages/table/src/TextColumn.vue | 6 +-- .../src/Pagination.vue | 43 +++++++++++++++++++ .../tdesign-vue-next-adapter/src/index.ts | 29 +++++++++---- playground/src/pages/Table.vue | 13 +++++- 8 files changed, 118 insertions(+), 39 deletions(-) create mode 100644 packages/tdesign-vue-next-adapter/src/Pagination.vue diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue index 4975877c..6a24c1c4 100644 --- a/packages/design/src/Pagination.vue +++ b/packages/design/src/Pagination.vue @@ -4,8 +4,9 @@ :is="uiComponent" v-bind="uiProps" @size-change="handleSizeChange" - @page-size-change="handleSizeChange" @current-change="handleCurrentChange" + @update:current-page="updateCurrentPage" + @update:page-size="updatePageSize" > @@ -21,7 +22,7 @@ defineOptions({ const props = defineProps(); -const emit = defineEmits(['size-change', 'current-change']); +const emit = defineEmits(['size-change', 'current-change', 'update:current-page', 'update:page-size']); const ui = getDesignConfig('components')?.pagination; @@ -35,4 +36,10 @@ const handleSizeChange = (...args: any[]) => { const handleCurrentChange = (...args: any[]) => { emit('current-change', ...args); }; +const updateCurrentPage = (...args: any[]) => { + emit('update:current-page', ...args); +}; +const updatePageSize = (...args: any[]) => { + emit('update:page-size', ...args); +}; diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index fa6b56a7..f4caf054 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -54,21 +54,8 @@ export { default as TMagicTooltip } from './Tooltip.vue'; export { default as TMagicUpload } from './Upload.vue'; export { default as TMagicPopconfirm } from './Popconfirm.vue'; -export const tMagicMessage = { - error: (msg: string) => { - console.error(msg); - }, - success: (msg: string) => { - console.log(msg); - }, - warning: (msg: string) => { - console.warn(msg); - }, - info: (msg: string) => { - console.info(msg); - }, - closeAll: (_msg: string) => {}, -} as unknown as TMagicMessage; +// eslint-disable-next-line import/no-mutable-exports +export let tMagicMessage: TMagicMessage; export const tMagicMessageBox = { alert: (msg: string) => { @@ -108,13 +95,23 @@ export let useZIndex = (zIndexOverrides?: Ref) => { export default { install(app: App, options: DesignPluginOptions) { - if (options.message) { - tMagicMessage.error = options.message?.error; - tMagicMessage.success = options.message?.success; - tMagicMessage.warning = options.message?.warning; - tMagicMessage.info = options.message?.info; - tMagicMessage.closeAll = options.message?.closeAll; - } + tMagicMessage = + options.message || + ({ + error: (msg: string) => { + console.error(msg); + }, + success: (msg: string) => { + console.log(msg); + }, + warning: (msg: string) => { + console.warn(msg); + }, + info: (msg: string) => { + console.info(msg); + }, + closeAll: (_msg: string) => {}, + } as unknown as TMagicMessage); if (options.messageBox) { tMagicMessageBox.alert = options.messageBox?.alert; diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts index 1ede01ef..f10f6d8d 100644 --- a/packages/design/src/types.ts +++ b/packages/design/src/types.ts @@ -224,8 +224,9 @@ export interface PaginationProps { hideOnSinglePage?: boolean; curPage?: number; pageSizes?: number[]; - pagesize?: number; + pageSize?: number; total?: number; + size?: 'large' | 'default' | 'small'; } export interface PopconfirmProps { @@ -399,7 +400,7 @@ export interface IconProps { size?: string; } -export interface TMagicMessage { +interface ExtraApi { success: (msg: string) => void; warning: (msg: string) => void; info: (msg: string) => void; @@ -407,6 +408,14 @@ export interface TMagicMessage { closeAll: () => void; } +export type TMagicMessage = ExtraApi & + ((options: { + type?: 'info' | 'success' | 'warning' | 'error'; + message?: string; + dangerouslyUseHTMLString?: boolean; + duration?: number; + }) => void); + export type ElMessageBoxShortcutMethod = (( message: string, title: string, diff --git a/packages/element-plus-adapter/src/FormItem.vue b/packages/element-plus-adapter/src/FormItem.vue index 5aead04b..0744be39 100644 --- a/packages/element-plus-adapter/src/FormItem.vue +++ b/packages/element-plus-adapter/src/FormItem.vue @@ -10,6 +10,7 @@ diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts index 6745a40e..ddc4ba61 100644 --- a/packages/tdesign-vue-next-adapter/src/index.ts +++ b/packages/tdesign-vue-next-adapter/src/index.ts @@ -21,7 +21,6 @@ import { MessagePlugin, Option as TOption, OptionGroup as TOptionGroup, - Pagination as TPagination, RadioGroup as TRadioGroup, Row as TRow, Select as TSelect, @@ -81,6 +80,7 @@ import DatePicker from './DatePicker.vue'; import Dialog from './Dialog.vue'; import Icon from './Icon.vue'; import Input from './Input.vue'; +import Pagination from './Pagination.vue'; import Popconfirm from './Popconfirm.vue'; import Radio from './Radio.vue'; import RadioButton from './RadioButton.vue'; @@ -88,8 +88,24 @@ import Scrollbar from './Scrollbar.vue'; import Table from './Table.vue'; import Tabs from './Tabs.vue'; +const messageBox = (options: { + type?: 'info' | 'success' | 'warning' | 'error'; + message?: string; + dangerouslyUseHTMLString?: boolean; + duration?: number; +}) => + MessagePlugin(options.type || 'info', { + duration: options.duration || 3000, + content: options.message, + }); + +messageBox.success = MessagePlugin.success; +messageBox.error = MessagePlugin.error; +messageBox.warning = MessagePlugin.warning; +messageBox.info = MessagePlugin.info; + const adapter: any = { - message: MessagePlugin, + message: messageBox, messageBox: { alert: (msg: string, title?: string) => { return new Promise((resolve, reject) => { @@ -351,13 +367,8 @@ const adapter: any = { }, pagination: { - component: TPagination, - props: (props: PaginationProps) => ({ - current: props.curPage, - pageSizeOptions: props.pageSizes, - pageSize: props.pagesize, - total: props.total, - }), + component: Pagination, + props: (props: PaginationProps) => props, }, radio: { diff --git a/playground/src/pages/Table.vue b/playground/src/pages/Table.vue index 6b553480..bde34e4e 100644 --- a/playground/src/pages/Table.vue +++ b/playground/src/pages/Table.vue @@ -3,6 +3,9 @@
+ + + @@ -20,7 +23,15 @@ import { ref } from 'vue'; import { useRouter } from 'vue-router'; import type { ColumnConfig } from '@tmagic/editor'; -import { MagicTable, MenuButton, TMagicCodeEditor, tMagicMessage, TMagicTabPane, TMagicTabs } from '@tmagic/editor'; +import { + MagicTable, + MenuButton, + TMagicCodeEditor, + tMagicMessage, + TMagicPagination, + TMagicTabPane, + TMagicTabs, +} from '@tmagic/editor'; import NavMenu from '../components/NavMenu.vue';