From ff85b906d2b5142519a892d8730c523a21868709 Mon Sep 17 00:00:00 2001
From: "douboer@gmail.com" <gavin@gavin-mac-mini.local>
Date: Wed, 14 Jan 2026 18:14:14 +0800
Subject: [PATCH] update at 2026-01-14 18:14:14

---
 dist/index.html |   4 +-
 src/App.vue     | 322 +++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 278 insertions(+), 48 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index 6bb4931..fd3a6a4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,8 +7,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>火情监控全链路业务监控视图</title>
-    <script type="module" crossorigin src="/assets/index-DVL1K2L5.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-nKce6T9N.css">
+    <script type="module" crossorigin src="/assets/index-D4_xJwA9.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cu9QlGHE.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 3b9fc4c..2f0b5b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="monitor-container" :class="{ 'is-top2': currentStyle === 'top2' }">
+  <div
+    class="monitor-container"
+    :class="{ 'is-top2': currentStyle === 'top2', 'is-top3': currentStyle === 'top3' }"
+  >
     <!-- 样式切换按钮 -->
-    <div class="style-switcher" :class="{ 'is-top2': currentStyle === 'top2' }">
+    <div
+      class="style-switcher"
+      :class="{ 'is-top2': currentStyle === 'top2', 'is-top3': currentStyle === 'top3' }"
+    >
       <button 
         :class="['style-btn', { active: currentStyle === 'circle' }]"
         @click="switchStyle('circle')"
@@ -14,10 +20,21 @@
       >
         原型-2
       </button>
+      <button 
+        :class="['style-btn', { active: currentStyle === 'top3' }]"
+        @click="switchStyle('top3')"
+      >
+        原型-3
+      </button>
     </div>
 
-    <template v-if="currentStyle === 'top2'">
-      <div class="top2-stage" ref="top2Stage" :style="{ '--top2-scale': top2Scale }">
+    <template v-if="currentStyle === 'top2' || currentStyle === 'top3'">
+      <div
+        class="top2-stage"
+        :class="topLayoutClass"
+        ref="top2Stage"
+        :style="{ '--top2-scale': top2Scale }"
+      >
         <div class="top2-scale">
           <div class="top2-layout">
             <div class="top2-header" data-node-id="153:2111">
@@ -29,11 +46,17 @@
                 <div class="panel-outline panel-left-top" data-node-id="153:2087">
                   <div class="panel-label label-metric-11" data-node-id="153:2098">视联拉流质量统计</div>
                 </div>
-                <div class="panel-outline panel-left-middle" data-node-id="153:2089">
+                <div v-if="currentStyle === 'top3'" class="panel-outline panel-left-middle" data-node-id="153:2089">
                   <div class="panel-label label-metric-21" data-node-id="153:2099">AI分析质量监控</div>
                 </div>
                 <div class="panel-outline panel-left-bottom" data-node-id="271:27">
-                  <div class="panel-label label-metric-31" data-node-id="271:28">网络质量分析</div>
+                  <div
+                    class="panel-label"
+                    :class="currentStyle === 'top3' ? 'label-metric-31' : 'label-metric-21'"
+                    data-node-id="271:28"
+                  >
+                    {{ currentStyle === 'top3' ? '网络质量分析' : 'AI分析质量监控' }}
+                  </div>
                 </div>
               </div>
 
@@ -82,7 +105,11 @@
                 </div>
                 <div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div>
                 <div class="top2-center" data-node-id="162:5">
-                  <div class="svg-wrapper is-top2" ref="svgWrapper" v-html="svgContent"></div>
+                  <div
+                    :class="['svg-wrapper', currentStyle === 'top3' ? 'is-top3' : 'is-top2']"
+                    ref="svgWrapper"
+                    v-html="svgContent"
+                  ></div>
                 </div>
                 <div class="top2-bottom-row">
                   <div class="panel-outline panel-center-bottom-left" data-node-id="153:2091">
@@ -117,9 +144,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
 
-type StyleType = 'circle' | 'top2'
+type StyleType = 'circle' | 'top2' | 'top3'
 
 const svgWrapper = ref<HTMLElement | null>(null)
 const svgContent = ref('')
@@ -127,8 +154,10 @@ const currentStyle = ref<StyleType>('circle')
 const top2Stage = ref<HTMLElement | null>(null)
 const top2Scale = ref(1)
 
