From 9c30bc6a63196d327d455a044cf370e2d3e0be6e Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Mon, 8 Jan 2024 00:13:42 -0800
Subject: [PATCH 01/10] =?UTF-8?q?feat(setting-stylePanel):=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=9D=A2=E6=9D=BF=E7=BC=96=E8=BE=91=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=B0UI=E4=B8=8E=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MetaCodeEditor.vue  | 15 +++-
 packages/common/js/ast.js                     | 20 ++---
 packages/settings/styles/src/Main.vue         | 60 +++++---------
 .../components/classNamesContainer/index.vue  | 83 +++++++++++++++----
 packages/settings/styles/src/js/useStyle.js   |  2 +-
 packages/theme/dark/settings.less             |  1 +
 packages/theme/light/settings.less            |  5 +-
 7 files changed, 119 insertions(+), 67 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index edcd9975d7..33ac189af5 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="editor-wrap">
-    <slot>
+    <slot :open="open">
       <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
         <span>{{ value === '' ? buttonLabel : value?.slice(0, 30) }}</span>
         <svg-icon class="edit-icon" name="flow-edit"></svg-icon>
@@ -45,7 +45,13 @@
       </div>
       <template #footer>
         <div class="btn-box">
-          <tiny-button plain type="danger" v-if="language === 'json' && showFormatBtn" @click="formatCode">
+          <tiny-button
+            v-if="language === 'json' && showFormatBtn"
+            class="format-btn"
+            plain
+            type="danger"
+            @click="formatCode"
+          >
             {{ $t('common.format') }}
           </tiny-button>
           <div>
