feat: Add analysis demo

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -8,9 +8,7 @@ import { useAppStore } from '@/store/modules/app'
 import { setCssVar } from '@/utils'
 import { useDesign } from '@/hooks/web/useDesign'
 
-const { getPrefixCls, variables } = useDesign()
-
-const prefixCls = getPrefixCls('config-global')
+const { variables } = useDesign()
 
 const appStore = useAppStore()
 
@@ -54,7 +52,6 @@ const currentLocale = computed(() => localeStore.currentLocale)
 
 <template>
   <ElConfigProvider
-    :clss="prefixCls"
     :namespace="variables.elNamespace"
     :locale="currentLocale.elLocale"
     :message="{ max: 1 }"

src/components/ContextMenu/index.ts

@@ -1,3 +1,8 @@
 import ContextMenu from './src/ContextMenu.vue'
+import { ElDropdown } from 'element-plus'
+
+export interface ContextMenuExpose {
+  elDropdownMenuRef: ComponentRef<typeof ElDropdown>
+}
 
 export { ContextMenu }

src/components/ContextMenu/src/ContextMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
-import { PropType } from 'vue'
+import { PropType, ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -10,6 +10,8 @@ const prefixCls = getPrefixCls('context-menu')
 
 const { t } = useI18n()
 
+const emit = defineEmits(['visibleChange'])
+
 defineProps({
   schema: {
     type: Array as PropType<contextMenuSchema[]>,
@@ -24,14 +26,26 @@ defineProps({
 const command = (item: contextMenuSchema) => {
   item.command && item.command(item)
 }
+
+const visibleChange = (visible: boolean) => {
+  emit('visibleChange', visible, unref(elDropdownMenuRef))
+}
+
+const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>()
+
+defineExpose({
+  elDropdownMenuRef
+})
 </script>
 
 <template>
   <ElDropdown
+    ref="elDropdownMenuRef"
     :class="prefixCls"
     :trigger="trigger"
     placement="bottom-start"
     @command="command"
+    @visible-change="visibleChange"
     popper-class="v-context-menu-popper"
   >
     <slot></slot>

src/components/Echart/src/Echart.vue

@@ -9,7 +9,7 @@ import { useAppStore } from '@/store/modules/app'
 import { isString } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
 
-const { getPrefixCls } = useDesign()
+const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('echart')
 
@@ -40,7 +40,7 @@ const options = computed(() => {
 
 const elRef = ref<ElRef>()
 
-const echartRef = ref<echarts.ECharts>()
+let echartRef: Nullable<echarts.ECharts> = null
 
 const contentEl = ref<Element>()
 
@@ -56,16 +56,16 @@ const styles = computed(() => {
 
 const initChart = () => {
   if (unref(elRef) && props.options) {
-    echartRef.value = echarts.init(unref(elRef) as HTMLElement, unref(options))
+    echartRef = echarts.init(unref(elRef) as HTMLElement)
+    echartRef?.setOption(unref(options))
   }
 }
 
 watch(
   () => options.value,
   (options) => {
-    const chart = unref(echartRef)
-    if (chart) {
-      chart?.setOption(options)
+    if (echartRef) {
+      echartRef?.setOption(options)
     }
   },
   {
@@ -74,13 +74,12 @@ watch(
 )
 
 const resizeHandler = debounce(() => {
-  const chart = unref(echartRef)
-  if (chart) {
-    chart.resize()
+  if (echartRef) {
+    echartRef.resize()
   }
 }, 100)
 
-const contentResizeHandler = (e: TransitionEvent) => {
+const contentResizeHandler = async (e: TransitionEvent) => {
   if (e.propertyName === 'width') {
     resizeHandler()
   }
@@ -91,7 +90,7 @@ onMounted(() => {
 
   window.addEventListener('resize', resizeHandler)
 
-  contentEl.value = document.getElementsByClassName('v-content')[0]
+  contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0]
   unref(contentEl) &&
     (unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler)
 })
@@ -103,13 +102,12 @@ onBeforeUnmount(() => {
 })
 
 onActivated(() => {
-  const chart = unref(echartRef)
-  if (chart) {
-    chart.resize()
+  if (echartRef) {
+    echartRef.resize()
   }
 })
 </script>
 
 <template>
-  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles" />
+  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
 </template>

src/components/TagsView/src/TagsView.vue

@@ -6,8 +6,9 @@ import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useI18n } from '@/hooks/web/useI18n'
 import { filterAffixTags } from './helper'
-import { ContextMenu } from '@/components/ContextMenu'
+import { ContextMenu, ContextMenuExpose } from '@/components/ContextMenu'
 import { useDesign } from '@/hooks/web/useDesign'
+import { useTemplateRefsList } from '@vueuse/core'
 
 const { getPrefixCls } = useDesign()
 
@@ -115,6 +116,23 @@ const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
   return route.path === unref(currentRoute).path
 }
 
+const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
+
+const visibleChange = (
+  visible: boolean,
+  ref: ComponentRef<typeof ContextMenu & ContextMenuExpose>
+) => {
+  const uid = ref.$el['__vueParentComponent'].uid
+  if (visible) {
+    for (const v of unref(itemRefs)) {
+      const elDropdownMenuRef = v.elDropdownMenuRef
+      if (uid !== elDropdownMenuRef?.$el['__vueParentComponent'].uid) {
+        elDropdownMenuRef?.handleClose()
+      }
+    }
+  }
+}
+
 onMounted(() => {
   initTags()
   addTags()
@@ -141,6 +159,7 @@ watch(
       <ElScrollbar class="h-full">
         <div class="flex h-full">
           <ContextMenu
+            :ref="itemRefs.set"
             :schema="[
               {
                 icon: 'ant-design:sync-outlined',
@@ -207,6 +226,7 @@ watch(
                 'is-active': isActive(item)
               }
             ]"
+            @visible-change="visibleChange"
           >
             <router-link :to="{ ...item }" custom v-slot="{ navigate }">
               <div