From d2cc4dd6b4c5a4fac900b196a2c10ddc8d7d6f55 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 20 Jan 2025 15:40:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=9C=AA=E4=BF=9D=E5=AD=98=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visualization/CanvasCacheDialog.vue       | 49 +++++++++++++------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index 5d636e4037..33c8cb8433 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -3,22 +3,21 @@
     ref="canvasCacheDialogRef"
     :append-to-body="true"
     v-model="dialogShow"
-    width="360px"
+    width="420px"
     :show-close="false"
     trigger="click"
+    modal-class="canvasCacheDialog-modal"
+    class="canvasCacheDialog"
   >
-    <el-row style="height: 20px">
-      <el-col :span="3">
-        <Icon name="warn-tree"
-          ><warnTree style="width: 20px; height: 20px; float: right" class="svg-icon"
-        /></Icon>
-      </el-col>
-      <el-col :span="21">
-        <span style="font-size: 13px; margin-left: 10px; font-weight: bold; line-height: 20px">
-          {{ dialogInfo.tips }}
-        </span>
-      </el-col>
-    </el-row>
+    <div style="display: flex; flex-direction: row; align-items: flex-start">
+      <Icon name="warn-tree">
+        <warnTree class="svg-icon warn-tree" />
+      </Icon>
+      <span class="tips">
+        {{ dialogInfo.tips }}
+      </span>
+    </div>
+
     <template #footer>
       <div class="dialog-footer">
         <el-button size="mini" @click="doUseCache(false)">{{ t('visualization.no') }}</el-button>
@@ -67,4 +66,26 @@ defineExpose({
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less">
+.canvasCacheDialog-modal {
+  background: rgba(31, 35, 41, 0.4);
+}
+.canvasCacheDialog {
+  .warn-tree {
+    width: 24px;
+    height: 24px;
+  }
+  .tips {
+    margin-left: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .ed-dialog__header {
+    display: none;
+  }
+  :deep(.ed-dialog__header) {
+    display: none;
+  }
+}
+</style>