fix(系统设置): 修改样式和去掉多余hooks

frontend/src/hooks/useCommandComponent.ts

@@ -1,100 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import {
-  type AppContext,
-  type Component,
-  type ComponentPublicInstance,
-  createVNode,
-  getCurrentInstance,
-  render,
-  type VNode,
-} from 'vue';
-
-export type Components = Component;
-
-export interface Options {
-  visible?: boolean;
-  onClose?: () => void;
-  appendTo?: HTMLElement | string;
-  [key: string]: unknown;
-}
-
-export interface CommandComponent1 {
-  (options: Options): VNode;
-  close: () => void;
-}
-
-const getAppendToElement = (props: Options): HTMLElement => {
-  let appendTo: HTMLElement | null = document.body;
-  if (props.appendTo) {
-    if (typeof props.appendTo === 'string') {
-      appendTo = document.querySelector<HTMLElement>(props.appendTo);
-    }
-    if (props.appendTo instanceof HTMLElement) {
-      appendTo = props.appendTo;
-    }
-    if (!(appendTo instanceof HTMLElement)) {
-      appendTo = document.body;
-    }
-  }
-  return appendTo;
-};
-
-const initInstance = <T extends Components>(
-  // eslint-disable-next-line no-shadow
-  Component: T,
-  props: Options,
-  container: HTMLElement,
-  appContext: AppContext | null = null
-) => {
-  const vNode = createVNode(Component, props);
-  vNode.appContext = appContext;
-  render(vNode, container);
-
-  getAppendToElement(props).appendChild(container);
-  return vNode;
-};
-
-// eslint-disable-next-line no-shadow
-export const useCommandComponent = <T extends Components>(Component: T): CommandComponent1 => {
-  const appContext = getCurrentInstance()?.appContext;
-  if (appContext) {
-    const currentProvides = (getCurrentInstance() as any)?.provides;
-    Reflect.set(appContext, 'provides', { ...appContext.provides, ...currentProvides });
-  }
-
-  const container = document.createElement('div');
-
-  const close = () => {
-    render(null, container);
-    container.parentNode?.removeChild(container);
-  };
-
-  const CommandComponent = (options: Options): VNode => {
-    if (!Reflect.has(options, 'visible')) {
-      options.visible = true;
-    }
-    if (typeof options.onClose !== 'function') {
-      options.onClose = close;
-    } else {
-      const originOnClose = options.onClose;
-      options.onClose = () => {
-        originOnClose();
-        close();
-      };
-    }
-    const vNode = initInstance<T>(Component, options, container, appContext);
-    const vm = vNode.component?.proxy as ComponentPublicInstance<Options>;
-    for (const prop in options) {
-      if (Reflect.has(options, prop) && !Reflect.has(vm.$props, prop)) {
-        vm[prop as keyof ComponentPublicInstance] = options[prop];
-      }
-    }
-    return vNode;
-  };
-
-  CommandComponent.close = close;
-
-  return CommandComponent;
-};
-
-export default useCommandComponent;

frontend/src/hooks/useDialog.ts

@@ -1,18 +0,0 @@
-import { computed } from 'vue';
-
-export function useDialog(props: any, emits: any) {
-  const dialogVisible = computed<boolean>({
-    get() {
-      return props.visible;
-    },
-    set(visible) {
-      emits('update:visible', visible);
-      if (!visible) {
-        emits('close');
-      }
-    },
-  });
-  return { dialogVisible };
-}
-
-export default useDialog;

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

@@ -26,7 +26,7 @@
         <a-tooltip :content="(record.projectIdNameMap||[]).map((e: any) => e.name).join(',')">
           <div v-if="!record.showProjectSelect">
             <a-tag
-              v-for="pro of record.projectIdNameMap"
+              v-for="pro of (record.projectIdNameMap || []).slice(0, 3)"
               :key="pro.id"
               class="mr-[4px] bg-transparent"
               bordered
@@ -229,7 +229,6 @@
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getMemberList, {
     tableKey: TableKeyEnum.ORGANNATIONMEMBER,
     scroll: { x: 1600 },
-    size: 'default',
     selectable: true,
     showSetting: true,
   });

