chore(editor): export getDisplayField 方法

packages/editor/src/fields/DataSourceInput.vue

@@ -54,6 +54,7 @@ import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
+import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
   name: 'MEditorDataSourceInput',
@@ -87,52 +88,7 @@ const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.inp
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const setDisplayState = () => {
-  displayState.value = [];
+  displayState.value = getDisplayField(dataSources.value, state.value);
-
-  // 匹配es6字符串模块
-  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
-  let index = 0;
-  for (const match of matches) {
-    if (typeof match.index === 'undefined') break;
-
-    // 字符串常量
-    displayState.value.push({
-      type: 'text',
-      value: state.value.substring(index, match.index),
-    });
-
-    let dsText = '';
-    let ds: DataSourceSchema | undefined;
-    let fields: DataSchema[] | undefined;
-
-    // 将模块解析成数据源对应的值
-    match[1].split('.').forEach((item, index) => {
-      if (index === 0) {
-        ds = dataSources.value.find((ds) => ds.id === item);
-        dsText += ds?.title || item;
-        fields = ds?.fields;
-        return;
-      }
-
-      const field = fields?.find((field) => field.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
-    });
-
-    displayState.value.push({
-      type: 'var',
-      value: dsText,
-    });
-
-    index = match.index + match[0].length;
-  }
-
-  if (index < state.value.length) {
-    displayState.value.push({
-      type: 'text',
-      value: state.value.substring(index),
-    });
-  }
 };
 
 watch(

packages/editor/src/utils/data-source/index.ts

@@ -1,4 +1,5 @@
 import { FormConfig } from '@tmagic/form';
+import { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import { DatasourceTypeOption } from '@editor/type';
 
@@ -46,3 +47,54 @@ export const getFormConfig = (
       return fillConfig(configs[type] || [], datasourceTypeList);
   }
 };
+
+export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => {
+  const displayState: { value: string; type: 'var' | 'text' }[] = [];
+
+  // 匹配es6字符串模块
+  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === 'undefined') break;
+
+    // 字符串常量
+    displayState.push({
+      type: 'text',
+      value: key.substring(index, match.index),
+    });
+
+    let dsText = '';
+    let ds: DataSourceSchema | undefined;
+    let fields: DataSchema[] | undefined;
+
+    // 将模块解析成数据源对应的值
+    match[1].split('.').forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      const field = fields?.find((field) => field.name === item);
+      fields = field?.fields;
+      dsText += `.${field?.title || item}`;
+    });
+
+    displayState.push({
+      type: 'var',
+      value: dsText,
+    });
+
+    index = match.index + match[0].length;
+  }
+
+  if (index < key.length) {
+    displayState.push({
+      type: 'text',
+      value: key.substring(index),
+    });
+  }
+
+  return displayState;
+};

packages/editor/src/utils/index.ts

@@ -21,3 +21,4 @@ export * from './props';
 export * from './logger';
 export * from './editor';
 export * from './operator';
+export * from './data-source';