diff --git a/apps/vben5/apps/app-antd/package.json b/apps/vben5/apps/app-antd/package.json index 03fa292ee..b4fc532a3 100644 --- a/apps/vben5/apps/app-antd/package.json +++ b/apps/vben5/apps/app-antd/package.json @@ -66,6 +66,7 @@ "dayjs": "catalog:", "pinia": "catalog:", "vue": "catalog:", - "vue-router": "catalog:" + "vue-router": "catalog:", + "vue3-colorpicker": "catalog:" } } diff --git a/apps/vben5/apps/app-antd/src/adapter/component/index.ts b/apps/vben5/apps/app-antd/src/adapter/component/index.ts index 4ab140011..335a9fa76 100644 --- a/apps/vben5/apps/app-antd/src/adapter/component/index.ts +++ b/apps/vben5/apps/app-antd/src/adapter/component/index.ts @@ -31,8 +31,14 @@ const Button = defineAsyncComponent(() => import('ant-design-vue/es/button')); const Checkbox = defineAsyncComponent( () => import('ant-design-vue/es/checkbox'), ); +const ColorPicker = defineAsyncComponent(() => + import('vue3-colorpicker').then((res) => { + import('vue3-colorpicker/style.css'); + return res.ColorPicker; + }), +); const CheckboxGroup = defineAsyncComponent(() => - import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup), + import('ant-design-vue/es').then((res) => res.CheckboxGroup), ); const DatePicker = defineAsyncComponent( () => import('ant-design-vue/es/date-picker'), @@ -117,6 +123,7 @@ export type ComponentType = | 'AutoComplete' | 'Checkbox' | 'CheckboxGroup' + | 'ColorPicker' | 'DatePicker' | 'DefaultButton' | 'Divider' @@ -182,6 +189,7 @@ async function initComponentAdapter() { AutoComplete, Checkbox, CheckboxGroup, + ColorPicker, DatePicker, // 自定义默认按钮 DefaultButton: (props, { attrs, slots }) => { diff --git a/apps/vben5/pnpm-workspace.yaml b/apps/vben5/pnpm-workspace.yaml index 8b73f18f2..b599ab73f 100644 --- a/apps/vben5/pnpm-workspace.yaml +++ b/apps/vben5/pnpm-workspace.yaml @@ -205,6 +205,7 @@ catalog: vue-simple-uploader: ^1.0.3 vue-tippy: ^6.7.0 vue-tsc: 2.2.10 + vue3-colorpicker: ^2.3.0 vxe-pc-ui: ^4.7.12 vxe-table: ^4.14.4 watermark-js-plus: ^1.6.0