From 411884ab0c6dc87cae3bff8e697d0c14010735c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Tue, 23 Nov 2021 00:15:23 +0800
Subject: [PATCH 1/8] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=8F=8A=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-item.tsx    |  84 ++++++++++++++-
 .../devui/accordion/src/accordion-list.tsx    | 102 +++++++++---------
 .../devui/accordion/src/accordion-menu.tsx    |  66 +++++++++---
 .../accordion/src/accordion-open-icon.tsx     |  20 ++++
 .../devui/accordion/src/accordion.tsx         |  15 ++-
 .../docs/components/accordion/index.md        |  17 +--
 6 files changed, 220 insertions(+), 84 deletions(-)
 create mode 100644 packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index 77389aa8..897f2191 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -1,13 +1,87 @@
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs, Fragment, computed, inject } from 'vue'
+import { accordionProps } from './accordion-types'
+import { AccordionItemClickEvent, AccordionMenuItem } from './accordion.type'
 
 export default defineComponent({
   name: 'DAccordionItem',
   props: {
-
+    item: Object as () => AccordionMenuItem,
+    deepth: {
+      type: Number,
+      default: 0
+    },
+    parent: {
+      type: Object as () => AccordionMenuItem,
+      default: null
+    },
+    ...accordionProps
   },
-  setup() {
+  setup(props, {slots}) {
+    const {
+      item,
+      deepth,
+      parent,
+      openKey,
+      menuItemTemplate,
+      activeKey,
+      autoOpenActiveMenu,
+      disabledKey,
+      itemTemplate
+    } = toRefs(props)
+
+    const accordionCtx = inject('accordionContext') as any
+    
+    const itemClick = (itemEvent: AccordionItemClickEvent) => {
+      if(item.value && !item.value.disabled) {
+        accordionCtx.itemClickFn(itemEvent)
+      }
+    }
+
+    const childActived = computed(() => {
+      return item.value.active
+    })
+
     return () => {
-      return <li>d-accordion-item</li>
+      
+      return (
+        <>
+        <div
+            class={`devui-accordion-item-title devui-over-flow-ellipsis ${childActived.value ? 'active' : ''} ${
+              item.value[disabledKey.value] ? 'disabled' : ''
+            }`}
+            title={item.value.title}
+            style={{ textIndent: deepth.value * 20 + 'px' }}
+            onClick={(e) =>
+              itemClick({
+                item: item.value,
+                parent: parent.value,
+                event: e
+              })
+            }
+          >
+          <div
+            class={`devui-accordion-splitter ${deepth.value === 0 ? 'devui-parent-list' : ''}`}
+            style={{ left: deepth.value * 20 + 10 + 'px' }}
+          ></div>
+          {!itemTemplate.value && <Fragment>{item.value.title}</Fragment>}
+          {
+            itemTemplate.value && 
+            <Fragment>
+              {slots.itemTemplate()}
+            </Fragment>
+          }
+          </div>
+        </>
+        // <ng-template
+        //   *ngIf="itemTemplate"
+        //   [ngTemplateOutlet]="itemTemplate"
+        //   [ngTemplateOutletContext]="{
+        //     parent: parent,
+        //     item: item,
+        //     deepth: deepth
+        //   }"
+        // ></ng-template>
+      )
     }
   }
-})
\ No newline at end of file
+})
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index 3fba7abb..7e622671 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -1,14 +1,16 @@
-import { defineComponent, toRefs } from 'vue'
+import { computed, defineComponent, inject, toRefs, Fragment } from 'vue'
 import type { AccordionMenuItem } from './accordion.type'
 import DAccordionMenu from './accordion-menu'
+import DAccordionItem from './accordion-item'
 import { accordionProps } from './accordion-types'
