From f538dc80c28d3870fbcca084cd0201926944f861 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 14 Aug 2026 15:45:51 +0800
Subject: [PATCH] feat: role

---
 ui/src/components/global/mk-table/index.vue   |   4 +-
 .../components/global/mk-tag-group/index.vue  |   2 +-
 ui/src/styles/STYLE_README.md                 |  16 +-
 ui/src/styles/element-plus.scss               |  10 +
 ui/src/styles/tailwind.css                    |   7 +
 .../system/identity/roles/AddMemberDrawer.vue | 183 ++++++------------
 .../system/identity/roles/RoleListView.vue    |   6 +-
 .../components/MemberWorkspaceSetting.vue     | 113 +++++++++++
 .../roles/components/RoleMemberList.vue       |  27 ++-
 .../RolePermissionConfiguration.vue           |  62 +++---
 .../components/LoginSetting.vue               |   6 +-
 .../authentication/components/SCANLogin.vue   |   1 -
 12 files changed, 276 insertions(+), 161 deletions(-)
 create mode 100644 ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue

diff --git a/ui/src/components/global/mk-table/index.vue b/ui/src/components/global/mk-table/index.vue
index 866df282bab..f56adc0c143 100644
--- a/ui/src/components/global/mk-table/index.vue
+++ b/ui/src/components/global/mk-table/index.vue
@@ -160,7 +160,7 @@ defineExpose({ clearSelection, tableRef })
   <div
     v-else
     ref="tableRootRef"
-    class="mk-table relative w-full"
+    class="mk-table relative w-full min-h-0 flex-1"
     @mouseleave="clearResizeHover"
     @mousemove="handleTableMouseMove"
   >
@@ -199,7 +199,7 @@ defineExpose({ clearSelection, tableRef })
 
     <footer
       v-if="selectedRows.length > 0"
-      class="fixed bottom-0 z-20 flex items-center border-t bg-white w-full -ml-6 px-6 py-4"
+      class="absolute -inset-x-6 -bottom-6 z-10 border-t bg-white px-6 py-4 flex items-center"
     >
       <div class="mr-4 flex items-center gap-3">
         <el-checkbox
diff --git a/ui/src/components/global/mk-tag-group/index.vue b/ui/src/components/global/mk-tag-group/index.vue
index b6be204cc68..c529694ec92 100644
--- a/ui/src/components/global/mk-tag-group/index.vue
+++ b/ui/src/components/global/mk-tag-group/index.vue
@@ -31,7 +31,7 @@ withDefaults(
       <template #reference>
         <el-tag type="info" class="cursor-pointer">+{{ tags.length - 1 }}</el-tag>
       </template>
-      <div class="flex flex-wrap gap-1">
+      <div class="flex-wrap gap-1">
         <el-tag v-for="tag in tags.slice(1)" :key="tag" type="info">
           {{ tag }}
         </el-tag>
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index e0296797865..65b835bc500 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -109,11 +109,12 @@ CSS 自定义属性同样按变量名排序。嵌套选择器、伪类和媒体
 
 稳定重复使用的 Flex 布局组合统一定义在 `tailwind.css`。当前提供：
 
-| 工具类            | 作用                                 |
-| ----------------- | ------------------------------------ |
-| `flex-between`    | 横向排列，两侧贴边，并在垂直方向居中 |
-| `flex-center`     | 横向排列，在水平和垂直两个方向居中   |
-| `flex-col-center` | 纵向排列，在水平和垂直两个方向居中   |
+| 工具类              | 作用                                 |
+| ------------------- | ------------------------------------ |
+| `flex-between`      | 横向排列，两侧贴边，并在垂直方向居中 |
+| `flex-center`       | 横向排列，在水平和垂直两个方向居中   |
+| `flex-col-center`   | 纵向排列，在水平和垂直两个方向居中   |
+| `flex-wrap` | 横向排列，自动换行，行间距为 8px     |
 
 ```vue
 <div class="flex-between">
@@ -129,6 +130,11 @@ CSS 自定义属性同样按变量名排序。嵌套选择器、伪类和媒体
   <MkIcon name="icon_home_filled" />
   <span>首页</span>
 </div>
+
+<div class="flex-wrap">
+  <span>选项一</span>
+  <span>选项二</span>
+</div>
 ```
 
 仅在布局语义与工具类完全一致时使用。需要覆盖排列方向或对齐方式的响应式布局继续组合 Tailwind
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 7ce3ebda3fd..81fbd55bbba 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -217,7 +217,17 @@
   --el-checkbox-input-border: 1px solid var(--mk-N500);
   --el-checkbox-input-width: 16px;
   --el-checkbox-input-height: 16px;
+  --el-checkbox-text-color: var(--el-text-color-primary);
+  --el-checkbox-disabled-checked-input-fill: var(--mk-N400);
+  --el-checkbox-disabled-checked-input-border-color: var(--mk-N400);
+  --el-checkbox-disabled-checked-icon-color: white;
+  --el-checkbox-checked-text-color: var(--el-text-color-primary);
   margin: 0;
+  height: unset;
+  &__label {
+    line-height: 22px;
+    font-weight: 400;
+  }
 }
 
 /* dialog */
