feat(setting-stylePanel): 样式面板编辑全局样式新UI与交互

packages/common/component/MetaCodeEditor.vue

@@ -1,9 +1,9 @@
 <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>
+        <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">
         {{ 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">
@@ -45,7 +46,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,20 +276,32 @@ 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;
-  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);
   }

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'

packages/controller/src/useHelp.js

@@ -20,7 +20,8 @@ const helpState = {
     datasource: 11,
     i18n: 12,
     page: 2,
-    script: 8
+    script: 8,
+    stylePanel: 6
   }
 }
 

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%;
   }

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,33 @@ 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 +164,8 @@ export default {
         state.lineStyleDisable = true
         addHistory()
       }
+
+      updateRect()
     }
 
     watch(
@@ -218,21 +203,22 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 8px 16px 12px;
+  padding: 8px 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 {
-      margin-bottom: 8px;
       display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--ti-lowcode-setting-style-title-color);
     }
   }
   .inline-style {
     display: flex;
+    align-items: center;
     :deep(.editor-wrap) {
       display: flex;
       .tiny-button {
@@ -257,8 +243,5 @@ export default {
       }
     }
   }
-  :deep(.svg-icon) {
-    margin-top: 5px;
-  }
 }
 </style>