diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c4dc390a69..cf038a28f2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,10 +18,13 @@
   import { watchStyle, watchTheme, setFavicon } from '@/utils/theme';
   import { GetPlatformIconUrl } from '@/api/requrls/setting/config';
   import { useUserStore } from '@/store';
+  import { useRouter } from 'vue-router';
+  import { WorkbenchRouteEnum } from './enums/routeEnum';
 
   const appStore = useAppStore();
   const userStore = useUserStore();
   const licenseStore = useLicenseStore();
+  const router = useRouter();
 
   const { currentLocale } = useLocale();
   const locale = computed(() => {
@@ -61,7 +64,15 @@
       console.log(error);
     }
   });
-  onMounted(() => {
-    userStore.isLogin();
+  const checkIsLogin = async () => {
+    const isLogin = await userStore.isLogin();
+    const isLoginPage = window.location.hash === '#/login';
+    if (isLoginPage && isLogin) {
+      // 当前页面为登录页面，且已经登录，跳转到首页
+      router.push(WorkbenchRouteEnum.WORKBENCH);
+    }
+  };
+  onMounted(async () => {
+    await checkIsLogin();
   });
 </script>
diff --git a/frontend/src/api/http/checkStatus.ts b/frontend/src/api/http/checkStatus.ts
index 988580a3a7..4b19b56226 100644
--- a/frontend/src/api/http/checkStatus.ts
+++ b/frontend/src/api/http/checkStatus.ts
@@ -5,15 +5,19 @@ import useUser from '@/hooks/useUser';
 
 export default function checkStatus(status: number, msg: string, errorMessageMode: ErrorMessageMode = 'message'): void {
   const { t } = useI18n();
-  const { logout } = useUser();
+  const { logout, setSalt, isLoginPage } = useUser();
   let errMessage = '';
   switch (status) {
     case 400:
       errMessage = `${msg}`;
       break;
     case 401: {
-      errMessage = msg || t('api.errMsg401');
-      logout();
+      setSalt(msg);
+      if (!isLoginPage()) {
+        // 不是登录页再调用logout
+        logout();
+        errMessage = t('api.errMsg401');
+      }
       break;
     }
     case 403:
diff --git a/frontend/src/api/http/index.ts b/frontend/src/api/http/index.ts
index 43a1339424..274d7b14a8 100644
--- a/frontend/src/api/http/index.ts
+++ b/frontend/src/api/http/index.ts
@@ -155,7 +155,6 @@ const transform: AxiosTransform = {
     } catch (e) {
       throw new Error(e as unknown as string);
     }
-
     checkStatus(error?.response?.status, msg, errorMessageMode);
     return Promise.reject(error);
   },
diff --git a/frontend/src/api/modules/setting/usergroup.ts b/frontend/src/api/modules/setting/usergroup.ts
index ea6352e2c0..59ded2fb31 100644
--- a/frontend/src/api/modules/setting/usergroup.ts
+++ b/frontend/src/api/modules/setting/usergroup.ts
@@ -1,65 +1,85 @@
 import MSR from '@/api/http/index';
-import {
-  updateUserGroupU,
-  getUserGroupU,
-  addUserGroupU,
-  deleteUserGroupU,
-  getGlobalUSettingUrl,
-  editGlobalUSettingUrl,
-  postUserByUserGroupUrl,
-  deleteUserFromUserGroupUrl,
-  getUserListUrl,
-  addUserToUserGroupUrl,
-} from '@/api/requrls/setting/usergroup';
+import * as ugUrl from '@/api/requrls/setting/usergroup';
 import { TableQueryParams, CommonList } from '@/models/common';
-import { UserGroupItem, UserGroupAuthSetting, SaveGlobalUSettingData, UserTableItem } from '@/models/setting/usergroup';
+import {
+  UserGroupItem,
+  SystemUserGroupParams,
+  OrgUserGroupParams,
+  UserGroupAuthSetting,
+  SaveGlobalUSettingData,
+  UserTableItem,
+} from '@/models/setting/usergroup';
 
-export function updateOrAddUserGroup(data: Partial<UserGroupItem>) {
+// 系统-创建或修改用户组
+export function updateOrAddUserGroup(data: SystemUserGroupParams) {
   return MSR.post<UserGroupItem>({
-    url: data.id ? updateUserGroupU : addUserGroupU,
+    url: data.id ? ugUrl.updateUserGroupU : ugUrl.addUserGroupU,
+    data,
+  });
+}
+// 组织-创建或修改用户组
+export function updateOrAddOrgUserGroup(data: OrgUserGroupParams) {
+  return MSR.post<UserGroupItem>({
+    url: data.id ? ugUrl.updateOrgUserGroupU : ugUrl.addOrgUserGroupU,
     data,
   });
 }
 
-export function updateSocpe(data: Partial<UserGroupItem>) {
+export function updateSocpe(data: Partial<SystemUserGroupParams>) {
   return MSR.post<UserGroupItem>({
-    url: updateUserGroupU,
+    url: ugUrl.updateUserGroupU,
     data,
   });
 }
-
+// 系统-获取用户组列表
 export function getUserGroupList() {
-  return MSR.get<UserGroupItem[]>({ url: getUserGroupU });
+  return MSR.get<UserGroupItem[]>({ url: ugUrl.getUserGroupU });
+}
+// 组织-获取用户组列表
+export function getOrgUserGroupList(organizationId: string) {
+  return MSR.get<UserGroupItem[]>({ url: `${ugUrl.getOrgUserGroupU}${organizationId}` });
+}
+// 系统-删除用户组
+export function deleteUserGroup(id: string) {
+  return MSR.get<string>({ url: `${ugUrl.deleteUserGroupU}${id}` });
 }
 
-export function deleteUserGroup(id: string) {
-  return MSR.get<string>({ url: `${deleteUserGroupU}${id}` });
+// 组织-删除用户组
+export function deleteOrgUserGroup(id: string) {
+  return MSR.get<string>({ url: `${ugUrl.deleteOrgUserGroupU}${id}` });
 }
 
 export function getUsergroupInfo(id: string) {
-  return MSR.get<UserGroupItem>({ url: `${getUserGroupU}${id}` });
+  return MSR.get<UserGroupItem>({ url: `${ugUrl.getUserGroupU}${id}` });
 }
 
+// 系统-获取用户组对应的权限配置
 export function getGlobalUSetting(id: string) {
-  return MSR.get<UserGroupAuthSetting[]>({ url: `${getGlobalUSettingUrl}${id}` });
+  return MSR.get<UserGroupAuthSetting[]>({ url: `${ugUrl.getGlobalUSettingUrl}${id}` });
+}
+// 组织-获取用户组对应的权限配置
+export function getOrgUSetting(id: string) {
+  return MSR.get<UserGroupAuthSetting[]>({ url: `${ugUrl.getOrgUSettingUrl}${id}` });
 }
 
+// 系统-编辑用户组对应的权限配置
 export function saveGlobalUSetting(data: SaveGlobalUSettingData) {
-  return MSR.post<UserGroupAuthSetting[]>({ url: editGlobalUSettingUrl, data });
+  return MSR.post<UserGroupAuthSetting[]>({ url: ugUrl.editGlobalUSettingUrl, data });
+}
+
+// 组织-编辑用户组对应的权限配置
+export function saveOrgUSetting(data: SaveGlobalUSettingData) {
+  return MSR.post<UserGroupAuthSetting[]>({ url: ugUrl.editOrgUSettingUrl, data });
 }
 
 export function postUserByUserGroup(data: TableQueryParams) {
-  return MSR.post<CommonList<UserTableItem[]>>({ url: postUserByUserGroupUrl, data });
+  return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.postUserByUserGroupUrl, data });
 }
 
 export function deleteUserFromUserGroup(id: string) {
-  return MSR.get<string>({ url: `${deleteUserFromUserGroupUrl}${id}` });
-}
-
-export function getUserList() {
-  return MSR.get<UserTableItem[]>({ url: getUserListUrl });
+  return MSR.get<string>({ url: `${ugUrl.deleteUserFromUserGroupUrl}${id}` });
 }
 
 export function addUserToUserGroup(data: { roleId: string; userIds: string[] }) {
-  return MSR.post<string>({ url: addUserToUserGroupUrl, data });
+  return MSR.post<string>({ url: ugUrl.addUserToUserGroupUrl, data });
 }
diff --git a/frontend/src/api/requrls/setting/organizationAndProject.ts b/frontend/src/api/requrls/setting/organizationAndProject.ts
index bfe6653254..a795c84456 100644
--- a/frontend/src/api/requrls/setting/organizationAndProject.ts
+++ b/frontend/src/api/requrls/setting/organizationAndProject.ts
@@ -31,7 +31,7 @@ export const postModifyProjectUrl = '/system/project/update';
 // 获取项目列表
 export const postProjectTableUrl = '/system/project/page';
 // 获取项目成员
-export const postProjectMemberUrl = '/system/project/member/list';
+export const postProjectMemberUrl = '/system/project/member-list';
 // 添加项目
 export const postAddProjectUrl = '/system/project/add';
 // 添加项目成员
@@ -45,7 +45,7 @@ export const getProjectInfoUrl = '/system/project/get/';
 // 删除项目
 export const getDeleteProjectUrl = '/system/project/delete/';
 // 系统-组织及项目，获取用户下拉选项
-export const getUserByOrgOrProjectUrl = '/system/user/get-option/';
+export const getUserByOrgOrProjectUrl = '/system/organization/get-option/';
 // 启用项目
 export const getEnableProjectUrl = '/system/project/enable/';
 // 禁用项目
diff --git a/frontend/src/api/requrls/setting/usergroup.ts b/frontend/src/api/requrls/setting/usergroup.ts
index a54df0ab51..8ade9f41f9 100644
--- a/frontend/src/api/requrls/setting/usergroup.ts
+++ b/frontend/src/api/requrls/setting/usergroup.ts
@@ -19,5 +19,26 @@ export const postUserByUserGroupUrl = `/user/role/relation/global/list`;
 export const addUserToUserGroupUrl = `/user/role/relation/global/add`;
 /** 删除用户组用户 */
 export const deleteUserFromUserGroupUrl = `/user/role/relation/global/delete/`;
-/** 获取所有用户 */
-export const getUserListUrl = '/system/user/list';
+
+// 组织下的用户组
+
+export const updateOrgUserGroupU = `/user/role/organization/update`;
+/** 编辑用户组对应的权限配置 */
+export const editOrgUSettingUrl = `/user/role/organization/permission/update`;
+/** 添加用户组 */
+export const addOrgUserGroupU = `/user/role/organization/add`;
+/** 获取用户组对应的权限配置 */
+export const getOrgUSettingUrl = `/user/role/organization/permission/setting/`;
+/** 获取用户组 */
+export const getOrgUserGroupU = `/user/role/organization/list/`;
+/** 获取单个用户组信息 */
+export const getOrgUsergroupInfoU = `/user/role/organization/get/`;
+/** 删除用户组 */
+export const deleteOrgUserGroupU = `/user/role/organization/delete/`;
+
+/** 根据用户组获取用户列表 */
+export const postOrgUserByUserGroupUrl = `/user/role/relation/organization/list`;
+/** 创建用户组添加用户 */
+export const addOrgUserToUserGroupUrl = `/user/role/relation/organization/add`;
+/** 删除用户组用户 */
+export const deleteOrgUserFromUserGroupUrl = `/user/role/relation/organization/delete/`;
diff --git a/frontend/src/components/business/ms-user-selector/index.vue b/frontend/src/components/business/ms-user-selector/index.vue
index 6bacf3c967..32bd3512b4 100644
--- a/frontend/src/components/business/ms-user-selector/index.vue
+++ b/frontend/src/components/business/ms-user-selector/index.vue
@@ -100,4 +100,3 @@
     }
   );
 </script>
-@/api/modules/setting/organizationAndProject
diff --git a/frontend/src/config/pathMap.ts b/frontend/src/config/pathMap.ts
index 1a11788aca..bc21e2ebd5 100644
--- a/frontend/src/config/pathMap.ts
+++ b/frontend/src/config/pathMap.ts
@@ -128,6 +128,20 @@ export const pathMap = [
             permission: [],
             level: MENU_LEVEL[1],
           },
+          {
+            key: 'SETTING_ORGANIZATION_USER_ROLE', // 系统设置-组织-用户组
+            locale: 'menu.settings.organization.userGroup',
+            route: RouteEnum.SETTING_ORGANIZATION_USER_GROUP,
+            permission: [],
+            level: MENU_LEVEL[1],
+          },
+          {
+            key: 'SETTING_ORGANIZATION_PROJECT', // 系统设置-组织-项目
+            locale: 'menu.settings.organization.project',
+            route: RouteEnum.SETTING_ORGANIZATION_PROJECT,
+            permission: [],
+            level: MENU_LEVEL[1],
+          },
           {
             key: 'SETTING_ORGANIZATION_SERVICE', // 系统设置-组织-服务集成
             locale: 'menu.settings.organization.serviceIntegration',
diff --git a/frontend/src/enums/routeEnum.ts b/frontend/src/enums/routeEnum.ts
index 8cfbe2314b..22a615be67 100644
--- a/frontend/src/enums/routeEnum.ts
+++ b/frontend/src/enums/routeEnum.ts
@@ -46,6 +46,8 @@ export enum SettingRouteEnum {
   SETTING_SYSTEM_PLUGIN_MANAGEMENT = 'settingSystemPluginManagement',
   SETTING_ORGANIZATION = 'settingOrganization',
   SETTING_ORGANIZATION_MEMBER = 'settingOrganizationMember',
+  SETTING_ORGANIZATION_USER_GROUP = 'settingOrganizationUserGroup',
+  SETTING_ORGANIZATION_PROJECT = 'settingOrganizationProject',
   SETTING_ORGANIZATION_SERVICE = 'settingOrganizationService',
   SETTING_ORGANIZATION_LOG = 'settingOrganizationLog',
 }
diff --git a/frontend/src/hooks/useUser.ts b/frontend/src/hooks/useUser.ts
index bb8edd7afd..247c1dfabe 100644
--- a/frontend/src/hooks/useUser.ts
+++ b/frontend/src/hooks/useUser.ts
@@ -21,7 +21,17 @@ export default function useUser() {
     });
   };
 
+  const setSalt = (salt: string) => {
+    userStore.setSalt(salt);
+  };
+
+  const isLoginPage = () => {
+    return router.currentRoute.value.name === 'login';
+  };
+
   return {
     logout,
+    setSalt,
+    isLoginPage,
   };
 }
diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts
index 48f1573462..b26c027b07 100644
--- a/frontend/src/locale/en-US/common.ts
+++ b/frontend/src/locale/en-US/common.ts
@@ -43,4 +43,5 @@ export default {
   'common.unSaveLeaveTitle': 'Leave this page?',
   'common.unSaveLeaveContent': 'The system may not save your changes',
   'common.leave': 'Leave',
+  'common.rename': 'Rename',
 };
diff --git a/frontend/src/locale/en-US/index.ts b/frontend/src/locale/en-US/index.ts
index 5eb22a1dc1..77e17ff85b 100644
--- a/frontend/src/locale/en-US/index.ts
+++ b/frontend/src/locale/en-US/index.ts
@@ -42,6 +42,8 @@ export default {
     'menu.settings.system.log': 'System Log',
     'menu.settings.organization': 'Organization',
     'menu.settings.organization.member': 'Member',
+    'menu.settings.organization.userGroup': 'User Group',
+    'menu.settings.organization.project': 'Project',
     'menu.settings.organization.serviceIntegration': 'Service Integration',
     'menu.settings.organization.log': 'Org Log',
     'navbar.action.locale': 'Switch to English',
diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts
index a34d36e3a8..91627b65d0 100644
--- a/frontend/src/locale/zh-CN/common.ts
+++ b/frontend/src/locale/zh-CN/common.ts
@@ -43,4 +43,5 @@ export default {
   'common.unSaveLeaveTitle': '离开此页面？',
   'common.unSaveLeaveContent': '系统可能不会保存你所做的更改',
   'common.leave': '离开',
+  'common.rename': '重命名',
 };
diff --git a/frontend/src/locale/zh-CN/index.ts b/frontend/src/locale/zh-CN/index.ts
index 77b0c239d0..804ba13382 100644
--- a/frontend/src/locale/zh-CN/index.ts
+++ b/frontend/src/locale/zh-CN/index.ts
@@ -41,6 +41,8 @@ export default {
     'menu.settings.system.log': '系统日志',
     'menu.settings.organization': '组织',
     'menu.settings.organization.member': '成员',
+    'menu.settings.organization.userGroup': '用户组',
+    'menu.settings.organization.project': '项目',
     'menu.settings.organization.serviceIntegration': '服务集成',
     'menu.settings.organization.log': '组织日志',
     'navbar.action.locale': '切换为中文',
diff --git a/frontend/src/models/setting/usergroup.ts b/frontend/src/models/setting/usergroup.ts
index a73176674a..34d62d05d2 100644
--- a/frontend/src/models/setting/usergroup.ts
+++ b/frontend/src/models/setting/usergroup.ts
@@ -40,6 +40,18 @@ export interface UserGroupItem {
   pos: number;
 }
 
+export interface SystemUserGroupParams {
+  id?: string; // 组ID
+  name?: string; // 名称
+  scopeId?: string; // 组织ID
+  type?: string; // 组类型：SYSTEM | PROJECT | ORGANIZATION
+}
+export interface OrgUserGroupParams {
+  id?: string; // 组ID
+  name: string;
+  scopeId: string; // 组织ID
+}
+
 export interface UserGroupPermissionItem {
   id: string;
   name: string;
diff --git a/frontend/src/router/routes/modules/setting.ts b/frontend/src/router/routes/modules/setting.ts
index 42295fa369..e48a51f621 100644
--- a/frontend/src/router/routes/modules/setting.ts
+++ b/frontend/src/router/routes/modules/setting.ts
@@ -148,6 +148,26 @@ const Setting: AppRouteRecordRaw = {
             isTopMenu: true,
           },
         },
+        {
+          path: 'usergroup',
+          name: SettingRouteEnum.SETTING_ORGANIZATION_USER_GROUP,
+          component: () => import('@/views/setting/organization/usergroup/orgUserGroup.vue'),
+          meta: {
+            locale: 'menu.settings.organization.userGroup',
+            roles: ['*'],
+            isTopMenu: true,
+          },
+        },
+        {
+          path: 'project',
+          name: SettingRouteEnum.SETTING_ORGANIZATION_PROJECT,
+          component: () => import('@/views/setting/organization/project/orgProject.vue'),
+          meta: {
+            locale: 'menu.settings.organization.project',
+            roles: ['*'],
+            isTopMenu: true,
+          },
+        },
         {
           path: 'serviceIntegration',
           name: SettingRouteEnum.SETTING_ORGANIZATION_SERVICE,
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index 5a0c2beee7..dd2fdd4ca4 100644
--- a/frontend/src/store/index.ts
+++ b/frontend/src/store/index.ts
@@ -4,10 +4,9 @@ import useAppStore from './modules/app';
 import useVisitStore from './modules/app/visit';
 import useUserStore from './modules/user';
 import { debouncePlugin } from './plugins';
-import useUserGroupStore from './modules/setting/usergroup';
 import useTableStore from './modules/ms-table';
 
 const pinia = createPinia().use(debouncePlugin).use(piniaPluginPersistedstate);
 
-export { useAppStore, useUserStore, useVisitStore, useUserGroupStore, useTableStore };
+export { useAppStore, useUserStore, useVisitStore, useTableStore };
 export default pinia;
diff --git a/frontend/src/store/modules/setting/usergroup.ts b/frontend/src/store/modules/setting/organization/usergroup.ts
similarity index 80%
rename from frontend/src/store/modules/setting/usergroup.ts
rename to frontend/src/store/modules/setting/organization/usergroup.ts
index d9a4856b76..606979c4ad 100644
--- a/frontend/src/store/modules/setting/usergroup.ts
+++ b/frontend/src/store/modules/setting/organization/usergroup.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
-import { UserGroupState } from './types';
+import { UserGroupState } from '../types';
 
-const useUserGroupStore = defineStore('userGroup', {
+const useOrgUserGroupStore = defineStore('orgUserGroup', {
   state: (): UserGroupState => ({
     currentName: '',
     currentTitle: '',
@@ -27,4 +27,4 @@ const useUserGroupStore = defineStore('userGroup', {
   },
 });
 
-export default useUserGroupStore;
+export default useOrgUserGroupStore;
diff --git a/frontend/src/store/modules/setting/project/usergroup.ts b/frontend/src/store/modules/setting/project/usergroup.ts
new file mode 100644
index 0000000000..ef67bd9784
--- /dev/null
+++ b/frontend/src/store/modules/setting/project/usergroup.ts
@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia';
+import { UserGroupState } from '../types';
+
+const useProjectUserGroupStore = defineStore('projectUserGroup', {
+  state: (): UserGroupState => ({
+    currentName: '',
+    currentTitle: '',
+    currentId: '',
+    currentType: '',
+    currentInternal: false,
+    collapse: true,
+  }),
+  getters: {
+    userGroupInfo(state: UserGroupState): UserGroupState {
+      return state;
+    },
+  },
+  actions: {
+    // 设置当前用户组信息
+    setInfo(partial: Partial<UserGroupState>) {
+      this.$patch(partial);
+    },
+    // 设置用户组菜单开启关闭
+    setCollapse(collapse: boolean) {
+      this.collapse = collapse;
+    },
+  },
+});
+
+export default useProjectUserGroupStore;
diff --git a/frontend/src/store/modules/setting/system/usergroup.ts b/frontend/src/store/modules/setting/system/usergroup.ts
new file mode 100644
index 0000000000..5fc16ea424
--- /dev/null
+++ b/frontend/src/store/modules/setting/system/usergroup.ts
@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia';
+import { UserGroupState } from '../types';
+
+const useSystemUserGroupStore = defineStore('systemUserGroup', {
+  state: (): UserGroupState => ({
+    currentName: '',
+    currentTitle: '',
+    currentId: '',
+    currentType: '',
+    currentInternal: false,
+    collapse: true,
+  }),
+  getters: {
+    userGroupInfo(state: UserGroupState): UserGroupState {
+      return state;
+    },
+  },
+  actions: {
+    // 设置当前用户组信息
+    setInfo(partial: Partial<UserGroupState>) {
+      this.$patch(partial);
+    },
+    // 设置用户组菜单开启关闭
+    setCollapse(collapse: boolean) {
+      this.collapse = collapse;
+    },
+  },
+});
+
+export default useSystemUserGroupStore;
diff --git a/frontend/src/store/modules/user/index.ts b/frontend/src/store/modules/user/index.ts
index 0c6b9b81de..fef4be42a3 100644
--- a/frontend/src/store/modules/user/index.ts
+++ b/frontend/src/store/modules/user/index.ts
@@ -8,7 +8,6 @@ import { useI18n } from '@/hooks/useI18n';
 
 import type { LoginData } from '@/models/user';
 import type { UserState } from './types';
-import { Message } from '@arco-design/web-vue';
 
 const useUserStore = defineStore('user', {
   // 开启数据持久化
@@ -30,6 +29,7 @@ const useUserStore = defineStore('user', {
     accountId: undefined,
     certification: undefined,
     role: '',
+    salt: '',
   }),
 
   getters: {
@@ -100,12 +100,15 @@ const useUserStore = defineStore('user', {
         if (appStore.currentOrgId === '') {
           appStore.setCurrentOrgId(res.lastOrganizationId || '');
         }
+        return true;
       } catch (err) {
-        const { t } = useI18n();
-        Message.error(t('message.loginExpired'));
-        this.logoutCallBack();
+        return false;
       }
     },
+    // 加盐
+    setSalt(salt: string) {
+      this.$patch({ salt });
+    },
   },
 });
 
diff --git a/frontend/src/store/modules/user/types.ts b/frontend/src/store/modules/user/types.ts
index a75da21a76..eaa283f842 100644
--- a/frontend/src/store/modules/user/types.ts
+++ b/frontend/src/store/modules/user/types.ts
@@ -17,4 +17,6 @@ export interface UserState {
   certification?: number;
   role: RoleType;
   lastOrganizationId?: string;
+  // 盐
+  salt: string;
 }
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index bc71d05a43..8de0cb38b8 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -62,8 +62,8 @@
   import useLoading from '@/hooks/useLoading';
   import { setLoginExpires } from '@/utils/auth';
   import { GetLoginLogoUrl } from '@/api/requrls/setting/config';
-
   import type { LoginData } from '@/models/user';
+  import { WorkbenchRouteEnum } from '@/enums/routeEnum';
 
   const router = useRouter();
   const { t } = useI18n();
@@ -121,7 +121,7 @@
         const { redirect, ...othersQuery } = router.currentRoute.value.query;
         setLoginExpires();
         router.push({
-          name: (redirect as string) || 'settingSystemUser',
+          name: (redirect as string) || WorkbenchRouteEnum.WORKBENCH,
           query: {
             ...othersQuery,
           },
diff --git a/frontend/src/views/setting/organization/project/components/addProjectModal.vue b/frontend/src/views/setting/organization/project/components/addProjectModal.vue
new file mode 100644
index 0000000000..776ff5a9e7
--- /dev/null
+++ b/frontend/src/views/setting/organization/project/components/addProjectModal.vue
@@ -0,0 +1,187 @@
+<template>
+  <a-modal
+    v-model:visible="currentVisible"
+    width="680px"
+    class="ms-modal-form ms-modal-medium"
+    :ok-text="isEdit ? t('common.update') : t('common.create')"
+    unmount-on-close
+    @cancel="handleCancel"
+  >
+    <template #title>
+      <span v-if="isEdit">
+        {{ t('system.project.updateProject') }}
+        <span class="text-[var(--color-text-4)]">({{ props.currentProject?.name }})</span>
+      </span>
+      <span v-else>
+        {{ t('system.project.createProject') }}
+      </span>
+    </template>
+    <div class="form">
+      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+        <a-form-item
+          field="name"
+          required
+          :label="t('system.project.name')"
+          :rules="[{ required: true, message: t('system.project.projectNameRequired') }]"
+        >
+          <a-input v-model="form.name" :placeholder="t('system.project.projectNamePlaceholder')" />
+        </a-form-item>
+        <a-form-item
+          required
+          field="organizationId"
+          :label="t('system.project.affiliatedOrg')"
+          :rules="[{ required: true, message: t('system.project.affiliatedOrgRequired') }]"
+        >
+          <a-select
+            v-model="form.organizationId"
+            :disabled="!isXpack"
+            allow-search
+            :options="affiliatedOrgOption"
+            :default-value="isXpack ? '' : 'default_organization'"
+            :placeholder="t('system.project.affiliatedOrgPlaceholder')"
+            :field-names="{ label: 'name', value: 'id' }"
+          >
+          </a-select>
+        </a-form-item>
+        <a-form-item field="userIds" :label="t('system.project.projectAdmin')">
+          <MsUserSelector v-model:value="form.userIds" placeholder="system.project.projectAdminPlaceholder" />
+        </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.organization.description')">
+          <a-checkbox-group v-model="form.moduleIds" :options="moduleOption">
+            <template #label="{ data }">
+              <span>{{ t(data.label) }}</span>
+            </template>
+          </a-checkbox-group>
+        </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" />
+          <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)]" />
+          </a-tooltip>
+        </div>
+        <div class="flex flex-row gap-[14px]">
+          <a-button type="secondary" :loading="loading" @click="handleCancel">
+            {{ t('common.cancel') }}
+          </a-button>
+          <a-button type="primary" :loading="loading" @click="handleBeforeOk">
+            {{ isEdit ? t('common.confirm') : t('common.create') }}
+          </a-button>
+        </div>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+  import { reactive, ref, watchEffect, computed } from 'vue';
+  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
+  import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
+  import { createOrUpdateProject, getSystemOrgOption } from '@/api/modules/setting/organizationAndProject';
+  import { Message } from '@arco-design/web-vue';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import { CreateOrUpdateSystemProjectParams, SystemOrgOption } from '@/models/setting/system/orgAndProject';
+  import useLicenseStore from '@/store/modules/setting/license';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    visible: boolean;
+    currentProject?: CreateOrUpdateSystemProjectParams;
+  }>();
+
+  const formRef = ref<FormInstance>();
+
+  const loading = ref(false);
+  const isEdit = computed(() => !!props.currentProject?.id);
+  const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
+  const licenseStore = useLicenseStore();
+  const moduleOption = [
+    { label: 'menu.workbench', value: 'workstation' },
+    { label: 'menu.testPlan', value: 'testPlan' },
+    { label: 'menu.bugManagement', value: 'bugManagement' },
+    { label: 'menu.featureTest', value: 'caseManagement' },
+    { label: 'menu.apiTest', value: 'apiTest' },
+    { label: 'menu.uiTest', value: 'uiTest' },
+    { label: 'menu.performanceTest', value: 'loadTest' },
+  ];
+
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+  }>();
+
+  const form = reactive<CreateOrUpdateSystemProjectParams>({
+    name: '',
+    userIds: [],
+    organizationId: '',
+    description: '',
+    enable: true,
+    moduleIds: [],
+  });
+
+  const currentVisible = ref(props.visible);
+
+  const isXpack = computed(() => {
+    return licenseStore.hasLicense();
+  });
+
+  watchEffect(() => {
+    currentVisible.value = props.visible;
+  });
+  const handleCancel = () => {
+    formRef.value?.resetFields();
+    emit('cancel');
+  };
+
+  const handleBeforeOk = async () => {
+    await formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return;
+      }
+      try {
+        loading.value = true;
+        await createOrUpdateProject({ id: props.currentProject?.id, ...form });
+        Message.success(
+          isEdit.value
+            ? t('system.organization.updateOrganizationSuccess')
+            : t('system.organization.createOrganizationSuccess')
+        );
+        handleCancel();
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      } finally {
+        loading.value = false;
+      }
+    });
+  };
+  const initAffiliatedOrgOption = async () => {
+    try {
+      const res = await getSystemOrgOption();
+      affiliatedOrgOption.value = res;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+  watchEffect(() => {
+    initAffiliatedOrgOption();
+    if (props.currentProject) {
+      form.id = props.currentProject.id;
+      form.name = props.currentProject.name;
+      form.description = props.currentProject.description;
+      form.enable = props.currentProject.enable;
+      form.userIds = props.currentProject.userIds;
+      form.organizationId = props.currentProject.organizationId;
+      form.moduleIds = props.currentProject.moduleIds;
+    }
+  });
+</script>
+@/api/modules/setting/organizationAndProject
diff --git a/frontend/src/views/setting/organization/project/components/addUserModal.vue b/frontend/src/views/setting/organization/project/components/addUserModal.vue
new file mode 100644
index 0000000000..e9d77e9370
--- /dev/null
+++ b/frontend/src/views/setting/organization/project/components/addUserModal.vue
@@ -0,0 +1,104 @@
+<template>
+  <a-modal
+    v-model:visible="currentVisible"
+    title-align="start"
+    class="ms-modal-form ms-modal-medium"
+    :ok-text="t('system.organization.addMember')"
+    unmount-on-close
+    @cancel="handleCancel"
+  >
+    <template #title> {{ t('system.organization.addMember') }} </template>
+    <div class="form">
+      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+        <a-form-item
+          field="name"
+          :label="t('system.organization.member')"
+          :rules="[{ required: true, message: t('system.organization.addMemberRequired') }]"
+        >
+          <MsUserSelector v-model:value="form.name" type="organization" :source-id="organizationId || projectId" />
+        </a-form-item>
+      </a-form>
+    </div>
+    <template #footer>
+      <a-button type="secondary" :loading="loading" @click="handleCancel">
+        {{ t('common.cancel') }}
+      </a-button>
+      <a-button type="primary" :loading="loading" :disabled="form.name.length === 0" @click="handleAddMember">
+        {{ t('common.add') }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+  import { reactive, ref, watchEffect, onUnmounted } from 'vue';
+  import { addUserToOrgOrProject } from '@/api/modules/setting/organizationAndProject';
+  import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
+  import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    visible: boolean;
+    organizationId?: string;
+    projectId?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+    (e: 'submit', value: string[]): void;
+  }>();
+
+  const currentVisible = ref(props.visible);
+  const loading = ref(false);
+
+  const form = reactive({
+    name: [],
+  });
+
+  const formRef = ref<FormInstance>();
+
+  watchEffect(() => {
+    currentVisible.value = props.visible;
+  });
+
+  const handleCancel = () => {
+    form.name = [];
+    emit('cancel');
+  };
+
+  const handleAddMember = () => {
+    formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        loading.value = false;
+      }
+      const { organizationId, projectId } = props;
+      try {
+        loading.value = true;
+        await addUserToOrgOrProject({ userIds: form.name, organizationId, projectId });
+        Message.success(t('system.organization.addSuccess'));
+        handleCancel();
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      } finally {
+        loading.value = false;
+      }
+    });
+  };
+
+  onUnmounted(() => {
+    form.name = [];
+    loading.value = false;
+  });
+</script>
+
+<style lang="less" scoped>
+  .option-name {
+    color: var(--color-text-1);
+  }
+  .option-email {
+    color: var(--color-text-4);
+  }
+</style>
+@/api/modules/setting/organizationAndProject
diff --git a/frontend/src/views/setting/organization/project/components/userDrawer.vue b/frontend/src/views/setting/organization/project/components/userDrawer.vue
new file mode 100644
index 0000000000..1f44b8502a
--- /dev/null
+++ b/frontend/src/views/setting/organization/project/components/userDrawer.vue
@@ -0,0 +1,164 @@
+<template>
+  <MsDrawer
+    :mask="false"
+    :width="680"
+    :visible="currentVisible"
+    unmount-on-close
+    :footer="false"
+    :title="t('system.organization.addMember')"
+    @cancel="handleCancel"
+  >
+    <div>
+      <div class="flex flex-row justify-between">
+        <a-button type="primary" @click="handleAddMember">
+          {{ t('system.organization.addMember') }}
+        </a-button>
+        <a-input-search
+          v-model:model-value="keyword"
+          :placeholder="t('system.user.searchUser')"
+          class="w-[230px]"
+          @search="searchUser"
+          @press-enter="searchUser"
+        ></a-input-search>
+      </div>
+      <ms-base-table class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
+        <template #name="{ record }">
+          <span>{{ record.name }}</span>
+          <span v-if="record.adminFlag" class="ml-[4px] text-[var(--color-text-4)]">{{
+            `(${t('common.admin')})`
+          }}</span>
+        </template>
+        <template #operation="{ record }">
+          <MsRemoveButton
+            :title="t('system.organization.removeName', { name: record.name })"
+            :sub-title-tip="t('system.organization.removeTip')"
+            @ok="handleRemove(record)"
+          />
+        </template>
+      </ms-base-table>
+    </div>
+  </MsDrawer>
+  <AddUserModal
+    :project-id="props.projectId"
+    :organization-id="props.organizationId"
+    :visible="userVisible"
+    @cancel="handleHideUserModal"
+  />
+</template>
+
+<script lang="ts" setup>
+  import {
+    postUserTableByOrgIdOrProjectId,
+    deleteUserFromOrgOrProject,
+  } from '@/api/modules/setting/organizationAndProject';
+  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import { useI18n } from '@/hooks/useI18n';
+  import { watch, ref } from 'vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import AddUserModal from './addUserModal.vue';
+  import { TableData, Message } from '@arco-design/web-vue';
+  import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
+
+  export interface projectDrawerProps {
+    visible: boolean;
+    organizationId?: string;
+    projectId?: string;
+  }
+  const { t } = useI18n();
+  const props = defineProps<projectDrawerProps>();
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+  }>();
+
+  const currentVisible = ref(props.visible);
+
+  const userVisible = ref(false);
+
+  const keyword = ref('');
+
+  const projectColumn: MsTableColumn = [
+    {
+      title: 'system.organization.userName',
+      slotName: 'name',
+    },
+    {
+      title: 'system.organization.email',
+      dataIndex: 'email',
+      width: 200,
+    },
+    {
+      title: 'system.organization.phone',
+      dataIndex: 'phone',
+    },
+    { title: 'system.organization.operation', slotName: 'operation' },
+  ];
+
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserTableByOrgIdOrProjectId, {
+    columns: projectColumn,
+    showSetting: false,
+    scroll: { y: 'auto', x: '600px' },
+    selectable: false,
+    size: 'small',
+    noDisable: false,
+  });
+
+  async function searchUser() {
+    setKeyword(keyword.value);
+    await loadList();
+  }
+
+  const handleCancel = () => {
+    emit('cancel');
+  };
+
+  const fetchData = async () => {
+    setLoadListParams({ organizationId: props.organizationId });
+    await loadList();
+  };
+
+  const handleAddMember = () => {
+    userVisible.value = true;
+  };
+
+  const handleHideUserModal = () => {
+    userVisible.value = false;
+  };
+
+  const handleRemove = async (record: TableData) => {
+    try {
+      if (props.organizationId) {
+        await deleteUserFromOrgOrProject(props.organizationId, record.id);
+      }
+      if (props.projectId) {
+        await deleteUserFromOrgOrProject(props.projectId, record.id, true);
+      }
+      Message.success(t('common.removeSuccess'));
+      fetchData();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+
+  watch(
+    () => props.organizationId,
+    () => {
+      fetchData();
+    }
+  );
+  watch(
+    () => props.projectId,
+    () => {
+      fetchData();
+    }
+  );
+  watch(
+    () => props.visible,
+    (visible) => {
+      currentVisible.value = visible;
+    }
+  );
+</script>
+@/api/modules/setting/organizationAndProject
diff --git a/frontend/src/views/setting/organization/project/locale/en-US.ts b/frontend/src/views/setting/organization/project/locale/en-US.ts
new file mode 100644
index 0000000000..cd71d924e9
--- /dev/null
+++ b/frontend/src/views/setting/organization/project/locale/en-US.ts
@@ -0,0 +1,74 @@
+export default {
+  'system.organization.create': 'Create',
+  'system.organization.cancel': 'Cancel',
+  'system.organization.add': 'Add',
+  'system.organization.delete': 'Delete',
+  'system.organization.edit': 'Edit',
+  'system.organization.save': 'Save',
+  'system.organization.end': 'End',
+  'system.organization.removeName': 'Confirm to remove {name} this user',
+  'system.organization.removeTip': 'After removal, the organization permission will be lost',
+  'system.organization.addMember': 'Add Member',
+  'system.organization.addMemberPlaceholder': 'Please select member',
+  'system.organization.addMemberRequired': 'Please select member',
+  'system.organization.searchPlaceholder': 'Please enter the organization name to query',
+  'system.organization.addOrganization': 'Add organization',
+  'system.organization.createOrganization': 'Create organization',
+  'system.organization.organizationName': 'Organization name',
+  'system.organization.organizationNamePlaceholder':
+    'Please enter the organization name, which cannot be duplicated with other organization names',
+  'system.organization.organizationNameRequired': 'Organization name cannot be empty',
+  'system.organization.organizationNameDuplicate': 'Already have {name} please change',
+  'system.organization.organizationAdmin': 'Organization administrator',
+  'system.organization.organizationAdminPlaceholder':
+    'The organization administrator defaults to the person who created the organization',
+  'system.organization.description': 'Description',
+  'system.organization.descriptionPlaceholder': 'Please describe the organization',
+  'system.organization.ID': 'ID',
+  'system.organization.name': 'Name',
+  'system.organization.member': 'Member',
+  'system.organization.project': 'Project',
+  'system.organization.status': 'Status',
+  'system.organization.creator': 'Creator',
+  'system.organization.createTime': 'Create Time',
+  'system.organization.operation': 'Operation',
+  'system.organization.organizationCount': 'Organization({count})',
+  'system.organization.projectCount': 'Project({count})',
+  'system.organization.projectName': 'Project({name})',
+  'system.project.name': 'Project name',
+  'system.organization.userName': 'Name',
+  'system.organization.email': 'Email',
+  'system.organization.phone': 'Phone',
+  'system.organization.addSuccess': 'Add success',
+  'system.organization.deleteName': 'Are you sure to delete {name}',
+  'system.organization.deleteTip':
+    'Delete the organization and delete the project data under that organization together. Please be cautious!',
+  'system.organization.revokeDeleteToolTip': 'The organization will be deleted automatically after 30 days',
+  'system.organization.createOrganizationSuccess': 'Create organization success',
+  'system.organization.enableTitle': 'Start organization',
+  'system.organization.endTitle': 'Close organization',
+  'system.organization.enableContent': 'The organization after opening is displayed in the organization switching list',
+  'system.organization.endContent':
+    'The organization after closing is not displayed in the organization switching list',
+  'system.organization.updateOrganization': 'Update organization',
+  'system.organization.updateOrganizationSuccess': 'Update organization success',
+  'system.organization.createProject': 'Create project',
+  'system.organization.subordinateOrg': 'Subordinate organization',
+  'system.project.revokeDeleteTitle': 'Confirm revoke {name} ?',
+  'system.project.enableTitle': 'Start project',
+  'system.project.endTitle': 'Close project',
+  'system.project.enableContent': 'The project after opening is displayed in the organization switching list',
+  'system.project.endContent': 'The project after closing is not displayed in the project switching list',
+  'system.project.projectNamePlaceholder':
+    'Please enter the project name, which cannot be duplicated with other project names',
+  'system.project.updateProject': 'Update project',
+  'system.project.createProject': 'Create project',
+  'system.project.affiliatedOrg': 'Affiliated organization',
+  'system.project.affiliatedOrgPlaceholder': 'Please select affiliated organization',
+  'system.project.projectAdmin': 'Project administrator',
+  'system.project.projectAdminPlaceholder': 'The project administrator defaults to the person who created the project',
+  'system.project.moduleSetting': 'Module setting',
+  'system.project.projectNameRequired': 'Project name cannot be empty',
+  'system.project.createTip': 'After the project is enabled, it will be displayed in the project switching list',
+  'system.project.affiliatedOrgRequired': 'Affiliated organization cannot be empty',
+};
diff --git a/frontend/src/views/setting/organization/project/locale/zh-CN.ts b/frontend/src/views/setting/organization/project/locale/zh-CN.ts
new file mode 100644
index 0000000000..36149933aa
--- /dev/null
+++ b/frontend/src/views/setting/organization/project/locale/zh-CN.ts
@@ -0,0 +1,69 @@
+export default {
+  'system.organization.create': '创建',
+  'system.organization.cancel': '取消',
+  'system.organization.add': '添加',
+  'system.organization.delete': '删除',
+  'system.organization.edit': '编辑',
+  'system.organization.save': '保存',
+  'system.organization.end': '结束',
+  'system.organization.removeName': '确认移除 {name} 这个用户吗',
+  'system.organization.removeTip': '移除后，将失去组织权限',
+  'system.organization.addMember': '添加成员',
+  'system.organization.addMemberPlaceholder': '请选择成员',
+  'system.organization.addMemberRequired': '请选择成员',
+  'system.organization.searchPlaceholder': '请输入组织名称回车查询',
+  'system.organization.addOrganization': '添加组织',
+  'system.organization.createOrganization': '创建组织',
+  'system.organization.organizationName': '组织名称',
+  'system.organization.organizationNamePlaceholder': '请输入组织名称,不可与其他组织名称重复',
+  'system.organization.organizationNameRequired': '组织名称不能为空',
+  'system.organization.organizationNameDuplicate': '已有 {name} 请更改',
+  'system.organization.organizationAdmin': '组织管理员',
+  'system.organization.organizationAdminPlaceholder': '默认选择创建组织人为组织管理员',
+  'system.organization.description': '描述',
+  'system.organization.descriptionPlaceholder': '请对组织进行描述',
+  'system.organization.ID': 'ID',
+  'system.organization.name': '名称',
+  'system.organization.member': '成员',
+  'system.organization.project': '项目',
+  'system.organization.status': '状态',
+  'system.organization.creator': '创建人',
+  'system.organization.createTime': '创建时间',
+  'system.organization.operation': '操作',
+  'system.organization.organizationCount': '组织({count})',
+  'system.organization.projectCount': '项目({count})',
+  'system.organization.projectName': '项目({name})',
+  'system.project.name': '项目名称',
+  'system.organization.userName': '姓名',
+  'system.organization.email': '邮箱',
+  'system.organization.phone': '手机',
+  'system.organization.addSuccess': '添加成功',
+  'system.organization.deleteName': '确认删除 {name} 这个组织吗',
+  'system.organization.deleteTip': '删除组织同时将该组织下的项目数据一起删除，请谨慎操作！',
+  'system.organization.revokeDeleteToolTip': '该组织将与 30 天后自动删除',
+  'system.organization.createOrganizationSuccess': '创建组织成功',
+  'system.organization.enableTitle': '开启组织',
+  'system.organization.endTitle': '关闭组织',
+  'system.organization.enableContent': '开启后的组织展示在组织切换列表',
+  'system.organization.endContent': '关闭后的组织不展示在组织切换列表',
+  'system.organization.updateOrganization': '更新组织',
+  'system.organization.updateOrganizationSuccess': '更新组织成功',
+  'system.organization.createProject': '创建项目',
+  'system.organization.subordinateOrg': '所属组织',
+  'system.project.revokeDeleteTitle': '确认恢复 {name} 这个项目吗？',
+  'system.project.enableTitle': '开启项目',
+  'system.project.endTitle': '关闭项目',
+  'system.project.enableContent': '开启后的项目展示在项目切换列表',
+  'system.project.endContent': '关闭后的项目不展示在项目切换列表',
+  'system.project.projectNamePlaceholder': '请输入项目名称,不可与其他项目名称重复',
+  'system.project.updateProject': '更新项目',
+  'system.project.createProject': '创建项目',
+  'system.project.affiliatedOrg': '所属组织',
+  'system.project.affiliatedOrgPlaceholder': '请选择所属组织',
+  'system.project.projectAdmin': '项目管理员',
+  'system.project.projectAdminPlaceholder': '默认选择创建项目人为项目管理员',
+  'system.project.moduleSetting': '模块设置',
+  'system.project.projectNameRequired': '项目名称不能为空',
+  'system.project.createTip': '项目启用后，将展示在项目切换列表',
+  'system.project.affiliatedOrgRequired': '所属组织不能为空',
+};
diff --git a/frontend/src/views/setting/organization/project/orgProject.vue b/frontend/src/views/setting/organization/project/orgProject.vue
new file mode 100644
index 0000000000..64748526e6
--- /dev/null
+++ b/frontend/src/views/setting/organization/project/orgProject.vue
@@ -0,0 +1,290 @@
+<template>
+  <MsCard simple>
+    <div class="mb-4 flex items-center justify-between">
+      <a-button type="primary" @click="showAddProject">{{ t('system.organization.createProject') }}</a-button>
+      <a-input-search
+        v-model="keyword"
+        :placeholder="t('system.user.searchUser')"
+        class="w-[240px]"
+        @press-enter="fetchData"
+        @search="fetchData"
+      ></a-input-search>
+    </div>
+    <MsBaseTable v-bind="propsRes" v-on="propsEvent">
+      <template #name="{ record }">
+        <span>{{ record.name }}</span>
+        <a-tooltip background-color="#FFFFFF">
+          <template #content>
+            <span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>
+            <MsButton class="ml-[8px]" @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
+          </template>
+          <MsIcon v-if="record.deleted" type="icon-icon_alarm_clock" class="ml-[4px] text-[rgb(var(--danger-6))]" />
+        </a-tooltip>
+      </template>
+      <template #creator="{ record }">
+        <span>{{ record.createUser }}</span>
+        <span v-if="record.projectCreateUserIsAdmin" class="ml-[8px] text-[var(--color-text-4)]">{{
+          `(${t('common.admin')})`
+        }}</span>
+      </template>
+      <template #memberCount="{ record }">
+        <span class="primary-color" @click="showUserDrawer(record)">{{ record.memberCount }}</span>
+      </template>
+      <template #operation="{ record }">
+        <template v-if="record.deleted">
+          <MsButton @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
+        </template>
+        <template v-else-if="!record.enable">
+          <MsButton @click="handleEnableOrDisableProject(record)">{{ t('common.enable') }}</MsButton>
+          <MsButton @click="handleDelete(record)">{{ t('common.delete') }}</MsButton>
+        </template>
+        <template v-else>
+          <MsButton @click="showAddProjectModal(record)">{{ t('common.edit') }}</MsButton>
+          <MsButton @click="showAddUserModal(record)">{{ t('system.organization.addMember') }}</MsButton>
+          <MsButton @click="handleEnableOrDisableProject(record, false)">{{ t('common.end') }}</MsButton>
+          <MsTableMoreAction :list="tableActions" @select="handleMoreAction($event, record)"></MsTableMoreAction>
+        </template>
+      </template>
+    </MsBaseTable>
+    <AddProjectModal
+      :current-project="currentUpdateProject"
+      :visible="addProjectVisible"
+      @cancel="handleAddProjectModalCancel"
+    />
+    <AddUserModal :project-id="currentProjectId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
+    <UserDrawer :project-id="currentProjectId" v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
+  </MsCard>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import { useTableStore } from '@/store';
+  import { ref, reactive } from 'vue';
+  import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+  import {
+    postProjectTable,
+    deleteProject,
+    enableOrDisableProject,
+    revokeDeleteProject,
+  } from '@/api/modules/setting/organizationAndProject';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import UserDrawer from './components/userDrawer.vue';
+  import AddUserModal from './components/addUserModal.vue';
+  import useModal from '@/hooks/useModal';
+  import { CreateOrUpdateSystemProjectParams } from '@/models/setting/system/orgAndProject';
+  import AddProjectModal from './components/addProjectModal.vue';
+  import { UserItem } from '@/components/business/ms-user-selector/index.vue';
+  import MsCard from '@/components/pure/ms-card/index.vue';
+
+  const { t } = useI18n();
+  const tableStore = useTableStore();
+  const userVisible = ref(false);
+  const addProjectVisible = ref(false);
+  const currentProjectId = ref('');
+  const currentUpdateProject = ref<CreateOrUpdateSystemProjectParams>();
+  const { openDeleteModal, openModal } = useModal();
+
+  const keyword = ref('');
+
+  const organizationColumns: MsTableColumn = [
+    {
+      title: 'system.organization.ID',
+      dataIndex: 'num',
+      width: 100,
+    },
+    {
+      title: 'system.organization.name',
+      slotName: 'name',
+      editable: true,
+    },
+    {
+      title: 'system.organization.member',
+      slotName: 'memberCount',
+    },
+    {
+      title: 'system.organization.status',
+      dataIndex: 'enable',
+    },
+    {
+      title: 'system.organization.description',
+      dataIndex: 'description',
+      ellipsis: true,
+      tooltip: true,
+    },
+    {
+      title: 'system.organization.subordinateOrg',
+      dataIndex: 'organizationName',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: 'system.organization.creator',
+      slotName: 'creator',
+      dataIndex: 'createUser',
+    },
+    {
+      title: 'system.organization.createTime',
+      dataIndex: 'createTime',
+      width: 230,
+    },
+    {
+      title: 'system.organization.operation',
+      slotName: 'operation',
+      fixed: 'right',
+      width: 208,
+    },
+  ];
+
+  tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
+
+  const { propsRes, propsEvent, loadList, setKeyword } = useTable(postProjectTable, {
+    tableKey: TableKeyEnum.SYSTEM_PROJECT,
+    scroll: { y: 'auto', x: '1300px' },
+    selectable: false,
+    noDisable: false,
+    size: 'default',
+    showSetting: true,
+  });
+
+  const fetchData = async () => {
+    setKeyword(keyword.value);
+    await loadList();
+  };
+
+  const currentUserDrawer = reactive({
+    visible: false,
+    organizationId: '',
+  });
+
+  const tableActions: ActionsItem[] = [
+    {
+      label: 'system.user.delete',
+      eventTag: 'delete',
+      danger: true,
+    },
+  ];
+
+  const showAddProject = () => {
+    addProjectVisible.value = true;
+  };
+
+  const handleDelete = (record: TableData) => {
+    openDeleteModal({
+      title: t('system.organization.deleteName', { name: record.name }),
+      content: t('system.organization.deleteTip'),
+      onBeforeOk: async () => {
+        try {
+          await deleteProject(record.id);
+          Message.success(t('common.deleteSuccess'));
+          fetchData();
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        }
+      },
+    });
+  };
+
+  const handleMoreAction = (tag: ActionsItem, record: TableData) => {
+    if (tag.eventTag === 'delete') {
+      handleDelete(record);
+    }
+  };
+
+  const handleEnableOrDisableProject = async (record: any, isEnable = true) => {
+    const title = isEnable ? t('system.project.enableTitle') : t('system.project.endTitle');
+    const content = isEnable ? t('system.project.enableContent') : t('system.project.endContent');
+    const okText = isEnable ? t('common.confirmEnable') : t('common.confirmClose');
+    openModal({
+      type: 'error',
+      cancelText: t('common.cancel'),
+      title,
+      content,
+      okText,
+      onBeforeOk: async () => {
+        try {
+          await enableOrDisableProject(record.id, isEnable);
+          Message.success(isEnable ? t('common.enableSuccess') : t('common.closeSuccess'));
+          fetchData();
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        }
+      },
+      hideCancel: false,
+    });
+  };
+
+  const showAddProjectModal = (record: any) => {
+    const { id, name, description, enable, adminList, organizationId, moduleIds } = record;
+    addProjectVisible.value = true;
+    currentUpdateProject.value = {
+      id,
+      name,
+      description,
+      enable,
+      userIds: adminList.map((item: UserItem) => item.id),
+      organizationId,
+      moduleIds,
+    };
+  };
+
+  const showAddUserModal = (record: any) => {
+    currentProjectId.value = record.id;
+    userVisible.value = true;
+  };
+
+  const showUserDrawer = (record: TableData) => {
+    currentUserDrawer.visible = true;
+    currentUserDrawer.organizationId = record.id;
+  };
+
+  const handleUserDrawerCancel = () => {
+    currentUserDrawer.visible = false;
+    fetchData();
+  };
+
+  const handleAddUserModalCancel = () => {
+    userVisible.value = false;
+    fetchData();
+  };
+  const handleAddProjectModalCancel = () => {
+    addProjectVisible.value = false;
+    fetchData();
+  };
+
+  const handleRevokeDelete = async (record: TableData) => {
+    openModal({
+      type: 'error',
+      cancelText: t('common.cancel'),
+      title: t('system.project.revokeDeleteTitle', { name: record.name }),
+      content: t('system.organization.enableContent'),
+      okText: t('common.revokeDelete'),
+      onBeforeOk: async () => {
+        try {
+          await revokeDeleteProject(record.id);
+          Message.success(t('common.revokeDeleteSuccess'));
+          fetchData();
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        }
+      },
+      hideCancel: false,
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .primary-color {
+    color: rgb(var(--primary-5));
+    cursor: pointer;
+  }
+</style>
diff --git a/frontend/src/views/setting/organization/usergroup/components/addOrUpdateUserGroupPopup.vue b/frontend/src/views/setting/organization/usergroup/components/addOrUpdateUserGroupPopup.vue
new file mode 100644
index 0000000000..d4dd8f0a52
--- /dev/null
+++ b/frontend/src/views/setting/organization/usergroup/components/addOrUpdateUserGroupPopup.vue
@@ -0,0 +1,121 @@
+<template>
+  <a-popconfirm
+    :popup-visible="currentVisible"
+    :ok-text="props.id ? t('common.rename') : t('common.create')"
+    unmount-on-close
+    :on-before-ok="handleBeforeOk"
+    :ok-loading="loading"
+    :cancel-button-props="{ disabled: loading }"
+    position="bl"
+    class="w-[276px]"
+    @cancel="handleCancel"
+  >
+    <template #icon>{{ null }}</template>
+    <template #content>
+      <div class="form">
+        <a-form
+          ref="formRef"
+          :model="form"
+          size="large"
+          layout="vertical"
+          :label-col-props="{ span: 0 }"
+          :wrapper-col-props="{ span: 24 }"
+        >
+          <a-form-item>
+            <div class="text-[var(color-text-1)]">{{
+              props.id ? t('system.userGroup.rename') : t('system.userGroup.createUserGroup')
+            }}</div>
+          </a-form-item>
+          <a-form-item field="name" :rules="[{ validator: validateName }]">
+            <a-input
+              v-model="form.name"
+              class="w-[228px]"
+              :placeholder="t('system.userGroup.pleaseInputUserGroupName')"
+            />
+          </a-form-item>
+        </a-form>
+      </div>
+    </template>
+    <slot></slot>
+  </a-popconfirm>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+  import { reactive, ref, computed, watchEffect } from 'vue';
+  import { UserGroupItem } from '@/models/setting/usergroup';
+  import { Message } from '@arco-design/web-vue';
+  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
+  import { updateOrAddOrgUserGroup } from '@/api/modules/setting/usergroup';
+  import { useAppStore } from '@/store';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    id?: string;
+    list: UserGroupItem[];
+    visible: boolean;
+    defaultName?: string;
+  }>();
+  const emit = defineEmits<{
+    (e: 'cancel', value: boolean): void;
+  }>();
+
+  const formRef = ref<FormInstance>();
+  const currentVisible = ref(props.visible);
+
+  const form = reactive({
+    name: '',
+  });
+
+  const appStore = useAppStore();
+  const currentOrgId = computed(() => appStore.currentOrgId);
+  const loading = ref(false);
+
+  const validateName = (value: string | undefined, callback: (error?: string) => void) => {
+    if (value === undefined || value === '') {
+      callback(t('system.userGroup.userGroupNameIsNotNone'));
+    } else {
+      if (value === props.defaultName) {
+        callback();
+      } else {
+        const isExist = props.list.some((item) => item.name === value);
+        if (isExist) {
+          callback(t('system.userGroup.userGroupNameIsExist', { name: value }));
+        }
+      }
+      callback();
+    }
+  };
+
+  const handleCancel = () => {
+    form.name = '';
+    emit('cancel', false);
+  };
+
+  const handleBeforeOk = () => {
+    formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return false;
+      }
+      try {
+        loading.value = true;
+        const res = await updateOrAddOrgUserGroup({ id: props.id, name: form.name, scopeId: currentOrgId.value });
+        if (res) {
+          Message.success(
+            props.id ? t('system.userGroup.updateUserGroupSuccess') : t('system.userGroup.addUserGroupSuccess')
+          );
+          loading.value = false;
+          handleCancel();
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      } finally {
+        loading.value = false;
+      }
+    });
+  };
+  watchEffect(() => {
+    currentVisible.value = props.visible;
+  });
+</script>
diff --git a/frontend/src/views/setting/organization/usergroup/components/addUserModal.vue b/frontend/src/views/setting/organization/usergroup/components/addUserModal.vue
new file mode 100644
index 0000000000..f0e8b8907f
--- /dev/null
+++ b/frontend/src/views/setting/organization/usergroup/components/addUserModal.vue
@@ -0,0 +1,101 @@
+<template>
+  <a-modal
+    v-model:visible="currentVisible"
+    class="ms-modal-form ms-modal-medium"
+    width="680px"
+    text-align="start"
+    :ok-text="t('system.userGroup.add')"
+    unmount-on-close
+    @cancel="handleCancel"
+  >
+    <template #title> {{ t('system.userGroup.addUser') }} </template>
+    <div class="form">
+      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+        <a-form-item
+          field="name"
+          :label="t('system.userGroup.user')"
+          :rules="[{ required: true, message: t('system.userGroup.pleaseSelectUser') }]"
+        >
+          <MsUserSelector v-model:value="form.name" />
+        </a-form-item>
+      </a-form>
+    </div>
+    <template #footer>
+      <a-button type="secondary" :loading="loading" @click="handleCancel">
+        {{ t('common.cancel') }}
+      </a-button>
+      <a-button type="primary" :loading="loading" :disabled="form.name.length === 0" @click="handleBeforeOk">
+        {{ t('common.add') }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+  import { reactive, ref, watchEffect } from 'vue';
+  import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
+  import { addUserToUserGroup } from '@/api/modules/setting/usergroup';
+  import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
+  import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    visible: boolean;
+  }>();
+
+  const store = useUserGroupStore();
+
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+    (e: 'submit', value: string[]): void;
+  }>();
+
+  const currentVisible = ref(props.visible);
+  const loading = ref(false);
+
+  const form = reactive({
+    name: [],
+  });
+
+  const labelCache = new Map();
+
+  const formRef = ref<FormInstance>();
+
+  watchEffect(() => {
+    currentVisible.value = props.visible;
+  });
+
+  const handleCancel = () => {
+    labelCache.clear();
+    form.name = [];
+    emit('cancel');
+  };
+
+  const handleBeforeOk = () => {
+    formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return;
+      }
+      try {
+        loading.value = true;
+        await addUserToUserGroup({ roleId: store.currentId, userIds: form.name });
+        handleCancel();
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e);
+      } finally {
+        loading.value = false;
+      }
+    });
+  };
+</script>
+
+<style lang="less" scoped>
+  .option-name {
+    color: var(--color-text-1);
+  }
+  .option-email {
+    color: var(--color-text-4);
+  }
+</style>
diff --git a/frontend/src/views/setting/organization/usergroup/components/authTable.vue b/frontend/src/views/setting/organization/usergroup/components/authTable.vue
new file mode 100644
index 0000000000..01197c38bb
--- /dev/null
+++ b/frontend/src/views/setting/organization/usergroup/components/authTable.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="usergroup-auth-table">
+    <a-table
+      :span-method="dataSpanMethod"
+      :scroll="{ y: '500px', x: '800px' }"
+      :data="tableData"
+      :loading="loading"
+      :bordered="{ wrapper: true, cell: true }"
+      size="small"
+      :pagination="false"
+    >
+      <template #columns>
+        <a-table-column :width="100" :title="t('system.userGroup.function')" data-index="ability" />
+        <a-table-column :width="150" :title="t('system.userGroup.operationObject')" data-index="operationObject" />
+        <a-table-column :title="t('system.userGroup.auth')">
+          <template #cell="{ record, rowIndex }">
+            <a-checkbox-group v-model="record.perChecked" @change="(v) => handleAuthChange(v, rowIndex)">
+              <a-checkbox
+                v-for="item in record.permissions"
+                :key="item.id"
+                :disabled="item.license || currentInternal"
+                :value="item.id"
+                >{{ t(item.name) }}</a-checkbox
+              >
+            </a-checkbox-group>
+          </template>
+        </a-table-column>
+        <a-table-column :width="50" fixed="right" align="center" :bordered="false">
+          <template #title>
+            <a-checkbox
+              v-if="tableData && tableData?.length > 0"
+              :model-value="allChecked"
+              :indeterminate="allIndeterminate"
+              :disabled="currentInternal"
+              @change="handleAllChangeByCheckbox"
+            ></a-checkbox>
+          </template>
+          <template #cell="{ record, rowIndex }">
+            <a-checkbox
+              :model-value="record.enable"
+              :indeterminate="record.indeterminate"
+              :disabled="currentInternal"
+              @change="(value) => handleActionChangeAll(value, rowIndex)"
+            />
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from '@/hooks/useI18n';
+  import { RenderFunction, VNodeChild, ref, watchEffect, computed } from 'vue';
+  import { Message, type TableColumnData, type TableData } from '@arco-design/web-vue';
+  import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
+  import { getGlobalUSetting, getOrgUSetting, saveOrgUSetting } from '@/api/modules/setting/usergroup';
+  import { UserGroupAuthSetting, AuthTableItem, type AuthScopeType, SavePermissions } from '@/models/setting/usergroup';
+
+  export declare type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
+
+  export interface TableOperationColumn {
+    name: OperationName | string;
+    title?: string | RenderFunction;
+    width?: number;
+    fixed?: boolean;
+    render?: (record: TableData) => VNodeChild;
+    isLastLeftFixed?: boolean;
+  }
+
+  const loading = ref(false);
+  const store = useUserGroupStore();
+
+  const systemSpan = ref(1);
+  const projectSpan = ref(1);
+  const organizationSpan = ref(1);
+  // 表格的总全选
+  const allChecked = ref(false);
+  const allIndeterminate = ref(false);
+
+  const tableData = ref<AuthTableItem[]>();
+  // 是否可以保存
+  const canSave = ref(false);
+  // 内部用户不可编辑
+  const currentInternal = computed(() => {
+    return store.userGroupInfo.currentInternal;
+  });
+
+  const dataSpanMethod = (data: {
+    record: TableData;
+    column: TableColumnData | TableOperationColumn;
+    rowIndex: number;
+    columnIndex: number;
+  }) => {
+    const { record, column } = data;
+    if ((column as TableColumnData).dataIndex === 'ability') {
+      if (record.isSystem) {
+        return {
+          rowspan: systemSpan.value,
+        };
+      }
+      if (record.isOrganization) {
+        return {
+          rowspan: organizationSpan.value,
+        };
+      }
+      if (record.isProject) {
+        return {
+          rowspan: projectSpan.value,
+        };
+      }
+    }
+  };
+
+  const { t } = useI18n();
+
+  /**
+   * 生成数据
+   * @param type
+   * @param idx
+   */
+  const makeData = (item: UserGroupAuthSetting, type: AuthScopeType) => {
+    const result: AuthTableItem[] = [];
+    item.children?.forEach((child, index) => {
+      const perChecked =
+        child?.permissions?.reduce((acc: string[], cur) => {
+          if (cur.enable) {
+            acc.push(cur.id);
+          }
+          return acc;
+        }, []) || [];
+      result.push({
+        id: child?.id,
+        license: child?.license,
+        enable: child?.enable,
+        permissions: child?.permissions,
+        indeterminate: perChecked?.length > 0,
+        perChecked,
+        ability: index === 0 ? t(`system.userGroup.${type}`) : undefined,
+        operationObject: t(child.name),
+        isSystem: index === 0 && type === 'SYSTEM',
+        isOrganization: index === 0 && type === 'ORGANIZATION',
+        isProject: index === 0 && type === 'PROJECT',
+      });
+    });
+    return result;
+  };
+
+  const transformData = (data: UserGroupAuthSetting[]) => {
+    const result: AuthTableItem[] = [];
+    data.forEach((item) => {
+      if (item.type === 'SYSTEM') {
+        systemSpan.value = item.children?.length || 0;
+      }
+      if (item.type === 'PROJECT') {
+        projectSpan.value = item.children?.length || 0;
+      }
+      if (item.type === 'ORGANIZATION') {
+        organizationSpan.value = item.children?.length || 0;
+      }
+      result.push(...makeData(item, item.id));
+    });
+    return result;
+  };
+
+  const initData = async (id: string, internal: boolean) => {
+    try {
+      let tmpArr = [];
+      let res: UserGroupAuthSetting[] = [];
+      loading.value = true;
+      if (internal) {
+        res = await getGlobalUSetting(id);
+      } else {
+        res = await getOrgUSetting(id);
+      }
+      tmpArr = transformData(res);
+      tableData.value = tmpArr;
+    } catch (error) {
+      tableData.value = [];
+    } finally {
+      loading.value = false;
+    }
+  };
+  // 表格总全选change事件
+  const handleAllChangeByCheckbox = () => {
+    if (!tableData.value) return;
+    allChecked.value = !allChecked.value;
+    allIndeterminate.value = false;
+    const tmpArr = tableData.value;
+    tmpArr.forEach((item) => {
+      item.enable = allChecked.value;
+      item.indeterminate = false;
+      item.perChecked = allChecked.value ? item.permissions?.map((ele) => ele.id) : [];
+    });
+    if (!canSave.value) canSave.value = true;
+  };
+
+  // 表格总全选联动触发事件
+  const handleAllChange = () => {
+    if (!tableData.value) return;
+    const tmpArr = tableData.value;
+    const { length: allLength } = tmpArr;
+    const { length } = tmpArr.filter((item) => item.enable);
+    if (length === allLength) {
+      allChecked.value = true;
+      allIndeterminate.value = false;
+    } else if (length === 0) {
+      allChecked.value = false;
+      allIndeterminate.value = false;
+    } else {
+      allChecked.value = false;
+      allIndeterminate.value = true;
+    }
+    if (!canSave.value) canSave.value = true;
+  };
+
+  // 表格最后一列的复选框change事件
+  const handleActionChangeAll = (value: boolean | (string | number | boolean)[], rowIndex: number) => {
+    if (!tableData.value) return;
+    const tmpArr = tableData.value;
+    tmpArr[rowIndex].indeterminate = false;
+    if (value) {
+      tmpArr[rowIndex].enable = true;
+      tmpArr[rowIndex].perChecked = tmpArr[rowIndex].permissions?.map((item) => item.id);
+    } else {
+      tmpArr[rowIndex].enable = false;
+      tmpArr[rowIndex].perChecked = [];
+    }
+    tableData.value = [...tmpArr];
+    handleAllChange();
+    if (!canSave.value) canSave.value = true;
+  };
+
+  // 表格第三列的复选框change事件
+  const handleAuthChange = (values: (string | number | boolean)[], rowIndex: number) => {
+    if (!tableData.value) return;
+    const tmpArr = tableData.value;
+    const length = tmpArr[rowIndex].permissions?.length || 0;
+    if (values.length === length) {
+      tmpArr[rowIndex].enable = true;
+      tmpArr[rowIndex].indeterminate = false;
+      handleAllChange();
+    } else if (values.length === 0) {
+      tmpArr[rowIndex].enable = false;
+      tmpArr[rowIndex].indeterminate = false;
+      handleAllChange();
+    } else {
+      tmpArr[rowIndex].enable = false;
+      tmpArr[rowIndex].indeterminate = true;
+    }
+    if (!canSave.value) canSave.value = true;
+  };
+
+  // 保存
+  const handleSave = async () => {
+    if (!tableData.value) return;
+    const permissions: SavePermissions[] = [];
+
+    const tmpArr = tableData.value;
+    tmpArr.forEach((item) => {
+      item.permissions?.forEach((ele) => {
+        ele.enable = item.perChecked?.includes(ele.id) || false;
+        permissions.push({
+          id: ele.id,
+          enable: ele.enable,
+        });
+      });
+    });
+    try {
+      await saveOrgUSetting({
+        userRoleId: store.currentId,
+        permissions,
+      });
+      Message.success(t('common.saveSuccess'));
+      initData(store.currentId, store.currentInternal);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
+
+  // 恢复默认值
+  const handleReset = () => {
+    if (store.currentId) {
+      initData(store.currentId, store.currentInternal);
+    }
+  };
+
+  watchEffect(() => {
+    if (store.currentId) {
+      initData(store.currentId, store.currentInternal);
+    }
+  });
+  defineExpose({
+    handleReset,
+    handleSave,
+    canSave,
+  });
+</script>
+
+<style scoped lang="less">
+  .usergroup-auth-table {
+    position: relative;
+    min-height: calc(100vh - 230px);
+    :deep(.arco-table-container) {
+      border-top: 1px solid var(--color-text-n8) !important;
+      border-right: 1px solid var(--color-text-n8) !important;
+      border-left: 1px solid var(--color-text-n8) !important;
+    }
+    .action {
+      position: absolute;
+      right: 24px;
+      bottom: 0;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: calc(100% - 24px);
+    }
+  }
+</style>
+@/store/modules/setting/system/usergroup
diff --git a/frontend/src/views/setting/organization/usergroup/components/index.vue b/frontend/src/views/setting/organization/usergroup/components/index.vue
new file mode 100644
index 0000000000..16d79ce069
--- /dev/null
+++ b/frontend/src/views/setting/organization/usergroup/components/index.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="user-group-left">
+    <a-input-search
+      class="w-[252px]"
+      :placeholder="t('system.userGroup.searchHolder')"
+      @press-enter="enterData"
+      @search="searchData"
+    />
+    <div class="mt-2 flex flex-col">
+      <div class="flex h-[38px] items-center px-[8px] leading-[24px]">
+        <div class="second-color"> {{ t('system.userGroup.global') }}</div>
+      </div>
+      <div>
+        <div
+          v-for="element in globalUserGroupList"
+          :key="element.id"
+          :class="{
+            'flex': true,
+            'h-[38px]': true,
+            'items-center': true,
+            'px-[8px]': true,
+            'is-active': element.id === currentId,
+          }"
+          @click="handleListItemClick(element)"
+        >
+          <div class="flex grow flex-row">
+            <div class="usergroup-title leading-[24px]">
+              <span class="n1">{{ element.name }}</span>
+              <span v-if="element.type" class="n4">（{{ t(`system.userGroup.${element.type}`) }}）</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <a-divider class="mt-2" />
+    <div class="mt-2 flex flex-col">
+      <AddOrUpdateUserGroupPopup
+        :visible="addUserGroupVisible"
+        :list="customUserGroupList"
+        @cancel="handleAddUserGroupCancel"
+      >
+        <div class="flex h-[38px] items-center justify-between px-[8px] leading-[24px]">
+          <div class="second-color"> {{ t('system.userGroup.custom') }}</div>
+          <div class="primary-color"><icon-plus-circle-fill style="font-size: 20px" @click="addUserGroup" /></div>
+        </div>
+      </AddOrUpdateUserGroupPopup>
+      <div>
+        <div
+          v-for="element in customUserGroupList"
+          :key="element.id"
+          class="flex h-[38px] items-center px-[8px]"
+          :class="{ 'is-active': element.id === currentId }"
+          @click="handleListItemClick(element)"
+        >
+          <AddOrUpdateUserGroupPopup
+            :id="element.id"
+            :visible="popVisible[element.id]"
+            :default-name="popDefaultName"
+            :list="customUserGroupList"
+            @cancel="() => handlePopConfirmCancel(element.id)"
+          >
+            <div class="draglist-item flex grow flex-row justify-between">
+              <div class="usergroup-title leading-[24px]">
+                <span class="n1">{{ element.name }}</span>
+                <span v-if="element.type" class="n4">（{{ t(`system.userGroup.${element.type}`) }}）</span>
+              </div>
+              <div v-if="element.id === currentId && !element.internal">
+                <MsTableMoreAction :list="customAction" @select="(value) => handleMoreAction(value, element.id)" />
+              </div>
+            </div>
+          </AddOrUpdateUserGroupPopup>
+        </div>
+      </div>
+    </div>
+  </div>
+  <AddUserModal :visible="addUserVisible" @cancel="addUserVisible = false" />
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, computed } from 'vue';
+  import { useI18n } from '@/hooks/useI18n';
+  import { CustomMoreActionItem, PopVisibleItem, RenameType, UserGroupItem } from '@/models/setting/usergroup';
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+  import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+  import AddUserModal from './addUserModal.vue';
+  import AddOrUpdateUserGroupPopup from './addOrUpdateUserGroupPopup.vue';
+  import useModal from '@/hooks/useModal';
+  import { Message } from '@arco-design/web-vue';
+  import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
+  import { useAppStore } from '@/store';
+  import { getOrgUserGroupList, updateOrAddOrgUserGroup, deleteOrgUserGroup } from '@/api/modules/setting/usergroup';
+  import { characterLimit } from '@/utils';
+
+  const { t } = useI18n();
+
+  const store = useUserGroupStore();
+  const appStore = useAppStore();
+  const { openModal } = useModal();
+  // 请求loading
+  const currentId = ref('');
+  const addUserVisible = ref(false);
+  const addUserGroupVisible = ref(false);
+  // 修改用户组名字，权限范围
+  const popVisible = ref<PopVisibleItem>({});
+  // 用户组和权限范围的状态
+  const popType = ref<RenameType>('rename');
+  const popDefaultName = ref('');
+  // 用户列表
+  const userGroupList = ref<UserGroupItem[]>([]);
+  const currentOrgId = computed(() => appStore.currentOrgId);
+
+  const globalUserGroupList = computed(() => {
+    return userGroupList.value.filter((ele) => ele.internal);
+  });
+  const customUserGroupList = computed(() => {
+    return userGroupList.value.filter((ele) => !ele.internal);
+  });
+
+  const customAction: ActionsItem[] = [
+    {
+      label: 'system.userGroup.rename',
+      danger: false,
+      eventTag: 'rename',
+    },
+    {
+      isDivider: true,
+    },
+    {
+      label: 'system.userGroup.delete',
+      danger: true,
+      eventTag: 'delete',
+    },
+  ];
+
+  // 点击用户组列表
+  const handleListItemClick = (element: UserGroupItem) => {
+    const { id, name, type, internal } = element;
+    currentId.value = id;
+    store.setInfo({
+      currentName: name,
+      currentTitle: type,
+      currentId: id,
+      currentType: type,
+      currentInternal: internal,
+    });
+  };
+
+  // 用户组数据初始化
+  const initData = async () => {
+    try {
+      const res = await getOrgUserGroupList(currentOrgId.value);
+      if (res.length > 0) {
+        userGroupList.value = res;
+        handleListItemClick(res[0]);
+        // 弹窗赋值
+        const tmpObj: PopVisibleItem = {};
+        res.forEach((element) => {
+          tmpObj[element.id] = false;
+        });
+        popVisible.value = tmpObj;
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  };
+  // 新增用户组
+  const addUserGroup = () => {
+    addUserGroupVisible.value = true;
+  };
+  // 关闭创建用户组
+  const handleAddUserGroupCancel = () => {
+    addUserGroupVisible.value = false;
+    initData();
+  };
+  // 点击更多操作
+  const handleMoreAction = (item: ActionsItem, id: string) => {
+    if (item.eventTag !== 'delete') {
+      popType.value = item.eventTag as RenameType;
+      const tmpObj = userGroupList.value.filter((ele) => ele.id === id)[0];
+      popVisible.value = { ...popVisible.value, [id]: true };
+      if (item.eventTag === 'rename') {
+        popDefaultName.value = tmpObj.name;
+      }
+    } else {
+      openModal({
+        type: 'error',
+        title: t('system.userGroup.isDeleteUserGroup', { name: characterLimit(store.currentName) }),
+        content: t('system.userGroup.beforeDeleteUserGroup'),
+        okText: t('system.userGroup.confirmDelete'),
+        cancelText: t('system.userGroup.cancel'),
+        okButtonProps: {
+          status: 'danger',
+        },
+        onBeforeOk: async () => {
+          try {
+            await deleteOrgUserGroup(id);
+            Message.success(t('system.user.deleteUserSuccess'));
+            initData();
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+          }
+        },
+        hideCancel: false,
+      });
+    }
+  };
+
+  // 关闭confirm 弹窗
+  const handlePopConfirmCancel = (id: string) => {
+    popVisible.value = { ...popVisible.value, [id]: false };
+    initData();
+  };
+
+  function enterData(eve: Event) {
+    if (!(eve.target as HTMLInputElement).value) {
+      initData();
+      return;
+    }
+    const keyword = (eve.target as HTMLInputElement).value;
+    const tmpArr = userGroupList.value.filter((ele) => ele.name.includes(keyword));
+    userGroupList.value = tmpArr;
+  }
+  function searchData(value: string) {
+    if (!value) {
+      initData();
+      return;
+    }
+    const keyword = value;
+    const tmpArr = userGroupList.value.filter((ele) => ele.name.includes(keyword));
+    userGroupList.value = tmpArr;
+  }
+
+  onMounted(() => {
+    initData();
+  });
+</script>
+
+<style scoped lang="less">
+  .primary-color {
+    color: rgb(var(--primary-5));
+  }
+  .n1 {
+    color: var(--color-text-1);
+  }
+  .n4 {
+    color: var(--color-text-4);
+  }
+  .second-color {
+    color: var(--color-text-input-border);
+  }
+  .handle {
+    cursor: move;
+    opacity: 0.3;
+  }
+  .is-active {
+    background-color: rgb(var(--primary-1));
+  }
+  .custom-empty {
+    padding: 8px;
+    font-size: 12px;
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    border-radius: 4px;
+    color: #8f959e;
+    background: #f7f9fc;
+    font-style: normal;
+    line-height: 20px;
+    overflow-wrap: break-word;
+  }
+  .button-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    color: rgb(var(--primary-5));
+    background-color: rgb(var(--primary-9));
+  }
+  .usergroup-title {
+    color: var(--color-text-1);
+  }
+</style>
diff --git a/frontend/src/views/setting/organization/usergroup/components/userTable.vue b/frontend/src/views/setting/organization/usergroup/components/userTable.vue
new file mode 100644
index 0000000000..ea80b8b0e8
--- /dev/null
+++ b/frontend/src/views/setting/organization/usergroup/components/userTable.vue
@@ -0,0 +1,99 @@
+<template>
+  <a-button type="primary" @click="handleAddUser">{{ t('system.userGroup.quickAddUser') }}</a-button>
+  <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
+    <template #action="{ record }">
+      <MsRemoveButton
+        :title="t('system.userGroup.removeName', { name: record.name })"
+        :sub-title-tip="t('system.userGroup.removeTip')"
+        @ok="handleRemove(record)"
+      />
+    </template>
+  </MsBaseTable>
+  <AddUserModal :visible="userVisible" @cancel="handleAddUserModalCancel" />
+</template>
+
+<script lang="ts" setup>
+  import { useI18n } from '@/hooks/useI18n';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import { useTableStore } from '@/store';
+  import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
+  import { watchEffect, ref, watch } from 'vue';
+  import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
+  import { UserTableItem } from '@/models/setting/usergroup';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import AddUserModal from './addUserModal.vue';
+  import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
+
+  const { t } = useI18n();
+  const store = useUserGroupStore();
+  const tableStore = useTableStore();
+  const userVisible = ref(false);
+  const props = defineProps<{
+    keyword: string;
+  }>();
+
+  const userGroupUsercolumns: MsTableColumn = [
+    {
+      title: 'system.userGroup.name',
+      dataIndex: 'name',
+    },
+    {
+      title: 'system.userGroup.email',
+      dataIndex: 'email',
+    },
+    {
+      title: 'system.userGroup.phone',
+      dataIndex: 'email',
+    },
+    {
+      title: 'system.userGroup.operation',
+      slotName: 'action',
+      fixed: 'right',
+      width: 200,
+    },
+  ];
+
+  tableStore.initColumn(TableKeyEnum.USERGROUPUSER, userGroupUsercolumns, 'drawer');
+
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserByUserGroup, {
+    tableKey: TableKeyEnum.USERGROUPUSER,
+    scroll: { x: '600px' },
+    selectable: true,
+    noDisable: true,
+  });
+
+  const fetchData = async () => {
+    setKeyword(props.keyword);
+    await loadList();
+  };
+  const handleRemove = async (record: UserTableItem) => {
+    try {
+      await deleteUserFromUserGroup(record.id);
+      await fetchData();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  };
+  const handleAddUser = () => {
+    userVisible.value = true;
+  };
+  const handleAddUserModalCancel = () => {
+    fetchData();
+    userVisible.value = false;
+  };
+  watchEffect(() => {
+    if (store.currentId) {
+      setLoadListParams({ roleId: store.currentId });
+      fetchData();
+    }
+  });
+  watch(
+    () => props.keyword,
+    () => {
+      fetchData();
+    }
+  );
+</script>
diff --git a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
new file mode 100644
index 0000000000..d54457d011
--- /dev/null
+++ b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
@@ -0,0 +1,148 @@
+<template>
+  <MsCard simple>
+    <div class="flex flex-row">
+      <div class="user-group-left" :style="{ padding: collapse ? '24px 24px 24px 0' : 0 }">
+        <user-group-left v-if="collapse" />
+        <div class="usergroup-collapse" @click="handleCollapse">
+          <MsIcon v-if="collapse" type="icon-icon_up-left_outlined" class="icon" />
+          <MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
+        </div>
+      </div>
+      <div class="relative w-[100%] overflow-x-scroll p-[24px]">
+        <div class="flex flex-row items-center justify-between">
+          <div class="title">{{ store.userGroupInfo.currentName }}</div>
+          <div class="flex items-center">
+            <a-input-search
+              v-if="currentTable === 'user'"
+              :placeholder="t('system.user.searchUser')"
+              class="w-[240px]"
+              @press-enter="handleEnter"
+              @search="handleSearch"
+            ></a-input-search>
+            <a-radio-group v-if="couldShowUser && couldShowAuth" v-model="currentTable" class="ml-[14px]" type="button">
+              <a-radio v-if="couldShowAuth" value="auth">{{ t('system.userGroup.auth') }}</a-radio>
+              <a-radio v-if="couldShowUser" value="user">{{ t('system.userGroup.user') }}</a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+        <div class="mt-[16px]">
+          <user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
+          <auth-table v-if="currentTable === 'auth' && couldShowAuth" ref="authRef" />
+        </div>
+      </div>
+    </div>
+  </MsCard>
+  <div
+    v-if="currentTable === 'auth'"
+    class="fixed bottom-[16px] right-[16px] z-[999] flex justify-between bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
+    :style="{ width: `calc(100% - ${menuWidth + 16}px)` }"
+  >
+    <ms-button class="btn" :disabled="!canSave" @click="handleReset">{{ t('system.userGroup.reset') }}</ms-button>
+    <a-button class="btn" :disabled="!canSave" type="primary" @click="handleSave">{{
+      t('system.userGroup.save')
+    }}</a-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watchEffect } from 'vue';
+  import { useI18n } from '@/hooks/useI18n';
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
+  import UserGroupLeft from './components/index.vue';
+  import UserTable from './components/userTable.vue';
+  import AuthTable from './components/authTable.vue';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import { useAppStore } from '@/store';
+
+  const currentTable = ref('auth');
+
+  const { t } = useI18n();
+  const currentKeyword = ref('');
+  const authRef = ref<{
+    handleReset: () => void;
+    handleSave: () => void;
+    canSave: boolean;
+  }>();
+  const appStore = useAppStore();
+
+  const handleSearch = (value: string) => {
+    currentKeyword.value = value;
+  };
+  const handleEnter = (eve: Event) => {
+    currentKeyword.value = (eve.target as HTMLInputElement).value;
+  };
+
+  const store = useUserGroupStore();
+  const couldShowUser = computed(() => store.userGroupInfo.currentType === 'ORGANIZATION');
+  const couldShowAuth = computed(() => store.userGroupInfo.currentId !== 'admin');
+  const handleCollapse = () => {
+    store.setCollapse(!store.collapse);
+  };
+  const collapse = computed(() => store.collapse);
+  const menuWidth = computed(() => {
+    const width = appStore.menuCollapse ? 86 : appStore.menuWidth;
+    if (store.collapse) {
+      return width + 300;
+    }
+    return width + 24;
+  });
+
+  const handleReset = () => {
+    authRef.value?.handleReset();
+  };
+  const handleSave = () => {
+    authRef.value?.handleSave();
+  };
+  const canSave = computed(() => {
+    if (currentTable.value === 'auth') {
+      return authRef.value?.canSave;
+    }
+    return true;
+  });
+  watchEffect(() => {
+    if (!couldShowAuth.value) {
+      currentTable.value = 'user';
+    } else if (!couldShowUser.value) {
+      currentTable.value = 'auth';
+    } else {
+      currentTable.value = 'auth';
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    color: var(--color-text-1);
+  }
+  .user-group {
+    height: calc(100vh - 72px);
+  }
+  .user-group-left {
+    position: relative;
+    border-right: 1px solid var(--color-border);
+    .usergroup-collapse {
+      position: absolute;
+      top: 50%;
+      right: -16px;
+      z-index: 100;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 16px;
+      height: 36px;
+      background-color: var(--color-text-n8);
+      opacity: 0;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+      }
+      .icon {
+        font-size: 12px;
+        color: var(--color-text-brand);
+      }
+    }
+  }
+</style>
+@/store/modules/setting/system/usergroup
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
index 5cdcaa7d77..0b498d565c 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@@ -4,7 +4,7 @@
       <span>{{ record.name }}</span>
       <a-tooltip background-color="#FFFFFF">
         <template #content>
-          <span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>
+          <span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>
           <MsButton class="ml-[8px]" @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
         </template>
         <MsIcon v-if="record.deleted" type="icon-icon_alarm_clock" class="ml-[4px] text-[rgb(var(--danger-6))]" />
@@ -252,7 +252,7 @@
       type: 'error',
       cancelText: t('common.cancel'),
       title: t('system.project.revokeDeleteTitle', { name: record.name }),
-      content: t('system.organization.enableContent'),
+      content: t('system.project.enableContent'),
       okText: t('common.revokeDelete'),
       onBeforeOk: async () => {
         try {
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
index 1f44b8502a..d1a2bcc3bb 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
@@ -114,7 +114,12 @@
   };
 
   const fetchData = async () => {
-    setLoadListParams({ organizationId: props.organizationId });
+    if (props.organizationId) {
+      setLoadListParams({ organizationId: props.organizationId });
+    }
+    if (props.projectId) {
+      setLoadListParams({ projectId: props.projectId });
+    }
     await loadList();
   };
 
@@ -161,4 +166,3 @@
     }
   );
 </script>
