From 2bd86d21012d28bc474951f87a81f622255ac36b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 29 Aug 2023 18:24:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E6=97=B6=E5=85=88=E9=80=89=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/fields/DataSourceFields.vue    | 11 ++++-
 .../sidebar/code-block/CodeBlockListPanel.vue |  1 +
 .../data-source/DataSourceListPanel.vue       | 46 ++++++++++++++++---
 packages/editor/src/services/dataSource.ts    |  2 +-
 packages/editor/src/theme/data-source.scss    | 11 +++++
 .../src/utils/data-source/formConfigs/base.ts | 11 +----
 .../editor/src/utils/data-source/index.ts     | 18 +++-----
 packages/utils/src/index.ts                   |  2 +-
 8 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/packages/editor/src/fields/DataSourceFields.vue b/packages/editor/src/fields/DataSourceFields.vue
index 7fd375e9..99f3650f 100644
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/packages/editor/src/fields/DataSourceFields.vue
@@ -14,18 +14,21 @@
       :values="fieldValues"
       :parentValues="model[name]"
       :disabled="disabled"
+      :width="width"
       @submit="fieldChange"
     ></MFormDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FieldProps, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorDataSourceFields',
 });
@@ -43,10 +46,14 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
+const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const newHandler = () => {
   fieldValues.value = {};
   filedTitle.value = '新增属性';
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index ce513e9a..e90444d8 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -6,6 +6,7 @@
         <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
           >新增</TMagicButton
         >
+        <slot name="code-block-panel-search"></slot>
       </div>
     </slot>
 
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 55322d57..1d5b90a2 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -2,7 +2,24 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicButton v-if="editable" type="primary" size="small" @click="addHandler">新增</TMagicButton>
+      <TMagicPopover v-if="editable" placement="right">
+        <template #reference>
+          <TMagicButton type="primary" size="small">新增</TMagicButton>
+        </template>
+        <div class="data-source-list-panel-add-menu">
+          <ToolButton
+            v-for="(item, index) in datasourceTypeList"
+            :data="{
+              type: 'button',
+              text: item.text,
+              handler: () => {
+                addHandler(item.type);
+              },
+            }"
+            :key="index"
+          ></ToolButton>
+        </div>
+      </TMagicPopover>
     </div>
 
     <!-- 数据源列表 -->
@@ -12,7 +29,7 @@
       ref="editDialog"
       :disabled="!editable"
       :values="dataSourceValues"
-      :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
+      :title="dialogTitle"
       @submit="submitDataSourceHandler"
     ></DataSourceConfigPanel>
   </TMagicScrollbar>
@@ -21,10 +38,11 @@
 <script setup lang="ts" name="MEditorDataSourceListPanel">
 import { computed, inject, ref } from 'vue';
 
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+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 type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
@@ -40,12 +58,26 @@ const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
 
 const dataSourceValues = ref<Record<string, any>>({});
 
-const editable = computed(() => dataSourceService?.get('editable') ?? true);
+const dialogTitle = ref('');
 
-const addHandler = () => {
+const editable = computed(() => dataSourceService?.get('editable') ?? true);
+const datasourceTypeList = computed(() =>
+  [
+    { text: '基础', type: 'base' },
+    { text: 'HTTP', type: 'http' },
+  ].concat(dataSourceService?.get('datasourceTypeList') ?? []),
+);
+
+const addHandler = (type: string) => {
   if (!editDialog.value) return;
 
-  dataSourceValues.value = {};
+  dataSourceValues.value = {
+    type,
+  };
+
+  const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
+
+  dialogTitle.value = `新增${datasourceType?.text || ''}`;
 
   editDialog.value.show();
 };
@@ -57,6 +89,8 @@ const editHandler = (id: string) => {
     ...dataSourceService?.getDataSourceById(id),
   };
 
+  dialogTitle.value = `新增${dataSourceValues.value.title || ''}`;
+
   editDialog.value.show();
 };
 
