fix(系统设置): 增加项目模块选择提醒及bug修改

frontend/src/assets/style/arco-reset.less

@@ -709,6 +709,7 @@
     }
     &:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
       border: 1px solid var(--color-text-input-border);
+      border-radius: 3px;
     }
     &-active {
       border-color: rgb(var(--primary-5)) !important;

frontend/src/components/pure/ms-table/base-table.vue

@@ -140,7 +140,12 @@
                   @blur="handleEditInputBlur(record, item.dataIndex as string, true)"
                   @keydown.enter="handleEditInputBlur(record, item.dataIndex as string, false)"
                 />
-                <a-tooltip v-else placement="top" :content="String(record[item.dataIndex as string])">
+                <a-tooltip
+                  v-else
+                  placement="top"
+                  content-class="max-w-[600px]"
+                  :content="String(record[item.dataIndex as string])"
+                >
                   <div class="one-line-text">
                     <slot :name="item.slotName" v-bind="{ record, rowIndex, column, columnConfig: item }">
                       {{ record[item.dataIndex as string] || (attrs.emptyDataShowLine ? '-' : '') }}
@@ -318,6 +323,10 @@
     const { selectorStatus } = props;
     if (selectorStatus === SelectAllEnum.CURRENT) {
       const { pageSize, total } = attrs.msPagination as MsPaginationI;
+      if (!attrs.showPagination) {
+        // 不展示分页时直接返回total
+        return total;
+      }
       if (pageSize > total) {
         return total;
       }

frontend/src/components/pure/ms-table/columnSelector.vue

@@ -49,7 +49,7 @@
       <a-divider />
       <div class="mb-2 flex items-center justify-between">
         <div class="text-[var(--color-text-4)]">{{ t('msTable.columnSetting.header') }}</div>
-        <MsButton :disabled="!hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
+        <MsButton v-if="hasChange" @click="handleReset">{{ t('msTable.columnSetting.resetDefault') }}</MsButton>
       </div>
       <div class="flex-col">
         <div v-for="item in nonSortColumn" :key="item.dataIndex" class="column-item">
@@ -140,6 +140,7 @@
 
   const handleReset = () => {
     loadColumn(props.tableKey);
+    hasChange.value = false;
   };
 
   const handleModeChange = (value: string | number | boolean) => {

frontend/src/components/pure/ms-user-admin-div/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-row flex-nowrap">
-    <div class="flex flex-row flex-nowrap">{{ props.name }}</div>
+    <a-tooltip content-class="max-w-[600px]">
+      <div class="flex flex-row flex-nowrap">{{ characterLimit(props.name) }}</div>
+    </a-tooltip>
     <div v-if="props.isAdmin" class="ml-1 flex flex-row flex-nowrap text-[var(--color-text-4)]">{{
       `(${t('common.admin')})`
     }}</div>
@@ -9,6 +11,7 @@
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
+  import { characterLimit } from '@/utils';
 
   const { t } = useI18n();
   const props = withDefaults(defineProps<{ name?: string; isAdmin?: boolean }>(), { isAdmin: false });

frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue

@@ -100,7 +100,7 @@
       title: 'system.organization.phone',
       dataIndex: 'phone',
     },
-    { title: 'system.organization.operation', slotName: 'operation' },
+    { title: 'system.organization.operation', slotName: 'operation', width: 60 },
   ];
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(

frontend/src/views/setting/organization/project/components/addProjectModal.vue

@@ -54,7 +54,7 @@
           />
         </a-form-item>
         <a-form-item field="module" :label="t('system.project.moduleSetting')">
-          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
+          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption" @change="handleModuleChange">
             <template #label="{ data }">
               <span>{{ t(data.label) }}</span>
             </template>
@@ -71,7 +71,7 @@
           <a-textarea
             v-model="form.description"
             :max-length="1000"
-            :placeholder="t('system.organization.descriptionPlaceholder')"
+            :placeholder="t('system.project.descriptionPlaceholder')"
             allow-clear
             :auto-size="{ minRows: 1 }"
           />
@@ -105,6 +105,7 @@
 
 <script lang="ts" setup>
   import { computed, reactive, ref, watchEffect } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@@ -135,6 +136,18 @@
   const appStore = useAppStore();
   const currentOrgId = computed(() => appStore.currentOrgId);
   const licenseStore = useLicenseStore();
+  const timer = ref(5); // 存储倒计时
+  const { pause, resume } = useIntervalFn(() => {
+    timer.value--;
+  }, 1000);
+  // 初始化组件时关闭
+  pause();
+  // timer 为0时关闭
+  watch(timer, () => {
+    if (timer.value === 0) {
+      pause();
+    }
+  });
   const moduleOption = [
     // { label: 'menu.workbench', value: 'workstation' },
     // { label: 'menu.testPlan', value: 'testPlan' },
@@ -182,6 +195,24 @@
     form.enable = true;
     form.moduleIds = allModuleIds;
     form.resourcePoolIds = [];
+    timer.value = 5;
+    Message.clear();
+    pause();
+  };
+  const handleModuleChange = (value: (string | number | boolean)[]) => {
+    if (props.currentProject?.id && timer.value === 5 && props.currentProject.moduleIds?.length) {
+      if (props.currentProject.moduleIds.some((item) => value.includes(item))) {
+        resume();
+        Message.warning({
+          content: () =>
+            h('span', [
+              h('span', t('system.project.afterModule')),
+              h('span', { class: 'ml-[20px] text-[var(--color-text-4)]' }, `${timer.value}s`),
+            ]),
+          duration: 5000,
+        });
+      }
+    }
   };
   const handleCancel = (shouldSearch: boolean) => {
     emit('cancel', shouldSearch);

frontend/src/views/setting/organization/project/components/userDrawer.vue

@@ -99,7 +99,11 @@
       title: 'system.organization.phone',
       dataIndex: 'phone',
     },
-    { title: 'system.organization.operation', slotName: 'operation' },
+    {
+      title: 'system.organization.operation',
+      slotName: 'operation',
+      width: 60,
+    },
   ];
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(

frontend/src/views/setting/organization/project/locale/en-US.ts

@@ -77,4 +77,5 @@ export default {
   'system.project.updateProjectSuccess': 'Update project success',
   'system.project.resourcePool': 'Resource pool',
   'system.project.removeName': 'Confirm remove the {name}',
+  'system.project.descriptionPlaceholder': 'Please describe the project.',
 };

frontend/src/views/setting/organization/project/locale/zh-CN.ts

@@ -71,4 +71,5 @@ export default {
   'system.project.updateProjectSuccess': '更新项目成功',
   'system.project.resourcePool': '资源池',
   'system.project.removeName': '确认移除 {name} 这个用户吗？',
+  'system.project.descriptionPlaceholder': '请对该项目进行描述',
 };

frontend/src/views/setting/organization/project/orgProject.vue

@@ -187,6 +187,7 @@
       width: 180,
       showDrag: true,
       dataIndex: 'createUser',
+      showTooltip: true,
     },
     {
       title: 'system.organization.createTime',

frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue

@@ -6,6 +6,7 @@
     title-align="start"
     unmount-on-close
     :mask-closable="false"
+    :ok-loading="loading"
     @cancel="handleCancel(false)"
   >
     <template #title>
@@ -57,7 +58,7 @@
           />
         </a-form-item>
         <a-form-item field="module" :label="t('system.project.moduleSetting')">
-          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
+          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption" @change="handleModuleChange">
             <template #label="{ data }">
               <span>{{ t(data.label) }}</span>
             </template>
@@ -74,7 +75,7 @@
           <a-textarea
             v-model="form.description"
             :max-length="1000"
-            :placeholder="t('system.organization.descriptionPlaceholder')"
+            :placeholder="t('system.project.descriptionPlaceholder')"
             allow-clear
             :auto-size="{ minRows: 1 }"
           />
@@ -108,6 +109,7 @@
 
 <script lang="ts" setup>
   import { computed, reactive, ref, watchEffect } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@@ -137,6 +139,18 @@
   const isEdit = computed(() => !!props.currentProject?.id);
   const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
   const licenseStore = useLicenseStore();
+  const timer = ref(5); // 存储倒计时
+  const { pause, resume } = useIntervalFn(() => {
+    timer.value--;
+  }, 1000);
+  // 初始化组件时关闭
+  pause();
+  // timer 为0时关闭
+  watch(timer, () => {
+    if (timer.value === 0) {
+      pause();
+    }
+  });
   const moduleOption = [
     // { label: 'menu.workbench', value: 'workstation' },
     // { label: 'menu.testPlan', value: 'testPlan' },
@@ -179,6 +193,10 @@
     form.description = '';
     form.enable = true;
     form.moduleIds = allModuleIds;
+    form.resourcePoolIds = [];
+    timer.value = 5;
+    Message.clear();
+    pause();
   };
   const handleCancel = (shouldSearch: boolean) => {
     emit('cancel', shouldSearch);
@@ -217,6 +235,22 @@
       console.error(error);
     }
   };
+
+  const handleModuleChange = (value: (string | number | boolean)[]) => {
+    if (props.currentProject?.id && timer.value === 5 && props.currentProject.moduleIds?.length) {
+      if (props.currentProject.moduleIds.some((item) => value.includes(item))) {
+        resume();
+        Message.warning({
+          content: () =>
+            h('span', [
+              h('span', t('system.project.afterModule')),
+              h('span', { class: 'ml-[20px] text-[var(--color-text-4)]' }, `${timer.value}s`),
+            ]),
+          duration: 5000,
+        });
+      }
+    }
+  };
   watchEffect(() => {
     if (props.currentProject) {
       form.id = props.currentProject.id;

frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue

@@ -181,6 +181,7 @@
       title: 'system.organization.creator',
       slotName: 'creator',
       dataIndex: 'createUser',
+      showTooltip: true,
     },
     {
       title: 'system.organization.createTime',

frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue

@@ -176,6 +176,7 @@
       slotName: 'creator',
       dataIndex: 'createUser',
       width: 200,
+      showTooltip: true,
     },
     {
       title: 'system.organization.createTime',

frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue

@@ -105,7 +105,7 @@
       title: 'system.organization.phone',
       dataIndex: 'phone',
     },
-    { title: 'system.organization.operation', slotName: 'operation' },
+    { title: 'system.organization.operation', slotName: 'operation', width: 60 },
   ];
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(

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

@@ -77,4 +77,6 @@ export default {
   'system.project.removeTip': "Remove it, and you'll lose access to the project.",
   'system.organization.projectIsDisabled': 'The project has ended and can be opened in the project list.',
   'system.project.searchPlaceholder': 'Search by name or id',
+  'system.project.afterModule':
+    'After the module is canceled, users will be unable to access the specified module, and existing data will remain intact',
 };

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

@@ -74,4 +74,5 @@ export default {
   'system.project.deleteName': '确认删除 {name} 这个项目吗？',
   'system.project.deleteTip': '删除后，系统会在 30天 后执行删除项目 (含项目下所有业务数据)，请谨慎操作！',
   'system.project.searchPlaceholder': '通过ID或项目名称搜索',
+  'system.project.afterModule': '取消模块后用户将无法进入指定模块，已存在的数据会继续保留',
 };