-@/api/modules/setting/organizationAndProject
diff --git a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
index cd71d924e9..9df5b39f4f 100644
--- a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
@@ -71,4 +71,5 @@ export default {
   'system.project.projectNameRequired': 'Project name cannot be empty',
   'system.project.createTip': 'After the project is enabled, it will be displayed in the project switching list',
   'system.project.affiliatedOrgRequired': 'Affiliated organization cannot be empty',
+  'system.project.revokeDeleteToolTip': 'The project will be deleted automatically after 30 days',
 };
diff --git a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
index 36149933aa..2ca9d7f6c0 100644
--- a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
@@ -66,4 +66,5 @@ export default {
   'system.project.projectNameRequired': '项目名称不能为空',
   'system.project.createTip': '项目启用后，将展示在项目切换列表',
   'system.project.affiliatedOrgRequired': '所属组织不能为空',
+  'system.project.revokeDeleteToolTip': '该项目将与 30 天后自动删除',
 };
diff --git a/frontend/src/views/setting/system/usergroup/components/addUserModal.vue b/frontend/src/views/setting/system/usergroup/components/addUserModal.vue
index b969a9c669..9e3ed0df29 100644
--- a/frontend/src/views/setting/system/usergroup/components/addUserModal.vue
+++ b/frontend/src/views/setting/system/usergroup/components/addUserModal.vue
@@ -33,10 +33,9 @@
 
 <script lang="ts" setup>
   import { useI18n } from '@/hooks/useI18n';
