diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss
index 93312a9eba871d748c26bedd191d18bbfee8b5db..caf9ad04f05175813d3aa4adb7d0a70262d417b7 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/code.scss
@@ -6,7 +6,7 @@ code {
   padding: 0.25rem 0.5rem;
   font-family: var(--code-font-family);
   font-size: 0.85em;
-  color: var(--c-text-light);
+  color: var(--devui-text,#252b3a) !important;
   background-color: $devui-area !important;
 }
 
diff --git a/packages/devui-vue/docs/components/panel/index.md b/packages/devui-vue/docs/components/panel/index.md
index a7a9aa5131b05800e65e931b4d120d8c9cf79ac9..0633b76607689a9f8e0ddc2383dea739519f676a 100644
--- a/packages/devui-vue/docs/components/panel/index.md
+++ b/packages/devui-vue/docs/components/panel/index.md
@@ -57,7 +57,11 @@ export default defineComponent({
 :::demo
 ```vue
 <template>
-<d-panel type="primary" :isCollapsed="true" :showAnimation="true">
+  <d-panel type="info" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with info Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <d-panel type="primary" :isCollapsed="true" :showAnimation="true">
     <d-panel-header>Panel with Primary Type</d-panel-header>
     <d-panel-body>This is body</d-panel-body>
   </d-panel>
@@ -84,7 +88,7 @@ export default defineComponent({
 
 某种情况下，我们需要阻止面板收起。Panel提供了这项API，我们可以使用beforeToggle来阻止面板的收起
 
-根据条件判断，当panel展开时，点击阻止折叠按钮，将无法折叠panel。当panel折叠时不影响操作。
+根据条件判断，当panel展开时，点击阻止折叠按钮，将无法折叠panel。当panel展开时不影响操作。
 
 :::demo
 ```vue
@@ -133,7 +137,9 @@ export default defineComponent({
 
 ### 动态切换
 
-我们已hasLeftPadding为例
+我们以hasLeftPadding为例
+
+理论上所有的属性都可以动态切换
 
 :::demo
 ```vue
@@ -170,12 +176,17 @@ export default defineComponent({
 
 ### API
 
-|      参数      |                                   类型                                   |  默认   |                                                    说明                                                     |
-| :------------: | :----------------------------------------------------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------: |
-|      type      | `'default' \| 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info'` | default |                                              可选，面板的类型                                               |
-|    cssClass    |                                 `string`                                 |   --    |                                            可选，自定义 class 名                                            |
-|  isCollapsed   |                                `boolean`                                 |  false  |                                               可选，是否展开                                                |
-| hasLeftPadding |                                `boolean`                                 |  true   |                                           可选，是否显示左侧填充                                            |
-| showAnimation  |                                `boolean`                                 |  true   |                                             可选，是否展示动画                                              |
-|  beforeToggle  |                     `Function\|Promise\|Observable`                      |   --    | 可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态 根据条件阻止折叠 |
-|     toggle     |                                `Function`                                |   --    |     可选，面板当前状态的回调函数，返回 boolean 类型，返回 false 代表面板被收起，返回 true 代表面板展开      |
\ No newline at end of file
+|参数|  	        类型|	                           默认|	     说明|
+|:-:|:-:|:-:|:-:| 
+|type|	          PanelType|	                    'default'|	    可选，面板的类型|
+|cssClass|	      string|	                        --       |	    可选，自定义 class 名|
+|isCollapsed|	    boolean|	                      false    |      可选，是否展开|
+|hasLeftPadding|	boolean|	                      true     |	    可选，是否显示左侧填充|
+|showAnimation|	  boolean|	                      true     |	    可选，是否展示动画|
+|beforeToggle|	  Function\|Promise\|Observable|	--       |      可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态	根据条件阻止折叠|
+|toggle|          Function|                       --       |      可选，面板当前状态的回调函数，返回boolean类型，返回 false 代表面板被收起，返回 true 代表面板展开
+
+### 接口&类型定义
+```javascript 
+export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+```
diff --git a/packages/devui-vue/docs/en-US/components/panel/index.md b/packages/devui-vue/docs/en-US/components/panel/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..429b610eff56bb1468b280c421d53375a38ddb0d
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/panel/index.md
@@ -0,0 +1,194 @@
+# Panel
+
+Panels are usually used for grouping 
+
+### When to use
+
+it is used when the page content needs to be grouped for display, and generally contains three parts: the head, the content area, and the bottom.
+
+### Quick start
+
+:::demo
+
+```vue
+<template>
+  <d-panel type="primary" :isCollapsed="true" :showAnimation="true" >
+    <d-panel-header>
+      Panel with foldable
+    </d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel :toggle=toggle :isCollapsed="true" :showAnimation="true" :hasLeftPadding="false">
+    <d-panel-header>
+      Panel has no left padding
+      <em :class="`icon icon-chevron-${toggleState ? 'down':'up'}`"></em>
+    </d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel :isCollapsed="true" :beforeToggle=beforeToggle>
+    <d-panel-header>Panel with header and footer</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+    <d-panel-footer>This is footer</d-panel-footer>
+  </d-panel>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup(){
+    const toggleState = ref(true);
+    const toggle = (e) => toggleState.value = e;
+    const beforeToggle = () => false;
+    return {
+      toggle,
+      toggleState,
+      beforeToggle
+    }
+  }
+})
+</script>
+```
+:::
+
+### Type
+
+Panels have six types: default, primary, success, danger, warning, info.
+
+:::demo
+```vue
+<template>
+  <d-panel type="info" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with info Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="primary" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with Primary Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="success" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with Success Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="warning" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with Warning Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="danger" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with danger Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+</template>
+```
+:::
+
+### Prevent Collapse
+
+if you dont want panel to fold. You can use ``beforeToggle`` properties
+
+If beforeToggle return False. The Panel will can not to fold. But Unaffected when unfolded
+
+
+::demo
+```vue
+<template>
+  <d-panel type="primary" :hasLeftPadding=padding :toggle=handleToggle  :beforeToggle=beforeToggle :showAnimation=showAnimation >
+    <d-panel-header>
+      Panel with foldable <i :class="`icon-arrow-${toggle ? 'down' : 'up'}`"></i>
+    </d-panel-header>
+    <d-panel-body>
+      This is body
+    </d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-button @click="panelToggle = !panelToggle" >
+    {{ panelToggle ? 'prevent to fold' : 'allow to fold' }}
+  </d-button>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup(){
+    let isCollapsed = ref(true);
+    let panelToggle = ref(true);
+    let toggle = ref(true);
+    let showAnimation = ref(true);
+    let state;
+    let padding = ref(false);
+    const handleToggle = (e) => {toggle.value = e;}
+    const beforeToggle = (e) => {console.log(e); return panelToggle.value;}
+    return {
+      state,
+      toggle,
+      panelToggle,
+      beforeToggle,
+      isCollapsed,
+      handleToggle,
+      showAnimation,
+      padding
+    }
+  }
+})
+</script>
+```
+:::
+
+### Properties Dynamic Change
+
+We take hasLeftPadding properties as an example.
+
+Theoretically all properties can dynamic change. We only take hasLeftPadding properties as an example.
+
+:::demo
+```vue
+<template>
+  <d-panel :type="type" :hasLeftPadding=padding :isCollapsed>
+    <d-panel-header>
+      Panel with foldable
+    </d-panel-header>
+    <d-panel-body>
+      This is body
+    </d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-button @click="padding = !padding" >
+    {{ padding ? 'hasLeftPadding' : 'notLeftPadding' }}
+  </d-button>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup(){
+    let padding = ref(false);
+    return {
+      padding,
+    }
+  }
+})
+</script>
+```
+:::
+
+
+### API
+
+|Property|Type|Descript|default Value|
+|:-:|:-:|:-:|:-:| 
+|type|	          PanelType|	                    'default'|	    Optional. Can be set Panel Type|
+|cssClass|	      string|	                        --       |	    Optional. User-defined class name|
+|isCollapsed|	    boolean|	                      false    |    Optional. Optional. Whether to expand the panel|
+|hasLeftPadding|	boolean|	                      true     |	Optional. Whether to display the left padding|
+|showAnimation|	  boolean|	                      true     |	    Optional. Indicating whether to display animations.|
+|beforeToggle|	  Function\|Promise\|Observable|	--       |      可	Optional. Callback function before the panel folding status changes. The value of this parameter is of the boolean type. If false is returned, the panel folding status changes.|
+|toggle|          Function|                       --       |      Optional. Callback upon panel click to return the expanded status of the current panel.
+
+### declare Interface & type
+```javascript
+export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+```
\ No newline at end of file