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

---
 dist/index.html   |   4 +-
 src/App.vue       | 135 ++++++++++++++++++++++++++++++++++++----------
 src/vite-env.d.ts |   5 ++
 3 files changed, 115 insertions(+), 29 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index fd3a6a4..20efaae 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-D4_xJwA9.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Cu9QlGHE.css">
+    <script type="module" crossorigin src="/assets/index-BxgaTP91.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DSvn6aKJ.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 2f0b5b5..f439e2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,7 +61,7 @@
               </div>
 
               <div class="top2-center-col">
-                <div class="top2-cards" data-node-id="270:19">
+                <div v-if="currentStyle === 'top3'" class="top2-cards" data-node-id="270:19">
                   <div class="top2-card" data-node-id="277:79">
                     <div class="top2-card-icon">
                       <img :src="top2CardIcons.device" alt="" />
@@ -103,13 +103,18 @@
                     </div>
                   </div>
                 </div>
-                <div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div>
-                <div class="top2-center" data-node-id="162:5">
-                  <div
-                    :class="['svg-wrapper', currentStyle === 'top3' ? 'is-top3' : 'is-top2']"
-                    ref="svgWrapper"
-                    v-html="svgContent"
-                  ></div>
+                <div v-if="currentStyle === 'top3'" class="top3-center-block" data-node-id="303:722">
+                  <div class="top3-subheader" data-node-id="303:1411">
+                    <span class="top3-subheader-line is-left"></span>
+                    <span class="top3-subheader-text">业务系统分层整体架构展示</span>
+                    <span class="top3-subheader-line is-right"></span>
+                  </div>
+                  <div class="top2-center" data-node-id="303:723">
+                    <div class="svg-wrapper is-top3" ref="svgWrapper" v-html="svgContent"></div>
+                  </div>
+                </div>
+                <div v-else class="top2-center" data-node-id="162:5">
+                  <div class="svg-wrapper 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">
@@ -145,6 +150,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
+import videoIcon from './assets/video.svg'
+import playIcon from './assets/play.svg'
+import aiIcon from './assets/ai.svg'
+import picIcon from './assets/pic.svg'
 
 type StyleType = 'circle' | 'top2' | 'top3'
 
@@ -161,10 +170,10 @@ const TOP_LAYOUTS = {
 let top2ResizeObserver: ResizeObserver | null = null
 
 const top2CardIcons = {
-  device: 'https://www.figma.com/api/mcp/asset/d0315e83-c91a-4df2-aa1c-c68bc334548a',
-  stream: 'https://www.figma.com/api/mcp/asset/05d50c71-8671-4e90-beb7-46c7186a2c1f',
-  ai: 'https://www.figma.com/api/mcp/asset/8e943e5a-ebbb-44d4-9caa-9d32a8329ab7',
-  cut: 'https://www.figma.com/api/mcp/asset/c1ba83a9-ec62-49b0-9b07-925faae32277',
+  device: videoIcon,
+  stream: playIcon,
+  ai: aiIcon,
+  cut: picIcon,
 }
 
 const updateTop2Scale = () => {
@@ -748,7 +757,7 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .top2-left-col {
-  width: 314.937px;
+  width: 315px;
   height: 734px;
   display: flex;
   flex-direction: column;
@@ -764,7 +773,7 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .top2-center-col {
-  width: 744.126px;
+  width: 744px;
   height: 734px;
   display: flex;
   flex-direction: column;
@@ -780,7 +789,7 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .top2-right-col {
-  width: 314.937px;
+  width: 315px;
   height: 734px;
   display: flex;
   flex-direction: column;
@@ -810,12 +819,12 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .panel-left-top {
-  width: 314.937px;
+  width: 315px;
   height: 234px;
 }
 
 .layout-top3 .panel-left-middle {
-  width: 314.937px;
+  width: 315px;
   height: 234px;
 }
 
@@ -827,7 +836,7 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .panel-left-bottom {
-  width: 314.937px;
+  width: 315px;
   height: 234px;
 }
 
@@ -839,7 +848,7 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .panel-right-top {
-  width: 314.937px;
+  width: 315px;
   height: 359px;
 }
 
@@ -851,7 +860,7 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .panel-right-bottom {
-  width: 314.937px;
+  width: 315px;
   height: 359px;
 }
 
@@ -870,13 +879,13 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .panel-center-bottom-left {
-  width: 364.063px;
-  height: 187.992px;
+  width: 364px;
+  height: 151.814px;
 }
 
 .layout-top3 .panel-center-bottom-right {
-  width: 364.063px;
-  height: 187.992px;
+  width: 364px;
+  height: 151.814px;
 }
 
 .layout-top2 .top2-center {
@@ -888,9 +897,10 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .top2-center {
-  width: 743.928px;
+  width: 696.481px;
   height: 333.004px;
   position: relative;
+  align-self: center;
 }
 
 .layout-top2 .top2-bottom-row {
@@ -902,8 +912,8 @@ const addTop2Animation = () => {
 }
 
 .layout-top3 .top2-bottom-row {
-  width: 744.126px;
-  height: 187.992px;
+  width: 744px;
+  height: 151.818px;
   display: flex;
   gap: 16px;
 }
@@ -977,6 +987,10 @@ const addTop2Animation = () => {
   display: none;
 }
 
+.layout-top3 .top2-cards {
+  width: 744px;
+}
+
 .top2-subheader {
   height: 51px;
   display: flex;
@@ -988,6 +1002,73 @@ const addTop2Animation = () => {
   color: #ffffff;
 }
 
+.layout-top3 .top2-subheader {
+  display: none;
+}
+
+.top3-center-block {
+  width: 744px;
+  height: 436.182px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+.top3-subheader {
+  width: 100%;
+  height: 87.178px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.top3-subheader-text {
+  font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 60px;
+  color: #ffffff;
+  letter-spacing: 0.2px;
+  text-align: center;
+}
+
+.top3-subheader-line {
+  position: absolute;
+  top: 50%;
+  width: 214.131px;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 55%, rgba(255, 255, 255, 0));
+  transform: translateY(-50%);
+}
+
+.top3-subheader-line::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.top3-subheader-line.is-left {
+  left: 0;
+}
+
+.top3-subheader-line.is-left::before {
+  left: 0;
+}
+
+.top3-subheader-line.is-right {
+  right: 0;
+}
+
+.top3-subheader-line.is-right::before {
+  right: 0;
+}
+
 .svg-wrapper.is-top2,
 .svg-wrapper.is-top3 {
   flex: none;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 3804a43..517f605 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -4,3 +4,8 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module '*.svg' {
+  const src: string
+  export default src
+}