-  import { reactive, ref, watchEffect, onMounted } from 'vue';
-  import { UserTableItem } from '@/models/setting/usergroup';
-  import { useUserGroupStore } from '@/store';
-  import { getUserList, addUserToUserGroup } from '@/api/modules/setting/usergroup';
+  import { reactive, ref, watchEffect } from 'vue';
+  import useUserGroupStore from '@/store/modules/setting/system/usergroup';
+  import { addUserToUserGroup } from '@/api/modules/setting/usergroup';
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
   import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
 
@@ -61,18 +60,8 @@
 
   const labelCache = new Map();
 
-  const allOption = ref<UserTableItem[]>([]);
-
-  const userOptions = ref<UserTableItem[]>([]);
-
   const formRef = ref<FormInstance>();
 
-  const initUserList = async () => {
-    const res = await getUserList();
-    allOption.value = res;
-    userOptions.value = res;
-  };
-
   watchEffect(() => {
     currentVisible.value = props.visible;
   });
@@ -100,10 +89,6 @@
       }
     });
   };
-
-  onMounted(() => {
-    initUserList();
-  });
 </script>
 
 <style lang="less" scoped>
diff --git a/frontend/src/views/setting/system/usergroup/components/authTable.vue b/frontend/src/views/setting/system/usergroup/components/authTable.vue
index 0fa02d91d6..c4ffdad523 100644
--- a/frontend/src/views/setting/system/usergroup/components/authTable.vue
+++ b/frontend/src/views/setting/system/usergroup/components/authTable.vue
@@ -53,7 +53,7 @@
   import { useI18n } from '@/hooks/useI18n';
   import { RenderFunction, VNodeChild, ref, watchEffect, computed } from 'vue';
   import { type TableColumnData, type TableData } from '@arco-design/web-vue';
