diff --git a/packages/date-picker/src/interface.ts b/packages/date-picker/src/interface.ts
index 4b02b7de4..087122401 100644
--- a/packages/date-picker/src/interface.ts
+++ b/packages/date-picker/src/interface.ts
@@ -62,6 +62,7 @@ export interface PublicDatePickerProps extends BoxProps {
   utcOffset?: number
   timezone?: string
   inputSuffix?: ReactNode
+  readonly?: boolean
 }
 
 export interface SinglePickerProps extends PublicDatePickerProps {
diff --git a/packages/date-picker/src/range-date-picker.tsx b/packages/date-picker/src/range-date-picker.tsx
index 3343f94fa..624e8af46 100644
--- a/packages/date-picker/src/range-date-picker.tsx
+++ b/packages/date-picker/src/range-date-picker.tsx
@@ -74,6 +74,7 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
       size = "medium",
       colorScheme = "blue",
       extra,
+      readonly = false,
     } = props
 
     const weekStart = 0
@@ -764,7 +765,7 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
           }
           trigger="click"
           position={position}
-          disabled={triggerDisabled}
+          disabled={triggerDisabled || readonly}
           onVisibleChange={visibleChange}
           popupVisible={mergedPopupVisible}
           colorScheme="white"
@@ -793,7 +794,7 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
               onPressEnter={onPressEnter}
               onClear={onClear}
               allowClear={allowClear}
-              editable={editable}
+              editable={editable || !readonly}
               suffixIcon={suffixIcon}
             />
           </div>
diff --git a/packages/date-picker/src/signle-date-picker.tsx b/packages/date-picker/src/signle-date-picker.tsx
index a839deaa5..2579e61fa 100644
--- a/packages/date-picker/src/signle-date-picker.tsx
+++ b/packages/date-picker/src/signle-date-picker.tsx
@@ -64,6 +64,7 @@ export const SingleDatePicker = forwardRef<
     showTime,
     showNowBtn = true,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -438,7 +439,7 @@ export const SingleDatePicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -463,7 +464,7 @@ export const SingleDatePicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>
diff --git a/packages/date-picker/src/signle-year-picker.tsx b/packages/date-picker/src/signle-year-picker.tsx
index 99eb0b5f5..f835409dc 100644
--- a/packages/date-picker/src/signle-year-picker.tsx
+++ b/packages/date-picker/src/signle-year-picker.tsx
@@ -55,6 +55,7 @@ export const SingleYearPicker = forwardRef<
     size = "medium",
     colorScheme = "blue",
     inputSuffix,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -295,7 +296,7 @@ export const SingleYearPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -320,7 +321,7 @@ export const SingleYearPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>
diff --git a/packages/date-picker/src/single-month-picker.tsx b/packages/date-picker/src/single-month-picker.tsx
index 9871489de..647071da7 100644
--- a/packages/date-picker/src/single-month-picker.tsx
+++ b/packages/date-picker/src/single-month-picker.tsx
@@ -60,6 +60,7 @@ export const SingleMonthPicker = forwardRef<
     colorScheme = "blue",
     inputSuffix,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -345,7 +346,7 @@ export const SingleMonthPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -370,7 +371,7 @@ export const SingleMonthPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>
diff --git a/packages/date-picker/src/single-quarter-picker.tsx b/packages/date-picker/src/single-quarter-picker.tsx
index 86617d219..c58a06461 100644
--- a/packages/date-picker/src/single-quarter-picker.tsx
+++ b/packages/date-picker/src/single-quarter-picker.tsx
@@ -60,6 +60,7 @@ export const SingleQuarterPicker = forwardRef<
     colorScheme = "blue",
     inputSuffix,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -345,7 +346,7 @@ export const SingleQuarterPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -370,7 +371,7 @@ export const SingleQuarterPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>
