diff --git a/color-picker.ts b/color-picker.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a144de62262ebe1a8798fc4aad19641662a9ce1a
--- /dev/null
+++ b/color-picker.ts
@@ -0,0 +1,27 @@
+import { getEditorProps, getGridEditorCommonProps } from './common';
+
+/**
+ * 获取颜色选择器的props
+ *
+ * @author zzq
+ * @date 2323-8-14 19:42:00
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getColorPickerProps<C>() {
+  return { ...getEditorProps<C>(), value: String };
+}
+
+/**
+ * 获取表格颜色选择器的props
+ *
+ * @author zzq
+ * @date 2323-8-14 19:42:00
+ * @export
+ * @template C
+ * @returns {*}
+ */
+export function getGridColorPickerProps<C>() {
+  return { ...getColorPickerProps<C>(), ...getGridEditorCommonProps() };
+}
diff --git a/src/editor/color-picker/color-picker-editor.controller.ts b/src/editor/color-picker/color-picker-editor.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa1aaab36d6046e45eb669e473d4388082812796
--- /dev/null
+++ b/src/editor/color-picker/color-picker-editor.controller.ts
@@ -0,0 +1,13 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { ITextBox } from '@ibiz/model-core';
+
+/**
+ * 颜色选择器控制器
+ *
+ * @author zzq
+ * @date 2323-8-14 19:42:00
+ * @export
+ * @class ColorPickerEditorController
+ * @extends {EditorController}
+ */
+export class ColorPickerEditorController extends EditorController<ITextBox> {}
diff --git a/src/editor/color-picker/color-picker-editor.provider.ts b/src/editor/color-picker/color-picker-editor.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5a93045f1239c5c73fbf676092f1a6636dcd958
--- /dev/null
+++ b/src/editor/color-picker/color-picker-editor.provider.ts
@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  IEditorContainerController,
+  IEditorProvider,
+} from '@ibiz-template/runtime';
+import { ITextBox } from '@ibiz/model-core';
+import { ColorPickerEditorController } from './color-picker-editor.controller';
+
+/**
+ * 颜色选择器适配器
+ *
+ * @author zzq
+ * @date 2323-8-14 19:42:00
+ * @export
+ * @class ColorPickerEditorProvider
+ * @implements {EditorProvider}
+ */
+export class ColorPickerEditorProvider implements IEditorProvider {
+  formEditor: string = 'IBizColorPicker';
+
+  gridEditor: string = 'IBizColorPicker';
+
+  async createController(
+    editorModel: ITextBox,
+    parentController: IEditorContainerController,
+  ): Promise<ColorPickerEditorController> {
+    const c = new ColorPickerEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
diff --git a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1951c63b5d3d551ab2ea85b36effa26a20269d71
--- /dev/null
+++ b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss
@@ -0,0 +1,32 @@
+@include b(color-picker) {
+  color: getCssVar(form-item, text-color);
+  // 常规样式
+  .el-input .el-input__inner {
+    font-size: getCssVar(form-item, font-size);
+    color: inherit;
+    border-color: getCssVar(form-item, border-color);
+  }
+
+  .el-input .el-input__inner::placeholder {
+    color: getCssVar(form-item, placeholder-color);
+  }
+
+  // 禁用样式
+  .el-input.is-disabled .el-input__inner {
+    color: getCssVar(form-item, disabled-color);
+    background-color: getCssVar(form-item, disabled-bg-color);
+    border-color: getCssVar(form-item, disabled-border-color);
+  }
+
+  // 颜色选择框样式
+  .el-color-picker__trigger {
+    border: none;
+  }
+
+  // 只读模式显示
+  @include m(readonly) {
+    color: getCssVar(form-item, readonly-color);
+
+    @include overflow-wrap;
+  }
+}
\ No newline at end of file
diff --git a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..449c2c5c8268056df66e94b1c384de5cc398839b
--- /dev/null
+++ b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx
@@ -0,0 +1,106 @@
+import { defineComponent, ref, watch } from 'vue';
+import {
+  getEditorEmits,
+  getColorPickerProps,
+  useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-color-picker.scss';
+import { ColorPickerEditorController } from '../color-picker-editor.controller';
+
+export const IBizColorPicker = defineComponent({
+  name: 'IBizColorPicker',
+  props: getColorPickerProps<ColorPickerEditorController>(),
+  emits: getEditorEmits(),
+  setup(props, { emit }) {
+    const ns = useNamespace('color-picker');
+
+    const c = props.controller;
+
+    const currentVal = ref<string | null>('');
+
+    watch(
+      () => props.value,
+      (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          if (!newVal) {
+            currentVal.value = '';
+          } else {
+            currentVal.value = newVal;
+          }
+        }
+      },
+      { immediate: true },
+    );
+
+    const handleChange = (e: string | null) => {
+      emit('change', e);
+    };
+
+    const inputRef = ref();
+
+    // 聚焦
+    const onFocus = () => {
+      emit('focus');
+    };
+
+    // 失焦
+    const onBlur = () => {
+      emit('blur');
+    };
+
+    return {
+      ns,
+      c,
+      currentVal,
+      handleChange,
+      inputRef,
+      onFocus,
+      onBlur,
+    };
+  },
+  render() {
+    let content = null;
+    if (this.readonly) {
+      // 只读显示
+      content = `${this.currentVal}`;
+    } else {
+      // 编辑态显示
+      content = [
+        <el-input
+          ref='inputRef'
+          v-model={this.currentVal}
+          disabled={this.disabled}
+          placeholder={this.c.placeHolder}
+          onChange={this.handleChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        >
+          {{
+            suffix: () => {
+              return (
+                <el-color-picker
+                  v-model={this.currentVal}
+                  onChange={this.handleChange}
+                  size='small'
+                ></el-color-picker>
+              );
+            },
+          }}
+        </el-input>,
+      ];
+    }
+
+    return (
+      <div
+        class={[
+          this.ns.b(),
+          this.disabled ? this.ns.m('disabled') : '',
+          this.readonly ? this.ns.m('readonly') : '',
+        ]}
+        style={{ color: this.currentVal || '' }}
+      >
+        {content}
+      </div>
+    );
+  },
+});
diff --git a/src/editor/color-picker/index.ts b/src/editor/color-picker/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc4f533ee1f141865f3c79235b5d142a8e238681
--- /dev/null
+++ b/src/editor/color-picker/index.ts
@@ -0,0 +1,3 @@
+export { IBizColorPicker } from './ibiz-color-picker/ibiz-color-picker';
+export * from './color-picker-editor.controller';
+export * from './color-picker-editor.provider';
diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx
index 1be73b713461c3695d3180a75c0f592f965676da..8936dcb1ff5cb870144a448de388a1cd6cd28da1 100644
--- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx
+++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx
@@ -67,7 +67,7 @@ export const IBizDropdown = defineComponent({
     const curValue: Ref<Array<string> | string | undefined> = computed({
       get() {
         if (props.value) {
-          return c!.multiple ? props.value?.split(',') : props.value;
+          return c!.multiple ? props.value?.split(',') : props.value.toString();
         }
         return props.value;
       },
diff --git a/src/editor/index.ts b/src/editor/index.ts
index 1ba5371df37dc7f03df21218ff35fe9e289a8e22..f5c7911744e941e11526da8b037ae5c607bb1541 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -45,6 +45,7 @@ import { HtmlEditorProvider } from './html';
 import { MarkDownEditorProvider } from './markdown';
 import { IBizArray, ArrayEditorProvider } from './array';
 import { IBizCascader, CascaderEditorProvider } from './cascader';
+import { IBizColorPicker, ColorPickerEditorProvider } from './color-picker';
 
 export const IBizEditor = {
   install: (v: App): void => {
@@ -81,6 +82,7 @@ export const IBizEditor = {
     v.component(IBizCode.name, IBizCode);
     v.component(IBizArray.name, IBizArray);
     v.component(IBizCascader.name, IBizCascader);
+    v.component(IBizColorPicker.name, IBizColorPicker);
     v.component(
       'IBizHtml',
       defineAsyncComponent(() => import('./html/wang-editor/wang-editor')),
@@ -264,6 +266,11 @@ export const IBizEditor = {
     registerEditorProvider('ARRAY', () => new ArrayEditorProvider());
     // 数组编辑器
     registerEditorProvider('CASCADER', () => new CascaderEditorProvider());
+    // 颜色选择器
+    registerEditorProvider(
+      'COLORPICKER',
+      () => new ColorPickerEditorProvider(),
+    );
   },
 };