style(系统设置): 统一修改弹窗确认和取消按钮间距&插件按钮换行问题

frontend/src/components/pure/ms-dialog/index.vue

@@ -4,7 +4,7 @@
     title-align="start"
     :class="['ms-modal-form', `ms-modal-${props.dialogSize}`]"
     v-bind="attrs"
-    :footer="props.showfooter"
+    :footer="props.footer"
     :mask-closable="false"
     @close="handleCancel"
   >
@@ -54,7 +54,6 @@
 
   const { t } = useI18n();
 
-  export type buttontype = 'text' | 'dashed' | 'outline' | 'primary' | 'secondary';
   export type SizeType = 'medium' | 'large' | 'small';
   export interface SwitchProps {
     switchTooltip?: string; // 展示开关提示信息描述
@@ -64,7 +63,7 @@
   }
 
   export type DialogType = Partial<{
-    showfooter: boolean; // 是否展示footer
+    footer: boolean; // 是否展示footer
     showCancel: boolean; // 是否显示取消按钮
     okText: string; // 确定按钮的文本
     cancelText: string; // 取消按钮的文本
@@ -73,18 +72,19 @@
   }> & {
     dialogSize: SizeType; // 弹窗的宽度尺寸 medium large small
     title: string;
-    confirm: (enable: boolean | undefined) => void; // 确定
+    confirm?: (enable: boolean | undefined) => void; // 确定
     visible: boolean;
     loading: boolean;
     close: () => void;
   };
 
   const props = withDefaults(defineProps<DialogType>(), {
-    showfooter: true,
+    footer: true,
     showCancel: true,
     title: '',
     disabledOk: false,
     close: Function,
+    confirm: undefined,
   });
   const emits = defineEmits<{
     (event: 'close'): void;

frontend/src/views/setting/organization/member/components/addMemberModal.vue

@@ -55,12 +55,10 @@
       </a-form>
     </div>
     <template #footer>
-      <a-space>
       <a-button type="secondary" @click="handleCancel">{{ t('organization.member.Cancel') }}</a-button>
-        <a-button type="primary" :loading="confirmLoading" @click="handleOK">
+      <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleOK">
         {{ t('organization.member.Confirm') }}
       </a-button>
-      </a-space>
     </template>
   </a-modal>
 </template>

frontend/src/views/setting/organization/member/index.vue

@@ -229,7 +229,9 @@
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getMemberList, {
     tableKey: TableKeyEnum.ORGANNATIONMEMBER,
     scroll: { x: 1600 },
+    size: 'default',
     selectable: true,
+    showSetting: true,
   });
   const keyword = ref('');
   const tableSelected = ref<(string | number)[]>([]);

frontend/src/views/setting/organization/serviceIntegration/components/conifgModal.vue

@@ -22,15 +22,15 @@
             <icon-question-circle class="ml-2 text-[--color-text-4]" />
           </a-tooltip>
         </div>
-        <a-space>
+        <div>
           <a-button type="secondary" @click="handleCancel">{{ t('organization.service.Cancel') }}</a-button>