-  import useUserGroupStore from '@/store/modules/setting/usergroup';
+  import useUserGroupStore from '@/store/modules/setting/system/usergroup';
   import { getGlobalUSetting, saveGlobalUSetting } from '@/api/modules/setting/usergroup';
   import { UserGroupAuthSetting, AuthTableItem, type AuthScopeType, SavePermissions } from '@/models/setting/usergroup';
 
@@ -313,3 +313,4 @@
     }
   }
 </style>
+@/store/modules/setting/system/usergroup
diff --git a/frontend/src/views/setting/system/usergroup/components/index.vue b/frontend/src/views/setting/system/usergroup/components/index.vue
index 71c30a6405..bf69086a91 100644
--- a/frontend/src/views/setting/system/usergroup/components/index.vue
+++ b/frontend/src/views/setting/system/usergroup/components/index.vue
@@ -68,7 +68,7 @@
   import useModal from '@/hooks/useModal';
   import { Message } from '@arco-design/web-vue';
   import popconfirm from './popconfirm.vue';
-  import useUserGroupStore from '@/store/modules/setting/usergroup';
+  import useUserGroupStore from '@/store/modules/setting/system/usergroup';
   import { getUserGroupList, updateOrAddUserGroup, deleteUserGroup } from '@/api/modules/setting/usergroup';
   import { characterLimit } from '@/utils';
 
