feat(系统设置): 系统_插件管理_样式和国际化完善

frontend/components.d.ts

@@ -5,11 +5,11 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView'];
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }

frontend/src/mock/system/pluginManger.ts

@@ -73,77 +73,18 @@ const getPluginList = () => {
           enable: true,
         },
       ],
-      children: [
+      steps: [
         {
           id: '1-1-1',
-          name: '插件1-1',
+          name: '步骤一',
-          describe: '插件1-1',
+        },
-          enable: true,
+        {
-          createTime: 'number',
+          id: '1-1-2',
-          updateTime: 'number',
+          name: '步骤二',
-          jarPackage: 'string',
+        },
-          version: 'string',
+        {
-          applicationScene: 'string',
+          id: '1-1-3',
-          createUser: 'string',
+          name: '步骤三',
-          updateUser: 'string',
-          organizationList: [
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 1',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 2',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 3',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 4',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-          ],
         },
       ],
     },
@@ -217,77 +158,18 @@ const getPluginList = () => {
           enable: true,
         },
       ],
-      children: [
+      steps: [
         {
           id: '2-1-1',
-          name: '插件2-1',
+          name: '步骤2-一',
-          describe: '插件2-1',
+        },
-          enable: true,
+        {
-          createTime: 'number',
+          id: '2-1-2',
-          updateTime: 'number',
+          name: '步骤2-二',
-          jarPackage: 'string',
+        },
-          version: 'string',
+        {
-          applicationScene: 'string',
+          id: '2-1-3',
-          createUser: 'string',
+          name: '步骤3-三',
-          updateUser: 'string',
-          organizationList: [
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 1',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 2',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 3',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-            {
-              id: 'string',
-              num: 0,
-              name: '组织 4',
-              description: 'blabla',
-              createTime: 0,
-              updateTime: 0,
-              createUser: 'string',
-              updateUser: 'string',
-              deleted: true,
-              deleteUser: 'string',
-              deleteTime: 0,
-              enable: true,
-            },
-          ],
         },
       ],
     },

frontend/src/models/system/plugin.ts

@@ -27,7 +27,7 @@ export interface PluginItem {
   createUser: string;
   updateUser: string;
   organizationList: organizationList;
-  children?: PluginItem[];
+  steps?: string[];
 }
 export type PluginList = PluginItem[];
 

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

@@ -1,15 +1,15 @@
 <template>
   <a-modal
-    v-model:visible="memberVisible"
+    v-model:visible="dialogVisible"
     title-align="start"
-    width="680px"
+    class="ms-modal-form ms-modal-medium"
     :ok-text="t('organization.member.Save')"
     @ok="handleOK"
     @cancel="handleCancel"
   >
     <template #title> {{ t('organization.member.addMember') }} </template>
     <div class="form">
-      <a-form :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form :model="form" size="large" layout="vertical">
         <a-form-item
           v-model="form.members"
           field="members"
@@ -43,18 +43,21 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watchEffect, reactive } from 'vue';
+  import { ref, reactive } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import type { AddMemberForm } from '@/models/system/member';
+  import { useDialog } from '@/hooks/useDialog';
 
   const { t } = useI18n();
-
-  const emit = defineEmits<{
-    (e: 'cancel'): void;
-  }>();
   const props = defineProps<{
     visible: boolean;
+    title?: string;
   }>();
+  const emits = defineEmits<{
+    (event: 'update:visible', visible: boolean): void;
+    (event: 'close'): void;
+  }>();
+  const { dialogVisible } = useDialog(props, emits);
   const userGroupOptions = ref([
     {
       label: 'Beijing',
@@ -85,22 +88,16 @@
     },
   ]);
 
-  const memberVisible = ref<boolean>(props.visible);
   const form = reactive<AddMemberForm>({
     userGroups: '',
     members: [],
   });
-  watchEffect(() => {
+  const handleCancel = () => {
-    memberVisible.value = props.visible;
+    emits('close');
-  });
-
-  const handleOK = () => {
-    // eslint-disable-next-line no-use-before-define
-    handleCancel();
   };
 
-  const handleCancel = () => {
+  const handleOK = () => {
-    emit('cancel');
+    handleCancel();
   };
 </script>
 

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

@@ -39,15 +39,16 @@
       </template>
 
       <template #action="{ record }">
+        <MsButton @click="editMember(record)">{{ t('organization.member.edit') }}</MsButton>
         <MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
       </template>
     </ms-base-table>
-    <add-member-modal :visible="addMemberVisible" @cancel="addMemberVisible = false" />
+    <!-- <add-member-modal :visible="addMemberVisible" @cancel="addMemberVisible = false" /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, reactive } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -57,6 +58,7 @@
   import { getMemberList } from '@/api/modules/system/member';
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useModal from '@/hooks/useModal';
+  import { useCommandComponent } from '@/hooks/useCommandComponent';
 
   const columns: MsTableColumn = [
     {
@@ -93,7 +95,7 @@
       title: 'organization.member.tableColunmActions',
       slotName: 'action',
       fixed: 'right',
-      width: 80,
+      width: 110,
     },
   ];
 
@@ -117,8 +119,14 @@
   });
 
   const keyword = ref('');
