@utogether/udp-core 2.0.0-beta.26 → 2.0.0-beta.28

package/src/layout/components/lay-sidebar/sidebarItem.vue

@@ -1,195 +1,199 @@
-<script setup lang="ts">
-import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from 'vue';
-import path from 'path';
-import extraIcon from './extraIcon.vue';
-import { useNav } from '../../hooks/useNav';
-import { childrenType } from '../../types';
-import { transformI18n } from '../../../plugins/i18n';
-import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
-// import Icon from '@/components/ReIcon/src/Icon.vue';
-
-const { appHook, isCollapse, getDivStyle } = useNav();
-const menuMode = ['vertical', 'mix'].includes(appHook.layout);
-
-const props = defineProps({
-  item: {
-    type: Object as PropType<childrenType>
-  },
-  isNest: {
-    type: Boolean,
-    default: false
-  },
-  basePath: {
-    type: String,
-    default: ''
-  }
-});
-
-const getNoDropdownStyle = computed((): CSSProperties => {
-  return { display: 'flex', alignItems: 'center' };
-});
-// const getDivStyle = computed((): CSSProperties => {
-//   return {
-//     width: !isCollapse.value ? '' : '100%',
-//     display: 'flex',
-//     alignItems: 'center',
-//     justifyContent: 'space-between',
-//     overflow: 'hidden'
-//   };
-// });
-
-const getMenuTextStyle = computed(() => {
-  return {
-    width: !isCollapse.value ? '125px' : '',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    outline: 'none'
-  };
-});
-const getSubTextStyle = computed((): CSSProperties => {
-  return {
-    width: !isCollapse.value ? '210px' : '',
-    display: 'inline-block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  };
-});
-
-const getSpanStyle = computed((): CSSProperties => {
-  return { overflow: 'hidden', textOverflow: 'ellipsis' };
-});
-
-const onlyOneChild: childrenType = ref(null);
-// 存放菜单是否存在showTooltip属性标识
-const hoverMenuMap = new WeakMap();
-// 存储菜单文本dom元素
-const menuTextRef = ref(null);
-
-function hoverMenu(key) {
-  // 如果当前菜单showTooltip属性已存在，退出计算
-  if (hoverMenuMap.get(key)) return;
-
-  nextTick(() => {
-    // 如果文本内容的整体宽度大于其可视宽度，则文本溢出
-    menuTextRef.value?.scrollWidth > menuTextRef.value?.clientWidth
-      ? Object.assign(key, {
-          showTooltip: true
-        })
-      : Object.assign(key, {
-          showTooltip: false
-        });
-
-    hoverMenuMap.set(key, true);
-  });
-}
-
-// 左侧菜单折叠后，当菜单没有图标时只显示第一个文字并加上省略号
-function overflowSlice(text, item?: any) {
-  const newText = (text?.length > 1 ? text.toString().slice(0, 1) : text) + '...';
-  if (item && !(isCollapse.value && item?.parentId === null)) {
-    return appHook.layout === 'mix' && item?.pathList?.length === 2 && isCollapse.value ? newText : text;
-  }
-  return newText;
-}
-function hasOneShowingChild(children: childrenType[] = [], parent: childrenType) {
-  const showingChildren = children.filter((item: any) => {
-    onlyOneChild.value = item;
-    return true;
-  });
-  if (showingChildren[0]?.meta?.showParent) {
-    return false;
-  }
-  if (showingChildren.length === 1) {
-    return true;
-  }
-
-  if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
-    return true;
-  }
-  return false;
-}
-
-function resolvePath(routePath) {
-  const httpReg = /^http(s?):\/\//;
-  if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
-    return routePath || props.basePath;
-  } else {
-    return path.resolve(props.basePath, routePath);
-  }
-}
-</script>
-
-<template>
-  <template
-    v-if="
-      hasOneShowingChild(props.item.children, props.item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)
-    "
-  >
-    <el-menu-item
-      :index="resolvePath(onlyOneChild.path)"
-      :class="{
-        'submenu-title-noDropdown': !isNest,
-        'submenu-mix-fold': !appHook.sidebar.opened && appHook.layout === 'mix'
-      }"
-      :style="getNoDropdownStyle"
-    >
-      <div
-        v-if="toRaw(props.item.meta.icon)"
-        class="sub-menu-icon"
-        :class="onlyOneChild.meta.icon || props.item?.meta?.icon"
-      >
-        <component
-          :is="useRenderIcon(toRaw(onlyOneChild.meta.icon) || (props.item.meta && toRaw(props.item.meta.icon)))"
-        />
-      </div>
-      <div v-if="!appHook.sidebar.opened && appHook.layout === 'mix'" class="ut-mix-title">
-        <span>
-          {{ transformI18n(onlyOneChild.meta.title) }}
-        </span>
-      </div>
-      <template #title>
-        <div :style="getDivStyle">
-          <span v-if="!menuMode">{{ transformI18n(onlyOneChild.meta.title) }}</span>
-          <el-tooltip v-else placement="top" :offset="-10" :disabled="!onlyOneChild.showTooltip">
-            <template #content>
-              {{ transformI18n(onlyOneChild.meta.title) }}
-            </template>
-            <span ref="menuTextRef" :style="getMenuTextStyle" @mouseover="hoverMenu(onlyOneChild)">
-              {{ transformI18n(onlyOneChild.meta.title) }}
-            </span>
-          </el-tooltip>
-          <extraIcon :extra-icon="onlyOneChild.meta.extraIcon" />
-        </div>
-      </template>
-    </el-menu-item>
-  </template>
-
-  <el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)" teleported>
-    <template #title>
-      <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon" :class="props.item.meta.icon">
-        <component :is="useRenderIcon(props.item.meta && props.item.meta.icon)" />
-      </div>
-      <span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
-      <el-tooltip v-else placement="top" :offset="-10" :disabled="!appHook.sidebar.opened || !props.item.showTooltip">
-        <template #content>
-          {{ transformI18n(props.item.meta.title) }}
-        </template>
-        <div ref="menuTextRef" :style="getSubTextStyle" @mouseover="hoverMenu(props.item)">
-          <span :style="getSpanStyle">
-            {{ overflowSlice(transformI18n(props.item.meta.title), props.item) }}
-          </span>
-        </div>
-      </el-tooltip>
-      <extraIcon v-if="!isCollapse" :extra-icon="props.item.meta.extraIcon" />
-    </template>
-    <sidebar-item
-      v-for="child in props.item.children"
-      :key="child.path"
-      :is-nest="true"
-      :item="child"
-      :base-path="resolvePath(child.path)"
-      class="nest-menu"
-    />
-  </el-sub-menu>
-</template>
+<script setup lang="ts">
+import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from 'vue';
+import path from 'path';
+import extraIcon from './extraIcon.vue';
+import { useNav } from '../../hooks/useNav';
+import { childrenType } from '../../types';
+import { transformI18n } from '../../../plugins/i18n';
+import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
+// import Icon from '@/components/ReIcon/src/Icon.vue';
+
+const { appHook, isCollapse, getDivStyle } = useNav();
+const menuMode = ['vertical', 'mix'].includes(appHook.layout);
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<childrenType>
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ''
+  }
+});
+
+const getNoDropdownStyle = computed((): CSSProperties => {
+  return { display: 'flex', alignItems: 'center' };
+});
+// const getDivStyle = computed((): CSSProperties => {
+//   return {
+//     width: !isCollapse.value ? '' : '100%',
+//     display: 'flex',
+//     alignItems: 'center',
+//     justifyContent: 'space-between',
+//     overflow: 'hidden'
+//   };
+// });
+
+const getMenuTextStyle = computed(() => {
+  return {
+    width: !isCollapse.value ? '125px' : '',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    outline: 'none'
+  };
+});
+const getSubTextStyle = computed((): CSSProperties => {
+  return {
+    width: !isCollapse.value ? '210px' : '',
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  };
+});
+
+const getSpanStyle = computed((): CSSProperties => {
+  return { overflow: 'hidden', textOverflow: 'ellipsis' };
+});
+
+const onlyOneChild: childrenType = ref(null);
+// 存放菜单是否存在showTooltip属性标识
+const hoverMenuMap = new WeakMap();
+// 存储菜单文本dom元素
+const menuTextRef = ref(null);
+
+function hoverMenu(key) {
+  // 如果当前菜单showTooltip属性已存在，退出计算
+  if (hoverMenuMap.get(key)) return;
+
+  nextTick(() => {
+    // 如果文本内容的整体宽度大于其可视宽度，则文本溢出
+    menuTextRef.value?.scrollWidth > menuTextRef.value?.clientWidth
+      ? Object.assign(key, {
+          showTooltip: true
+        })
+      : Object.assign(key, {
+          showTooltip: false
+        });
+
+    hoverMenuMap.set(key, true);
+  });
+}
+
+// 左侧菜单折叠后，当菜单没有图标时只显示第一个文字并加上省略号
+function overflowSlice(text, item?: any) {
+  const newText = (text?.length > 1 ? text.toString().slice(0, 1) : text) + '...';
+  if (item && !(isCollapse.value && item?.parentId === null)) {
+    return appHook.layout === 'mix' && item?.pathList?.length === 2 && isCollapse.value ? newText : text;
+  }
+  return newText;
+}
+function hasOneShowingChild(children: childrenType[] = [], parent: childrenType) {
+  const showingChildren = children.filter((item: any) => {
+    onlyOneChild.value = item;
+    return true;
+  });
+  if (showingChildren[0]?.meta?.showParent) {
+    return false;
+  }
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
+    return true;
+  }
+  return false;
+}
+
+function resolvePath(routePath) {
+  const httpReg = /^http(s?):\/\//;
+  if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
+    return routePath || props.basePath;
+  } else {
+    // console.log('routePath ===', routePath);
+    if ('/ubase/elevator/elevator-model-class' === routePath) {
+      console.log('path.resolve(props.basePath, routePath)', path.resolve(props.basePath, routePath));
+    }
+    return path.resolve(props.basePath, routePath);
+  }
+}
+</script>
+
+<template>
+  <template
+    v-if="
+      hasOneShowingChild(props.item.children, props.item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+    "
+  >
+    <el-menu-item
+      :index="resolvePath(onlyOneChild.path)"
+      :class="{
+        'submenu-title-noDropdown': !isNest,
+        'submenu-mix-fold': !appHook.sidebar.opened && appHook.layout === 'mix'
+      }"
+      :style="getNoDropdownStyle"
+    >
+      <div
+        v-if="toRaw(props.item.meta.icon)"
+        class="sub-menu-icon"
+        :class="onlyOneChild.meta.icon || props.item?.meta?.icon"
+      >
+        <component
+          :is="useRenderIcon(toRaw(onlyOneChild.meta.icon) || (props.item.meta && toRaw(props.item.meta.icon)))"
+        />
+      </div>
+      <div v-if="!appHook.sidebar.opened && appHook.layout === 'mix'" class="ut-mix-title">
+        <span>
+          {{ transformI18n(onlyOneChild.meta.title) }}
+        </span>
+      </div>
+      <template #title>
+        <div :style="getDivStyle">
+          <span v-if="!menuMode">{{ transformI18n(onlyOneChild.meta.title) }}</span>
+          <el-tooltip v-else placement="top" :offset="-10" :disabled="!onlyOneChild.showTooltip">
+            <template #content>
+              {{ transformI18n(onlyOneChild.meta.title) }}
+            </template>
+            <span ref="menuTextRef" :style="getMenuTextStyle" @mouseover="hoverMenu(onlyOneChild)">
+              {{ transformI18n(onlyOneChild.meta.title) }}
+            </span>
+          </el-tooltip>
+          <extraIcon :extra-icon="onlyOneChild.meta.extraIcon" />
+        </div>
+      </template>
+    </el-menu-item>
+  </template>
+
+  <el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)" teleported>
+    <template #title>
+      <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon" :class="props.item.meta.icon">
+        <component :is="useRenderIcon(props.item.meta && props.item.meta.icon)" />
+      </div>
+      <span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
+      <el-tooltip v-else placement="top" :offset="-10" :disabled="!appHook.sidebar.opened || !props.item.showTooltip">
+        <template #content>
+          {{ transformI18n(props.item.meta.title) }}
+        </template>
+        <div ref="menuTextRef" :style="getSubTextStyle" @mouseover="hoverMenu(props.item)">
+          <span :style="getSpanStyle">
+            {{ overflowSlice(transformI18n(props.item.meta.title), props.item) }}
+          </span>
+        </div>
+      </el-tooltip>
+      <extraIcon v-if="!isCollapse" :extra-icon="props.item.meta.extraIcon" />
+    </template>
+    <sidebar-item
+      v-for="child in props.item.children"
+      :key="child.path"
+      :is-nest="true"
+      :item="child"
+      :base-path="resolvePath(child.path)"
+      class="nest-menu"
+    />
+  </el-sub-menu>
+</template>