-
+import './accordion.scss'
 
 export default defineComponent({
   name: 'DAccordionList',
   inheritAttrs: false,
   components: {
-    DAccordionMenu
+    DAccordionMenu,
+    DAccordionItem
   },
   props: {
     data: {
@@ -24,61 +26,61 @@ export default defineComponent({
       default: null
     },
     innerListTemplate: Boolean,
-    ...accordionProps,
+    ...accordionProps
   },
-  setup(props, {attrs, slots}) {
-    const {
-      childrenKey,
-      innerListTemplate,
-      deepth
-    } = toRefs(props)
+  setup(props, { attrs, slots }) {
+    const { childrenKey, innerListTemplate, deepth, parent, data, linkType } = toRefs(props)
+
+    const accordionCtx = inject('accordionContext') as any
+
     return () => {
       return (
         <>
-          {
-            !innerListTemplate.value &&
-            <ul class="devui-accordion-list" {...attrs}>
-              {props.data.map(item => {
-                return <li class="devui-accordion-item" key={item.title}>
-                  {/* // TODO 菜单类型 d-accordion-menu */}
-                  {childrenKey !== undefined && <d-accordion-menu item={item} deepth={props.deepth} parent={props.parent} {...accordionProps}></d-accordion-menu>}
-                  {/* <div class="devui-accordion-menu-item open" title={item.title}>
-                    <div title={item.title} class={`devui-accordion-item-title devui-over-flow-ellipsis open`}>{ item.title }</div>
-                    {
-                      // TODO 子菜单 d-accordion-list
-                    }
-                    <div class="devui-accordion-submenu devui-accordion-show-animate" style="opacity: 1; overflow: hidden;">
-                      <ul class="devui-accordion-list">
-                        { item.children?.map(component => {
-                          return <li class="devui-accordion-item" key={component.title}>
-                            {
-                              // TODO 路由链接 d-accordion-item-routerlink
-                            }
-                            <div class="devui-accordion-item-title devui-over-flow-ellipsis" style="text-indent: 20px;" title={component.title}>
-                              <router-link to={component.link}>
-                                <div class="devui-accordion-splitter" style="left: 30px;"></div>
-                                { component.title }
-                                { component.done && <span class="tag-done">已完成</span> }
-                              </router-link>
-                            </div>
-                          </li>
-                        })}
-                      </ul>
-                    </div>
-                  </div> */}
-                </li>
-              }
-              )}
+          {!innerListTemplate.value && (
+            <ul class='devui-accordion-list devui-accordion-show-animate' {...attrs}>
+              {data.value.map((item) => {
+                return (
+                  <li class='devui-accordion-item' key={item.title}>
+                    {/* // TODO 菜单类型 d-accordion-menu */}
+                    {item[childrenKey.value] !== undefined && (
+                      <d-accordion-menu
+                        item={item}
+                        deepth={deepth.value}
+                        parent={parent.value}
+                      ></d-accordion-menu>
+                    )}
+                    {/* 非菜单类型 */}
+                    {item[childrenKey.value] === undefined && (
+                      <Fragment>
+                        {/* 普通类型 */}
+                        {(!linkType.value || linkType.value === '') && (
+                          <d-accordion-item
+                            item={item}
+                            deepth={deepth.value}
+                            parent={parent.value}
+                          ></d-accordion-item>
+                        )}
+                      </Fragment>
+                    )}
+                  </li>
+                )
+              })}
             </ul>
-          }
-          {
-            innerListTemplate.value && deepth.value !== 0 &&
+          )}
+          {innerListTemplate.value && deepth.value !== 0 && (
             <div>
-              {slots.default ? slots.innerListTemplate() : ''}
+              {slots.innerListTemplate
+                ? slots.innerListTemplate({
+                    item: parent.value,
+                    deepth: deepth.value,
+                    itemClickFn: accordionCtx.itemClickFn,
+                    menuToggleFn: accordionCtx.menuToggleFn
+                  })
+                : ''}
             </div>
-          }
+          )}
         </>
       )
     }
   }
-})
\ No newline at end of file
+})
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index e79c63d0..caff420b 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -1,7 +1,8 @@
-import { computed, defineComponent, toRefs } from 'vue'
-import { AccordionMenuItem } from './accordion.type'
+import { computed, defineComponent, toRefs, Fragment, inject, ref } from 'vue'
+import { AccordionItemClickEvent, AccordionMenuItem, AccordionMenuToggleEvent } from './accordion.type'
 import DAccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
+import OpenIcon from './accordion-open-icon'
 
 export default defineComponent({
   name: 'DAccordionMenu',
@@ -18,39 +19,70 @@ export default defineComponent({
     ...accordionProps
   },
   setup(props) {
-    const { item, deepth } = toRefs(props)
+    const { item, deepth, parent, openKey, menuItemTemplate, activeKey, autoOpenActiveMenu, disabledKey } = toRefs(props)
 
+    const accordionCtx = inject('accordionContext') as any
+
+    const toggle = (itemEvent: AccordionMenuToggleEvent) => {
+      if (!itemEvent.open && item.value.children && item.value.children.some(i=>i.active)) {
+        itemEvent.item.active = true
+      } else {
+        itemEvent.item.active = null
+      }
+      accordionCtx.menuToggleFn(itemEvent)
+    }
 
-    const menuItemClasses = computed(() => {
-      return (keyOpen === undefined && props.autoOpenActiveMenu)
-      ? childActived
-      : keyOpen
-    })
-    
     const keyOpen = computed(() => {
-      return item?.value[props.openKey];
+      return item.value && item.value[openKey.value]
     })
     const childActived = computed(() => {
-      // return props.routerLinkActived || props.hasActiveChildren
+      return item.value.active // TODO:待处理
+    })
+
+    const open = computed(() => {
+      return (keyOpen.value === undefined && autoOpenActiveMenu.value)
+        ? childActived.value
+        : keyOpen.value
     })
 
     return () => {
       return (
         <>
           <div
-            class={["devui-accordion-item-title", "devui-over-flow-ellipsis", item.value.children ? 'open active': '']}
+            class={`devui-accordion-item-title devui-over-flow-ellipsis ${
+              open.value ? 'open' : ''
+            } ${childActived.value ? 'active' : ''} ${
+              item.value[disabledKey.value] ? 'disabled' : ''
+            }`}
             title={item.value.title}
+            style={{ textIndent: deepth.value * 20 + 'px' }}
+            onClick={(e) =>
+              toggle({
+                item: item.value,
+                open: !open.value,
+                parent: parent.value,
+                event: e
+              })
+            }
           >
-            {item.value.title}
+            <div
+              class={['devui-accordion-splitter', deepth.value === 0 ? 'devui-parent-list' : '']}
+              style={{ left: deepth.value * 20 + 10 + 'px' }}
+            ></div>
+            {!menuItemTemplate.value && <Fragment>{item.value.title}</Fragment>}
+            <span class='devui-accordion-open-icon'>
+              <OpenIcon />
+            </span>
           </div>
           <DAccordionList
-            class="devui-accordion-submenu devui-accordion-show-animate"
-            style="opacity: 1; overflow: hidden;"
+            class={`devui-accordion-submenu devui-accordion-show-animate ${
+              !open.value ? 'devui-accordion-menu-hidden' : ''
+            }`}
+            // style={ open.value ? {opacity: 1, overflow: 'hidden'} : {opacity: 0, height: 0, overflow: 'hidden'}}
             deepth={deepth.value + 1}
             data={item.value.children || []}
             parent={item.value}
-          >
-          </DAccordionList>
+          ></DAccordionList>
         </>
       )
     }
diff --git a/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx b/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
new file mode 100644
index 00000000..23b9bead
--- /dev/null
+++ b/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
@@ -0,0 +1,20 @@
+const openIcon = () => {
+    return (
+        <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 16 16"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <path
+                d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
+                fill-rule="nonzero"
+                ></path>
+            </g>
+        </svg>
+    )
+}
+export default openIcon
\ No newline at end of file
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index f3cb838a..2e0f6798 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, onBeforeUpdate, onMounted, ref, SetupContext, toRefs, watch } from 'vue'
+import { computed, defineComponent, onBeforeUpdate, onMounted, provide, ref, SetupContext, toRefs, watch } from 'vue'
 import AccordionList from './accordion-list'
 import { accordionProps, AccordionProps } from './accordion-types'
 import { AccordionItemClickEvent, AccordionMenuItem, AccordionMenuToggleEvent } from './accordion.type'
@@ -7,7 +7,7 @@ import './accordion.scss'
 export default defineComponent({
   name: 'DAccordion',
   props: accordionProps,
-  setup(props: AccordionProps, { emit }) {
+  setup(props: AccordionProps, { emit, slots }) {
     const { data, childrenKey, activeKey, openKey ,accordionType, autoOpenActiveMenu , restrictOneOpen} = toRefs(props)
 
     let clickActiveItem: AccordionMenuItem | undefined = undefined //记录用户点击的激活菜单项
@@ -62,6 +62,7 @@ export default defineComponent({
 
     // 点击了可点击菜单
     const itemClickFn = (itemEvent: AccordionItemClickEvent) => {
+      data.value.forEach(item=>item[activeKey.value] = null)
       const prevActiveItem = clickActiveItem;
       activeItemFn(itemEvent.item);
       emit('itemClick', {...itemEvent, prevActiveItem: prevActiveItem});
@@ -85,6 +86,12 @@ export default defineComponent({
       )
     }
 
+    provide('accordionContext', {
+      itemClickFn,
+      linkItemClickFn,
+      menuToggleFn
+    })
+
 
     onMounted(() => {
       if (data.value) {
@@ -93,16 +100,16 @@ export default defineComponent({
     })
     
     watch(() => autoOpenActiveMenu.value, (current, preV) => {
-      console.log('cur, new', current, preV)
       if (current && preV === false) {
         cleanOpenData();
       }
     })
+
     
     return () => {
       return <div class={`devui-accordion-menu devui-scrollbar ${accordionType.value === 'normal'?'devui-accordion-menu-normal':''}`}>
         <AccordionList
-          data={data}
+          data={data.value}
           deepth={0}
           parent={null}
           {...props as any}
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 401e5749..1477cbd7 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -14,7 +14,9 @@
         <d-accordion
             :data="menu"
             :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
-        ></d-accordion>
+            :restrictOneOpen="restrictOneOpen"
+        >
+        </d-accordion>
     </div>
     
     <div class="option">
@@ -28,7 +30,11 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
     name: "accordion",
     setup() {
-        const flag = ref(false)
+        const slot = {
+            innerListTemplate: ()=> {
+                return "<p>输出值: </p>"
+            }
+        }
         const restrictOneOpen = ref(false)
         const accordionTypeEmbed = ref(false)
         const menu = ref([{
@@ -69,16 +75,11 @@ export default defineComponent({
             ]
         }])
 
-        const changV = (value) => {
-            console.log('v',value)
-            flag.value = value
-        }
-
-
         return {
             menu,
             restrictOneOpen,
             accordionTypeEmbed,
+            slot
         }
     }
 })
-- 
Gitee


From 98739c081547b3b66fca9ed2cb5f00f4ccb51dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Fri, 26 Nov 2021 22:30:29 +0800
Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=E8=A7=84=E8=8C=83class=E5=86=99?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-item.tsx    |  35 +++--
 .../devui/accordion/src/accordion-list.tsx    |   2 +-
 .../devui/accordion/src/accordion-menu.tsx    |  45 ++++--
 .../devui/accordion/src/accordion.tsx         | 132 +++++++++++-------
 4 files changed, 133 insertions(+), 81 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index 897f2191..48128cfa 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -16,7 +16,7 @@ export default defineComponent({
     },
     ...accordionProps
   },
-  setup(props, {slots}) {
+  setup(props, { slots }) {
     const {
       item,
       deepth,
@@ -30,9 +30,9 @@ export default defineComponent({
     } = toRefs(props)
 
     const accordionCtx = inject('accordionContext') as any
-    
+
     const itemClick = (itemEvent: AccordionItemClickEvent) => {
-      if(item.value && !item.value.disabled) {
+      if (item.value && !item.value.disabled) {
         accordionCtx.itemClickFn(itemEvent)
       }
     }
@@ -42,13 +42,15 @@ export default defineComponent({
     })
 
     return () => {
-      
       return (
         <>
-        <div
-            class={`devui-accordion-item-title devui-over-flow-ellipsis ${childActived.value ? 'active' : ''} ${
-              item.value[disabledKey.value] ? 'disabled' : ''
-            }`}
+          <div
+            class={[
+              'devui-accordion-item-title',
+              'devui-over-flow-ellipsis',
+              childActived.value && 'active',
+              item.value[disabledKey.value] && 'disabled'
+            ]}
             title={item.value.title}
             style={{ textIndent: deepth.value * 20 + 'px' }}
             onClick={(e) =>
@@ -59,17 +61,12 @@ export default defineComponent({
               })
             }
           >
-          <div
-            class={`devui-accordion-splitter ${deepth.value === 0 ? 'devui-parent-list' : ''}`}
-            style={{ left: deepth.value * 20 + 10 + 'px' }}
-          ></div>
-          {!itemTemplate.value && <Fragment>{item.value.title}</Fragment>}
-          {
-            itemTemplate.value && 
-            <Fragment>
-              {slots.itemTemplate()}
-            </Fragment>
-          }
+            <div
+              class={['devui-accordion-splitter', deepth.value === 0 && 'devui-parent-list']}
+              style={{ left: deepth.value * 20 + 10 + 'px' }}
+            ></div>
+            {!itemTemplate.value && <Fragment>{item.value.title}</Fragment>}
+            {itemTemplate.value && <Fragment>{slots.itemTemplate()}</Fragment>}
           </div>
         </>
         // <ng-template
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index 7e622671..fcf628cc 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -37,7 +37,7 @@ export default defineComponent({
       return (
         <>
           {!innerListTemplate.value && (
-            <ul class='devui-accordion-list devui-accordion-show-animate' {...attrs}>
+            <ul class={['devui-accordion-list', 'devui-accordion-show-animate']} {...attrs}>
               {data.value.map((item) => {
                 return (
                   <li class='devui-accordion-item' key={item.title}>
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index caff420b..56aabc51 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -1,5 +1,9 @@
 import { computed, defineComponent, toRefs, Fragment, inject, ref } from 'vue'
-import { AccordionItemClickEvent, AccordionMenuItem, AccordionMenuToggleEvent } from './accordion.type'
+import {
+  AccordionItemClickEvent,
+  AccordionMenuItem,
+  AccordionMenuToggleEvent
+} from './accordion.type'
 import DAccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
 import OpenIcon from './accordion-open-icon'
@@ -19,12 +23,21 @@ export default defineComponent({
     ...accordionProps
   },
   setup(props) {
-    const { item, deepth, parent, openKey, menuItemTemplate, activeKey, autoOpenActiveMenu, disabledKey } = toRefs(props)
+    const {
+      item,
+      deepth,
+      parent,
+      openKey,
+      menuItemTemplate,
+      activeKey,
+      autoOpenActiveMenu,
+      disabledKey
+    } = toRefs(props)
 
     const accordionCtx = inject('accordionContext') as any
 
     const toggle = (itemEvent: AccordionMenuToggleEvent) => {
-      if (!itemEvent.open && item.value.children && item.value.children.some(i=>i.active)) {
+      if (!itemEvent.open && item.value.children && item.value.children.some((i) => i.active)) {
         itemEvent.item.active = true
       } else {
         itemEvent.item.active = null
@@ -40,7 +53,7 @@ export default defineComponent({
     })
 
     const open = computed(() => {
-      return (keyOpen.value === undefined && autoOpenActiveMenu.value)
+      return keyOpen.value === undefined && autoOpenActiveMenu.value
         ? childActived.value
         : keyOpen.value
     })
@@ -49,11 +62,13 @@ export default defineComponent({
       return (
         <>
           <div
-            class={`devui-accordion-item-title devui-over-flow-ellipsis ${
-              open.value ? 'open' : ''
-            } ${childActived.value ? 'active' : ''} ${
-              item.value[disabledKey.value] ? 'disabled' : ''
-            }`}
+            class={[
+              'devui-accordion-item-title',
+              'devui-over-flow-ellipsis',
+              open.value && 'open',
+              childActived.value && 'active',
+              item.value[disabledKey.value] && 'disabled'
+            ]}
             title={item.value.title}
             style={{ textIndent: deepth.value * 20 + 'px' }}
             onClick={(e) =>
@@ -66,7 +81,7 @@ export default defineComponent({
             }
           >
             <div
-              class={['devui-accordion-splitter', deepth.value === 0 ? 'devui-parent-list' : '']}
+              class={['devui-accordion-splitter', deepth.value === 0 && 'devui-parent-list']}
               style={{ left: deepth.value * 20 + 10 + 'px' }}
             ></div>
             {!menuItemTemplate.value && <Fragment>{item.value.title}</Fragment>}
@@ -75,9 +90,11 @@ export default defineComponent({
             </span>
           </div>
           <DAccordionList
-            class={`devui-accordion-submenu devui-accordion-show-animate ${
-              !open.value ? 'devui-accordion-menu-hidden' : ''
-            }`}
+            class={[
+              'devui-accordion-submenu',
+              'devui-accordion-show-animate',
+              !open.value && 'devui-accordion-menu-hidden'
+            ]}
             // style={ open.value ? {opacity: 1, overflow: 'hidden'} : {opacity: 0, height: 0, overflow: 'hidden'}}
             deepth={deepth.value + 1}
             data={item.value.children || []}
@@ -87,4 +104,4 @@ export default defineComponent({
       )
     }
   }
-})
\ No newline at end of file
+})
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index 2e0f6798..d5871d5e 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -1,88 +1,118 @@
-import { computed, defineComponent, onBeforeUpdate, onMounted, provide, ref, SetupContext, toRefs, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  onBeforeUpdate,
+  onMounted,
+  provide,
+  ref,
+  SetupContext,
+  toRefs,
+  watch
+} from 'vue'
 import AccordionList from './accordion-list'
 import { accordionProps, AccordionProps } from './accordion-types'
-import { AccordionItemClickEvent, AccordionMenuItem, AccordionMenuToggleEvent } from './accordion.type'
+import {
+  AccordionItemClickEvent,
+  AccordionMenuItem,
+  AccordionMenuToggleEvent
+} from './accordion.type'
 import './accordion.scss'
 
 export default defineComponent({
   name: 'DAccordion',
   props: accordionProps,
   setup(props: AccordionProps, { emit, slots }) {
-    const { data, childrenKey, activeKey, openKey ,accordionType, autoOpenActiveMenu , restrictOneOpen} = toRefs(props)
+    const {
+      data,
+      childrenKey,
+      activeKey,
+      openKey,
+      accordionType,
+      autoOpenActiveMenu,
+      restrictOneOpen
+    } = toRefs(props)
 
     let clickActiveItem: AccordionMenuItem | undefined = undefined //记录用户点击的激活菜单项
 
-    const flatten = (arr: Array<any>, childrenKey = 'children', includeParent = false, includeLeaf = true) => {
+    const flatten = (
+      arr: Array<any>,
+      childrenKey = 'children',
+      includeParent = false,
+      includeLeaf = true
+    ) => {
       return arr.reduce((acc, cur) => {
-        const children = cur[childrenKey];
+        const children = cur[childrenKey]
         if (children === undefined) {
           if (includeLeaf) {
-            acc.push(cur);
+            acc.push(cur)
           }
         } else {
           if (includeParent) {
-            acc.push(cur);
+            acc.push(cur)
           }
           if (Array.isArray(children)) {
-            acc.push(...flatten(children, childrenKey, includeParent));
+            acc.push(...flatten(children, childrenKey, includeParent))
           }
         }
-        return acc;
-      }, []);
+        return acc
+      }, [])
     }
 
     const initActiveItem = () => {
       const activeItem = flatten(data.value, childrenKey.value)
-        .filter(item => item[activeKey.value]).pop();
+        .filter((item) => item[activeKey.value])
+        .pop()
       if (activeItem) {
         if (!clickActiveItem) {
-          activeItemFn(activeItem);
+          activeItemFn(activeItem)
         }
       } else {
-        clickActiveItem = undefined;
+        clickActiveItem = undefined
       }
     }
 
     // 激活子菜单项并去掉其他子菜单的激活
     const activeItemFn = (item) => {
       if (clickActiveItem && clickActiveItem[activeKey.value]) {
-        clickActiveItem[activeKey.value] = false;
+        clickActiveItem[activeKey.value] = false
       }
-      item[activeKey.value] = true;
-      clickActiveItem = item;
+      item[activeKey.value] = true
+      clickActiveItem = item
       emit('activeItemChange', clickActiveItem)
     }
     // 打开或关闭一级菜单，如果有限制只能展开一项则关闭其他一级菜单
     const openMenuFn = (item, open) => {
       if (open && restrictOneOpen.value) {
-        data.value.forEach(itemtemp => { itemtemp[openKey.value] = false; });
+        data.value.forEach((itemtemp) => {
+          itemtemp[openKey.value] = false
+        })
       }
-      item[openKey.value] = open;
+      item[openKey.value] = open
     }
 
     // 点击了可点击菜单
     const itemClickFn = (itemEvent: AccordionItemClickEvent) => {
-      data.value.forEach(item=>item[activeKey.value] = null)
-      const prevActiveItem = clickActiveItem;
-      activeItemFn(itemEvent.item);
-      emit('itemClick', {...itemEvent, prevActiveItem: prevActiveItem});
+      data.value.forEach((item) => (item[activeKey.value] = null))
+      const prevActiveItem = clickActiveItem
+      activeItemFn(itemEvent.item)
+      emit('itemClick', { ...itemEvent, prevActiveItem: prevActiveItem })
     }
 
     const linkItemClickFn = (itemEvent: AccordionItemClickEvent) => {
-      const prevActiveItem = clickActiveItem;
-      clickActiveItem = itemEvent.item;
-      emit('itemClick', {...itemEvent, prevActiveItem: prevActiveItem});
+      const prevActiveItem = clickActiveItem
+      clickActiveItem = itemEvent.item
+      emit('itemClick', { ...itemEvent, prevActiveItem: prevActiveItem })
     }
-  
+
     // 打开或关闭可折叠菜单
     const menuToggleFn = (menuEvent: AccordionMenuToggleEvent) => {
-      openMenuFn(menuEvent.item, menuEvent.open);
-      emit('menuToggle', menuEvent);
+      openMenuFn(menuEvent.item, menuEvent.open)
+      emit('menuToggle', menuEvent)
     }
-    
+
     const cleanOpenData = () => {
       flatten(data.value, childrenKey.value, true, false).forEach(
-        item => item[openKey.value] = undefined
+        (item) => (item[openKey.value] = undefined)
       )
     }
 
@@ -92,30 +122,38 @@ export default defineComponent({
       menuToggleFn
     })
 
-
     onMounted(() => {
       if (data.value) {
-        initActiveItem();
+        initActiveItem()
       }
     })
-    
-    watch(() => autoOpenActiveMenu.value, (current, preV) => {
-      if (current && preV === false) {
-        cleanOpenData();
+
+    watch(
+      () => autoOpenActiveMenu.value,
+      (current, preV) => {
+        if (current && preV === false) {
+          cleanOpenData()
+        }
       }
-    })
+    )
 
-    
     return () => {
-      return <div class={`devui-accordion-menu devui-scrollbar ${accordionType.value === 'normal'?'devui-accordion-menu-normal':''}`}>
-        <AccordionList
-          data={data.value}
-          deepth={0}
-          parent={null}
-          {...props as any}
+      return (
+        <div
+          class={[
+            'devui-accordion-menu',
+            'devui-scrollbar',
+            accordionType.value === 'normal' && 'devui-accordion-menu-normal'
+          ]}
         >
-        </AccordionList>
-      </div>
+          <AccordionList
+            data={data.value}
+            deepth={0}
+            parent={null}
+            {...(props as any)}
+          ></AccordionList>
+        </div>
+      )
     }
   }
-})
\ No newline at end of file
+})
-- 
Gitee


From a961e4b15110d97eb282f817306bc9ef0329d2e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Wed, 1 Dec 2021 22:37:23 +0800
Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-list.tsx    | 27 +++++++------
 .../devui/accordion/src/accordion-menu.tsx    | 27 +++++++------
 .../accordion/src/accordion-open-icon.tsx     | 38 +++++++++----------
 .../devui/accordion/src/accordion.scss        |  2 +-
 4 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index fcf628cc..87fad9a9 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -3,7 +3,6 @@ import type { AccordionMenuItem } from './accordion.type'
 import DAccordionMenu from './accordion-menu'
 import DAccordionItem from './accordion-item'
 import { accordionProps } from './accordion-types'
-import './accordion.scss'
 
 export default defineComponent({
   name: 'DAccordionList',
@@ -37,28 +36,32 @@ export default defineComponent({
       return (
         <>
           {!innerListTemplate.value && (
-            <ul class={['devui-accordion-list', 'devui-accordion-show-animate']} {...attrs}>
+            <ul class={['devui-accordion-list']} {...attrs}>
               {data.value.map((item) => {
                 return (
                   <li class='devui-accordion-item' key={item.title}>
                     {/* // TODO 菜单类型 d-accordion-menu */}
                     {item[childrenKey.value] !== undefined && (
-                      <d-accordion-menu
-                        item={item}
-                        deepth={deepth.value}
-                        parent={parent.value}
-                      ></d-accordion-menu>
+                      <div class="devui-accordion-menu-item">
+                        <d-accordion-menu
+                          item={item}
+                          deepth={deepth.value}
+                          parent={parent.value}
+                        ></d-accordion-menu>
+                      </div>
                     )}
                     {/* 非菜单类型 */}
                     {item[childrenKey.value] === undefined && (
                       <Fragment>
                         {/* 普通类型 */}
                         {(!linkType.value || linkType.value === '') && (
-                          <d-accordion-item
-                            item={item}
-                            deepth={deepth.value}
-                            parent={parent.value}
-                          ></d-accordion-item>
+                          <div class="">
+                            <d-accordion-item
+                              item={item}
+                              deepth={deepth.value}
+                              parent={parent.value}
+                            ></d-accordion-item>
+                          </div>
                         )}
                       </Fragment>
                     )}
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index 56aabc51..07b88575 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -10,6 +10,9 @@ import OpenIcon from './accordion-open-icon'
 
 export default defineComponent({
   name: 'DAccordionMenu',
+  components: {
+    OpenIcon
+  },
   props: {
     item: Object as () => AccordionMenuItem,
     deepth: {
@@ -86,20 +89,20 @@ export default defineComponent({
             ></div>
             {!menuItemTemplate.value && <Fragment>{item.value.title}</Fragment>}
             <span class='devui-accordion-open-icon'>
-              <OpenIcon />
+              <OpenIcon></OpenIcon>
             </span>
           </div>
-          <DAccordionList
-            class={[
-              'devui-accordion-submenu',
-              'devui-accordion-show-animate',
-              !open.value && 'devui-accordion-menu-hidden'
-            ]}
-            // style={ open.value ? {opacity: 1, overflow: 'hidden'} : {opacity: 0, height: 0, overflow: 'hidden'}}
-            deepth={deepth.value + 1}
-            data={item.value.children || []}
-            parent={item.value}
-          ></DAccordionList>
+            <DAccordionList
+              class={[
+                'devui-accordion-submenu',
+                'devui-accordion-show-animate',
+                !open.value && 'devui-accordion-menu-hidden'
+              ]}
+              // style={ open.value ? {opacity: 1, overflow: 'hidden'} : {opacity: 0, height: 0, overflow: 'hidden'}}
+              deepth={deepth.value + 1}
+              data={item.value.children || []}
+              parent={item.value}
+            ></DAccordionList>
         </>
       )
     }
diff --git a/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx b/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
index 23b9bead..a625eeee 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
@@ -1,20 +1,20 @@
-const openIcon = () => {
-    return (
-        <svg
-            width="1em"
-            height="1em"
-            viewBox="0 0 16 16"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <path
-                d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-                fill-rule="nonzero"
-                ></path>
-            </g>
-        </svg>
-    )
+const OpenIcon = () => {
+  return (
+    <svg
+      width='1em'
+      height='1em'
+      viewBox='0 0 16 16'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlns:xlink='http://www.w3.org/1999/xlink'
+    >
+      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <path
+          d='M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z'
+          fill-rule='nonzero'
+        ></path>
+      </g>
+    </svg>
+  )
 }
-export default openIcon
\ No newline at end of file
+export default OpenIcon
diff --git a/packages/devui-vue/devui/accordion/src/accordion.scss b/packages/devui-vue/devui/accordion/src/accordion.scss
index 6aa628b2..333ddeee 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.scss
+++ b/packages/devui-vue/devui/accordion/src/accordion.scss
@@ -112,7 +112,7 @@ d-accordion-item-routerlink {
 /* 展开图标相关 */
 .devui-accordion-menu-item > .devui-accordion-item-title {
   position: relative;
-
+  
   & > .devui-accordion-open-icon {
     display: inline-block;
     text-indent: 0;
-- 
Gitee


From 709a84ab0a7f434df14bbbe252edc717aa3d3d51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Sun, 5 Dec 2021 23:05:08 +0800
Subject: [PATCH 4/8] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-item.tsx    |  4 +-
 .../devui/accordion/src/accordion-list.tsx    | 68 +++++++++++++++----
 .../devui/accordion/src/accordion-menu.tsx    | 25 ++++---
 .../accordion/src/accordion-open-icon.tsx     | 18 ++---
 .../devui/accordion/src/accordion.scss        | 27 +++++---
 .../devui/accordion/src/accordion.tsx         |  5 +-
 .../docs/components/accordion/index.md        | 17 +++--
 7 files changed, 112 insertions(+), 52 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index 48128cfa..c309794a 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -65,8 +65,8 @@ export default defineComponent({
               class={['devui-accordion-splitter', deepth.value === 0 && 'devui-parent-list']}
               style={{ left: deepth.value * 20 + 10 + 'px' }}
             ></div>
-            {!itemTemplate.value && <Fragment>{item.value.title}</Fragment>}
-            {itemTemplate.value && <Fragment>{slots.itemTemplate()}</Fragment>}
+            {!itemTemplate.value && <>{item.value.title}</>}
+            {itemTemplate.value && <>{slots.itemTemplate()}</>}
           </div>
         </>
         // <ng-template
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index 87fad9a9..7eeb5938 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -27,61 +27,101 @@ export default defineComponent({
     innerListTemplate: Boolean,
     ...accordionProps
   },
+
   setup(props, { attrs, slots }) {
-    const { childrenKey, innerListTemplate, deepth, parent, data, linkType } = toRefs(props)
+    const {
+      childrenKey,
+      innerListTemplate,
+      deepth,
+      parent,
+      data,
+      linkType,
+      showNoContent,
+      loadingKey,
+      noContentTemplate
+    } = toRefs(props)
+
+    let parentValue = parent.value
+    let deepValue = deepth.value
 
     const accordionCtx = inject('accordionContext') as any
 
+    const loading = computed(() => {
+      return parentValue && parentValue[loadingKey.value]
+    })
+    const noContent = computed(() => {
+      let dataValue = data.value
+      return dataValue === undefined || dataValue === null || dataValue.length === 0
+    })
+
     return () => {
       return (
         <>
-          {!innerListTemplate.value && (
+          {(!innerListTemplate.value || deepth.value === 0) && (
             <ul class={['devui-accordion-list']} {...attrs}>
               {data.value.map((item) => {
                 return (
                   <li class='devui-accordion-item' key={item.title}>
                     {/* // TODO 菜单类型 d-accordion-menu */}
                     {item[childrenKey.value] !== undefined && (
-                      <div class="devui-accordion-menu-item">
+                      <div class='devui-accordion-menu-item'>
                         <d-accordion-menu
                           item={item}
-                          deepth={deepth.value}
-                          parent={parent.value}
+                          deepth={deepValue}
+                          parent={parentValue}
                         ></d-accordion-menu>
                       </div>
                     )}
                     {/* 非菜单类型 */}
                     {item[childrenKey.value] === undefined && (
-                      <Fragment>
+                      <>
                         {/* 普通类型 */}
                         {(!linkType.value || linkType.value === '') && (
-                          <div class="">
                             <d-accordion-item
                               item={item}
-                              deepth={deepth.value}
-                              parent={parent.value}
+                              deepth={deepValue}
+                              parent={parentValue}
                             ></d-accordion-item>
-                          </div>
                         )}
-                      </Fragment>
+                      </>
                     )}
                   </li>
                 )
               })}
             </ul>
           )}
-          {innerListTemplate.value && deepth.value !== 0 && (
+          {innerListTemplate.value && deepValue !== 0 && (
             <div>
               {slots.innerListTemplate
                 ? slots.innerListTemplate({
-                    item: parent.value,
-                    deepth: deepth.value,
+                    item: parentValue,
+                    deepth: deepValue,
                     itemClickFn: accordionCtx.itemClickFn,
                     menuToggleFn: accordionCtx.menuToggleFn
                   })
                 : ''}
             </div>
           )}
+          {!innerListTemplate.value && (loading.value || (noContent.value && showNoContent.value)) && (
+            <ul class={['devui-accordion-list']} {...attrs}>
+              {
+                // <!--无数据-->
+                showNoContent.value &&
+                  !loading.value &&
+                  noContent.value &&
+                  !noContentTemplate.value && (
+                    <li class='devui-accordion-item'>
+                      <div
+                        class='devui-accordion-item-title devui-over-flow-ellipsis disabled'
+                        style={{ textIndent: deepValue * 20 + 'px' }}
+                      >
+                        没有数据
+                      </div>
+                    </li>
+                  )
+              }
+            </ul>
+          )}
         </>
       )
     }
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index 07b88575..c0200e07 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -25,7 +25,7 @@ export default defineComponent({
     },
     ...accordionProps
   },
-  setup(props) {
+  setup(props, {slots}) {
     const {
       item,
       deepth,
@@ -51,6 +51,9 @@ export default defineComponent({
     const keyOpen = computed(() => {
       return item.value && item.value[openKey.value]
     })
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value]
+    })
     const childActived = computed(() => {
       return item.value.active // TODO:待处理
     })
@@ -61,6 +64,7 @@ export default defineComponent({
         : keyOpen.value
     })
 
+
     return () => {
       return (
         <>
@@ -70,12 +74,12 @@ export default defineComponent({
               'devui-over-flow-ellipsis',
               open.value && 'open',
               childActived.value && 'active',
-              item.value[disabledKey.value] && 'disabled'
+              disabled.value && 'disabled'
             ]}
             title={item.value.title}
             style={{ textIndent: deepth.value * 20 + 'px' }}
             onClick={(e) =>
-              toggle({
+                !disabled.value && toggle({
                 item: item.value,
                 open: !open.value,
                 parent: parent.value,
@@ -87,22 +91,23 @@ export default defineComponent({
               class={['devui-accordion-splitter', deepth.value === 0 && 'devui-parent-list']}
               style={{ left: deepth.value * 20 + 10 + 'px' }}
             ></div>
-            {!menuItemTemplate.value && <Fragment>{item.value.title}</Fragment>}
+            {!menuItemTemplate.value && <>{item.value.title}</>}
             <span class='devui-accordion-open-icon'>
               <OpenIcon></OpenIcon>
             </span>
           </div>
+          <div 
+            class={[
+              !open.value && 'devui-accordion-menu-hidden',
+              'devui-accordion-submenu',
+              'devui-accordion-show-animate'
+            ]}>
             <DAccordionList
-              class={[
-                'devui-accordion-submenu',
-                'devui-accordion-show-animate',
-                !open.value && 'devui-accordion-menu-hidden'
-              ]}
-              // style={ open.value ? {opacity: 1, overflow: 'hidden'} : {opacity: 0, height: 0, overflow: 'hidden'}}
               deepth={deepth.value + 1}
               data={item.value.children || []}
               parent={item.value}
             ></DAccordionList>
+          </div>
         </>
       )
     }
diff --git a/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx b/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
index a625eeee..2e6d956b 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-open-icon.tsx
@@ -1,17 +1,17 @@
 const OpenIcon = () => {
   return (
     <svg
-      width='1em'
-      height='1em'
-      viewBox='0 0 16 16'
-      version='1.1'
-      xmlns='http://www.w3.org/2000/svg'
-      xmlns:xlink='http://www.w3.org/1999/xlink'
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
     >
-      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path
-          d='M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z'
-          fill-rule='nonzero'
+          d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
+          fill-rule="nonzero"
         ></path>
       </g>
     </svg>
diff --git a/packages/devui-vue/devui/accordion/src/accordion.scss b/packages/devui-vue/devui/accordion/src/accordion.scss
index 333ddeee..34a19882 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.scss
+++ b/packages/devui-vue/devui/accordion/src/accordion.scss
@@ -5,6 +5,12 @@
 @import '../../style/theme/corner';
 @import '../../style/core/animation';
 
+.devui-accordion-menu ol, ul {
+  margin: 0 !important;
+  line-height: 0 !important;
+  font-size: 12px;
+}
+
 :host {
   display: block;
 }
@@ -129,7 +135,7 @@ d-accordion-item-routerlink {
       width: 16px;
       height: 16px;
 
-      polygon {
+      path {
         fill: $devui-text-weak;
       }
     }
@@ -137,21 +143,21 @@ d-accordion-item-routerlink {
 
   &:not(.open) {
     &.active {
-      svg polygon {
+      svg path {
         fill: $devui-icon-fill-active;
       }
     }
+  }
 
-    & > .devui-accordion-open-icon {
-      transform: rotate(-180deg);
-      transform-origin: center;
-    }
+  &.open > .devui-accordion-open-icon {
+    transform: rotate(180deg);
+    transform-origin: center;
   }
 
   &.disabled > .devui-accordion-open-icon {
     color: $devui-disabled-text;
 
-    svg polygon {
+    svg path {
       fill: $devui-disabled-text;
     }
   }
@@ -167,8 +173,11 @@ d-accordion-item-routerlink {
   }
 }
 
-.devui-accordion-list.devui-accordion-menu-hidden {
-  display: none;
+.devui-accordion-list .devui-accordion-menu-hidden {
+  // display: none;
+  opacity: 0; 
+  height: 0px;
+  overflow: hidden;
 }
 
 /* 视觉融合灰线 */
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index d5871d5e..16fe32bf 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -29,7 +29,7 @@ export default defineComponent({
       openKey,
       accordionType,
       autoOpenActiveMenu,
-      restrictOneOpen
+      restrictOneOpen,
     } = toRefs(props)
 
     let clickActiveItem: AccordionMenuItem | undefined = undefined //记录用户点击的激活菜单项
@@ -101,7 +101,7 @@ export default defineComponent({
     const linkItemClickFn = (itemEvent: AccordionItemClickEvent) => {
       const prevActiveItem = clickActiveItem
       clickActiveItem = itemEvent.item
-      emit('itemClick', { ...itemEvent, prevActiveItem: prevActiveItem })
+      emit('linkItemClick', { ...itemEvent, prevActiveItem: prevActiveItem })
     }
 
     // 打开或关闭可折叠菜单
@@ -143,6 +143,7 @@ export default defineComponent({
           class={[
             'devui-accordion-menu',
             'devui-scrollbar',
+            'devui-accordion-show-animate',
             accordionType.value === 'normal' && 'devui-accordion-menu-normal'
           ]}
         >
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 1477cbd7..73fb9ed2 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -15,6 +15,8 @@
             :data="menu"
             :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
             :restrictOneOpen="restrictOneOpen"
+            @itemClick="itemClick"
+            @menuToggle="menuToggle"
         >
         </d-accordion>
     </div>
@@ -30,11 +32,6 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
     name: "accordion",
     setup() {
-        const slot = {
-            innerListTemplate: ()=> {
-                return "<p>输出值: </p>"
-            }
-        }
         const restrictOneOpen = ref(false)
         const accordionTypeEmbed = ref(false)
         const menu = ref([{
@@ -75,11 +72,19 @@ export default defineComponent({
             ]
         }])
 
+        const itemClick = (e) => {
+            console.log(12, e)
+        }
+        const menuToggle = (e) => {
+            console.log('menuToggle')
+        }
+
         return {
             menu,
             restrictOneOpen,
             accordionTypeEmbed,
-            slot
+            itemClick,
+            menuToggle
         }
     }
 })
-- 
Gitee


From 596e89d8ec8eb5d55a398636c1ebd35122f18f3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Wed, 8 Dec 2021 00:50:34 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BFdemo=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-item.tsx    |  31 +-
 .../devui/accordion/src/accordion-list.tsx    |  90 +++--
 .../devui/accordion/src/accordion-menu.tsx    |  34 +-
 .../devui/accordion/src/accordion.tsx         |   1 +
 .../devui/accordion/src/assets/arrow.svg      |   7 +
 .../accordion/src/composables/use-active.ts   |  76 +++++
 .../accordion/src/composables/use-toggle.ts   |  56 +++
 .../devui-vue/devui/accordion/src/utils.ts    |  76 +++++
 .../docs/components/accordion/index.md        | 318 +++++++++++++++++-
 9 files changed, 634 insertions(+), 55 deletions(-)
 create mode 100644 packages/devui-vue/devui/accordion/src/assets/arrow.svg
 create mode 100644 packages/devui-vue/devui/accordion/src/composables/use-active.ts
 create mode 100644 packages/devui-vue/devui/accordion/src/composables/use-toggle.ts
 create mode 100644 packages/devui-vue/devui/accordion/src/utils.ts

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index c309794a..d2d53c0e 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -1,6 +1,7 @@
 import { defineComponent, toRefs, Fragment, computed, inject } from 'vue'
 import { accordionProps } from './accordion-types'
 import { AccordionItemClickEvent, AccordionMenuItem } from './accordion.type'
+import { getRootSlots } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionItem',
@@ -29,8 +30,12 @@ export default defineComponent({
       itemTemplate
     } = toRefs(props)
 
+    const rootSlots = getRootSlots()
     const accordionCtx = inject('accordionContext') as any
 
+    let parentValue = parent.value
+    let deepValue = deepth.value
+
     const itemClick = (itemEvent: AccordionItemClickEvent) => {
       if (item.value && !item.value.disabled) {
         accordionCtx.itemClickFn(itemEvent)
@@ -52,32 +57,28 @@ export default defineComponent({
               item.value[disabledKey.value] && 'disabled'
             ]}
             title={item.value.title}
-            style={{ textIndent: deepth.value * 20 + 'px' }}
+            style={{ textIndent: deepValue * 20 + 'px' }}
             onClick={(e) =>
               itemClick({
                 item: item.value,
-                parent: parent.value,
+                parent: parentValue,
                 event: e
               })
             }
           >
             <div
-              class={['devui-accordion-splitter', deepth.value === 0 && 'devui-parent-list']}
-              style={{ left: deepth.value * 20 + 10 + 'px' }}
+              class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
+              style={{ textIndent: deepValue * 20 + 10 + 'px' }}
             ></div>
-            {!itemTemplate.value && <>{item.value.title}</>}
-            {itemTemplate.value && <>{slots.itemTemplate()}</>}
+            {!rootSlots.itemTemplate && <>{item.value.title}</>}
+            {rootSlots.itemTemplate &&
+              rootSlots.itemTemplate?.({
+                parent: parentValue,
+                deepth: deepValue,
+                item: item.value
+              })}
           </div>
         </>
-        // <ng-template
-        //   *ngIf="itemTemplate"
-        //   [ngTemplateOutlet]="itemTemplate"
-        //   [ngTemplateOutletContext]="{
-        //     parent: parent,
-        //     item: item,
-        //     deepth: deepth
-        //   }"
-        // ></ng-template>
       )
     }
   }
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index 7eeb5938..0e0a4558 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -1,8 +1,17 @@
-import { computed, defineComponent, inject, toRefs, Fragment } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  toRefs,
+  Fragment,
+  ComponentInternalInstance,
+  getCurrentInstance
+} from 'vue'
 import type { AccordionMenuItem } from './accordion.type'
 import DAccordionMenu from './accordion-menu'
 import DAccordionItem from './accordion-item'
 import { accordionProps } from './accordion-types'
+import { getRootSlots } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionList',
@@ -28,7 +37,7 @@ export default defineComponent({
     ...accordionProps
   },
 
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs }) {
     const {
       childrenKey,
       innerListTemplate,
@@ -38,12 +47,15 @@ export default defineComponent({
       linkType,
       showNoContent,
       loadingKey,
-      noContentTemplate
+      noContentTemplate,
+      loadingTemplate
     } = toRefs(props)
 
     let parentValue = parent.value
     let deepValue = deepth.value
 
+    const rootSlots = getRootSlots()
+
     const accordionCtx = inject('accordionContext') as any
 
     const loading = computed(() => {
@@ -57,7 +69,7 @@ export default defineComponent({
     return () => {
       return (
         <>
-          {(!innerListTemplate.value || deepth.value === 0) && (
+          {(!rootSlots.innerListTemplate || deepth.value === 0) && (
             <ul class={['devui-accordion-list']} {...attrs}>
               {data.value.map((item) => {
                 return (
@@ -77,11 +89,11 @@ export default defineComponent({
                       <>
                         {/* 普通类型 */}
                         {(!linkType.value || linkType.value === '') && (
-                            <d-accordion-item
-                              item={item}
-                              deepth={deepValue}
-                              parent={parentValue}
-                            ></d-accordion-item>
+                          <d-accordion-item
+                            item={item}
+                            deepth={deepValue}
+                            parent={parentValue}
+                          ></d-accordion-item>
                         )}
                       </>
                     )}
@@ -90,29 +102,48 @@ export default defineComponent({
               })}
             </ul>
           )}
-          {innerListTemplate.value && deepValue !== 0 && (
-            <div>
-              {slots.innerListTemplate
-                ? slots.innerListTemplate({
+          {
+            rootSlots.innerListTemplate &&
+            deepValue !== 0 &&
+            rootSlots.innerListTemplate?.({
+              item: parentValue,
+              deepth: deepValue,
+              itemClickFn: accordionCtx.itemClickFn,
+              menuToggleFn: accordionCtx.menuToggleFn
+            })}
+          {!rootSlots.innerListTemplate && (loading.value || (noContent.value && showNoContent.value)) && (
+            <ul class={['devui-accordion-list']} {...attrs}>
+              {
+                // 加载中
+                loading.value && !rootSlots.loadingTemplate && (
+                  <li class='devui-accordion-item'>
+                    <div
+                      class={['devui-accordion-item-title', 'devui-over-flow-ellipsis']}
+                      style={{ textIndent: deepValue * 20 + 'px' }}
+                    >
+                      加载中...
+                    </div>
+                  </li>
+                )
+              }
+              {
+                // 自定义加载
+                loading.value &&
+                  rootSlots.loadingTemplate &&
+                  rootSlots.loadingTemplate?.({
                     item: parentValue,
-                    deepth: deepValue,
-                    itemClickFn: accordionCtx.itemClickFn,
-                    menuToggleFn: accordionCtx.menuToggleFn
+                    deepth: deepValue
                   })
-                : ''}
-            </div>
-          )}
-          {!innerListTemplate.value && (loading.value || (noContent.value && showNoContent.value)) && (
-            <ul class={['devui-accordion-list']} {...attrs}>
+              }
               {
-                // <!--无数据-->
+                // 无数据
                 showNoContent.value &&
                   !loading.value &&
                   noContent.value &&
-                  !noContentTemplate.value && (
+                  !rootSlots.noContentTemplate && (
                     <li class='devui-accordion-item'>
                       <div
-                        class='devui-accordion-item-title devui-over-flow-ellipsis disabled'
+                        class={['devui-accordion-item-title', 'devui-over-flow-ellipsis disabled']}
                         style={{ textIndent: deepValue * 20 + 'px' }}
                       >
                         没有数据
@@ -120,6 +151,17 @@ export default defineComponent({
                     </li>
                   )
               }
+              {
+                // 自定义加载
+                showNoContent.value &&
+                  !loading.value &&
+                  noContent.value &&
+                  rootSlots.noContentTemplate &&
+                  rootSlots.noContentTemplate?.({
+                    item: parentValue,
+                    deepth: deepValue
+                  })
+              }
             </ul>
           )}
         </>
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index c0200e07..91f67236 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -7,6 +7,7 @@ import {
 import DAccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
 import OpenIcon from './accordion-open-icon'
+import { getRootSlots } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionMenu',
@@ -25,7 +26,7 @@ export default defineComponent({
     },
     ...accordionProps
   },
-  setup(props, {slots}) {
+  setup(props, { slots }) {
     const {
       item,
       deepth,
@@ -37,8 +38,12 @@ export default defineComponent({
       disabledKey
     } = toRefs(props)
 
+    const rootSlots = getRootSlots()
     const accordionCtx = inject('accordionContext') as any
 
+    let parentValue = parent.value
+    let deepValue = deepth.value
+
     const toggle = (itemEvent: AccordionMenuToggleEvent) => {
       if (!itemEvent.open && item.value.children && item.value.children.some((i) => i.active)) {
         itemEvent.item.active = true
@@ -64,7 +69,6 @@ export default defineComponent({
         : keyOpen.value
     })
 
-
     return () => {
       return (
         <>
@@ -77,33 +81,41 @@ export default defineComponent({
               disabled.value && 'disabled'
             ]}
             title={item.value.title}
-            style={{ textIndent: deepth.value * 20 + 'px' }}
+            style={{ textIndent: deepValue * 20 + 'px' }}
             onClick={(e) =>
-                !disabled.value && toggle({
+              !disabled.value &&
+              toggle({
                 item: item.value,
                 open: !open.value,
-                parent: parent.value,
+                parent: parentValue,
                 event: e
               })
             }
           >
             <div
-              class={['devui-accordion-splitter', deepth.value === 0 && 'devui-parent-list']}
-              style={{ left: deepth.value * 20 + 10 + 'px' }}
+              class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
+              style={{ left: deepValue * 20 + 10 + 'px' }}
             ></div>
-            {!menuItemTemplate.value && <>{item.value.title}</>}
+            {!rootSlots.menuItemTemplate && <>{item.value.title}</>}
+            {rootSlots.menuItemTemplate &&
+              rootSlots.menuItemTemplate?.({
+                parent: parentValue,
+                deepth: deepValue,
+                item: item.value
+              })}
             <span class='devui-accordion-open-icon'>
               <OpenIcon></OpenIcon>
             </span>
           </div>
-          <div 
+          <div
             class={[
               !open.value && 'devui-accordion-menu-hidden',
               'devui-accordion-submenu',
               'devui-accordion-show-animate'
-            ]}>
+            ]}
+          >
             <DAccordionList
-              deepth={deepth.value + 1}
+              deepth={deepValue + 1}
               data={item.value.children || []}
               parent={item.value}
             ></DAccordionList>
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index 16fe32bf..4dcf6697 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -30,6 +30,7 @@ export default defineComponent({
       accordionType,
       autoOpenActiveMenu,
       restrictOneOpen,
+      loadingTemplate
     } = toRefs(props)
 
     let clickActiveItem: AccordionMenuItem | undefined = undefined //记录用户点击的激活菜单项
diff --git a/packages/devui-vue/devui/accordion/src/assets/arrow.svg b/packages/devui-vue/devui/accordion/src/assets/arrow.svg
new file mode 100644
index 00000000..08192efa
--- /dev/null
+++ b/packages/devui-vue/devui/accordion/src/assets/arrow.svg
@@ -0,0 +1,7 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1">
+        <path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" 
+            >
+        </path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/devui-vue/devui/accordion/src/composables/use-active.ts b/packages/devui-vue/devui/accordion/src/composables/use-active.ts
new file mode 100644
index 00000000..0ed36c8e
--- /dev/null
+++ b/packages/devui-vue/devui/accordion/src/composables/use-active.ts
@@ -0,0 +1,76 @@
+import { ref, Ref, toRefs } from 'vue'
+import { AccordionProps } from '../accordion-types'
+import { AccordionItemClickEvent, AccordionMenuItem } from '../accordion.type'
+
+import { flatten } from '../utils'
+
+type activeObjectRef = {
+  [key: string]: {
+    isDisable: boolean
+    isActive: boolean
+  }
+}
+
+type TypeUseActive = (
+  props: AccordionProps,
+  emit: (arg0: string, arg1: AccordionMenuItem) => void
+) => {
+  activeObjectRef: Ref<activeObjectRef>
+  prevActiveItemIdRef: Ref<string>
+  initActiveItem: (item: AccordionMenuItem) => void
+  activeItemFn: (item: AccordionMenuItem) => void
+  // itemClickFn: (itemEvent: AccordionItemClickEvent) => void
+  // linkItemClickFn: (itemEvent: AccordionItemClickEvent) => void
+}
+
+const useActive: TypeUseActive = (props, emit) => {
+  const { activeKey, disabledKey } = toRefs(props)
+  const activeObjectRef: Ref<activeObjectRef> = ref({})
+  const prevActiveItemIdRef: Ref<string> = ref(null) //记录用户点击的激活菜单项
+
+  const initActiveItem = (item) => {
+    activeObjectRef.value[item.id] = {
+      isDisable: item[disabledKey.value],
+      isActive: item[activeKey.value]
+    }
+    if (item[activeKey.value]) {
+      prevActiveItemIdRef.value = item.id
+    }
+  }
+
+  // 激活子菜单项并去掉其他子菜单的激活
+  const activeItemFn = (item: AccordionMenuItem) => {
+    if (activeObjectRef.value[item.id].isDisable) return
+    if (prevActiveItemIdRef.value === item.id) return
+    if (prevActiveItemIdRef.value) {
+      activeObjectRef.value[prevActiveItemIdRef.value].isActive = false
+    }
+    activeObjectRef.value[item.id].isActive = true
+    prevActiveItemIdRef.value = item.id
+    emit('activeItemChange', item)
+  }
+
+  // 点击了可点击菜单
+  // const itemClickFn = (itemEvent: AccordionItemClickEvent) => {
+  //   const prevActiveItemIdRef = clickActiveItem
+  //   activeItemFn(itemEvent.item)
+  //   // emit('itemClick', {...itemEvent, prevActiveItem: prevActiveItem});
+  // }
+
+  // const linkItemClickFn = (itemEvent: AccordionItemClickEvent) => {
+  //   const prevActiveItem = clickActiveItem
+  //   clickActiveItem.value = itemEvent.item
+  //   // emit('itemClick', {...itemEvent, prevActiveItem: prevActiveItem});
+  // }
+
+  return {
+    activeObjectRef,
+    prevActiveItemIdRef,
+    initActiveItem,
+    activeItemFn
+    // itemClickFn,
+    // linkItemClickFn
+  }
+}
+
+export default useActive
diff --git a/packages/devui-vue/devui/accordion/src/composables/use-toggle.ts b/packages/devui-vue/devui/accordion/src/composables/use-toggle.ts
new file mode 100644
index 00000000..646175ef
--- /dev/null
+++ b/packages/devui-vue/devui/accordion/src/composables/use-toggle.ts
@@ -0,0 +1,56 @@
+import { toRefs, ref } from 'vue'
+import { AccordionMenuItem, AccordionMenuToggleEvent } from '../accordion.type'
+import { flatten } from '../utils'
+
+type TypeMenuOpenStatusRef = {
+  [key: string]: {
+    isOpen: boolean
+  }
+}
+
+const useToggle = (props) => {
+  const menuOpenStatusRef = ref<TypeMenuOpenStatusRef>({})
+  const preOpenFoldeRef = ref<string>('')
+  const { data, childrenKey, openKey, restrictOneOpen } = toRefs(props)
+
+  const initAllOpenData = (item) => {
+    menuOpenStatusRef.value[item.id] = {
+      isOpen: item[openKey.value]
+    }
+    if (item[openKey.value]) {
+      preOpenFoldeRef.value = item.id
+    }
+  }
+
+  // 打开或关闭一级菜单，如果有限制只能展开一项则关闭其他一级菜单
+  const openMenuFn = (item, open) => {
+    if (open && restrictOneOpen.value) {
+      if (preOpenFoldeRef.value === item.id) return
+      if (preOpenFoldeRef.value) {
+        menuOpenStatusRef.value[preOpenFoldeRef.value].isOpen = false
+      }
+    }
+    menuOpenStatusRef.value[item.id].isOpen = open
+  }
+
+  // 打开或关闭可折叠菜单
+  const menuToggleFn = (menuEvent: AccordionMenuToggleEvent) => {
+    openMenuFn(menuEvent.item, menuEvent.open)
+  }
+
+  const cleanOpenData = () => {
+    flatten(data.value, childrenKey.value, true, false).forEach(
+      (item) => (item[openKey.value] = undefined)
+    )
+  }
+
+  return {
+    menuOpenStatusRef,
+    initAllOpenData,
+    openMenuFn,
+    menuToggleFn,
+    cleanOpenData
+  }
+}
+
+export default useToggle
diff --git a/packages/devui-vue/devui/accordion/src/utils.ts b/packages/devui-vue/devui/accordion/src/utils.ts
new file mode 100644
index 00000000..91d03b03
--- /dev/null
+++ b/packages/devui-vue/devui/accordion/src/utils.ts
@@ -0,0 +1,76 @@
+import { AccordionMenuItem, AccordionMenuType } from './accordion.type'
+import { ComponentInternalInstance, getCurrentInstance } from "vue"
+
+const flatten = (
+    arr: Array<any>,
+    childrenKey = 'children',
+    includeParent = false,
+    includeLeaf = true
+): Array<AccordionMenuItem> => {
+    return arr.reduce((acc, cur) => {
+        const children = cur[childrenKey]
+        if (children === undefined) {
+            if (includeLeaf) {
+                acc.push(cur)
+            }
+        } else {
+            if (includeParent) {
+                acc.push(cur)
+            }
+            if (Array.isArray(children)) {
+                acc.push(...flatten(children, childrenKey, includeParent))
+            }
+        }
+        return acc
+    }, [])
+}
+
+const precheckNodeId = (d: AccordionMenuItem): AccordionMenuItem => {
+    const random = parseInt((Math.random() * 10 ** 8).toString().padEnd(8, '0'))
+    return { ...d, id: d.id ? `${d.id}_${random}` : `${d.title.replaceAll(' ', '-')}_${random}` }
+}
+
+const precheckTree = (ds: AccordionMenuType): AccordionMenuType => {
+    return ds.map((d) => {
+        const dd = precheckNodeId(d)
+        if (d.children) {
+            return {
+                ...dd,
+                children: precheckTree(d.children)
+            }
+        }
+        return dd
+    })
+}
+
+
+const getRootSlots = () => {
+  const rootComponentName = 'DAccordion'
+  /**
+   * 获取父组件
+   */
+  const getRootComponent = (
+    component: ComponentInternalInstance | null
+  ): ComponentInternalInstance | undefined => {
+    if (component && component.type.name === rootComponentName) {
+      return component
+    }
+
+    if (component && component.parent) {
+      const parent = component.parent
+      return getRootComponent(parent)
+    }
+  }
+
+  // 获取根节点
+  const rootComponent = getRootComponent(getCurrentInstance())
+  return rootComponent?.slots
+}
+
+
+export {
+  flatten,
+  precheckNodeId,
+  precheckTree,
+  getRootSlots
+}
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 73fb9ed2..f814e5a5 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -18,6 +18,26 @@
             @itemClick="itemClick"
             @menuToggle="menuToggle"
         >
+            <template #loadingTemplate={item,deepth}>
+                <li class='devui-accordion-item'>
+                    <div
+                        class="devui-accordion-item-title devui-over-flow-ellipsis"
+                        style="{{ textIndent: deepth * 20 + 'px' }}"
+                    >
+                        我是自定义加载...
+                    </div>
+                </li>
+            </template>
+            <template #noContentTemplate={item,deepth}>
+                <li class='devui-accordion-item'>
+                    <div
+                        class="devui-accordion-item-title devui-over-flow-ellipsis disabled"
+                        style="{{ textIndent: deepth * 20 + 'px' }}"
+                    >
+                        我是无数据模板
+                    </div>
+                </li>
+            </template>
         </d-accordion>
     </div>
     
@@ -72,11 +92,22 @@ export default defineComponent({
             ]
         }])
 
-        const itemClick = (e) => {
-            console.log(12, e)
+        const itemClick = (event) => {
+            console.log('item click' + JSON.stringify(event));
         }
-        const menuToggle = (e) => {
-            console.log('menuToggle')
+        const menuToggle = (event) => {
+            console.log('menu toggle' + JSON.stringify(event));
+            if (event.open && event.item.needLoadChildren) {
+                event.item.loading = true;
+                setTimeout(() => {
+                    event.item.children = [
+                        {title: 'Child Content 1'},
+                        {title: 'Child Content 2'}
+                    ];
+                    event.item.needLoadChildren = false;
+                    event.item.loading = false;
+                }, 2000);
+            }
         }
 
         return {
@@ -89,7 +120,7 @@ export default defineComponent({
     }
 })
 </script>
-<style>
+<style scoped>
 .menu {
   width: 200px;
 }
@@ -114,4 +145,281 @@ ul {
     list-style: none
 }
 </style>
+```
+
+
+:::
+
+
+### 使用模板
+可展开菜单和可点击菜单分别使用模板。可展开菜单指定menuItemTemplate，可点击菜单指定itemTemplate。没有数据模板指定noContentTemplate，并可以通过showNoContent控制无数据的时候不展开。 加载中模板指定loadingTemplate，通过item的loadingKey对应的属性值控制是否显示加载中。
+
+:::demo
+
+
+```vue
+<template>
+    <div class="menu">
+        <d-accordion
+            :data="menu"
+            :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
+            :restrictOneOpen="restrictOneOpen"
+            @itemClick="itemClick"
+            @menuToggle="menuToggle"
+        >
+            <template #menuItemTemplate={item,deepth,parent}>
+                {{ item.title }}
+                <span class="badge" v-if="item.children?.length">{{ item.children.length }}</span>
+                <span class="operation-clear" v-if="item.needLoadChildren === false" @click="clearChildrenData($event, item)">
+                    reset
+                    <!--重置-->
+                </span>
+            </template>
+            <template #itemTemplate={item,deepth,parent}>
+                {{ item.title }}
+                <span class="info">(Click Count: {{ item.clicktimes || '0' }})</span>
+            </template>
+            <template #noContentTemplate={deepth}>
+                <li class="devui-accordion-item disabled">
+                    <div class="devui-accordion-item-title devui-over-flow-ellipsis disabled" style="{{ textIndent: deepth * 20 + 'px' }}">
+                        Not available yet. Please wait.
+                    <!--尚未开放，敬请期待...-->
+                    </div>
+                </li>
+            </template>
+            <template #loadingTemplate={item}>
+                <li class="devui-accordion-item">
+                    <div class="loading"><span class="circle-spinner"></span> loading...<!--正在用力地加载中...--></div>
+                </li>
+            </template>
+        </d-accordion>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+    name: "accordion",
+    setup() {
+        const restrictOneOpen = ref(false)
+        const accordionTypeEmbed = ref(false)
+        const menu = ref([{
+            title: 'Content 1',
+            open: true,
+            children: [
+            {title: 'Child Content 1'},
+            {title: 'Child Content 2'},
+            ]
+        }, {
+            title: 'Content 2',
+            children: [
+            {title: 'Child Content 1'},
+            {title: 'Child Content 2'},
+            {title: 'Child Content 3'},
+            {title: 'Child Content 4'},
+            ]
+        }, {
+            title: 'Content 3',
+            children: [
+            {title: 'Child Content 1 (disabled)', disabled: true},
+            {title: 'Child Content 2'},
+            {title: 'Child Content 3'},
+            ]
+        }, {
+            title: 'Content 4 (Custom No Data Template)',
+            children: [] // 可展开菜单节点必须有children非undefined
+        }, {
+            title: 'Content 5 (Custom loading Template)',
+            needLoadChildren: true,
+            loading: false,
+            children: []
+        }]);
+        const childrenData = ref([
+            {title: 'Child Content 1'},
+            {title: 'Child Content 2'},
+            {title: 'Child Content 3'},
+            {title: 'Child Content 4'},
+            {title: 'Child Content 5'},
+            {title: 'Child Content 6'},
+            {title: 'Child Content 7'},
+        ])
+
+        const itemClick = (event) => {
+            event.item.clicktimes = (event.item.clicktimes || 0) + 1;
+        }
+
+        const menuToggle = (event) => {
+            if (event.open && event.item.needLoadChildren) {
+            event.item.loading = true;
+            setTimeout(() => {
+                event.item.children = childrenData.value;
+                event.item.needLoadChildren = false;
+                event.item.loading = false;
+            }, 1000);
+            }
+        }
+
+        const clearChildrenData = (event, item) => {
+            event.stopPropagation();
+            item.children = [];
+            item.needLoadChildren = true;
+            item.open = false;
+        }
+
+        return {
+            menu,
+            restrictOneOpen,
+            accordionTypeEmbed,
+            itemClick,
+            menuToggle,
+            clearChildrenData
+        }
+    }
+})
+</script>
+<style scoped>
+.menu {
+  width: 400px;
+}
+
+.badge {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #ffffff;
+  text-align: center;
+  background: #5e7ce0;
+  font-weight: normal;
+}
+
+.loading {
+  position: relative;
+  line-height: 40px;
+  padding-left: 64px;
+}
+
+.circle-spinner {
+  top: 10px;
+  left: 36px;
+  position: absolute;
+  display: block;
+  width: 20px;
+  height: 20px;
+  transform-origin: center;
+  animation: circle infinite 0.75s linear;
+  border: 2px solid #5e7ce0;
+  border-top-color: transparent;
+  border-radius: 50%;
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .menu {
+    width: 80%;
+  }
+}
+</style>
+```
+
+:::
+
+
+内部列表通过制定innerListTemplate使用模板。
+
+:::demo
+
+```vue
+<template>
+    <div class="menu">
+        <d-accordion
+            :data="menu"
+            :accordionType="accordionTypeEmbed ? 'embed' : 'normal'"
+            :restrictOneOpen="restrictOneOpen"
+            @itemClick="itemClick"
+            @menuToggle="menuToggle"
+        >
+            <template #innerListTemplate={item,deepth}>
+                <div 
+                    class="devui-accordion-submenu devui-accordion-show-animate my-menu"
+                >
+                    {{item.content}}
+                </div>
+            </template>
+        </d-accordion>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+    name: "accordion",
+    setup() {
+        const restrictOneOpen = ref(false)
+        const accordionTypeEmbed = ref(false)
+        const menu = ref([{
+            title: 'Content 1',
+            children: [],
+            content: 'Child Content of Content 1'
+        }, {
+            title: 'Content 2',
+            children: [],
+            content: 'Child Content of Content 2'
+        }]);
+
+        const itemClick = (event) => {
+            console.log('item click' + JSON.stringify(event));
+        }
+        const menuToggle = (event) => {
+            console.log('menu toggle' + JSON.stringify(event));
+            if (event.open && event.item.needLoadChildren) {
+                event.item.loading = true;
+                setTimeout(() => {
+                    event.item.children = [
+                        {title: 'Child Content 1'},
+                        {title: 'Child Content 2'}
+                    ];
+                    event.item.needLoadChildren = false;
+                    event.item.loading = false;
+                }, 2000);
+            }
+        }
+
+        return {
+            menu,
+            restrictOneOpen,
+            accordionTypeEmbed,
+            itemClick,
+            menuToggle
+        }
+    }
+})
+</script>
+<style scoped>
+.menu {
+  width: 400px;
+}
+.my-menu {
+  min-height: 60px;
+  line-height: 40px;
+  padding: 12px;
+}
+
+@media (max-width: 500px) {
+  .menu {
+    width: 80%;
+  }
+}
+</style>
 ```
\ No newline at end of file
-- 
Gitee


From 37d53f2fe6b349c666dbf66de66fb8af755c67a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Thu, 9 Dec 2021 22:53:37 +0800
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=E5=A4=8D=E5=90=88=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7,=E6=94=B9=E5=8F=98=E9=94=AE=E5=80=BCdemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-item.tsx    |  39 ++--
 .../devui/accordion/src/accordion-list.tsx    | 107 +++++------
 .../devui/accordion/src/accordion-menu.tsx    |  54 ++++--
 .../devui/accordion/src/accordion.tsx         |  12 +-
 .../docs/components/accordion/index.md        | 167 ++++++++++++++++++
 5 files changed, 302 insertions(+), 77 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index d2d53c0e..e36b7516 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -23,11 +23,10 @@ export default defineComponent({
       deepth,
       parent,
       openKey,
-      menuItemTemplate,
+      titleKey,
+      childrenKey,
       activeKey,
-      autoOpenActiveMenu,
       disabledKey,
-      itemTemplate
     } = toRefs(props)
 
     const rootSlots = getRootSlots()
@@ -36,16 +35,32 @@ export default defineComponent({
     let parentValue = parent.value
     let deepValue = deepth.value
 
+    const keyOpen = computed(() => {
+      return item.value && item.value[openKey.value]
+    })
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value]
+    })
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value]
+    })
+    const children = computed(() => {
+      return item.value && item.value[childrenKey.value]
+    })
+    const active = computed(() => {
+      return item.value && item.value[activeKey.value]
+    })
+
+    const childActived = computed(() => {
+      return active.value
+    })
+
     const itemClick = (itemEvent: AccordionItemClickEvent) => {
-      if (item.value && !item.value.disabled) {
+      if (item.value && !disabled.value) {
         accordionCtx.itemClickFn(itemEvent)
       }
     }
 
-    const childActived = computed(() => {
-      return item.value.active
-    })
-
     return () => {
       return (
         <>
@@ -54,9 +69,9 @@ export default defineComponent({
               'devui-accordion-item-title',
               'devui-over-flow-ellipsis',
               childActived.value && 'active',
-              item.value[disabledKey.value] && 'disabled'
+              disabled.value && 'disabled'
             ]}
-            title={item.value.title}
+            title={title.value}
             style={{ textIndent: deepValue * 20 + 'px' }}
             onClick={(e) =>
               itemClick({
@@ -68,9 +83,9 @@ export default defineComponent({
           >
             <div
               class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
-              style={{ textIndent: deepValue * 20 + 10 + 'px' }}
+              style={{ left: deepValue * 20 + 10 + 'px' }}
             ></div>
-            {!rootSlots.itemTemplate && <>{item.value.title}</>}
+            {!rootSlots.itemTemplate && <>{title.value}</>}
             {rootSlots.itemTemplate &&
               rootSlots.itemTemplate?.({
                 parent: parentValue,
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index 0e0a4558..dec7aa12 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -40,15 +40,13 @@ export default defineComponent({
   setup(props, { attrs }) {
     const {
       childrenKey,
-      innerListTemplate,
       deepth,
       parent,
       data,
       linkType,
       showNoContent,
       loadingKey,
-      noContentTemplate,
-      loadingTemplate
+      titleKey
     } = toRefs(props)
 
     let parentValue = parent.value
@@ -73,11 +71,12 @@ export default defineComponent({
             <ul class={['devui-accordion-list']} {...attrs}>
               {data.value.map((item) => {
                 return (
-                  <li class='devui-accordion-item' key={item.title}>
+                  <li class='devui-accordion-item' key={item[titleKey.value]}>
                     {/* // TODO 菜单类型 d-accordion-menu */}
                     {item[childrenKey.value] !== undefined && (
                       <div class='devui-accordion-menu-item'>
                         <d-accordion-menu
+                          {...(props as any)}
                           item={item}
                           deepth={deepValue}
                           parent={parentValue}
@@ -90,6 +89,7 @@ export default defineComponent({
                         {/* 普通类型 */}
                         {(!linkType.value || linkType.value === '') && (
                           <d-accordion-item
+                          {...(props as any)}
                             item={item}
                             deepth={deepValue}
                             parent={parentValue}
@@ -102,8 +102,7 @@ export default defineComponent({
               })}
             </ul>
           )}
-          {
-            rootSlots.innerListTemplate &&
+          {rootSlots.innerListTemplate &&
             deepValue !== 0 &&
             rootSlots.innerListTemplate?.({
               item: parentValue,
@@ -111,59 +110,63 @@ export default defineComponent({
               itemClickFn: accordionCtx.itemClickFn,
               menuToggleFn: accordionCtx.menuToggleFn
             })}
-          {!rootSlots.innerListTemplate && (loading.value || (noContent.value && showNoContent.value)) && (
-            <ul class={['devui-accordion-list']} {...attrs}>
-              {
-                // 加载中
-                loading.value && !rootSlots.loadingTemplate && (
-                  <li class='devui-accordion-item'>
-                    <div
-                      class={['devui-accordion-item-title', 'devui-over-flow-ellipsis']}
-                      style={{ textIndent: deepValue * 20 + 'px' }}
-                    >
-                      加载中...
-                    </div>
-                  </li>
-                )
-              }
-              {
-                // 自定义加载
-                loading.value &&
-                  rootSlots.loadingTemplate &&
-                  rootSlots.loadingTemplate?.({
-                    item: parentValue,
-                    deepth: deepValue
-                  })
-              }
-              {
-                // 无数据
-                showNoContent.value &&
-                  !loading.value &&
-                  noContent.value &&
-                  !rootSlots.noContentTemplate && (
+          {!rootSlots.innerListTemplate &&
+            (loading.value || (noContent.value && showNoContent.value)) && (
+              <ul class={['devui-accordion-list']} {...attrs}>
+                {
+                  // 加载中
+                  loading.value && !rootSlots.loadingTemplate && (
                     <li class='devui-accordion-item'>
                       <div
-                        class={['devui-accordion-item-title', 'devui-over-flow-ellipsis disabled']}
+                        class={['devui-accordion-item-title', 'devui-over-flow-ellipsis']}
                         style={{ textIndent: deepValue * 20 + 'px' }}
                       >
-                        没有数据
+                        加载中...
                       </div>
                     </li>
                   )
-              }
-              {
-                // 自定义加载
-                showNoContent.value &&
-                  !loading.value &&
-                  noContent.value &&
-                  rootSlots.noContentTemplate &&
-                  rootSlots.noContentTemplate?.({
-                    item: parentValue,
-                    deepth: deepValue
-                  })
-              }
-            </ul>
-          )}
+                }
+                {
+                  // 自定义加载
+                  loading.value &&
+                    rootSlots.loadingTemplate &&
+                    rootSlots.loadingTemplate?.({
+                      item: parentValue,
+                      deepth: deepValue
+                    })
+                }
+                {
+                  // 无数据
+                  showNoContent.value &&
+                    !loading.value &&
+                    noContent.value &&
+                    !rootSlots.noContentTemplate && (
+                      <li class='devui-accordion-item'>
+                        <div
+                          class={[
+                            'devui-accordion-item-title',
+                            'devui-over-flow-ellipsis disabled'
+                          ]}
+                          style={{ textIndent: deepValue * 20 + 'px' }}
+                        >
+                          没有数据
+                        </div>
+                      </li>
+                    )
+                }
+                {
+                  // 自定义加载
+                  showNoContent.value &&
+                    !loading.value &&
+                    noContent.value &&
+                    rootSlots.noContentTemplate &&
+                    rootSlots.noContentTemplate?.({
+                      item: parentValue,
+                      deepth: deepValue
+                    })
+                }
+              </ul>
+            )}
         </>
       )
     }
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index 91f67236..34bd0b4d 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -4,10 +4,10 @@ import {
   AccordionMenuItem,
   AccordionMenuToggleEvent
 } from './accordion.type'
-import DAccordionList from './accordion-list'
+import AccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
 import OpenIcon from './accordion-open-icon'
-import { getRootSlots } from '../src/utils'
+import { getRootSlots, flatten } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionMenu',
@@ -35,7 +35,9 @@ export default defineComponent({
       menuItemTemplate,
       activeKey,
       autoOpenActiveMenu,
-      disabledKey
+      disabledKey,
+      childrenKey,
+      titleKey
     } = toRefs(props)
 
     const rootSlots = getRootSlots()
@@ -45,7 +47,7 @@ export default defineComponent({
     let deepValue = deepth.value
 
     const toggle = (itemEvent: AccordionMenuToggleEvent) => {
-      if (!itemEvent.open && item.value.children && item.value.children.some((i) => i.active)) {
+      if (!itemEvent.open && children.value && children.value.some((i) => i.active)) {
         itemEvent.item.active = true
       } else {
         itemEvent.item.active = null
@@ -53,18 +55,47 @@ export default defineComponent({
       accordionCtx.menuToggleFn(itemEvent)
     }
 
+    const hasActiveChildren = (item) => {
+      // FIXME:待修复
+      // if(item.title=='Child Content 1 (has children)') debugger
+      // if(item.children) {
+      //   let children = item.children
+        for(let i=0;i<item.length;i++) {
+          if(item[i].active){
+            return true
+          }else if(item[i].children){
+            for(let j of item[i].children) {
+              hasActiveChildren(j)
+            }
+            return false
+          }
+        // }
+      }
+      return false
+    }
+
     const keyOpen = computed(() => {
       return item.value && item.value[openKey.value]
     })
     const disabled = computed(() => {
       return item.value && item.value[disabledKey.value]
     })
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value]
+    })
+    const children = computed(() => {
+      return item.value && item.value[childrenKey.value]
+    })
+    const active = computed(() => {
+      return item.value && item.value[activeKey.value]
+    })
+    
     const childActived = computed(() => {
-      return item.value.active // TODO:待处理
+      return active.value
     })
 
     const open = computed(() => {
-      return keyOpen.value === undefined && autoOpenActiveMenu.value
+      return (keyOpen.value === undefined && autoOpenActiveMenu.value)
         ? childActived.value
         : keyOpen.value
     })
@@ -80,7 +111,7 @@ export default defineComponent({
               childActived.value && 'active',
               disabled.value && 'disabled'
             ]}
-            title={item.value.title}
+            title={title.value}
             style={{ textIndent: deepValue * 20 + 'px' }}
             onClick={(e) =>
               !disabled.value &&
@@ -96,7 +127,7 @@ export default defineComponent({
               class={['devui-accordion-splitter', deepValue === 0 && 'devui-parent-list']}
               style={{ left: deepValue * 20 + 10 + 'px' }}
             ></div>
-            {!rootSlots.menuItemTemplate && <>{item.value.title}</>}
+            {!rootSlots.menuItemTemplate && <>{title.value}</>}
             {rootSlots.menuItemTemplate &&
               rootSlots.menuItemTemplate?.({
                 parent: parentValue,
@@ -114,11 +145,12 @@ export default defineComponent({
               'devui-accordion-show-animate'
             ]}
           >
-            <DAccordionList
+            <AccordionList
+              {...(props as any)}
               deepth={deepValue + 1}
-              data={item.value.children || []}
+              data={children.value || []}
               parent={item.value}
-            ></DAccordionList>
+            ></AccordionList>
           </div>
         </>
       )
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index 4dcf6697..bf6425d3 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -30,7 +30,6 @@ export default defineComponent({
       accordionType,
       autoOpenActiveMenu,
       restrictOneOpen,
-      loadingTemplate
     } = toRefs(props)
 
     let clickActiveItem: AccordionMenuItem | undefined = undefined //记录用户点击的激活菜单项
@@ -132,11 +131,20 @@ export default defineComponent({
     watch(
       () => autoOpenActiveMenu.value,
       (current, preV) => {
+        console.log('current', current)
         if (current && preV === false) {
           cleanOpenData()
         }
       }
     )
+    watch(
+      data.value,
+      (current, preV) => {
+        initActiveItem()
+      }, {
+        deep: true
+      }
+    )
 
     return () => {
       return (
@@ -149,10 +157,10 @@ export default defineComponent({
           ]}
         >
           <AccordionList
+            {...(props as any)}
             data={data.value}
             deepth={0}
             parent={null}
-            {...(props as any)}
           ></AccordionList>
         </div>
       )
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index f814e5a5..577edf72 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -17,6 +17,7 @@
             :restrictOneOpen="restrictOneOpen"
             @itemClick="itemClick"
             @menuToggle="menuToggle"
+            childrenKey="sub"
         >
             <template #loadingTemplate={item,deepth}>
                 <li class='devui-accordion-item'>
@@ -416,6 +417,172 @@ export default defineComponent({
   padding: 12px;
 }
 
+@media (max-width: 500px) {
+  .menu {
+    width: 80%;
+  }
+}
+</style>
+```
+
+:::
+
+### 复合层级和自动展开
+支持多层级和不限制嵌套层级。可以独立使用autoOpenActiveMenu使得激活的菜单的父层级自动展开。
+:::demo
+
+```vue
+<template>
+    <div class="menu">
+        <d-accordion
+            :data="menu"
+            :autoOpenActiveMenu="autoOpenActiveMenu"
+        >
+        </d-accordion>
+    </div>
+
+    <div class="option">
+        <d-switch v-model:checked="autoOpenActiveMenu"></d-switch> auto expend active menu<!--自动展开激活的菜单-->
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+    name: "accordion",
+    setup() {
+        const autoOpenActiveMenu = ref(false)
+        const menu = ref([{
+            title: 'Content 1 (as a leaf menu)',
+        }, {
+            title: 'Content 2 (as a parent menu, has children)',
+            children: [
+            {title: 'Child Content 1'},
+            {title: 'Child Content 2'},
+            {title: 'Child Content 3'},
+            ]
+        }, {
+            title: 'Content 3 (as a parent menu, has children)',
+
+            children: [{
+                title: 'Child Content 1 (has children)',
+                children: [
+                {title: 'Child Content 1'},
+                {title: 'Child Content 2', active: true},
+                {title: 'Child Content 3'},
+                ]
+            }, {
+                title: 'Child Content 2 (has children',
+                children: [
+                {title: 'Child Content 1'},
+                {
+                    title: 'Child Content 2 (has children',
+                    children: [
+                    {title: 'Child Content 1'},
+                    {title: 'Child Content 2'},
+                    {title: 'Child Content 3'},
+                    ]
+                },
+                {title: 'Child Content 3'},
+                ]
+            },
+            {title: 'Child Content 2'},
+            {title: 'Child Content 3'},
+            ]
+        }, {
+            title: 'Content 4 (as a parent menu, has no child)',
+            children: []
+        }]);
+
+
+        return {
+            menu,
+            autoOpenActiveMenu
+        }
+    }
+})
+</script>
+<style scoped>
+.menu {
+  width: 400px;
+}
+
+.option {
+  line-height: 20px;
+  vertical-align: middle;
+  margin-top: 20px;
+}
+
+.option > d-toggle {
+  display: inline-block;
+  transform: translateY(3px);
+}
+
+@media (max-width: 500px) {
+  .menu {
+    width: 80%;
+  }
+}
+</style>
+```
+
+:::
+
+### 改变键值
+通过titleKey,childrenKey,disabledKey,activeKey等等改变数组键值，适配不同的接口类型定义。
+:::demo
+
+```vue
+<template>
+    <div class="menu">
+        <d-accordion
+            :data="menu"
+            :titleKey="key?.titleKey"
+            :activeKey="key?.activeKey"
+            :disabledKey="key?.disabledKey"
+            :openKey="key?.openKey"
+            :childrenKey="key?.childrenKey"
+        >
+        </d-accordion>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref } from 'vue'
+
+export default defineComponent({
+    name: "accordion",
+    setup() {
+        const key = reactive({
+            titleKey: 'value',
+            activeKey: '$selected',
+            disabledKey: 'forbidden',
+            openKey: '$show',
+            childrenKey: 'subs',
+        })
+        const menu = ref([{
+            value: 'Content 1',
+        }, {
+            value: 'Content 2 (expended)',
+            $show: true,
+            subs: [
+            { value: 'Child Content 1 (disabled)', forbidden: true },
+            { value: 'Child Content 2 (active)', $selected: true },
+            { value: 'Child Content 3' },
+            ]
+        }]);
+
+        return {
+            menu,
+            key
+        }
+    }
+})
+</script>
+<style scoped>
+.menu {
+  width: 400px;
+}
+
 @media (max-width: 500px) {
   .menu {
     width: 80%;
-- 
Gitee


From 2a39a0b753140b8ba5b4ef90c183abf2d4360d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Thu, 9 Dec 2021 23:03:33 +0800
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=86=97=E4=BD=99?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/accordion/src/accordion-item.tsx | 12 ++----------
 .../devui-vue/devui/accordion/src/accordion-list.tsx |  5 +----
 .../devui-vue/devui/accordion/src/accordion-menu.tsx |  8 +++-----
 packages/devui-vue/devui/accordion/src/accordion.tsx |  6 +-----
 .../devui-vue/docs/components/accordion/index.md     |  1 -
 5 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-item.tsx b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
index e36b7516..92e00773 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-item.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-item.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, Fragment, computed, inject } from 'vue'
+import { defineComponent, toRefs, computed, inject } from 'vue'
 import { accordionProps } from './accordion-types'
 import { AccordionItemClickEvent, AccordionMenuItem } from './accordion.type'
 import { getRootSlots } from '../src/utils'
@@ -17,14 +17,12 @@ export default defineComponent({
     },
     ...accordionProps
   },
-  setup(props, { slots }) {
+  setup(props) {
     const {
       item,
       deepth,
       parent,
-      openKey,
       titleKey,
-      childrenKey,
       activeKey,
       disabledKey,
     } = toRefs(props)
@@ -35,18 +33,12 @@ export default defineComponent({
     let parentValue = parent.value
     let deepValue = deepth.value
 
-    const keyOpen = computed(() => {
-      return item.value && item.value[openKey.value]
-    })
     const disabled = computed(() => {
       return item.value && item.value[disabledKey.value]
     })
     const title = computed(() => {
       return item.value && item.value[titleKey.value]
     })
-    const children = computed(() => {
-      return item.value && item.value[childrenKey.value]
-    })
     const active = computed(() => {
       return item.value && item.value[activeKey.value]
     })
diff --git a/packages/devui-vue/devui/accordion/src/accordion-list.tsx b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
index dec7aa12..f5e665a6 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-list.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-list.tsx
@@ -2,10 +2,7 @@ import {
   computed,
   defineComponent,
   inject,
-  toRefs,
-  Fragment,
-  ComponentInternalInstance,
-  getCurrentInstance
+  toRefs
 } from 'vue'
 import type { AccordionMenuItem } from './accordion.type'
 import DAccordionMenu from './accordion-menu'
diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index 34bd0b4d..e8c80f51 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -1,13 +1,12 @@
-import { computed, defineComponent, toRefs, Fragment, inject, ref } from 'vue'
+import { computed, defineComponent, toRefs, inject } from 'vue'
 import {
-  AccordionItemClickEvent,
   AccordionMenuItem,
   AccordionMenuToggleEvent
 } from './accordion.type'
 import AccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
 import OpenIcon from './accordion-open-icon'
-import { getRootSlots, flatten } from '../src/utils'
+import { getRootSlots } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionMenu',
@@ -26,13 +25,12 @@ export default defineComponent({
     },
     ...accordionProps
   },
-  setup(props, { slots }) {
+  setup(props) {
     const {
       item,
       deepth,
       parent,
       openKey,
-      menuItemTemplate,
       activeKey,
       autoOpenActiveMenu,
       disabledKey,
diff --git a/packages/devui-vue/devui/accordion/src/accordion.tsx b/packages/devui-vue/devui/accordion/src/accordion.tsx
index bf6425d3..9a878ce3 100644
--- a/packages/devui-vue/devui/accordion/src/accordion.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion.tsx
@@ -1,11 +1,7 @@
 import {
-  computed,
   defineComponent,
-  onBeforeUpdate,
   onMounted,
   provide,
-  ref,
-  SetupContext,
   toRefs,
   watch
 } from 'vue'
@@ -21,7 +17,7 @@ import './accordion.scss'
 export default defineComponent({
   name: 'DAccordion',
   props: accordionProps,
-  setup(props: AccordionProps, { emit, slots }) {
+  setup(props: AccordionProps, { emit }) {
     const {
       data,
       childrenKey,
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
index 577edf72..033d726a 100644
--- a/packages/devui-vue/docs/components/accordion/index.md
+++ b/packages/devui-vue/docs/components/accordion/index.md
@@ -17,7 +17,6 @@
             :restrictOneOpen="restrictOneOpen"
             @itemClick="itemClick"
             @menuToggle="menuToggle"
-            childrenKey="sub"
         >
             <template #loadingTemplate={item,deepth}>
                 <li class='devui-accordion-item'>
-- 
Gitee


From 24b6ea08dc9e533d51f8e721f088165ea5c8e3b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=BF=9C=E6=88=90?= <zhangyc@moredian.com>
Date: Fri, 10 Dec 2021 00:13:47 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20children=E6=BF=80=E6=B4=BB=E9=A1=B9?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/accordion/src/accordion-menu.tsx    | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
index e8c80f51..58e5f479 100644
--- a/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
+++ b/packages/devui-vue/devui/accordion/src/accordion-menu.tsx
@@ -6,7 +6,7 @@ import {
 import AccordionList from './accordion-list'
 import { accordionProps } from './accordion-types'
 import OpenIcon from './accordion-open-icon'
-import { getRootSlots } from '../src/utils'
+import { flatten, getRootSlots } from '../src/utils'
 
 export default defineComponent({
   name: 'DAccordionMenu',
@@ -54,22 +54,24 @@ export default defineComponent({
     }
 
     const hasActiveChildren = (item) => {
-      // FIXME:待修复
-      // if(item.title=='Child Content 1 (has children)') debugger
-      // if(item.children) {
-      //   let children = item.children
-        for(let i=0;i<item.length;i++) {
-          if(item[i].active){
-            return true
-          }else if(item[i].children){
-            for(let j of item[i].children) {
-              hasActiveChildren(j)
-            }
-            return false
-          }
-        // }
+      if(item.active === true) return true
+      if(item.children) {
+        return getActive(item.children)
+      }
+    }
+    const getActive = (arr) => {
+      let flag = false
+      if(!arr.length) return false
+      for(let i=0;i<arr.length;i++){
+        if(arr[i].active === true) {
+          flag = true
+          break
+        }
+        if(arr[i].children) {
+          flag = getActive(arr[i].children)
+        }
       }
-      return false
+      return flag
     }
 
     const keyOpen = computed(() => {
@@ -89,7 +91,7 @@ export default defineComponent({
     })
     
     const childActived = computed(() => {
-      return active.value
+      return hasActiveChildren(item.value)
     })
 
     const open = computed(() => {
-- 
Gitee