adspecs 0.1.12

package/references/web-ui/src/views/layout/components/chatGPT/styles/index.scss

@@ -0,0 +1,360 @@
+.intelligent-assistant {
+  // width: 100%;
+  // height: 100%;
+  // display: flex;
+  // align-items: center;
+  // background-image: url('https://sieiot-resources.oss-cn-beijing.aliyuncs.com/web/gushen/images/pidb_home_bg.png');
+
+  // background-image: url('./image/pmo_background.png');
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  // background-color: #e7f0ff;
+
+  width: 100%;
+  height: 100%;
+  // height: calc(100vh);
+  //   @include flex-row(center, center);
+  padding: 15px;
+}
+.fullDrawer {
+  padding: 0;
+  .container {
+    border-radius: 0;
+  }
+}
+.toolBar {
+  .el-button--text {
+    padding: 5px 0;
+  }
+  ::v-deep i {
+    font-size: 18px;
+  }
+}
+.container {
+  box-shadow: 2px 0 10px rgba($color: #000000, $alpha: 0.1);
+  border: 1px solid var(--color-text-extra);
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  padding: 0px;
+}
+.gpt {
+  display: grid;
+  grid-template-columns: minmax(290px, 1fr) 4fr;
+  // grid-gap: 15px;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  &.only-content-gpt {
+    grid-template-columns: 1fr;
+  }
+}
+// 知识库列表
+.Knowledge-list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  // overflow-y: scroll;
+
+  .list {
+    // overflow-y: scroll;
+    .list-item {
+      border-radius: 5px;
+      margin-bottom: 15px;
+      cursor: pointer;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      position: relative;
+      content-visibility: auto;
+      background-color: #fff;
+      ::v-deep .el-card__body {
+        padding: 15px;
+      }
+    }
+    // .list-item:hover {
+    //   box-shadow: 0px 4px 4px 4px #eeeff8;
+    // }
+    .select-item {
+      // border: 1px solid var(--color-primary);
+      color: #3370ff;
+      background-color: #f0f7ff;
+      border: 1px solid #f0f7ff;
+    }
+    .item-main {
+      display: flex;
+      position: relative;
+      -webkit-box-align: center;
+      align-items: center;
+      cursor: pointer;
+      // display: flex;
+      // align-items: center;
+      // .Knowledge-img {
+      //   width: 20px;
+      //   height: 20px;
+      //   padding-right: 5px;
+      // }
+      // span {
+      //   margin-left: 10px;
+      // }
+      .Knowledge {
+        margin-left: 10px;
+        word-break: break-word;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .icon {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        flex-shrink: 0;
+        color: currentcolor;
+        box-sizing: content-box;
+        vertical-align: top;
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    height: 70px;
+    text-align: center;
+    background-color: #fff;
+  }
+  .knowledgeNumBox {
+    padding-top: 10px;
+    // text-align: center;
+    // display: flex;
+    // align-items: center;
+    // display: grid;
+    // grid-template-columns: minmax(122px, 1fr) 1fr;
+    // grid-gap: 5px;
+  }
+  .knowledgeNumBox label {
+    color: #666;
+    padding-right: 10px;
+    word-break: break-word;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .knowledgeNum {
+    width: 100px;
+  }
+}
+// 对话框
+.gpt-chatting {
+  height: 100%;
+  width: 100%;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-y: hidden;
+  border-left: 1px solid var(--color-text-extra);
+  .chatBox {
+    // overflow-y: scroll;
+    overflow-x: hidden;
+    padding-bottom: 20px;
+    .receiveMessage {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-left: 10px;
+      margin-top: 10px;
+
+      .gptImg {
+        height: 38px !important;
+        width: 35px !important;
+        margin: 0 0 8px 8px;
+      }
+
+      .answerDate {
+        color: var(--color-text-extra);
+        font-size: 10px;
+        margin: 4px 0 0 8px;
+      }
+      .loadingBox {
+        width: 50px;
+        height: 50px;
+        border: 1px solid var(--color-text-extra);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f5f6fa;
+        border-radius: 6px;
+      }
+      .loading {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        transform: scale(0.5, 0.5);
+      }
+      .messageArea {
+        border: 1px solid var(--color-text-extra);
+        border-radius: 8px;
+        max-width: 70%;
+        margin: 0 5px;
+        padding: 5px 10px;
+        background-color: #f5f6fa; // var(--color-bg-4);
+        color: #333;
+        white-space: normal;
+        line-height: 2;
+        overflow: auto;
+      }
+    }
+
+    .sendMessage {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      margin-right: 10px;
+      margin-top: 10px;
+      .headImgBox {
+        height: 35px;
+        width: 35px;
+        border: 1px solid #dedede;
+        border-radius: 50%;
+        box-shadow: 50px 50px 100px 10px rgba(0, 0, 0, 0.1);
+        margin: 0 8px 8px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .text {
+        font-size: 20px;
+        font-weight: 800;
+        color: #fff;
+        border-radius: 50%;
+        background: var(--color-primary-light-2);
+        &>div {
+          margin-bottom: 1px;
+        }
+      }
+      .headImg {
+        height: 35px !important;
+        width: 35px !important;
+        border-radius: 50%;
+      }
+
+      .messageArea {
+        border: 1px solid var(--color-primary-light-8);
+        border-radius: 6px;
+        margin: 0 5px;
+        max-width: 70%;
+        padding: 5px 10px;
+        background-color: var(--color-primary-light-9);
+        color: #333;
+        white-space: pre-wrap;
+      }
+    }
+  }
+  .messageSendBox {
+    flex: 1;
+    padding: 10px;
+    // border-radius: 10px;
+    border-top: 1px solid var(--color-text-extra);
+    // margin-top: 20px;
+    // border: 1px solid var(--color-text-extra);
+  }
+
+  .messageSendBox textarea {
+    height: 100%;
+  }
+}
+
+.only-content-gpt .gpt-chatting {
+  border-left: none;
+  .chatBoxEx {
+    flex: 1;
+    height: 100%;
+  }
+}
+
+.title {
+  line-height: 55px;
+  font-size: 1.6vh;
+  font-weight: bold;
+  margin-left: 20px;
+  color: #333;
+  &_img {
+    width: auto;
+    height: 50px;
+  }
+}
+.chatBoxEx {
+  height: calc(100% - 180px);
+}
+.help {
+  width: 200px;
+}
+::v-deep .el-checkbox__inner {
+  width: 18px;
+  height: 18px;
+  //修改选中框中的对勾的大小和位置
+  &::after {
+    height: 10px;
+    left: 9px;
+  }
+}
+::v-deep .el-textarea,
+::v-deep .el-textarea__inner {
+  height: 100%;
+}
+::v-deep .el-checkbox__label {
+  font-weight: bold;
+}
+::v-deep .vuepress-markdown-body {
+  padding: 0;
+  background-color: var(--color-bg-4);
+  font-size: 14px;
+}
+
+.vuepress-markdown-body:not(.custom) {
+  padding: 0;
+}
+
+::v-deep .el-textarea__inner {
+  border: none;
+}
+
+::v-deep .el-button.is-circle {
+  border-radius: 50%;
+  padding: 8px;
+}
+
+::v-deep .el-icon-refresh:before {
+  color: #333;
+  font-weight: bold;
+}
+
+::v-deep .el-icon-s-promotion:before {
+  font-weight: bold;
+  font-size: 26px;
+  color: #2b6fd5;
+  position: absolute;
+  bottom: 0px;
+  right: 20px;
+}
+
+::v-deep .el-icon-close:before {
+  color: #333;
+  // font-weight: 500;
+}
+
+::v-deep .el-icon-delete:before {
+  color: #333;
+  // font-weight: 600;
+}
+
+::v-deep .el-icon-video-pause {
+  color: #333;
+  // font-weight: bold;
+}
+
+::v-deep .vmdpreview * {
+  margin: 0 !important;
+}

package/references/web-ui/src/views/layout/components/chatGPT/utils/gpt.js

@@ -0,0 +1,29 @@
+export default {
+  methods: {
+    getSession() {
+      this.$http.get(`/gushen/gpt/openai-session/getSession`).then(res => {
+        if (res.code == 800 || res.code == 200) {
+          localStorage.setItem('GptSession_iotAutho', res.data)
+          this.gptSession = res.data
+        } else {
+          this.$message.warning('Session获取失败，请稍后重试')
+        }
+      })
+    },
+    changeSession() {
+      this.messageList = []
+      this.messageInput = ''
+      this.loading = false
+      localStorage.removeItem('GptChatList')
+      this.$http.get(`/gushen/gpt/openai-session/changeToken`).then(res => {
+        if (res.code == 800 || res.code == 200) {
+          localStorage.setItem('GptSession_iotAutho', res.data)
+          this.gptSession = res.data
+          this.$message.success('Session刷新成功')
+        } else {
+          this.$message.warning('Session获取失败，请稍后重试')
+        }
+      })
+    }
+  }
+}

package/references/web-ui/src/views/layout/components/chatGPT/utils/index.js

@@ -0,0 +1,70 @@
+
+export default {
+  methods: {
+    init() {
+      // this.messageList = JSON.parse(localStorage.getItem('GptChatList')) || []
+      this.access = localStorage.getItem('access') || null
+      this.gptSession = localStorage.getItem('GptSession_iotAutho') || this.gptSession
+      this.setScrollBottom()
+      // this.setScrollBottom()
+      // this.initKnowledgeList()
+    },
+    initKnowledgeList() {
+      if (this.access) {
+        this.KnowledgeList.forEach((each) => {
+          if (this.access == each.access) {
+            each.checked = !each.checked
+            each.messageList = this.messageList
+          }
+
+        })
+      } else {
+        this.KnowledgeList[0].checked = !this.KnowledgeList[0].checked
+        this.access = this.KnowledgeList[0].access
+      }
+
+    },
+    handleSendMessage(event) {
+      if (event.shiftKey) {
+        this.sendMessage();
+        event.preventDefault();
+      }
+    },
+    sendMessage() {
+      // 去掉字符串末尾的空格或换行符
+      this.messageInput = this.messageInput.replace(/\s+$/, '')
+      if (!this.messageInput.trim()) {
+        this.$message.warning('输入不能为空')
+        return
+      }
+      this.lastNum++
+      if (!localStorage.getItem('GptSession_iotAutho')) {
+        this.getSession()
+      }
+      this.saveMessage({
+        type: 1,
+        date: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
+        message: this.messageInput,
+        isFinished: true
+      })
+      this.getMessage()
+    },
+    saveMessage(data) {
+      this.messageList.push({
+        id: this.messageList.length + 1,
+        messageType: data.type,
+        message: data.message,
+        date: data.date,
+        isFinished: data.isFinished,
+        isContainMarkdown: data.isContainMarkdown
+      })
+      this.setScrollBottom()
+    },
+    setScrollBottom() {
+      this.$nextTick(() => {
+        var comta = this.$el.querySelector('.chatBox')
+        comta.scrollTop = comta.scrollHeight
+      })
+    },
+  }
+}

package/references/web-ui/src/views/layout/components/index.js

@@ -0,0 +1,6 @@
+export { default as Navbar } from './Navbar/index.vue'
+export { default as Sidebar } from './Sidebar/index.vue'
+export { default as TagsView } from './TagsView.vue'
+export { default as AppMain } from './AppMain.vue'
+
+export { default as CompactTools } from './CompactTools/index.vue'

package/references/web-ui/src/views/layout/mixin/ResizeHandler.js

@@ -0,0 +1,28 @@
+import getStore from '@/store/piniaToVuex'
+
+const { body } = document
+const WIDTH = 1024
+const RATIO = 3
+
+export default {
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - RATIO < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const store = getStore();
+        const isMobile = this.isMobile()
+        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile)
+          store.dispatch('CloseSideBar', { withoutAnimation: true })
+
+      }
+    }
+  }
+}