diff --git a/packages/date-picker/src/single-week-picker.tsx b/packages/date-picker/src/single-week-picker.tsx
index 91f89d71a..fdb248603 100644
--- a/packages/date-picker/src/single-week-picker.tsx
+++ b/packages/date-picker/src/single-week-picker.tsx
@@ -60,6 +60,7 @@ export const SingleWeekPicker = forwardRef<
     colorScheme = "blue",
     inputSuffix,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -343,7 +344,7 @@ export const SingleWeekPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -368,7 +369,7 @@ export const SingleWeekPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>
diff --git a/packages/icon/src/icons/caret-right.tsx b/packages/icon/src/icons/caret-right.tsx
index fcbd11bcb..45a334bc0 100644
--- a/packages/icon/src/icons/caret-right.tsx
+++ b/packages/icon/src/icons/caret-right.tsx
@@ -3,14 +3,7 @@ import { createIcon } from "../create-icon"
 export const CaretRightIcon = createIcon({
   title: "CaretRightIcon",
   viewBox: "0 0 8 8",
-  path: (
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.954 6.727A.3.3 0 0 1 1.5 6.47V1.53a.3.3 0 0 1 .454-.257l3.974 2.384a.4.4 0 0 1 0 .686L1.954 6.727z"
-      fill="currentColor"
-    />
-  ),
+  path: <path d="M2.5 6V2L5.5 4L2.5 6Z" fill="currentColor" />,
 })
 
 CaretRightIcon.displayName = "CaretRightIcon"