@@ -174,6 +174,7 @@
             Message.success(t('system.user.deleteUserSuccess'));
             initData();
           } catch (error) {
+            // eslint-disable-next-line no-console
             console.log(error);
           }
         },
@@ -301,4 +302,4 @@
     color: var(--color-text-1);
   }
 </style>
-@/models/setting/usergroup @/api/modules/setting/usergroup
+@/models/setting/usergroup @/api/modules/setting/usergroup @/store/modules/setting/system/usergroup
diff --git a/frontend/src/views/setting/system/usergroup/components/userTable.vue b/frontend/src/views/setting/system/usergroup/components/userTable.vue
index a84ce724a1..f3de849a18 100644
--- a/frontend/src/views/setting/system/usergroup/components/userTable.vue
+++ b/frontend/src/views/setting/system/usergroup/components/userTable.vue
@@ -16,7 +16,8 @@
   import { useI18n } from '@/hooks/useI18n';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import { useUserGroupStore, useTableStore } from '@/store';
+  import { useTableStore } from '@/store';
+  import useUserGroupStore from '@/store/modules/setting/system/usergroup';
   import { watchEffect, ref, watch } from 'vue';
   import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
   import { UserTableItem } from '@/models/setting/usergroup';
diff --git a/frontend/src/views/setting/system/usergroup/index.vue b/frontend/src/views/setting/system/usergroup/index.vue
index 73d8e098f9..b9d6d11032 100644
--- a/frontend/src/views/setting/system/usergroup/index.vue
+++ b/frontend/src/views/setting/system/usergroup/index.vue
@@ -48,7 +48,7 @@
   import { ref, computed, watchEffect } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsCard from '@/components/pure/ms-card/index.vue';