-const TOP2_WIDTH = 1438
-const TOP2_HEIGHT = 832
+const TOP_LAYOUTS = {
+  top2: { width: 1296, height: 692 },
+  top3: { width: 1438, height: 832 },
+}
 let top2ResizeObserver: ResizeObserver | null = null
 
 const top2CardIcons = {
@@ -141,10 +170,13 @@ const top2CardIcons = {
 const updateTop2Scale = () => {
   const stage = top2Stage.value
   if (!stage) return
+  if (currentStyle.value === 'circle') return
+  const layout = TOP_LAYOUTS[currentStyle.value]
+  if (!layout) return
   const { width, height } = stage.getBoundingClientRect()
   if (!width || !height) return
-  const scaleX = width / TOP2_WIDTH
-  const scaleY = height / TOP2_HEIGHT
+  const scaleX = width / layout.width
+  const scaleY = height / layout.height
   top2Scale.value = Math.min(scaleX, scaleY)
 }
 
@@ -201,7 +233,7 @@ onBeforeUnmount(() => {
 })
 
 watch(currentStyle, async (style) => {
-  if (style === 'top2') {
+  if (style === 'top2' || style === 'top3') {
     await nextTick()
     attachTop2Observer()
     updateTop2Scale()
@@ -210,6 +242,10 @@ watch(currentStyle, async (style) => {
   }
 })
 
+const topLayoutClass = computed(() => (
+  currentStyle.value === 'top3' ? 'layout-top3' : 'layout-top2'
+))
+
 const addFlowingAnimation = () => {
   if (!svgWrapper.value) return
   
@@ -218,6 +254,8 @@ const addFlowingAnimation = () => {
     console.log('SVG not found')
     return
   }
+
+  svg.querySelectorAll('.flowing-line').forEach((node) => node.remove())
   
   // 查找所有可能的连线元素
   const allPaths = svg.querySelectorAll('path, line, polyline')
@@ -332,6 +370,8 @@ const addTop2Animation = () => {
     console.log('SVG not found')
     return
   }
+
+  svg.querySelectorAll('.flowing-line-top2').forEach((node) => node.remove())
   
   // 查找所有可能的连线元素
   const allPaths = svg.querySelectorAll('path, line, polyline')
@@ -490,7 +530,8 @@ const addTop2Animation = () => {
   margin-top: 10px;
 }
 
-.style-switcher.is-top2 {
+.style-switcher.is-top2,
+.style-switcher.is-top3 {
   margin-top: 0;
   position: absolute;
   top: 24px;
@@ -579,7 +620,8 @@ const addTop2Animation = () => {
   -webkit-overflow-scrolling: touch;
 }
 
-.monitor-container.is-top2 {
+.monitor-container.is-top2,
+.monitor-container.is-top3 {
   padding: 0;
   gap: 0;
   align-items: stretch;
@@ -599,8 +641,6 @@ const addTop2Animation = () => {
 
 .top2-scale {
   position: relative;
-  width: calc(1438px * var(--top2-scale));
-  height: calc(832px * var(--top2-scale));
   flex-shrink: 0;
 }
 
@@ -608,13 +648,31 @@ const addTop2Animation = () => {
   position: absolute;
   left: 0;
   top: 0;
-  width: 1438px;
-  height: 832px;
   background: #2543a5;
   border-radius: 0;
   overflow: hidden;
   transform: scale(var(--top2-scale));
   transform-origin: top left;
+}
+
+.layout-top2 .top2-scale {
+  width: calc(1296px * var(--top2-scale));
+  height: calc(692px * var(--top2-scale));
+}
+
+.layout-top3 .top2-scale {
+  width: calc(1438px * var(--top2-scale));
+  height: calc(832px * var(--top2-scale));
+}
+
+.layout-top2 .top2-layout {
+  width: 1296px;
+  height: 692px;
+}
+
+.layout-top3 .top2-layout {
+  width: 1438px;
+  height: 832px;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -623,10 +681,24 @@ const addTop2Animation = () => {
 }
 
 .top2-header {
+  box-sizing: border-box;
+}
+
+.layout-top2 .top2-header {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  width: 1264px;
+  height: 50px;
+  border-radius: 16px;
+  background: #e5e5e5;
+  border: 0.297px solid #9fbaff;
+}
+
+.layout-top3 .top2-header {
   height: 50px;
   border-radius: 16px;
   background: rgba(229, 229, 229, 0);
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -634,20 +706,48 @@ const addTop2Animation = () => {
 
 .top2-title {
   font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  font-size: 32px;
   font-weight: 700;
+}
+
+.layout-top2 .top2-title {
+  position: absolute;
+  left: 516.1px;
+  top: 7.78px;
+  font-size: 28.491px;
+  color: #2543a5;
+  letter-spacing: 0.3px;
+}
+
+.layout-top3 .top2-title {
+  font-size: 32px;
   color: #f9d1b0;
   letter-spacing: 0.5px;
   text-align: center;
 }
 
-.top2-content {
+.layout-top2 .top2-content {
+  position: absolute;
+  left: 16px;
+  top: 82px;
+  width: 1264px;
+  height: 594px;
+}
+
+.layout-top3 .top2-content {
   flex: 1;
   display: flex;
   gap: 16px;
 }
 
-.top2-left-col {
+.layout-top2 .top2-left-col {
+  position: absolute;
+  left: 0;
+  top: 26.055px;
+  width: 232.377px;
+  height: 541.889px;
+}
+
+.layout-top3 .top2-left-col {
   width: 314.937px;
   height: 734px;
   display: flex;
@@ -655,7 +755,15 @@ const addTop2Animation = () => {
   gap: 16px;
 }
 
-.top2-center-col {
+.layout-top2 .top2-center-col {
+  position: absolute;
+  left: 248.377px;
+  top: 25.15px;
+  width: 744.126px;
+  height: 543.699px;
+}
+
+.layout-top3 .top2-center-col {
   width: 744.126px;
   height: 734px;
   display: flex;
@@ -663,7 +771,15 @@ const addTop2Animation = () => {
   gap: 16px;
 }
 
-.top2-right-col {
+.layout-top2 .top2-right-col {
+  position: absolute;
+  left: 1008.503px;
+  top: 25.907px;
+  width: 232.377px;
+  height: 542.186px;
+}
+
+.layout-top3 .top2-right-col {
   width: 314.937px;
   height: 734px;
   display: flex;
@@ -672,55 +788,120 @@ const addTop2Animation = () => {
 }
 
 .panel-outline {
-  position: relative;
   border: 0.297px solid #f0e2e2;
   border-radius: 10.684px;
   background: rgba(217, 217, 217, 0);
   box-sizing: border-box;
 }
 
-.panel-left-top {
+.layout-top2 .panel-outline {
+  position: absolute;
+}
+
+.layout-top3 .panel-outline {
+  position: relative;
+}
+
+.layout-top2 .panel-left-top {
+  left: 0;
+  top: 0;
+  width: 232.377px;
+  height: 259.977px;
+}
+
+.layout-top3 .panel-left-top {
   width: 314.937px;
   height: 234px;
 }
 
-.panel-left-middle {
+.layout-top3 .panel-left-middle {
   width: 314.937px;
   height: 234px;
 }
 
-.panel-left-bottom {
+.layout-top2 .panel-left-bottom {
+  left: 0;
+  top: 275.977px;
+  width: 232.377px;
+  height: 265.912px;
+}
+
+.layout-top3 .panel-left-bottom {
   width: 314.937px;
   height: 234px;
 }
 
-.panel-right-top {
+.layout-top2 .panel-right-top {
+  left: 0;
+  top: 0;
+  width: 232.377px;
+  height: 259.977px;
+}
+
+.layout-top3 .panel-right-top {
   width: 314.937px;
   height: 359px;
 }
 
-.panel-right-bottom {
+.layout-top2 .panel-right-bottom {
+  left: 0;
+  top: 275.977px;
+  width: 232.377px;
+  height: 266.209px;
+}
+
+.layout-top3 .panel-right-bottom {
   width: 314.937px;
   height: 359px;
 }
 
-.panel-center-bottom-left {
+.layout-top2 .panel-center-bottom-left {
+  left: 0;
+  top: 0;
+  width: 360.668px;
+  height: 175.692px;
+}
+
+.layout-top2 .panel-center-bottom-right {
+  left: 386.668px;
+  top: 0;
+  width: 357.216px;
+  height: 175.692px;
+}
+
+.layout-top3 .panel-center-bottom-left {
   width: 364.063px;
   height: 187.992px;
 }
 
-.panel-center-bottom-right {
+.layout-top3 .panel-center-bottom-right {
   width: 364.063px;
   height: 187.992px;
 }
 
-.top2-center {
+.layout-top2 .top2-center {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 743.928px;
+  height: 352.007px;
+}
+
+.layout-top3 .top2-center {
   width: 743.928px;
   height: 333.004px;
   position: relative;
 }
 
-.top2-bottom-row {
+.layout-top2 .top2-bottom-row {
+  position: absolute;
+  left: 0;
+  top: 368.007px;
+  width: 744.126px;
+  height: 175.692px;
+}
+
+.layout-top3 .top2-bottom-row {
   width: 744.126px;
   height: 187.992px;
   display: flex;
@@ -791,6 +972,11 @@ const addTop2Animation = () => {
   color: rgba(191, 191, 191, 0.61);
 }
 
+.layout-top2 .top2-cards,
+.layout-top2 .top2-subheader {
+  display: none;
+}
+
 .top2-subheader {
   height: 51px;
   display: flex;
@@ -802,7 +988,8 @@ const addTop2Animation = () => {
   color: #ffffff;
 }
 
-.svg-wrapper.is-top2 {
+.svg-wrapper.is-top2,
+.svg-wrapper.is-top3 {
   flex: none;
   width: 100%;
   height: 100%;
@@ -814,7 +1001,16 @@ const addTop2Animation = () => {
   overflow: hidden;
 }
 
-.panel-label {
+.layout-top2 .panel-label {
+  position: absolute;
+  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 18.994px;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 0.2px;
+}
+
+.layout-top3 .panel-label {
   position: absolute;
   left: 50%;
   top: 20px;
@@ -828,7 +1024,39 @@ const addTop2Animation = () => {
   width: 220px;
 }
 
-.label-alarm {
+.layout-top2 .label-metric-11 {
+  left: 61.73px;
+  top: 91.7px;
+}
+
+.layout-top2 .label-metric-21 {
+  left: 61.73px;
+  top: 121.68px;
+}
+
+.layout-top2 .label-metric-22 {
+  left: 132.11px;
+  top: 76.27px;
+}
+
+.layout-top2 .label-metric-23 {
+  left: 126.11px;
+  top: 76.27px;
+}
+
+.layout-top2 .label-alarm {
+  left: 78.35px;
+  top: 18.7px;
+  color: #f02525;
+}
+
+.layout-top2 .label-fault {
+  left: 78.35px;
+  top: 22.85px;
+  color: #ffffff;
+}
+
+.layout-top3 .label-alarm {
   color: #f02525;
 }
 
@@ -840,13 +1068,15 @@ const addTop2Animation = () => {
   touch-action: pan-x pan-y;
 }
 
-.svg-wrapper.is-top2 :deep(svg) {
+.svg-wrapper.is-top2 :deep(svg),
+.svg-wrapper.is-top3 :deep(svg) {
   height: 100%;
   max-height: none;
   filter: none;
 }
 
-.svg-wrapper.is-top2 :deep(#shape1) {
+.svg-wrapper.is-top2 :deep(#shape1),
+.svg-wrapper.is-top3 :deep(#shape1) {
   fill: transparent;
   stroke: none;
 }
@@ -868,14 +1098,14 @@ const addTop2Animation = () => {
     letter-spacing: 1px;
   }
   
-  .monitor-container:not(.is-top2) .svg-wrapper {
+  .monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
     padding: 20px;
   }
 }
 
 /* 手机适配 */
 @media (max-width: 768px) {
-  .monitor-container:not(.is-top2) {
+  .monitor-container:not(.is-top2):not(.is-top3) {
     gap: 15px;
     padding: 10px;
   }
@@ -887,7 +1117,7 @@ const addTop2Animation = () => {
     border-radius: 15px;
   }
   
-  .monitor-container:not(.is-top2) .svg-wrapper {
+  .monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
     padding: 15px;
     border-radius: 15px;
   }
@@ -895,7 +1125,7 @@ const addTop2Animation = () => {
 
 /* 小屏手机适配 */
 @media (max-width: 480px) {
-  .monitor-container:not(.is-top2) {
+  .monitor-container:not(.is-top2):not(.is-top3) {
     gap: 10px;
     padding: 8px;
   }
@@ -907,7 +1137,7 @@ const addTop2Animation = () => {
     border-radius: 12px;
   }
   
-  .monitor-container:not(.is-top2) .svg-wrapper {
+  .monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
     padding: 10px;
     border-radius: 12px;
   }
