style: table 样式修改&项目前端问题修改

frontend/package.json

@@ -38,7 +38,7 @@
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
     "@arco-design/web-vue": "^2.51.0",
-    "@arco-themes/vue-ms-theme-default": "^0.0.28",
+    "@arco-themes/vue-ms-theme-default": "^0.0.29",
     "@form-create/arco-design": "^3.1.22",
     "@types/color": "^3.0.3",
     "@vueuse/core": "^10.2.1",

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

@@ -77,8 +77,14 @@
                   </slot>
                 </div>
               </template>
+              <template v-else-if="item.slotName === SpecialColumnEnum.OPERATION">
+                <slot name="operation" v-bind="{ record, rowIndex }" />
+              </template>
+              <template v-else-if="item.slotName === SpecialColumnEnum.ACTION">
+                <slot name="action" v-bind="{ record, rowIndex }" />
+              </template>
               <template v-else-if="item.showTooltip">
-                <a-tooltip placement="top" :content="record[item.dataIndex as string]">
+                <a-tooltip placement="top" :content="String(record[item.dataIndex as string])">
                   <a-input
                     v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
                     ref="currentInputRef"

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

@@ -139,13 +139,17 @@
     margin-left: 16px;
     color: var(--color-text-4);
     background-color: var(--color-text-10);
+    cursor: pointer;
+    &:hover {
+      color: rgba(var(--primary-5));
+    }
   }
   .mode-button {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     .active-color {
-      color: var(--color-primary-5);
+      color: rgba(var(--primary-5));
     }
     .mode-button-title {
       margin-left: 4px;

frontend/src/components/pure/ms-table/select-all.vue

@@ -69,13 +69,15 @@
     flex-flow: row nowrap;
     align-items: center;
     .dropdown-icon {
-      margin-left: 2px;
+      margin-left: 4px;
       font-size: 12px;
-      color: rgb(var(--primary-6));
+      border-radius: 50%;
+      color: var(--color-text-4);
+      background-color: rgb(var(--primary-3));
     }
     .dropdown-icon:hover {
-      border-radius: 50%;
+      color: rgb(var(--primary-5));
-      background-color: rgb(var(--primary-3));
+      background-color: transparent;
     }
   }
 </style>

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

@@ -17,7 +17,7 @@
       </span>
     </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" :model="form" size="large" :style="{ width: '632px' }" layout="vertical">
         <a-form-item
           field="name"
           required
@@ -48,9 +48,6 @@
             }"
           />
         </a-form-item>
-        <a-form-item field="description" :label="t('system.organization.description')">
-          <a-input v-model="form.description" :placeholder="t('system.organization.descriptionPlaceholder')" />
-        </a-form-item>
         <a-form-item field="module" :label="t('system.project.moduleSetting')">
           <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
             <template #label="{ data }">
@@ -58,12 +55,15 @@
             </template>
           </a-checkbox-group>
         </a-form-item>
+        <a-form-item field="description" :label="t('system.organization.description')">
+          <a-input v-model="form.description" :placeholder="t('system.organization.descriptionPlaceholder')" />
+        </a-form-item>
       </a-form>
     </div>
     <template #footer>
       <div class="flex flex-row justify-between">
         <div class="flex flex-row items-center gap-[4px]">
-          <a-switch v-model="form.enable" />
+          <a-switch v-model="form.enable" size="small" />
           <span>{{ t('system.organization.status') }}</span>
           <a-tooltip :content="t('system.project.createTip')" position="top">
             <MsIcon type="icon-icon-maybe_outlined" class="text-[var(--color-text-4)]" />
@@ -104,7 +104,7 @@
   const formRef = ref<FormInstance>();
 
   const loading = ref(false);
-  const isEdit = computed(() => !!props.currentProject?.id);
+  const isEdit = computed(() => !!props.currentProject);
   const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
   const appStore = useAppStore();
   const currentOrgId = computed(() => appStore.currentOrgId);
