adspecs 0.1.12

package/references/web-ui/src/views/layout/components/Navbar/components/NavbarMenu.vue

@@ -0,0 +1,196 @@
+<template>
+  <section class="navbar-menu-container">
+    <div
+      v-show="!arrowHidden.left"
+      class="scroll-btn left"
+      @click="handleScrollMenu('left')"
+    >
+      <el-icon><el-icon-d-arrow-left /></el-icon>
+    </div>
+    <el-scrollbar
+      ref="scrollPane"
+      class="top-menu"
+      :vertical="false"
+      wrap-class="menu-scroll-wrap"
+      wrap-style="overflow-x: hidden;"
+      @wheel.prevent="handleScroll"
+    >
+      <div
+        v-for="menu in menuList"
+        :ref="getRefSetter('menuItem')"
+        :class="['menu-item', isActiveMenu(menu)]"
+        :key="menu.menu"
+        @click="handleSelectedMenu(menu)"
+      >
+        <!-- <gs-icon :icon="menu.menuIconurl" class="svg-icon" /> -->
+
+        <span>{{
+          $i18n.locale === 'zh-cn' ? menu.menuName : menu.menuEnName
+        }}</span>
+      </div>
+    </el-scrollbar>
+    <div
+      v-show="!arrowHidden.right"
+      class="scroll-btn right"
+      @click="handleScrollMenu('right')"
+    >
+      <el-icon><el-icon-d-arrow-right /></el-icon>
+    </div>
+  </section>
+</template>
+
+<script>
+import {
+  DArrowLeft as ElIconDArrowLeft,
+  DArrowRight as ElIconDArrowRight,
+} from '@element-plus/icons'
+import { handleScrollFromClick } from '@/views/layout/utils/scroll'
+
+export default {
+  components: {
+    ElIconDArrowLeft,
+    ElIconDArrowRight,
+  },
+
+  name: 'NavbarMenu',
+
+  data() {
+    return {
+      menuList: JSON.parse(localStorage.getItem('menuList')) || [],
+      // 菜单容器
+      // 外部容器
+      scrollPane: null,
+      // 滚动容器
+      scrollWrapper: null,
+      // 菜单项
+      menuItems: null,
+      // 左右箭头显示
+      arrowHidden: { left: true, right: true },
+    }
+  },
+
+  mounted() {
+    this.scrollPane = this.$refs.scrollPane.$el
+    this.scrollWrapper = this.$refs.scrollPane.wrapRef
+    this.menuItems = this.$arrRefs.menuItem
+    // 初始化的时候判断下右箭头是否需要显示
+    this.handleCalcRightArrowHidden()
+  },
+
+  methods: {
+    isActiveMenu(menu) {
+      return +this.$store.state.app.activeTopMenuId === +menu.menuId
+        ? 'active'
+        : ''
+      // const path = this.$route.path
+      // return path.split('/')[1] === menu.menuUrl ? 'active' : ''
+    },
+    // 通过计算容器宽度和滚动条距离判断是否显示右箭头
+    handleCalcRightArrowHidden() {
+      this.arrowHidden.right =
+        this.scrollWrapper?.scrollWidth - this.scrollWrapper?.offsetWidth <=
+        this.scrollWrapper?.scrollLeft
+    },
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      this.scrollWrapper.scrollLeft =
+        this.scrollWrapper.scrollLeft - eventDelta / 4
+      // 滚动滑轮时，判断是否到两端
+      this.arrowHidden.left = this.scrollWrapper.scrollLeft === 0
+      this.handleCalcRightArrowHidden()
+    },
+    handleSelectedMenu(menu) {
+      if (!menu.children || !menu.children.length) {
+        this.$router.push(menu.originalAddr || `/${menu.menuUrl}`)
+      }
+      this.$store.commit('SET_ACTIVE_TOP_MENU_ID', menu.menuId)
+    },
+    // 点击滚动菜单
+    async handleScrollMenu(direction) {
+      this.arrowHidden = await handleScrollFromClick(
+        // this.scrollWrapper,
+        this.$refs.scrollPane.wrapRef,
+        this.$refs.scrollPane.wrapRef.parentNode,
+        // this.scrollPane,
+        this.menuItems,
+        direction
+      )
+    },
+    getRefSetter(refKey) {
+      return (ref) => {
+        !this.$arrRefs && (this.$arrRefs = {})
+        !this.$arrRefs[refKey] && (this.$arrRefs[refKey] = [])
+        ref && this.$arrRefs[refKey].push(ref)
+      }
+    },
+  },
+
+  beforeUpdate() {
+    this.$arrRefs && (this.$arrRefs = {})
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar-menu-container {
+  // flex: 1;//
+  width: calc(100% - 350px);
+  position: relative;
+  margin-left: 40px;
+  padding: 0 30px;
+  color: var(--color-white);
+  .scroll-btn {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 30px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &.left {
+      left: 0;
+      text-align: left;
+    }
+
+    &.right {
+      right: 0;
+      text-align: right;
+    }
+  }
+
+  .top-menu {
+    flex: 1 1 auto;
+    height: var(--size-normal-1);
+    line-height: var(--size-normal-1);
+    font-size: 14px;
+    overflow: hidden;
+
+    :deep(.el-scrollbar__view) {
+      display: flex;
+      flex-wrap: nowrap;
+      height: 100%;
+
+      .menu-item {
+        flex: 0 0 auto;
+        padding: 0 12px;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.3s;
+
+        &.active {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        .svg-icon {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

package/references/web-ui/src/views/layout/components/Navbar/components/Personal.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="avatar-container">
+    <el-dropdown trigger="click" @command="handleCommand">
+      <div class="avatar-wrapper" style="color: #fff">
+        <img v-if="hasAvatar" :src="avatar" class="user-avatar" />
+        <div v-else class="headerImg">{{ headerImg }}</div>
+        <span style="padding: 5px; white-space: nowrap">{{ displayUserName }}</span>
+        <el-icon><el-icon-caret-bottom /></el-icon>
+      </div>
+      <template v-slot:dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item command="home">{{
+            $t('menu.home')
+          }}</el-dropdown-item>
+          <el-dropdown-item command="changePwd"
+            >{{ $t('otherLang.changePwd') }}
+          </el-dropdown-item>
+          <el-dropdown-item command="personal">{{
+            $t('otherLang.personalCenter')
+          }}</el-dropdown-item>
+          <el-dropdown-item command="defaultSystem">{{
+            $t('otherLang.defualtSystem')
+          }}</el-dropdown-item>
+          <el-dropdown-item command="logOut">{{
+            $t('otherLang.signOut')
+          }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <gs-dialog
+      v-model="pwdModal"
+      width="40%"
+      :title="$t('person.changePwd')"
+      @save="updatePwd"
+      @cancel="cancelHandle"
+      @closed="afterClose"
+    >
+      <el-form
+        ref="updatePwdModel"
+        v-loading="loading"
+        :model="updatePwdModel"
+        :label-width="$i18n.locale === 'zh-cn' ? '100px' : '180px'"
+        size="small"
+        :rules="updatePwdFormRules"
+      >
+        <el-form-item :label="$t('person.originalPwd')" prop="oldMagic">
+          <el-input v-model.trim="updatePwdModel.oldMagic" type="password" :placeholder="$t('person.originalPwdTip')" />
+        </el-form-item>
+        <el-form-item :label="$t('person.newPwd')" prop="magic">
+          <el-input v-model.trim="updatePwdModel.magic" type="password" :placeholder="$t('person.newPwdTip')" />
+        </el-form-item>
+        <el-form-item :label="$t('person.confirmPwd')" prop="confirmMagic">
+          <el-input v-model.trim="updatePwdModel.confirmMagic" type="password" :placeholder="$t('person.confirmPwdTip')" />
+        </el-form-item>
+        <el-form-item v-if="pwdInfo && pwdInfo.pwdTips">
+          <span class="tip-font"><i class="el-icon-warning"></i>{{ pwdInfo.pwdTips }}</span>
+        </el-form-item>
+      </el-form>
+    </gs-dialog>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '@/utils/events.ts'
+import _config from '@/config'
+import {
+  CaretBottom as ElIconCaretBottom
+} from '@element-plus/icons'
+// api
+import { setDefaultSystem } from '@/api/home'
+import { updateUserPsw, findPwdMsg } from '@/api/app'
+// utils
+import { encode } from '@/utils/base64'
+import { removeCookie, handleDomainLayout,getUserInfo, cookieGet } from '@/utils/auth'
+// vuex
+import { mapState } from '@/store/piniaToVuex'
+
+export default {
+  name: 'Personal',
+  data() {
+    return {
+      loading: false,
+
+      pwdModal: false,
+
+      updatePwdModel: {
+        oldMagic: '',
+        magic: '',
+        confirmMagic: ''
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      // userInfo: state => state.user.userInfo,
+      avatar: state => state.user.userInfo.userHeadImgUrl,
+      pwdInfo: state => state.user.pwdInfo
+    }),
+    userInfo() {
+      return getUserInfo()
+    },
+    // 如果使用默认头像，userInfo.userHeadImgUrl的值会是defaultImgUrl
+    hasAvatar() {
+      return this.avatar !== 'defaultImgUrl'
+    },
+    headerImg() {
+      // return this?.userInfo?.userFullName.charAt(this.userInfo.length - 1) ?? ''
+      // TODO 23/07/05 没有头像图片时默认取用户名作为默认头像
+      let len = this?.userInfo?.userFullName ? this?.userInfo?.userFullName.length - 1 : 0
+      return this?.userInfo?.userFullName ? this?.userInfo?.userFullName.charAt(len) : ''
+    },
+    userName() {
+      return this.userInfo?.userFullName ?? ''
+    },
+    updatePwdFormRules() {
+      const validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error(this.$t('person.confirmPwdTip')))
+        } else if (value !== this.updatePwdModel.magic) {
+          callback(new Error(this.$t('person.confirmPwdErrorTip')))
+        } else {
+          callback()
+        }
+      }
+      return {
+        oldMagic: [{ required: true, trigger: 'blur', message: this.$t('person.originalPwdTip') }],
+        magic: [{ required: true, trigger: 'blur', message: this.$t('person.newPwdTip') }],
+        confirmMagic: [{ required: true, trigger: 'blur', validator: validatePass }]
+      }
+    },
+    displayUserName() {
+      const threshold = 8 // 可根据实际需要调整阈值
+      const name = this.userName
+      return name.length > threshold ? `${name.slice(0, threshold)}...` : name
+    },
+    portalType() {
+      return this.userInfo?.portalType
+    },
+    urlLogout() {
+      return this.userInfo?.urlLogout
+    },
+    urlLogin() {
+      return this.userInfo?.urlLogin
+    },
+    isCanLogOut() {
+      /*
+       * 判断是否可以退出登录
+       * 判断用户信息中是否有urlLogout/urlLogin 如果有其中一个则显示退出按钮
+       */
+      if (this.portalType === 'sso') {
+        return this.urlLogout || this.urlLogin
+      } else {
+        return true
+      }
+    },
+  },
+
+  methods: {
+    async goPersonInfo() {
+      await this.$router.push('/person-info')
+    },
+    setDefaultSystem() {
+      this.$confirm(
+        this.$t('person.defaultSystemTip'),
+        this.$t('person.confirmMsg'),
+        {
+          distinguishCancelAndClose: true,
+          confirmButtonText: this.$t('button.sure'),
+          cancelButtonText: this.$t('button.cancel'),
+        }
+      ).then(() => {
+        setDefaultSystem(_config.systemCode).then((res) => {
+          if (this.reqIsSucceed(res)) this.$message.success(res.msg)
+        })
+      })
+    },
+    ssoLogout() {
+      let urlLogout = localStorage.getItem('urlLogout')
+      this.$store.dispatch('LogOut').then(() => {
+        localStorage.removeItem('portalType')
+        localStorage.removeItem('urlLogout')
+        removeCookie('urlLogin')
+        removeCookie('urlLogout')
+        removeCookie('ssoType')
+        removeCookie('portalCode')
+        removeCookie('portalType')
+        window.location.href = urlLogout
+      })
+    },
+    logout() {
+      if (this.portalType === 'sso' && this.isCanLogOut) {
+        this.ssoLogout()
+      } else {
+        // 清空灰度用户信息
+      removeCookie('X-gray')
+      this.$store.dispatch('LogOut').then(() => {
+        handleDomainLayout()
+      })
+      }
+    },
+    cancelHandle() {
+      this.$nextTick(() => {
+        this.$refs['updatePwdModel'].resetFields()
+      })
+      this.pwdModal = false
+    },
+    afterClose() {
+      $emit(this.$bus, 'check-use-limit')
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'home':
+          this.$router.push('/home')
+          break
+        case 'changePwd':
+          this.pwdModal = true
+          if (!this.pwdInfo || !this.pwdInfo.pwdTips) {
+            findPwdMsg().then(res => {
+              if (this.reqIsSucceed(res)) {
+                this.$store.commit('SET_PWD_INFO', { pwdTips: res.data })
+              }
+            })
+          }
+          break
+        case 'personal':
+          this.$router.push('/person-info')
+          break
+        case 'defaultSystem':
+          this.setDefaultSystem()
+          break
+        case 'logOut':
+          this.logout()
+          break
+      }
+    },
+    // 修改密码
+    updatePwd() {
+      this.$refs.updatePwdModel.validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            const userPswForm = {
+              params: {
+                oldMagic: encode(this.updatePwdModel.oldMagic),
+                magic: encode(this.updatePwdModel.magic),
+                confirmMagic: encode(this.updatePwdModel.confirmMagic)
+              }
+            }
+            const res = await updateUserPsw(userPswForm)
+            if (this.reqIsSucceed(res)) {
+              this.$message.success(res.msg)
+              this.logout()
+            }
+          } finally {
+            this.loading = false
+          }
+        }
+      })
+    }
+  },
+  created() {
+    $on(this.$bus, 'change-pwd', () => {
+      this.pwdModal = true
+    })
+  },
+  emits: ['check-use-limit'],
+}
+</script>
+
+<style lang="scss" scoped>
+.headerImg {
+  width: 36px;
+  height: 36px;
+  font-size: 20px;
+  font-weight: 800;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 36px;
+  background: var(--el-color-primary-light-2);
+  margin-right: 5px;
+}
+
+.avatar-container {
+  .avatar-wrapper {
+    cursor: pointer;
+    height: 68px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .user-avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+    }
+
+    .el-icon-caret-bottom {
+      font-size: 12px;
+    }
+  }
+}
+.tip-font {
+  font-size: 12px;
+  color: #e6a23c;
+}
+</style>

