From 6c8ebe50125a8bd0fa55bc7c67ee4821cc678d59 Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 14 Dec 2023 02:15:09 -0800
Subject: [PATCH 01/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0style=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/component/MetaBindVariable.vue     |  2 +-
 packages/settings/styles/src/Main.vue         | 83 ++++++++++++++++---
 packages/settings/styles/src/js/useStyle.js   |  6 +-
 3 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/packages/common/component/MetaBindVariable.vue b/packages/common/component/MetaBindVariable.vue
index e8b53ac778..6575d5df5e 100644
--- a/packages/common/component/MetaBindVariable.vue
+++ b/packages/common/component/MetaBindVariable.vue
@@ -386,7 +386,7 @@ export default {
     }
 
     const remove = () => {
-      emit('update:modelValue', '')
+      emit('update:modelValue', 'remove')
       cancel()
     }
 
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 4d0e4db659..2bec12bd1c 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -8,14 +8,32 @@
       single
       @save="save(CSS_TYPE.Css, $event)"
     />
-    <meta-code-editor
-      :modelValue="state.styleContent"
-      title="Style 编辑"
-      button-text="编辑行内样式"
-      language="css"
-      single
-      @save="save(CSS_TYPE.Style, $event)"
-    />
+    <div class="line-style">
+      <span style="display: block; margin-top: 16px; margin-bottom: 8px; color: #595959; font-size: 12px">
+        行内样式
+      </span>
+      <div class="inline-style" style="display: flex">
+        <meta-code-editor
+          v-if="state.lineStyleDisable"
+          :modelValue="state.styleContent"
+          title="Style 编辑"
+          :button-text="state.lineStyle"
+          language="css"
+          single
+          @save="save(CSS_TYPE.Style, $event)"
+        />
+        <div v-if="!state.lineStyleDisable">
+          <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
+        </div>
+        <meta-bind-variable
+          ref="bindVariable"
+          :model-value="state.bindModelValue"
+          name="advance"
+          @update:modelValue="setConfig"
+        >
+        </meta-bind-variable>
+      </div>
+    </div>
   </div>
   <class-names-container></class-names-container>
   <tiny-collapse v-model="activeNames">
@@ -56,11 +74,11 @@
 </template>
 
 <script>
-import { ref } from 'vue'
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { ref, watch } from 'vue'
+import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
 import { setPageCss, getSchema as getCanvasPageSchema } from '@opentiny/tiny-engine-canvas'
-import { MetaCodeEditor } from '@opentiny/tiny-engine-common'
+import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
 import { formatString } from '@opentiny/tiny-engine-common/js/ast'
 import {
   SizeGroup,
@@ -146,6 +164,46 @@ export default {
       }
     }
 
+    const setConfig = (value) => {
+      const pageSchema = getCanvasPageSchema()
+      const currentSchema = getCurrentSchema() || pageSchema
+      const schema = getSchema() || pageSchema
+      if (value !== 'remove') {
+        schema.props.style = value
+        currentSchema.props.style = value
+        state.propertiesList = `已绑定：${value.value}`
+        state.lineStyleDisable = false
+        addHistory()
+      } else {
+        schema.props.style = ''
+        currentSchema.props.style = ''
+        state.propertiesList = '编辑行内样式'
+        state.lineStyleDisable = true
+        addHistory()
+      }
+    }
+
+    watch(
+      () => {
+        const currentSchema = getCurrentSchema()
+        return currentSchema
+      },
+      (val) => {
+        if (val?.props && val.props?.style?.value) {
+          state.lineStyleDisable = false
+          state.propertiesList = `已绑定：${val.props.style?.value}`
+          state.bindModelValue = val.props.style
+        } else {
+          state.lineStyleDisable = true
+          state.propertiesList = '编辑行内样式'
+          state.bindModelValue = null
+        }
+      },
+      {
+        deep: true
+      }
+    )
+
     return {
       state,
       activeNames,
@@ -153,7 +211,8 @@ export default {
       open,
       save,
       close,
-      updateStyle
+      updateStyle,
+      setConfig
     }
   }
 }
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index 2a2cb15f78..01bb697168 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -43,7 +43,11 @@ const state = reactive({
   currentClassNameList: [],
   currentIdList: [],
   selectorOptionLists: [],
-  schemaUpdateKey: 0
+  schemaUpdateKey: 0,
+  lineStyle: '编辑行内样式',
+  lineStyleDisable: true,
+  propertiesList: '',
+  bindModelValue: null
 })
 
 const getCurrentClassSelector = () => {

From 2e31d7f0102b702a9e25a191f891ebe779bb57cb Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 14 Dec 2023 02:29:30 -0800
Subject: [PATCH 02/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0style=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 2bec12bd1c..542a83539b 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -112,7 +112,9 @@ export default {
     EffectGroup,
     ClassNamesContainer,
     TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapseItem: CollapseItem,
+    TinyInput: Input,
+    MetaBindVariable
   },
   setup() {
     const activeNames = ref([

From 718c523a7fe46ce0b0936f322317a1c216731d82 Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 14 Dec 2023 02:32:23 -0800
Subject: [PATCH 03/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0style=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 542a83539b..ba50ecd3d0 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -222,14 +222,31 @@ export default {
 
 <style lang="less" scoped>
 .style-editor {
-  display: flex;
   justify-content: space-around;
   padding: 8px 16px 12px;
   column-gap: 8px;
-  :deep(.editor-wrap) {
-    .tiny-button {
-      padding: 0 16px;
+  .inline-style {
+    :deep(.editor-wrap) {
+      display: flex;
+      .tiny-button {
+        padding: 0 16px;
+        border-radius: 8px;
+        width: 216px;
+        text-align: left;
+      }
+    }
+    .inline-bind-style {
+      :deep(.tiny-input__inner) {
+        width: 216px;
+        pointer-events: none;
+        background: #1476ff;
+        color: #ffffff;
+        border-color: #1476ff;
+      }
     }
   }
+  :deep(.svg-icon) {
+    margin-top: 5px;
+  }
 }
 </style>

From b60427b9fbcc8cc8a7f2ece425d20a7a2f38ad2e Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 14 Dec 2023 18:16:18 -0800
Subject: [PATCH 04/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0style=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index ba50ecd3d0..7464944615 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -9,7 +9,7 @@
       @save="save(CSS_TYPE.Css, $event)"
     />
     <div class="line-style">
-      <span style="display: block; margin-top: 16px; margin-bottom: 8px; color: #595959; font-size: 12px">
+      <span>
         行内样式
       </span>
       <div class="inline-style" style="display: flex">
@@ -225,6 +225,13 @@ export default {
   justify-content: space-around;
   padding: 8px 16px 12px;
   column-gap: 8px;
+  .line-style {
+    display: block;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    color: var(--ti-lowcode-datasource-label-color);
+    font-size: 12px
+  }
   .inline-style {
     :deep(.editor-wrap) {
       display: flex;
@@ -239,9 +246,9 @@ export default {
       :deep(.tiny-input__inner) {
         width: 216px;
         pointer-events: none;
-        background: #1476ff;
-        color: #ffffff;
-        border-color: #1476ff;
+        background: var(--ti-lowcode-datasource-canvas-handle-hover-bg);
+        color: var(--ti-lowcode-base-gray-0);
+        border-color: var(--ti-lowcode-datasource-canvas-handle-hover-bg);
       }
     }
   }

From bbfcd5fe4d9d84fc339fd470220a110fbc5d6f62 Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 14 Dec 2023 23:09:57 -0800
Subject: [PATCH 05/10] =?UTF-8?q?=E6=B7=BB=E5=8A=A0style=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue   | 43 +++++++++++++------------
 packages/theme/dark/index.less          |  1 +
 packages/theme/dark/setting-style.less  |  5 +++
 packages/theme/light/index.less         |  1 +
 packages/theme/light/setting-style.less |  5 +++
 5 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 packages/theme/dark/setting-style.less
 create mode 100644 packages/theme/light/setting-style.less

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 7464944615..51c9ebecfb 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -12,7 +12,7 @@
       <span>
         行内样式
       </span>
-      <div class="inline-style" style="display: flex">
+      <div class="inline-style">
         <meta-code-editor
           v-if="state.lineStyleDisable"
           :modelValue="state.styleContent"
@@ -229,31 +229,32 @@ export default {
     display: block;
     margin-top: 16px;
     margin-bottom: 8px;
-    color: var(--ti-lowcode-datasource-label-color);
+    color: var(--ti-lowcode-setting-style-font-color);
     font-size: 12px
   }
   .inline-style {
-    :deep(.editor-wrap) {
-      display: flex;
-      .tiny-button {
-        padding: 0 16px;
-        border-radius: 8px;
-        width: 216px;
-        text-align: left;
-      }
-    }
-    .inline-bind-style {
-      :deep(.tiny-input__inner) {
-        width: 216px;
-        pointer-events: none;
-        background: var(--ti-lowcode-datasource-canvas-handle-hover-bg);
-        color: var(--ti-lowcode-base-gray-0);
-        border-color: var(--ti-lowcode-datasource-canvas-handle-hover-bg);
-      }
+  display: flex;
+  :deep(.editor-wrap) {
+    display: flex;
+    .tiny-button {
+      padding: 0 16px;
+      border-radius: 8px;
+      width: 216px;
+      text-align: left;
     }
   }
-  :deep(.svg-icon) {
-    margin-top: 5px;
+  .inline-bind-style {
+    :deep(.tiny-input__inner) {
+      width: 216px;
+      pointer-events: none;
+      background: var(--ti-lowcode-setting-style-input-bg);
+      color: var(--ti-lowcode-setting-style-input-font-color);
+      border-color: var(--ti-lowcode-setting-style-input-bg);
+    }
   }
 }
+:deep(.svg-icon) {
+  margin-top: 5px;
+}
+}
 </style>
diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less
index eb0f1e88ad..3ee1f92a40 100644
--- a/packages/theme/dark/index.less
+++ b/packages/theme/dark/index.less
@@ -35,3 +35,4 @@
 @import './datasource.less';
 @import './plugin-js.less';
 @import './gpt-dialog.less';
+@import './setting-style';
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
new file mode 100644
index 0000000000..7c78cdb26f
--- /dev/null
+++ b/packages/theme/dark/setting-style.less
@@ -0,0 +1,5 @@
+:root {
+  --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light
+  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
+}
\ No newline at end of file
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 744cba6e07..759f817f0b 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -33,3 +33,4 @@
 @import './datasource.less';
 @import './plugin-js.less';
 @import './gpt-dialog.less';
+@import './setting-style';
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
new file mode 100644
index 0000000000..a7a0b4d878
--- /dev/null
+++ b/packages/theme/light/setting-style.less
@@ -0,0 +1,5 @@
+:root {
+  --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-gray-60);
+  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
+}
\ No newline at end of file

From 0569b40caa6d5480190d62d33beea9e98f146e4f Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 21 Dec 2023 19:18:50 -0800
Subject: [PATCH 06/10] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0style=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue   | 44 ++++++++++++-------------
 packages/theme/dark/setting-style.less  |  2 +-
 packages/theme/light/setting-style.less |  2 +-
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 51c9ebecfb..ecf03d29de 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -9,9 +9,7 @@
       @save="save(CSS_TYPE.Css, $event)"
     />
     <div class="line-style">
-      <span>
-        行内样式
-      </span>
+      <span> 行内样式 </span>
       <div class="inline-style">
         <meta-code-editor
           v-if="state.lineStyleDisable"
@@ -230,31 +228,31 @@ export default {
     margin-top: 16px;
     margin-bottom: 8px;
     color: var(--ti-lowcode-setting-style-font-color);
-    font-size: 12px
+    font-size: 12px;
   }
   .inline-style {
-  display: flex;
-  :deep(.editor-wrap) {
     display: flex;
-    .tiny-button {
-      padding: 0 16px;
-      border-radius: 8px;
-      width: 216px;
-      text-align: left;
+    :deep(.editor-wrap) {
+      display: flex;
+      .tiny-button {
+        padding: 0 16px;
+        border-radius: 8px;
+        width: 216px;
+        text-align: left;
+      }
     }
-  }
-  .inline-bind-style {
-    :deep(.tiny-input__inner) {
-      width: 216px;
-      pointer-events: none;
-      background: var(--ti-lowcode-setting-style-input-bg);
-      color: var(--ti-lowcode-setting-style-input-font-color);
-      border-color: var(--ti-lowcode-setting-style-input-bg);
+    .inline-bind-style {
+      :deep(.tiny-input__inner) {
+        width: 216px;
+        pointer-events: none;
+        background: var(--ti-lowcode-setting-style-input-bg);
+        color: var(--ti-lowcode-setting-style-input-font-color);
+        border-color: var(--ti-lowcode-setting-style-input-bg);
+      }
     }
   }
-}
-:deep(.svg-icon) {
-  margin-top: 5px;
-}
+  :deep(.svg-icon) {
+    margin-top: 5px;
+  }
 }
 </style>
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
index 7c78cdb26f..6c9a4539b8 100644
--- a/packages/theme/dark/setting-style.less
+++ b/packages/theme/dark/setting-style.less
@@ -2,4 +2,4 @@
   --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
   --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light
   --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
-}
\ No newline at end of file
+}
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index a7a0b4d878..7cd0a8d6a2 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -2,4 +2,4 @@
   --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
   --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-gray-60);
   --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
-}
\ No newline at end of file
+}

From 41010fb17480edf31392bd6e4b35735b2241dbc4 Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Thu, 21 Dec 2023 23:56:49 -0800
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0style=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MetaBindVariable.vue | 2 +-
 packages/settings/styles/src/Main.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/common/component/MetaBindVariable.vue b/packages/common/component/MetaBindVariable.vue
index 6575d5df5e..e8b53ac778 100644
--- a/packages/common/component/MetaBindVariable.vue
+++ b/packages/common/component/MetaBindVariable.vue
@@ -386,7 +386,7 @@ export default {
     }
 
     const remove = () => {
-      emit('update:modelValue', 'remove')
+      emit('update:modelValue', '')
       cancel()
     }
 
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index ecf03d29de..0220bdbcda 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -168,7 +168,7 @@ export default {
       const pageSchema = getCanvasPageSchema()
       const currentSchema = getCurrentSchema() || pageSchema
       const schema = getSchema() || pageSchema
-      if (value !== 'remove') {
+      if (value !== '') {
         schema.props.style = value
         currentSchema.props.style = value
         state.propertiesList = `已绑定：${value.value}`

From 5fbe661e405bab5c1f814625dc8a996bce9024f6 Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Sun, 24 Dec 2023 18:24:13 -0800
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0style=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue   | 11 ++++++++++-
 packages/theme/dark/setting-style.less  |  2 ++
 packages/theme/light/setting-style.less |  2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 0220bdbcda..db02623049 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -9,7 +9,7 @@
       @save="save(CSS_TYPE.Css, $event)"
     />
     <div class="line-style">
-      <span> 行内样式 </span>
+      <span class="line-text"> 行内样式 </span>
       <div class="inline-style">
         <meta-code-editor
           v-if="state.lineStyleDisable"
@@ -229,6 +229,10 @@ export default {
     margin-bottom: 8px;
     color: var(--ti-lowcode-setting-style-font-color);
     font-size: 12px;
+    .line-text {
+      margin-bottom: 8px;
+      display: block;
+    }
   }
   .inline-style {
     display: flex;
@@ -239,6 +243,11 @@ export default {
         border-radius: 8px;
         width: 216px;
         text-align: left;
+        color: var(--ti-lowcode-setting-style-btn-font-color);
+      }
+      .tiny-button:hover {
+        background: none;
+        border-color: var(--ti-lowcode-setting-style-btn-border-color);
       }
     }
     .inline-bind-style {
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
index 6c9a4539b8..4080f5d125 100644
--- a/packages/theme/dark/setting-style.less
+++ b/packages/theme/dark/setting-style.less
@@ -2,4 +2,6 @@
   --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
   --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light
   --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-40);
+  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-blue-6);
 }
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index 7cd0a8d6a2..f046a235ef 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -2,4 +2,6 @@
   --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
   --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-gray-60);
   --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50);
+  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90);
 }

From c6c0b1f7ea31a53d17b1db8f2d30a3466c0d5f8a Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Sun, 24 Dec 2023 18:41:14 -0800
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0style=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index db02623049..c451fc0fb0 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -184,10 +184,7 @@ export default {
     }
 
     watch(
-      () => {
-        const currentSchema = getCurrentSchema()
-        return currentSchema
-      },
+      () => getCurrentSchema(),
       (val) => {
         if (val?.props && val.props?.style?.value) {
           state.lineStyleDisable = false

From 456600bf6afd2259cff262e0ed3e212a813e0bb2 Mon Sep 17 00:00:00 2001
From: Xppp0217 <864670955@qq.com>
Date: Sun, 24 Dec 2023 19:52:30 -0800
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0style=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue       | 6 +++---
 packages/settings/styles/src/js/useStyle.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index c451fc0fb0..e1576087e1 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -14,8 +14,8 @@
         <meta-code-editor
           v-if="state.lineStyleDisable"
           :modelValue="state.styleContent"
-          title="Style 编辑"
-          :button-text="state.lineStyle"
+          title="编辑行内样式"
+          :button-text="state.inlineBtnText"
           language="css"
           single
           @save="save(CSS_TYPE.Style, $event)"
@@ -186,7 +186,7 @@ export default {
     watch(
       () => getCurrentSchema(),
       (val) => {
-        if (val?.props && val.props?.style?.value) {
+        if (val?.props?.style?.value) {
           state.lineStyleDisable = false
           state.propertiesList = `已绑定：${val.props.style?.value}`
           state.bindModelValue = val.props.style
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index 01bb697168..bf46317b9b 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -44,7 +44,7 @@ const state = reactive({
   currentIdList: [],
   selectorOptionLists: [],
   schemaUpdateKey: 0,
-  lineStyle: '编辑行内样式',
+  inlineBtnText: '编辑行内样式',
   lineStyleDisable: true,
   propertiesList: '',
   bindModelValue: null