gavin/monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update at 2026-01-14 18:28:05

Browse Source
This commit is contained in:
douboer@gmail.com
2026-01-14 18:28:05 +08:00
parent b72ea95dce
commit 25f2d74c01
3 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/App.vue
View File

@@ -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;