-          <a-button type="outline" :loading="testLoading" @click="testLink">{{
+          <a-button class="ml-[12px]" type="outline" :loading="testLoading" @click="testLink">{{
             t('organization.service.testLink')
           }}</a-button>
-          <a-button type="primary" :loading="loading" @click="saveHandler">{{
+          <a-button class="ml-[12px]" type="primary" :loading="loading" @click="saveHandler">{{
             t('organization.service.Confirm')
           }}</a-button>
-        </a-space>
+        </div>
       </div>
     </template>
   </a-modal>

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -24,7 +24,7 @@
       <a-table
         :data="filterData"
         :pagination="false"
-        :scroll="{ y: 360, x: 2400, maxHeight: 200 }"
+        :scroll="{ y: 360, x: 2000, maxHeight: 200 }"
         :expandable="expandable"
         :loading="loading"
         row-key="id"
@@ -47,6 +47,8 @@
             :title="t('system.plugin.tableColumnsDescription')"
             data-index="description"
             :ellipsis="true"
+            :tooltip="true"
+            :width="150"
           />
           <a-table-column :title="t('system.plugin.tableColumnsStatus')">
             <template #cell="{ record }">
@@ -61,9 +63,7 @@
             </template>
           </a-table-column>
           <a-table-column :title="t('system.plugin.tableColumnsApplicationScene')" data-index="scenario">
-            <template #cell="{ record }">{{
-              record.scenario === 'API' ? t('system.plugin.interfaceTest') : t('system.plugin.projectManagement')
-            }}</template>
+            <template #cell="{ record }">{{ getScenarioType(record.scenario) }}</template>
           </a-table-column>
           <a-table-column :title="t('system.plugin.tableColumnsOrg')" :width="300">
             <template #cell="{ record }">
@@ -90,40 +90,48 @@
           </a-table-column>
           <a-table-column
             :title="t('system.plugin.tableColumnsDescription')"
-            data-index="fileName"
-            :width="300"
             :ellipsis="true"
+            :tooltip="true"
+            data-index="fileName"
           />
           <a-table-column
             :title="t('system.plugin.tableColumnsVersion')"
             data-index="pluginId"
-            :width="300"
+            :width="200"
             :ellipsis="true"
+            :tooltip="true"
           />
-          <a-table-column :title="t('system.plugin.tableColumnsAuthorization')">
+          <a-table-column :title="t('system.plugin.tableColumnsAuthorization')" :width="180">
             <template #cell="{ record }">
               <span>{{
-                record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource')
+                record.xpack ? t('system.plugin.uploadCompSource') : t('system.plugin.uploadOpenSource')
               }}</span>
             </template>
           </a-table-column>
-          <a-table-column :title="t('system.plugin.tableColumnsCreatedBy')" data-index="createUser" />
+          <a-table-column
+            :title="t('system.plugin.tableColumnsCreatedBy')"
+            :ellipsis="true"
+            :tooltip="true"
+            data-index="createUser"
+          />
           <a-table-column :title="t('system.plugin.tableColumnsUpdateTime')" :width="200">
             <template #cell="{ record }">
               <span>{{ getTime(record.updateTime) }}</span>
             </template>
           </a-table-column>
-          <a-table-column :width="200" fixed="right" align="center" :bordered="false">
+          <a-table-column :width="180" fixed="right" :bordered="false">
             <template #title>
               {{ t('system.plugin.tableColumnsActions') }}
             </template>
             <template #cell="{ record }">
+              <div class="flex">
                 <MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton>
                 <MsButton v-if="record.enable" @click="disableHandler(record)">{{
                   t('system.plugin.tableDisable')
                 }}</MsButton>
                 <MsButton v-else @click="enableHandler(record)">{{ t('system.plugin.tableEnable') }}</MsButton>
                 <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
+              </div>
             </template>
           </a-table-column>
         </template>
@@ -143,14 +151,14 @@
     >
     <UploadModel
       v-model:visible="uploadVisible"
-      :originize-list="originizeList"
+      :organize-list="organizeList"
       @success="okHandler"
       @brash="loadData()"
     />
     <UpdatePluginModal
       ref="updateModalRef"
       v-model:visible="updateVisible"
-      :originize-list="originizeList"
+      :organize-list="organizeList"
       @success="loadData()"
     />
     <scriptDetailDrawer v-model:visible="showDrawer" :value="detailYaml" :config="config" :read-only="true" />
@@ -226,6 +234,10 @@
       label: 'system.plugin.projectManagement',
       value: 'PLATFORM',
     },
+    {
+      label: 'system.plugin.databaseDriver',
+      value: 'JDBC_DRIVER',
+    },
   ]);
   const uploadVisible = ref<boolean>(false);
   const updateVisible = ref<boolean>(false);
@@ -283,6 +295,20 @@
         break;
     }
   }
+
+  function getScenarioType(scenario: string) {
+    switch (scenario) {
+      case 'API':
+        return t('system.plugin.interfaceTest');
+      case 'JDBC_DRIVER':
+        return t('system.plugin.databaseDriver');
+      case 'PLATFORM':
+        return t('system.plugin.projectManagement');
+      default:
+        break;
+    }
+  }
+
   function uploadPlugin() {
     uploadVisible.value = true;
   }
@@ -382,10 +408,10 @@
     Object.assign(expandedRowKeys, [rowKey]);
   };
 
-  const originizeList = ref<SelectOptionData>([]);
+  const organizeList = ref<SelectOptionData>([]);
   onBeforeMount(async () => {
     loadData();
-    originizeList.value = await getSystemOrgOption();
+    organizeList.value = await getSystemOrgOption();
   });
 </script>
 

frontend/src/views/setting/system/pluginManager/components/updatePluginModal.vue

@@ -22,15 +22,15 @@
           field="organizationIds"
           :label="t('system.plugin.selectOrganization')"
           asterisk-position="end"
-          :rules="[{ required: true, message: t('system.plugin.selectOriginize') }]"
+          :rules="[{ required: true, message: t('system.plugin.selectOrganizeTip') }]"
         >
           <a-select
             v-model="form.organizationIds"
             multiple
-            :placeholder="t('system.plugin.selectOriginize')"
+            :placeholder="t('system.plugin.selectOrganizeTip')"
             allow-clear
           >
-            <a-option v-for="item of originizeList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
+            <a-option v-for="item of organizeList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
           </a-select>
         </a-form-item>
         <a-form-item field="description" :label="t('system.plugin.description')" asterisk-position="end">