diff --git a/packages/editor/src/services/dataSource.ts b/packages/editor/src/services/dataSource.ts
index 07afb089..4ec89d30 100644
--- a/packages/editor/src/services/dataSource.ts
+++ b/packages/editor/src/services/dataSource.ts
@@ -37,7 +37,7 @@ class DataSource extends BaseService {
   }
 
   public getFormConfig(type = 'base') {
-    return getFormConfig(type, this.get('datasourceTypeList'), this.get('configs'));
+    return getFormConfig(type, this.get('configs'));
   }
 
   public setFormConfig(type: string, config: FormConfig) {
diff --git a/packages/editor/src/theme/data-source.scss b/packages/editor/src/theme/data-source.scss
index 61480adf..bb1c0c5b 100644
--- a/packages/editor/src/theme/data-source.scss
+++ b/packages/editor/src/theme/data-source.scss
@@ -15,3 +15,14 @@
     }
   }
 }
+
+.data-source-list-panel-add-menu {
+  .tmagic-design-button {
+    width: 100%;
+    text-align: left;
+
+    span {
+      width: 100%;
+    }
+  }
+}
diff --git a/packages/editor/src/utils/data-source/formConfigs/base.ts b/packages/editor/src/utils/data-source/formConfigs/base.ts
index 61d54afc..9fa725d0 100644
--- a/packages/editor/src/utils/data-source/formConfigs/base.ts
+++ b/packages/editor/src/utils/data-source/formConfigs/base.ts
@@ -1,8 +1,6 @@
 import type { FormConfig } from '@tmagic/form';
 
-import type { DatasourceTypeOption } from '@editor/type';
-
-export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormConfig {
+export default function (): FormConfig {
   return [
     {
       name: 'id',
@@ -11,12 +9,7 @@ export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormC
     {
       name: 'type',
       text: '类型',
-      type: 'select',
-      options: [
-        { text: '基础', value: 'base' },
-        { text: 'HTTP', value: 'http' },
-        ...datasourceTypeList.map((item) => ({ text: item.text, value: item.type })),
-      ],
+      type: 'hidden',
       defaultValue: 'base',
     },
     {
diff --git a/packages/editor/src/utils/data-source/index.ts b/packages/editor/src/utils/data-source/index.ts
index 73af7325..7d8dbe22 100644
--- a/packages/editor/src/utils/data-source/index.ts
+++ b/packages/editor/src/utils/data-source/index.ts
@@ -1,13 +1,11 @@
 import { FormConfig } from '@tmagic/form';
 import { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
-import { DatasourceTypeOption } from '@editor/type';
-
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
 
-const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption[]): FormConfig => [
-  ...BaseFormConfig(datasourceTypeList),
+const fillConfig = (config: FormConfig): FormConfig => [
+  ...BaseFormConfig(),
   ...config,
   {
     type: 'panel',
@@ -33,18 +31,14 @@ const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption
   },
 ];
 
-export const getFormConfig = (
-  type: string,
-  datasourceTypeList: DatasourceTypeOption[],
-  configs: Record<string, FormConfig>,
-): FormConfig => {
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
   switch (type) {
     case 'base':
-      return fillConfig([], datasourceTypeList);
+      return fillConfig([]);
     case 'http':
-      return fillConfig(HttpFormConfig, datasourceTypeList);
+      return fillConfig(HttpFormConfig);
     default:
-      return fillConfig(configs[type] || [], datasourceTypeList);
+      return fillConfig(configs[type] || []);
   }
 };
 
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 8d1576d2..899a25b8 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -159,7 +159,7 @@ export const guid = (digit = 8): string =>
     return v.toString(16);
   });
 
-export const getValueByKeyPath: any = (keys: string, value: Record<string | number, any>) => {
+export const getValueByKeyPath: any = (keys: string, value: Record<string | number, any> = {}) => {
   const path = keys.split('.');
   const pathLength = path.length;