adspecs 0.1.12

package/references/front-demo/src/views/layout/components/Navbar/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="gs-navbar animated">
+    <!-- logo -->
+    <div class="logo-sidebar">
+      <div class="logo-container">
+        <router-link to="/home">
+          <img class="sie-logo" :src="logoUri" alt />
+        </router-link>
+      </div>
+    </div>
+
+    <!-- 顶部菜单导航 -->
+    <navbar-menu v-if="$store.getters.layoutConfig === 'compact'" />
+
+    <!-- 顶部各类操作按钮 -->
+    <div class="top-info">
+      <template v-if="$store.getters.layoutConfig === 'default'">
+        <!-- 租户切换 -->
+        <tenant-change />
+        <!-- 系统切换 -->
+        <system-change />
+        <!-- 返回门户页 -->
+        <portal />
+        <!-- 信息 -->
+        <message />
+        <!-- 主题皮肤 -->
+        <theme v-if="!$store.state.theme.hideThemeControl" />
+        <!-- 语言切换 -->
+        <locale />
+        <gpt v-if="isShowGpt" />
+        <!-- 重置演示数据（仅 Mock 模式） -->
+        <div v-if="isMockMode" class="mock-reset-btn" @click="handleResetMockData">
+          <el-icon><RefreshRight /></el-icon>
+          <span>重置数据</span>
+        </div>
+        <!-- 帮助中心 -->
+        <!-- <help v-if="showHelp && isShowGpt" /> -->
+      </template>
+      <!-- 个人中心 -->
+      <personal />
+    </div>
+  </div>
+</template>
+
+<script>
+// vuex
+import { mapState } from '@/store/piniaToVuex'
+import { RefreshRight } from '@element-plus/icons-vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { isMockEnabled, resetAllMockData } from '@/mock'
+import SystemChange from './components/SystemChange'
+import Portal from './components/Portal'
+import Message from './components/Message'
+import Theme from './components/Theme'
+import Locale from './components/Locale'
+// import Help from './components/Help'
+import gpt from './components/Gpt'
+import Personal from './components/Personal'
+import TenantChange from './components/TenantChange'
+import NavbarMenu from '@/views/layout/components/Navbar/components/NavbarMenu'
+
+export default {
+  data() {
+    return {
+      navbarFixed: false
+    }
+  },
+  components: {
+    // Help,
+    Theme,
+    Portal,
+    Locale,
+    Message,
+    Personal,
+    NavbarMenu,
+    SystemChange,
+    TenantChange,
+    gpt,
+    RefreshRight
+  },
+  computed: {
+    ...mapState({
+      // showHelp: state => state.user.help_and_BPM_info?.showHelp,
+      systemSetting: state => state.app.systemSetting
+    }),
+    isMockMode() {
+      return isMockEnabled()
+    },
+    isShowGpt() {
+      return window.VUE_GS_CHATGPT
+    },
+    logoUri() {
+      let uri = ''
+      if (this.systemSetting) {
+        uri = JSON.parse(this.systemSetting).systemLogo
+      }
+      return uri
+    }
+  },
+  methods: {
+    handleResetMockData() {
+      ElMessageBox.confirm('确认重置所有演示数据？页面将刷新', '重置演示数据', {
+        confirmButtonText: '确认重置',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        resetAllMockData()
+        window.location.reload()
+      }).catch(() => {})
+    }
+  },
+  watch: {
+    $route: {
+      deep: true,
+      handler(route) {
+        // 通过当前 $route.path 找到路由表中对应的菜单信息
+        const routeName = route.path.split('/')[1]
+        const activeMenuInfo = this.$store.getters.permission_routers.find(routeMenu => routeMenu.name === routeName)
+
+        if (activeMenuInfo) {
+          this.$store.commit('SET_ACTIVE_TOP_MENU_ID', activeMenuInfo.meta.menuId)
+        } else {
+          this.$store.commit('SET_ACTIVE_TOP_MENU_ID', null)
+        }
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gs-navbar {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 15px;
+  height: var(--size-normal-1);
+  line-height: var(--size-normal-1);
+  background: var(--el-color-primary);
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('https://cdn.sieiot.com/img/boostrap/nav_bar_bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    pointer-events: none;
+  }
+
+  .logo-sidebar {
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+
+    .logo-container {
+      display: inline-block;
+      text-align: center;
+
+      .sie-logo {
+        height: 48px;
+        vertical-align: middle;
+        border-style: none;
+      }
+    }
+  }
+
+  .top-info {
+    display: flex;
+    justify-content: flex-end;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      margin-left: 40px;
+      height: 100%;
+      cursor: pointer;
+    }
+
+    .mock-reset-btn {
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 4px;
+      padding: 4px 12px;
+      font-size: 12px;
+      color: #fff;
+      transition: background 0.2s;
+      span {
+        margin-left: 4px;
+      }
+      &:hover {
+        background: rgba(255, 255, 255, 0.25);
+      }
+    }
+    // 处理图标不居中
+    :deep(.el-tooltip__trigger) {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  &.animated {
+    -webkit-animation-duration: 0.1s;
+    animation-duration: 0.1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  &.isFixed {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1;
+  }
+}
+</style>

package/references/front-demo/src/views/layout/components/Sidebar/components/CustomSliderMenu.vue

@@ -0,0 +1,267 @@
+<template>
+  <a-menu-item class="custom-menu-warp" :key="routes.path" v-if="routes.children && routes.children.length">
+    <el-popover placement="right-start" :width="popoverWidth" popper-class="slider-custom-container" trigger="hover">
+      <!--一级路由-->
+      <template #reference>
+        <div class="custom-menu">
+          <gs-icon-dialog v-if="routes.meta.icon" :icon-code="routes.meta.icon" class-name="svg-icon" />
+          <span :class="{ 'title-active': setRouteActive(routes, true) }" class="ant-menu-item">{{ menuTitle(routes) }}</span>
+          <!--右边箭头样式-->
+          <span class="ant-menu-submenu-vertical">
+            <span class="ant-menu-submenu-title">
+              <i class="ant-menu-submenu-arrow"></i>
+            </span>
+          </span>
+        </div>
+      </template>
+      <!--二级路由-->
+      <el-container class="popover-main" ref="popoverBox" :style="popoverStyle">
+        <el-main style="padding: 10px 20px 10px 0">
+          <el-collapse v-model="activeNames">
+            <el-collapse-item v-for="item in routes.children" :key="item.path" :class="item.children ? '' : 'no-child'" :name="item.path">
+              <template #title>
+                <!--有二级路由-->
+                <div
+                  class="custom-title custom-title-child"
+                  :class="{ 'title-active': setRouteActive(item) }"
+                  v-if="item.children && item.children.length"
+                >
+                  <gs-icon-dialog v-if="item.meta.icon" :icon-code="item.meta.icon" class-name="svg-icon" />
+                  <span>{{ menuTitle(item) }}</span>
+                </div>
+                <!--没有第三级路由-->
+                <div class="custom-title" :class="{ 'title-active': setRouteActive(item) }" v-else @click.stop="handlerRouteJump(item)">
+                  <gs-icon-dialog v-if="item.meta.icon" :icon-code="item.meta.icon" class-name="svg-icon" />
+                  <span class="com-menu-title">{{ menuTitle(item) }}</span>
+                </div>
+              </template>
+              <!--三级路由-->
+              <div class="three-muenu-box">
+                <div
+                  class="three-menu-item"
+                  v-for="three in item.children"
+                  @click="handlerRouteJump(three)"
+                  :class="{ 'title-active': setRouteActive(three) }"
+                  :key="three.path"
+                >
+                  <gs-icon-dialog v-if="three.meta.icon" :icon-code="three.meta.icon" class-name="svg-icon" />
+                  <span class="com-menu-title">{{ menuTitle(three) }}</span>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-main>
+      </el-container>
+    </el-popover>
+  </a-menu-item>
+</template>
+
+<script>
+import { formatDynamicFormPath } from '@/views/layout/utils/dynamicFormHelper'
+
+export default {
+  name: 'CustomSliderMenu',
+  props: {
+    routes: []
+  },
+  data() {
+    return {
+      activeNames: [],
+      popoverWidth: 220
+    }
+  },
+  computed: {
+    popoverStyle() {
+      const that = this
+      if (!this.routes?.children.length) return {}
+      const bool = this.routes.children.find(item => {
+        if (item.children && item.children.length) return true
+      })
+      if (bool) {
+        that.popoverWidth = 530
+        return {
+          //width: '500px',
+          //boxShadow: '0 2px 12px 0 rgba(0,0,0,.1) !important'
+        }
+      }
+      return {}
+    }
+  },
+  watch: {
+    routes: {
+      handler(val) {
+        if (val && val.children) {
+          this.activeNames = []
+          val.children.map(item => {
+            if (item.children && item.children.length) {
+              this.activeNames.push(item.path)
+            }
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 菜单多语言转化
+    menuTitle(route = this.route) {
+      try {
+        const menuLanguageObject = JSON.parse(route.menuEnName)
+        if (typeof menuLanguageObject === 'object') {
+          return menuLanguageObject[this.$i18n.locale] || route.menuName || 'no-name'
+        } else {
+          return route.menuEnName || 'no-name'
+        }
+      } catch (err) {
+        return this.$i18n.locale === 'en-us' ? route.menuEnName : route.menuName || 'no-name'
+      }
+    },
+    // 路由跳转
+    handlerRouteJump(threeRoute) {
+      const { path: $path } = this.$route
+      this.$emit('currentOpenKey', threeRoute.meta.menuId)
+      // 点击的触发时间，埋点有用。
+      sessionStorage.setTrackTime = new Date().getTime()
+      const route = formatDynamicFormPath(threeRoute)
+      /**
+       * 获取当前路由地址
+       * 即将跳转的路由地址
+       * 判断如果相同直接return跳出
+       */
+      if ($path === route) return
+      this.$router.push(route)
+    },
+    // 设置激活的样式
+    setRouteActive(route, bool) {
+      const path = formatDynamicFormPath(route)
+      if (this.$route.path === path || (bool && this.$route.path.includes(path))) {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.slider-custom-container,
+.popover-main {
+  padding: 0 0 0 10px !important;
+  //box-shadow: none !important;
+}
+</style>
+<style scoped lang="scss">
+.custom-menu-warp {
+  color: var(--el-color-primary-light-4);
+  :hover {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+.custom-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 0 20px;
+  height: 44px;
+  .ant-menu-item {
+    padding: 0;
+    flex: 1;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+    margin: 5px 0 0 0 !important;
+    color: var(--color-text-main);
+    width: 64%;
+    white-space: nowrap;
+    :global(.ant-menu-item:hover) {
+      background-color: transparent !important;
+    }
+    // :global(.ant-menu-item:hover){
+    //   background-color: transparent !important;
+    // }
+    :global(.ant-menu-vertical .ant-menu-submenu-title) {
+      margin-block: 0;
+      :hover {
+        background-color: transparent !important;
+      }
+    }
+  }
+  .ant-menu-submenu-arrow {
+    margin-top: 3px;
+    &::before,
+    &::after {
+      background: var(--color-text-icon-base) !important;
+    }
+  }
+}
+.custom-title {
+  width: 100% !important;
+  display: flex;
+  :deep(.svg-icon) {
+    margin-right: 10px;
+    //color: var(--color-primary-light-4);
+  }
+}
+.custom-title-child {
+  span {
+    opacity: 0.5;
+    font-size: 15px;
+  }
+}
+.popover-main {
+  max-height: 95vh;
+  overflow: auto;
+  ::v-deep {
+    padding: 0;
+    .el-collapse-item__content {
+      padding-bottom: 10px;
+    }
+  }
+  :deep(.el-collapse-item__header) {
+    font-size: 13px;
+    height: 48px;
+    line-height: 47px;
+  }
+}
+.three-muenu-box {
+  border-top: 1px dashed #d1d1d1;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px 0 0 0;
+  .three-menu-item {
+    display: flex;
+    align-items: flex-end;
+    width: 33.3%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 13px;
+    margin: 5px 0;
+    span {
+      cursor: pointer;
+      margin-left: 10px;
+    }
+  }
+}
+.no-child {
+  :deep(.el-icon-arrow-right) {
+    display: none !important;
+  }
+}
+.com-menu-title {
+  text-align: left;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.title-active {
+  color: var(--el-color-primary) !important;
+  opacity: 1 !important;
+}
+// hover 高亮样式
+.three-menu-item,
+.com-menu-title {
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+</style>

package/references/front-demo/src/views/layout/components/Sidebar/components/FetchMenuItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-menu-item
+    :key="item.menuFetchId"
+    @click="jumpTo"
+    v-bind="$props"
+    v-on="$listeners"
+  >
+    <div class="amenu-title top-menu-item">
+      <span class="menu-title">{{ item.fetchItemName }}</span>
+    </div>
+  </a-menu-item>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { Menu } from 'ant-design-vue'
+
+export default defineComponent({
+  name: 'FetchMenuItem',
+  components: {
+    'a-menu-item': Menu.Item
+  },
+  props: {
+    ...Menu.Item.props,
+    item: {
+      type: Object,
+      default: () =>({})
+    },
+    routePath: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    jumpTo() {
+      const fetchExpand = this.item.fetchExpand ? JSON.parse(this.item.fetchExpand) : {}
+      this.$router.push(this.routePath, fetchExpand)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/references/front-demo/src/views/layout/components/Sidebar/components/MenuItem.vue

@@ -0,0 +1,135 @@
+<template>
+  <a-menu-item v-bind="$props" :key="route.path" @click="jumpTo" style="width: 100%;margin: 4px 0;">
+    <div class="amenu-title top-menu-item">
+      <gs-icon-dialog v-if="route.meta.icon" style="width: 30px;" :icon-code="route.meta.icon" class-name="svg-icon"
+        class="menu-icon-size" />
+      <el-tooltip class="item" effect="dark" :content="menuTitle" placement="right"
+        :disabled="!isShowTooltip(menuTitle)">
+        <div class="sub-menu-badge badge-special">
+          <el-badge :value="cornerKeysNum[route.meta.key]" :max="99" :is-dot="isDot" :hidden="hiddenBadge">
+            <span class="menu-title" :style="setRouteActive(route, true)">
+              {{ menuTitle }}
+            </span>
+          </el-badge>
+        </div>
+      </el-tooltip>
+    </div>
+  </a-menu-item>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { Menu } from 'ant-design-vue'
+import { formatDynamicFormPath } from '@/views/layout/utils/dynamicFormHelper'
+// vuex
+import { mapGetters } from '@/store/piniaToVuex'
+
+export default defineComponent({
+  name: 'MenuItem',
+  components: {
+    'a-menu-item': Menu.Item
+  },
+  props: {
+    ...Menu.Item.props,
+    route: {
+      type: Object,
+      require: true
+    },
+    // 预留是否开启小红点
+    isDot: {
+      type: Boolean,
+      default: false
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(['cornerKeysNum']),
+    menuTitle() {
+      try {
+        const menuLanguageObject = JSON.parse(this.route.menuEnName)
+        if (typeof menuLanguageObject === 'object') {
+          return menuLanguageObject[this.$i18n.locale] || this.route.menuName || 'no-name'
+        } else {
+          return this.route.menuEnName || 'no-name'
+        }
+      } catch (err) {
+        return this.$i18n.locale === 'en-us' ? this.route.menuEnName : this.route.menuName || 'no-name'
+      }
+    },
+    hiddenBadge() {
+      if (this.cornerKeysNum[this.route.meta.key] == 0) {
+        return true
+      } else {
+        return !(this.route.meta.subscriptKey !== null && this.route.meta.subscriptStatus === 1)
+      }
+    }
+  },
+  methods: {
+    jumpTo() {
+      const { path: $path } = this.$route
+      const { path } = this.route
+      // 点击的触发时间，埋点有用。
+      // sessionStorage.setTrackTime = new Date().getTime()
+      const route = formatDynamicFormPath(this.route)
+      /**
+       * 获取当前路由地址
+       * 即将跳转的路由地址
+       * 判断如果相同直接return跳出
+       */
+      if ($path === path) return
+      this.$router.push(route)
+    },
+    // 设置激活的样式
+    setRouteActive(route, bool) {
+      const path = formatDynamicFormPath(route)
+      if (this.$route.path === path || bool && this.$route.path.includes(path)) {
+        return {
+          color: 'var(--el-color-primary) !important',
+          opacity: '1 !important'
+        }
+      }
+    },
+    // tooltip的显示
+    isShowTooltip(title) {
+      const span = document.createElement('span')
+      span.style.visibility = 'hidden'
+      span.style.whiteSpace = 'nowrap'
+      span.style.position = 'absolute'
+      span.style.top = '-9999px'
+      span.style.left = '-9999px'
+      span.style.fontSize = '14px' // 设置与标签一致的字体大小
+      span.innerText = title
+      document.body.appendChild(span) //将 <span> 元素添加到 document.body 中
+      const spanWidth = span.offsetWidth //获取 <span> 元素的宽度
+      document.body.removeChild(span) //将 <span> 元素从 document.body 中移除
+      return spanWidth > 112
+    },
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.ant-menu-item) {
+  padding-inline: 10px;
+}
+// .menu-title {
+//   height: 25px;
+//   line-height: 25px;
+//   max-width: 105px;
+// }
+.amenu-title .top-menu-item {
+  position: relative;
+}
+
+::v-deep .el-badge__content {
+  padding: 0 5px;
+}
+
+::v-deep .el-badge__content.is-fixed {
+  top: 10px;
+  right: -2px;
+}
+</style>