@@ -40,7 +40,7 @@
     </div>
     <template #footer>
       <a-button type="secondary" @click="handleCancel">{{ t('system.plugin.pluginCancel') }}</a-button>
-      <a-button type="primary" :loading="confirmLoading" @click="handleOk">
+      <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleOk">
         {{ t('system.plugin.pluginConfirm') }}
       </a-button>
     </template>
@@ -57,7 +57,7 @@
   const { t } = useI18n();
   const props = defineProps<{
     visible: boolean;
-    originizeList: SelectOptionData;
+    organizeList: SelectOptionData;
   }>();
   const emits = defineEmits<{
     (e: 'success'): void;

frontend/src/views/setting/system/pluginManager/components/uploadModel.vue

@@ -39,15 +39,15 @@
             field="organizationIds"
             :label="t('system.plugin.selectOrganization')"
             asterisk-position="end"
-            :rules="[{ required: true, message: t('system.plugin.selectOriginize') }]"
+            :rules="[{ required: true, message: t('system.plugin.selectOrganizeTip') }]"
           >
             <a-select
               v-model="form.organizationIds"
               multiple
-              :placeholder="t('system.plugin.selectOriginize')"
+              :placeholder="t('system.plugin.selectOrganizeTip')"
               allow-clear
             >
-              <a-option v-for="item of originizeList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
+              <a-option v-for="item of organizeList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
             </a-select>
           </a-form-item>
           <a-form-item field="describe" :label="t('system.plugin.description')" asterisk-position="end">
@@ -90,15 +90,18 @@
           </a-tooltip>
         </div>
         <div>
-          <a-space>
           <a-button type="secondary" @click="handleCancel">{{ t('system.plugin.pluginCancel') }}</a-button>
-            <a-button type="secondary" :disabled="isDisabled" :loading="saveLoading" @click="saveAndAddPlugin">{{
-              t('system.plugin.saveAndAdd')
-            }}</a-button>
+          <a-button
+            class="mx-[12px]"
+            type="secondary"
+            :disabled="isDisabled"
+            :loading="saveLoading"
+            @click="saveAndAddPlugin"
+            >{{ t('system.plugin.saveAndAdd') }}</a-button
+          >
           <a-button type="primary" :disabled="isDisabled" :loading="confirmLoading" @click="saveConfirm">{{
             t('system.plugin.pluginConfirm')
           }}</a-button>
-          </a-space>
         </div>
       </div>
     </template>
@@ -122,7 +125,7 @@
   }>();
   const props = defineProps<{
     visible: boolean;
-    originizeList: SelectOptionData;
+    organizeList: SelectOptionData;
   }>();
   const pluginVisible = ref(false);
   const fileName = ref<string>('');

frontend/src/views/setting/system/pluginManager/locale/en-US.ts

@@ -54,7 +54,7 @@ export default {
   'system.plugin.pluginPreStep': 'Previous Step',
   'system.plugin.saveAndAdd': 'Save & Continue',
   'system.plugin.updateTitle': 'Update Plugin（{name}）',
-  'system.plugin.selectOriginize': 'Please Choose Organization',
+  'system.plugin.selectOrganizeTip': 'Please Choose Organization',
   'system.plugin.selectOrganization': 'Choose Organization',
   'system.plugin.infoTip': 'Jump to the Github download plug-in',
   'system.plugin.getPlugin': 'Gets the open source plug-in',
@@ -101,6 +101,7 @@ export default {
   'system.plugin.all': 'All',
   'system.plugin.projectManagement': 'Project Management',
   'system.plugin.pluginStatus': 'Status',
+  'system.plugin.databaseDriver': 'Database Driver',
   'system.plugin.deleteContentTip':
     'After deletion, the defects/requirements of the platform cannot be synchronized, and the historical data is automatically switched to other templates. Please exercise caution!',
 };

frontend/src/views/setting/system/pluginManager/locale/zh-CN.ts

@@ -42,7 +42,7 @@ export default {
   'system.plugin.pluginPreStep': '上一步',
   'system.plugin.saveAndAdd': '保存并继续添加',
   'system.plugin.updateTitle': '更新插件（{name}）',
-  'system.plugin.selectOriginize': '请选择组织',
+  'system.plugin.selectOrganizeTip': '请选择组织',
   'system.plugin.selectOrganization': '选择组织',
   'system.plugin.infoTip': '跳转至Github下载插件',
   'system.plugin.getPlugin': '获取开源插件',
@@ -81,5 +81,6 @@ export default {
   'system.plugin.all': '全部',
   'system.plugin.projectManagement': '项目管理',
   'system.plugin.pluginStatus': '插件状态',
+  'system.plugin.databaseDriver': '数据库驱动',
   'system.plugin.deleteContentTip': '删除后，将无法同步该平台的缺陷/需求，历史数据自动切换为其它模板展示，请谨慎操作！',
 };