From 021524c1281597fd946f8b3f0c75c31de2b25796 Mon Sep 17 00:00:00 2001
From: Xppp0217 <82315158+Xppp0217@users.noreply.github.com>
Date: Tue, 26 Dec 2023 09:02:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=B7=BB=E5=8A=A0style=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E8=B5=8B=E5=80=BC=20(#154)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue       | 124 +++++++++++++++++---
 packages/settings/styles/src/js/useStyle.js |   6 +-
 packages/theme/dark/index.less              |   1 +
 packages/theme/dark/setting-style.less      |   7 ++
 packages/theme/light/index.less             |   1 +
 packages/theme/light/setting-style.less     |   7 ++
 6 files changed, 128 insertions(+), 18 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 4d0e4db..e157608 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -8,14 +8,30 @@
       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 class="line-text"> 行内样式 </span>
+      <div class="inline-style">
+        <meta-code-editor
+          v-if="state.lineStyleDisable"
+          :modelValue="state.styleContent"
+          title="编辑行内样式"
+          :button-text="state.inlineBtnText"
+          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 +72,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,
@@ -94,7 +110,9 @@ export default {
     EffectGroup,
     ClassNamesContainer,
     TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapseItem: CollapseItem,
+    TinyInput: Input,
+    MetaBindVariable
   },
   setup() {
     const activeNames = ref([
@@ -146,6 +164,43 @@ export default {
       }
     }
 
+    const setConfig = (value) => {
+      const pageSchema = getCanvasPageSchema()
+      const currentSchema = getCurrentSchema() || pageSchema
+      const schema = getSchema() || pageSchema
+      if (value !== '') {
+        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(
+      () => getCurrentSchema(),
+      (val) => {
+        if (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 +208,8 @@ export default {
       open,
       save,
       close,
-      updateStyle
+      updateStyle,
+      setConfig
     }
   }
 }
@@ -161,14 +217,48 @@ 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;
+  .line-style {
+    display: block;
+    margin-top: 16px;
+    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;
+    :deep(.editor-wrap) {
+      display: flex;
+      .tiny-button {
+        padding: 0 16px;
+        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 {
+      :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/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index 2a2cb15..bf46317 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,
+  inlineBtnText: '编辑行内样式',
+  lineStyleDisable: true,
+  propertiesList: '',
+  bindModelValue: null
 })
 
 const getCurrentClassSelector = () => {
diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less
index eb0f1e8..3ee1f92 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 0000000..4080f5d
--- /dev/null
+++ b/packages/theme/dark/setting-style.less
@@ -0,0 +1,7 @@
+: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);
+  --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/index.less b/packages/theme/light/index.less
index 744cba6..759f817 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 0000000..f046a23
--- /dev/null
+++ b/packages/theme/light/setting-style.less
@@ -0,0 +1,7 @@
+: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);
+  --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);
+}