frontend/src/views/setting/system/authorizedManagement/index.vue

@@ -58,7 +58,9 @@
               >
             </li>
             <li>
-              <MsButton @click="authChecking">{{ t('system.authorized.authorityChecking') }}</MsButton>
+              <MsButton class="font-medium" @click="authChecking">{{
+                t('system.authorized.authorityChecking')
+              }}</MsButton>
             </li>
           </ul>
         </div>
@@ -228,6 +230,9 @@
           @apply flex justify-between;
           div {
             width: 100px;
+            span {
+              font-weight: 500;
+            }
           }
         }
       }

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

@@ -24,7 +24,7 @@
       <a-table
         :data="filterData"
         :pagination="false"
-        :scroll="{ y: 360, x: 2000, maxHeight: 200 }"
+        :scroll="{ y: 380, x: 2000, maxHeight: 200 }"
         :expandable="expandable"
         :loading="loading"
         row-key="id"
@@ -146,7 +146,7 @@
       </a-table>
     </div>
     <div class="ms-footerNum"
-      >{{ t('system.plugin.totalNum') }}<span class="mx-2">{{ totalNum }}</span
+      >{{ t('system.plugin.totalNum') }}<span class="mx-2 text-[rgb(var(--primary-5))]">{{ totalNum }}</span
       >{{ t('system.plugin.dataList') }}</div
     >
     <UploadModel
@@ -161,6 +161,11 @@
       :organize-list="organizeList"
       @success="loadData()"
     />
+    <UploadSuccessModal
+      v-model:visible="uploadSuccessVisible"
+      @open-upload-modal="uploadPlugin()"
+      @close="closeHandler"
+    />
     <scriptDetailDrawer v-model:visible="showDrawer" :value="detailYaml" :config="config" :read-only="true" />
   </div>
 </template>
@@ -175,20 +180,12 @@
   import MsButton from '@/components/pure/ms-button/index.vue';
   import UploadModel from './uploadModel.vue';
   import UpdatePluginModal from './updatePluginModal.vue';
-  import uploadSuccessModal from './uploadSuccessModal.vue';
+  import UploadSuccessModal from './uploadSuccessModal.vue';
   import scriptDetailDrawer from './scriptDetailDrawer.vue';
-  import { useCommandComponent } from '@/hooks/useCommandComponent';
   import useModal from '@/hooks/useModal';
   import { Message, TableData, SelectOptionData } from '@arco-design/web-vue';
   import useVisit from '@/hooks/useVisit';
-  import type {
-    PluginForms,
-    PluginList,
-    PluginItem,
-    Options,
-    DrawerConfig,
-    UpdatePluginModel,
-  } from '@/models/setting/plugin';
+  import type { PluginForms, PluginList, PluginItem, DrawerConfig, UpdatePluginModel } from '@/models/setting/plugin';
   import dayjs from 'dayjs';
   import TableExpand from './tableExpand.vue';
   import { characterLimit } from '@/utils';
@@ -242,6 +239,7 @@
   const uploadVisible = ref<boolean>(false);
   const updateVisible = ref<boolean>(false);
   const updateModalRef = ref();
+
   const getTime = (time: string): string => {
     return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
   };
@@ -316,25 +314,22 @@
     updateVisible.value = true;
     updateModalRef.value.open(record);
   }
