@ganwei-web/ganwei-pc-cli 6.2.6 → 6.2.7

package/ganwei-iotcenter-index-6.2.3/packages/ganwei-iotcenter-index/src/components/layouts/Sidebar/LeftContent/index.vue

@@ -0,0 +1,643 @@
+<template>
+  <div
+    :class="{ 'noIsCollapse': true, [$style.isCollapse]: isCollapse, [$style.noIsCollapse]: !isCollapse, [$style.transition]: transition }">
+    <!-- 全量菜单 -->
+    <div
+      :class="[$style.maxW, $style.maxActive, { [$style.transition]: transition, [$style.showOrganizationalStructure]: showOrganizationalStructure }]"
+      id="menuRef">
+
+      <div :class="$style.asideHeader">
+        <div :class="$style.asideHeaderBox">
+          <a style="cursor: pointer" @click="logoJump()">
+            <img :src="theme.logo" :class="$style.headerTopImg" alt="" v-if="theme.logo" @error="showImg" />
+          </a>
+        </div>
+      </div>
+
+      <div :class="$style.organizationalStructure" v-if="showOrganizationalStructure" :title="organizationName">
+        {{ organizationName }}
+      </div>
+
+      <div :class="$style.leftNav" @click.stop>
+        <el-row :class="$style.list">
+          <div :class="$style.max">
+            <el-input v-model="menuSearch" @keyup.enter="searchMenu"
+              :placeholder="$t('login.framePro.tips.inputMenuName')" clearable>
+              <template #prefix>
+                <i class="iconfont icon-sousuoL"></i>
+              </template>
+            </el-input>
+            <!-- UL -->
+            <el-menu ref="menuRef" :router="false" :default-active="menuActive" :collapse="false"
+              :collapse-transition="false" unique-opened popper-class="newMenu newMenuMaxActive"
+              v-loading="props.loading">
+              <AsideMenu :isCollapse="isCollapse" v-for="item in renderMenu" :data="item" :key="item.resourceId">
+              </AsideMenu>
+            </el-menu>
+          </div>
+        </el-row>
+        <div :class="$style.fold">
+          <div @click.stop.prevent="onAsideListShow()">
+            <el-button>
+              <i
+                :class="isCollapse ? 'iconfont icon-caidan_zhankai cacelmargin' : 'iconfont icon-caidan_zhankai isopen'"></i>
+            </el-button>
+            <span>{{ $t('login.menuJson.closeNavigationBar') }}</span>
+          </div>
+        </div>
+      </div>
+
+      <widthSetting custom @resizeEnd="resizeEnd" v-if="!isCollapse" leftSide="menuRef" rightSide="contentRef">
+      </widthSetting>
+    </div>
+
+    <!-- 缩放菜单 -->
+    <div :class="[$style.maxW, $style.minActive, { [$style.transition]: transition }]" class="minActive">
+      <div :class="$style.topIndexHeader"></div>
+      <div :class="$style.minActiveContent">
+        <div :class="$style.asideHeader">
+          <div :class="$style.asideHeaderBox">
+            <a style="cursor: pointer">
+              <img :class="$style.minImg" :src="config.img.indexSmallImg" alt />
+            </a>
+          </div>
+        </div>
+        <div :class="$style.leftNav" @click.stop>
+          <el-row :class="$style.list">
+            <div :class="$style.max">
+              <el-menu ref="menuRef" :router="false" :default-active="menuActive" :collapse="true"
+                :collapse-transition="false" unique-opened popper-class="newMenu newMenuMinActive" teleported="false">
+                <ContractMenu :isCollapse="isCollapse" v-for="item in renderMenu" :data="item" :key="item.resourceId">
+                </ContractMenu>
+              </el-menu>
+            </div>
+          </el-row>
+          <div :class="$style.fold">
+            <div @click.stop.prevent="onAsideListShow()">
+              <el-button>
+                <i
+                  :class="isCollapse ? 'iconfont icon-caidan_zhankai cacelmargin' : 'iconfont icon-caidan_zhankai isopen'"></i>
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, getCurrentInstance, inject, nextTick, ref, toRaw, watch } from 'vue'
+import { useRouter } from 'vue-router'
+// Components
+const AsideMenu = defineAsyncComponent(() => import('@/components/layouts/Navigation/AsideMenu.vue'))
+const ContractMenu = defineAsyncComponent(() => import('@/components/layouts/Navigation/ContractMenu.vue'))
+const widthSetting = defineAsyncComponent(() => import('@ganwei-web/gw-base-components-plus/widthSetting/dist/index.es.js'))
+
+/**
+ * 菜单数据类型定义
+ */
+interface MenuData {
+  resourceId: string | number
+  name: string
+  route?: string
+  icon?: string
+  backgroundColor?: string
+  menuOwner: number
+  nodeType: number
+  level: number
+  children?: MenuData[]
+}
+
+interface Props {
+  allMenus: MenuData[]
+  loading?: boolean
+  navTopActive?: number | string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allMenus: () => [],
+  loading: false,
+  navTopActive: -1
+})
+
+const emit = defineEmits<{
+  (e: 'update:navTopActive', value: number | string): void
+}>()
+
+// Inject
+const config = inject('config')
+const theme = inject('theme')
+
+// State
+const menuSearch = ref<string>('')
+const isCollapse = ref<boolean>(false)
+const transition = ref<boolean>(false)
+const renderMenu = ref<MenuData[]>([])
+const menus = ref<MenuData[]>([])
+const showOrganizationalStructure = ref<boolean>(config.value.showOrganization)
+const organizationName = ref<string>('')
+const router = useRouter()
+const menuActive = ref<string>(router.currentRoute.value.fullPath)
+const menuRef = ref()
+const { appContext: { config: { globalProperties } } } = getCurrentInstance()
+
+// Event listeners
+globalProperties.$bus.on('organizationName', (value: string) => {
+  organizationName.value = value
+})
+
+globalProperties.$bus.on('jumpUrl', (route: string) => {
+  jump(route)
+})
+
+// Methods
+const initMenu = () => {
+  menuSearch.value = ''
+  if (!config.value.showTopNav) {
+    menus.value = structuredClone(props.allMenus)
+  } else if (props.navTopActive != -1) {
+    if (props.allMenus?.[Number(props.navTopActive)]?.children) {
+      menus.value = toRaw([...props.allMenus[Number(props.navTopActive)].children])
+    } else {
+      menus.value = []
+    }
+  }
+  renderMenu.value = JSON.parse(JSON.stringify(menus.value))
+
+  jumpMenu()
+}
+
+const jumpMenu = () => {
+  let route = decodeURIComponent(router.currentRoute.value.fullPath)
+  if (route.toLowerCase() == '/index') {
+    if (renderMenu.value.length) {
+      jumpFirstMenu()
+    } else if (props.navTopActive != -1) {
+      const { nodeType, route: menuRoute, name } = props.allMenus[Number(props.navTopActive)] || {}
+      if (nodeType == 2) {
+        jump(menuRoute, name)
+      }
+    }
+  } else {
+
+    let navTopItem = props.allMenus?.[Number(props.navTopActive)]
+    if (navTopItem && navTopItem.nodeType == 2) {
+
+      const { route: menuRoute, name } = navTopItem || {}
+      jump(menuRoute, name)
+    }
+  }
+}
+
+const jumpFirstMenu = () => {
+  let firstMenu = getFirstMenu(renderMenu.value)
+  const { route: menuRoute, name } = firstMenu
+  jump(menuRoute, name)
+}
+
+const jump = (route?: string, name?: string) => {
+  if (!route) {
+    return
+  }
+  nextTick(() => {
+    if (route.includes('http') && route.includes('target=_blank')) {
+      let jumpUrl = route.replace(/\??target=_blank/, '')
+      window.open(jumpUrl)
+    } else {
+      router.push(route)
+    }
+  })
+}
+
+const getFirstMenu = (menuList: MenuData[]): MenuData => {
+  let firstMenu: any = {}
+  if (menuList) {
+    for (let item of menuList) {
+      if (item.nodeType == 2 && item.route) {
+        firstMenu.route = item.route
+        firstMenu.name = item.name
+        break
+      } else if (item.children) {
+        firstMenu = getFirstMenu(item.children)
+        if (firstMenu.route && firstMenu.name) { break }
+      }
+    }
+  }
+  return firstMenu
+}
+
+const searchMenu = () => {
+  renderMenu.value = findMenu(menuSearch.value, toRaw(menus.value))
+}
+
+const onAsideListShow = () => {
+  if (transition.value) {
+    return
+  }
+  transition.value = true
+  isCollapse.value = !isCollapse.value
+  setTimeout(() => {
+    transition.value = false
+  }, 600)
+}
+
+const findMenu = (value: string, arr: MenuData[]): MenuData[] => {
+  let newarr: MenuData[] = []
+  arr.forEach(element => {
+    if (element.name.toLowerCase().indexOf(String(value).toLowerCase()) > -1) {
+      newarr.push(element)
+    } else {
+      if (element.children && element.children.length > 0) {
+        let redata = findMenu(value, element.children || [])
+        if (redata && redata.length > 0) {
+          let obj = {
+            ...element,
+            children: redata
+          }
+          newarr.push(obj)
+        }
+      }
+    }
+  })
+  return newarr
+}
+
+const logoJump = () => {
+  let logoJumpPath = config?.value?.logoJumpPath?.url
+  if (logoJumpPath) {
+    jump(logoJumpPath)
+  }
+}
+
+// 左侧菜单选中重点
+const setActiveMenu = () => {
+  let route = decodeURIComponent(router.currentRoute.value.fullPath)
+  //  todo 特殊输入路径携带参数，回显会有异常，需要显示标志是否移除参数进行比对，比如单点登录
+
+  if (route.indexOf('?') != -1 && route.indexOf('removeParams=true') != -1) {
+    route = route.split('?')[0]
+  }
+  if (route.toLowerCase() != '/index') {
+    menuActive.value = route
+  }
+}
+
+const resizeEnd = () => {
+  globalProperties.$bus.emit('topResize')
+}
+
+const showImg = () => {
+  if (process.env.NODE_ENV === "development") {
+    theme.value.logo = `/static/images/${localStorage.theme == 'dark' ? 'index-logo-src' : 'index-logo-src-light'}.svg`
+  }
+}
+
+// Watchers
+watch(() => props.navTopActive, (newVal, oldVal) => {
+  initMenu()
+}, { immediate: true, deep: true })
+
+watch(() => props.allMenus, (newVal, oldVal) => {
+  initMenu()
+  nextTick(() => {
+    setActiveMenu()
+  })
+}, { immediate: true })
+
+watch(menuSearch, (val) => {
+  if (!val) {
+    searchMenu()
+  }
+})
+
+watch(() => router.currentRoute.value.fullPath, () => {
+  setActiveMenu()
+}, { immediate: true })
+
+globalProperties.$bus.on('navTopSelectChange', () => {
+  jumpFirstMenu()
+})
+</script>
+
+<style module lang="scss">
+.isCollapse {
+  margin-right: 0;
+}
+
+.noIsCollapse {
+  margin-right: calc(var(--result) * 1px);
+  transition: all 0.5s ease-in-out;
+  position: relative;
+  z-index: 99;
+}
+
+.transition {
+  transition: all 0.5s ease-in-out;
+}
+
+.maxW {
+  user-select: none;
+  height: 100%;
+  background-color: var(--frame-left-background);
+}
+
+.maxActive {
+  width: 220px;
+  height: 100%;
+  left: 0px;
+  position: fixed;
+  z-index: 100;
+  box-shadow: 0px 4px 14px 0px var(--menu-popup-boxshadow), 1px 0px 0px 0px var(--menu-popup-boxshadow-1);
+}
+
+.minActive {
+  width: 64px;
+  position: relative;
+  box-shadow: 0px 4px 14px 0px var(--menu-popup-boxshadow), 1px 0px 0px 0px var(--menu-popup-boxshadow-1);
+}
+
+.topIndexHeader {
+  // 样式保留
+}
+
+.minActiveContent {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: -64px;
+}
+
+.asideHeader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.asideHeaderBox {
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+  height: 100%;
+  overflow: hidden;
+}
+
+.headerTopImg {
+  height: 44px;
+  margin-top: 25px;
+}
+
+.minImg {
+  width: 80%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.organizationalStructure {
+  padding-top: 20px;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 16px;
+  height: 36px;
+  width: 100%;
+  color: var(--menu-color);
+}
+
+.showOrganizationalStructure {
+  .leftNav {
+    height: calc(100% - 100px) !important;
+  }
+}
+
+.leftNav {
+  width: 100%;
+  height: calc(100% - 69px);
+}
+
+.list {
+  width: 100%;
+  height: calc(100% - 44px);
+}
+
+.max {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding-top: 34px;
+
+  :global(.el-loading-mask) {
+    visibility: visible;
+  }
+
+  :global(.el-input) {
+    width: calc(100% - 30px);
+    text-indent: 0;
+    margin-left: 20px;
+    margin-bottom: 15px;
+    font-size: 14px !important;
+
+    .icon-sousuoL {
+      color: var(--gw-color-primary);
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    :global(.el-input__wrapper) {
+      height: 32px;
+      background: var(--input-background);
+      box-shadow: 0 0 0 0px;
+      border-radius: 16px;
+    }
+  }
+
+  :global(.el-menu) {
+    width: calc(100% + 8px);
+    height: calc(100% - 47px);
+    padding: 0 20px 20px 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+  }
+}
+
+.fold {
+  width: 100%;
+  height: 44px;
+
+  >div {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    height: 100%;
+    font-size: 14px;
+    cursor: pointer;
+    margin: 0px 20px;
+    border-top: 1px solid var(--frame-main-border);
+
+    span {
+      color: var(--menu-color);
+    }
+
+    i {
+      font-size: 14px;
+      margin-right: 16px;
+      color: var(--menu-color);
+    }
+
+    i.cacelmargin {
+      margin-left: 4px !important;
+      margin-right: 0px !important;
+    }
+
+    button {
+      border: 0;
+      padding: 0;
+      background-color: transparent !important;
+    }
+
+    :global(.el-button--default) {
+      padding: 0;
+      border: none !important;
+    }
+  }
+}
+
+.isCollapse {
+  .maxActive {
+    left: calc(var(--left) * -1px) !important;
+  }
+
+  .minActiveContent {
+    left: 0px !important;
+  }
+}
+
+.noIsCollapse {
+  .maxActive {
+    left: 0px !important;
+  }
+
+  .minActiveContent {
+    left: -64px !important;
+  }
+}
+</style>
+
+<style lang="scss">
+// 全局样式
+[data-theme="green"] .el-container {
+  #menuRef {
+    background: url(/static/images/menu-background.png) no-repeat center center/100% 100%, var(--frame-left-background);
+  }
+
+  .maxActive {
+    box-shadow: none !important;
+  }
+}
+
+.el-menu--vertical {
+  position: relative;
+}
+
+.el-menu>.el-menu-item {
+  background-color: transparent;
+  border-right: none;
+  padding: 0 !important;
+  cursor: pointer;
+
+  i,
+  label {
+    color: var(--menu-color);
+    cursor: pointer;
+  }
+}
+
+.el-menu>.el-menu-item:hover,
+.el-menu>.el-menu-item.is-active {
+
+  i,
+  label {
+    color: var(--menu-color__active) !important;
+  }
+}
+
+// 在 LeftContent/index.vue 中修改 .el-menu>.el-sub-menu 样式块
+.el-menu>.el-sub-menu {
+  background-color: transparent;
+  border-right: none;
+  padding: 0 !important;
+
+  .el-menu--inline {
+    background-color: transparent;
+    border-right: none;
+    padding: 0 !important;
+    overflow: hidden;
+    // 移除 padding-left: 40px !important;
+    // 改为使用 AsideMenu 组件内部的动态缩进
+  }
+}
+
+.minActive {
+  .minActiveContent {
+    :deep .el-menu {
+
+      .el-sub-menu,
+      .el-menu-item {
+        display: flex;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .el-sub-menu__title,
+      .el-menu-item {
+        padding: 0px !important;
+      }
+
+      .el-sub-menu__title {
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+
+      .el-menu-item {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.newMenuMaxActive {
+  left: 236px !important;
+
+  .el-menu--popup {
+    min-width: auto !important;
+  }
+}
+
+.el-popper.newMenuMinActive {
+  left: 75px !important;
+  backdrop-filter: blur(7px);
+  background: transparent !important;
+
+  .el-menu--popup {
+    box-shadow: none;
+  }
+}
+
+.newMenu {
+  max-width: 597px;
+  max-height: 600px;
+  background: var(--menu-popup-background) !important;
+  box-shadow: 0px 4px 14px 0px var(--menu-popup-boxshadow);
+  border-radius: 10px;
+  backdrop-filter: blur(6px);
+
+  .el-menu--vertical {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+</style>

package/ganwei-iotcenter-index-6.2.3/packages/ganwei-iotcenter-index/src/components/noAccess/noPage.vue

@@ -0,0 +1,68 @@
+
+<template>
+    <div class="noPage noPageTips" :data-noData="$t('login.noAccess.noPage')">
+        <div>
+            <p>{{ $t('login.noAccess.noPage') }}</p>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            msg: ''
+        }
+    },
+    mounted () {
+        this.msg = this.$t('login.noAccess.noPage');
+    }
+}
+</script>
+<style scoped>
+.noPage {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    color: white;
+}
+
+.noPageTips>div {
+    width: 380px;
+    height: 380px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
+    background-image: url(/static/images/index-nopage-dark.png);
+}
+
+.noPageTips>div p {
+    font-size: 14px;
+    position: absolute;
+    width: 100%;
+    bottom: -24px;
+    left: 0;
+    text-align: center;
+    margin-left: 10px;
+    color: var(--frame-main-color);
+}
+
+[data-theme="dark"] .noPageTips>div {
+    background-image: url(/static/images/index-nopage-dark.png);
+}
+
+[data-theme="dark"] .noPageTips>div p {
+    color: #818EA9;
+}
+
+[data-theme="light"] .noPageTips>div {
+    background-image: url(/static/images/index-nopage-light.png);
+}
+
+[data-theme="light"] .noPageTips>div p {
+    color: #818EA9;
+}
+</style>