docs(color-picker): 优化文档api 格式 新增colorpicker 英文文档

packages/devui-vue/docs/components/color-picker/index.md

@@ -109,7 +109,7 @@ export default defineComponent({
 :::
 
 ### 基础面板自定义
-设置可供选择的基础面板颜色样本
+设置可自定义配置的基础面板颜色样本
 :::demo
 
 ```vue
@@ -151,20 +151,10 @@ export default defineComponent({
 d-color-picker 参数
 
 | 参数         | 类型      | 默认   | 说明                                        | 跳转 Demo                   |
-| ------------ | --------- | ------ | ------------------------------------------- | --------------------------- |
+| :---: | :---: | :---: | :---: | :---: |
 | mode         | `String`  | `rgb`  | 切换颜色模式                                | [颜色模式](#颜色模式)       |  |
 | dotSize      | `Number`  | `15`   | 调色板圆点大小                              |                             |  |
 | swatches     | `Array`   |        | 预定义样本面板                              | [色块样本](#基础面板自定义) |  |
 | show-alpha   | `Boolean` | `true` | 是否展示透明度进度条                        | [透明度展示](#颜色透明度)   |  |
 | show-history | `Boolean` | `true` | 是否展示历史颜色                            | [历史颜色展示](#历史颜色)   |  |
 | v-model      | `String`  |        | 绑定颜色Value支持（hex , rgb , hsl , hsv ） |                             |  |
-
-
-
-d-color-picker 事件
-
-| 事件 | 类型 | 说明 | 跳转 Demo |
-| ---- | ---- | ---- | --------- |
-|      |      |      |           |
-|      |      |      |           |
-|      |      |      |           |

packages/devui-vue/docs/components/ripple/index.md

@@ -200,7 +200,7 @@ Card 组件
 ### API
 
 |      参数       |   类型    |    默认     | 说明                              |
-| :-------------: | :-------: | :---------: | :-------------------------------- |
+| :---: | :---: | :---: | :---: |
 |      color      | `string`  | `#00000050` | 可选，默认当前文本颜色            |
 | initial-opacity | `number`  |    `0.1`    | 可选，初始交互效果透明度大小      |
 |  final-opacity  | `number`  |    `0.1`    | 可选，结束交互效果长按透明度大小  |

packages/devui-vue/docs/components/statistic/index.md

@@ -164,14 +164,14 @@ export default {
 
 ### d-statistic
 
-| 参数               | 类型               | 默认     | 说明             |
-| ------------------ | ------------------ | -------- | ---------------- |
-| title              | `string \| v-slot` | -        | 数值的标题       |
-| extra              | `string \| v-slot` | -        | 额外内容         |
-| value              | `number \| string` | -        | 数值内容         |
-| group-separator    | `string`           | ,        | 设置千分位标识符 |
-| precision          | `number`           | -        | 设置数值精度     |
-| suffix             | `string \| v-slot` | -        | 设置数值的后缀   |
+| 参数 | 类型 | 默认 | 说明 |
+| :---: | :---: | :---: | :---: |
+| title              | `string \| v-slot` | - | 数值的标题 |
+| extra              | `string \| v-slot` | - | 额外内容 |
+| value              | `number \| string` | - | 数值内容 |
+| group-separator    | `string`           | - | 设置千分位标识符 |
+| precision          | `number`           | - | 设置数值精度     |
+| suffix             | `string \| v-slot` | - | 设置数值的后缀   |
 | prefix             | `string \| v-slot` | -        | 设置数值的前缀   |
 | title-style        | `style`            | -        | 标题样式         |
 | content-style      | `style`            | -        | 内容样式         |
@@ -182,4 +182,3 @@ export default {
 | easing             | `string`           | quartOut | 数字动画效果     |
 | start              | `boolean`          | false    | 是否开始动画     |
 
-

packages/devui-vue/docs/en-US/components/color-picker/index.md

@@ -0,0 +1,158 @@
+# ColorPicker 
+
+### When to use
+
+Allows users to use various interactive methods to select colors
+
+### Basic Usage
+
+:::demo
+
+```vue
+<template>
+  <d-color-picker></d-color-picker>
+</template>
+```
+
+:::
+
+### Color transparency
+
+Allows users to dynamically adjust the display alpha mode, which is true by default
+:::demo
+
+```vue
+<template>
+  <d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
+  <d-color-picker v-model="color" :show-alpha="show"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const show = ref(true)
+    const color = ref('rgba(83, 199, 212, 0.72)')
+    const isShowAlpha = () => {
+      show.value = !show.value
+    }
+    return {
+      color,
+      isShowAlpha,
+      show
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### Color mode
+
+Set dynamic output color mode
+:::demo
+
+```vue
+<template>
+  <d-color-picker v-model="color" mode="hex"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const color = ref('#FF6827A1')
+    return {
+      color
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### Historical color
+
+Customize whether to display historical colors. By default, it is true
+:::demo
+
+```vue
+<template>
+  <d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
+  <d-color-picker :show-history="show" v-model="color" mode="hsl"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    let show = ref(true)
+    const isShowAlpha = () => {
+      show.value = !show.value
+    }
+    const color = ref('hsla(353, 1, 0.58, 1)')
+    return {
+      color,
+      isShowAlpha,
+      show
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### Foundation panel customization
+Sets a customizable base panel color swatch
+:::demo
+
+```vue
+<template>
+  <d-color-picker :swatches="colors" v-model="color"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const colors = [
+      '#f44336',
+      '#e91e63',
+      '#9c27b0',
+      '#673ab7',
+      '#3f51b5',
+      '#2196f3',
+      '#03a9f4',
+      '#00bcd4',
+      '#009688',
+      '#4caf50'
+    ]
+    const color = ref('rgba(155, 39, 176, 1)')
+    return {
+      color,
+      colors
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### d-color-picker
+
+| parameter         | type      | default   | introduce                                        | Jump Demo                   |
+| :---: | :---: | :---: | :---: | :---: |
+| mode         | `String`  | `rgb`  | Toggle color mode                                | [mode](#color-mode)       |  |
+| dotSize      | `Number`  | `15`   | Palette dot size                              |                             |  |
+| swatches     | `Array`   |        | Predefined sample panels                              | [swatches](#foundation-panel-customization) |  |
+| show-alpha   | `Boolean` | `true` | Show transparency progress bar                        | [Color transparency](#color-transparency)   |  |
+| show-history | `Boolean` | `true` | Show historical colors                            | [show-history](#historical-color)   |  |
+| v-model      | `String`  |        | Binding color value support（hex , rgb , hsl , hsv ） |                             |  |

packages/devui-vue/docs/en-US/components/ripple/index.md

@@ -200,8 +200,8 @@ Card Component
 
 ### API
 
-|      参数       |   类型    |    默认     | 说明                                                                          |
-| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- |
+|      parameter       |   type    |    default     | introduce                                                                          |
+| :---: | :---: | :---: | :---: |
 |      color      | `string`  | `#00000050` | Choose Default current text color                                             |
 | initial-opacity | `number`  |    `0.1`    | Choose Initial interaction Opacity size                                       |
 |  final-opacity  | `number`  |    `0.1`    | Choose, end the interactive effect and press the Opacity size for a long time |

packages/devui-vue/docs/en-US/components/statistic/index.md

@@ -165,7 +165,7 @@ Prefix and suffix slots
 ### d-statistic
 
 | parameter          | type               | default  | introduce                    |
-| ------------------ | ------------------ | -------- | ---------------------------- |
+| :---: | :---: | :---: | :---: |
 | title              | `string \| v-slot` | -        | Title of value               |
 | extra              | `string \| v-slot` | -        | Extra content                |
 | value              | `number \| string` | -        | Value content                |