From b952e6efd1e096b47f7f32b938cd5ae6975fc4bf Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 26 Jun 2023 20:30:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,core):=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E6=A8=A1=E6=9D=BF=E6=94=B9=E6=88=90=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20ES=20=E5=88=86=E9=9A=94=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/App.ts                      | 10 +--------
 .../editor/src/fields/DataSourceInput.vue     | 21 ++++++++++---------
 .../editor/src/theme/data-source-input.scss   | 18 ++++++++++++++++
 packages/editor/src/theme/theme.scss          |  1 +
 packages/editor/src/utils/props.ts            |  2 ++
 playground/src/configs/dsl.ts                 |  2 +-
 6 files changed, 34 insertions(+), 20 deletions(-)
 create mode 100644 packages/editor/src/theme/data-source-input.scss

diff --git a/packages/core/src/App.ts b/packages/core/src/App.ts
index 18b17165..75d23ce0 100644
--- a/packages/core/src/App.ts
+++ b/packages/core/src/App.ts
@@ -322,15 +322,7 @@ class App extends EventEmitter {
   }
 
   public compiledNode(node: MNode, content: DataSourceManagerData, sourceId?: Id) {
-    return compiledNode(
-      (str: string) =>
-        template(str, {
-          escape: /\{\{([\s\S]+?)\}\}/g,
-        })(content),
-      cloneDeep(node),
-      this.dsl?.dataSourceDeps,
-      sourceId,
-    );
+    return compiledNode((str: string) => template(str)(content), cloneDeep(node), this.dsl?.dataSourceDeps, sourceId);
   }
 
   public destroy() {
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index 5312ff4f..3dc35c33 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/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="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+    <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;
   }
diff --git a/packages/editor/src/theme/data-source-input.scss b/packages/editor/src/theme/data-source-input.scss
new file mode 100644
index 00000000..9c39f1f7
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/editor/src/theme/theme.scss b/packages/editor/src/theme/theme.scss
index df06ccfc..fb9425ce 100644
--- a/packages/editor/src/theme/theme.scss
+++ b/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";
diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
index c6c4405e..b88d47d4 100644
--- a/packages/editor/src/utils/props.ts
+++ b/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' },
diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
index 3e057c38..44825977 100644
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@@ -208,7 +208,7 @@ export default {
             fontWeight: '',
           },
           name: '按钮',
-          text: '{{ds_b64c92b5.text}}',
+          text: '${ds_b64c92b5.text}',
           multiple: true,
           events: [
             {