@utogether/udp-core 1.0.0

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

@@ -0,0 +1,625 @@
+<script lang="ts">
+export default { name: 'LayoutTag' };
+</script>
+<script setup lang="ts">
+import { ref, watch, unref, nextTick, onBeforeUnmount } from 'vue';
+import { isEqual, isEmpty } from 'xe-utils';
+import { useResizeObserver, useDebounceFn, useFullscreen, onClickOutside } from '@vueuse/core';
+import { delay } from '@utogether/utils';
+import { emitter } from '../../../utils/mitt';
+import { routerArrays } from '../../types';
+import { useSettingStoreHook } from '../../../store/modules/settings';
+import { handleAliveRoute } from '../../../router/utils';
+import { useMultiTagsStoreHook } from '../../../store/modules/multiTags';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+import { useTags } from '../../hooks/useTag';
+import { RouteConfigs } from '../../types';
+import TagChrome from '../lay-chrome/index.vue';
+
+const {
+  route,
+  router,
+  visible,
+  showTags,
+  instance,
+  multiTags,
+  tagsViews,
+  buttonTop,
+  buttonLeft,
+  showModel,
+  translateX,
+  isFixedTag,
+  SuSetting,
+  activeIndex,
+  getTabStyle,
+  iconIsActive,
+  linkIsActive,
+  currentSelect,
+  scheduleIsActive,
+  getContextMenuStyle,
+  closeMenu,
+  onMounted,
+  onMouseenter,
+  onMouseleave,
+  transformI18n,
+  onContentFullScreen
+} = useTags();
+
+const suSetting = useSettingStoreHook();
+const tabDom = ref();
+const containerDom = ref();
+const scrollbarDom = ref();
+const contextmenuRef = ref();
+const isShowArrow = ref(false);
+const { isFullscreen, toggle } = useFullscreen();
+
+const fixedTags = [
+  ...routerArrays,
+  ...usePermissionStoreHook().flatteningRoutes.filter(v => v?.meta?.fixedTag)
+];
+const dynamicTagView = async () => {
+  await nextTick();
+  const index = multiTags.value.findIndex(item => {
+    if (!isEmpty(route.query)) {
+      return isEqual(route.query, item.query);
+    } else if (!isEmpty(route.params)) {
+      return isEqual(route.params, item.params);
+    } else {
+      return route.path === item.path;
+    }
+  });
+  moveToView(index);
+};
+
+const moveToView = async (index: number): Promise<void> => {
+  await nextTick();
+  const tabNavPadding = 10;
+  if (!instance.refs['dynamic' + index]) return;
+  const tabItemEl = instance.refs['dynamic' + index][0];
+  const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
+  const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
+  // 标签页导航栏可视长度（不包含溢出部分）
+  const scrollbarDomWidth = scrollbarDom.value ? scrollbarDom.value.offsetWidth : 0;
+  // 已有标签页总长度（包含溢出部分）
+  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
+  scrollbarDomWidth <= tabDomWidth ? (isShowArrow.value = true) : (isShowArrow.value = false);
+  if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
+    translateX.value = 0;
+  } else if (tabItemElOffsetLeft < -translateX.value) {
+    // 标签在可视区域左侧
+    translateX.value = -tabItemElOffsetLeft + tabNavPadding;
+  } else if (
+    tabItemElOffsetLeft > -translateX.value &&
+    tabItemElOffsetLeft + tabItemOffsetWidth < -translateX.value + scrollbarDomWidth
+  ) {
+    // 标签在可视区域
+    translateX.value = Math.min(
+      0,
+      scrollbarDomWidth - tabItemOffsetWidth - tabItemElOffsetLeft - tabNavPadding
+    );
+  } else {
+    // 标签在可视区域右侧
+    translateX.value = -(tabItemElOffsetLeft - (scrollbarDomWidth - tabNavPadding - tabItemOffsetWidth));
+  }
+};
+
+const handleScroll = (offset: number): void => {
+  const scrollbarDomWidth = scrollbarDom.value ? scrollbarDom.value?.offsetWidth : 0;
+  const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
+  if (offset > 0) {
+    translateX.value = Math.min(0, translateX.value + offset);
+  } else {
+    if (scrollbarDomWidth < tabDomWidth) {
+      if (translateX.value >= -(tabDomWidth - scrollbarDomWidth)) {
+        translateX.value = Math.max(translateX.value + offset, scrollbarDomWidth - tabDomWidth);
+      }
+    } else {
+      translateX.value = 0;
+    }
+  }
+};
+
+function dynamicRouteTag(value: string): void {
+  const hasValue = multiTags.value.some(item => {
+    return item.path === value;
+  });
+
+  function concatPath(arr: object[], value: string) {
+    if (!hasValue) {
+      arr.forEach((arrItem: any) => {
+        if (arrItem.path === value) {
+          useMultiTagsStoreHook().handleTags('push', {
+            path: value,
+            meta: arrItem.meta,
+            name: arrItem.name
+          });
+        } else {
+          if (arrItem.children && arrItem.children.length > 0) {
+            concatPath(arrItem.children, value);
+          }
+        }
+      });
+    }
+  }
+  concatPath(router.options.routes as any, value);
+}
+
+/** 刷新路由 */
+function onFresh() {
+  const { fullPath, query } = unref(route);
+  router.replace({
+    path: '/redirect' + fullPath,
+    query: query
+  });
+  handleAliveRoute(route as ToRouteType, 'refresh');
+}
+
+function deleteDynamicTag(obj: any, current: any, tag?: string) {
+  const valueIndex: number = multiTags.value.findIndex((item: any) => {
+    if (item.query) {
+      if (item.path === obj.path) {
+        return item.query === obj.query;
+      }
+    } else if (item.params) {
+      if (item.path === obj.path) {
+        return item.params === obj.params;
+      }
+    } else {
+      return item.path === obj.path;
+    }
+  });
+
+  const spliceRoute = (startIndex?: number, length?: number, other?: boolean): void => {
+    if (other) {
+      useMultiTagsStoreHook().handleTags('equal', [fixedTags, obj]);
+    } else {
+      useMultiTagsStoreHook().handleTags('splice', '', {
+        startIndex,
+        length
+      }) as any;
+    }
+    dynamicTagView();
+  };
+
+  if (tag === 'other') {
+    spliceRoute(1, 1, true);
+  } else if (tag === 'left') {
+    spliceRoute(fixedTags.length, valueIndex - 1);
+  } else if (tag === 'right') {
+    spliceRoute(valueIndex + 1, multiTags.value.length);
+  } else {
+    // 从当前匹配到的路径中删除
+    spliceRoute(valueIndex, 1);
+  }
+  const newRoute = useMultiTagsStoreHook().handleTags('slice');
+  if (current === route.path) {
+    // 如果删除当前激活tag就自动切换到最后一个tag
+    if (tag === 'left') return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
+  } else {
+    if (!multiTags.value.length) return;
+    if (multiTags.value.some(item => item.path === route.path)) return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
+  }
+}
+
+function deleteMenu(item, tag?: string) {
+  deleteDynamicTag(item, item.path, tag);
+  handleAliveRoute(route as ToRouteType);
+}
+
+function onClickDrop(key, item, selectRoute?: RouteConfigs) {
+  if (item && item.disabled) return;
+  let selectTagRoute;
+  if (selectRoute) {
+    selectTagRoute = {
+      path: selectRoute.path,
+      meta: selectRoute.meta,
+      name: selectRoute.name,
+      query: selectRoute?.query,
+      params: selectRoute?.params
+    };
+  } else {
+    selectTagRoute = { path: route.path, meta: route.meta };
+  }
+
+  // 当前路由信息
+  switch (key) {
+    case 0:
+      // 刷新路由
+      onFresh();
+      break;
+    case 1:
+      // 关闭当前标签页
+      deleteMenu(selectTagRoute);
+      break;
+    case 2:
+      // 关闭左侧标签页
+      deleteMenu(selectTagRoute, 'left');
+      break;
+    case 3:
+      // 关闭右侧标签页
+      deleteMenu(selectTagRoute, 'right');
+      break;
+    case 4:
+      // 关闭其他标签页
+      deleteMenu(selectTagRoute, 'other');
+      break;
+    case 5:
+      // 关闭全部标签页
+      useMultiTagsStoreHook().handleTags('splice', '', {
+        startIndex: fixedTags.length,
+        length: multiTags.value.length
+      });
+      router.push('/welcome');
+      handleAliveRoute(route as ToRouteType);
+      break;
+    case 6:
+      // 整体页面全屏
+      toggle();
+      setTimeout(() => {
+        if (isFullscreen.value) {
+          tagsViews[6].icon = 'ri:fullscreen-exit-fill';
+          tagsViews[6].text = 'message.btn.wholeExitFullScreen';
+        } else {
+          tagsViews[6].icon = 'ri:fullscreen-fill';
+          tagsViews[6].text = 'message.btn.wholeFullScreen';
+        }
+      }, 100);
+      break;
+    case 7:
+      // 内容区全屏
+      onContentFullScreen();
+      setTimeout(() => {
+        if (SuSetting.hiddenSideBar) {
+          tagsViews[7].icon = 'ri:fullscreen-exit-fill';
+          tagsViews[7].text = 'message.btn.contentExitFullScreen';
+        } else {
+          tagsViews[7].icon = 'ri:fullscreen-fill';
+          tagsViews[7].text = 'message.btn.contentFullScreen';
+        }
+      }, 100);
+      break;
+  }
+  setTimeout(() => {
+    showMenuModel(route.fullPath, route.query);
+  });
+}
+
+function handleCommand(command: any) {
+  const { key, item } = command;
+  onClickDrop(key, item);
+}
+
+/** 触发右键中菜单的点击事件 */
+function selectTag(key, item) {
+  closeMenu();
+  onClickDrop(key, item, currentSelect.value);
+}
+
+function showMenus(value: boolean) {
+  Array.of(1, 2, 3, 4, 5).forEach(v => {
+    tagsViews[v].show = value;
+  });
+}
+
+function disabledMenus(value: boolean, fixedTag = false) {
+  Array.of(1, 2, 3, 4, 5).forEach(v => {
+    tagsViews[v].disabled = value;
+  });
+  if (fixedTag) {
+    tagsViews[2].show = false;
+    tagsViews[2].disabled = true;
+  }
+}
+
+/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
+function showMenuModel(currentPath: string, query: object = {}, refresh = false) {
+  const allRoute = multiTags.value;
+  const routeLength = multiTags.value.length;
+  let currentIndex = -1;
+  if (isEmpty(query)) {
+    currentIndex = allRoute.findIndex(v => v.path === currentPath);
+  } else {
+    currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
+  }
+
+  function fixedTagDisabled() {
+    if (allRoute[currentIndex]?.meta?.fixedTag) {
+      Array.of(1, 2, 3, 4, 5).forEach(v => {
+        tagsViews[v].disabled = true;
+      });
+    }
+  }
+
+  showMenus(true);
+
+  if (refresh) {
+    tagsViews[0].show = true;
+  }
+
+  /**
+   * currentIndex为1时，左侧的菜单顶级菜单，则不显示关闭左侧标签页
+   * 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
+   */
+  if (currentIndex === 1 && routeLength !== 2) {
+    // 左侧的菜单是顶级菜单，右侧存在别的菜单
+    tagsViews[2].show = false;
+    Array.of(1, 3, 4, 5).forEach(v => {
+      tagsViews[v].disabled = false;
+    });
+    tagsViews[2].disabled = true;
+    fixedTagDisabled();
+  } else if (currentIndex === 1 && routeLength === 2) {
+    disabledMenus(false);
+    // 左侧的菜单是顶级菜单，右侧不存在别的菜单
+    Array.of(2, 3, 4).forEach(v => {
+      tagsViews[v].show = false;
+      tagsViews[v].disabled = true;
+    });
+    fixedTagDisabled();
+  } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
+    // 当前路由是所有路由中的最后一个
+    tagsViews[3].show = false;
+    Array.of(1, 2, 4, 5).forEach(v => {
+      tagsViews[v].disabled = false;
+    });
+    tagsViews[3].disabled = true;
+    if (allRoute[currentIndex - 1]?.meta?.fixedTag) {
+      tagsViews[2].show = false;
+      tagsViews[2].disabled = true;
+    }
+    fixedTagDisabled();
+  } else if (currentIndex === 0 || currentPath === '/redirect/welcome') {
+    // 当前路由为首页
+    disabledMenus(true);
+  } else {
+    disabledMenus(false, allRoute[currentIndex - 1]?.meta?.fixedTag);
+    fixedTagDisabled();
+  }
+}
+
+function openMenu(tag, e) {
+  closeMenu();
+  if (tag.path === '/welcome' || tag?.meta?.fixedTag) {
+    // 右键菜单为首页或拥有 fixedTag 属性，只显示刷新
+    showMenus(false);
+    tagsViews[0].show = true;
+  } else if (route.path !== tag.path && route.name !== tag.name) {
+    // 右键菜单不匹配当前路由，隐藏刷新
+    tagsViews[0].show = false;
+    showMenuModel(tag.path, tag.query);
+  } else if (multiTags.value.length === 2 && route.path !== tag.path) {
+    showMenus(true);
+    // 只有两个标签时不显示关闭其他标签页
+    tagsViews[4].show = false;
+  } else if (route.path === tag.path) {
+    // 右键当前激活的菜单
+    showMenuModel(tag.path, tag.query, true);
+  }
+
+  currentSelect.value = tag;
+  const menuMinWidth = 140;
+  const offsetLeft = unref(containerDom).getBoundingClientRect().left;
+  const offsetWidth = unref(containerDom).offsetWidth;
+  const maxLeft = offsetWidth - menuMinWidth;
+  const left = e.clientX - offsetLeft + 5;
+  if (left > maxLeft) {
+    buttonLeft.value = maxLeft;
+  } else {
+    buttonLeft.value = left;
+  }
+  suSetting.hiddenSideBar ? (buttonTop.value = e.clientY) : (buttonTop.value = e.clientY - 40);
+  nextTick(() => {
+    visible.value = true;
+  });
+}
+
+/** 触发tags标签切换 */
+function tagOnClick(item) {
+  const { name, path } = item;
+  if (name) {
+    if (item.query) {
+      router.push({
+        name,
+        query: item.query
+      });
+    } else if (item.params) {
+      router.push({
+        name,
+        params: item.params
+      });
+    } else {
+      router.push({ name });
+    }
+  } else {
+    router.push({ path });
+  }
+  // showMenuModel(item?.path, item?.query);
+  emitter.emit('tagOnClick', item);
+}
+
+onClickOutside(contextmenuRef, closeMenu, {
+  detectIframe: true
+});
+
+watch(route, () => {
+  activeIndex.value = -1;
+  dynamicTagView();
+});
+
+watch(isFullscreen, () => {
+  tagsViews[6].icon = 'ri:fullscreen-fill';
+  tagsViews[6].text = 'message.wholeFullScreen';
+});
+
+onMounted(() => {
+  if (!instance) return;
+
+  // 根据当前路由初始化操作标签页的禁用状态
+  showMenuModel(route.fullPath);
+
+  // 触发隐藏标签页
+  emitter.on('tagViewsChange', (key: any) => {
+    if (unref(showTags as any) === key) return;
+    (showTags as any).value = key;
+  });
+
+  // 改变标签风格
+  emitter.on('tagViewsShowModel', key => {
+    showModel.value = key;
+  });
+
+  //  接收侧边栏切换传递过来的参数
+  emitter.on('changLayoutRoute', indexPath => {
+    dynamicRouteTag(indexPath);
+    setTimeout(() => {
+      showMenuModel(indexPath);
+    });
+  });
+
+  useResizeObserver(
+    scrollbarDom,
+    useDebounceFn(() => {
+      dynamicTagView();
+    }, 200)
+  );
+  delay().then(() => dynamicTagView());
+});
+
+onBeforeUnmount(() => {
+  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  emitter.off('tagViewsChange');
+  emitter.off('tagViewsShowModel');
+  emitter.off('changLayoutRoute');
+});
+</script>
+
+<template>
+  <div v-if="!showTags" ref="containerDom" class="tags-view">
+    <span v-show="isShowArrow" class="arrow-left">
+      <IconifyIconOffline icon="ri:arrow-left-s-line" @click="handleScroll(200)" />
+    </span>
+    <div
+      ref="scrollbarDom"
+      class="scroll-container"
+      :class="showModel === 'chrome' && 'chrome-scroll-container'"
+    >
+      <div ref="tabDom" class="select-none tab" :style="getTabStyle">
+        <div
+          v-for="(item, index) in multiTags"
+          :key="index"
+          :ref="'dynamic' + index"
+          :class="[
+            'scroll-item is-closable',
+            linkIsActive(item),
+            showModel === 'chrome' && 'chrome-item',
+            isFixedTag(item) && 'fixed-tag'
+          ]"
+          @contextmenu.prevent="openMenu(item, $event)"
+          @mouseenter.prevent="onMouseenter(index)"
+          @mouseleave.prevent="onMouseleave(index)"
+          @click="tagOnClick(item)"
+        >
+          <template v-if="showModel !== 'chrome'">
+            <span class="tag-title dark:text-text_color_primary! dark:hover:text-primary!">
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="
+                isFixedTag(item)
+                  ? false
+                  : iconIsActive(item, index) || (index === activeIndex && index !== 0)
+              "
+              class="el-icon-close"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline icon="ri:close-fill" />
+            </span>
+            <span
+              v-if="showModel !== 'card'"
+              :ref="'schedule' + index"
+              :class="[scheduleIsActive(item)]"
+            />
+          </template>
+          <div v-else class="chrome-tab">
+            <div class="chrome-tab__bg">
+              <TagChrome />
+            </div>
+            <span class="tag-title">
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="isFixedTag(item) ? false : index !== 0"
+              class="chrome-close-btn"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline icon="ri:close-fill" />
+            </span>
+            <span class="chrome-tab-divider" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <span v-show="isShowArrow" class="arrow-right">
+      <IconifyIconOffline icon="ri:arrow-right-s-line" @click="handleScroll(-200)" />
+    </span>
+    <!-- 右键菜单按钮 -->
+    <transition name="el-zoom-in-top">
+      <ul
+        v-show="visible"
+        ref="contextmenuRef"
+        :key="Math.random()"
+        :style="getContextMenuStyle"
+        class="contextmenu"
+      >
+        <div
+          v-for="(item, key) in tagsViews.slice(0, 6)"
+          :key="key"
+          style="display: flex; align-items: center"
+        >
+          <li v-if="item.show" @click="selectTag(key, item)">
+            <IconifyIconOffline :icon="item.icon" />
+            {{ $t(item.text) }}
+          </li>
+        </div>
+      </ul>
+    </transition>
+    <!-- 右侧功能按钮 -->
+    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
+      <span class="arrow-down">
+        <IconifyIconOffline icon="ri:arrow-down-s-line" class="dark:text-white" />
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="(item, key) in tagsViews"
+            :key="key"
+            :command="{ key, item }"
+            :divided="item.divided"
+            :disabled="item.disabled"
+          >
+            <IconifyIconOffline :icon="item.icon" />
+            {{ $t(item.text) }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import url('./index.scss');
+</style>

package/src/layout/frameView.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-06-19 09:14:18
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-10-10 10:05:25
+ * @FilePath: /sitzone-mes/src/layout/frameView.vue
+ * @Description: frameView 页面
+-->
+<template>
+  <div v-spinning="loading" class="frame">
+    <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import { ref, unref, onMounted, nextTick } from 'vue';
+
+const loading = ref(false);
+const currentRoute = useRoute();
+const frameSrc = ref<string>('');
+const frameRef = ref<HTMLElement | null>(null);
+
+if (unref(currentRoute.meta)?.frameSrc) {
+  frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
+}
+
+function hideLoading() {
+  loading.value = false;
+}
+
+function init() {
+  nextTick(() => {
+    const iframe = unref(frameRef);
+    if (!iframe) return;
+    const _frame = iframe as any;
+    if (_frame.attachEvent) {
+      _frame.attachEvent('onload', () => {
+        hideLoading();
+      });
+    } else {
+      iframe.onload = () => {
+        hideLoading();
+      };
+    }
+  });
+}
+
+onMounted(() => {
+  loading.value = true;
+  init();
+});
+</script>
+
+<style lang="scss" scoped>
+.frame {
+  z-index: 998;
+  height: 100vh;
+
+  .frame-iframe {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: 0;
+  }
+}
+
+.main-content {
+  margin: 0 !important;
+}
+</style>