-  import useUserGroupStore from '@/store/modules/setting/usergroup';
+  import useUserGroupStore from '@/store/modules/setting/system/usergroup';
   import UserGroupLeft from './components/index.vue';
   import UserTable from './components/userTable.vue';
   import AuthTable from './components/authTable.vue';
@@ -145,3 +145,4 @@
     }
   }
 </style>
+@/store/modules/setting/system/usergroup
diff --git a/frontend/src/views/setting/system/usergroup/locale/en-US.ts b/frontend/src/views/setting/system/usergroup/locale/en-US.ts
index c9ed5e503e..c7a4200f66 100644
--- a/frontend/src/views/setting/system/usergroup/locale/en-US.ts
+++ b/frontend/src/views/setting/system/usergroup/locale/en-US.ts
@@ -56,6 +56,7 @@ export default {
       quickAddUser: 'Quick add user',
       removeName: 'Confirm to remove {name} this user',
       removeTip: 'After removal, the User Group permission will be lost',
+      custom: 'Custom user group',
     },
   },
   permission: {
diff --git a/frontend/src/views/setting/system/usergroup/locale/zh-CN.ts b/frontend/src/views/setting/system/usergroup/locale/zh-CN.ts
index 54614ebea5..096b27e399 100644
--- a/frontend/src/views/setting/system/usergroup/locale/zh-CN.ts
+++ b/frontend/src/views/setting/system/usergroup/locale/zh-CN.ts
@@ -55,6 +55,7 @@ export default {
       quickAddUser: '快速添加用户',
       removeName: '确认移除 {name} 这个用户吗',
       removeTip: '移除后，将失去用户组权限',
+      custom: '自定义用户组',
     },
   },
   permission: {