Merge branch 'feat/layout-style' into 'dev'

Feat/layout style

See merge request !32

src/layout/index.vue

@@ -11,6 +11,7 @@
             :is-active="sidebar"
         />
         <h3>DC-TOM管理平台</h3>
+        <div class="go-tom" @click="goTom">Eco-TOM三流合一</div>
         <div class="right-block">
           <el-dropdown class="right-menu-item"
               trigger="click"
@@ -86,6 +87,10 @@ export default {
         });
       }
     };
+
+    const goTom = () => {
+      router.push({ path: '/intermediate' });
+    }
     
     // 监听路由变化，更新面包屑
     watch(() => route.path, () => {
@@ -116,7 +121,8 @@ export default {
       userName,
       logout,
       sidebar,
-      toggleSideBar
+      toggleSideBar,
+      goTom
     };
   },
   created() {
@@ -133,9 +139,11 @@ export default {
     width: 200px;
     height: 100%;
     background: linear-gradient(180deg, #018796, #014155);
+    transition: all 0.3s ease;
   }
   .colWidth {
     width: 63px;
+    transition: all 0.3s ease;
   }
   .right {
     min-height: 100%;
@@ -167,6 +175,25 @@ export default {
         left: 50px;
         top: 14px;
       }
+      .go-tom {
+        font-size: 0.9rem;
+        margin-top: - 16px;
+        top: 50%;
+        height: 32px;
+        line-height: 32px;
+        padding: 0 20px;
+        position: absolute;
+        right: 200px;
+        color: #ffffff;
+        background: #2182a0;
+        border: 1px solid #2182a0;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        &:hover {
+          box-shadow: 0px 1.33px 16px 0px rgba(83, 100, 170, 0.5);
+        }
+      }
       .right-block {
         line-height: 50px;
         float: right;
@@ -225,4 +252,8 @@ export default {
   color: #000;
   font-weight: 600;
 }
+
+.el-menu--collapse {
+  width: auto !important;
+}
 </style>

src/router/index.js

@@ -109,6 +109,11 @@ const routes = [
           },
         ]
       },
+    {
+        path: '/intermediate',
+        component: () => import('@/views/intermediate/index.vue'),
+        meta: { title: '中间页面' }
+    },
     {
         path: '/login',
         component: () => import('../views/login/index.vue'),
@@ -125,6 +130,12 @@ const router = createRouter({
 
 // 添加全局路由守卫
 router.beforeEach((to, from, next) => {
+    // 如果是从登录页面来的，并且不是去中间页的，就重定向到中间页
+    if (to.path === '/intermediate') {
+        next();
+        return;
+    }
+
     // 登录页面不需要权限验证
     if (to.path === '/login') {
         next();

src/views/intermediate/index.vue

+<template>
+  <div class="intermediate-page">
+    <iframe
+      ref="iframeRef"
+      class="iframe-box"
+      src="https://screen.bmetech.com/steelmakingScreen/#/ecoDashboard"
+      frameborder="0"
+    ></iframe>
+    <div class="back-btn" :style="backBtnStyle">
+      <div class="back" @click="handleBack">
+        <img src="@/assets/icons/menu-icon.png" alt="" />
+        <span>管理平台</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { ref, onMounted, computed, onUnmounted } from "vue";
+
+const router = useRouter();
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+const iframeRef = ref(null);
+
+// 设计稿尺寸
+const DESIGN_WIDTH = 1920;
+const DESIGN_HEIGHT = 1080;
+
+// 计算缩放比例和位置
+const backBtnStyle = computed(() => {
+  // 根据高度计算缩放比例
+  const scale = windowHeight.value / DESIGN_HEIGHT;
+  // 计算实际宽度
+  const actualWidth = DESIGN_WIDTH * scale;
+  // 计算左侧留白
+  const leftMargin = (windowWidth.value - actualWidth) / 2;
+
+  // 按钮在设计稿中的位置
+  const designLeft = 500;
+  const designTop = 14;
+
+  return {
+    transform: `scale(${scale})`,
+    transformOrigin: 'left top',
+    left: `${leftMargin + designLeft * scale}px`,
+    top: `${designTop * scale}px`,
+  };
+});
+
+// 监听窗口大小变化
+const updateWindowSize = () => {
+  windowHeight.value = window.innerHeight;
+  windowWidth.value = window.innerWidth;
+};
+
+// 处理iframe消息
+const handleMessage = (event) => {
+  // 确保消息来源是我们的iframe
+  if (iframeRef.value && event.source === iframeRef.value.contentWindow) {
+    try {
+      // 如果消息是字符串，尝试解析JSON
+      const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+      
+      // 根据消息类型处理
+      if (data.type === 'navigation' && data.target === 'dashboard') {
+        handleBack();
+      }
+    } catch (error) {
+      console.error('Error processing iframe message:', error);
+    }
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("resize", updateWindowSize);
+  // 添加消息监听器
+  window.addEventListener('message', handleMessage);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateWindowSize);
+  // 移除消息监听器
+  window.removeEventListener('message', handleMessage);
+});
+  
+const handleBack = () => {
+  router.push("/dashboard");
+};
+</script>
+
+<style lang="scss" scoped>
+.intermediate-page {
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  .iframe-box {
+    width: 100%;
+    height: 100%;
+  }
+  .back-btn {
+    position: fixed;
+    .back {
+      width: 140px;
+      height: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+      cursor: pointer;
+      background: rgba(31, 40, 163, 0.5215686275);
+      border: 1px solid #56a7aa;
+      border-radius: 10px;
+      padding: 0 10px;
+      transition: all 0.3s ease;
+      &:hover {
+        box-shadow: 0 0 10px 0 #56a7aa;
+      }
+    }
+
+    img {
+      display: block;
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+      border-radius: 50%;
+    }
+
+    span {
+      display: block;
+      width: 80px;
+      color: #ffffff;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/login/index.vue

@@ -379,7 +379,7 @@ export default {
         if (!regex.test(value)) {
           callback(
             new Error(
-              "密码不符合规范，必须包含至少一个数字、英文字母、“~!@#$%^&*()<>”中的一个特殊字符"
+              "密码不符合规范，必须包含至少一个数字、英文字母、~!@#$%^&*()<>中的一个特殊字符"
             )
           );
         } else if (this.ruleForm.checkPass !== "") {
@@ -1044,10 +1044,7 @@ export default {
       )
         .then((result) => {
           sessionStorage.setItem("menuList", JSON.stringify(result.data));
-          this.$router.push({
-              path: this.redirect || "/",
-              query: this.otherQuery,
-            });
+          this.$router.push('/intermediate');
         })
         .catch((e) => {
         });