package/references/web-ui/src/views/layout/components/Navbar/components/Portal.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="panel-portal">
+    <el-tooltip effect="dark" content="返回门户" :placement="placement">
+      <el-icon
+        class="gsfont gs-icon-zhuye"
+        :style="{ fontSize: '26px', color: iconColor }"
+        @click="jumpToPortal"
+      />
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Portal',
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  },
+  methods: {
+    jumpToPortal() {
+      // location.href = `${window.VUE_AUTH_API}${window.VUE_SUBPATH ?? '/'}portal`
+      const portalHost = window.VUE_AUTH_API.trim()
+      location.href = `${portalHost}${portalHost.substr(-1) === '/'  ? '' : '/'}portal`
+    }
+  }
+}
+</script>

package/references/web-ui/src/views/layout/components/Navbar/components/SystemChange.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="system-change">
+    <el-tooltip effect="dark" :content="$t('button.system')" :placement="placement">
+      <el-popover v-model="isPopoverShow" :placement="placement" trigger="click"
+        popper-class="system-list-popover-container">
+        <div class="system-list-container">
+          <div v-for="(system, index) in systems" :key="index" :class="['system-item', system.disabled ? 'disabled' : '']"
+            @click="handleJumpSystem(system)">
+            <div class="logo">
+              <img :src="system.iconUrl ? system.iconUrl : loacationimg" alt="" />
+            </div>
+            <div class="name">
+              {{ $i18n.locale === 'zh-cn' ? system.systemName : getLang(system.systemEnName) }}
+            </div>
+          </div>
+        </div>
+
+        <template v-slot:reference>
+          <el-icon class="gsfont gs-icon-mokuai" :style="{ fontSize: '26px', color: iconColor }" />
+        </template>
+      </el-popover>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { getSystemListByUser } from '@/api/system-manage/reverse-authorization'
+
+export default {
+  name: 'SystemChange',
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  },
+  data() {
+    return {
+      systems: [],
+      isPopoverShow: false,
+      loacationimg: `${window.VUE_CDN_HOST}img/boostrap/system_management_icon.png`
+    }
+  },
+  methods: {
+    async getUserSystems() {
+      const res = await getSystemListByUser()
+      if (this.reqIsSucceed(res)) {
+        this.systems = res.data
+          .filter(system => system.systemCode !== 'portal')
+          .map(system => {
+            system.disabled = system.systemCode === this.$store.state.app.systemCode
+            return system
+          })
+        this.$store.commit('SET_SYSTEMS', this.systems)
+      }
+    },
+    handleJumpSystem(system) {
+      if (system.disabled) return
+
+      if (!system.requestUrl) {
+        this.$message.warning('该系统还未开放')
+        return
+      }
+      if (system.useState === 1) {
+        this.$message.error('该系统禁止使用')
+        return
+      }
+      this.isPopoverShow = false
+      window.open(system.requestUrl)
+    },
+    getLang(lang) {
+      try {
+        const langObj = JSON.parse(lang)
+        return langObj[this.$i18n.locale]
+      } catch (error) {
+        return lang || ''
+      }
+
+    }
+  },
+  mounted() {
+    this.getUserSystems()
+  }
+}
+</script>
+
+<style lang="scss">
+.system-list-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 600px;
+  overflow-y: auto;
+
+  .system-item {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    border-radius: 4px;
+    user-select: none;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &.disabled {
+      cursor: default;
+      color: #999;
+    }
+
+    &:not(:last-of-type) {
+      margin-bottom: 8px;
+    }
+
+    &:not(.disabled):hover {
+      color: var(--color-primary);
+      background-color: var(--color-primary-light-9);
+    }
+
+    .logo {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+
+      &>img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}
+</style>