feat(editor): 优化数据源字段选择器交互

packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="m-editor-data-source-field-select">
+    <template v-if="checkStrictly">
       <TMagicSelect
         :model-value="selectDataSourceId"
         clearable
@@ -40,6 +41,21 @@
         }"
         @change="fieldChangeHandler"
       ></TMagicCascader>
+    </template>
+
+    <TMagicCascader
+      v-else
+      clearable
+      filterable
+      :model-value="modelValue"
+      :disabled="disabled"
+      :size="size"
+      :options="cascaderOptions"
+      :props="{
+        checkStrictly,
+      }"
+      @change="onChangeHandler"
+    ></TMagicCascader>
 
     <TMagicButton
       v-if="selectDataSourceId && hasDataSourceSidePanel"
@@ -132,6 +148,16 @@ const fieldsOptions = computed(() => {
   return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
 });
 
+const cascaderOptions = computed(() => {
+  const options =
+    dataSources.value?.map((ds) => ({
+      label: ds.title || ds.id,
+      value: valueIsKey.value ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+      children: getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType),
+    })) || [];
+  return options.filter((option) => option.children.length);
+});
+
 const dsChangeHandler = (v: string) => {
   modelValue.value = [v];
   emit('change', modelValue.value);
@@ -142,6 +168,11 @@ const fieldChangeHandler = (v: string[] = []) => {
   emit('change', modelValue.value);
 };
 
+const onChangeHandler = (v: string[] = []) => {
+  modelValue.value = v;
+  emit('change', v);
+};
+
 const hasDataSourceSidePanel = computed(() =>
   (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );