@utogether/udp-core 1.0.0

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

@@ -0,0 +1,205 @@
+<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>

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

@@ -0,0 +1,94 @@
+<!--
+ * @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>

package/src/layout/components/lay-tag/index.scss

@@ -0,0 +1,375 @@
+@keyframes schedule-in-width {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes schedule-out-width {
+  from {
+    width: 100%;
+  }
+
+  to {
+    width: 0;
+  }
+}
+
+.tags-view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  background: #fff;
+  box-shadow: 0 0 1px #888;
+
+  .scroll-item {
+    position: relative;
+    display: inline-block;
+    height: 34px;
+    padding-left: 6px;
+    line-height: 34px;
+    cursor: pointer;
+    transition: all 0.4s;
+
+    &:not(:first-child) {
+      padding-right: 24px;
+    }
+
+    &.chrome-item {
+      padding-right: 0;
+      padding-left: 0;
+      margin-right: -18px;
+      box-shadow: none;
+    }
+
+    .el-icon-close {
+      position: absolute;
+      top: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      color: var(--el-color-primary);
+      cursor: pointer;
+      border-radius: 4px;
+      transform: translate(0, -50%);
+      transition:
+        background-color 0.12s,
+        color 0.12s;
+
+      &:hover {
+        color: rgb(0 0 0 / 88%) !important;
+        background-color: rgb(0 0 0 / 6%);
+      }
+    }
+  }
+
+  .tag-title {
+    padding: 0 4px;
+    color: var(--el-text-color-primary);
+    text-decoration: none;
+  }
+
+  .scroll-container {
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+
+    // padding: 5px 0;
+    white-space: nowrap;
+
+    &.chrome-scroll-container {
+      padding-top: 4px;
+
+      .fixed-tag {
+        padding: 0 !important;
+      }
+    }
+
+    .tab {
+      position: relative;
+      float: left;
+      overflow: visible;
+      white-space: nowrap;
+      list-style: none;
+      transition: transform 0.5s ease-in-out;
+
+      .scroll-item {
+        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        &:nth-child(1) {
+          padding: 0 12px;
+        }
+
+        &.chrome-item {
+          &:nth-child(1) {
+            padding: 0;
+          }
+        }
+      }
+
+      .fixed-tag {
+        padding: 0 12px;
+      }
+    }
+  }
+
+  /* 右键菜单 */
+  .contextmenu {
+    position: absolute;
+    padding: 5px 0;
+    margin: 0;
+    font-size: 13px;
+    font-weight: normal;
+    color: var(--el-text-color-primary);
+    white-space: nowrap;
+    outline: 0;
+    list-style-type: none;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+
+    li {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 7px 12px;
+      margin: 0;
+      cursor: pointer;
+
+      &:hover {
+        // background: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+      }
+
+      svg {
+        display: block;
+        margin-right: 0.5em;
+      }
+    }
+  }
+}
+
+.el-dropdown-menu {
+  li {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+    cursor: pointer;
+
+    svg {
+      display: block;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
+
+:deep(.el-dropdown-menu__item--divided) {
+  margin: 1px 0;
+}
+
+.el-dropdown-menu__item--divided::before {
+  margin: 0;
+}
+
+.el-dropdown-menu__item.is-disabled {
+  cursor: not-allowed;
+}
+
+.scroll-item.is-active {
+  position: relative;
+  color: #fff;
+  box-shadow: 0 0 0.7px #888;
+
+  .chrome-tab {
+    z-index: 10;
+  }
+
+  .chrome-tab__bg {
+    color: var(--el-color-primary-light-9) !important;
+  }
+
+  .tag-title {
+    color: var(--el-color-primary) !important;
+  }
+
+  .chrome-close-btn {
+    color: var(--el-color-primary);
+
+    &:hover {
+      background-color: var(--el-color-primary);
+    }
+  }
+
+  .chrome-tab-divider {
+    opacity: 0;
+  }
+}
+
+.arrow-left,
+.arrow-right,
+.arrow-down {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 34px;
+  color: var(--el-text-color-primary);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.arrow-left {
+  box-shadow: 5px 0 5px -6px #ccc;
+
+  &:hover {
+    cursor: w-resize;
+  }
+}
+
+.arrow-right {
+  border-right: 0.5px solid #ccc;
+  box-shadow: -5px 0 5px -6px #ccc;
+
+  &:hover {
+    cursor: e-resize;
+  }
+}
+
+/* 卡片模式下鼠标移入显示蓝色边框 */
+.card-in {
+  color: var(--el-color-primary);
+
+  .tag-title {
+    color: var(--el-color-primary);
+  }
+}
+
+/* 卡片模式下鼠标移出隐藏蓝色边框 */
+.card-out {
+  color: #666;
+  border: none;
+
+  .tag-title {
+    color: #666;
+  }
+}
+
+/* 灵动模式 */
+.schedule-active {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--el-color-primary);
+}
+
+/* 灵动模式下鼠标移入显示蓝色进度条 */
+.schedule-in {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--el-color-primary);
+  animation: schedule-in-width 400ms ease-in;
+}
+
+/* 灵动模式下鼠标移出隐藏蓝色进度条 */
+.schedule-out {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--el-color-primary);
+  animation: schedule-out-width 400ms ease-in;
+}
+
+/* 谷歌风格的页签 */
+.chrome-tab {
+  position: relative;
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  .tag-title {
+    padding: 0;
+  }
+
+  .chrome-tab-divider {
+    position: absolute;
+    right: 7px;
+    width: 1px;
+    height: 14px;
+    background-color: #bdcbd9;
+  }
+
+  &:hover {
+    z-index: 10;
+
+    .chrome-tab__bg {
+      color: #dee1e6;
+    }
+
+    .tag-title {
+      color: #1f1f1f;
+    }
+
+    .chrome-tab-divider {
+      opacity: 0;
+    }
+  }
+
+  .chrome-tab__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -10;
+    width: 100%;
+    height: 100%;
+    color: transparent;
+    pointer-events: none;
+  }
+
+  .chrome-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #666;
+    border-radius: 50%;
+
+    &:hover {
+      color: white;
+      background-color: #b1b3b8;
+    }
+  }
+}