package/src/layout/components/lay-sidebar/vertical.vue

@@ -1,92 +1,92 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-17 16:02:30
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2023-10-09 12:00:16
- * @Description: 左侧边栏
--->
-
-<script setup lang="ts">
-import Logo from './sidebar-logo.vue';
-import { emitter } from '../../../utils/mitt';
-import { useNav } from '../..//hooks/useNav';
-import SidebarItem from './sidebarItem.vue';
-import { storageLocal } from '@utogether/utils';
-import { useRoute } from 'vue-router';
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
-import { findRouteByPath, getParentPaths } from '../../../router/utils';
-import { responsiveStorageNameSpace } from '../../../config';
-import { usePermissionStoreHook } from '../../../store/modules/permission';
-
-defineOptions({ name: 'LayoutVertical' });
-
-const route = useRoute();
-const showLogo = ref(storageLocal.getItem(`${responsiveStorageNameSpace()}configure`)?.showLogo ?? true);
-const { device, appHook, isCollapse, menuSelect } = useNav();
-const subMenuData = ref([]);
-
-const menuData = computed(() => {
-  return appHook.layout === 'mix' && device.value !== 'mobile'
-    ? subMenuData.value
-    : usePermissionStoreHook().wholeMenus;
-});
-
-const loading = computed(() => (appHook.layout === 'mix' ? false : menuData.value.length === 0 ? true : false));
-
-function getSubMenuData(path) {
-  subMenuData.value = [];
-  // path的上级路由组成的数组
-  const parentPathArr = getParentPaths(path, usePermissionStoreHook().wholeMenus);
-  // 当前路由的父级路由信息
-  const parenetRoute = findRouteByPath(parentPathArr[0] || path, usePermissionStoreHook().wholeMenus);
-  if (!parenetRoute?.children) return;
-  subMenuData.value = parenetRoute?.children;
-}
-
-getSubMenuData(route.path);
-
-watch(
-  () => route.path,
-  () => {
-    if (route.path.includes('/redirect')) return;
-    getSubMenuData(route.path);
-    menuSelect(route.path);
-  }
-);
-onMounted(() => {
-  emitter.on('logoChange', key => {
-    showLogo.value = key;
-  });
-});
-onBeforeUnmount(() => {
-  // 解绑`logoChange`公共事件，防止多次触发
-  emitter.off('logoChange');
-});
-</script>
-
-<template>
-  <div v-spinning="loading" :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']">
-    <Logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper" :class="[device === 'mobile' ? 'mobile' : 'pc']">
-      <template #default>
-        <el-menu
-          :default-active="route.path"
-          :collapse="isCollapse"
-          :collapse-transition="false"
-          router
-          mode="vertical"
-          popper-class="udp-scrollbar"
-          class="select-none outer-most"
-        >
-          <sidebar-item
-            v-for="routes in menuData"
-            :key="routes.path"
-            :item="routes"
-            class="select-none outer-most"
-            :base-path="routes.path"
-          />
-        </el-menu>
-      </template>
-    </el-scrollbar>
-  </div>
-</template>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2026-09-09 11:32:54
+ * @Description: 左侧边栏
+-->
+
+<script setup lang="ts">
+import Logo from './sidebar-logo.vue';
+import { emitter } from '../../../utils/mitt';
+import { useNav } from '../..//hooks/useNav';
+import SidebarItem from './sidebarItem.vue';
+import { storageLocal } from '@utogether/utils';
+import { useRoute } from 'vue-router';
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { findRouteByPath, getParentPaths } from '../../../router/utils';
+import { responsiveStorageNameSpace } from '../../../config';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+
+defineOptions({ name: 'LayoutVertical' });
+
+const route = useRoute();
+const showLogo = ref(storageLocal.getItem(`${responsiveStorageNameSpace()}configure`)?.showLogo ?? true);
+const { device, appHook, isCollapse, menuSelect } = useNav();
+const subMenuData = ref([]);
+
+const menuData = computed(() => {
+  return appHook.layout === 'mix' && device.value !== 'mobile'
+    ? subMenuData.value
+    : usePermissionStoreHook().wholeMenus;
+});
+
+const loading = computed(() => (appHook.layout === 'mix' ? false : menuData.value.length === 0 ? true : false));
+
+function getSubMenuData(path) {
+  subMenuData.value = [];
+  // path的上级路由组成的数组
+  const parentPathArr = getParentPaths(path, usePermissionStoreHook().wholeMenus);
+  // 当前路由的父级路由信息
+  const parenetRoute = findRouteByPath(parentPathArr[0] || path, usePermissionStoreHook().wholeMenus);
+  if (!parenetRoute?.children) return;
+  subMenuData.value = parenetRoute?.children;
+}
+
+getSubMenuData(route.path);
+
+watch(
+  () => route.path,
+  () => {
+    if (route.path.includes('/redirect')) return;
+    getSubMenuData(route.path);
+    menuSelect(route.path);
+  }
+);
+onMounted(() => {
+  emitter.on('logoChange', key => {
+    showLogo.value = key;
+  });
+});
+onBeforeUnmount(() => {
+  // 解绑`logoChange`公共事件，防止多次触发
+  emitter.off('logoChange');
+});
+</script>
+
+<template>
+  <div v-spinning="loading" :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']">
+    <Logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper" :class="[device === 'mobile' ? 'mobile' : 'pc']">
+      <template #default>
+        <el-menu
+          :default-active="route.path"
+          :collapse="isCollapse"
+          :collapse-transition="false"
+          router
+          mode="vertical"
+          popper-class="udp-scrollbar"
+          class="select-none outer-most"
+        >
+          <sidebar-item
+            v-for="routes in menuData"
+            :key="routes.path"
+            :item="routes"
+            class="select-none outer-most"
+            :base-path="routes.path"
+          />
+        </el-menu>
+      </template>
+    </el-scrollbar>
+  </div>
+</template>

package/src/layout/layoutView.vue

@@ -110,6 +110,7 @@ onMounted(() => {
   if (isMobile) {
     toggle('mobile', false);
   }
+  console.log('appWrapperRef', 111);
 });
 
 onBeforeMount(() => {