diff --git a/ui/src/styles/tailwind.css b/ui/src/styles/tailwind.css
index c7232b53b18..b6c7324048c 100644
--- a/ui/src/styles/tailwind.css
+++ b/ui/src/styles/tailwind.css
@@ -69,3 +69,10 @@
   flex-direction: column;
   justify-content: center;
 }
+
+/* 横向排列，自动换行且行间距为 8px */
+@utility flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: calc(var(--spacing) * 2);
+}
diff --git a/ui/src/views/system/identity/roles/AddMemberDrawer.vue b/ui/src/views/system/identity/roles/AddMemberDrawer.vue
index dc2c5da42de..6d1d2e13959 100644
--- a/ui/src/views/system/identity/roles/AddMemberDrawer.vue
+++ b/ui/src/views/system/identity/roles/AddMemberDrawer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import RoleApi from '@/api/admin/system/role'
 import UserManageApi from '@/api/admin/system/user-manage'
 import WorkspaceApi from '@/api/admin/system/workspace'
@@ -13,6 +13,9 @@ import {
 } from '@/api/types'
 import { useStore } from '@/stores'
 import { MsgSuccess } from '@/utils/message'
+import MemberWorkspaceSetting from './components/MemberWorkspaceSetting.vue'
+
+defineOptions({ name: 'AddRoleMemberDrawer' })
 
 const props = defineProps<{ currentRole: RoleItem }>()
 const emit = defineEmits<{ refresh: [] }>()
@@ -20,86 +23,64 @@ const { auth } = useStore()
 
 const visible = ref(false)
 const loading = ref(false)
-const optionsLoading = ref(false)
 const formRef = ref<FormInstance>()
-const memberRows = reactive<CreateRoleMemberItem[]>([])
-const userOptions = ref<SystemUserOption[]>([])
-const workspaceOptions = ref<WorkspaceItem[]>([])
+const memberForm = reactive<{ members: CreateRoleMemberItem[] }>({ members: [] })
 const showWorkspace = computed(() => props.currentRole.type !== ROLE_TYPE.ADMIN && auth.isEE)
-const rules: FormRules = {
-  user_ids: [{ required: true, message: '请选择用户', trigger: 'change' }],
-  workspace_ids: [{ required: true, message: '请选择工作空间', trigger: 'change' }],
-}
-let searchTimer: ReturnType<typeof setTimeout> | null = null
 
