From a5127f3c1bbc7b340f2799ef4bd953da509440c9 Mon Sep 17 00:00:00 2001
From: EditorWang <gaonenggg@outlook.com>
Date: Sat, 16 Oct 2021 13:35:42 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix(panel):=20=E4=BF=AE=E5=A4=8D=E4=BA=86?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=97=A0=E6=B3=95=E5=8A=A8=E6=80=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/panel/__tests__/panel.spec.ts | 207 ++++++++++++++++++++++++++++
 devui/panel/src/body/panel-body.tsx |   9 +-
 devui/panel/src/panel.tsx           |  17 +--
 docs/components/panel/index.md      |  10 +-
 4 files changed, 221 insertions(+), 22 deletions(-)
 create mode 100644 devui/panel/__tests__/panel.spec.ts

diff --git a/devui/panel/__tests__/panel.spec.ts b/devui/panel/__tests__/panel.spec.ts
new file mode 100644
index 00000000..e98aad80
--- /dev/null
+++ b/devui/panel/__tests__/panel.spec.ts
@@ -0,0 +1,207 @@
+import { shallowMount,mount } from "@vue/test-utils";
+import {ref,nextTick,Transition } from 'vue';
+import DButton from '../../button/index';
+import DPanel from '../src/panel'
+import DPanelHeader from '../src/header/panel-header';
+import DPanelBody from '../src/body/panel-body';
+import DPanelFooter from '../src/foot/panel-footer';
+
+
+describe('DPanel',()=>{
+
+    // 渲染测试
+    it('Render',()=>{
+        // except(wrapper.html())
+        let wrapper = mount({
+            components:{
+                DPanel,
+                DPanelBody,
+                DPanelHeader,
+                DPanelFooter,
+                DButton
+            },
+            template: `
+            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+                <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="panelToggle = !panelToggle" >
+                {{ panelToggle ? '阻止折叠' : '允许折叠' }}
+            </d-button>
+            `,
+            setup(){
+              let isCollapsed = ref(true);
+              let panelToggle = ref(false);
+              let toggle = ref(true);
+              let leftPadding = ref(true);
+              let showAnimation = ref(true);
+              let state;
+              const handleToggle = (e) => toggle.value = e;
+              const beforeToggle = () => panelToggle.value;
+              return {
+                state,
+                toggle,
+                panelToggle,
+                beforeToggle,
+                isCollapsed,
+                handleToggle,
+                leftPadding,
+                showAnimation
+              }
+            }
+        });
+        expect(wrapper.html()).toContain('<div class="devui-panel-content"> This is body </div>');
+    })
+
+    it('isCollapsed', async ()=>{
+        let wrapper = mount({
+            components:{
+                DPanel,
+                DPanelBody,
+                DPanelHeader,
+                DPanelFooter,
+                DButton
+            },
+            template: `
+            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+                <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="leftPadding = !leftPadding" >
+                切换LeftPadding
+            </d-button>
+            `,
+            setup(){
+              let isCollapsed = ref(false);
+              let panelToggle = ref(false);
+              let toggle = ref(true);
+              let leftPadding = ref(false);
+              let showAnimation = ref(true);
+              let state;
+              const handleToggle = (e) => toggle.value = e;
+              const beforeToggle = () => panelToggle.value;
+              return {
+                state,
+                toggle,
+                panelToggle,
+                beforeToggle,
+                isCollapsed,
+                handleToggle,
+                leftPadding,
+                showAnimation
+              }
+            }
+        });
+        expect(wrapper.find(`.devui-panel-default`).element.children[0].innerHTML).toBe('<!---->')
+    })
+    // 动态hasLeftPadding 测试
+    it('padding-dynamic', async ()=>{
+        let wrapper = mount({
+            components:{
+                DPanel,
+                DPanelBody,
+                DPanelHeader,
+                DPanelFooter,
+                DButton
+            },
+            template: `
+            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+                <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="leftPadding = !leftPadding" >
+                切换LeftPadding
+            </d-button>
+            `,
+            setup(){
+              let isCollapsed = ref(true);
+              let panelToggle = ref(false);
+              let toggle = ref(true);
+              let leftPadding = ref(false);
+              let showAnimation = ref(true);
+              let state;
+              const handleToggle = (e) => toggle.value = e;
+              const beforeToggle = () => panelToggle.value;
+              return {
+                state,
+                toggle,
+                panelToggle,
+                beforeToggle,
+                isCollapsed,
+                handleToggle,
+                leftPadding,
+                showAnimation
+              }
+            }
+        });
+        expect(wrapper.find('.devui-panel-body-collapse').classes().length).toBe(3);
+        await wrapper.find('button').trigger('click');
+        expect(wrapper.find('.devui-panel-body-collapse').classes().length).toBe(2);
+    })
+
+    // 动态beforeToggle 测试
+    it('beforeToggle-dynamic',async ()=>{
+        let wrapper = mount({
+            components:{
+                DPanel,
+                DPanelBody,
+                DPanelHeader,
+                DPanelFooter,
+                DButton
+            },
+            template: `
+            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+                <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="panelToggle = !panelToggle" >
+                {{ panelToggle ? '阻止折叠' : '允许折叠' }}
+            </d-button>
+            `,
+            setup(){
+              let isCollapsed = ref(true);
+              let panelToggle = ref(false);
+              let toggle = ref(true);
+              let leftPadding = ref(false);
+              let showAnimation = ref(true);
+              let state;
+              const handleToggle = (e) => toggle.value = e;
+              const beforeToggle = () => panelToggle.value;
+              return {
+                state,
+                toggle,
+                panelToggle,
+                beforeToggle,
+                isCollapsed,
+                handleToggle,
+                leftPadding,
+                showAnimation
+              }
+            }
+        });
+        await wrapper.find('button').trigger('click');
+        expect(wrapper.vm.panelToggle).toBe(true);
+        await wrapper.find('button').trigger('click');
+        expect(wrapper.vm.panelToggle).toBe(false);
+    })
+});
\ No newline at end of file
diff --git a/devui/panel/src/body/panel-body.tsx b/devui/panel/src/body/panel-body.tsx
index 84a64108..e9cbabd8 100644
--- a/devui/panel/src/body/panel-body.tsx
+++ b/devui/panel/src/body/panel-body.tsx
@@ -6,8 +6,8 @@ export default defineComponent({
     name: 'DPanelBody',
     props:PanelProps,
     setup(props,ctx){
-        const animationName = inject('showAnimation') ? 'devui-panel' : '';
-        const hasLeftPadding = !inject('hasLeftPadding') ? 'no-left-padding' : '';
+        let animationName = inject('showAnimation');
+        let hasLeftPadding = inject('hasLeftPadding')
 
         const keys = Object.keys(Store.state());
         const key = keys.pop();
@@ -34,13 +34,12 @@ export default defineComponent({
           const el = (element as HTMLElement);
           el.style.height = '0px';
         }
-        
         return () => {
           return (
             <div class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
-              <Transition name={animationName} onEnter={ enter } onLeave={leave}>
+              <Transition name={animationName.value ? 'devui-panel' : ''} onEnter={ enter } onLeave={leave}>
                 {isCollapsed[key] === undefined || isCollapsed[key] ?
-                <div ref={bodyEl} class={`devui-panel-body ${isCollapsed[key] !== undefined ? 'devui-panel-body-collapse': ''} ${hasLeftPadding}`}>
+                <div ref={bodyEl} class={`devui-panel-body ${isCollapsed[key] !== undefined ? 'devui-panel-body-collapse': ''} ${!(hasLeftPadding.value) ? 'no-left-padding' : ''}`}>
                   <div class="devui-panel-content">
                     {ctx.slots.default?.()}
                   </div>
diff --git a/devui/panel/src/panel.tsx b/devui/panel/src/panel.tsx
index 741ebcf5..56460bb4 100644
--- a/devui/panel/src/panel.tsx
+++ b/devui/panel/src/panel.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, Transition, onMounted, provide } from 'vue';
+import { defineComponent, ref, provide, computed} from 'vue';
 import './panel.scss';
 import { PanelProps } from './panel.type';
 import Store from './store/store';
@@ -8,29 +8,20 @@ export default defineComponent({
   props: PanelProps,
   setup(props, ctx) {
     provide('beforeToggle', props.beforeToggle);
-    provide('showAnimation', props.showAnimation);
-    provide('hasLeftPadding', props.hasLeftPadding);
+    provide('showAnimation', computed(()=>props.showAnimation));
+    provide('hasLeftPadding', computed(()=>props.hasLeftPadding));
     const isCollapsed = ref(props.isCollapsed);
-    const bodyEl = ref();
     const onToggle = ()=> {
       props.toggle?.(Store.getByKey(`isCollapsed[${timeStamp}]`))
     };
 
-    onMounted(() => {
-      if(bodyEl.value) {
-        const dom = bodyEl.value;
-        if(isCollapsed.value)
-        dom.style.height = `${dom.offsetHeight}px`;
-      }
-    })
-
     const timeStamp = new Date().getTime().toString();
     Store.setData(`isCollapsed[${timeStamp}]`, isCollapsed.value);
 
     return () => {
       return (
         <div onClick = {onToggle} class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
-          {ctx.slots.default()}
+          {ctx.slots.default?.()}
         </div>
       )
     }
diff --git a/docs/components/panel/index.md b/docs/components/panel/index.md
index aeae65aa..0f7b2162 100644
--- a/docs/components/panel/index.md
+++ b/docs/components/panel/index.md
@@ -87,7 +87,7 @@ export default defineComponent({
 :::demo
 ```vue
 <template>
-  <d-panel type="primary" :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+  <d-panel type="primary" :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle" :showAnimation=showAnimation :hasLeftPadding=hasLeftPadding>
     <d-panel-header>
       Panel with foldable <i :class="`icon-arrow-${toggle ? 'up' : 'down'}`"></i>
     </d-panel-header>
@@ -106,10 +106,11 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
   setup(){
     let isCollapsed = ref(true);
-    let panelToggle = ref(false);
+    let panelToggle = ref(true);
     let toggle = ref(true);
+    let showAnimation = ref(true);
     let state;
-    const handleToggle = (e) => toggle.value = e;
+    const handleToggle = (e) => {toggle.value = e;console.log(showAnimation);}
     const beforeToggle = () => panelToggle.value;
     return {
       state,
@@ -117,7 +118,8 @@ export default defineComponent({
       panelToggle,
       beforeToggle,
       isCollapsed,
-      handleToggle
+      handleToggle,
+      showAnimation
     }
   }
 })
-- 
Gitee


From a4bd1db150388428867a119abcb22ccb513f1163 Mon Sep 17 00:00:00 2001
From: EditorWang <gaonenggg@outlook.com>
Date: Sun, 17 Oct 2021 10:35:51 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix(panel):=E4=BF=AE=E5=A4=8D=E4=BA=86?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=97=A0=E6=B3=95=E5=8A=A8=E6=80=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=9A=84=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/panel/src/body/panel-body.tsx     |  9 ++--
 devui/panel/src/header/panel-header.tsx | 63 ++++++++++++++++---------
 devui/panel/src/panel.scss              | 23 ++++-----
 devui/panel/src/panel.type.ts           | 56 +++++++++++-----------
 docs/components/panel/index.md          | 55 +++++++++++++++++----
 5 files changed, 131 insertions(+), 75 deletions(-)

diff --git a/devui/panel/src/body/panel-body.tsx b/devui/panel/src/body/panel-body.tsx
index e9cbabd8..7a7827f3 100644
--- a/devui/panel/src/body/panel-body.tsx
+++ b/devui/panel/src/body/panel-body.tsx
@@ -1,4 +1,4 @@
-import { defineComponent,ref,onMounted,Transition,inject } from 'vue';
+import { defineComponent,ref,onMounted,Transition,inject,Ref } from 'vue';
 import { PanelProps } from '../panel.type';
 import Store from '../store/store';
 
@@ -6,9 +6,8 @@ export default defineComponent({
     name: 'DPanelBody',
     props:PanelProps,
     setup(props,ctx){
-        let animationName = inject('showAnimation');
-        let hasLeftPadding = inject('hasLeftPadding')
-
+        let animationName = inject('showAnimation') as Ref<any>;
+        let hasLeftPadding = inject('hasLeftPadding') as Ref<any>;
         const keys = Object.keys(Store.state());
         const key = keys.pop();
         const isCollapsed = Store.state();
@@ -39,7 +38,7 @@ export default defineComponent({
             <div class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
               <Transition name={animationName.value ? 'devui-panel' : ''} onEnter={ enter } onLeave={leave}>
                 {isCollapsed[key] === undefined || isCollapsed[key] ?
-                <div ref={bodyEl} class={`devui-panel-body ${isCollapsed[key] !== undefined ? 'devui-panel-body-collapse': ''} ${!(hasLeftPadding.value) ? 'no-left-padding' : ''}`}>
+                <div ref={bodyEl} class={`devui-panel-body ${isCollapsed[key] !== undefined ? 'devui-panel-body-collapse': ''} ${!hasLeftPadding.value ? 'no-left-padding' : ''}`}>
                   <div class="devui-panel-content">
                     {ctx.slots.default?.()}
                   </div>
diff --git a/devui/panel/src/header/panel-header.tsx b/devui/panel/src/header/panel-header.tsx
index 93f70162..eff04568 100644
--- a/devui/panel/src/header/panel-header.tsx
+++ b/devui/panel/src/header/panel-header.tsx
@@ -1,4 +1,4 @@
-import { defineComponent,ref,inject } from 'vue';
+import { defineComponent,ref,inject,effect } from 'vue';
 import {PanelProps} from '../panel.type';
 import Store from '../store/store';
 
@@ -10,40 +10,57 @@ export default defineComponent({
         const keys = Object.keys(Store.state());
         const key = keys.pop();
         const isCollapsed = ref(Store.state()[key]);
+        // 当beforeToggle为fals时
+        // 最好cursor是default 而不是 pointer；
+        // pointer一般用于可点击的
+        // 用changeFlag
+        let changeFlag = ref();
+        let header = null;
+
 
         const canToggle = (): Promise<boolean> => {
-            let changeResult = Promise.resolve(true);
-            if(beforeToggle) {
-              const result = beforeToggle(isCollapsed);
-              if(typeof result !== undefined) {
-                if(result instanceof Promise) {
-                  changeResult = result;
-                } else {
-                  changeResult = Promise.resolve(result);
-                }
+          let changeResult = Promise.resolve(true);
+          if(beforeToggle) {
+            const result = beforeToggle(isCollapsed);
+            if(typeof result !== undefined) {
+              if(result instanceof Promise) {
+                changeResult = result;
+              } else {
+                changeResult = Promise.resolve(result);
               }
             }
-            return changeResult;
           }
-      
-          const toggleBody = (): void => {
-            canToggle().then((val) => {
-              if (!val){
-                return;
-              }
-              if (isCollapsed.value !== undefined) {
+          return changeResult;
+        }
+
+        // 需要执行一次才能生效；
+        canToggle().then((val)=>changeFlag.value = val)
+        
+        const toggleBody = (): void => {
+          canToggle().then((val) => {
+            changeFlag.value = val;
+            if (!val){
+              // 禁止折叠不影响展开
+              if (!isCollapsed.value){
+                console.log('伸开');
                 Store.setData(`${key}`, !isCollapsed.value);
                 isCollapsed.value = !isCollapsed.value;
                 props.toggle?.(isCollapsed.value);
               }
-            })
-            
-          };
+              return;
+            }
+            if (isCollapsed.value !== undefined) {
+              Store.setData(`${key}`, !isCollapsed.value);
+              isCollapsed.value = !isCollapsed.value;
+              props.toggle?.(isCollapsed.value);
+            }
+          })
+          
+        };
         return () => {
-            let header = null;
             if (ctx.slots.default){
                 header = (
-                    <div class="devui-panel-heading" onClick={toggleBody} style={{ 'cursor': isCollapsed.value !== undefined ? 'pointer' : 'auto' }}>
+                    <div class="devui-panel-heading" onClick={toggleBody} style={{ 'cursor': changeFlag.value ? 'pointer' : 'auto' }}>
                         {ctx.slots.default?.()}
                     </div>
                 )
diff --git a/devui/panel/src/panel.scss b/devui/panel/src/panel.scss
index 2cb1bb83..76ab8964 100644
--- a/devui/panel/src/panel.scss
+++ b/devui/panel/src/panel.scss
@@ -1,5 +1,17 @@
 @import '../../style/theme/color';
 
+.no-left-padding {
+  &.devui-panel-body-collapse {
+    &::before {
+      content: none !important;
+    }
+
+    .devui-panel-content {
+      border-left: none !important;
+    }
+  }
+}
+
 .devui-panel {
   line-height: 1.5;
   background-color: $devui-base-bg;
@@ -13,17 +25,6 @@
     }
   }
 
-  .no-left-padding {
-    &.devui-panel-body-collapse {
-      &::before {
-        display: none;
-      }
-
-      .devui-panel-content {
-        border-left: none !important;
-      }
-    }
-  }
 
   .devui-panel-body {
     display: flex;
diff --git a/devui/panel/src/panel.type.ts b/devui/panel/src/panel.type.ts
index 58a80760..ed236066 100644
--- a/devui/panel/src/panel.type.ts
+++ b/devui/panel/src/panel.type.ts
@@ -3,34 +3,34 @@ import {ExtractPropTypes} from 'vue';
 export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
 
 export const PanelProps = {
-    type: {
-        type: String as () => PanelType,
-        default: 'default'
-      },
-      cssClass: {
-        type: String,
-        default: ''
-      },
-      isCollapsed: {
-        type: Boolean,
-        default: undefined
-      },
-      beforeToggle: {
-        type: Function as unknown as () => (value: boolean) => boolean | Promise<boolean>,
-        default: null
-      },
-      toggle: { 
-        type: Function as unknown as ()=> ((value: boolean) => void),
-        default: null
-      },
-      showAnimation: {
-        type: Boolean,
-        default: true,
-      },
-      hasLeftPadding:{
-        type: Boolean,
-        default: true,
-      }
+  type: {
+    type: String as () => PanelType,
+    default: 'default'
+  },
+  cssClass: {
+    type: String,
+    default: ''
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: false
+  },
+  beforeToggle: {
+    type: Function as unknown as () => (value: boolean) => boolean | Promise<boolean>,
+    default: null
+  },
+  toggle: { 
+    type: Function as unknown as ()=> ((value: boolean) => void),
+    default: null
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true,
+  },
+  hasLeftPadding:{
+    type: Boolean,
+    default: true,
+  }
 }
 
 export type PanelPropsType = ExtractPropTypes<typeof PanelProps>;
\ No newline at end of file
diff --git a/docs/components/panel/index.md b/docs/components/panel/index.md
index 0f7b2162..26803dac 100644
--- a/docs/components/panel/index.md
+++ b/docs/components/panel/index.md
@@ -11,14 +11,14 @@
 
 ```vue
 <template>
-  <d-panel type="primary" :isCollapsed="true" :showAnimation="true">
+  <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" :hasLeftPadding="false" :showAnimation="true">
+  <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>
@@ -26,7 +26,7 @@
     <d-panel-body>This is body</d-panel-body>
   </d-panel>
   <br /><br />
-  <d-panel>
+  <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>
@@ -38,9 +38,11 @@ export default defineComponent({
   setup(){
     const toggleState = ref(true);
     const toggle = (e) => toggleState.value = e;
+    const beforeToggle = () => false;
     return {
       toggle,
       toggleState,
+      beforeToggle
     }
   }
 })
@@ -87,9 +89,9 @@ export default defineComponent({
 :::demo
 ```vue
 <template>
-  <d-panel type="primary" :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle" :showAnimation=showAnimation :hasLeftPadding=hasLeftPadding>
+  <d-panel type="primary" :hasLeftPadding=padding :toggle=handleToggle  :beforeToggle=beforeToggle :showAnimation=showAnimation >
     <d-panel-header>
-      Panel with foldable <i :class="`icon-arrow-${toggle ? 'up' : 'down'}`"></i>
+      Panel with foldable <i :class="`icon-arrow-${toggle ? 'down' : 'up'}`"></i>
     </d-panel-header>
     <d-panel-body>
       This is body
@@ -110,8 +112,9 @@ export default defineComponent({
     let toggle = ref(true);
     let showAnimation = ref(true);
     let state;
-    const handleToggle = (e) => {toggle.value = e;console.log(showAnimation);}
-    const beforeToggle = () => panelToggle.value;
+    let padding = ref(false);
+    const handleToggle = (e) => {toggle.value = e;}
+    const beforeToggle = (e) => {console.log(e); return panelToggle.value;}
     return {
       state,
       toggle,
@@ -119,7 +122,43 @@ export default defineComponent({
       beforeToggle,
       isCollapsed,
       handleToggle,
-      showAnimation
+      showAnimation,
+      padding
+    }
+  }
+})
+</script>
+```
+:::
+
+### 动态切换
+
+我们已hasLeftPadding为例
+
+:::demo
+```vue
+<template>
+  <d-panel type="primary" :hasLeftPadding=padding :isCollapsed="true">
+    <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 ? '有左填充' : '没有左填充' }}
+  </d-button>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup(){
+    let padding = ref(false);
+    return {
+      padding,
     }
   }
 })
-- 
Gitee


From b2ce39e83fbc711518af51400c8b0416a031a8e9 Mon Sep 17 00:00:00 2001
From: EditorWang <gaonenggg@outlook.com>
Date: Sun, 17 Oct 2021 10:43:28 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(panel):=E4=BF=AE=E5=A4=8D=E4=BA=86?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=B1=9E=E6=80=A7=E6=97=A0=E6=B3=95=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=88=87=E6=8D=A2=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/panel/src/header/panel-header.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/devui/panel/src/header/panel-header.tsx b/devui/panel/src/header/panel-header.tsx
index eff04568..9b8c7a4c 100644
--- a/devui/panel/src/header/panel-header.tsx
+++ b/devui/panel/src/header/panel-header.tsx
@@ -1,4 +1,4 @@
-import { defineComponent,ref,inject,effect } from 'vue';
+import { defineComponent,ref,inject } from 'vue';
 import {PanelProps} from '../panel.type';
 import Store from '../store/store';
 
@@ -42,7 +42,6 @@ export default defineComponent({
             if (!val){
               // 禁止折叠不影响展开
               if (!isCollapsed.value){
-                console.log('伸开');
                 Store.setData(`${key}`, !isCollapsed.value);
                 isCollapsed.value = !isCollapsed.value;
                 props.toggle?.(isCollapsed.value);
-- 
Gitee


From 0be83815f541cdedd66b628b11483e19b4277a5e Mon Sep 17 00:00:00 2001
From: EditorWang <gaonenggg@outlook.com>
Date: Sat, 23 Oct 2021 11:37:16 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/panel/__tests__/panel.spec.ts | 92 ++++-------------------------
 devui/panel/src/panel.tsx           |  8 +--
 docs/components/panel/index.md      |  4 +-
 3 files changed, 18 insertions(+), 86 deletions(-)

diff --git a/devui/panel/__tests__/panel.spec.ts b/devui/panel/__tests__/panel.spec.ts
index e98aad80..6a7b0ce7 100644
--- a/devui/panel/__tests__/panel.spec.ts
+++ b/devui/panel/__tests__/panel.spec.ts
@@ -21,41 +21,17 @@ describe('DPanel',()=>{
                 DButton
             },
             template: `
-            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+            <d-panel>
                 <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="panelToggle = !panelToggle" >
-                {{ panelToggle ? '阻止折叠' : '允许折叠' }}
-            </d-button>
+            </d-panel>            
             `,
-            setup(){
-              let isCollapsed = ref(true);
-              let panelToggle = ref(false);
-              let toggle = ref(true);
-              let leftPadding = ref(true);
-              let showAnimation = ref(true);
-              let state;
-              const handleToggle = (e) => toggle.value = e;
-              const beforeToggle = () => panelToggle.value;
-              return {
-                state,
-                toggle,
-                panelToggle,
-                beforeToggle,
-                isCollapsed,
-                handleToggle,
-                leftPadding,
-                showAnimation
-              }
-            }
         });
-        expect(wrapper.html()).toContain('<div class="devui-panel-content"> This is body </div>');
+        expect(wrapper.find('transition-stub').html()).toContain('<transition-stub><!----></transition-stub>');
     })
 
     it('isCollapsed', async ()=>{
@@ -68,7 +44,7 @@ describe('DPanel',()=>{
                 DButton
             },
             template: `
-            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+            <d-panel :isCollapsed="isCollapsed">
                 <d-panel-header>
                     Panel with foldable
                 </d-panel-header>
@@ -76,35 +52,15 @@ describe('DPanel',()=>{
                     This is body
                 </d-panel-body>
             </d-panel>
-            <br /><br />
-            <d-button @click="leftPadding = !leftPadding" >
-                切换LeftPadding
-            </d-button>
             `,
             setup(){
               let isCollapsed = ref(false);
-              let panelToggle = ref(false);
-              let toggle = ref(true);
-              let leftPadding = ref(false);
-              let showAnimation = ref(true);
-              let state;
-              const handleToggle = (e) => toggle.value = e;
-              const beforeToggle = () => panelToggle.value;
-              return {
-                state,
-                toggle,
-                panelToggle,
-                beforeToggle,
-                isCollapsed,
-                handleToggle,
-                leftPadding,
-                showAnimation
-              }
+              return {isCollapsed}
             }
         });
-        expect(wrapper.find(`.devui-panel-default`).element.children[0].innerHTML).toBe('<!---->')
+        expect(wrapper.find('.devui-panel .devui-panel-default').element.children[0].innerHTML).toBe('<!---->');
     })
-    // 动态hasLeftPadding 测试
+    // // 动态hasLeftPadding 测试
     it('padding-dynamic', async ()=>{
         let wrapper = mount({
             components:{
@@ -115,7 +71,7 @@ describe('DPanel',()=>{
                 DButton
             },
             template: `
-            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+            <d-panel :hasLeftPadding = "leftPadding" isCollapsed>
                 <d-panel-header>
                     Panel with foldable
                 </d-panel-header>
@@ -129,23 +85,9 @@ describe('DPanel',()=>{
             </d-button>
             `,
             setup(){
-              let isCollapsed = ref(true);
-              let panelToggle = ref(false);
-              let toggle = ref(true);
               let leftPadding = ref(false);
-              let showAnimation = ref(true);
-              let state;
-              const handleToggle = (e) => toggle.value = e;
-              const beforeToggle = () => panelToggle.value;
               return {
-                state,
-                toggle,
-                panelToggle,
-                beforeToggle,
-                isCollapsed,
-                handleToggle,
                 leftPadding,
-                showAnimation
               }
             }
         });
@@ -154,7 +96,7 @@ describe('DPanel',()=>{
         expect(wrapper.find('.devui-panel-body-collapse').classes().length).toBe(2);
     })
 
-    // 动态beforeToggle 测试
+
     it('beforeToggle-dynamic',async ()=>{
         let wrapper = mount({
             components:{
@@ -165,7 +107,7 @@ describe('DPanel',()=>{
                 DButton
             },
             template: `
-            <d-panel type="primary" :showAnimation = showAnimation :hasLeftPadding = leftPadding :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+            <d-panel :beforeToggle="beforeToggle" isCollapsed>
                 <d-panel-header>
                     Panel with foldable
                 </d-panel-header>
@@ -179,23 +121,11 @@ describe('DPanel',()=>{
             </d-button>
             `,
             setup(){
-              let isCollapsed = ref(true);
               let panelToggle = ref(false);
-              let toggle = ref(true);
-              let leftPadding = ref(false);
-              let showAnimation = ref(true);
-              let state;
-              const handleToggle = (e) => toggle.value = e;
               const beforeToggle = () => panelToggle.value;
               return {
-                state,
-                toggle,
                 panelToggle,
                 beforeToggle,
-                isCollapsed,
-                handleToggle,
-                leftPadding,
-                showAnimation
               }
             }
         });
@@ -204,4 +134,4 @@ describe('DPanel',()=>{
         await wrapper.find('button').trigger('click');
         expect(wrapper.vm.panelToggle).toBe(false);
     })
-});
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/devui/panel/src/panel.tsx b/devui/panel/src/panel.tsx
index 56460bb4..5c601aee 100644
--- a/devui/panel/src/panel.tsx
+++ b/devui/panel/src/panel.tsx
@@ -11,19 +11,19 @@ export default defineComponent({
     provide('showAnimation', computed(()=>props.showAnimation));
     provide('hasLeftPadding', computed(()=>props.hasLeftPadding));
     const isCollapsed = ref(props.isCollapsed);
+    const type = computed(()=>props.type);
+    const cssClass = computed(()=>props.cssClass);
     const onToggle = ()=> {
       props.toggle?.(Store.getByKey(`isCollapsed[${timeStamp}]`))
     };
-
     const timeStamp = new Date().getTime().toString();
     Store.setData(`isCollapsed[${timeStamp}]`, isCollapsed.value);
-
     return () => {
       return (
-        <div onClick = {onToggle} class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
+        <div onClick = {onToggle} class={`devui-panel devui-panel-${type.value} ${cssClass.value}`}>
           {ctx.slots.default?.()}
         </div>
       )
     }
-  },
+  }
 })
\ No newline at end of file
diff --git a/docs/components/panel/index.md b/docs/components/panel/index.md
index 26803dac..0c1b6198 100644
--- a/docs/components/panel/index.md
+++ b/docs/components/panel/index.md
@@ -138,7 +138,7 @@ export default defineComponent({
 :::demo
 ```vue
 <template>
-  <d-panel type="primary" :hasLeftPadding=padding :isCollapsed="true">
+  <d-panel :type="type" :hasLeftPadding=padding :isCollapsed>
     <d-panel-header>
       Panel with foldable
     </d-panel-header>
@@ -166,6 +166,8 @@ export default defineComponent({
 ```
 :::
 
+
+
 ### API
 
 |参数|  	        类型|	                           默认|	     说明|
-- 
Gitee