From e0cb62dab33393498ac6690e57d542ff56004f23 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 17 Apr 2024 16:03:45 -0700
Subject: [PATCH 1/3] fix(setting-styles): "Reset Position" style bug when
 screen percentage changes;

---
 .../settings/styles/src/components/inputs/ModalMask.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 703172a736..317280eef1 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -1,6 +1,6 @@
 <template>
   <teleport to="body">
-    <div :style="{ top: modal.top + 'px', left: modal.left + 'px' }" class="modal-wrapper">
+    <div :style="{ top: modal.top + 'px' }" class="modal-wrapper">
       <div class="modal-mask" @click="$emit('close')"></div>
       <div class="modal-content">
         <slot></slot>
@@ -49,9 +49,9 @@ export default {
 .modal-wrapper {
   position: fixed;
   top: 0;
-  left: 0;
+  right: 0;
   margin-top: 10px;
-  width: calc(var(--base-right-panel-width) - 24px);
+  width: calc(var(--base-right-panel-width));
   z-index: 9999;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
   .modal-mask {

From 83c42e2de83a5aaad5525488adefc0b955f6a4de Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 17 Apr 2024 16:29:39 -0700
Subject: [PATCH 2/3] fix(setting-styles): "Reset Modal" styles not match the
 design draft;

---
 .../styles/src/components/inputs/ModalMask.vue       | 12 ++++++------
 .../styles/src/components/inputs/ResetButton.vue     |  9 ++++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 317280eef1..c8ce59ab9d 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -50,28 +50,28 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  margin-top: 10px;
-  width: calc(var(--base-right-panel-width));
+  margin-top: 18px;
+  width: calc(var(--base-right-panel-width) - 16px);
   z-index: 9999;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
   .modal-mask {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: calc(100% - var(--base-right-panel-width));
-    background: rgba(33, 33, 33, 0.65);
+    background: rgba(0, 0, 0, 0.2);
     z-index: 9999;
   }
 
   .modal-content {
     position: relative;
-    width: 100%;
+    width: 70%;
     z-index: 10000;
     padding: 8px;
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
-    border-radius: 4px;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
     background-color: var(--ti-lowcode-toolbar-bg);
     overflow: auto;
     max-height: 100%;
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index 2053fe5905..c739468e4a 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -1,5 +1,6 @@
 <template>
   <TinyButton class="reset-btn" @click="reset">{{ text }}</TinyButton>
+  <span class="reset-desc">重置后将恢复到初始值。</span>
 </template>
 
 <script>
@@ -12,7 +13,7 @@ export default {
   props: {
     text: {
       type: String,
-      default: 'Reset'
+      default: '重置'
     }
   },
   emits: ['reset'],
@@ -36,4 +37,10 @@ export default {
   border: 0;
   border: 1px solid var(--ti-lowcode-toolbar-border-color);
 }
+.reset-desc {
+  display: block;
+  padding: 8px 4px;
+  text-align: center;
+  color: var(--ti-lowcode-common-third-text-color);
+}
 </style>

From 1302c254a233fb0fd49457cbd187c234ba12b8a7 Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Mon, 22 Apr 2024 16:47:07 -0700
Subject: [PATCH 3/3] =?UTF-8?q?fix(reset-button):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE=E4=B8=AD=E9=87=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=BC=B9=E7=AA=97=E4=BD=8D=E7=BD=AE=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-core/src/App.vue              |  1 +
 .../src/components/inputs/ModalMask.vue       | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index e8c169a287..79229c77fe 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -154,6 +154,7 @@ export default {
     }
   }
   .tiny-engine-right-wrap {
+    position: relative;
     z-index: 4;
   }
   :deep(.monaco-editor .suggest-widget) {
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index c8ce59ab9d..5bc33a035c 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -1,8 +1,9 @@
 <template>
-  <teleport to="body">
-    <div :style="{ top: modal.top + 'px' }" class="modal-wrapper">
+  <teleport to=".tiny-engine-right-wrap">
+    <div class="modal-wrapper">
       <div class="modal-mask" @click="$emit('close')"></div>
-      <div class="modal-content">
+
+      <div :style="{ top: modal.top - 30 + 'px' }" class="modal-content">
         <slot></slot>
       </div>
     </div>
@@ -47,25 +48,20 @@ export default {
 
 <style lang="less" scoped>
 .modal-wrapper {
-  position: fixed;
-  top: 0;
-  right: 0;
-  margin-top: 18px;
-  width: calc(var(--base-right-panel-width) - 16px);
-  z-index: 9999;
   .modal-mask {
-    position: fixed;
+    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
-    left: calc(100% - var(--base-right-panel-width));
+    left: 0;
     background: rgba(0, 0, 0, 0.2);
     z-index: 9999;
   }
 
   .modal-content {
-    position: relative;
-    width: 70%;
+    position: absolute;
+    top: 0;
+    left: 16px;
     z-index: 10000;
     padding: 8px;
     color: var(--ti-lowcode-toolbar-breadcrumb-color);