large-model-component 1.0.1 → 1.0.3

package/packages/header/header.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="navigation">
+    <div class="logo">
+      <img :src="logoUrl" @click="jumpLink(domainUrl, '0')" loading="lazy"/>
+    </div>
+    <div v-if="useSlot" class="column">
+      <slot></slot>
+    </div>
+    <div v-else class="column">
+      <div
+        :class="['column-item', { activeColumn: item.columnLink === activeTabLink }]"
+        v-for="(item, index) in columns"
+        :key="index"
+      >
+        <div class="item-title">
+          <span v-if="item.child.length !== 0">{{ item.columnName }}</span>
+          <span v-else @click="jumpLink(item.columnLink, item.runType)">{{ item.columnName }}</span>
+        </div>
+
+        <div class="titleStacked">
+          <ul class="ulBack">
+            <li
+              v-for="(child, index) in item.child"
+              class="liStyle liStyleBorder"
+              @click="jumpLink(child.columnLink, child.runType)"
+            >
+              {{ child.columnName }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="user">
+      <div v-if="showWorkBench" class="workbench" @click="goToWorkBench()">工作台</div>
+      <div v-if="userName" class="userInfo">
+        <div class="user_box">
+          <div class="boxShow">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 32 32"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>用户</title>
+              <g id="门户" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g
+                  id="门户展示-列表"
+                  transform="translate(-1864.000000, -14.000000)"
+                  fill-rule="nonzero"
+                >
+                  <g id="编组-2" transform="translate(1864.000000, 14.000000)">
+                    <circle id="椭圆形" cx="16" cy="16" r="16"></circle>
+                    <g id="download" transform="translate(8.000000, 6.000000)" fill="#111111">
+                      <path
+                        d="M8.41057817,15.9983436 C8.10196301,16.0018058 7.79205942,16.0212191 7.482,16.057 C7.48146725,16.049642 7.48092091,16.0422857 7.48036097,16.0349309 C5.3035271,16.2311728 3.2500542,17.2191848 1.73039832,18.847 C1.48602866,19.1078039 1.12108456,19.218427 0.773036936,19.1371986 C0.424989313,19.0559702 0.146714881,18.7952308 0.0430369276,18.4531986 C-0.0606410258,18.1111663 0.0260286478,17.7398039 0.27039832,17.479 C2.34812512,15.2561793 5.25572425,13.9961473 8.29839832,13.9999912 L8.399,14.001 L8.5,13.9999912 C11.4299824,13.9962896 14.2347102,15.1645773 16.2937617,17.2359973 L16.528,17.479 C16.7723697,17.7398039 16.8590393,18.1111663 16.7553614,18.4531986 C16.6516834,18.7952308 16.373409,19.0559702 16.0253614,19.1371986 C15.6773138,19.218427 15.3123697,19.1078039 15.068,18.847 C13.5483214,17.2191605 11.4948098,16.2311432 9.3188441,16.0342463 L9.31639832,16.057 L9.31639832,16.057 C9.11438991,16.0336882 8.91244764,16.017324 8.71088475,16.0077922 Z M8.25039832,0 C11.702178,0 14.5003983,2.79822031 14.5003983,6.25 C14.5003983,9.70177969 11.702178,12.5 8.25039832,12.5 C4.79861863,12.5 2.00039832,9.70177969 2.00039832,6.25 C2.00039832,2.79822031 4.79861863,0 8.25039832,0 Z M8.25039832,2 C6.73201955,2 5.32897969,2.8100454 4.5697903,4.12499998 C3.81060091,5.43995457 3.81060091,7.06004543 4.5697903,8.37500002 C5.32897969,9.6899546 6.73201955,10.5 8.25039832,10.5 C10.5976085,10.5 12.5003983,8.59721016 12.5003983,6.25 C12.5003983,3.90278984 10.5976085,2 8.25039832,2 Z"
+                        id="形状"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+          <div class="navStacked">
+            <ul class="ulBack">
+              <li class="liStyleEnd"></li>
+              <li class="liStyle liStyleBorder">{{ userName }}</li>
+              <li
+                v-for="(link, index) in userLinks"
+                class="liStyle liStyleBorder"
+                @click="jumpLink(link.link_url, link.way)"
+              >
+                {{ link.link_name }}
+              </li>
+              <li class="liStyle" @click="logout()">退出登录</li>
+              <li class="liStyleEnd"></li>
+            </ul>
+          </div>
+          <div v-if="token !== ''" class="message">
+            <el-badge :value="msgCountInfo.unReadCnt">
+              <img
+                :src="msgCountInfo.unReadCnt > 0 ? require('@/assets/blue_tip.png') : require('@/assets/gray_tip.png')"
+                class="badge-image"
+                alt=""
+                @click="handleJump"/>
+            </el-badge>
+          </div>
+        </div>
+      </div>
+      <div class="login" v-else @click="jumpLink(loginUrl, '0')">登录/注册</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {EventSourcePolyfill} from 'event-source-polyfill';
+import axios from "axios";
+
+export default {
+  name: 'iipHeader',
+  props: {
+    showWorkBench: {
+      type: Boolean,
+      default: false,
+    },
+    logoUrl: {
+      type: String,
+      default: '',
+    },
+    loginUrl: {
+      type: String,
+      default: '',
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    userName: {
+      type: String,
+      default: '',
+    },
+    userLinks: {
+      type: Array,
+      default: () => {
+        let url = '';
+        if (typeof window !== 'undefined') {
+          url = window.location.origin + '/account-web/';
+        } else {
+          url = '';
+        }
+        return [
+          {
+            link_name: '账号中心',
+            link_url: url,
+            way: '1',
+          },
+        ];
+      },
+    },
+    domainUrl: {
+      type: String,
+      default: () => {
+        let url = '';
+        if (typeof window !== 'undefined') {
+          url = window.location.origin;
+        } else {
+          url = '';
+        }
+        return url;
+      },
+    },
+    useSlot: {
+      type: Boolean,
+      default: false,
+    },
+    token: {
+      type: String,
+      default: '',
+    }
+  },
+  data() {
+    return {
+      activeTabLink: '',
+      msgCountInfo: {
+        readCnt: 0, // 已读
+        unReadCnt: 0, // 未读
+      },
+    };
+  },
+  mounted() {
+    if (this.token !== '') {
+      this.startEventSource()
+      this.getCount()
+    }
+  },
+  created() {
+    this.activeTab();
+  },
+  methods: {
+    activeTab() {
+      if (typeof window !== 'undefined') {
+        const pathName = window.location.pathname;
+        this.columns.map((column) => {
+          if (column.columnLink.indexOf(pathName) > -1 && pathName !== '/' && pathName !== '/service-web/') {
+            if (!this.activeTabLink) {
+              this.activeTabLink = column.columnLink;
+            }
+          } else {
+            if (column.child && column.child.length > 0) {
+              column.child.map((childColumn) => {
+                if (childColumn.columnLink.indexOf(pathName) > -1 && pathName !== '/' && pathName !== '/service-web/') {
+                  if (!this.activeTabLink) {
+                    this.activeTabLink = column.columnLink;
+                  }
+                }
+              });
+            }
+          }
+        });
+      }
+    },
+    jumpLink(url, way) {
+      if (url && url.indexOf('http') > -1) {
+        window.open(url, way == '0' ? '_self' : '_blank');
+      } else {
+        window.open(window.location.origin + url, way == '0' ? '_self' : '_blank');
+      }
+    },
+    logout() {
+      this.$emit('log-out');
+    },
+    goToWorkBench() {
+      this.$emit('go-work-bench');
+    },
+    apiRequestWithToken(method, url, data) {
+      return axios({
+        method: method,
+        url: url,
+        data: data, // 仅当method为POST或PUT时需要使用data，对于GET则使用params或URL查询字符串。
+        headers: {
+          'Authorization': 'Bearer ' + this.token,
+          'Content-Type': 'application/json' // 根据需要添加其他头部信息，例如Content-Type。
+        }
+      });
+    },
+    getCount() {
+      this.apiRequestWithToken('get', `${window.location.origin}/gateway/manage/message/my/message/read/count`)
+        // this.apiRequestWithToken('get', `http://dev.inspuriip.com:8083/gateway/manage/message/my/message/read/count`)
+        .then(res => {
+          console.log('res==>', res);
+          if (res.data && res.data.code === 200) {
+            this.msgCountInfo.readCnt = res.data.data.readCnt
+            this.msgCountInfo.unReadCnt = res.data.data.unReadCnt
+            console.log('msgCountInfo', this.msgCountInfo)
+          }
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    },
+    startEventSource() {
+      if (!this.eventSource) {
+        const url = `${window.location.origin}/gateway/manage/message/sse/connect`
+        this.eventSource = new EventSourcePolyfill(url, {
+          headers: {
+            Authorization: 'Bearer ' + this.token,
+          }
+        })
+        this.eventSource.onopen = this.handleOpen
+        this.eventSource.onmessage = this.handleMessage
+        this.eventSource.onerror = this.handleError
+      }
+    },
+
+    handleOpen(event) {
+      console.log('connect success', event)
+    },
+    handleMessage(event) {
+      console.log('接收到消息', event.data)
+      const data = event.data
+      if (data === 'success') {
+        this.$message.success('您有新的消息请注意及时查看~')
+        this.getCount()
+      }
+    },
+    handleError(event) {
+      const time = new Date().toISOString()
+      console.log('connect error', time, event)
+    },
+    stopEventSource() {
+      if (this.eventSource) {
+        this.eventSource.close()
+        this.eventSource = null
+      }
+    },
+    handleJump() {
+      window.open(`${window.location.origin}/message-manage-web/messageCenter/myMessage`, '_blank');
+    },
+  },
+  beforeDestroy() {
+    this.stopEventSource()
+  },
+};
+</script>
+<style lang="scss" scoped>
+.custom-badge ::v-deep(.el-badge__content) {
+  background-color: transparent; /* 隐藏默认背景 */
+  border: none; /* 移除边框 */
+  padding: 0; /* 去除内边距 */
+  font-size: 0; /* 隐藏默认文本 */
+  transform: translate(80%, -80%); /* 调整图片位置 */
+}
+
+.badge-image {
+  width: 20px; /* 控制图片大小 */
+  height: 20px;
+  display: block; /* 确保图片正确渲染 */
+}
+
+.navigation {
+  width: 100%;
+  height: 72px;
+  background: #ffffff;
+  box-shadow: 8px 8px 20px 0px rgba(55, 99, 170, 0.1);
+  display: flex;
+
+  .logo {
+    width: 330px;
+    line-height: 72px;
+
+    img {
+      margin-left: 24px;
+      height: 32px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+  }
+
+  .column {
+    flex: 1;
+    height: 100%;
+    display: flex;
+
+    .column-item {
+      position: relative;
+      padding-right: 48px;
+
+      .item-title {
+        height: 48px;
+        padding-top: 24px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #3d485d;
+        line-height: 24px;
+        cursor: pointer;
+
+        &:hover {
+          font-weight: 600;
+          color: #064eab;
+        }
+      }
+
+      .item-title:hover + .titleStacked {
+        display: block;
+      }
+
+      .titleStacked {
+        display: none;
+        position: absolute;
+        top: 72px;
+
+        .ulBack {
+          list-style: none;
+          min-width: 100px;
+          background-color: #fff;
+          border: 1px solid #E4E4E4;
+          padding-inline-start: 0px;
+
+          padding-left: 5px;
+          padding-right: 5px;
+
+          .liStyleBorder {
+            border-bottom: 1px solid #E4E4E4;
+          }
+
+          .liStyle {
+            text-align: center;
+            margin-top: 10px;
+
+            font-size: 14px;
+            height: 32px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #5b606a;
+          }
+
+          .liStyle:hover {
+            background-color: #ebf3fe;
+            color: #064eab;
+            cursor: pointer;
+          }
+
+          .liStyleEnd {
+            height: 10px;
+          }
+        }
+      }
+
+      .titleStacked:hover {
+        display: block;
+      }
+    }
+
+    .activeColumn {
+      .item-title {
+        color: #1772f6;
+        font-weight: bolder;
+      }
+    }
+  }
+
+  .user {
+    display: flex;
+    width: 200px;
+    height: 72px;
+    padding-top: 16px;
+    padding-right: 32px;
+    justify-content: flex-end;
+    text-align: center;
+    cursor: pointer;
+
+    .workbench {
+      height: 24px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #3d485d;
+      line-height: 24px;
+      padding-right: 24px;
+      padding-top: 8px;
+    }
+
+    .userInfo {
+      position: relative;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      padding-top: 8px;
+
+      .user_box {
+        display: flex;
+        flex-direction: row;
+
+        .boxShow {
+          margin-right: 10px;
+
+          img {
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        .boxShow:hover + .navStacked {
+          display: block;
+        }
+
+        .navStacked {
+          display: none;
+          position: absolute;
+          top: 30px;
+          left: -40px;
+          z-index: 9999;
+
+          .ulBack {
+            list-style: none;
+            width: 100px;
+            background-color: #fff;
+            border: 1px solid #E4E4E4;
+            padding-inline-start: 0px;
+
+            .liStyleBorder {
+              border-bottom: 1px solid #E4E4E4;
+            }
+
+            .liStyle {
+              text-align: center;
+              padding: 5px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #5b606a;
+
+              width: 100%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              box-sizing: border-box;
+            }
+
+            .liStyle:hover {
+              background-color: #ebf3fe;
+              color: #064eab;
+              cursor: pointer;
+            }
+
+            .liStyleEnd {
+              height: 10px;
+            }
+          }
+        }
+
+        .navStacked:hover {
+          display: block;
+        }
+      }
+
+    }
+
+    .login {
+      font-family: PingFangSC-Medium, PingFang SC;
+      background: #064eab;
+      width: 100px;
+      height: 24px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      font-size: 14px;
+
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 24px;
+    }
+  }
+}
+</style>

package/packages/header/index.js

@@ -0,0 +1,3 @@
+import iipHeader from './header.vue';
+
+export default iipHeader;

package/packages/index.js

@@ -2,10 +2,12 @@
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 // 统一导出
 // 导入颜色选择器组件
-import largeModel from './largeModel';
+import iipHeader from './header';
+import iipFooter from './footer';
+import iipUpload from './upload';
 
 // 存储组件列表
-const components = [largeModel];
+const components = [iipHeader, iipFooter, iipUpload];
 const install = function (Vue, options = {}) {
   // 全局注册所有的组件
   components.forEach((item) => {
@@ -23,5 +25,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export default {
   install,
-  largeModel,
+  iipHeader,
+  iipFooter,
+  iipUpload,
 };

package/packages/model/index.js

@@ -0,0 +1,3 @@
+import largeModel from './model.vue';
+
+export default largeModel;