adspecs 0.1.12

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="open-gpt" @click.stop="handleOpenGpt">
+    <el-tooltip content="chatgpt" placement="bottom" effect="dark">
+      <svg-icon iconClass="openai"></svg-icon>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+// import { apps } from '@/qiankun'
+// import { loadMicroApp } from 'qiankun'
+export default {
+  name: 'open-gpt',
+  data() {},
+  methods: {
+    handleOpenGpt() {
+      const { path } = this.$route
+      // 设置页签
+      this.$microProps.setGlobalState({
+        staticRoute: {
+          path: '/worktable/ai',
+          fullPath: '/worktable/ai',
+          meta: {
+            icon: 'zichan',
+            title: 'AI流程助手',
+            enTitle: 'AI Workflow Assistant',
+            noCache: false,
+          },
+          query: {},
+        },
+      })
+      // 跳转进ai流程助手
+      if (path !== '/worktable/ai') {
+        this.$router.push({
+          path: '/worktable/ai',
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.open-gpt {
+  .svg-icon {
+    font-size: 24px;
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <div class="panel-help">
+    <el-tooltip effect="dark" :content="$t('otherLang.helpCenter')" :placement="placement">
+      <i class="iconfont1 icon-help" :style="{ fontSize: '24px', color: iconColor }" @click="handleHelp" />
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { findActiveRoute } from '@/utils/routeHelper'
+export default {
+  name: 'Help',
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    }
+  },
+  methods: {
+    async handleHelp() {
+      const route = findActiveRoute(this.$route)
+      
+      const params = {
+        access: 'gushen_pidb_kefu',
+        title: route.meta.title
+      }
+
+      const query = Object.keys(params)
+        .map(function (key) {
+          return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
+        })
+        .join('&')
+
+      const options = {
+        origin: 'window',
+        type: 'open',
+        path: `${window.VUE_AIGC_CHAT}/chat?` + query,
+        ...params
+      }
+
+      this.$bus.$emit('open-page-drawer', options)
+      // this.$bus.$emit('page-to-micro', options)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="lang-change">
+    <el-tooltip :content="$t('button.language')" :placement="placement">
+      <el-popover ref="localePopover" :placement="placement" trigger="click" popper-class="locale-list-popover-container"
+        width="60px">
+        <div class="locale-container">
+          <!-- 修改成由数据字典读取 -->
+          <div v-for="item in languageTypesList" :key="item.dicCode" :class="[
+            'locale-item',
+            $store.getters.lang === item.dicCode ? 'disabled' : '',
+          ]" @click="switchLang(item.dicCode)">
+            {{ item.dicName }}
+          </div>
+        </div>
+        <template #reference>
+          <i class="iconfont1 icon-zhongyingwen" :style="{ fontSize: '24px', color: iconColor }" />
+        </template>
+      </el-popover>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { action } from '@/qiankun'
+import { getLanguage } from '@/utils/auth'
+import { findDictionaryType } from '@/api/app'
+import { Switch } from '@element-plus/icons-vue'
+
+export default {
+  name: 'Locale',
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF',
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+  components: {
+    Switch
+  },
+  data() {
+    return {
+      languageTypesList: [],
+    }
+  },
+  methods: {
+    async switchLang(val) {
+      if (val === this.$store.getters.lang) return
+      const lang = val || 'zh-cn'
+      this.$i18n.locale = lang
+      this.$store.commit('SET_LANG', lang)
+      // 微前端设置的监听数据（国际化切换）
+      action.setGlobalState({
+        locale: lang
+      })
+      this.$refs.localePopover.hide()
+    },
+    // 获取语种类型字典
+    getLanguageTypes() {
+      findDictionaryType('SYSTEM_LANGUAGE_TYPES').then((res) => {
+        this.languageTypesList = res.data
+      })
+    },
+  },
+  created() {
+    const lang = getLanguage() || 'zh-cn'
+    this.switchLang(lang)
+    this.getLanguageTypes()
+  },
+}
+</script>
+
+<style lang="scss">
+.locale-container {
+  display: flex;
+  flex-direction: column;
+
+  .locale-item {
+    padding: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.3s;
+
+    &.disabled {
+      color: #999;
+      cursor: default;
+    }
+
+    &:not(.disabled):hover {
+      color: var(--el-color-primary);
+      background-color: var(--el-color-primary-light-9);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,495 @@
+<template>
+  <div class="bell" ref="bell">
+    <el-tooltip :content="$t('otherLang.message')" :placement="placement">
+      <el-popover ref="popoverRef" placement="bottom" width="480" popper-class="alarm-popper" trigger="click">
+        <el-card class="border-card" style="width: 100%;" shadow="never" v-loading="loading"
+          :body-style="{ padding: '0', height: '300px', overflow: 'auto' }">
+          <!-- 卡片头部 -->
+          <template v-slot:header>
+            <div class="header-title">
+              <!-- 标题 -->
+              <span style="margin-left: 100px;">{{ messageTitle }}</span>
+              <!-- popover关闭 -->
+              <el-icon @click="closeMseeage" class="header-close"><el-icon-close /></el-icon>
+              <!-- 查看更多 -->
+              <div class="loadMore" @click="loadMoreLetters">
+                {{ $t('message.more') }}
+              </div>
+            </div>
+          </template>
+          <div v-if="msgData.length > 0" class="new_message" @scroll="scrollHandler">
+            <div class="alarm-label" v-for="list in msgData" :key="list.msgInstanceId" @click="toDetail($event)">
+              <!-- 消息内容 -->
+              <div class="name">
+                <div v-html="list.messageContent"></div>
+              </div>
+              <!-- 消息时间以及标为已读按钮 -->
+              <div class="time-and-mark">
+                <el-tag class="mark" @click.stop="marked(list.msgInstanceId)"><el-icon><el-icon-message /></el-icon>{{
+                  $t('letters.asRead')
+                }}</el-tag>
+                <div class="time" style="text-align: center">
+                  {{
+                    list.sendTime
+                    ? $moment(list.sendTime).format('YYYY-MM-DD HH:mm')
+                    : ''
+                  }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div class="no-data"></div>
+            <div class="no-data-tips">{{ $t('button.noData') }}</div>
+            <!-- <img src="https://cdn.sieiot.com/img/boostrap/noData.png" /> -->
+          </div>
+        </el-card>
+        <template v-slot:reference>
+          <el-badge :value="unread" :max="999" :hidden="unread === 0">
+            <i class="iconfont1 icon-iconbell" :style="{ fontSize: '24px', color: iconColor }" />
+          </el-badge>
+        </template>
+      </el-popover>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '@/utils/events.ts'
+import {
+  Close as ElIconClose,
+  Message as ElIconMessage,
+  Bell
+} from '@element-plus/icons'
+// vuex
+import { mapGetters } from '@/store/piniaToVuex'
+// WebSocket
+import WebSocketConnect from '@/utils/ws'
+// api
+import { getMessageList, messageRead } from '@/api/letters'
+// 滚动加载的时间函数
+let timer = null
+
+export default {
+  components: {
+    ElIconClose,
+    ElIconMessage,
+    Bell
+  },
+  name: 'Message',
+  props: {
+    iconColor: {
+      type: String,
+      default: '#FFFFFF',
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+  computed: {
+    ...mapGetters(['unread']),
+    // 站内信息标题
+    messageTitle() {
+      const text = this.$t('message.systemMessage')
+      return this.unread ? `${text}（${this.unread}）` : `${text}`
+    },
+    userId() {
+      return this.$store.state.user.userId
+    }
+  },
+  data() {
+    return {
+      // 站内消息loading
+      loading: false,
+      pageIndex: 1,
+      msgData: [],
+    }
+  },
+  methods: {
+    // 滑动加载
+    scrollHandler(e) {
+      //函数消抖
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        // scrollLock防止触发太频繁（最多一秒触发一次）,如果消息列表长度和消息数一样表示已经请求完数据
+        if (this.scrollLock || this.msgData.length === this.unread) return
+        // 用绝对值防止判断触底有误差
+        if (
+          Math.abs(
+            e.target.scrollTop + e.target.clientHeight - e.target.scrollHeight
+          ) < 10
+        ) {
+          this.scrollLock = true
+          setTimeout(() => {
+            this.scrollLock = false
+          }, 1000)
+          this.getMessageList(true)
+        }
+      }, 100)
+    },
+    //查看消息列表
+    toDetail(e) {
+      // 让a标签走自己的逻辑
+      const nodeName = e.target.nodeName
+      if (nodeName !== 'A') {
+        this.$router.push('/letters')
+      }
+    },
+
+    // 标为已读
+    marked(id) {
+      let params = {
+        systemCodes: [window._config.systemCode],
+        msgInstanceIds: [id],
+      }
+      this.loading = true
+      // 调用标记已读接口
+      messageRead({ params })
+        .then((res) => {
+          if (this.reqIsSucceed(res)) {
+            this.loading = false
+            // 通知铃铛和本页面更新数据
+            $emit(this.$bus, 'update-station-message')
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+
+    // 关闭消息弹出框
+    closeMseeage() {
+      this.$refs.popoverRef.hide()
+    },
+
+    //查看更多
+    loadMoreLetters() {
+      this.$refs.popoverRef.hide()
+      this.$router.push('/letters')
+    },
+
+    // 请求站内信息
+    async getMessageList(check) {
+      try {
+        this.loading = true
+        // check判断是否是滚动加载
+        this.pageIndex = check ? ++this.pageIndex : 1
+        const msgData = await getMessageList({
+          pageIndex: this.pageIndex,
+          pageRows: 10,
+          params: { systemCodes: [_config.systemCode], readStatus: 0 },
+        })
+        if (!check) {
+          this.msgData = msgData?.data?.data ?? []
+        } else {
+          this.msgData = [...this.msgData, ...msgData.data.data]
+        }
+        // 请求未读消息数量
+        this.$store.dispatch('GetUnreadTotal')
+
+        this.loading = false
+      } catch (error) {
+        // 在滑动加载的时候请求失败pageIndex要减1
+        this.pageIndex = check ? --this.pageIndex : 1
+        this.loading = false
+      }
+    },
+
+    // websocket 连接
+    websocketLink() {
+      // 兼容下，防止userId获取不到
+      const userId = localStorage.getItem('userId') || this.userId
+      new WebSocketConnect({
+        params: {
+          binding: {
+            subKey: 'systemNotify',
+            userId,
+            systemCode: _config.systemCode,
+          },
+        },
+        operate: this.getMessageOperate,
+      })
+    },
+
+    getMessageOperate(event) {
+      let data = JSON.parse(event.data)
+      //其它系统退出，websocket推送消息过来告诉账号已退出
+      if (
+        data.code == 800 &&
+        data.messageType === 'action' &&
+        data.msg === 'logout'
+      )
+        return false
+      if (data.code == 800) this.getMessageList()
+    },
+  },
+  created() {
+    /**
+     * bus监听是否需要更新站内消息
+     * 点击marked函数触发或者由'letters'页面触发更新
+     */
+    $on(this.$bus, 'update-station-message', () => {
+      // 节流
+      if (!this.loading) {
+        this.getMessageList()
+      }
+    })
+  },
+  mounted() {
+    this.getMessageList()
+    this.websocketLink()
+  },
+  emits: ['update-station-message'],
+}
+</script>
+
+<style lang="scss" scoped>
+.new_message {
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden auto
+}
+
+.bell {
+  //margin-right:10px;.item {
+  cursor: pointer;
+  line-height: 1;
+}
+
+// .el-badge {
+//   // line-height: 30px;
+// }
+
+.header-title {
+  text-align: center;
+  font-size: 14px;
+  span {
+    color: #333;
+  }
+}
+
+.header-close {
+  line-height: 1.4;
+  float: right;
+  cursor: pointer
+}
+
+.el-popover.alarm-popper {
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 10px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: rgb(193, 193, 193);
+    box-shadow: inset 0 0 5px rgba(193, 193, 193, 0.2);
+  }
+
+  // height: 300px;/*// overflow: auto;*/padding:0;.alarm-label {
+  padding: 10px 2px;
+  border-bottom: solid 1px #dcdcdc;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+  cursor: pointer;
+  text-align: center;
+
+  .mark {
+    display: none;
+  }
+
+  .time {
+    display: block;
+  }
+
+  &:hover>.time-and-mark .mark {
+    display: inline-block;
+  }
+
+  &:hover>.time-and-mark .time {
+    display: none;
+  }
+
+  .time-and-mark .el-tag .el-tag__content {
+    line-height: 20px;
+  }
+
+  &:last-child {
+    border-bottom: solid 1px #dcdcdc;
+  }
+
+  div {
+    text-align: center;
+
+    &.level {
+      flex: 2;
+      margin-left: 15px;
+
+      .el-tag {
+        background: var(--el-color-primary);
+      }
+
+      span {
+        color: #fff;
+
+        i {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &.time-and-mark {
+      flex: 6;
+      font-size: 12px;
+      color: #545454;
+      margin-right: 10px;
+    }
+
+    &.name {
+      div {
+        text-align: left;
+      }
+
+      flex: 16;
+      font-size: 14px;
+      color: #545454;
+      margin: 0 20px;
+      text-align: left;
+
+      .discription {
+        font-size: 16px;
+        color: #181818;
+      }
+
+      em {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 2px;
+        margin-top: -2px;
+      }
+    }
+  }
+}
+
+.alarm-label div {
+  text-align: left;
+}
+
+.alarm-label {
+  border-bottom: 1px solid #dcdcdc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  cursor: pointer;
+
+  .mark :deep(.el-tag__content) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover>.time-and-mark .mark {
+    display: inline-block;
+    line-height: 24px;
+  }
+
+  &:hover>.time-and-mark .time {
+    display: none;
+  }
+}
+
+.no-data {
+  color: #8c8c8c;
+  text-align: center;
+  padding: 10px 0;
+  background-image: url('~@/assets/images/noData.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 230px;
+}
+
+.no-data-tips {
+  font-size: var(--size-text-main, 14px);
+  color: var(--color-text-base, #666666);
+  text-align: center;
+  margin: 10px 0;
+}
+.border-card {
+  border: none;
+}
+
+.el-tabs--border-card {
+  border: none;
+  box-shadow: none;
+}
+
+.el-tabs--border-card>.el-tabs__content {
+  padding: 0;
+}
+
+.el-tabs__nav {
+  border-bottom: solid 1px #dcdcdc;
+  width: 100%;
+}
+
+.el-tabs__nav-wrap {
+  padding: 0;
+}
+
+.el-tabs__nav-wrap.is-top {
+  background: #fff;
+}
+
+.el-tabs--border-card>.el-tabs__header .el-tabs__item {
+  color: #030000;
+  font-size: 14px;
+  width: 100%;
+  height: 45px;
+  border-right: none;
+  font-weight: 400;
+  line-height: 45px;
+  opacity: 0.65;
+}
+
+.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  color: #030000;
+  font-size: 14px;
+  font-weight: 400;
+  background: #fff;
+  text-align: center;
+}
+
+.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  color: #030000;
+  font-weight: 400;
+}
+
+.loadMore {
+  float: right;
+  color: var(--el-color-primary);
+  cursor: pointer;
+  margin-right: 30px;
+}
+
+.alarmBackground {
+  background: #fff8f5;
+}
+
+.message {
+  min-height: 396px;
+  border-bottom: solid 1px #dcdcdc;
+}
+
+::v-deep .el-badge__content {
+  line-height: 16px
+}
+</style>