feat(editor,core): 数据源模板改成使用 ES 分隔符

packages/core/src/App.ts

@@ -322,15 +322,7 @@ class App extends EventEmitter {
   }
 
   public compiledNode(node: MNode, content: DataSourceManagerData, sourceId?: Id) {
-    return compiledNode(
+    return compiledNode((str: string) => template(str)(content), cloneDeep(node), this.dsl?.dataSourceDeps, sourceId);
-      (str: string) =>
-        template(str, {
-          escape: /\{\{([\s\S]+?)\}\}/g,
-        })(content),
-      cloneDeep(node),
-      this.dsl?.dataSourceDeps,
-      sourceId,
-    );
   }
 
   public destroy() {

packages/editor/src/fields/DataSourceInput.vue

@@ -30,13 +30,15 @@
       </div>
     </template>
   </component>
-  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+    <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
       <div class="el-input__inner">
         <template v-for="(item, index) in displayState">
           <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
           <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
         </template>
+
+        <Icon class="tmagic-data-source-input-icon" :icon="Coin" />
       </div>
     </div>
   </div>
@@ -90,7 +92,7 @@ const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 const setDisplayState = () => {
   displayState.value = [];
 
-  const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
   let index = 0;
   for (const match of matches) {
     if (typeof match.index === 'undefined') break;
@@ -195,7 +197,7 @@ const getSelectionStart = () => {
  * @param leftCurlyBracketIndex {字符索引
  */
 const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
-  leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
 
 /**
  * 当前输入的是.
@@ -213,7 +215,7 @@ const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (
   if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
     // 当前输入的是{
     result = dataSources.value;
-  } else if (leftCurlyBracketIndex > -1) {
+  } else if (leftCurlyBracketIndex > 0) {
     // 当前输入的是{xx
     const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
     result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
@@ -299,7 +301,7 @@ const querySearch = (queryString: string, cb: (data: { value: string }[]) => voi
   const curQueryString = queryString.substring(0, selectionStart);
 
   const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
-  const dsKeyStringLastIndex = curQueryString.lastIndexOf('{');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
 
   const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
 
@@ -321,7 +323,7 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
   let startText = inputText.substring(0, selectionStart);
 
   const dotIndex = startText.lastIndexOf('.');
-  const leftCurlyBracketIndex = startText.lastIndexOf('{');
+  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
 
   const endText = inputText.substring(selectionStart);
 
@@ -336,7 +338,6 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
     if (!isRightCurlyBracket(selectionStart + 1)) {
       suggestText = `${suggestText}}`;
     }
-    suggestText = `{${suggestText}}`;
   } else if (!curCharIsDot(dotIndex)) {
     startText = startText.substring(0, dotIndex + 1);
   }
@@ -345,10 +346,10 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
 
   await nextTick();
 
-  // 由于选择数据源时会在后面补全}}, 所以光标要前移2位
+  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
   let newSelectionStart = 0;
   if (isDataSource) {
-    newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
   } else {
     newSelectionStart = dotIndex + suggestText.length + 1;
   }

packages/editor/src/theme/data-source-input.scss

@@ -0,0 +1,18 @@
+.tmagic-data-source-input-text {
+  .el-input__wrapper.tmagic-data-source-input-text-wrapper {
+    overflow: hidden;
+    padding-right: 30px;
+  }
+
+  .el-input__inner {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .tmagic-data-source-input-icon {
+    position: absolute;
+    right: 7px;
+  }
+}

packages/editor/src/theme/theme.scss

@@ -19,4 +19,5 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-input.scss";
 @import "./key-value.scss";

packages/editor/src/utils/props.ts

@@ -112,6 +112,7 @@ export const fillConfig = (config: FormConfig = []) => [
                   {
                     name: 'borderWidth',
                     text: '宽度',
+                    defaultValue: '0',
                   },
                   {
                     name: 'borderColor',
@@ -122,6 +123,7 @@ export const fillConfig = (config: FormConfig = []) => [
                     name: 'borderStyle',
                     text: '样式',
                     type: 'select',
+                    defaultValue: 'none',
                     options: [
                       { text: 'none', value: 'none' },
                       { text: 'hidden', value: 'hidden' },

playground/src/configs/dsl.ts

@@ -208,7 +208,7 @@ export default {
             fontWeight: '',
           },
           name: '按钮',
-          text: '{{ds_b64c92b5.text}}',
+          text: '${ds_b64c92b5.text}',
           multiple: true,
           events: [
             {