@@ -269,7 +275,10 @@ export default {
 }
 .btn-box {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
+  &:has(.format-btn) {
+    justify-content: space-between;
+  }
 }
 .full-width {
   border: 1px solid #adb0b8;
diff --git a/packages/common/js/ast.js b/packages/common/js/ast.js
index 1af7c339e2..57905e2ec0 100644
--- a/packages/common/js/ast.js
+++ b/packages/common/js/ast.js
@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import { parse, parseExpression } from '@babel/parser'
 import generate from '@babel/generator'
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index e1576087e1..19365bca9f 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -1,24 +1,17 @@
 <template>
   <div class="style-editor">
-    <meta-code-editor
-      :modelValue="state.cssContent"
-      title="Css 编辑"
-      button-text="编辑全局样式"
-      language="css"
-      single
-      @save="save(CSS_TYPE.Css, $event)"
-    />
     <div class="line-style">
       <span class="line-text"> 行内样式 </span>
       <div class="inline-style">
         <meta-code-editor
           v-if="state.lineStyleDisable"
+          :buttonShowContent="true"
           :modelValue="state.styleContent"
           title="编辑行内样式"
           :button-text="state.inlineBtnText"
           language="css"
           single
-          @save="save(CSS_TYPE.Style, $event)"
+          @save="save"
         />
         <div v-if="!state.lineStyleDisable">
           <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
@@ -75,7 +68,7 @@
 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 { getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
 import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
 import { formatString } from '@opentiny/tiny-engine-common/js/ast'
 import {
@@ -125,43 +118,34 @@ export default {
       'borders',
       'effects'
     ])
-    const { getCurrentSchema, getPageSchema } = useCanvas()
+    const { getCurrentSchema } = useCanvas()
     // 获取当前节点 style 对象
     const { state, updateStyle } = useStyle() // updateStyle
     const { addHistory } = useHistory()
     const { getSchema } = useProperties()
 
-    // 打开编辑器
-
     // 保存编辑器内容，并回写到 schema
-    const save = (type, { content }) => {
-      if (type === CSS_TYPE.Style) {
-        const pageSchema = getCanvasPageSchema()
-        const schema = getSchema() || pageSchema
-        const styleString = formatString(styleStrRemoveRoot(content), 'css')
-        const currentSchema = getCurrentSchema() || pageSchema
-
-        state.styleContent = content
-        schema.props = schema.props || {}
-        schema.props.style = styleString
+    const save = ({ content }) => {
+      const pageSchema = getCanvasPageSchema()
+      const schema = getSchema() || pageSchema
+      const styleString = formatString(styleStrRemoveRoot(content), 'css')
+      const currentSchema = getCurrentSchema() || pageSchema
 
-        currentSchema.props = currentSchema.props || {}
+      state.styleContent = content
+      schema.props = schema.props || {}
+      schema.props.style = styleString
 
-        if (styleString) {
-          currentSchema.props.style = styleString
-        } else {
-          delete currentSchema.props.style
-        }
+      currentSchema.props = currentSchema.props || {}
 
-        addHistory()
-      } else if (type === CSS_TYPE.Css) {
-        const cssString = formatString(content.replace(/"/g, "'"), 'css')
-        getPageSchema().css = cssString
-        getCanvasPageSchema().css = cssString
-        setPageCss(cssString)
-        state.schemaUpdateKey++
-        addHistory()
+      if (styleString) {
+        currentSchema.props.style = styleString
+      } else {
+        delete currentSchema.props.style
       }
+
+      addHistory()
+
+      updateRect()
     }
 
     const setConfig = (value) => {
@@ -181,6 +165,8 @@ export default {
         state.lineStyleDisable = true
         addHistory()
       }
+
+      updateRect()
     }
 
     watch(
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 012fde5488..deb71b4557 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -1,7 +1,19 @@
 <template>
   <div class="className-container">
-    <h6 class="title">样式选择器</h6>
+    <h6 class="title">全局样式</h6>
     <div class="selector-container">
+      <meta-code-editor
+        :modelValue="state.cssContent"
+        title="Css 编辑"
+        language="css"
+        v-slot="scope"
+        single
+        @save="save"
+      >
+        <div class="edit-global-css" title="编辑全局样式" @click="scope.open">
+          <svg-icon name="edit"></svg-icon>
+        </div>
+      </meta-code-editor>
       <div class="className-selector-wrap">
         <div
           :class="['className-selector-container', { 'has-error': classNameState.selectorHasError }]"
@@ -14,6 +26,7 @@
                 :contenteditable="classNameState.curSelectorIsEditing"
                 :class="['selector-label-text', { 'text-editing': classNameState.curSelectorIsEditing }]"
                 :key="classNameState.curSelectorIsEditing"
+                :title="classNameState.curSelector"
                 @click.stop="handleEditCurSelector"
                 @input="handleCurSelectorChange"
                 @blur="handleCompleteEditCurSelector"
@@ -106,8 +119,10 @@
 <script setup>
 import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
 import { Select as TinySelect, Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
-import { getSchema as getCanvasPageSchema } from '@opentiny/tiny-engine-canvas'
-import { useProperties } from '@opentiny/tiny-engine-controller'
+import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
+import { useProperties, useCanvas, useHistory } from '@opentiny/tiny-engine-controller'
+import { MetaCodeEditor } from '@opentiny/tiny-engine-common'
+import { formatString } from '@opentiny/tiny-engine-common/js/ast'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
 import { stringify, getSelectorArr } from '../../js/parser'
 
@@ -182,7 +197,14 @@ const setSelectorProps = (type, value) => {
 // 编辑 className 新增、删除、或修改
 const editClassName = (curClassName, optionType = OPTION_TYPE.ADD, oldSelector = '') => {
   const schema = getSchema() || getCanvasPageSchema()
-  const type = curClassName.startsWith('.') ? SELECTOR_TYPE.CLASS_NAME : SELECTOR_TYPE.ID
+  let type = ''
+
+  if (curClassName.startsWith('.')) {
+    type = SELECTOR_TYPE.CLASS_NAME
+  } else if (curClassName.startsWith('#')) {
+    type = SELECTOR_TYPE.ID
+  }
+
   const classNames = schema.props.className || ''
   const ids = schema.props.id || ''
   const typeMap = {
@@ -436,30 +458,62 @@ const handleCurSelectorChange = (event) => {
 watchEffect(() => {
   selectorValidator(classNameState.newSelector)
 })
+
+const save = ({ content }) => {
+  const cssString = formatString(content.replace(/"/g, "'"), 'css')
+  const { getPageSchema } = useCanvas()
+  const { addHistory } = useHistory()
+  getPageSchema().css = cssString
+  getCanvasPageSchema().css = cssString
+  setPageCss(cssString)
+  state.schemaUpdateKey++
+
+  addHistory()
+  updateRect()
+}
 </script>
 
 <style lang="less" scoped>
 .className-container {
   padding: 10px;
 }
+.title {
+  margin: 0;
+  color: var(--ti-lowcode-className-selector-title-color);
+}
 
 .selector-container {
   display: flex;
   margin-top: 10px;
   color: var(--ti-lowcode-className-selector-container-color);
   .className-selector-wrap {
+    overflow: hidden;
+    margin-left: 8px;
     .error-tips {
       margin-top: 8px;
       font-size: 12px;
       color: var(--ti-lowcode-className-selector-error-tips-color);
     }
   }
+  :deep(.editor-wrap) {
+    width: 30px;
+  }
+  .edit-global-css {
+    display: flex;
+    padding: 6px;
+    border: 1px solid #c2c2c2;
+    border-radius: 6px;
+    cursor: pointer;
+  }
 
   .className-selector-container {
     flex: 7;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
+    border-right: none;
     border-radius: 6px;
-    padding: 2px 10px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 1px 10px;
     display: flex;
     max-width: 180px;
     row-gap: 2px;
@@ -494,10 +548,10 @@ watchEffect(() => {
         display: flex;
         align-items: center;
         background-color: var(--ti-lowcode-className-selector-container-label-bg-color);
-        color: #fff;
+        color: var(--ti-lowcode-className-selector-container-label-color);
         padding: 1px 4px;
         border-radius: 2px;
-        line-height: 30px;
+        line-height: 26px;
         .selector-label-text {
           outline: none;
           overflow: hidden;
@@ -531,7 +585,7 @@ watchEffect(() => {
       color: var(--ti-lowcode-className-selector-container-color);
       min-width: 0;
       flex: 0 0 0;
-      line-height: 30px;
+      line-height: 28px;
       z-index: 1;
       border: none;
       outline: none;
@@ -595,14 +649,15 @@ watchEffect(() => {
   .state-selector {
     flex: 4;
     flex-shrink: 0;
-    margin-left: 4px;
+    min-width: 84px;
+    :deep(input) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      padding-right: 30px;
+      font-size: 12px;
+    }
   }
 }
-
-.title {
-  margin: 0;
-  color: var(--ti-lowcode-className-selector-title-color);
-}
 </style>
 <style lang="less">
 .tiny-popover.tiny-popper.del-selector-popper-wrapper {
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index bf46317b9b..cfc6a7a941 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -166,7 +166,7 @@ watch(
       state.style = {}
     }
 
-    state.styleContent = `:root {\n ${schema?.props?.style || ''}\n}`
+    state.styleContent = formatString(`:root {\n ${schema?.props?.style || ''}\n}`, 'css')
   },
   {
     immediate: true,
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index 67b47de136..babd34dd15 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -32,6 +32,7 @@
   --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2);
   --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
   --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-className-selector-container-label-color: #fff;
   --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-gray-0);
   --ti-lowcode-className-selector-dropdown-list-bg-color: #202020;
   --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index a23edb9480..6f8b85ac66 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -31,8 +31,9 @@
   --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
   --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90);
   --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
+  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2);
   --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0);
   --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);

From ce686a44777b82ca5c972c3d509022fc6d6748d0 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Mon, 8 Jan 2024 03:23:31 -0800
Subject: [PATCH 02/10] =?UTF-8?q?feat(setting-stylePanel):=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=9D=A2=E6=9D=BF=E7=BC=96=E8=BE=91=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=B0UI=E4=B8=8E=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/classNamesContainer/index.vue  | 70 ++++---------------
 1 file changed, 14 insertions(+), 56 deletions(-)

diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index deb71b4557..333e473c4c 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -37,35 +37,7 @@
               </span>
               <div v-if="!classNameState.curSelectorIsEditing && classNameState.curSelectorEditable" class="edit-wrap">
                 <svg-icon name="edit" title="编辑" class="edit-btn" @click.stop="handleEditCurSelector"></svg-icon>
-                <tiny-popover
-                  v-model="classNameState.showDelConfirm"
-                  trigger="manual"
-                  class="del-selector-popover"
-                  popper-class="del-selector-popper-wrapper"
-                >
-                  <div class="popper-confirm" @mousedown.stop="">
-                    <div class="popper-confirm-header">
-                      <svg-icon class="icon" name="warning"></svg-icon>
-                      <span class="title">您确定删除该选择器吗？</span>
-                    </div>
-                    <div class="popper-confirm-footer">
-                      <tiny-button class="confirm-btn" size="small" type="primary" @click="handleDelSelector">
-                        确定
-                      </tiny-button>
-                      <tiny-button size="small" class="cancel-btn" @click="handleTriggerDelConfirm(false)">
-                        取消
-                      </tiny-button>
-                    </div>
-                  </div>
-                  <template #reference>
-                    <svg-icon
-                      name="delete"
-                      title="删除"
-                      class="delete-btn"
-                      @click.stop="handleTriggerDelConfirm(true)"
-                    ></svg-icon>
-                  </template>
-                </tiny-popover>
+                <svg-icon name="close" title="删除" class="delete-btn" @click.stop="handleDelSelector"></svg-icon>
               </div>
             </div>
           </div>
@@ -118,7 +90,7 @@
 
 <script setup>
 import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
-import { Select as TinySelect, Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { Select as TinySelect } from '@opentiny/vue'
 import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
 import { useProperties, useCanvas, useHistory } from '@opentiny/tiny-engine-controller'
 import { MetaCodeEditor } from '@opentiny/tiny-engine-common'
@@ -418,21 +390,6 @@ const handleCompleteEditCurSelector = () => {
   updateGlobalStyleStr(newStyleStr)
 }
 
-const listener = () => {
-  classNameState.showDelConfirm = false
-}
-
-// 删除确认弹窗
-const handleTriggerDelConfirm = (visible) => {
-  classNameState.showDelConfirm = visible
-
-  if (visible) {
-    window.addEventListener('click', listener)
-  } else {
-    window.removeEventListener('click', listener)
-  }
-}
-
 const handleDelSelector = () => {
   // 删除选择器，仅从当前选中组件中删除类名, 不删除全局 css 中的 css 类名和样式
   // 后期需要可以拿到全局组件的类名，如果只有当前组件使用该类名，从全局样式中删除之
@@ -487,8 +444,9 @@ const save = ({ content }) => {
   margin-top: 10px;
   color: var(--ti-lowcode-className-selector-container-color);
   .className-selector-wrap {
-    overflow: hidden;
     margin-left: 8px;
+    max-width: 180px;
+    min-width: 0;
     .error-tips {
       margin-top: 8px;
       font-size: 12px;
@@ -507,20 +465,19 @@ const save = ({ content }) => {
   }
 
   .className-selector-container {
-    flex: 7;
-    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
-    border-right: none;
-    border-radius: 6px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    padding: 1px 10px;
     display: flex;
-    max-width: 180px;
     row-gap: 2px;
     align-items: center;
     position: relative;
     overflow: visible;
     flex-wrap: wrap;
+    max-width: 100%;
+    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
+    border-right: none;
+    border-radius: 6px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 1px 10px;
     &:hover {
       border-color: var(--ti-lowcode-className-selector-container-hover-border-color);
     }
@@ -550,7 +507,7 @@ const save = ({ content }) => {
         background-color: var(--ti-lowcode-className-selector-container-label-bg-color);
         color: var(--ti-lowcode-className-selector-container-label-color);
         padding: 1px 4px;
-        border-radius: 2px;
+        border-radius: 4px;
         line-height: 26px;
         .selector-label-text {
           outline: none;
@@ -609,10 +566,11 @@ const save = ({ content }) => {
       background-color: var(--ti-lowcode-className-selector-dropdown-list-bg-color);
 
       border: 1px solid transparent;
+      border-radius: 6px;
       z-index: 1;
       flex-direction: column;
       overflow: scroll;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
 
       .selector-dropdown-list-tips {
         font-size: 12px;

From a9a0696e18196c9ff6ebce8ea43e6a889dd1e936 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Tue, 9 Jan 2024 05:25:45 -0800
Subject: [PATCH 03/10] =?UTF-8?q?feat(setting-stylePanel):=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=9D=A2=E6=9D=BF=E7=BC=96=E8=BE=91=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=B0UI=E4=B8=8E=E4=BA=A4=E4=BA=92-?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MetaCodeEditor.vue  |   3 +-
 packages/settings/styles/src/Main.vue         |   4 +-
 .../components/classNamesContainer/index.vue  | 312 +++++++++---------
 3 files changed, 158 insertions(+), 161 deletions(-)

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 33ac189af5..72f52ba9d3 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -3,7 +3,7 @@
     <slot :open="open">
       <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
         <span>{{ value === '' ? buttonLabel : value?.slice(0, 30) }}</span>
-        <svg-icon class="edit-icon" name="flow-edit"></svg-icon>
+        <svg-icon class="edit-icon" name="edit"></svg-icon>
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
         {{ buttonLabel }}
@@ -15,6 +15,7 @@
       width="50vw"
       class="meta-code-editor-dialog-box"
       append-to-body
+      :close-on-click-modal="false"
     >
       <div class="source-code">
         <div v-if="editorTipsTitle" class="header-tips-container">
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 19365bca9f..a0cf9f71cb 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -219,6 +219,7 @@ export default {
   }
   .inline-style {
     display: flex;
+    align-items: center;
     :deep(.editor-wrap) {
       display: flex;
       .tiny-button {
@@ -243,8 +244,5 @@ export default {
       }
     }
   }
-  :deep(.svg-icon) {
-    margin-top: 5px;
-  }
 }
 </style>
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 333e473c4c..cf148f29f9 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -14,76 +14,83 @@
           <svg-icon name="edit"></svg-icon>
         </div>
       </meta-code-editor>
-      <div class="className-selector-wrap">
-        <div
-          :class="['className-selector-container', { 'has-error': classNameState.selectorHasError }]"
-          @click="handleFocusInput"
-        >
-          <div v-if="classNameState.curSelector || classNameState.curSelectorIsEditing" class="current-selector">
-            <div class="current-selector-label">
-              <span
-                ref="selectorTextRef"
-                :contenteditable="classNameState.curSelectorIsEditing"
-                :class="['selector-label-text', { 'text-editing': classNameState.curSelectorIsEditing }]"
-                :key="classNameState.curSelectorIsEditing"
-                :title="classNameState.curSelector"
-                @click.stop="handleEditCurSelector"
-                @input="handleCurSelectorChange"
-                @blur="handleCompleteEditCurSelector"
-                @keyup.enter="handleCompleteEditCurSelector"
-                @keyup.esc="handleCompleteEditCurSelector"
-              >
-                {{ classNameState.curSelector }}
-              </span>
-              <div v-if="!classNameState.curSelectorIsEditing && classNameState.curSelectorEditable" class="edit-wrap">
-                <svg-icon name="edit" title="编辑" class="edit-btn" @click.stop="handleEditCurSelector"></svg-icon>
-                <svg-icon name="close" title="删除" class="delete-btn" @click.stop="handleDelSelector"></svg-icon>
+      <div class="selector-right-container">
+        <div class="selector-right-container-wrap">
+          <div
+            :class="['className-selector-container', { 'has-error': classNameState.selectorHasError }]"
+            @click="handleFocusInput"
+          >
+            <div v-if="classNameState.curSelector || classNameState.curSelectorIsEditing" class="current-selector">
+              <div class="current-selector-label">
+                <span
+                  ref="selectorTextRef"
+                  :contenteditable="classNameState.curSelectorIsEditing"
+                  :class="['selector-label-text', { 'text-editing': classNameState.curSelectorIsEditing }]"
+                  :key="classNameState.curSelectorIsEditing"
+                  :title="classNameState.curSelector"
+                  @click.stop="handleEditCurSelector"
+                  @input="handleCurSelectorChange"
+                  @blur="handleCompleteEditCurSelector"
+                  @keyup.enter="handleCompleteEditCurSelector"
+                  @keyup.esc="handleCompleteEditCurSelector"
+                >
+                  {{ classNameState.curSelector }}
+                </span>
+                <div
+                  v-if="!classNameState.curSelectorIsEditing && classNameState.curSelectorEditable"
+                  class="edit-wrap"
+                >
+                  <svg-icon name="edit" title="编辑" class="edit-btn" @click.stop="handleEditCurSelector"></svg-icon>
+                  <svg-icon name="close" title="删除" class="delete-btn" @click.stop="handleDelSelector"></svg-icon>
+                </div>
               </div>
             </div>
+            <span v-else class="empty-tips">请选择或创建类名</span>
+            <input
+              ref="newSelectorInputRef"
+              type="text"
+              v-model="classNameState.newSelector"
+              class="selector-input"
+              @change="handleInputChange"
+              @blur="handleCreateNewClass"
+              @keyup.enter="handleCreateNewClass"
+              @keydown.delete="handleDeleteCurSelector"
+            />
           </div>
-          <span v-else class="empty-tips">请选择或创建类名</span>
-          <input
-            ref="newSelectorInputRef"
-            type="text"
-            v-model="classNameState.newSelector"
-            class="selector-input"
-            @change="handleInputChange"
-            @blur="handleCreateNewClass"
-            @keyup.enter="handleCreateNewClass"
-          />
-          <div v-if="classNameState.showDropdownList" class="selector-drop-down-list">
-            <span class="selector-dropdown-list-tips">输入并回车创建新选择器</span>
-            <span v-if="currentSelectorList.length" class="selector-dropdown-list-tips">选择已有选择器编辑</span>
-            <ul class="exist-class-list">
-              <li
-                v-for="item in currentSelectorList"
-                :key="item"
-                :title="item"
-                class="exist-class-item"
-                @mousedown="handleSelectExistingClass(item)"
-              >
-                <span>{{ item }}</span>
-              </li>
-            </ul>
-            <span v-if="state.selectors.length" class="selector-dropdown-list-tips add-global-class-tips">
-              添加全局类到当前组件并编辑
-            </span>
-            <ul class="exist-class-list">
-              <li
-                v-for="item in state.selectors"
-                :key="item"
-                :title="item"
-                class="exist-class-item"
-                @mousedown="handleSelectExistingClass(item)"
-              >
-                <span>{{ item }}</span>
-              </li>
-            </ul>
-          </div>
+          <tiny-select v-model="state.className.mouseState" :options="stateOptions" class="state-selector">
+          </tiny-select>
         </div>
         <div v-if="classNameState.selectorHasError" class="error-tips">{{ classNameState.selectorHasError }}</div>
+        <div v-if="classNameState.showDropdownList" class="selector-drop-down-list">
+          <span class="selector-dropdown-list-tips">输入并回车创建新选择器</span>
+          <span v-if="currentSelectorList.length" class="selector-dropdown-list-tips">选择已有选择器编辑</span>
+          <ul class="exist-class-list">
+            <li
+              v-for="item in currentSelectorList"
+              :key="item"
+              :title="item"
+              class="exist-class-item"
+              @mousedown="handleSelectExistingClass(item)"
+            >
+              <span>{{ item }}</span>
+            </li>
+          </ul>
+          <span v-if="state.selectors.length" class="selector-dropdown-list-tips add-global-class-tips">
+            添加全局类到当前组件并编辑
+          </span>
+          <ul class="exist-class-list">
+            <li
+              v-for="item in state.selectors"
+              :key="item"
+              :title="item"
+              class="exist-class-item"
+              @mousedown="handleSelectExistingClass(item)"
+            >
+              <span>{{ item }}</span>
+            </li>
+          </ul>
+        </div>
       </div>
-      <tiny-select v-model="state.className.mouseState" :options="stateOptions" class="state-selector"> </tiny-select>
     </div>
   </div>
 </template>
@@ -428,6 +435,22 @@ const save = ({ content }) => {
   addHistory()
   updateRect()
 }
+
+// 监听回车删除键，如果当前输入为空，则解绑当前选择器
+const handleDeleteCurSelector = () => {
+  // 当前新建的选择器不为空，则在编辑当前选择器
+  if (classNameState.newSelector) {
+    return
+  }
+
+  // 在编辑当前选择器则不做更改
+  if (classNameState.curSelectorIsEditing) {
+    return
+  }
+
+  // 解绑当前选择器
+  handleDelSelector()
+}
 </script>
 
 <style lang="less" scoped>
@@ -443,22 +466,30 @@ const save = ({ content }) => {
   display: flex;
   margin-top: 10px;
   color: var(--ti-lowcode-className-selector-container-color);
-  .className-selector-wrap {
+
+  .selector-right-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    position: relative;
     margin-left: 8px;
+  }
+  .selector-right-container-wrap {
+    display: flex;
+    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
+    border-radius: 6px;
+  }
+  .className-selector-wrap {
     max-width: 180px;
     min-width: 0;
-    .error-tips {
-      margin-top: 8px;
-      font-size: 12px;
-      color: var(--ti-lowcode-className-selector-error-tips-color);
-    }
   }
   :deep(.editor-wrap) {
     width: 30px;
   }
   .edit-global-css {
     display: flex;
-    padding: 6px;
+    padding: 7px;
     border: 1px solid #c2c2c2;
     border-radius: 6px;
     cursor: pointer;
@@ -468,15 +499,9 @@ const save = ({ content }) => {
     display: flex;
     row-gap: 2px;
     align-items: center;
-    position: relative;
-    overflow: visible;
     flex-wrap: wrap;
-    max-width: 100%;
-    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
-    border-right: none;
-    border-radius: 6px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    max-width: 180px;
+    min-width: 0;
     padding: 1px 10px;
     &:hover {
       border-color: var(--ti-lowcode-className-selector-container-hover-border-color);
@@ -484,9 +509,6 @@ const save = ({ content }) => {
     &.has-error {
       border-color: var(--ti-lowcode-className-selector-container-error-border-color);
       background-color: var(--ti-lowcode-className-selector-container-error-bg-color);
-      .selector-drop-down-list {
-        top: calc(100% + 30px);
-      }
     }
     &:has(.selector-input:focus) {
       .empty-tips {
@@ -553,53 +575,59 @@ const save = ({ content }) => {
         padding: 1px 2px;
       }
     }
+  }
 
-    .selector-drop-down-list {
-      box-sizing: border-box;
-      position: absolute;
-      display: flex;
-      width: 100%;
-      max-height: 200px;
-      top: calc(100% + 10px);
-      left: 0;
-      padding: 8px 0;
-      background-color: var(--ti-lowcode-className-selector-dropdown-list-bg-color);
-
-      border: 1px solid transparent;
-      border-radius: 6px;
-      z-index: 1;
-      flex-direction: column;
-      overflow: scroll;
-      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
+  .error-tips {
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--ti-lowcode-className-selector-error-tips-color);
+  }
 
-      .selector-dropdown-list-tips {
-        font-size: 12px;
-        padding: 0 10px;
-      }
+  .selector-drop-down-list {
+    box-sizing: border-box;
+    position: absolute;
+    display: flex;
+    width: 100%;
+    max-height: 200px;
+    top: calc(100% + 10px);
+    left: 0;
+    padding: 8px 0;
+    background-color: var(--ti-lowcode-className-selector-dropdown-list-bg-color);
+
+    border: 1px solid transparent;
+    border-radius: 6px;
+    z-index: 1;
+    flex-direction: column;
+    overflow: scroll;
+    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
 
-      .selector-dropdown-list-tips + .selector-dropdown-list-tips {
-        margin-top: 10px;
-      }
-      .add-global-class-tips {
-        margin-top: 10px;
-      }
+    .selector-dropdown-list-tips {
+      font-size: 12px;
+      padding: 0 10px;
+    }
 
-      .exist-class-item {
-        cursor: pointer;
-        height: 32px;
-        padding: 0 16px;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        > span {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        &.active,
-        &:hover {
-          background-color: var(--ti-lowcode-className-selector-dropdown-list-item-active-bg-color);
-          color: var(--ti-lowcode-className-selector-dropdown-list-item-color);
-        }
+    .selector-dropdown-list-tips + .selector-dropdown-list-tips {
+      margin-top: 10px;
+    }
+    .add-global-class-tips {
+      margin-top: 10px;
+    }
+
+    .exist-class-item {
+      cursor: pointer;
+      height: 32px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &.active,
+      &:hover {
+        background-color: var(--ti-lowcode-className-selector-dropdown-list-item-active-bg-color);
+        color: var(--ti-lowcode-className-selector-dropdown-list-item-color);
       }
     }
   }
@@ -608,42 +636,12 @@ const save = ({ content }) => {
     flex: 4;
     flex-shrink: 0;
     min-width: 84px;
+    border-left: 1px solid var(--ti-lowcode-className-selector-container-border-color);
     :deep(input) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
       padding-right: 30px;
+      border: none;
       font-size: 12px;
     }
   }
 }
 </style>
-<style lang="less">
-.tiny-popover.tiny-popper.del-selector-popper-wrapper {
-  width: 220px;
-  height: 108px;
-  box-sizing: border-box;
-  background-color: var(--ti-lowcode-className-selector-del-popover-bg-color);
-  padding: 6px;
-
-  .popper-confirm {
-    padding: 20px;
-  }
-
-  .popper-confirm-header {
-    font-size: 12px;
-    color: var(--ti-lowcode-className-selector-del-popover-title-color);
-    .icon {
-      color: var(--ti-lowcode-warning-color);
-      width: 16px;
-      height: 16px;
-    }
-    .title {
-      margin-left: 4px;
-    }
-  }
-  .popper-confirm-footer {
-    text-align: center;
-    margin-top: 22px;
-  }
-}
-</style>

From 816688c0a7ede667ae4b480bc2e3d5484b46057a Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Tue, 9 Jan 2024 23:17:32 -0800
Subject: [PATCH 04/10] =?UTF-8?q?feat(setting-stylePanel):=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=9D=A2=E6=9D=BF=E7=BC=96=E8=BE=91=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=B0UI=E4=B8=8E=E4=BA=A4=E4=BA=92-?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MetaCodeEditor.vue  | 19 +++++++++----
 packages/design-core/assets/error.svg         |  4 +++
 .../components/classNamesContainer/index.vue  | 28 ++++++++++++++-----
 packages/theme/dark/settings.less             |  6 ++--
 packages/theme/light/metaComponent.less       |  4 +--
 packages/theme/light/variable.less            |  5 ----
 6 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 packages/design-core/assets/error.svg

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 72f52ba9d3..564d787100 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -2,7 +2,7 @@
   <div class="editor-wrap">
     <slot :open="open">
       <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
-        <span>{{ value === '' ? buttonLabel : value?.slice(0, 30) }}</span>
+        <span class="text-content text-ellipsis-multiple">{{ value === '' ? buttonLabel : value }}</span>
         <svg-icon class="edit-icon" name="edit"></svg-icon>
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
@@ -282,17 +282,26 @@ export default {
   }
 }
 .full-width {
-  border: 1px solid #adb0b8;
-  border-radius: 6px;
-  padding: 4px 8px;
-  height: 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 4px 8px;
+  border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
+  border-radius: 6px;
+  &:hover {
+    border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
+  }
+  .text-content {
+    --ellipsis-line: 1;
+  }
   &.empty-color {
     color: var(--ti-lowcode-common-text-desc-color);
   }
   .edit-icon {
+    margin-left: 4px;
+    flex-shrink: 0;
     cursor: pointer;
     color: var(--ti-lowcode-common-text-main-color);
   }
diff --git a/packages/design-core/assets/error.svg b/packages/design-core/assets/error.svg
new file mode 100644
index 0000000000..9da1b4b809
--- /dev/null
+++ b/packages/design-core/assets/error.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" xml:space="preserve" isSvg="true">
+  <path d="M14 7c0 3.87-3.13 7-7 7s-7-3.13-7-7 3.13-7 7-7 7 3.13 7 7z" style="fill-rule: evenodd; clip-rule: evenodd;"></path>
+  <path d="M9.96 9.29c.09.09.14.21.14.34 0 .13-.05.25-.14.33a.47.47 0 0 1-.67 0L7 7.67 4.71 9.96c-.18.18-.49.18-.67 0a.483.483 0 0 1 0-.67L6.33 7 4.04 4.71c-.09-.09-.14-.21-.14-.34s.05-.25.14-.34c.18-.18.49-.18.67 0L7 6.33l2.29-2.29c.19-.18.49-.18.67 0 .09.09.14.21.14.34s-.05.25-.14.34L7.67 7l2.29 2.29z" style="fill: rgb(255, 255, 255);"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index cf148f29f9..8d857223f8 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -60,7 +60,10 @@
           <tiny-select v-model="state.className.mouseState" :options="stateOptions" class="state-selector">
           </tiny-select>
         </div>
-        <div v-if="classNameState.selectorHasError" class="error-tips">{{ classNameState.selectorHasError }}</div>
+        <div v-if="classNameState.selectorHasError" class="error-tips">
+          <svg-icon name="error"></svg-icon>
+          <span class="error-tips-text">{{ classNameState.selectorHasError }}</span>
+        </div>
         <div v-if="classNameState.showDropdownList" class="selector-drop-down-list">
           <span class="selector-dropdown-list-tips">输入并回车创建新选择器</span>
           <span v-if="currentSelectorList.length" class="selector-dropdown-list-tips">选择已有选择器编辑</span>
@@ -401,6 +404,8 @@ const handleDelSelector = () => {
   // 删除选择器，仅从当前选中组件中删除类名, 不删除全局 css 中的 css 类名和样式
   // 后期需要可以拿到全局组件的类名，如果只有当前组件使用该类名，从全局样式中删除之
   editClassName(classNameState.curSelector, OPTION_TYPE.REMOVE)
+  state.className.classNameList = ''
+  state.className.mouseState = ''
 }
 
 const handleFocusInput = () => {
@@ -477,8 +482,6 @@ const handleDeleteCurSelector = () => {
   }
   .selector-right-container-wrap {
     display: flex;
-    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
-    border-radius: 6px;
   }
   .className-selector-wrap {
     max-width: 180px;
@@ -490,7 +493,7 @@ const handleDeleteCurSelector = () => {
   .edit-global-css {
     display: flex;
     padding: 7px;
-    border: 1px solid #c2c2c2;
+    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
     border-radius: 6px;
     cursor: pointer;
   }
@@ -503,6 +506,10 @@ const handleDeleteCurSelector = () => {
     max-width: 180px;
     min-width: 0;
     padding: 1px 10px;
+    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
+    border-radius: 6px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
     &:hover {
       border-color: var(--ti-lowcode-className-selector-container-hover-border-color);
     }
@@ -578,9 +585,14 @@ const handleDeleteCurSelector = () => {
   }
 
   .error-tips {
+    display: flex;
+    align-items: center;
     margin-top: 8px;
     font-size: 12px;
     color: var(--ti-lowcode-className-selector-error-tips-color);
+    .error-tips-text {
+      margin-left: 4px;
+    }
   }
 
   .selector-drop-down-list {
@@ -593,7 +605,6 @@ const handleDeleteCurSelector = () => {
     left: 0;
     padding: 8px 0;
     background-color: var(--ti-lowcode-className-selector-dropdown-list-bg-color);
-
     border: 1px solid transparent;
     border-radius: 6px;
     z-index: 1;
@@ -634,9 +645,12 @@ const handleDeleteCurSelector = () => {
 
   .state-selector {
     flex: 4;
-    flex-shrink: 0;
     min-width: 84px;
-    border-left: 1px solid var(--ti-lowcode-className-selector-container-border-color);
+    border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
+    border-radius: 6px;
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
     :deep(input) {
       padding-right: 30px;
       border: none;
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index babd34dd15..753e762c18 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -31,9 +31,9 @@
   --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
   --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2);
   --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-className-selector-container-label-color: #fff;
-  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
+  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6);
   --ti-lowcode-className-selector-dropdown-list-bg-color: #202020;
   --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less
index 0ad943a153..58e4b9bc99 100644
--- a/packages/theme/light/metaComponent.less
+++ b/packages/theme/light/metaComponent.less
@@ -9,9 +9,9 @@
 
   // MetaCodeEditor
   --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-secondary-button-border-color);
   --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-secondary-button-border-hover-color);
+  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
 }
 
 // config-item label popover tips
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index 473d6f0237..a0acf1e5d8 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -50,11 +50,6 @@
   --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-component-svg-button-active-bg-color: rgba(0, 0, 0, 0.05);
 
-  --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-component-btn-default-color);
-  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-component-btn-default-border-color);
-  --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-component-btn-default-hover-color);
-  --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-component-btn-default-border-hover-color);
-
   // 关闭按钮
   --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色
   --ti-lowcode-component-close-icon-text-hover-color: var(

From a9edc604d08167c773063d03ae5a019c145b8a72 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 10 Jan 2024 04:28:32 -0800
Subject: [PATCH 05/10] =?UTF-8?q?fix(settingPanel-style):=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=9D=A2=E6=9D=BF=E6=96=B0=E4=BA=A4=E4=BA=92=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-core/src/DesignSettings.vue              | 4 ----
 packages/settings/styles/src/Main.vue                    | 6 ++++--
 .../styles/src/components/classNamesContainer/index.vue  | 9 +++++++--
 packages/theme/dark/setting-style.less                   | 1 +
 packages/theme/light/setting-style.less                  | 1 +
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index b3cdc83334..e9634b6ae9 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -48,10 +48,6 @@ export default {
   padding-top: 20px;
   background-color: var(--ti-lowcode-setting-panel-bg-color);
 
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
   .tiny-tabs {
     height: 100%;
   }
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index a0cf9f71cb..0e36d108c3 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -204,7 +204,7 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 8px 16px 12px;
+  padding: 8px 10px 12px;
   column-gap: 8px;
   .line-style {
     display: block;
@@ -213,8 +213,10 @@ export default {
     color: var(--ti-lowcode-setting-style-font-color);
     font-size: 12px;
     .line-text {
-      margin-bottom: 8px;
       display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--ti-lowcode-setting-style-title-color);
     }
   }
   .inline-style {
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 8d857223f8..4be615e444 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -460,11 +460,16 @@ const handleDeleteCurSelector = () => {
 
 <style lang="less" scoped>
 .className-container {
+  ::-webkit-scrollbar {
+    display: block;
+  }
   padding: 10px;
 }
 .title {
   margin: 0;
+  font-size: 14px;
   color: var(--ti-lowcode-className-selector-title-color);
+  font-weight: normal;
 }
 
 .selector-container {
@@ -510,6 +515,7 @@ const handleDeleteCurSelector = () => {
     border-radius: 6px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    font-size: 12px;
     &:hover {
       border-color: var(--ti-lowcode-className-selector-container-hover-border-color);
     }
@@ -524,7 +530,6 @@ const handleDeleteCurSelector = () => {
     }
     .empty-tips {
       position: absolute;
-      font-size: 14px;
       color: var(--ti-lowcode-className-selector-container-empty-tips-color);
       z-index: 0;
     }
@@ -630,7 +635,7 @@ const handleDeleteCurSelector = () => {
       padding: 0 16px;
       display: flex;
       align-items: center;
-      font-size: 14px;
+      font-size: 12px;
       > span {
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
index 4080f5d125..552eee7e3c 100644
--- a/packages/theme/dark/setting-style.less
+++ b/packages/theme/dark/setting-style.less
@@ -4,4 +4,5 @@
   --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);
+  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
 }
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index f046a235ef..b82bd2ac29 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -4,4 +4,5 @@
   --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);
+  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
 }

From bb30b972a400ec8828c0bae88a5b8c9c04b67496 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Wed, 10 Jan 2024 19:42:43 -0800
Subject: [PATCH 06/10] =?UTF-8?q?fix(setting-stylePanel):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=A0=B7=E5=BC=8F=E9=80=89=E6=8B=A9=E5=99=A8=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E4=B8=8D=E5=AF=B9=E7=9A=84=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/src/components/classNamesContainer/index.vue         | 1 +
 packages/theme/dark/settings.less                               | 1 +
 packages/theme/light/setting-style.less                         | 2 +-
 packages/theme/light/settings.less                              | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 4be615e444..d0843ae656 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -620,6 +620,7 @@ const handleDeleteCurSelector = () => {
     .selector-dropdown-list-tips {
       font-size: 12px;
       padding: 0 10px;
+      color: var(--ti-lowcode-className-selector-dropdown-list-tips-color);
     }
 
     .selector-dropdown-list-tips + .selector-dropdown-list-tips {
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index 753e762c18..34c658074c 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -38,6 +38,7 @@
   --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
   --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
 }
 
 :root {
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index b82bd2ac29..4afe8bfe8c 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -1,6 +1,6 @@
 :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-font-color: var(--ti-lowcode-base-text-color);
   --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);
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index 6f8b85ac66..d40550c423 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -38,6 +38,7 @@
   --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
   --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
 }
 
 :root {

From cbd693131cfbad07aab8a12f37eae6c9643ff276 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Thu, 11 Jan 2024 03:34:15 -0800
Subject: [PATCH 07/10] =?UTF-8?q?fix(setting-stylePanel):=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=80=89=E6=8B=A9=E5=99=A8=E9=97=B4=E8=B7=9D=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue                         | 4 +---
 .../styles/src/components/classNamesContainer/index.vue       | 2 +-
 packages/theme/light/base.less                                | 2 +-
 packages/theme/light/settings.less                            | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 0e36d108c3..124f591296 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -204,12 +204,10 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 8px 10px 12px;
+  padding: 0 16px 0;
   column-gap: 8px;
   .line-style {
     display: block;
-    margin-top: 16px;
-    margin-bottom: 8px;
     color: var(--ti-lowcode-setting-style-font-color);
     font-size: 12px;
     .line-text {
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index d0843ae656..0a3d058a0d 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -463,7 +463,7 @@ const handleDeleteCurSelector = () => {
   ::-webkit-scrollbar {
     display: block;
   }
-  padding: 10px;
+  padding: 16px 16px 8px;
 }
 .title {
   margin: 0;
diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less
index 89c7d23bee..db2e353106 100644
--- a/packages/theme/light/base.less
+++ b/packages/theme/light/base.less
@@ -3,7 +3,7 @@
   --ti-lowcode-base-gray-0: #fff;
   --ti-lowcode-base-gray-5: #fafafa;
   --ti-lowcode-base-gray-10: #f5f5f5;
-  --ti-lowcode-base-gray-20: #ebebeb;
+  --ti-lowcode-base-gray-20: #f0f0f0;
   --ti-lowcode-base-gray-30: #dbdbdb;
   --ti-lowcode-base-gray-40: #c2c2c2;
   --ti-lowcode-base-gray-50: #808080;
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index d40550c423..26aaa59fde 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -36,7 +36,7 @@
   --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2);
   --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0);
   --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
+  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20);
   --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
 }

From 371bc3e380e12da79eb9d95636233bf436978584 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 12 Jan 2024 00:13:59 -0800
Subject: [PATCH 08/10] =?UTF-8?q?fix(setting-stylePanel):=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=A0=B7=E5=BC=8F=E9=80=89=E6=8B=A9=E5=99=A8=E8=B7=9D?=
 =?UTF-8?q?=E7=A6=BB=E9=A1=B6=E9=83=A8=E8=B7=9D=E7=A6=BB=E4=B8=8E=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=88=97=E8=A1=A8=E6=BB=9A=E5=8A=A8=E6=9D=A1=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/settings/styles/src/Main.vue                          | 2 +-
 .../styles/src/components/classNamesContainer/index.vue        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 124f591296..9bb7a08d9b 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -204,7 +204,7 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 0 16px 0;
+  padding: 8px 16px 0;
   column-gap: 8px;
   .line-style {
     display: block;
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 0a3d058a0d..63f365187a 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -64,7 +64,7 @@
           <svg-icon name="error"></svg-icon>
           <span class="error-tips-text">{{ classNameState.selectorHasError }}</span>
         </div>
-        <div v-if="classNameState.showDropdownList" class="selector-drop-down-list">
+        <div v-if="classNameState.showDropdownList" class="selector-drop-down-list lowcode-scrollbar-thin">
           <span class="selector-dropdown-list-tips">输入并回车创建新选择器</span>
           <span v-if="currentSelectorList.length" class="selector-dropdown-list-tips">选择已有选择器编辑</span>
           <ul class="exist-class-list">
@@ -620,6 +620,7 @@ const handleDeleteCurSelector = () => {
     .selector-dropdown-list-tips {
       font-size: 12px;
       padding: 0 10px;
+      line-height: 32px;
       color: var(--ti-lowcode-className-selector-dropdown-list-tips-color);
     }
 

From 2f5441251853ab69a4ba0eb42ceb216983c58c46 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sun, 14 Jan 2024 19:30:27 -0800
Subject: [PATCH 09/10] feat(setting-style): add help link button

---
 packages/controller/src/useHelp.js                 |  3 ++-
 .../src/components/classNamesContainer/index.vue   | 14 +++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/controller/src/useHelp.js b/packages/controller/src/useHelp.js
index 72238fc200..8240c3cccf 100644
--- a/packages/controller/src/useHelp.js
+++ b/packages/controller/src/useHelp.js
@@ -20,7 +20,8 @@ const helpState = {
     datasource: 11,
     i18n: 12,
     page: 2,
-    script: 8
+    script: 8,
+    stylePanel: 6
   }
 }
 
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index 63f365187a..0225953091 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="className-container">
-    <h6 class="title">全局样式</h6>
+    <h6 class="title">
+      <span>全局样式</span>
+      <link-button :href="docsUrl" class="help-link"></link-button>
+    </h6>
     <div class="selector-container">
       <meta-code-editor
         :modelValue="state.cssContent"
@@ -102,8 +105,8 @@
 import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
-import { useProperties, useCanvas, useHistory } from '@opentiny/tiny-engine-controller'
-import { MetaCodeEditor } from '@opentiny/tiny-engine-common'
+import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-controller'
+import { MetaCodeEditor, LinkButton } from '@opentiny/tiny-engine-common'
 import { formatString } from '@opentiny/tiny-engine-common/js/ast'
 import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
 import { stringify, getSelectorArr } from '../../js/parser'
@@ -128,6 +131,8 @@ const OPTION_TYPE = {
   EDIT: 'edit'
 }
 
+const docsUrl = useHelp().getDocsUrl('stylePanel')
+
 const classNameState = reactive({
   curSelector: '',
   curSelectorEditable: false,
@@ -470,6 +475,9 @@ const handleDeleteCurSelector = () => {
   font-size: 14px;
   color: var(--ti-lowcode-className-selector-title-color);
   font-weight: normal;
+  .help-link {
+    vertical-align: middle;
+  }
 }
 
 .selector-container {

From f1505a80cd0d98a03cbc011e0282b2a21aac4588 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 19 Jan 2024 00:09:11 -0800
Subject: [PATCH 10/10] fix(setting-style): delete empty row by code review

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

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 9bb7a08d9b..4a942356cf 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -144,7 +144,6 @@ export default {
       }
 
       addHistory()
-
       updateRect()
     }