创建组态2D与3D页面文件，修改部分权限和配置并提交

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://127.0.0.1:48080'
+VITE_BASE_URL='http://123.60.223.250:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

.vscode/settings.json

@@ -65,7 +65,7 @@
     "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -86,7 +86,7 @@
     "source.fixAll.eslint": "explicit"
   },
   "[vue]": {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+    "editor.defaultFormatter": "octref.vetur"
   },
   "i18n-ally.localesPaths": ["src/locales"],
   "i18n-ally.keystyle": "nested",

src/layout/components/ToolHeader.vue

@@ -11,6 +11,8 @@ import RouterSearch from '@/components/RouterSearch/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
+import { useRouter } from 'vue-router'
+
 const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('tool-header')
@@ -44,44 +46,52 @@ const message = computed(() => appStore.getMessage)
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
-    return () => (
-      <div
-        id={`${variables.namespace}-tool-header`}
-        class={[
-          prefixCls,
-          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
-          'dark:bg-[var(--el-bg-color)]'
-        ]}
-      >
-        {layout.value !== 'top' ? (
+    const { currentRoute } = useRouter()
+    const isTopologyRoute = false && /^\/topology/.test(currentRoute?.value?.path || '')
+
+    if (!isTopologyRoute) {
+      return () => (
+        <div
+          id={`${variables.namespace}-tool-header`}
+          class={[
+            prefixCls,
+            'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
+            'dark:bg-[var(--el-bg-color)]'
+          ]}
+        >
+          {layout.value !== 'top' ? (
+            <div class="h-full flex items-center">
+              {hamburger.value && layout.value !== 'cutMenu' ? (
+                <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
+              ) : undefined}
+              {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
+            </div>
+          ) : undefined}
           <div class="h-full flex items-center">
-            {hamburger.value && layout.value !== 'cutMenu' ? (
-              <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
+            {screenfull.value ? (
+              <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
+            ) : undefined}
+            {search.value ? <RouterSearch isModal={false} /> : undefined}
+            {size.value ? (
+              <SizeDropdown
+                class="custom-hover"
+                color="var(--top-header-text-color)"
+              ></SizeDropdown>
+            ) : undefined}
+            {locale.value ? (
+              <LocaleDropdown
+                class="custom-hover"
+                color="var(--top-header-text-color)"
+              ></LocaleDropdown>
             ) : undefined}
-            {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
+            {message.value ? (
+              <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
+            ) : undefined}
+            <UserInfo></UserInfo>
           </div>
-        ) : undefined}
-        <div class="h-full flex items-center">
-          {screenfull.value ? (
-            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
-          ) : undefined}
-          {search.value ? <RouterSearch isModal={false} /> : undefined}
-          {size.value ? (
-            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
-          ) : undefined}
-          {locale.value ? (
-            <LocaleDropdown
-              class="custom-hover"
-              color="var(--top-header-text-color)"
-            ></LocaleDropdown>
-          ) : undefined}
-          {message.value ? (
-            <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
-          ) : undefined}
-          <UserInfo></UserInfo>
         </div>
-      </div>
-    )
+      )
+    }
   }
 })
 </script>

src/layout/components/useRenderLayout.tsx

@@ -9,6 +9,8 @@ import ToolHeader from './ToolHeader.vue'
 import { ElScrollbar } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 
+import { useRouter } from 'vue-router'
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('layout')
@@ -36,6 +38,8 @@ const mobile = computed(() => appStore.getMobile)
 const fixedMenu = computed(() => appStore.getFixedMenu)
 
 export const useRenderLayout = () => {
+  const { currentRoute } = useRouter()
+  const isTopologyRoute = /^\/topology/.test(currentRoute?.value?.path || "");
   const renderClassic = () => {
     return (
       <>
@@ -84,32 +88,34 @@ export const useRenderLayout = () => {
               }
             ]}
           >
-            <div
-              class={[
-                {
-                  'fixed top-0 left-0 z-10': fixedHeader.value,
-                  'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
-                    collapse.value && fixedHeader.value && !mobile.value,
-                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
-                    !collapse.value && fixedHeader.value && !mobile.value,
-                  '!w-full !left-0': mobile.value
-                }
-              ]}
-              style="transition: all var(--transition-time-02);"
-            >
-              <ToolHeader
+            {false && isTopologyRoute ? undefined : (
+              <div
                 class={[
-                  'bg-[var(--top-header-bg-color)]',
                   {
-                    'layout-border__bottom': !tagsView.value
+                    'fixed top-0 left-0 z-10': fixedHeader.value,
+                    'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
+                      collapse.value && fixedHeader.value && !mobile.value,
+                    'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
+                      !collapse.value && fixedHeader.value && !mobile.value,
+                    '!w-full !left-0': mobile.value
                   }
                 ]}
-              ></ToolHeader>
+                style="transition: all var(--transition-time-02);"
+              >
+                <ToolHeader
+                  class={[
+                    'bg-[var(--top-header-bg-color)]',
+                    {
+                      'layout-border__bottom': !tagsView.value
+                    }
+                  ]}
+                ></ToolHeader>
 
-              {tagsView.value ? (
-                <TagsView class="layout-border__top layout-border__bottom"></TagsView>
-              ) : undefined}
-            </div>
+                {tagsView.value ? (
+                  <TagsView class="layout-border__top layout-border__bottom"></TagsView>
+                ) : undefined}
+              </div>
+            )}
 
             <AppView></AppView>
           </ElScrollbar>

src/views/topology/2d/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>2D-testPage</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

src/views/topology/3d/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>3D-testPage</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

src/views/topology/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>main</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>