From 66e16452a89bf8aa8dec4faaf73efd1df87cd04e Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 26 Mar 2024 16:12:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E9=80=89=E6=8B=A9=E5=99=A8=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/fields/DataSourceFieldSelect.vue      | 37 +++++++++++++--
 .../editor/src/hooks/use-data-source-edit.ts  | 46 +++++++++++++++++++
 .../data-source/DataSourceListPanel.vue       | 32 ++-----------
 3 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 packages/editor/src/hooks/use-data-source-edit.ts

diff --git a/packages/editor/src/fields/DataSourceFieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect.vue
index f44e956a..a7568e75 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect.vue
+++ b/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>
diff --git a/packages/editor/src/hooks/use-data-source-edit.ts b/packages/editor/src/hooks/use-data-source-edit.ts
new file mode 100644
index 00000000..07afb830
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 0f4195ab..1b67035f 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/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) => {