@@ -188,7 +188,7 @@
   };
   watchEffect(() => {
     initAffiliatedOrgOption();
-    if (props.currentProject) {
+    if (isEdit.value && props.currentProject) {
       form.id = props.currentProject.id;
       form.name = props.currentProject.name;
       form.description = props.currentProject.description;

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

@@ -68,6 +68,7 @@
   const props = defineProps<projectDrawerProps>();
   const emit = defineEmits<{
     (e: 'cancel'): void;
+    (e: 'requestFetchData'): void;
   }>();
 
   const currentVisible = ref(props.visible);
@@ -80,10 +81,13 @@
     {
       title: 'system.organization.userName',
       slotName: 'name',
+      showTooltip: true,
+      width: 200,
     },
     {
       title: 'system.organization.email',
       dataIndex: 'email',
+      showTooltip: true,
       width: 200,
     },
     {
@@ -123,6 +127,7 @@
     userVisible.value = false;
     if (shouldSearch) {
       fetchData();
+      emit('requestFetchData');
     }
   };
 

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

@@ -62,7 +62,7 @@ export default {
   'system.project.affiliatedOrgPlaceholder': '请选择所属组织',
   'system.project.projectAdmin': '项目管理员',
   'system.project.projectAdminPlaceholder': '默认选择创建项目人为项目管理员',
-  'system.project.moduleSetting': '模块设置',
+  'system.project.moduleSetting': '启用模块',
   'system.project.projectNameRequired': '项目名称不能为空',
   'system.project.createTip': '项目启用后，将展示在项目切换列表',
   'system.project.affiliatedOrgRequired': '所属组织不能为空',

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

@@ -44,9 +44,13 @@
         </template>
       </template>
     </MsBaseTable>
-    <AddProjectModal :visible="addProjectVisible" @cancel="handleAddProjectModalCancel" />
+    <AddProjectModal
+      :visible="addProjectVisible"
+      :current-project="currentUpdateProject"
+      @cancel="handleAddProjectModalCancel"
+    />
     <AddUserModal :project-id="currentProjectId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
-    <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+    <UserDrawer v-bind="currentUserDrawer" @request-fetch-data="fetchData" @cancel="handleUserDrawerCancel" />
   </MsCard>
 </template>
 
@@ -185,6 +189,7 @@
   ];
 
   const showAddProject = () => {
+    currentUpdateProject.value = undefined;
     addProjectVisible.value = true;
   };
 
@@ -261,7 +266,6 @@
 
   const handleUserDrawerCancel = () => {
     currentUserDrawer.visible = false;
-    fetchData();
   };
 
   const handleAddUserModalCancel = (shouldSearch: boolean) => {

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

@@ -48,7 +48,7 @@
     @submit="fetchData"
   />
   <ProjectDrawer v-bind="currentProjectDrawer" @cancel="handleProjectDrawerCancel" />
-  <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+  <UserDrawer v-bind="currentUserDrawer" @request-fetch-data="fetchData" @cancel="handleUserDrawerCancel" />
 </template>
 
 <script lang="ts" setup>
@@ -255,23 +255,23 @@
 
   const handleProjectDrawerCancel = () => {
     currentProjectDrawer.visible = false;
-    fetchData();
   };
 
   const showProjectDrawer = (record: TableData) => {
+    currentUserDrawer.visible = false;
     currentProjectDrawer.visible = true;
     currentProjectDrawer.organizationId = record.id;
     currentProjectDrawer.currentName = record.name;
   };
 
   const showUserDrawer = (record: TableData) => {
+    currentProjectDrawer.visible = false;
     currentUserDrawer.visible = true;
     currentUserDrawer.organizationId = record.id;
   };
 
   const handleUserDrawerCancel = () => {
     currentUserDrawer.visible = false;
-    fetchData();
   };
 
   const handleAddUserModalCancel = () => {

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

@@ -43,7 +43,12 @@
     @submit="fetchData"
     @cancel="handleAddUserModalCancel"
   />
-  <UserDrawer :project-id="currentProjectId" v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+  <UserDrawer
+    :project-id="currentProjectId"
+    v-bind="currentUserDrawer"
+    @request-fetch-data="fetchData"
+    @cancel="handleUserDrawerCancel"
+  />
 </template>
 
 <script lang="ts" setup>

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

@@ -44,7 +44,7 @@
     :organization-id="props.organizationId"
     :visible="userVisible"
     @cancel="handleHideUserModal"
-    @submit="fetchData"
+    @submit="handleAddMembeSubmit"
   />
 </template>
 
@@ -72,6 +72,7 @@
   const props = defineProps<projectDrawerProps>();
   const emit = defineEmits<{
     (e: 'cancel'): void;
+    (e: 'requestFetchData'): void;
   }>();
 
   const currentVisible = ref(props.visible);
@@ -84,11 +85,15 @@
     {
       title: 'system.organization.userName',
       slotName: 'name',
+      dataIndex: 'nameTooltip',
+      showTooltip: true,
+      width: 200,
     },
     {
       title: 'system.organization.email',
       dataIndex: 'email',
       width: 200,
+      showTooltip: true,
     },
     {
       title: 'system.organization.phone',
@@ -97,14 +102,21 @@
     { title: 'system.organization.operation', slotName: 'operation' },
   ];
 
-  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserTableByOrgIdOrProjectId, {
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(
+    postUserTableByOrgIdOrProjectId,
+    {
       columns: projectColumn,
       showSetting: false,
       scroll: { y: 'auto', x: '600px' },
       selectable: false,
       size: 'small',
       noDisable: false,
-  });
+    },
+    (record: any) => ({
+      ...record,
+      nameTooltip: record.name + (record.adminFlag ? `(${t('common.admin')})` : ''),
+    })
+  );
 
   async function searchUser() {
     setKeyword(keyword.value);
@@ -128,6 +140,10 @@
   const handleAddMember = () => {
     userVisible.value = true;
   };
+  const handleAddMembeSubmit = () => {
+    fetchData();
+    emit('requestFetchData');
+  };
 
   const handleHideUserModal = () => {
     userVisible.value = false;

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

@@ -27,7 +27,7 @@
       @batch-action="handleTableBatch"
     >
       <template #organization="{ record }">
-        <MsTagGroup :tag-list="record.organizationList"> </MsTagGroup>
+        <MsTagGroup theme="outline" :tag-list="record.organizationList"> </MsTagGroup>
       </template>
       <template #userRole="{ record }">
         <MsTagGroup :tag-list="record.userRoleList" type="primary" theme="outline"> </MsTagGroup>
@@ -261,7 +261,7 @@
     {
       tableKey: TableKeyEnum.SYSTEM_USER,
       columns,
-      scroll: { x: 1200 },
+      size: 'default',
       selectable: true,
     },
     (record) => ({