-function createEmptyRow(): CreateRoleMemberItem {
-  return { user_ids: [], ...(showWorkspace.value ? { workspace_ids: [] } : {}) }
-}
+/* 成员与工作空间选项 */
+const userOptions = ref<SystemUserOption[]>([])
+const userOptionsLoading = ref(false)
+const workspaceOptions = ref<WorkspaceItem[]>([])
+const workspaceOptionsLoading = ref(false)
 
-function loadOptions(query?: string) {
-  optionsLoading.value = true
-  return Promise.all([
-    UserManageApi.getAllUsers(query ? { nick_name: query } : undefined),
-    showWorkspace.value ? WorkspaceApi.getSystemWorkspaceList() : Promise.resolve([]),
-  ])
-    .then(([users, workspaces]) => {
-      userOptions.value = users
-      workspaceOptions.value = workspaces
+function loadUserOptions(keyword = '') {
+  userOptionsLoading.value = true
+  return UserManageApi.getAllUsers(keyword ? { nick_name: keyword } : undefined)
+    .then((users) => {
+      const selectedUserIds = new Set(memberForm.members.flatMap(({ user_ids }) => user_ids))
+      const selectedUserOptions = userOptions.value.filter(({ id }) => selectedUserIds.has(id))
+      userOptions.value = [
+        ...new Map([...selectedUserOptions, ...users].map((user) => [user.id, user])).values(),
+      ]
     })
     .finally(() => {
-      optionsLoading.value = false
+      userOptionsLoading.value = false
     })
 }
 
-function handleRemoteSearch(query: string) {
-  if (searchTimer) clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => loadOptions(query), 300)
-}
-
-function handleAddRow() {
-  memberRows.push(createEmptyRow())
-}
-
-function handleDeleteRow(index: number) {
-  if (memberRows.length > 1) memberRows.splice(index, 1)
-}
+function loadWorkspaceOptions() {
+  if (!showWorkspace.value) return Promise.resolve()
 
-function resetData() {
-  memberRows.splice(0, memberRows.length, createEmptyRow())
-  userOptions.value = []
-  workspaceOptions.value = []
-  loading.value = false
-  optionsLoading.value = false
-  formRef.value?.clearValidate()
-  if (searchTimer) {
-    clearTimeout(searchTimer)
-    searchTimer = null
-  }
+  workspaceOptionsLoading.value = true
+  return WorkspaceApi.getSystemWorkspaceList()
+    .then((workspaces) => {
+      workspaceOptions.value = workspaces
+    })
+    .finally(() => {
+      workspaceOptionsLoading.value = false
+    })
 }
 
 function open() {
-  resetData()
+  memberForm.members = [{ user_ids: [], workspace_ids: [] }]
   visible.value = true
-  loadOptions()
-}
-
-function close() {
-  visible.value = false
-  resetData()
+  return Promise.all([loadUserOptions(), loadWorkspaceOptions()])
 }
 
 function submit() {
   formRef.value?.validate((valid) => {
     if (!valid) return
-    const members = memberRows.map((row) => ({
-      user_ids: row.user_ids,
+
+    const members = memberForm.members.map((member) => ({
+      user_ids: [...member.user_ids],
       workspace_ids:
         props.currentRole.type === ROLE_TYPE.ADMIN
           ? ['None']
           : auth.isPE
             ? ['default']
-            : row.workspace_ids,
+            : [...(member.workspace_ids ?? [])],
     }))
+
     loading.value = true
     RoleApi.postRoleMembers(props.currentRole.id, { members })
       .then(() => {
@@ -113,74 +94,38 @@ function submit() {
   })
 }
 
+function close() {
+  visible.value = false
+  resetData()
+}
+
+function resetData() {
+  memberForm.members = []
+  loading.value = false
+  userOptions.value = []
+  userOptionsLoading.value = false
+  workspaceOptions.value = []
+  workspaceOptionsLoading.value = false
+  formRef.value?.clearValidate()
+}
+
 defineExpose({ open })
 </script>
 
 <template>
-  <MkDrawer v-model="visible" title="添加成员" size="600" @closed="resetData">
-    <el-form ref="formRef" :model="memberRows" label-position="top">
-      <el-scrollbar>
-        <div v-for="(row, index) in memberRows" :key="index" class="mb-3 flex items-end gap-2">
-          <el-form-item
-            :label="index === 0 ? '用户' : ''"
-            :prop="`${index}.user_ids`"
-            :rules="rules.user_ids"
-            class="mb-0 flex-1"
-          >
-            <el-select
-              v-model="row.user_ids"
-              class="w-full"
-              filterable
-              remote
-              multiple
-              collapse-tags
-              collapse-tags-tooltip
-              reserve-keyword
-              :remote-method="handleRemoteSearch"
-              :loading="optionsLoading"
-              placeholder="请选择用户"
-            >
-              <el-option
-                v-for="user in userOptions"
-                :key="user.id"
-                :label="user.nick_name || user.username"
-                :value="user.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            v-if="showWorkspace"
-            :label="index === 0 ? '工作空间' : ''"
-            :prop="`${index}.workspace_ids`"
-            :rules="rules.workspace_ids"
-            class="mb-0 flex-1"
-          >
-            <el-select
-              v-model="row.workspace_ids"
-              class="w-full"
-              filterable
-              multiple
-              collapse-tags
-              collapse-tags-tooltip
-              placeholder="请选择工作空间"
-            >
-              <el-option
-                v-for="workspace in workspaceOptions"
-                :key="workspace.id"
-                :label="workspace.name"
-                :value="workspace.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-button text :disabled="memberRows.length === 1" @click="handleDeleteRow(index)"
-            ><MkIcon name="icon_delete-trash_outlined"
-          /></el-button>
-        </div>
-      </el-scrollbar>
-      <el-button text type="primary" @click="handleAddRow"
-        ><MkIcon name="icon_add_outlined" />添加</el-button
-      >
+  <MkDrawer v-model="visible" title="添加成员" @closed="resetData">
+    <el-form ref="formRef" :model="memberForm" label-position="top">
+      <MemberWorkspaceSetting
+        v-model="memberForm.members"
+        :remote-user-method="loadUserOptions"
+        :show-workspace="showWorkspace"
+        :user-loading="userOptionsLoading"
+        :user-options="userOptions"
+        :workspace-loading="workspaceOptionsLoading"
+        :workspace-options="workspaceOptions"
+      />
     </el-form>
+
     <template #footer>
       <el-button @click="close">取消</el-button>
       <el-button type="primary" :loading="loading" @click="submit">添加</el-button>
diff --git a/ui/src/views/system/identity/roles/RoleListView.vue b/ui/src/views/system/identity/roles/RoleListView.vue
index f079b396e7c..e9bb62e732d 100644
--- a/ui/src/views/system/identity/roles/RoleListView.vue
+++ b/ui/src/views/system/identity/roles/RoleListView.vue
@@ -85,10 +85,6 @@ function handleDeleteRole(role: RoleItem) {
     })
 }
 
-function handleMemberChanged() {
-  loadRoles(currentRole.value?.id)
-}
-
 onMounted(() => loadRoles())
 </script>
 
@@ -172,7 +168,7 @@ onMounted(() => loadRoles())
           :current-role="currentRole"
         />
         <!-- 成员 -->
-        <RoleMemberList v-else :current-role="currentRole" @changed="handleMemberChanged" />
+        <RoleMemberList v-else :current-role="currentRole" />
       </template>
       <MkEmpty v-else class="flex-1" />
     </template>
diff --git a/ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue b/ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue
new file mode 100644
index 00000000000..5f30d8616ee
--- /dev/null
+++ b/ui/src/views/system/identity/roles/components/MemberWorkspaceSetting.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { FormItemRule } from 'element-plus'
+import type { CreateRoleMemberItem, SystemUserOption, WorkspaceItem } from '@/api/types'
+
+defineOptions({ name: 'MemberWorkspaceSetting' })
+
+defineProps<{
+  remoteUserMethod: (keyword: string) => Promise<void>
+  showWorkspace?: boolean
+  userLoading?: boolean
+  userOptions: SystemUserOption[]
+  workspaceLoading?: boolean
+  workspaceOptions: WorkspaceItem[]
+}>()
+
+const memberSettings = defineModel<CreateRoleMemberItem[]>({ required: true })
+
+const memberRequiredRule: FormItemRule = {
+  required: true,
+  type: 'array',
+  min: 1,
+  message: '请选择成员',
+  trigger: 'change',
+}
+const workspaceRequiredRule: FormItemRule = {
+  required: true,
+  type: 'array',
+  min: 1,
+  message: '请选择工作空间',
+  trigger: 'change',
+}
+
+function addMemberSetting() {
+  memberSettings.value = [...memberSettings.value, { user_ids: [], workspace_ids: [] }]
+}
+
+function removeMemberSetting(index: number) {
+  if (memberSettings.value.length === 1) return
+  memberSettings.value = memberSettings.value.filter((_, settingIndex) => settingIndex !== index)
+}
+</script>
+
+<template>
+  <div v-for="(memberSetting, index) in memberSettings" :key="index" class="flex w-full gap-2">
+    <el-form-item
+      class="flex-1"
+      :label="index === 0 ? '成员' : ''"
+      :prop="`members.${index}.user_ids`"
+      :rules="memberRequiredRule"
+    >
+      <el-select
+        v-model="memberSetting.user_ids"
+        :loading="userLoading"
+        :remote-method="remoteUserMethod"
+        collapse-tags
+        collapse-tags-tooltip
+        filterable
+        fit-input-width
+        multiple
+        placeholder="请选择成员"
+        remote
+        :reserve-keyword="false"
+      >
+        <el-option
+          v-for="userOption in userOptions"
+          :key="userOption.id"
+          :label="userOption.nick_name || userOption.username"
+          :title="userOption.nick_name || userOption.username"
+          :value="userOption.id"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item
+      v-if="showWorkspace"
+      class="flex-1"
+      :label="index === 0 ? '工作空间' : ''"
+      :prop="`members.${index}.workspace_ids`"
+      :rules="workspaceRequiredRule"
+    >
+      <el-select
+        v-model="memberSetting.workspace_ids"
+        :loading="workspaceLoading"
+        collapse-tags
+        collapse-tags-tooltip
+        filterable
+        fit-input-width
+        multiple
+        placeholder="请选择工作空间"
+        :reserve-keyword="false"
+      >
+        <el-option
+          v-for="workspaceOption in workspaceOptions"
+          :key="workspaceOption.id"
+          :label="workspaceOption.name"
+          :title="workspaceOption.name"
+          :value="workspaceOption.id"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item class="shrink-0" :class="index === 0 ? 'mt-8' : 'mt-0.5'">
+      <el-button :disabled="memberSettings.length === 1" text @click="removeMemberSetting(index)">
+        <MkIcon name="icon_delete-trash_outlined" class="text-N600" />
+      </el-button>
+    </el-form-item>
+  </div>
+
+  <el-button class="-mt-1 mb-6" link type="primary" @click="addMemberSetting">
+    <MkIcon name="icon_add_outlined" />
+    <span>添加成员</span>
+  </el-button>
+</template>
diff --git a/ui/src/views/system/identity/roles/components/RoleMemberList.vue b/ui/src/views/system/identity/roles/components/RoleMemberList.vue
index 745cc85cfdb..b79037c1b9a 100644
--- a/ui/src/views/system/identity/roles/components/RoleMemberList.vue
+++ b/ui/src/views/system/identity/roles/components/RoleMemberList.vue
@@ -12,7 +12,6 @@ import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import AddMemberDrawer from '../AddMemberDrawer.vue'
 
 const props = defineProps<{ currentRole: RoleItem }>()
-const emit = defineEmits<{ changed: [] }>()
 const loading = ref(false)
 const members = ref<RoleMember[]>([])
 const paginationConfig = ref({ currentPage: 1, pageSize: 20, total: 0 })
@@ -40,6 +39,8 @@ function handleSearch(query?: RequestParams) {
   loadMembers(true)
 }
 
+// 添加成员
+
 const addMemberDrawerRef =
   useTemplateRef<InstanceType<typeof AddMemberDrawer>>('addMemberDrawerRef')
 function handleOpenAddMemberDrawer() {
@@ -48,16 +49,15 @@ function handleOpenAddMemberDrawer() {
 
 function handleMemberAdded() {
   loadMembers(true)
-  emit('changed')
 }
 
+// 移除成员
 function handleRemoveMember(member: RoleMember) {
   MsgConfirm(`确定移除成员“${member.nick_name || member.username}”吗？`)
     .then(() => {
       loading.value = true
       return RoleApi.deleteRoleMember(props.currentRole.id, member.user_relation_id).then(() => {
         MsgSuccess('移除成功')
-        emit('changed')
         return loadMembers()
       })
     })
@@ -67,6 +67,23 @@ function handleRemoveMember(member: RoleMember) {
     })
 }
 
+/* 批量删除成员 */
+const batchSelectedMembers = ref<RoleMember[]>([])
+function handleBatchDelete() {
+  MsgConfirm(`是否删除选中的 ${batchSelectedMembers.value.length} 个成员？`, '')
+    .then(() => {
+      // TODO: 批量删除
+    })
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleBatchSelectionChange(selection: unknown[]) {
+  batchSelectedMembers.value = selection as RoleMember[]
+}
+
 watch(
   () => props.currentRole.id,
   () => loadMembers(true),
@@ -90,6 +107,7 @@ watch(
       @current-change="loadMembers()"
       @size-change="loadMembers()"
       :max-table-height="290"
+      @selection-change="handleBatchSelectionChange"
     >
       <el-table-column type="selection" width="40" />
       <el-table-column prop="nick_name" label="姓名" min-width="180" show-overflow-tooltip />
@@ -110,6 +128,9 @@ watch(
           </el-tooltip>
         </template>
       </el-table-column>
+      <template #footer-batch-actions>
+        <el-button type="danger" plain @click="handleBatchDelete">移除</el-button>
+      </template>
     </MkTable>
   </div>
   <AddMemberDrawer
diff --git a/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue b/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue
index 79c6b0c5505..dd5c5897893 100644
--- a/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue
+++ b/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue
@@ -25,13 +25,10 @@ const permissionTableKey = computed(
 function loadPermissions() {
   loading.value = true
   permissionData.value = []
-  return RoleApi.getRolePermissionList(props.currentRole.id)
-    .then((permissions) => {
-      permissionData.value = transformPermissions(permissions)
-    })
-    .finally(() => {
-      loading.value = false
-    })
+  return RoleApi.getRolePermissionList(props.currentRole.id).then((permissions) => {
+    permissionData.value = transformPermissions(permissions)
+    loading.value = false
+  })
 }
 
 function transformPermissions(modules: RolePermissionModule[]) {
@@ -118,31 +115,38 @@ watch(() => props.currentRole.id, loadPermissions, { immediate: true })
 </script>
 
 <template>
-  <div>
+  <div class="relative min-h-0 flex-1" :class="{ 'pb-16': !disabled }">
     <MkTable
       :key="permissionTableKey"
       class="role-permission-table"
       row-key="id"
       :span-method="permissionTableSpan"
-      :max-table-height="disabled ? 200 : 250"
+      :max-table-height="disabled ? 200 : 240"
       :data="permissionData"
+      v-loading="loading"
     >
       <el-table-column prop="module" label="模块名称" width="150" />
       <el-table-column prop="name" label="操作对象" width="150" />
       <el-table-column label="权限">
         <template #default="{ row }">
-          <el-checkbox
-            v-for="permission in row.permissions"
-            :key="permission.id"
-            v-model="permission.enable"
-            :disabled="disabled"
-            class="w-30"
-            @change="(value: boolean) => handlePermissionChange(value, permission, row)"
-            >{{ permission.name }}</el-checkbox
-          >
+          <div class="flex-wrap">
+            <template v-for="permission in row.permissions" :key="permission.id">
+              <el-checkbox
+                v-model="permission.enable"
+                :disabled="disabled"
+                class="w-30"
+                @change="(value: boolean) => handlePermissionChange(value, permission, row)"
+                >{{ permission.name }}</el-checkbox
+              >
+            </template>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column :width="40">
+      <el-table-column
+        class-name="permission-checkbox-column"
+        label-class-name="permission-checkbox-column"
+        :width="60"
+      >
         <template #header>
           <el-checkbox
             :model-value="allPermissionState.checked"
@@ -151,6 +155,7 @@ watch(() => props.currentRole.id, loadPermissions, { immediate: true })
             @change="handleCheckAll"
           />
         </template>
+
         <template #default="{ row }">
           <el-checkbox
             :model-value="getPermissionState(row.permissions).checked"
@@ -162,11 +167,12 @@ watch(() => props.currentRole.id, loadPermissions, { immediate: true })
       </el-table-column>
     </MkTable>
 
-    <div v-if="!disabled" class="flex justify-end px-6 py-4">
-      <el-button type="primary" :disabled="disabled" :loading="loading" @click="handleSave"
-        >保存</el-button
-      >
-    </div>
+    <footer
+      v-if="!disabled"
+      class="absolute -inset-x-6 -bottom-6 z-10 border-t bg-white px-6 py-4 text-right"
+    >
+      <el-button type="primary" :loading="loading" @click="handleSave">保存</el-button>
+    </footer>
   </div>
 </template>
 
@@ -186,5 +192,13 @@ watch(() => props.currentRole.id, loadPermissions, { immediate: true })
   thead th.el-table__cell {
     border-bottom: 1px solid var(--el-table-border-color) !important;
   }
+
+  .permission-checkbox-column .cell {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 </style>
diff --git a/ui/src/views/system/settings/authentication/components/LoginSetting.vue b/ui/src/views/system/settings/authentication/components/LoginSetting.vue
index 8d74592a48d..a557257403d 100644
--- a/ui/src/views/system/settings/authentication/components/LoginSetting.vue
+++ b/ui/src/views/system/settings/authentication/components/LoginSetting.vue
@@ -161,7 +161,11 @@ onMounted(() => {
     require-asterisk-position="right"
   >
     <el-form-item label="登录方式" prop="login_methods">
-      <el-checkbox-group v-model="form.login_methods" @change="handleLoginMethodsChange">
+      <el-checkbox-group
+        v-model="form.login_methods"
+        @change="handleLoginMethodsChange"
+        class="flex-wrap"
+      >
         <el-checkbox
           v-for="loginMethodOption in loginMethodOptions"
           :key="loginMethodOption"
diff --git a/ui/src/views/system/settings/authentication/components/SCANLogin.vue b/ui/src/views/system/settings/authentication/components/SCANLogin.vue
index e0e992688d5..4887aa6f89d 100644
--- a/ui/src/views/system/settings/authentication/components/SCANLogin.vue
+++ b/ui/src/views/system/settings/authentication/components/SCANLogin.vue
@@ -101,7 +101,6 @@ function handleValidatePlatform(platform: QrLoginPlatformView) {
   loading.value = true
   return AuthScanApi.postValidateQrLoginPlatform(platform)
     .then((res) => {
-      // TODO: 校验判断有误
       res ? MsgSuccess('校验成功') : MsgError('校验失败')
     })
     .finally(() => {