yh-pub 1.0.0 → 1.0.2

package/layout/main/main.less

@@ -1,81 +1,81 @@
-.main{
-  height: 100%;
-  display: flex;
-  .logo-con{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 50px;
-    box-sizing: border-box;
-    background-color: #0051C1;
-    .max-logo{
-      height: 44px;
-      width: auto;
-      display: block;
-      margin: 0 auto;
-    }
-    .mini-logo{
-      width: 44px;
-      height: auto;
-      display: block;
-      margin: 0 auto;
-    }
-  }
-  .header-con{
-    --header-size: 50px;
-    background: linear-gradient(90deg, #0051C1 0%, #3E93FE 100%);
-    width: 100%;
-    height: var(--header-size);
-    line-height: var(--header-size);
-    padding: 0 12px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: relative;
-    .class-collapsed{
-      position: absolute;
-      left: 0;
-      top: 9px;
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
-      text-align: center;
-      margin-right: 12px;
-      color: var(--el-color-white);
-      font-size: 26px;
-      cursor: pointer;
-    }
-  }
-  .main-layout-con{
-    flex: 1;
-    overflow: hidden;
-    background-color:#F3F5FA;
-    display: flex;
-    flex-direction: column;
-  }
-  .main-container{
-    flex: 1;
-    overflow: auto;
-    background-color: #fff;
-    padding: 0 10px 10px 10px;
-    box-sizing: border-box;
-  }
-  .left-sider{
-    width: 220px;
-    background-color: #21304C;
-    --el-menu-bg-color: #21304C;
-    --el-menu-text-color: var(--el-color-white);
-    --el-menu-active-color: var(--el-color-white);
-    --el-menu-hover-bg-color: transparent;
-    &.is-collapse {
-      width: 64px;
-    }
-  }
-  .right-container {
-    overflow: hidden;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-}
+.main{
+  height: 100%;
+  display: flex;
+  .logo-con{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    box-sizing: border-box;
+    background-color: #0051C1;
+    .max-logo{
+      height: 44px;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+    .mini-logo{
+      width: 44px;
+      height: auto;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+  .header-con{
+    --header-size: 50px;
+    background: linear-gradient(90deg, #0051C1 0%, #3E93FE 100%);
+    width: 100%;
+    height: var(--header-size);
+    line-height: var(--header-size);
+    padding: 0 12px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+    .class-collapsed{
+      position: absolute;
+      left: 0;
+      top: 9px;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      margin-right: 12px;
+      color: var(--el-color-white);
+      font-size: 26px;
+      cursor: pointer;
+    }
+  }
+  .main-layout-con{
+    flex: 1;
+    overflow: hidden;
+    background-color:#F3F5FA;
+    display: flex;
+    flex-direction: column;
+  }
+  .main-container{
+    flex: 1;
+    overflow: auto;
+    background-color: #fff;
+    padding: 0 10px 10px 10px;
+    box-sizing: border-box;
+  }
+  .left-sider{
+    width: 220px;
+    background-color: #21304C;
+    --el-menu-bg-color: #21304C;
+    --el-menu-text-color: var(--el-color-white);
+    --el-menu-active-color: var(--el-color-white);
+    --el-menu-hover-bg-color: transparent;
+    &.is-collapse {
+      width: 64px;
+    }
+  }
+  .right-container {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}

package/layout/main/main.vue

@@ -1,202 +1,254 @@
-<template>
-  <section class="main">
-    <aside
-      class="left-sider"
-      :class="{ 'is-collapse': collapse }">
-      <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
-      <div class="logo-con">
-        <template v-if="hasCustomLogo">
-          <img
-            v-show="!collapse"
-            class="max-logo"
-            :src="logo"
-            key="max-logo" />
-          <img
-            v-show="collapse"
-            class="mini-logo"
-            :src="minLogo"
-            key="min-logo" />
-        </template>
-        <template v-else>
-          <img
-            v-show="!collapse"
-            class="max-logo"
-            src="@/assets/images/logo.png"
-            key="max-logo" />
-          <img
-            v-show="collapse"
-            class="mini-logo"
-            src="@/assets/images/logo-min.png"
-            key="min-logo" />
-        </template>
-      </div>
-      <side-menu
-        :active-name="route?.name"
-        :collapse="collapse"
-        :menu-list="menuList"></side-menu>
-    </aside>
-    <section
-      class="right-container"
-      :class="{ 'is-collapse': collapse }">
-      <header class="header-con">
-        <i
-          :class="`iconfont class-collapsed ${collapse ? 'icon-indent' : 'icon-outdent'}`"
-          @click="handleCollapsedChange"></i>
-        <user
-          :message-unread-count="unreadCount"
-          :user-name="userName" />
-        <language v-if="config.useI18n" />
-        <!-- <error-store
-          v-if="config.plugin?.errorStore?.showInHeader"
-          :count="errorCount"></error-store>
-        <LogConsole></LogConsole> -->
-        <fullscreen v-model="isFullScreen" />
-      </header>
-      <main class="main-layout-con">
-        <tags-nav />
-        <section class="main-container">
-          <router-view v-slot="{ Component }">
-            <KeepAlive
-              :max="10"
-              ref="kpAliveRef">
-              <component
-                :is="Component"
-                :key="route.path" />
-            </KeepAlive>
-          </router-view>
-        </section>
-      </main>
-    </section>
-  </section>
-</template>
-
-<script setup>
-import "./main.less";
-import { ref, onMounted, onUnmounted, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { ElNotification } from "element-plus";
-import { getToken, getStorage } from "@/libs/util";
-import { markRead } from "@/api/user";
-import { useRouter, useRoute } from "vue-router";
-
-import config from "@/config";
-import { useAppStore } from "@/store/app.js";
-import { useUserStore } from "@/store/user.js";
-import SideMenu from "./components/side-menu/side-menu.vue";
-import TagsNav from "./components/tags-nav/tags-nav.vue";
-import User from "./components/user/user.vue";
-import Fullscreen from "./components/fullscreen/fullscreen.vue";
-import { Language } from "yh-i18n";
-
-const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
-
-const userStore = useUserStore();
-const appStore = useAppStore();
-const router = useRouter();
-const route = useRoute();
-const kpAliveRef = ref();
-
-const { menuList, errorCount, tagNavList } = storeToRefs(appStore);
-const { unreadCount } = storeToRefs(userStore);
-
-const hasCustomLogo = computed(() => {
-  return !!config.logo;
-});
-
-const logo = computed(() => {
-  return config.logo;
-});
-
-const minLogo = computed(() => {
-  return config.minLogo;
-});
-
-const userName = ref("");
-const collapse = ref(false);
-const unReadMessageMap = ref({});
-const websocketPath = baseUrl.replace("http", "ws") + "/webSocket";
-const isFullScreen = ref(false);
-let websocket = null;
-
-function handleCollapsedChange() {
-  collapse.value = !collapse.value;
-}
-
-function initWebsocket() {
-  let token = getToken();
-  if (typeof WebSocket === "undefined") {
-    ElMessage.info("您的浏览器不支持WebSocket");
-  } else if (token) {
-    try {
-      // 实例化websocket
-      websocket = new WebSocket(websocketPath + "?$_TOKEN=" + token);
-      // 监听websocket的连接
-      websocket.onopen = () => {
-        console.log("(" + websocketPath + ") websocket连接成功");
-      };
-      // 监听websocket的错误信息
-      websocket.onerror = () => {
-        console.log("(" + websocketPath + ") websocket连接错误");
-      };
-      // 监听websocket的消息
-      websocket.onmessage = (msg) => {
-        websocketGetMessage(msg);
-      };
-      // 监听websocket关闭
-      websocket.onclose = () => {
-        websocketClose();
-      };
-    } catch (e) {}
-  }
-}
-
-function websocketGetMessage(msg) {
-  let msgData = eval(msg.data);
-  if (msgData && msgData.length > 0) {
-    msgData.forEach((msg) => {
-      if (!unReadMessageMap.value[msg.ID]) {
-        unReadMessageMap.value[msg.ID] = msg;
-      }
-    });
-    Object.keys(unReadMessageMap.value).forEach((key) => {
-      let msg = unReadMessageMap.value[key];
-      if (!msg.hasOwnProperty("show")) {
-        ElNotification.open({
-          title: msg.TITLE,
-          desc: msg.TEXT,
-          duration: 0,
-          name: msg.ID,
-          onClose: () => {
-            delete unReadMessageMap.value[msg.ID];
-            markRead(msg.ID);
-          },
-        });
-        msg["show"] = true;
-      }
-    });
-  }
-}
-
-function websocketSendMessage(msg) {
-  websocket.send(msg);
-}
-
-function websocketClose() {
-  let that = this;
-  console.log("websocket关闭，尝试重新连接websocket");
-  window.setTimeout(() => {
-    that.initWebsocket();
-  }, 1000);
-}
-
-onMounted(async () => {
-  try {
-    userName.value = getStorage("userName");
-  } catch (error) {
-    console.error("菜单加载异常：", error);
-  }
-});
-onUnmounted(() => {
-  ElNotification.closeAll();
-});
-</script>
+<template>
+  <section class="main">
+    <aside
+      class="left-sider"
+      :class="{'is-collapse': collapse}">
+      <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
+      <div class="logo-con">
+        <template v-if="hasCustomLogo">
+          <img
+            v-show="!collapse"
+            class="max-logo"
+            :src="logo"
+            key="max-logo" />
+          <img
+            v-show="collapse"
+            class="mini-logo"
+            :src="minLogo"
+            key="min-logo" />
+        </template>
+        <template v-else>
+          <img
+            v-show="!collapse"
+            class="max-logo"
+            src="@/assets/images/logo.png"
+            key="max-logo" />
+          <img
+            v-show="collapse"
+            class="mini-logo"
+            src="@/assets/images/logo-min.png"
+            key="min-logo" />
+        </template>
+      </div>
+      <side-menu
+        :active-name="route?.name"
+        :collapse="collapse"
+        :menu-list="menuList"></side-menu>
+    </aside>
+    <section
+      class="right-container"
+      :class="{'is-collapse': collapse}">
+      <header class="header-con">
+        <i
+          :class="`iconfont class-collapsed ${collapse ? 'icon-indent' : 'icon-outdent'}`"
+          @click="handleCollapsedChange"></i>
+        <user
+          :message-unread-count="unreadCount"
+          :user-name="userName" />
+        <language v-if="config.useI18n" />
+        <!-- <error-store
+          v-if="config.plugin?.errorStore?.showInHeader"
+          :count="errorCount"></error-store>
+        <LogConsole></LogConsole> -->
+        <fullscreen v-model="isFullScreen" />
+      </header>
+      <main class="main-layout-con">
+        <tags-nav />
+        <section
+          class="main-container"
+          :class="{'is-iframe': isIframe}">
+          <router-view v-slot="{Component}">
+            <KeepAlive
+              :max="10"
+              ref="kpAliveRef">
+              <component
+                v-show="!isIframe"
+                :is="Component"
+                :key="route.path" />
+            </KeepAlive>
+            <iframe
+              v-show="item === route.params.url"
+              v-for="item in iframeList"
+              :src="item"
+              :key="item"
+              frameborder="0"
+              scrolling="auto"
+              style="background-color: #fff"></iframe>
+          </router-view>
+        </section>
+      </main>
+    </section>
+  </section>
+</template>
+
+<script setup>
+import './main.less';
+import {ref, onMounted, onUnmounted, computed, watch} from 'vue';
+import {storeToRefs} from 'pinia';
+import {ElNotification} from 'element-plus';
+import {getToken, getStorage} from '@/libs/util';
+import {markRead} from '@/api/user';
+import {useRouter, useRoute, onBeforeRouteUpdate} from 'vue-router';
+
+import config from '@/config';
+import {useAppStore} from '@/store/app.js';
+import {useUserStore} from '@/store/user.js';
+import SideMenu from './components/side-menu/side-menu.vue';
+import TagsNav from './components/tags-nav/tags-nav.vue';
+import User from './components/user/user.vue';
+import Fullscreen from './components/fullscreen/fullscreen.vue';
+import {Language} from 'yh-i18n';
+
+const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;
+
+const userStore = useUserStore();
+const appStore = useAppStore();
+const router = useRouter();
+const route = useRoute();
+const kpAliveRef = ref();
+
+const {menuList, errorCount, tagPaths} = storeToRefs(appStore);
+const {unreadCount} = storeToRefs(userStore);
+
+const hasCustomLogo = computed(() => {
+  return !!config.logo;
+});
+
+const logo = computed(() => {
+  return config.logo;
+});
+
+const minLogo = computed(() => {
+  return config.minLogo;
+});
+
+const isIframe = computed(() => {
+  return route.meta.isIframe;
+});
+
+const iframeList = ref([]);
+function pushIframe(url) {
+  if (!iframeList.value.includes(url)) {
+    iframeList.value.push(url);
+  }
+}
+onBeforeRouteUpdate((to, form, next) => {
+  if (to.meta.isIframe) {
+    pushIframe(to.params.url);
+  }
+  next();
+});
+watch(
+  () => tagPaths.value,
+  (newVal, oldVal) => {
+    let delPath = oldVal.filter((path) => !newVal.includes(path));
+    delPath.forEach((path) => {
+      iframeList.value = iframeList.value.filter((item) => item !== path);
+    });
+  }
+);
+
+const userName = ref('');
+const collapse = ref(false);
+const unReadMessageMap = ref({});
+const websocketPath = baseUrl.replace('http', 'ws') + '/webSocket';
+const isFullScreen = ref(false);
+let websocket = null;
+
+function handleCollapsedChange() {
+  collapse.value = !collapse.value;
+}
+
+function initWebsocket() {
+  let token = getToken();
+  if (typeof WebSocket === 'undefined') {
+    ElMessage.info('您的浏览器不支持WebSocket');
+  } else if (token) {
+    try {
+      // 实例化websocket
+      websocket = new WebSocket(websocketPath + '?$_TOKEN=' + token);
+      // 监听websocket的连接
+      websocket.onopen = () => {
+        console.log('(' + websocketPath + ') websocket连接成功');
+      };
+      // 监听websocket的错误信息
+      websocket.onerror = () => {
+        console.log('(' + websocketPath + ') websocket连接错误');
+      };
+      // 监听websocket的消息
+      websocket.onmessage = (msg) => {
+        websocketGetMessage(msg);
+      };
+      // 监听websocket关闭
+      websocket.onclose = () => {
+        websocketClose();
+      };
+    } catch (e) {}
+  }
+}
+
+function websocketGetMessage(msg) {
+  let msgData = eval(msg.data);
+  if (msgData && msgData.length > 0) {
+    msgData.forEach((msg) => {
+      if (!unReadMessageMap.value[msg.ID]) {
+        unReadMessageMap.value[msg.ID] = msg;
+      }
+    });
+    Object.keys(unReadMessageMap.value).forEach((key) => {
+      let msg = unReadMessageMap.value[key];
+      if (!msg.hasOwnProperty('show')) {
+        ElNotification.open({
+          title: msg.TITLE,
+          desc: msg.TEXT,
+          duration: 0,
+          name: msg.ID,
+          onClose: () => {
+            delete unReadMessageMap.value[msg.ID];
+            markRead(msg.ID);
+          },
+        });
+        msg['show'] = true;
+      }
+    });
+  }
+}
+
+function websocketSendMessage(msg) {
+  websocket.send(msg);
+}
+
+function websocketClose() {
+  let that = this;
+  console.log('websocket关闭，尝试重新连接websocket');
+  window.setTimeout(() => {
+    that.initWebsocket();
+  }, 1000);
+}
+
+onMounted(async () => {
+  try {
+    userName.value = getStorage('userName');
+    if (route.meta.isIframe) {
+      pushIframe(route.params.url);
+    }
+  } catch (error) {
+    console.error('菜单加载异常：', error);
+  }
+});
+onUnmounted(() => {
+  ElNotification.closeAll();
+});
+</script>
+
+<style lang="scss">
+.main-container.is-iframe {
+  padding: 0 !important;
+  box-sizing: border-box;
+  overflow: hidden;
+  > iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>