-  const myUploadSuccessDialog = useCommandComponent(uploadSuccessModal);
-  const uploadSuccessOptions = reactive({
-    title: 'system.plugin.uploadPlugin',
-    visible: false,
-    onOpen: () => uploadPlugin(),
-    onClose: () => {
-      myUploadSuccessDialog.close();
-    },
-  });
-  const dialogOpen = (options: Options) => {
-    options.visible = true;
-    myUploadSuccessDialog(uploadSuccessOptions);
+
+  const uploadSuccessVisible = ref<boolean>(false);
+
+  const dialogSuccessOpen = () => {
+    uploadSuccessVisible.value = true;
+  };
+  const closeHandler = () => {
+    uploadSuccessVisible.value = false;
   };
   const okHandler = () => {
     const isOpen = getIsVisited();
     if (!isOpen) {
-      dialogOpen(uploadSuccessOptions);
+      dialogSuccessOpen();
     }
   };
+
   const disableHandler = (record: PluginItem) => {
     openModal({
       type: 'info',

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

@@ -8,7 +8,7 @@
   >
     <div class="ms-scroll">
       <div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self"
-        ><span class="circle"> {{ index + 1 }} </span
+        ><span class="circle text-xs leading-[16px]"> {{ index + 1 }} </span
         ><span class="cursor-pointer text-[rgb(var(--primary-6))]" @click="emit('MessageEvent', record, item)">{{
           item.name
         }}</span></div
@@ -36,9 +36,11 @@
     width: 100%;
   }
   .circle {
+    width: 16px;
+    height: 16px;
     color: var(--color-text-3);
     background: var(--color-fill-3);
-    @apply ml-6 mr-10 inline-block h-4 w-4 text-center text-xs leading-4;
+    @apply ml-6 mr-10 text-center;
   }
   :deep(.arco-table-tr-expand .arco-table-cell) {
     padding: 0 !important;

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

@@ -13,7 +13,13 @@
         </a-form-item>
         <a-form-item field="global" :label="t('system.plugin.appOrganize')" asterisk-position="end">
           <a-radio-group v-model="form.global">
-            <a-radio :value="true">{{ t('system.plugin.allOrganize') }}</a-radio>
+            <a-radio :value="true"
+              >{{ t('system.plugin.allOrganize')
+              }}<span class="float-right mx-1 mt-[1px]">
+                <a-tooltip :content="t('system.plugin.allOrganizeTip')" position="top">
+                  <IconQuestionCircle class="h-[16px] w-[16px] text-[--color-text-4]"
+                /></a-tooltip> </span
+            ></a-radio>
             <a-radio :value="false">{{ t('system.plugin.theOrganize') }}</a-radio>
           </a-radio-group>
         </a-form-item>

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

@@ -3,34 +3,37 @@
     <template #title> {{ t('system.plugin.uploadPlugin') }} </template>
     <div class="form grid grid-cols-1">
       <a-row class="grid-demo">
-        <a-form ref="pluginFormRef" :model="form" size="small" :style="{ width: '600px' }" layout="vertical">
-          <div class="relative">
-            <a-form-item field="pluginName" :label="t('system.plugin.name')" asterisk-position="end">
-              <a-input
-                v-model="form.name"
-                size="small"
-                :max-length="250"
-                :placeholder="t('system.plugin.defaultJarNameTip')"
-                allow-clear
-              />
-              <span class="absolute right-0 top-1 flex items-center">
-                <span class="float-left">{{ t('system.plugin.getPlugin') }}</span>
-                <a-tooltip :content="t('system.plugin.infoTip')" position="bottom">
-                  <span class="float-left mx-1 mt-[2px]">
-                    <IconQuestionCircle class="h-[16px] w-[16px] text-[rgb(var(--primary-5))]" />
-                  </span>
-                </a-tooltip>
-              </span>
-            </a-form-item>
-          </div>
+        <a-form ref="pluginFormRef" :model="form" :style="{ width: '600px' }" layout="vertical">
+          <a-form-item field="pluginName" :label="t('system.plugin.name')" asterisk-position="end">
+            <a-input
+              v-model="form.name"
+              :max-length="250"
+              :placeholder="t('system.plugin.defaultJarNameTip')"
+              allow-clear
+            />
+            <span class="absolute right-0 top-1 flex items-center">
+              <span class="float-left text-[rgb(var(--primary-5))]">{{ t('system.plugin.getPlugin') }}</span>
+              <a-tooltip :content="t('system.plugin.infoTip')" position="bottom">
+                <span class="float-right ml-1 mt-[2px]">
+                  <IconQuestionCircle class="h-[16px] w-[16px] text-[--color-text-4]" />
+                </span>
+              </a-tooltip>
+            </span>
+          </a-form-item>
           <a-form-item
             field="global"
             :label="t('system.plugin.appOrganize')"
             asterisk-position="end"
             :rules="[{ required: true, message: 'must select one' }]"
           >
-            <a-radio-group v-model="form.global" size="small">
-              <a-radio :value="true">{{ t('system.plugin.allOrganize') }}</a-radio>
+            <a-radio-group v-model="form.global">
+              <a-radio :value="true"
+                >{{ t('system.plugin.allOrganize') }}
+                <span class="float-right mx-1 mt-[1px]">
+                  <a-tooltip :content="t('system.plugin.allOrganizeTip')" position="top">
+                    <IconQuestionCircle class="h-[16px] w-[16px] text-[--color-text-4]"
+                  /></a-tooltip> </span
+              ></a-radio>
               <a-radio :value="false">{{ t('system.plugin.theOrganize') }}</a-radio>
             </a-radio-group>
           </a-form-item>
@@ -51,12 +54,7 @@
             </a-select>
           </a-form-item>
           <a-form-item field="describe" :label="t('system.plugin.description')" asterisk-position="end">
-            <a-textarea
-              v-model="form.description"
-              size="small"
-              :placeholder="t('system.plugin.pluginDescription')"
-              allow-clear
-            />
+            <a-textarea v-model="form.description" :placeholder="t('system.plugin.pluginDescription')" allow-clear />
           </a-form-item>
         </a-form>
       </a-row>

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

@@ -6,7 +6,7 @@
     :footer="false"
     @open="BeforeOpen"
   >
-    <template #title> {{ t(title as string) }} </template>
+    <template #title> {{ t('system.plugin.uploadPlugin') }} </template>
     <div class="flex w-full flex-col items-center justify-center">
       <div class="mb-5"><svg-icon :width="'60px'" :height="'60px'" :name="'success'" /></div>
       <div class="font-semibold">{{ t('system.plugin.uploadSuccess') }}</div>
@@ -36,26 +36,37 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import { useDialog } from '@/hooks/useDialog';
+  import { ref, watch, watchEffect } from 'vue';
   import useVisit from '@/hooks/useVisit';
   import { useI18n } from '@/hooks/useI18n';
   import { useRouter } from 'vue-router';
 
-  const { t } = useI18n();
   const router = useRouter();
   const visitedKey = 'doNotShowAgain';
+  const { t } = useI18n();
   const { addVisited } = useVisit(visitedKey);
+
   const props = defineProps<{
     visible: boolean;
-    title?: string;
-    onOpen: (visible: boolean) => void;
   }>();
   const emits = defineEmits<{
     (event: 'update:visible', visible: boolean): void;
     (event: 'close'): void;
+    (event: 'openUploadModal'): void;
   }>();
-  const { dialogVisible } = useDialog(props, emits);
+
+  const dialogVisible = ref<boolean>(false);
+
+  watchEffect(() => {
+    dialogVisible.value = props.visible;
+  });
+
+  watch(
+    () => dialogVisible.value,
+    (val) => {
+      emits('update:visible', val);
+    }
+  );
   const isTip = ref(false);
   const countDown = ref<number>(5);
   const timer = ref<any>(null);
@@ -78,9 +89,10 @@
   watch(isTip, () => {
     isDoNotShowAgainChecked();
   });
+
   const continueAdd = () => {
     emits('close');
-    props.onOpen(true);
+    emits('openUploadModal');
   };
 </script>
 

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

@@ -104,4 +104,5 @@ export default {
   '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!',
+  'system.plugin.allOrganizeTip': 'This rule is common to new organizations',
 };

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

@@ -83,4 +83,5 @@ export default {
   'system.plugin.pluginStatus': '插件状态',
   'system.plugin.databaseDriver': '数据库驱动',
   'system.plugin.deleteContentTip': '删除后，将无法同步该平台的缺陷/需求，历史数据自动切换为其它模板展示，请谨慎操作！',
+  'system.plugin.allOrganizeTip': '新建组织通用此规则',
 };