style(editor): 事件配置样式调整

packages/editor/src/fields/CodeSelectCol.vue

@@ -6,6 +6,7 @@
         class="select"
         :config="selectConfig"
         :model="model"
+        :size="size"
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
@@ -89,9 +90,7 @@ watch(
 
 const selectConfig = {
   type: 'select',
-  text: '代码块',
   name: props.name,
-  labelWidth: '80px',
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -68,7 +68,6 @@ const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', ''
   if (!paramStatements) return [];
 
   return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
     text: paramState.name,
     ...paramState,
   }));
@@ -106,9 +105,7 @@ const methodsOptions = computed(
 
 const cascaderConfig = computed(() => ({
   type: 'cascader',
-  text: '数据源方法',
   name: props.name,
-  labelWidth: '80px',
   options: methodsOptions.value,
   onChange: (formState: any, dataSourceMethod: [Id, string]) => {
     setParamsConfig(dataSourceMethod, formState);

packages/editor/src/fields/EventSelect.vue

@@ -22,6 +22,7 @@
         :size="size"
         :config="actionsConfig"
         :model="cardItem"
+        :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
         <template #header>
@@ -106,7 +107,6 @@ const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
-    labelWidth: '80px',
     type: 'select',
     defaultValue: ActionType.COMP,
     options: () => [
@@ -139,7 +139,6 @@ const targetCompConfig = computed(() => {
   const defaultTargetCompConfig = {
     name: 'to',
     text: '联动组件',
-    labelWidth: '80px',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
   };
@@ -151,7 +150,6 @@ const compActionConfig = computed(() => {
   const defaultCompActionConfig = {
     name: 'method',
     text: '动作',
-    labelWidth: '80px',
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
@@ -171,7 +169,7 @@ const compActionConfig = computed(() => {
 const codeActionConfig = computed(() => {
   const defaultCodeActionConfig: CodeSelectColConfig = {
     type: 'code-select-col',
-    labelWidth: 0,
+    text: '代码块',
     name: 'codeId',
     disabled: () => !codeBlockService?.getEditStatus(),
     display: (mForm, { model }) => model.actionType === ActionType.CODE,
@@ -183,8 +181,8 @@ const codeActionConfig = computed(() => {
 const dataSourceActionConfig = computed(() => {
   const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
     type: 'data-source-method-select',
+    text: '数据源方法',
     name: 'dataSourceMethod',
-    labelWidth: 0,
     display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
   };
   return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
@@ -235,6 +233,7 @@ const actionsConfig = computed(() => ({
       name: 'actions',
       expandAll: true,
       enableToggleMode: false,
+      titlePrefix: '动作',
       items: [
         actionTypeConfig.value,
         targetCompConfig.value,

packages/editor/src/theme/event.scss

@@ -3,14 +3,12 @@
   .fullWidth {
     width: 100%;
   }
-  .m-form-panel .el-card__body {
-    padding: 10px 25px;
-  }
 
   .event-select-code {
     margin-left: 20px;
     width: auto;
   }
+
   .m-form-panel {
     margin: 10px 0px;
   }

packages/editor/src/theme/framework.scss

@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI,
-    Microsoft YaHei, sans-serif;
 
   &-content {
     height: calc(100% - #{$--nav-height});

packages/editor/src/utils/props.ts

@@ -206,6 +206,7 @@ export const eventTabConfig: TabPaneConfig = {
     {
       name: 'events',
       src: 'component',
+      labelWidth: '100px',
       type: 'event-select',
     },
   ],