feat: add `vue3-colorpicker`

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:"
   }
 }

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 }) => {

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