feat:添加导航栏外链

src/components/Nav.vue

@@ -3,20 +3,12 @@
     <img :src="logo" alt="logo" class="header__logo" />
     <span class="platform-name">{{ title }}</span>
     <nav class="header__nav">
-      <div
-        class="header__nav--item"
-        v-for="item in NAV_LIST"
-        :key="item.path"
-        :class="{ active: selectedKey === item.name }"
-        @click="item.name!=='Skyeye' && item.name!=='Tiansuo' && handleNavClick(item)"
-      >
-        
-        <a v-if="item.name==='Skyeye'" :href="skyeyeUrl" target="_blank" @click.stop>实时监控</a>
-        <a v-else-if="item.name==='Tiansuo'" :href="tiansuoUrl" target="_blank" @click.stop>物联集成</a>
-        <span v-else>{{ item.meta?.title }}</span>
+      <div class="header__nav--item" v-for="item in NAV_LIST" :key="item.path"
+        :class="{ active: selectedKey === item.name }" @click="handleNavClick(item)">
+        <span>{{ item.meta?.title }}</span>
       </div>
     </nav>
-    
+
     <SwitchTenant v-if="userStore.info.tenantId === SYS_TENANT_ID" />
     <div class="platform__right">
       <!-- <div class="platform__right__search">
@@ -24,8 +16,8 @@
           <template #prepend>
             <img :src="searchIcon" alt="search" class="search-icon" @click="handleSearch" />
           </template>
-        </el-input>
-      </div> -->
+</el-input>
+</div> -->
       <div class="platform__right__login">
         <span @click="userStore.showLogin = true" v-if="!userStore.info?.id">登录</span>
         <UserInfo v-else />