package/references/web-ui/src/views/layout/utils/dynamicFormHelper.js

@@ -0,0 +1,44 @@
+export const transferParamsStrToJson = paramsStr => {
+  try {
+    const reg = new RegExp('"', 'g')
+    let jsonStr = paramsStr.replace(reg, '"')
+    return JSON.parse(jsonStr)
+  } catch {
+    return {}
+  }
+}
+
+export const formatDynamicFormPath = route => {
+  let { meta, path, originPath } = route
+  let formatPath = originPath || path
+  if (meta?.params && typeof meta?.params === 'string' && meta.params !== 'MASTER') {
+    try {
+      let paramJson = transferParamsStrToJson(meta.params)
+      // 如果是动态表单需要渲染固定组件
+      if (paramJson && paramJson.menu_type === 'DYNAMIC_FORM') {
+        formatPath = path.replace(':formId', paramJson.diy_code)
+        if (paramJson.layout_code) {
+          formatPath += `?layoutId=${paramJson.layout_code}`
+        }
+      }
+      return formatPath
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  return formatPath
+}
+
+/*
+ * @description 从菜单信息转换出动态表单路由 path
+ * @param menu {Object} 菜单信息
+ */
+export const formatDynamicFormPathFromMenu = menu => {
+  const { menuUrl, parameter } = menu
+  const params = transferParamsStrToJson(parameter)
+  if (params?.menu_type === 'DYNAMIC_FORM') {
+    return `/${menuUrl}/${params.diy_code}${params.layout_code ? `?layoutId=${params.layout_code}` : ''}`
+  }
+
+  return `/${menuUrl}`
+}

package/references/web-ui/src/views/layout/utils/scroll.js

@@ -0,0 +1,89 @@
+/*
+* @description 顶部导航菜单和页签滚动方法
+ */
+
+/*
+* @description 点击滚动容器
+* @param el 滚动容器 dom
+* @param pane 放置 子项的容器
+* @param items 容器内部的子项
+* @param direction 滚动方向
+ */
+export async function handleScrollFromClick(el, pane, items, direction) {
+  // 向左滚动
+  if (direction === 'left') {
+    // 向左滚动的余量
+    let offset = el.scrollLeft
+    for (let i = 0; i < items.length; i++) {
+      offset -= items[i].offsetWidth
+      if (offset < 0) {
+        return await scrollForAnime(el, pane, Math.abs(offset), direction)
+      } else if (offset === 0) {
+        return await scrollForAnime(el, pane, items[i].offsetWidth, direction)
+      } else if (offset < items[i + 1]?.offsetWidth) {
+        return await scrollForAnime(el, pane, Math.abs(offset), direction)
+      }
+    }
+  }
+  // 向右滚动
+  if (direction === 'right') {
+    let offset = Math.round(el.scrollLeft)
+    // 几个菜单的宽度能把外部容器占满
+    let itemsWidth = 0
+    for (let i = 0; i < items.length; i++) {
+      // 累加子项宽度
+      itemsWidth += items[i].offsetWidth
+      if (itemsWidth - offset > pane.offsetWidth) {
+        // 判断是否滚动值是否太小
+        const sum = itemsWidth - pane.offsetWidth - offset
+        if (!!items[i + 1] && sum < (items[i]?.offsetWidth / 4)) {
+          return await scrollForAnime(el, pane, sum + items[i + 1]?.offsetWidth, direction)
+        }
+        // 如果子项加起来减去滚动距离大于容器宽度，需要滚动子项的宽度减去滚动距离和容器宽度
+        return await scrollForAnime(el, pane, sum, direction)
+      } else if (pane.offsetWidth === itemsWidth - offset) {
+        // 如果子项的宽度减去滚动距离刚好等于容器宽度，则正好滚动下一项菜单的宽度
+        return await scrollForAnime(el, pane, items[i + 1]?.offsetWidth, direction)
+      }
+    }
+  }
+}
+
+/*
+ * @desc 给容器的滚动添加动画
+ * @param el 滚动的容器
+ * @param offset 滚动的距离
+ * @param direction 滚动的方向
+ */
+export function scrollForAnime(el, pane, offset, direction) {
+  if (!offset || offset <= 0) return {
+    // 滚动距离为0，表示已经到最左边了
+    left: el.scrollLeft === 0,
+    // 判断滚动宽度减去容器宽度是否小于等于滚动距离
+    right: el.scrollWidth - el.offsetWidth <= el.scrollLeft
+  }
+  // 每帧滚动的距离
+  const step = 5
+  // 滚动方法
+  return new Promise(resolve => {
+    const anime = () => {
+      if (direction === 'left') {
+        el.scrollLeft -= Math.min(step, offset)
+      } else {
+        el.scrollLeft += Math.min(step, offset)
+      }
+      offset -= step
+      if (offset > 0) {
+        requestAnimationFrame(anime)
+      } else {
+        resolve({
+          // 滚动距离为0，表示已经到最左边了
+          left: el.scrollLeft === 0,
+          // 判断滚动宽度减去容器宽度是否小于等于滚动距离
+          right: el.scrollWidth - el.offsetWidth <= el.scrollLeft
+        })
+      }
+    }
+    requestAnimationFrame(anime)
+  })
+}

package/references/web-ui/src/views/letters/config/gridConfig.js

@@ -0,0 +1,59 @@
+export default {
+  translate: 'letters',
+  slotArr: ['messageContent', 'readStatus', 'action'],
+  queryUrl: `${window.getVersionTypeApiUrl('messageURL')}/iotBaseMessageLogController/message-find`,
+  showIndex: false, // 是否显示序号
+  selectable: true, // 表格是否带有复选框
+  needSearch: true,
+  rowKey: 'msgInstanceId',
+  columns: [
+    {
+      label: '消息内容',
+      prop: 'messageContent',
+      isShow: true,
+      width: 500
+    },
+    {
+      label: '发送时间',
+      prop: 'sendTime',
+      isShow: true,
+      width: 300,
+      component: 'el-date-picker',
+      componentAttr: {
+        type: 'daterange',
+        'valueFormat': 'yyyy-MM-dd',
+        'range-separator': '',
+        'start-placeholder': '开始日期',
+        'end-placeholder': '结束日期',
+        placeholder: '请选择',
+        style: 'width: 100%',
+      },
+    },
+    {
+      label: '阅读状态',
+      prop: 'readStatus',
+      isShow: true,
+      hideSearh: false,
+      width: 100,
+      component: 'el-select',
+      list: [
+        {
+          label: '未读',
+          value: 0
+        },
+        {
+          label: '已读',
+          value: 1
+        },
+      ]
+    },
+    {
+      label: '操作',
+      prop: 'action',
+      isShow: true,
+      width: 100,
+      fixed: 'right',
+      align: 'center'
+    },
+  ]
+}