-
+  const addMemberDialog = useCommandComponent(addMemberModal);
-  const addMemberVisible = ref<boolean>(false);
+  const addMembersOptions = reactive({
+    title: '添加成员',
+    visible: false,
+    onClose: () => {
+      addMemberDialog.close();
+    },
+  });
 
   onMounted(async () => {
     setKeyword(keyword.value);
@@ -150,12 +158,14 @@
       hideCancel: false,
     });
   }
+  function editMember(record: any) {}
   const tableSelected = ref<(string | number)[]>([]);
   function handleTableSelect(selectArr: (string | number)[]) {
     tableSelected.value = selectArr;
   }
   function AddMember() {
-    addMemberVisible.value = true;
+    addMembersOptions.visible = true;
+    addMemberDialog(addMembersOptions);
   }
 </script>
 

frontend/src/views/organization/member/locale/en-US.ts

@@ -2,6 +2,7 @@ export default {
   'organization.member.addMember': 'Add Member',
   'organization.member.searchMember': 'Search by name or email address',
   'organization.member.remove': 'Remove',
+  'organization.member.edit': 'Edit',
   'organization.member.batchActionAddProject': 'Add to project',
   'organization.member.batchActionAddUsergroup': 'Add to usergroup',
   'organization.member.tableEnable': 'Enabled',

frontend/src/views/organization/member/locale/zh-CN.ts

@@ -2,6 +2,7 @@ export default {
   'organization.member.addMember': '添加成员',
   'organization.member.searchMember': '通过名称或邮箱搜索搜索',
   'organization.member.remove': '移除',
+  'organization.member.edit': '编辑',
   'organization.member.batchActionAddProject': '添加至项目',
   'organization.member.batchActionAddUsergroup': '添加至用户组',
   'organization.member.tableEnable': '正常',

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

@@ -40,6 +40,10 @@
         <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
       </template>
     </ms-base-table>
+    <div class="mt-4 text-sm text-slate-500"
+      >共<span class="mx-2">{{ 101 }}</span
+      >项数据</div
+    >
     <UploadModel :visible="uploadVisible" @cancel="uploadVisible = false" @upload="uploadPlugin" @success="okHandler" />
     <UpdatePluginModal ref="updateModalRef" :visible="updateVisible" @cancel="updateVisible = false" />
   </div>
@@ -60,6 +64,8 @@
   import uploadSuccessModal from './uploadSuccessModal.vue';
   import sceneChangeModal from './sceneChangeModal.vue';
   import { useCommandComponent } from '@/hooks/useCommandComponent';
+  import useModal from '@/hooks/useModal';
+  import { Message } from '@arco-design/web-vue';
 
   const { t } = useI18n();
   export type Options = {
@@ -123,10 +129,13 @@
   ];
   const { propsRes, propsEvent, loadList, setKeyword } = useTable(getPluginList, {
     columns,
-    scroll: { y: 'auto', x: 1800 },
+    'scroll': { y: 'auto', x: 1800 },
-    selectable: false,
+    'selectable': false,
-    showSelectAll: false,
+    'showSelectAll': false,
+    'pagination': false,
+    'virtual-list-props': { height: 380 },
   });
+  const { openModal } = useModal();
   const keyword = ref('');
   const scene = ref('1');
   const sceneList = ref([
@@ -146,7 +155,28 @@
     setKeyword(keyword.value);
     await loadList();
   }
-  function deletePlugin() {}
+  function deletePlugin(record: any) {
+    openModal({
+      type: 'warning',
+      title: t('system.plugin.deletePluginTip', { name: record.name }),
+      content: '',
+      okText: t('system.plugin.deletePluginConfirm'),
+      cancelText: t('system.plugin.pluginCancel'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      onBeforeOk: async () => {
+        try {
+          Message.success(t('system.plugin.deletePluginSuccess'));
+          return true;
+        } catch (error) {
+          console.log(error);
+          return false;
+        }
+      },
+      hideCancel: false,
+    });
+  }
   /**
    * 处理表格更多按钮事件
    * @param item
@@ -154,7 +184,7 @@
   function handleSelect(item: ActionsItem, record: any) {
     switch (item.eventTag) {
       case 'delete':
-        deletePlugin();
+        deletePlugin(record);
         break;
       default:
         break;
@@ -191,7 +221,7 @@
   const okHandler = () => {
     dialogOpen(uploadSuccessOptions);
   };
-  const changeScene = () => {
+  const changeScene = (record: any) => {
     sceneChangeOptions.visible = true;
     mySceneChangeDialog(sceneChangeOptions);
   };

frontend/src/views/system/pluginManager/components/sceneChangeModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <a-modal v-model:visible="dialogVisible" class="ms-modal-form ms-modal-small" title-align="start">
+  <a-modal v-model:visible="dialogVisible" class="ms-modal-form ms-modal-medium" title-align="start">
     <template #title> {{ title }} </template>
     <a-alert type="warning" :closable="true">
-      <div> 插件内容与应用场景不一致时插件功能将无法启用，请谨慎操作！ </div>
+      <div>{{ t('system.plugin.changeSceneTips') }}</div>
     </a-alert>
     <div class="mt-6 flex flex-col">
       <div
@@ -22,13 +22,19 @@
               v-show="item.isSelected"
               size="small"
               class="ml-[4px] border-[rgb(var(--primary-4))] bg-transparent px-1 text-xs !text-[rgb(var(--primary-4))]"
-              >当前场景</a-tag
+              >{{ t('system.plugin.currentScene') }}</a-tag
             >
           </div>
           <div class="text-sm">{{ t(item.description) }}</div>
         </div>
       </div>
     </div>
+    <template #footer>
+      <a-button type="secondary" @click="emits('close')">{{ t('system.plugin.pluginCancel') }}</a-button>
+      <a-button type="primary" @click="handelOk">
+        {{ t('system.plugin.pluginConfirm') }}
+      </a-button>
+    </template>
   </a-modal>
 </template>
 
@@ -69,6 +75,9 @@
     });
     currentItem.isSelected = true;
   };
+  const handelOk = () => {
+    emits('close');
+  };
 </script>
 
 <style scoped lang="less">

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

@@ -1,27 +1,15 @@
 <template>
-  <a-modal
+  <a-modal v-model:visible="updateVisible" width="680px" title-align="start" class="ms-modal-form ms-modal-medium">
-    v-model:visible="updateVisible"
-    class="ms-modal-form ms-modal-small"
-    title-align="start"
-    width="480px"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
     <template #title> {{ t('system.plugin.updateTitle', { name: title }) }}</template>
-    <a-row class="grid-demo">
+    <div class="form">
-      <a-form :model="form" size="small" :style="{ width: '600px' }" layout="vertical">
+      <a-form :model="form" layout="vertical">
         <!-- <a-col :span="24"> -->
         <a-form-item field="pluginName" :label="t('system.plugin.name')" asterisk-position="end">
-          <a-input
+          <a-input v-model="form.pluginName" :placeholder="t('system.plugin.defaultJarNameTip')" allow-clear />
-            v-model="form.pluginName"
-            size="small"
-            :placeholder="t('system.plugin.defaultJarNameTip')"
-            allow-clear
-          />
         </a-form-item>
         <!-- </a-col> -->
         <a-form-item field="organize" :label="t('system.plugin.appOrganize')" asterisk-position="end">
-          <a-radio-group v-model="form.organize" size="small">
+          <a-radio-group v-model="form.organize">
             <a-radio value="1">全部组织</a-radio>
             <a-radio value="2">指定组织</a-radio>
           </a-radio-group>
@@ -38,15 +26,16 @@
           </a-select>
         </a-form-item>
         <a-form-item field="describe" :label="t('system.plugin.description')" asterisk-position="end">
-          <a-textarea
+          <a-textarea v-model="form.describe" :placeholder="t('system.plugin.pluginDescription')" allow-clear />
-            v-model="form.describe"
-            size="small"
-            :placeholder="t('system.plugin.pluginDescription')"
-            allow-clear
-          />
         </a-form-item>
       </a-form>
-    </a-row>
+    </div>
+    <template #footer>
+      <a-button type="secondary" @click="emit('cancel')">{{ t('system.plugin.pluginCancel') }}</a-button>
+      <a-button type="primary" @click="handleOk">
+        {{ t('system.plugin.pluginConfirm') }}
+      </a-button>
+    </template>
   </a-modal>
 </template>
 

frontend/src/views/system/pluginManager/index.vue

@@ -3,9 +3,10 @@
   <div>
     <a-alert type="info" :closable="true">
       <div>
-        MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请
+        {{ t('system.plugin.alertDescribe') }}
-        <a class="mx-1" href="javascript:;">查看表格</a>更多开源插件，请在此下载
+        <a class="mx-1" href="javascript:;">{{ t('system.plugin.viewTable') }}</a
-        <a class="mx-1" href="javascript:;">去下载 </a>
+        >{{ t('system.plugin.downAddress') }}
+        <a class="mx-1" href="javascript:;">{{ t('system.plugin.goDownload') }} </a>
       </div>
     </a-alert>
     <div class="mt-4">
@@ -16,6 +17,9 @@
 
 <script setup lang="ts">
   import pluginTable from './components/pluginTable.vue';
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
 </script>
 
 <style scoped>

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

@@ -31,12 +31,17 @@ export default {
   'system.plugin.projectMangerDescribe': 'The project management platform class recommends choosing project management',
   'system.resourcePool.disablePoolConfirm': 'Confirm',
   'system.resourcePool.disablePoolCancel': 'Cancel',
-  'system.resourcePool.disablePoolSuccess': 'Disabled successfully',
+  'system.plugin.deletePluginSuccess': 'Delete successfully',
-  'system.resourcePool.deletePoolTip': 'Are you sure to delete the `{name}` resource?',
+  'system.plugin.alertDescribe':
+    'The MeterSphere v2.10 LTS release supports plug-ins of DevOps、 API imports、 requests、 project management、 protocols、 and other types',
+  'system.plugin.viewTable': 'View the form',
+  'system.plugin.downAddress': 'More open source plug-ins can be downloaded here',
+  'system.plugin.goDownload': 'downloads',
+  'system.plugin.deletePluginTip': 'Are you sure to delete the `{name}` plugin?',
   'system.resourcePool.deletePoolContentUsed':
     'This resource pool has been used, and related tests will stop immediately after deletion, please operate with caution!',
   'system.resourcePool.deletePoolContentUnuse': 'This resource pool is not in use. Are you sure to delete it?',
-  'system.resourcePool.deletePoolConfirm': 'Confirm',
+  'system.plugin.deletePluginConfirm': 'Confirm',
   'system.plugin.pluginConfirm': 'Confirm',
   'system.plugin.pluginCancel': 'Cancel',
   'system.plugin.pluginPreStep': 'Previous Step',
@@ -52,8 +57,11 @@ export default {
   'system.plugin.ServiceIntegration': 'Service Integration',
   'system.plugin.platformAuthentication': 'Configuration platform authentication information can be effective',
   'system.plugin.continueUpload': 'Continue Upload',
-  'system.plugin.backPluginList': 'Back to list of plugins',
+  'system.plugin.backPluginList': 'Back',
   'system.plugin.nextNoTips': 'No more tips next time',
+  'system.plugin.changeSceneTips':
+    'Plug-in functionality can not be enabled if the plug-in content is inconsistent with the application scenario. Please be careful!',
+  'system.plugin.currentScene': 'Current Scene',
   'system.resourcePool.deletePoolSuccess': 'Deleted successfully',
   'system.resourcePool.detailDesc': 'Description',
   'system.resourcePool.detailUrl': 'Current site URL',

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

@@ -32,10 +32,10 @@ export default {
   'system.resourcePool.disablePoolConfirm': '确认禁用',
   'system.resourcePool.disablePoolCancel': '取消',
   'system.resourcePool.disablePoolSuccess': '禁用成功',
-  'system.resourcePool.deletePoolTip': '确认删除 `{name}` 这个资源吗？',
+  'system.plugin.deletePluginTip': '确认删除 `{name}` 这个插件吗？',
   'system.resourcePool.deletePoolContentUsed': '该资源池已被使用，删除后相关测试会立即停止，请谨慎操作！',
   'system.resourcePool.deletePoolContentUnuse': '该资源池未被使用，是否确认删除？',
-  'system.resourcePool.deletePoolConfirm': '确认删除',
+  'system.plugin.deletePluginConfirm': '确认删除',
   'system.plugin.pluginConfirm': '确认',
   'system.plugin.pluginCancel': '取消',
   'system.plugin.pluginPreStep': '上一步',
@@ -53,7 +53,14 @@ export default {
   'system.plugin.continueUpload': '继续上传',
   'system.plugin.backPluginList': '回到插件列表',
   'system.plugin.nextNoTips': '下次不再提示',
-  'system.resourcePool.deletePoolSuccess': '删除成功',
+  'system.plugin.changeSceneTips': '插件内容与应用场景不一致时插件功能将无法启用，请谨慎操作！',
+  'system.plugin.currentScene': '当前场景',
+  'system.plugin.deletePluginSuccess': '删除成功',
+  'system.plugin.alertDescribe':
+    'MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请',
+  'system.plugin.viewTable': '查看表格',
+  'system.plugin.downAddress': '更多开源插件，请在此下载',
+  'system.plugin.goDownload': '去下载',
   'system.resourcePool.detailDesc': '描述',
   'system.resourcePool.detailUrl': '当前站点 URL',
   'system.resourcePool.detailRange': '可用范围',