@@ -38,177 +30,206 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
-  import { useRouter, useRoute } from 'vue-router';
-  import UpdatePwd from '@/components/UpdatePwd.vue';
-  import UserInfo from '@/components/UserInfo.vue';
-  import Login from '@/components/Login/Login.vue';
-  import SwitchAccount from '@/components/Login/SwitchAccount.vue';
-  import SwitchTenant from '@/layout/components/SwitchTenant.vue';
-  import { useUserStore } from '@/store/modules/user';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { SYS_TENANT_ID } from '@/utils/useTargetTenantIdSetting';
-  import { NAV_LIST } from '@/constant/nav';
-  import logo from 'assets/images/home/comac-logo@1X.png';
-  import searchIcon from 'assets/svg/search.svg';
-
-  const userStore = useUserStore();
-  const activeNav = ref(NAV_LIST[0].name);
-  const router = useRouter();
-  const searchValue = ref('');
-
-  const props = withDefaults(defineProps<{ usePx?: boolean }>(), { usePx: false });
-  const usePx = computed(() => props.usePx === true);
-
-  const handleSearch = () => {
-    console.log('searchValue', searchValue.value);
-  };
-
-  const currentRoute = useRoute();
-  const { title ,skyeyeUrl,tiansuoUrl} = useGlobSetting();
-
-  const handleNavClick = (item: { name: string; path: string }) => {
-    if (!item.path) {
-      router.replace({ name: 'StayTune' });
-      // ElMessage.warning({ message: `${item.name}功能建设中，暂无法访问`, offset: 100, grouping: true });
-      return;
-    }
-    router.push(item.path);
-  };
+import { ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import UpdatePwd from '@/components/UpdatePwd.vue';
+import UserInfo from '@/components/UserInfo.vue';
+import Login from '@/components/Login/Login.vue';
+import SwitchAccount from '@/components/Login/SwitchAccount.vue';
+import SwitchTenant from '@/layout/components/SwitchTenant.vue';
+import { useUserStore } from '@/store/modules/user';
+import { useGlobSetting } from '@/hooks/setting';
+import { SYS_TENANT_ID } from '@/utils/useTargetTenantIdSetting';
+import { NAV_LIST } from '@/constant/nav';
+import logo from 'assets/images/home/comac-logo@1X.png';
+import searchIcon from 'assets/svg/search.svg';
 
-  const selectedKey = computed(() => {
-    return currentRoute.matched[0]?.name;
-  });
-</script>
+const userStore = useUserStore();
+const activeNav = ref(NAV_LIST[0].name);
+const router = useRouter();
+const searchValue = ref('');
 
-<style lang="scss" scoped>
-  .header {
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    height: 78cpx;
-    background: url('assets/images/home/nav-bg@1X.png') no-repeat center center / cover;
-    z-index: 2;
-    &__nav {
-      @include flex-center;
-      gap: 20cpx;
-      height: 100%;
-      margin-left: 32cpx;
-      &--item {
-        @include flex-center;
-        height: 45cpx;
-        padding: 10cpx 20cpx;
-        gap: 8cpx;
-        font-size: 18cpx;
-        color: #333;
-        border-radius: 4cpx;
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        // transition: all 0.3s ease-in-out;
-        &.active,
-        &:hover {
-          background: linear-gradient(180deg, #33afff, $primary-color);
-          color: $white-color;
-        }
-      }
-    }
-  }
-  .header__logo {
-    width: 34cpx;
-    height: 34cpx;
-    margin-left: 38cpx;
+const props = withDefaults(defineProps<{ usePx?: boolean }>(), { usePx: false });
+const usePx = computed(() => props.usePx === true);
+
+const handleSearch = () => {
+  console.log('searchValue', searchValue.value);
+};
+
+const currentRoute = useRoute();
+const { title } = useGlobSetting();
+
+const handleNavClick = (item: { name: string; path: string; isRedrect: boolean }) => {
+
+  if (!item.path) {
+    router.replace({ name: 'StayTune' });
+    // ElMessage.warning({ message: `${item.name}功能建设中，暂无法访问`, offset: 100, grouping: true });
+    return;
   }
-  .platform-name {
-    font-size: 18cpx;
-    font-weight: 550;
-    margin-left: 9cpx;
+
+  if (item.isRedrect) {
+    window.open(item.path, '_blank');
+    return;
   }
-  .platform__right {
+  router.push(item.path);
+};
+
+const selectedKey = computed(() => {
+  return currentRoute.matched[0]?.name;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 78cpx;
+  background: url('assets/images/home/nav-bg@1X.png') no-repeat center center / cover;
+  z-index: 2;
+
+  &__nav {
     @include flex-center;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 73cpx;
-    &__search {
-      @include flex-center;
-      width: 210cpx;
-      height: 100%;
-      padding: 28cpx 26cpx;
-      background: rgba($white-color, 0.4);
-    }
-    &__login {
+    gap: 20cpx;
+    height: 100%;
+    margin-left: 32cpx;
+
+    &--item {
       @include flex-center;
-      gap: 10cpx;
-      height: 100%;
-      padding: 27cpx 40cpx 26cpx 40cpx;
+      height: 45cpx;
+      padding: 10cpx 20cpx;
+      gap: 8cpx;
       font-size: 18cpx;
-      color: $primary-color;
-      cursor: pointer;
-    }
-  }
-  .input-with-icon {
-    :deep(.el-input__wrapper),
-    :deep(.el-input-group__prepend) {
-      background-color: transparent;
-      box-shadow: none;
-      padding: 0;
-    }
-    :deep(.el-input__inner) {
-      width: 120cpx;
-      margin-left: 5cpx;
-      font-size: 16cpx;
-      color: #909399;
-    }
-    .search-icon {
-      width: 28cpx;
-      height: 28cpx;
+      color: #333;
+      border-radius: 4cpx;
       cursor: pointer;
+      border: 1px solid transparent;
+      border-radius: 4px;
+
+      // transition: all 0.3s ease-in-out;
+      &.active,
+      &:hover {
+        background: linear-gradient(180deg, #33afff, $primary-color);
+        color: $white-color;
+      }
     }
   }
-  /* 使用 px 的样式覆盖（用于固定画布布局） */
-  .header.use-px {
-    height: 78px;
-  }
-  .header.use-px .header__nav {
-    gap: 14px;
-    margin-left: 32px;
-  }
-  .header.use-px .header__nav--item {
-    height: 45px;
-    padding: 10px 20px;
-    font-size: 18px;
-    border-radius: 4px;
-  }
-  .header.use-px .header__logo {
-    width: 34px;
-    height: 34px;
-    margin-left: 38px;
-  }
-  .header.use-px .platform-name {
-    font-size: 18px;
-    margin-left: 9px;
-  }
-  .header.use-px .platform__right {
-    height: 73px;
+}
+
+.header__logo {
+  width: 34cpx;
+  height: 34cpx;
+  margin-left: 38cpx;
+}
+
+.platform-name {
+  font-size: 18cpx;
+  font-weight: 550;
+  margin-left: 9cpx;
+}
+
+.platform__right {
+  @include flex-center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 73cpx;
+
+  &__search {
+    @include flex-center;
+    width: 210cpx;
+    height: 100%;
+    padding: 28cpx 26cpx;
+    background: rgba($white-color, 0.4);
   }
-  .header.use-px .platform__right__search {
-    width: 210px;
-    padding: 28px 26px;
+
+  &__login {
+    @include flex-center;
+    gap: 10cpx;
+    height: 100%;
+    padding: 27cpx 40cpx 26cpx 40cpx;
+    font-size: 18cpx;
+    color: $primary-color;
+    cursor: pointer;
   }
-  .header.use-px .platform__right__login {
-    gap: 10px;
-    padding: 27px 40px 26px 40px;
-    font-size: 18px;
+}
+
+.input-with-icon {
+
+  :deep(.el-input__wrapper),
+  :deep(.el-input-group__prepend) {
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
   }
-  .header.use-px .input-with-icon :deep(.el-input__inner) {
-    width: 120px;
-    margin-left: 5px;
-    font-size: 16px;
+
+  :deep(.el-input__inner) {
+    width: 120cpx;
+    margin-left: 5cpx;
+    font-size: 16cpx;
+    color: #909399;
   }
-  .header.use-px .input-with-icon .search-icon {
-    width: 28px;
-    height: 28px;
+
+  .search-icon {
+    width: 28cpx;
+    height: 28cpx;
+    cursor: pointer;
   }
+}
+
+/* 使用 px 的样式覆盖（用于固定画布布局） */
+.header.use-px {
+  height: 78px;
+}
+
+.header.use-px .header__nav {
+  gap: 14px;
+  margin-left: 32px;
+}
+
+.header.use-px .header__nav--item {
+  height: 45px;
+  padding: 10px 20px;
+  font-size: 18px;
+  border-radius: 4px;
+}
+
+.header.use-px .header__logo {
+  width: 34px;
+  height: 34px;
+  margin-left: 38px;
+}
+
+.header.use-px .platform-name {
+  font-size: 18px;
+  margin-left: 9px;
+}
+
+.header.use-px .platform__right {
+  height: 73px;
+}
+
+.header.use-px .platform__right__search {
+  width: 210px;
+  padding: 28px 26px;
+}
+
+.header.use-px .platform__right__login {
+  gap: 10px;
+  padding: 27px 40px 26px 40px;
+  font-size: 18px;
+}
+
+.header.use-px .input-with-icon :deep(.el-input__inner) {
+  width: 120px;
+  margin-left: 5px;
+  font-size: 16px;
+}
+
+.header.use-px .input-with-icon .search-icon {
+  width: 28px;
+  height: 28px;
+}
 </style>

src/constant/nav.ts

@@ -3,7 +3,8 @@
  */
 
 import { HOME_PAGE } from '@/router/full-routes';
-
+import { useGlobSetting } from '@/hooks/setting';
+const { skyeyeUrl, tiansuoUrl } = useGlobSetting();
 // 首页导航列表 根据后端返回权限控制（首页永远存在）
 export const NAV_LIST = [
   {
@@ -59,19 +60,19 @@ export const NAV_LIST = [
     },
   },
   {
-    name:"Skyeye",
-    path:'/skyeye-playform',
-    meta:{
-      title:"实时监控",
-    }
+    name: 'Skyeye',
+    path: skyeyeUrl,
+    isRedrect: true,
+    meta: {
+      title: '实时监控',
+    },
   },
-   {
-    name:"Tiansuo",
-    path:'/Tiansuo',
-    meta:{
-      title:'物联集成',
-    }
+  {
+    name: 'Tiansuo',
+    path: tiansuoUrl,
+    isRedrect: true,
+    meta: {
+      title: '物联集成',
+    },
   },
-
-
 ];