feat(editor): 数据源字段选择器增加编辑按钮

packages/editor/src/fields/DataSourceFieldSelect.vue

@@ -14,6 +14,14 @@
       :prop="`${prop}${prop ? '.' : ''}${name}`"
       @change="onChangeHandler"
     ></component>
+    <TMagicButton
+      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId"
+      style="margin-left: 5px"
+      link
+      :size="size"
+      @click="editHandler(selectedDataSourceId)"
+      ><MIcon :icon="Edit"></MIcon
+    ></TMagicButton>
     <TMagicButton
       v-if="config.fieldConfig"
       style="margin-left: 5px"
@@ -23,12 +31,20 @@
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
       ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
+
+    <DataSourceConfigPanel
+      ref="editDialog"
+      :disabled="!editable"
+      :values="dataSourceValues"
+      :title="dialogTitle"
+      @submit="submitDataSourceHandler"
+    ></DataSourceConfigPanel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, resolveComponent } from 'vue';
-import { Coin } from '@element-plus/icons-vue';
+import { Coin, Edit } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
@@ -37,6 +53,8 @@ import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
+import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
+import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
 defineOptions({
@@ -50,6 +68,15 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
   disabled: false,
 });
 
+const selectedDataSourceId = computed(() => {
+  const value = props.model[props.name];
+  if (!Array.isArray(value) || !value.length) {
+    return '';
+  }
+
+  return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '');
+});
+
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
 const getOptionChildren = (
@@ -76,7 +103,7 @@ const getOptionChildren = (
       return;
     }
 
-    if (!dataSourceFieldType.includes(fieldType) && fieldType !== 'object') {
+    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
       return;
     }
 
@@ -117,7 +144,7 @@ onMounted(() => {
     typeof value[0] === 'string' &&
     value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
   ) {
-    return (showDataSourceFieldSelect.value = true);
+    showDataSourceFieldSelect.value = true;
   }
 });
 
@@ -148,4 +175,8 @@ const tagName = computed(() => {
 const onChangeHandler = (value: any) => {
   emit('change', value);
 };
+
+const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
+  services?.dataSourceService,
+);
 </script>

packages/editor/src/hooks/use-data-source-edit.ts

@@ -0,0 +1,46 @@
+import { computed, ref } from 'vue';
+
+import type { DataSourceSchema } from '@tmagic/schema';
+
+import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+import type { DataSourceService } from '@editor/services/dataSource';
+
+export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
+  const dialogTitle = ref('');
+  const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+  const dataSourceValues = ref<Record<string, any>>({});
+
+  const editable = computed(() => dataSourceService?.get('editable') ?? true);
+
+  const editHandler = (id: string) => {
+    if (!editDialog.value) return;
+
+    dataSourceValues.value = {
+      ...dataSourceService?.getDataSourceById(id),
+    };
+
+    dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
+
+    editDialog.value.show();
+  };
+
+  const submitDataSourceHandler = (value: DataSourceSchema) => {
+    if (value.id) {
+      dataSourceService?.update(value);
+    } else {
+      dataSourceService?.add(value);
+    }
+
+    editDialog.value?.hide();
+  };
+
+  return {
+    dialogTitle,
+    editDialog,
+    dataSourceValues,
+    editable,
+
+    editHandler,
+    submitDataSourceHandler,
+  };
+};

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -42,10 +42,10 @@ import { computed, inject, ref } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
-import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
+import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
 import type { DataSourceListSlots, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
@@ -59,13 +59,9 @@ defineOptions({
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
+  useDataSourceEdit(dataSourceService);
 
-const dataSourceValues = ref<Record<string, any>>({});
-
-const dialogTitle = ref('');
-
-const editable = computed(() => dataSourceService?.get('editable') ?? true);
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },
@@ -93,32 +89,10 @@ const addHandler = (type: string) => {
   editDialog.value.show();
 };
 
-const editHandler = (id: string) => {
-  if (!editDialog.value) return;
-
-  dataSourceValues.value = {
-    ...dataSourceService?.getDataSourceById(id),
-  };
-
-  dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
-
-  editDialog.value.show();
-};
-
 const removeHandler = (id: string) => {
   dataSourceService?.remove(id);
 };
 
-const submitDataSourceHandler = (value: DataSourceSchema) => {
-  if (value.id) {
-    dataSourceService?.update(value);
-  } else {
-    dataSourceService?.add(value);
-  }
-
-  editDialog.value?.hide();
-};
-
 const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 
 const filterTextChangeHandler = (val: string) => {