feat(editor): 新增数据源时先选类型

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 = '新增属性';

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>
 

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();
 };
 

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) {

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%;
+    }
+  }
+}

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 (): FormConfig {
-
-export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormConfig {
   return [
     {
       name: 'id',
@@ -11,12 +9,7 @@ export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormC
     {
       name: 'type',
       text: '类型',
-      type: 'select',
+      type: 'hidden',
-      options: [
-        { text: '基础', value: 'base' },
-        { text: 'HTTP', value: 'http' },
-        ...datasourceTypeList.map((item) => ({ text: item.text, value: item.type })),
-      ],
       defaultValue: 'base',
     },
     {

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 => [
+const fillConfig = (config: FormConfig): FormConfig => [
-  ...BaseFormConfig(datasourceTypeList),
+  ...BaseFormConfig(),
   ...config,
   {
     type: 'panel',
@@ -33,18 +31,14 @@ const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption
   },
 ];
 
-export const getFormConfig = (
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
-  type: string,
-  datasourceTypeList: DatasourceTypeOption[],
-  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] || []);
   }
 };
 

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;