diff --git a/packages/icon/src/icons/configuration.tsx b/packages/icon/src/icons/configuration.tsx
new file mode 100644
index 000000000..eb5175a44
--- /dev/null
+++ b/packages/icon/src/icons/configuration.tsx
@@ -0,0 +1,48 @@
+import { createIcon } from "../create-icon"
+
+export const ConfigurationIcon = createIcon({
+  title: "configuration",
+  viewBox: "0 0 16 16",
+  path: (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.83854 3H2.75C2.33579 3 2 3.33579 2 3.75C2 4.16421 2.33579 4.5 2.75 4.5H9.83854C9.63094 4.31676 9.5 4.04867 9.5 3.75C9.5 3.45133 9.63094 3.18324 9.83854 3ZM11.1615 4.5C11.3691 4.31676 11.5 4.04867 11.5 3.75C11.5 3.45133 11.3691 3.18324 11.1615 3H13.25C13.6642 3 14 3.33579 14 3.75C14 4.16421 13.6642 4.5 13.25 4.5H11.1615Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.83854 7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H4.83854C4.63094 8.56676 4.5 8.29867 4.5 8C4.5 7.70133 4.63094 7.43324 4.83854 7.25ZM6.16146 8.75C6.36906 8.56676 6.5 8.29867 6.5 8C6.5 7.70133 6.36906 7.43324 6.16146 7.25H13.25C13.6642 7.25 14 7.58579 14 8C14 8.41421 13.6642 8.75 13.25 8.75H6.16146Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.83854 11.5H2.75C2.33579 11.5 2 11.8358 2 12.25C2 12.6642 2.33579 13 2.75 13H9.83854C9.63094 12.8168 9.5 12.5487 9.5 12.25C9.5 11.9513 9.63094 11.6832 9.83854 11.5ZM11.1615 13C11.3691 12.8168 11.5 12.5487 11.5 12.25C11.5 11.9513 11.3691 11.6832 11.1615 11.5H13.25C13.6642 11.5 14 11.8358 14 12.25C14 12.6642 13.6642 13 13.25 13H11.1615Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 2.75C9.94772 2.75 9.5 3.19772 9.5 3.75C9.5 4.30228 9.94772 4.75 10.5 4.75C11.0523 4.75 11.5 4.30228 11.5 3.75C11.5 3.19772 11.0523 2.75 10.5 2.75ZM8.5 3.75C8.5 2.64543 9.39543 1.75 10.5 1.75C11.6046 1.75 12.5 2.64543 12.5 3.75C12.5 4.85457 11.6046 5.75 10.5 5.75C9.39543 5.75 8.5 4.85457 8.5 3.75Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 10.25C9.39543 10.25 8.5 11.1454 8.5 12.25C8.5 13.3546 9.39543 14.25 10.5 14.25C11.6046 14.25 12.5 13.3546 12.5 12.25C12.5 11.1454 11.6046 10.25 10.5 10.25ZM9.5 12.25C9.5 11.6977 9.94772 11.25 10.5 11.25C11.0523 11.25 11.5 11.6977 11.5 12.25C11.5 12.8023 11.0523 13.25 10.5 13.25C9.94772 13.25 9.5 12.8023 9.5 12.25Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.5 7C4.94772 7 4.5 7.44772 4.5 8C4.5 8.55228 4.94772 9 5.5 9C6.05228 9 6.5 8.55228 6.5 8C6.5 7.44772 6.05228 7 5.5 7ZM3.5 8C3.5 6.89543 4.39543 6 5.5 6C6.60457 6 7.5 6.89543 7.5 8C7.5 9.10457 6.60457 10 5.5 10C4.39543 10 3.5 9.10457 3.5 8Z"
+        fill="currentColor"
+      />
+    </>
+  ),
+})
+
+ConfigurationIcon.displayName = "ConfigurationIcon"
diff --git a/packages/icon/src/icons/copy.tsx b/packages/icon/src/icons/copy.tsx
index 898326e33..7495672aa 100644
--- a/packages/icon/src/icons/copy.tsx
+++ b/packages/icon/src/icons/copy.tsx
@@ -14,9 +14,8 @@ export const CopyIcon = createIcon({
         stroke="currentColor"
       />
       <path
-        d="M5.5 3.5H11.5C12.0523 3.5 12.5 3.94772 12.5 4.5V10.5"
+        d="M6 3.5H10.5C11.6046 3.5 12.5 4.39543 12.5 5.5V10"
         stroke="currentColor"
-        strokeLinecap="round"
       />
     </>
   ),
diff --git a/packages/icon/src/icons/docs.tsx b/packages/icon/src/icons/docs.tsx
index 90e07659c..14610b6e3 100644
--- a/packages/icon/src/icons/docs.tsx
+++ b/packages/icon/src/icons/docs.tsx
@@ -2,12 +2,12 @@ import { createIcon } from "../create-icon"
 
 export const DocsIcon = createIcon({
   title: "DocsIcon",
-  viewBox: "0 0 12 12",
+  viewBox: "0 0 16 16",
   path: (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M6.5 5a.5.5 0 0 1-.5-.5V2H3v8h6V5H6.5zm3.5-.5v6a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h4l.5.5L9.5 4l.5.5zM8.086 4 7 2.914V4h1.086zM4 7V6h4v1H4zm0 2h3V8H4v1z"
+      d="M8.5 7C8.22386 7 8 6.77614 8 6.5V4L5 4L5 12L11 12L11 7L8.5 7ZM12 6.5V7L12 12.5C12 12.7761 11.7761 13 11.5 13L4.5 13C4.22386 13 4 12.7761 4 12.5L4 3.5C4 3.22386 4.22386 3 4.5 3L8 3L8.5 3L9 3.5L11.5 6L12 6.5ZM10.0858 6L9 4.91421V6H10.0858ZM6 9V8L10 8V9H6ZM6 11H9V10H6V11Z"
       fill="currentColor"
     />
   ),
diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts
index d86348974..08cf2a647 100644
--- a/packages/icon/src/index.ts
+++ b/packages/icon/src/index.ts
@@ -9,6 +9,7 @@ export * from "./icons/image-default"
 export * from "./icons/image-error"
 export * from "./icons/loading"
 export * from "./icons/copy"
+export * from "./icons/configuration"
 export * from "./icons/eye-on"
 export * from "./icons/eye-off"
 export * from "./icons/error-circle"