diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index 0b14a6cd3f7..e450e83fd67 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -68,6 +68,11 @@ API 类型统一在 `src/api` 范围内管理，相关规则由本文档统一
   `import type { ... } from '@/api/types'` 导入，不写 `/index.ts`。
 - `src/api/types/index.ts` 只负责导出各业务域类型，不直接声明类型。
 - 新增类型前先搜索是否已有等价声明，优先复用或扩展已有类型。
+- 后端字段的固定协议值与其类型放在同一个 `src/api/types/<domain>.ts` 中：使用
+  `as const` 对象声明运行时常量，并从该对象派生联合类型。协议常量是唯一数据源；新增、删除或
+  修改协议值只维护对应的 API 类型文件，业务判断不得重复使用裸字符串或另建同值常量。
+- 同时导出协议常量的类型模块在 `src/api/types/index.ts` 中使用 `export *`；只有纯类型模块使用
+  `export type *`。
 - 同一业务边界内的重复类型提取到最近共同目录的 `common.ts`；`common.ts` 不得成为无关类型
   的集合。
 - API 与 View 或 Component 使用同一业务类型时只保留一份声明，不得在两层分别定义。
diff --git a/ui/src/api/admin/system/chat-user-auth.ts b/ui/src/api/admin/system/chat-user-auth.ts
index 993e23c666d..d55895700f8 100644
--- a/ui/src/api/admin/system/chat-user-auth.ts
+++ b/ui/src/api/admin/system/chat-user-auth.ts
@@ -17,21 +17,8 @@ const postAuthSettingConnection = (setting: AuthProviderSetting) => {
 const putAuthSetting = (authType: AuthProviderType, setting: AuthProviderSetting) => {
   return put<AuthProviderSetting, boolean>(`${prefix}/${authType}/info`, setting)
 }
-
-/** 获取对话用户登录设置。 */
-const getLoginSetting = () => {
-  return get<LoginAuthSetting>(`${prefix}/setting`)
-}
-
-/** 保存对话用户登录设置。 */
-const putLoginSetting = (setting: LoginAuthSetting) => {
-  return put<LoginAuthSetting, boolean>(`${prefix}/setting`, setting)
-}
-
 export default {
   getAuthSetting,
-  getLoginSetting,
   postAuthSettingConnection,
   putAuthSetting,
-  putLoginSetting,
 }
diff --git a/ui/src/api/admin/system/role.ts b/ui/src/api/admin/system/role.ts
new file mode 100644
index 00000000000..4ca172d7326
--- /dev/null
+++ b/ui/src/api/admin/system/role.ts
@@ -0,0 +1,70 @@
+import { del, get, post } from '../core/request'
+import type { ParamsPage, ResponsePage } from '../core/types'
+import type {
+  CreateRoleMembersRequest,
+  RequestParams,
+  RoleItem,
+  RoleMember,
+  RolePermissionModule,
+  SaveRoleRequest,
+  SaveRolePermissionRequest,
+  RoleType,
+} from '@/api/types'
+
+const prefix = '/system/role'
+
+/** 获取内置角色与自定义角色列表。 */
+const getRoleList = () => {
+  return get<{ internal_role: RoleItem[]; custom_role: RoleItem[] }>(prefix)
+}
+
+/** 创建或重命名自定义角色。 */
+const postRole = (role: SaveRoleRequest) => {
+  return post<SaveRoleRequest, RoleItem>(prefix, role)
+}
+
+/** 删除自定义角色。 */
+const deleteRole = (roleId: string) => {
+  return del<boolean>(`${prefix}/${roleId}`)
+}
+
+
+/** 获取指定角色的权限配置。 */
+const getRolePermissionList = (roleId: string) => {
+  return get<RolePermissionModule[]>(`${prefix}/${roleId}/permission`)
+}
+
+
+/** 保存指定角色的权限配置。 */
+const postRolePermissions = (roleId: string, permissions: SaveRolePermissionRequest[]) => {
+  return post<SaveRolePermissionRequest[], boolean>(`${prefix}/${roleId}/permission`, permissions)
+}
+
+/** 获取指定角色的成员分页列表。 */
+const getRoleMemberList = (roleId: string, page: ParamsPage, query?: RequestParams) => {
+  return get<ResponsePage<RoleMember>>(
+    `${prefix}/${roleId}/user_list/${page.currentPage}/${page.pageSize}`,
+    query,
+  )
+}
+
+/** 为指定角色添加成员。 */
+const postRoleMembers = (roleId: string, request: CreateRoleMembersRequest) => {
+  return post<CreateRoleMembersRequest, boolean>(`${prefix}/${roleId}/add_member`, request)
+}
+
+/** 从指定角色移除成员。 */
+const deleteRoleMember = (roleId: string, userRelationId: string) => {
+  return del<boolean>(`${prefix}/${roleId}/remove_member/${userRelationId}`)
+}
+
+export default {
+  deleteRole,
+  deleteRoleMember,
+  getRoleList,
+  getRoleMemberList,
+  getRolePermissionList,
+  postRole,
+  postRoleMembers,
+  postRolePermissions,
+}
diff --git a/ui/src/api/types/index.ts b/ui/src/api/types/index.ts
index 9da931b22cf..ea30261778a 100644
--- a/ui/src/api/types/index.ts
+++ b/ui/src/api/types/index.ts
@@ -2,10 +2,11 @@
 export type * from './common'
 export type * from './chat-user'
 export type * from './chat-user-groups'
-export type * from './login'
+export * from './login'
 export type * from './system-user'
 export type * from './system-user-groups'
 export type * from './system-workspace'
 export type * from './system-authentication'
 export type * from './system-operate-log'
+export * from './system-role'
 export type * from './system-email'
diff --git a/ui/src/api/types/login.ts b/ui/src/api/types/login.ts
index 92560202a0e..037095d87c2 100644
--- a/ui/src/api/types/login.ts
+++ b/ui/src/api/types/login.ts
@@ -1,15 +1,19 @@
 /** 登录 API 与登录页面共同使用的业务类型。 */
 
-export type LoginMethod =
-  | 'CAS'
-  | 'LDAP'
-  | 'LOCAL'
-  | 'OAuth2'
-  | 'OIDC'
-  | 'SAML2'
-  | 'dingtalk'
-  | 'lark'
-  | 'wecom'
+/** 后端登录方式协议值；新增或修改登录方式时以此处为唯一数据源。 */
+export const LOGIN_METHOD = {
+  CAS: 'CAS',
+  DINGTALK: 'dingtalk',
+  LDAP: 'LDAP',
+  LARK: 'lark',
+  LOCAL: 'LOCAL',
+  OAUTH2: 'OAuth2',
+  OIDC: 'OIDC',
+  SAML2: 'SAML2',
+  WECOM: 'wecom',
+} as const
+
+export type LoginMethod = (typeof LOGIN_METHOD)[keyof typeof LOGIN_METHOD]
 
 export interface LoginConfig {
   default_value: LoginMethod
@@ -17,7 +21,10 @@ export interface LoginConfig {
   max_attempts: number
 }
 
-export type QrCodeProvider = Extract<LoginMethod, 'dingtalk' | 'lark' | 'wecom'>
+export type QrCodeProvider = Extract<
+  LoginMethod,
+  typeof LOGIN_METHOD.DINGTALK | typeof LOGIN_METHOD.LARK | typeof LOGIN_METHOD.WECOM
+>
 
 export interface QrCodeConfig {
   agent_id?: string
diff --git a/ui/src/api/types/system-role.ts b/ui/src/api/types/system-role.ts
new file mode 100644
index 00000000000..27616b976d4
--- /dev/null
+++ b/ui/src/api/types/system-role.ts
@@ -0,0 +1,65 @@
+/** 后端角色类型协议值；新增或修改角色类型时以此处为唯一数据源。 */
+export const ROLE_TYPE = {
+  ADMIN: 'ADMIN',
+  USER: 'USER',
+  WORKSPACE_MANAGE: 'WORKSPACE_MANAGE',
+} as const
+
+export type RoleType = (typeof ROLE_TYPE)[keyof typeof ROLE_TYPE]
+
+export interface RoleItem {
+  id: string
+  role_name: string
+  type: RoleType
+  create_user: string
+  internal: boolean
+  user_count?: number
+}
+
+export interface RolePermission {
+  id: string
+  name: string
+  enable: boolean
+}
+
+export interface RolePermissionFeature {
+  id: string
+  name: string
+  enable: boolean
+  permission: RolePermission[]
+}
+
+export interface RolePermissionModule {
+  id: string
+  name: string
+  children: RolePermissionFeature[]
+}
+
+export interface SaveRoleRequest {
+  role_id?: string
+  role_name: string
+  role_type?: RoleType
+}
+
+export interface SaveRolePermissionRequest {
+  id: string
+  enable: boolean
+}
+
+export interface RoleMember {
+  user_relation_id: string
+  user_id: string
+  username: string
+  nick_name: string
+  workspace_id: string
+  workspace_name: string
+}
+
+export interface CreateRoleMemberItem {
+  user_ids: string[]
+  workspace_ids?: string[]
+}
+
+export interface CreateRoleMembersRequest {
+  members: CreateRoleMemberItem[]
+}
diff --git a/ui/src/components.d.ts b/ui/src/components.d.ts
index 82916575ca6..7f84e02e11b 100644
--- a/ui/src/components.d.ts
+++ b/ui/src/components.d.ts
@@ -13,6 +13,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     LayoutAside: typeof import('./components/global/mk-view-layout/layout-aside.vue')['default']
+    MkCollapse: typeof import('./components/global/mk-collapse/index.vue')['default']
     MkComplexSearch: typeof import('./components/global/mk-complex-search/index.vue')['default']
     MkDialog: typeof import('./components/global/mk-dialog/index.vue')['default']
     MkDrawer: typeof import('./components/global/mk-drawer/index.vue')['default']
@@ -35,6 +36,7 @@ declare module 'vue' {
 // For TSX support
 declare global {
   const LayoutAside: typeof import('./components/global/mk-view-layout/layout-aside.vue')['default']
+  const MkCollapse: typeof import('./components/global/mk-collapse/index.vue')['default']
   const MkComplexSearch: typeof import('./components/global/mk-complex-search/index.vue')['default']
   const MkDialog: typeof import('./components/global/mk-dialog/index.vue')['default']
   const MkDrawer: typeof import('./components/global/mk-drawer/index.vue')['default']
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index d3def83a89a..99388f1ae91 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -35,6 +35,8 @@ src/components/
 ├── global/                       # 高频、稳定的基础组件，自动注册
 │   ├── mk-complex-search/
 │   │   └── index.vue             # 字段选择与输入或枚举条件组合搜索框
+│   ├── mk-collapse/
+│   │   └── index.vue             # 带标题和过渡动画的折叠内容区
 │   ├── mk-dialog/
 │   │   └── index.vue             # 统一对话框关闭行为和内容滚动布局
 │   ├── mk-dropdown/
@@ -61,7 +63,8 @@ src/components/
 │   └── mk-tag-group/
 │       └── index.vue             # 标签折叠和剩余标签浮层
 ├── mk-search-list/
-│   └── index.vue                 # 搜索框与剩余空间滚动列表，手动导入
+│   ├── index.vue                 # 搜索框与剩余空间滚动列表，手动导入
+│   └── mk-list-item.vue          # 列表与业务分组列表复用的私有行结构
 ├── mk-workspace-dropdown/
 │   └── index.vue                 # 工作空间选择下拉框，手动导入
 └── mk-workspace-relation-tags/
@@ -117,6 +120,17 @@ Element Plus 使用 `ElOnlyChild` 处理浮层触发器。`el-tooltip`、`el-pop
 
 ## 自动注册组件
 
+### MkCollapse
+
+带标题触发器和展开过渡动画的内容折叠组件。通过 `v-model` 控制展开状态，默认展开；点击标题行
+会切换状态，默认插槽放置折叠内容。
+
+```vue
+<MkCollapse v-model="expanded" title="系统管理员">
+  <div>折叠内容</div>
+</MkCollapse>
+```
+
 ### MkEmpty
 
 全局空状态组件，基于 `el-empty` 统一图片和默认文案。`type` 默认为 `default`，展示“暂无数据”；
diff --git a/ui/src/components/global/mk-collapse/index.vue b/ui/src/components/global/mk-collapse/index.vue
new file mode 100644
index 00000000000..28528985a7a
--- /dev/null
+++ b/ui/src/components/global/mk-collapse/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { CaretBottom } from '@element-plus/icons-vue'
+
+/*  目前折叠面板仅仅是基础功能。后期会增加 自定义插槽*/
+
+defineOptions({ name: 'MkCollapse' })
+
+defineProps<{
+  title: string
+}>()
+
+const expanded = defineModel<boolean>({ default: true })
+</script>
+
+<template>
+  <section>
+    <div
+      class="flex w-full cursor-pointer items-center gap-2 py-2 text-left text-N500"
+      @click="expanded = !expanded"
+    >
+      <MkIcon
+        :icon="CaretBottom"
+        :size="14"
+        class="transition-transform"
+        :class="{ '-rotate-90': !expanded }"
+      />
+      <span>{{ title }}</span>
+    </div>
+    <el-collapse-transition>
+      <div v-if="expanded">
+        <slot />
+      </div>
+    </el-collapse-transition>
+  </section>
+</template>
diff --git a/ui/src/components/global/mk-table/index.vue b/ui/src/components/global/mk-table/index.vue
index 43121c7a8c4..866df282bab 100644
--- a/ui/src/components/global/mk-table/index.vue
+++ b/ui/src/components/global/mk-table/index.vue
@@ -19,7 +19,7 @@ const props = withDefaults(
     maxTableHeight?: number
     paginationConfig?: PaginationConfig
     resizable?: boolean
-    search?: boolean
+    isSearching?: boolean
   }>(),
   {
     data: () => [],
@@ -42,7 +42,9 @@ const paginationPageSizes = computed(() => props.paginationConfig?.pageSizes ??
 /** 表格高度 */
 const tableHeight = ref(window.innerHeight - props.maxTableHeight)
 function updateTableHeight() {
-  tableHeight.value = window.innerHeight - props.maxTableHeight
+  tableHeight.value = props.paginationConfig
+    ? window.innerHeight - props.maxTableHeight
+    : window.innerHeight - props.maxTableHeight + 50
 }
 
 /** 选择操作栏 */
@@ -151,8 +153,8 @@ defineExpose({ clearSelection, tableRef })
 
 <template>
   <MkEmpty
-    v-if="!props.paginationConfig?.total"
-    :type="search ? 'search' : ''"
+    v-if="props.paginationConfig ? !props.paginationConfig?.total : props.data.length === 0"
+    :type="isSearching ? 'search' : ''"
     class="flex-1"
   />
   <div
diff --git a/ui/src/components/global/mk-view-layout/index.vue b/ui/src/components/global/mk-view-layout/index.vue
index 2d0ebf8dd2b..6f8f4684fdb 100644
--- a/ui/src/components/global/mk-view-layout/index.vue
+++ b/ui/src/components/global/mk-view-layout/index.vue
@@ -24,8 +24,6 @@ defineSlots<{
 const route = useRoute()
 const title = computed(() => props.title || route.meta.title || '')
 const slots = useSlots()
-const LayoutHeader: FunctionalComponent = (_, { slots }) =>
-  h('header', { class: 'flex-between shrink-0 py-4' }, slots.default?.())
 
 function flattenSlotNodes(children: unknown): VNode[] {
   const childNodes = Array.isArray(children) ? children : [children]
@@ -37,6 +35,9 @@ function flattenSlotNodes(children: unknown): VNode[] {
   })
 }
 
+const LayoutHeader: FunctionalComponent = (_, { slots }) =>
+  h('header', { class: 'flex-between shrink-0 py-4 gap-4' }, slots.default?.())
+
 const LayoutContent: FunctionalComponent = () => {
   const contentNodes = flattenSlotNodes(
     slots.default?.({ Header: LayoutHeader, title: title.value }),
@@ -46,7 +47,7 @@ const LayoutContent: FunctionalComponent = () => {
   return [
     hasCustomHeader || !title.value
       ? null
-      : h('header', { class: 'flex-between shrink-0 py-4' }, [h('h4', title.value)]),
+      : h('header', { class: 'flex-between shrink-0 py-4 gap-4' }, [h('h4', title.value)]),
     ...contentNodes,
   ]
 }
diff --git a/ui/src/components/mk-search-list/index.vue b/ui/src/components/mk-search-list/index.vue
index a18b0e7ab73..946c07eea17 100644
--- a/ui/src/components/mk-search-list/index.vue
+++ b/ui/src/components/mk-search-list/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
 import type { ScrollbarDirection, ScrollbarInstance } from 'element-plus'
 import { computed, nextTick, ref, watch } from 'vue'
+import MkListItem from './mk-list-item.vue'
 
 defineOptions({ name: 'MkSearchList' })
 
@@ -48,7 +49,7 @@ defineSlots<{
   action(props: { row: T; index: number }): unknown
   'action-dropdown'(props: { row: T; index: number }): unknown
   empty(): unknown
-  row(props: { row: T; index: number; active: boolean }): unknown
+  default(props: { row: T; index: number; active: boolean }): unknown
 }>()
 
 const currentValue = ref<unknown>(componentProps.defaultActive)
@@ -108,35 +109,23 @@ function selectRow(row: T, index: number) {
     <el-scrollbar ref="scrollbarRef" class="min-h-0 flex-1 px-4 py-2" @end-reached="loadMore">
       <div v-if="filteredData.length" class="flex flex-col gap-1">
         <template v-for="(row, index) in renderData" :key="String(row[valueField] ?? index)">
-          <div
-            class="group flex cursor-pointer items-center rounded-md p-2 hover:bg-N900/10"
-            :class="{
-              'bg-primary/10 hover:bg-primary/10 font-medium text-primary':
-                currentValue === row[valueField],
-            }"
+          <MkListItem
+            :active="currentValue === row[valueField]"
+            :index="index"
+            :label-field="labelField"
+            :row="row"
             @click="selectRow(row, index)"
           >
-            <slot name="row" :row="row" :index="index" :active="currentValue === row[valueField]">
-              <span class="min-w-0 flex-1 truncate">{{ row[labelField] }}</span>
-            </slot>
-            <!-- 操作区保留布局宽度，hover/focus 时显示，并阻止触发行点击。 -->
-            <div
-              v-if="$slots.action || $slots['action-dropdown']"
-              class="pointer-events-none ml-auto flex shrink-0 items-center font-normal text-N900 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
-              @click.stop
-              @keydown.stop
-            >
-              <MkDropdown v-if="$slots['action-dropdown']" trigger="click" :teleported="false">
-                <el-button class="-mr-1" text>
-                  <MkIcon name="icon_more_outlined" />
-                </el-button>
-                <template #dropdown>
-                  <slot name="action-dropdown" :row="row" :index="index" />
-                </template>
-              </MkDropdown>
-              <slot v-else name="action" :row="row" :index="index" />
-            </div>
-          </div>
+            <template v-if="$slots.default" #default="slotProps">
+              <slot v-bind="slotProps" />
+            </template>
+            <template v-if="$slots.action" #action="slotProps">
+              <slot name="action" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots['action-dropdown']" #action-dropdown="slotProps">
+              <slot name="action-dropdown" v-bind="slotProps" />
+            </template>
+          </MkListItem>
         </template>
       </div>
       <slot v-else name="empty">
diff --git a/ui/src/components/mk-search-list/mk-list-item.vue b/ui/src/components/mk-search-list/mk-list-item.vue
new file mode 100644
index 00000000000..30d4f0af234
--- /dev/null
+++ b/ui/src/components/mk-search-list/mk-list-item.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+defineOptions({ name: 'MkSearchListItem' })
+
+defineProps<{
+  active?: boolean
+  index: number
+  labelField: keyof T & string
+  row: T
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+defineSlots<{
+  action(props: { row: T; index: number }): unknown
+  'action-dropdown'(props: { row: T; index: number }): unknown
+  default?(props: { row: T; index: number; active: boolean }): unknown
+}>()
+</script>
+
+<template>
+  <div
+    class="group flex cursor-pointer items-center rounded-md p-2 hover:bg-N900/10"
+    :class="{ 'bg-primary/10 font-medium text-primary hover:bg-primary/10': active }"
+    @click="emit('click')"
+  >
+    <slot :row="row" :index="index" :active="Boolean(active)">
+      <span class="min-w-0 flex-1 truncate">{{ row[labelField] }}</span>
+    </slot>
+    <!-- 操作区保留布局宽度，hover/focus 时显示，并阻止触发行点击。 -->
+    <div
+      v-if="$slots.action || $slots['action-dropdown']"
+      class="pointer-events-none ml-auto flex shrink-0 items-center font-normal text-N900 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
+      @click.stop
+      @keydown.stop
+    >
+      <MkDropdown v-if="$slots['action-dropdown']" trigger="click" :teleported="false">
+        <el-button class="-mr-1" text>
+          <MkIcon name="icon_more_outlined" />
+        </el-button>
+        <template #dropdown>
+          <slot name="action-dropdown" :row="row" :index="index" />
+        </template>
+      </MkDropdown>
+      <slot v-else name="action" :row="row" :index="index" />
+    </div>
+  </div>
+</template>
diff --git a/ui/src/constants/CONSTANT_README.md b/ui/src/constants/CONSTANT_README.md
index 21d7087d898..a9fa721bed6 100644
--- a/ui/src/constants/CONSTANT_README.md
+++ b/ui/src/constants/CONSTANT_README.md
@@ -13,3 +13,8 @@ src/constants/
 
 不要创建收集无关常量的通用文件，也不要为了统一导出而新增只做二次转发的 `index.ts`。
 常量名称使用能够表达所属领域和用途的全大写命名，使用方从具体文件直接导入。
+
+后端字段的固定协议值不是前端展示常量，应在对应的 `src/api/types/<domain>.ts` 中维护，并由
+协议常量派生类型。`constants` 只维护标签、颜色、选项等前端映射；映射的键应引用 API 协议
+常量。例如角色类型以 `src/api/types/system-role.ts` 为准，登录方式以
+`src/api/types/login.ts` 为准，`constants/auth.ts` 只维护它们的展示文案。
diff --git a/ui/src/constants/auth.ts b/ui/src/constants/auth.ts
index 96b409fe69b..5f9910122bb 100644
--- a/ui/src/constants/auth.ts
+++ b/ui/src/constants/auth.ts
@@ -1,15 +1,15 @@
-import type { LoginMethod } from '@/api/types'
+import { LOGIN_METHOD, ROLE_TYPE, type LoginMethod, type RoleType } from '@/api/types'
 
 export const LOGIN_METHOD_LABELS: Record<LoginMethod, string> = {
-  CAS: 'CAS',
-  LDAP: 'LDAP',
-  LOCAL: '账号登录',
-  OAuth2: 'OAuth2',
-  OIDC: 'OIDC',
-  SAML2: 'SAML2',
-  dingtalk: '钉钉',
-  lark: '飞书',
-  wecom: '企业微信',
+  [LOGIN_METHOD.CAS]: 'CAS',
+  [LOGIN_METHOD.LDAP]: 'LDAP',
+  [LOGIN_METHOD.LOCAL]: '账号登录',
+  [LOGIN_METHOD.OAUTH2]: 'OAuth2',
+  [LOGIN_METHOD.OIDC]: 'OIDC',
+  [LOGIN_METHOD.SAML2]: 'SAML2',
+  [LOGIN_METHOD.DINGTALK]: '钉钉',
+  [LOGIN_METHOD.LARK]: '飞书',
+  [LOGIN_METHOD.WECOM]: '企业微信',
 }
 
 export const SCAN_FIELD_LABELS: Record<string, string> = {
@@ -19,3 +19,9 @@ export const SCAN_FIELD_LABELS: Record<string, string> = {
   callback_url: '回调地址',
   corp_id: 'Corp ID',
 }
+
+export const ROLE_TYPE_LABELS: Record<RoleType, string> = {
+  [ROLE_TYPE.ADMIN]: '系统管理员',
+  [ROLE_TYPE.WORKSPACE_MANAGE]: '工作空间管理员',
+  [ROLE_TYPE.USER]: '普通用户',
+}
diff --git a/ui/src/layout/avatar-dropdown/index.vue b/ui/src/layout/avatar-dropdown/index.vue
index 10447c36a84..e6e206285f0 100644
--- a/ui/src/layout/avatar-dropdown/index.vue
+++ b/ui/src/layout/avatar-dropdown/index.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { Setting } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
 import LoginApi from '@/api/admin/auth/login'
+import { LOGIN_METHOD } from '@/api/types'
 import { useStore } from '@/stores'
 
 defineOptions({ name: 'AvatarDropdown' })
@@ -23,7 +24,8 @@ function handleLogout() {
   LoginApi.postLogout().then(() => {
     auth.clearToken()
     router.push(
-      loginMode && ['CAS', 'OIDC', 'OAuth2'].includes(loginMode)
+      loginMode &&
+        ([LOGIN_METHOD.CAS, LOGIN_METHOD.OIDC, LOGIN_METHOD.OAUTH2] as string[]).includes(loginMode)
         ? { name: 'login', query: { login_mode: 'manual' } }
         : { name: 'login' },
     )
diff --git a/ui/src/stores/user.ts b/ui/src/stores/user.ts
index 8aebcbd3384..1e5916ae285 100644
--- a/ui/src/stores/user.ts
+++ b/ui/src/stores/user.ts
@@ -3,6 +3,7 @@
 import { defineStore } from 'pinia'
 import CurrentUserApi from '@/api/admin/auth/current-user'
 import type { CurrentUserInfo } from '@/api/admin/auth/types'
+import { ROLE_TYPE } from '@/api/types'
 
 const LANGUAGE_STORAGE_KEY = 'MaxKB-locale'
 
@@ -22,7 +23,7 @@ export const useUserStore = defineStore('user', {
   }),
 
   getters: {
-    is_admin: (state) => state.userInfo?.role.includes('ADMIN') ?? false,
+    is_admin: (state) => state.userInfo?.role.includes(ROLE_TYPE.ADMIN) ?? false,
 
     /** 当前用户角色集合，供权限模块（@/permission）判定使用。getter 已缓存。 */
     roleSet: (state): Set<string> => new Set(state.userInfo?.role ?? []),
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 2ab58a2c05a..7ce3ebda3fd 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -218,7 +218,6 @@
   --el-checkbox-input-width: 16px;
   --el-checkbox-input-height: 16px;
   margin: 0;
-  min-width: 120px;
 }
 
 /* dialog */
@@ -529,6 +528,32 @@
   }
 }
 
+.el-radio-group {
+  &:has(.el-radio-button) {
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    padding: var(--spacing);
+    gap: var(--spacing);
+  }
+}
+.el-radio-button {
+  --el-radio-button-checked-bg-color: rgb(var(--mk-primary-rgb) / 10%);
+  --el-radio-button-checked-text-color: var(--el-color-primary);
+  &__inner {
+    border: none !important;
+    outline: none !important;
+    padding: 5px 8px;
+    font-weight: 400;
+    border-radius: var(--el-border-radius-small) !important;
+  }
+  &.is-active {
+    .el-radio-button__inner {
+      font-weight: 500 !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
 /* select */
 .el-select {
   &__caret {
@@ -601,6 +626,11 @@
   --el-tabs-header-height: 34px;
   &__header {
     margin: 0;
+    flex-shrink: 0;
+  }
+  &__content {
+    min-height: 0;
+    flex: 1;
   }
   &__item {
     padding: 2px 14px;
@@ -668,15 +698,19 @@
   max-width: 115px;
   border: none;
   padding: 0 6px;
-  &:not(&--small) {
-    --el-tag-font-size: 14px;
-  }
-
+  font-weight: 400 !important;
   &__content {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  &:not(&--small) {
+    --el-tag-font-size: 14px;
+  }
+  &--small {
+    padding: 4px;
+  }
+
   &--info {
     --el-tag-text-color: var(--el-text-color-primary) !important;
     --el-tag-bg-color: var(--mk-N900-transparent-10) !important;
diff --git a/ui/src/views/login/LoginView.vue b/ui/src/views/login/LoginView.vue
index 0efc1e88530..0309df8c571 100644
--- a/ui/src/views/login/LoginView.vue
+++ b/ui/src/views/login/LoginView.vue
@@ -2,7 +2,7 @@
 import { computed, onBeforeMount, ref } from 'vue'
 import BaseInfoApi from '@/api/admin/auth/base-info.ts'
 import { useStore } from '@/stores'
-import type { LoginConfig, QrCodeProvider } from '@/api/types/index.ts'
+import { LOGIN_METHOD, type LoginConfig, type QrCodeProvider } from '@/api/types/index.ts'
 import LoginLayout from './components/LoginLayout.vue'
 import AccountLogin from './modes/AccountLogin.vue'
 import QrCodeLogin from './modes/QrCodeLogin.vue'
@@ -12,8 +12,8 @@ const { auth, theme } = useStore()
 
 const isLoading = ref(true)
 const loginConfig = ref<LoginConfig>({
-  default_value: 'LOCAL',
-  login_methods: ['LOCAL'],
+  default_value: LOGIN_METHOD.LOCAL,
+  login_methods: [LOGIN_METHOD.LOCAL],
   max_attempts: 1,
 })
 const loginMode = ref<'account' | 'qr-code'>('account')
@@ -31,7 +31,7 @@ const accountLoginMethods = computed(() =>
 const accountLoginConfig = computed<LoginConfig>(() => ({
   ...loginConfig.value,
   default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider)
-    ? 'LOCAL'
+    ? LOGIN_METHOD.LOCAL
     : loginConfig.value.default_value,
   login_methods: accountLoginMethods.value,
 }))
@@ -39,7 +39,7 @@ const qrCodeLoginConfig = computed<LoginConfig>(() => ({
   ...loginConfig.value,
   default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider)
     ? loginConfig.value.default_value
-    : 'wecom',
+    : LOGIN_METHOD.WECOM,
   login_methods: qrCodeProviders.value,
 }))
 const showLoginModeSwitch = computed(
@@ -58,8 +58,8 @@ onBeforeMount(() => {
           } else {
             loginConfig.value = {
               max_attempts: 1,
-              default_value: 'LOCAL',
-              login_methods: ['LOCAL'],
+              default_value: LOGIN_METHOD.LOCAL,
+              login_methods: [LOGIN_METHOD.LOCAL],
             }
           }
         })
@@ -69,8 +69,8 @@ onBeforeMount(() => {
 
       loginConfig.value = {
         max_attempts: 1,
-        default_value: 'LOCAL',
-        login_methods: ['LOCAL'],
+        default_value: LOGIN_METHOD.LOCAL,
+        login_methods: [LOGIN_METHOD.LOCAL],
       }
     })
 
diff --git a/ui/src/views/login/constants.ts b/ui/src/views/login/constants.ts
index 27034b432ff..926379dfe0a 100644
--- a/ui/src/views/login/constants.ts
+++ b/ui/src/views/login/constants.ts
@@ -1,3 +1,7 @@
-import type { QrCodeProvider } from '@/api/types'
+import { LOGIN_METHOD, type QrCodeProvider } from '@/api/types'
 
-export const qrCodeLoginMethods: QrCodeProvider[] = ['wecom', 'dingtalk', 'lark']
+export const qrCodeLoginMethods: QrCodeProvider[] = [
+  LOGIN_METHOD.WECOM,
+  LOGIN_METHOD.DINGTALK,
+  LOGIN_METHOD.LARK,
+]
diff --git a/ui/src/views/login/modes/AccountLogin.vue b/ui/src/views/login/modes/AccountLogin.vue
index 66994b59ab7..3779c49fbbb 100644
--- a/ui/src/views/login/modes/AccountLogin.vue
+++ b/ui/src/views/login/modes/AccountLogin.vue
@@ -7,7 +7,7 @@ import ExternalLoginApi from '@/api/admin/auth/external-login'
 import LoginApi from '@/api/admin/auth/login'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth'
 import { useStore } from '@/stores'
-import type { LoginConfig, LoginMethod } from '@/api/types'
+import { LOGIN_METHOD, type LoginConfig, type LoginMethod } from '@/api/types'
 import { MsgConfirm } from '@/utils/message'
 
 interface AccountLoginForm {
@@ -27,16 +27,22 @@ const router = useRouter()
 const { auth } = useStore()
 const isSubmitting = ref(false)
 const identifyCode = ref('')
-const loginMethod = ref<LoginMethod>(props.loginConfig?.default_value ?? 'LOCAL')
+const loginMethod = ref<LoginMethod>(props.loginConfig?.default_value ?? LOGIN_METHOD.LOCAL)
 
 const accountLoginMethods = computed(() => {
   let loginMethods = [...(props.loginConfig?.login_methods ?? [])]
-  if (loginMethods.includes('LOCAL')) {
-    loginMethods = ['LOCAL', ...loginMethods.filter((method) => method !== 'LOCAL')]
-  } else if (loginMethods.includes('LDAP')) {
-    loginMethods = ['LDAP', ...loginMethods.filter((method) => method !== 'LDAP')]
+  if (loginMethods.includes(LOGIN_METHOD.LOCAL)) {
+    loginMethods = [
+      LOGIN_METHOD.LOCAL,
+      ...loginMethods.filter((method) => method !== LOGIN_METHOD.LOCAL),
+    ]
+  } else if (loginMethods.includes(LOGIN_METHOD.LDAP)) {
+    loginMethods = [
+      LOGIN_METHOD.LDAP,
+      ...loginMethods.filter((method) => method !== LOGIN_METHOD.LDAP),
+    ]
   }
-  if (loginMethods.length === 1 && loginMethods[0] === 'LOCAL') return []
+  if (loginMethods.length === 1 && loginMethods[0] === LOGIN_METHOD.LOCAL) return []
 
   return loginMethods
 })
@@ -60,7 +66,7 @@ const handleLogin = async () => {
   await accountLoginFormRef.value.validate((valid) => {
     if (valid) {
       isSubmitting.value = true
-      if (loginMethod.value === 'LDAP') {
+      if (loginMethod.value === LOGIN_METHOD.LDAP) {
         auth
           .asyncLdapLogin(accountLoginForm)
           .then(() => {
@@ -96,14 +102,14 @@ const handleLogin = async () => {
 }
 
 const refreshCaptcha = () => {
-  if (loginMethod.value === 'LDAP') return
+  if (loginMethod.value === LOGIN_METHOD.LDAP) return
   LoginApi.getCaptcha(accountLoginForm.username).then((res) => {
     identifyCode.value = res.captcha
   })
 }
 
 const selectLoginMethod = (method: LoginMethod) => {
-  if (method !== 'LOCAL' && method !== 'LDAP') {
+  if (method !== LOGIN_METHOD.LOCAL && method !== LOGIN_METHOD.LDAP) {
     void redirectExternalLogin(method, true)
     return
   }
@@ -129,25 +135,25 @@ const redirectExternalLogin = async (method: LoginMethod, needConfirm: boolean)
 }
 
 const getExternalLoginUrl = (authType: LoginMethod): Promise<string> => {
-  if (authType === 'SAML2') return ExternalLoginApi.getSamlLoginUrl()
+  if (authType === LOGIN_METHOD.SAML2) return ExternalLoginApi.getSamlLoginUrl()
 
   return ExternalLoginApi.getExternalAuthSetting(authType).then(({ config }) => {
     if (!config) return ''
 
     const redirectUrl = `${config.redirectUrl}`
-    if (authType === 'CAS') {
+    if (authType === LOGIN_METHOD.CAS) {
       if (!config.ldpUri) return ''
       const separator = config.ldpUri.includes('?') ? '&' : '?'
       return `${config.ldpUri}${separator}service=${encodeURIComponent(redirectUrl)}`
     }
-    if (authType === 'OIDC') {
+    if (authType === LOGIN_METHOD.OIDC) {
       if (!config.authEndpoint || !config.clientId) return ''
       const scope = config.scope || 'openid+profile+email'
       let url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
       if (config.state) url += `&state=${config.state}`
       return url
     }
-    if (authType === 'OAuth2') {
+    if (authType === LOGIN_METHOD.OAUTH2) {
       if (!config.authEndpoint || !config.clientId) return ''
       let url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${crypto.randomUUID()}`
       if (config.scope) url += `&scope=${config.scope}`
@@ -164,7 +170,9 @@ onMounted(() => {
     const loginMethod = loginMethods[0]
     if (
       loginMethod &&
-      ['CAS', 'OIDC', 'OAuth2', 'SAML2'].some((authType) => authType === loginMethod)
+      [LOGIN_METHOD.CAS, LOGIN_METHOD.OIDC, LOGIN_METHOD.OAUTH2, LOGIN_METHOD.SAML2].some(
+        (authType) => authType === loginMethod,
+      )
     ) {
       void redirectExternalLogin(loginMethod, false)
     }
@@ -176,7 +184,7 @@ onMounted(() => {
   <div class="flex h-full flex-col">
     <div class="min-h-0 flex-1">
       <h2 class="mb-4">
-        {{ loginMethod === 'LDAP' ? 'LDAP 登录' : LOGIN_METHOD_LABELS[loginMethod] }}
+        {{ loginMethod === LOGIN_METHOD.LDAP ? 'LDAP 登录' : LOGIN_METHOD_LABELS[loginMethod] }}
       </h2>
 
       <el-form
@@ -202,7 +210,7 @@ onMounted(() => {
             type="password"
           />
         </el-form-item>
-        <div v-if="loginMethod !== 'LDAP' && identifyCode" class="flex gap-2">
+        <div v-if="loginMethod !== LOGIN_METHOD.LDAP && identifyCode" class="flex gap-2">
           <el-form-item prop="captcha" class="flex-1">
             <el-input
               v-model="accountLoginForm.captcha"
@@ -244,7 +252,7 @@ onMounted(() => {
             @click="selectLoginMethod(method)"
             v-if="loginMethod !== method"
           >
-            <MkIcon v-if="method === 'LOCAL'" name="icon_pc_outlined" :size="22.5" />
+            <MkIcon v-if="method === LOGIN_METHOD.LOCAL" name="icon_pc_outlined" :size="22.5" />
             <span v-else>{{ method }}</span>
           </el-button>
         </template>
diff --git a/ui/src/views/login/modes/QrCodeLogin.vue b/ui/src/views/login/modes/QrCodeLogin.vue
index e306a8705b8..db1e1313591 100644
--- a/ui/src/views/login/modes/QrCodeLogin.vue
+++ b/ui/src/views/login/modes/QrCodeLogin.vue
@@ -2,7 +2,12 @@
 import { computed, onMounted, ref } from 'vue'
 import ExternalLoginApi from '@/api/admin/auth/external-login'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth.ts'
-import type { LoginConfig, QrCodeConfig, QrCodeProvider } from '@/api/types/index.ts'
+import {
+  LOGIN_METHOD,
+  type LoginConfig,
+  type QrCodeConfig,
+  type QrCodeProvider,
+} from '@/api/types/index.ts'
 import DingTalkQrCode from '../scanComponents/dingtalkQrCode.vue'
 import LarkQrCode from '../scanComponents/larkQrCode.vue'
 import WecomQrCode from '../scanComponents/wecomQrCode.vue'
@@ -14,13 +19,13 @@ const qrCodeLoginMethods = computed(() => props.loginConfig.login_methods ?? [])
 
 const qrCodeConfigs = ref<Partial<Record<QrCodeProvider, QrCodeConfig>>>({})
 const qrCodeProvider = ref<QrCodeProvider>(
-  (props.loginConfig.default_value as QrCodeProvider) ?? 'wecom',
+  (props.loginConfig.default_value as QrCodeProvider) ?? LOGIN_METHOD.WECOM,
 )
 
 const providerComponents = {
-  dingtalk: DingTalkQrCode,
-  lark: LarkQrCode,
-  wecom: WecomQrCode,
+  [LOGIN_METHOD.DINGTALK]: DingTalkQrCode,
+  [LOGIN_METHOD.LARK]: LarkQrCode,
+  [LOGIN_METHOD.WECOM]: WecomQrCode,
 }
 
 const currentConfig = computed(() => qrCodeConfigs.value[qrCodeProvider.value])
diff --git a/ui/src/views/system/chat/authentication/AuthenticationView.vue b/ui/src/views/system/chat/authentication/AuthenticationView.vue
index de7f6789136..f8e83df67e8 100644
--- a/ui/src/views/system/chat/authentication/AuthenticationView.vue
+++ b/ui/src/views/system/chat/authentication/AuthenticationView.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { ref, type Component } from 'vue'
+import { LOGIN_METHOD } from '@/api/types'
 import LDAP from './components/LDAP.vue'
 import CAS from './components/CAS.vue'
 import OIDC from './components/OIDC.vue'
 import SCAN from './components/SCANLogin.vue'
 import OAuth2 from './components/OAuth2.vue'
-import Saml2 from './components/Saml2.vue'
-import LoginSetting from './components/LoginSetting.vue'
 
 interface AuthenticationTab {
   component: Component
@@ -14,14 +13,12 @@ interface AuthenticationTab {
   name: string
 }
 
-const activeName = ref('SCAN')
+const activeName = ref(LOGIN_METHOD.LDAP)
 const authenticationTabs: AuthenticationTab[] = [
-  { label: '登录设置', name: 'LoginSetting', component: LoginSetting },
-  { label: 'LDAP', name: 'LDAP', component: LDAP },
-  { label: 'CAS', name: 'CAS', component: CAS },
-  { label: 'OIDC', name: 'OIDC', component: OIDC },
-  { label: 'OAuth2', name: 'OAuth2', component: OAuth2 },
-  { label: 'SAML2', name: 'SAML2', component: Saml2 },
+  { label: 'LDAP', name: LOGIN_METHOD.LDAP, component: LDAP },
+  { label: 'CAS', name: LOGIN_METHOD.CAS, component: CAS },
+  { label: 'OIDC', name: LOGIN_METHOD.OIDC, component: OIDC },
+  { label: 'OAuth2', name: LOGIN_METHOD.OAUTH2, component: OAuth2 },
   { label: '扫码登录', name: 'SCAN', component: SCAN },
 ]
 </script>
@@ -47,15 +44,4 @@ const authenticationTabs: AuthenticationTab[] = [
   </MkViewLayout>
 </template>
 
-<style scoped lang="scss">
-.authentication-tabs {
-  :deep(.el-tabs__header) {
-    flex-shrink: 0;
-  }
-
-  :deep(.el-tabs__content) {
-    min-height: 0;
-    flex: 1;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/ui/src/views/system/chat/authentication/EditSCANDrawer.vue b/ui/src/views/system/chat/authentication/EditSCANDrawer.vue
index 66ee18725b6..3880fe24fef 100644
--- a/ui/src/views/system/chat/authentication/EditSCANDrawer.vue
+++ b/ui/src/views/system/chat/authentication/EditSCANDrawer.vue
@@ -2,7 +2,7 @@
 import { computed, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import ChatUserAuthScanApi from '@/api/admin/system/chat-user-auth-scan'
-import type { QrLoginPlatformRequest } from '@/api/types'
+import { LOGIN_METHOD, type QrLoginPlatformRequest } from '@/api/types'
 import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
 import { MsgSuccess, MsgError } from '@/utils/message'
 
@@ -11,7 +11,7 @@ const visible = ref(false)
 const loading = ref(false)
 const formRef = useTemplateRef<FormInstance>('formRef')
 const form = reactive<QrLoginPlatformRequest>({
-  key: 'wecom',
+  key: LOGIN_METHOD.WECOM,
   isActive: false,
   config: {},
 })
@@ -65,7 +65,7 @@ function close() {
 }
 
 function resetData() {
-  Object.assign(form, { key: 'wecom', isActive: false, config: {} })
+  Object.assign(form, { key: LOGIN_METHOD.WECOM, isActive: false, config: {} })
   formRef.value?.resetFields()
 }
 defineExpose({ open })
diff --git a/ui/src/views/system/chat/authentication/components/CAS.vue b/ui/src/views/system/chat/authentication/components/CAS.vue
index 0d3214a5109..d656f0e4bc8 100644
--- a/ui/src/views/system/chat/authentication/components/CAS.vue
+++ b/ui/src/views/system/chat/authentication/components/CAS.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'CasAuthenticationSetting' })
@@ -11,7 +11,7 @@ const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? '
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'CAS',
+  auth_type: LOGIN_METHOD.CAS,
   config: { ldpUri: '', validateUrl: '', redirectUrl: defaultRedirectUrl },
   is_active: false,
 })
diff --git a/ui/src/views/system/chat/authentication/components/LDAP.vue b/ui/src/views/system/chat/authentication/components/LDAP.vue
index 15fac93b1fe..b815f7b7646 100644
--- a/ui/src/views/system/chat/authentication/components/LDAP.vue
+++ b/ui/src/views/system/chat/authentication/components/LDAP.vue
@@ -2,14 +2,14 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'LdapAuthenticationSetting' })
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'LDAP',
+  auth_type: LOGIN_METHOD.LDAP,
   config: { ldap_server: '', base_dn: '', password: '', ou: '', ldap_filter: '', ldap_mapping: '' },
   is_active: false,
 })
diff --git a/ui/src/views/system/chat/authentication/components/LoginSetting.vue b/ui/src/views/system/chat/authentication/components/LoginSetting.vue
deleted file mode 100644
index f62de530dda..00000000000
--- a/ui/src/views/system/chat/authentication/components/LoginSetting.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import CurrentUserApi from '@/api/admin/auth/current-user'
-import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
-import UserGroupsApi from '@/api/admin/system/user-groups'
-import type { ListItem, LoginAuthSetting, SystemUserGroup, LoginMethod } from '@/api/types'
-import { LOGIN_METHOD_LABELS } from '@/constants/auth'
-import { MsgSuccess } from '@/utils/message'
-import { useStore } from '@/stores'
-
-defineOptions({ name: 'AuthenticationSetting' })
-const { auth } = useStore()
-const authFormRef = useTemplateRef<FormInstance>('authFormRef')
-const loading = ref(false)
-const form = reactive<LoginAuthSetting>({
-  login_methods: ['LOCAL'],
-  default_value: 'LOCAL',
-  max_attempts: 1,
-  failed_attempts: 5,
-  lock_time: 10,
-  role_id: 'USER',
-  workspace_id: 'default',
-  permission: 'NOT_AUTH',
-})
-const rules: FormRules<LoginAuthSetting> = {
-  default_value: [{ required: true, message: '请选择默认登录方式', trigger: 'change' }],
-  login_methods: [{ required: true, message: '请选择登录方式', trigger: 'change' }],
-  role_id: [{ required: true, message: '请选择角色', trigger: 'change' }],
-  workspace_id: [{ required: true, message: '请选择工作空间', trigger: 'change' }],
-}
-
-/* 登录方式加载与提交 */
-const loginMethodOptions = computed(() => form.login_methods)
-const defaultLoginMethodOptions = computed(() => form.auth_types)
-function loadSetting() {
-  loading.value = true
-  return ChatUserAuthApi.getLoginSetting()
-    .then((setting) => {
-      Object.assign(form, setting)
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function handleLoginMethodsChange(loginMethods: string[]) {
-  if (!loginMethods.includes(form.default_value)) {
-    form.default_value = loginMethods[0] ?? ''
-  }
-}
-
-/* 登录次数不为0*/
-function normalizeNonZeroNumber(value: number | undefined) {
-  return value === undefined || value === 0 ? 1 : value
-}
-
-// 角色与工作空间选项
-const roleSettingOptionsLoading = ref(false)
-const roleOptions = ref<ListItem[]>([])
-const workspaceOptions = ref<ListItem[]>([])
-const selectedRoleType = computed(
-  () => roleOptions.value.find(({ id }) => id === form.role_id)?.type,
-)
-const showWorkspaceSelector = computed(() => selectedRoleType.value !== 'ADMIN')
-
-function loadRoleSettingOptions() {
-  roleSettingOptionsLoading.value = true
-  const roleSettingOptionRequests: Promise<void>[] = []
-
-  roleSettingOptionRequests.push(
-    CurrentUserApi.getCurrentUserRoleList().then((roles) => {
-      roleOptions.value = roles
-    }),
-  )
-  if (auth.isEE) {
-    roleSettingOptionRequests.push(
-      CurrentUserApi.getCurrentUserWorkspaceList().then((workspaces) => {
-        workspaceOptions.value = workspaces
-      }),
-    )
-  }
-
-  return Promise.all(roleSettingOptionRequests).finally(() => {
-    roleSettingOptionsLoading.value = false
-  })
-}
-
-function handleRoleChange() {
-  if (!showWorkspaceSelector.value) {
-    form.workspace_id = undefined
-    form.group_id = undefined
-    userGroups.value = []
-  }
-}
-
-function handleWorkspaceChange() {
-  form.group_id = undefined
-  loadUserGroups()
-}
-
-/* 选择用户组列表 */
-const loadingGroups = ref(false)
-const userGroups = ref<SystemUserGroup[]>([])
-
-function loadUserGroups() {
-  if (!form.workspace_id || !showWorkspaceSelector.value) {
-    userGroups.value = []
-    form.group_id = undefined
-    return Promise.resolve()
-  }
-
-  loadingGroups.value = true
-  return UserGroupsApi.getSystemUserGroups(form.workspace_id)
-    .then((groups) => {
-      userGroups.value = groups
-      if (!groups.some(({ id }) => id === form.group_id)) {
-        form.group_id = undefined
-      }
-    })
-    .finally(() => {
-      loadingGroups.value = false
-    })
-}
-
-function submit() {
-  authFormRef.value?.validate((valid) => {
-    if (!valid) return
-
-    loading.value = true
-    ChatUserAuthApi.putLoginSetting(form)
-      .then(() => MsgSuccess('保存成功'))
-      .finally(() => {
-        loading.value = false
-      })
-  })
-}
-
-onMounted(() => {
-  Promise.all([loadSetting(), loadRoleSettingOptions()]).then(() => {
-    return loadUserGroups()
-  })
-})
-</script>
-
-<template>
-  <el-form
-    v-loading="loading"
-    ref="authFormRef"
-    class="max-w-200"
-    :model="form"
-    :rules="rules"
-    label-position="top"
-    require-asterisk-position="right"
-  >
-    <el-form-item label="登录方式" prop="login_methods">
-      <el-checkbox-group v-model="form.login_methods" @change="handleLoginMethodsChange">
-        <el-checkbox
-          v-for="loginMethodOption in loginMethodOptions"
-          :key="loginMethodOption"
-          :value="loginMethodOption"
-          class="w-40"
-        >
-          {{ LOGIN_METHOD_LABELS[loginMethodOption as LoginMethod] }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </el-form-item>
-
-    <el-form-item label="默认登录方式" prop="default_value">
-      <el-select v-model="form.default_value">
-        <el-option
-          v-for="loginMethodOption in defaultLoginMethodOptions"
-          :key="loginMethodOption.value"
-          :value="loginMethodOption.value"
-          :label="loginMethodOption.label"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item label="账号登录验证码设置" required>
-      <el-card shadow="never" class="bg-N100! w-full">
-        <div class="flex items-center gap-2">
-          <span>登录失败</span>
-          <el-input-number
-            v-model="form.max_attempts"
-            :max="10"
-            :min="-1"
-            :step="1"
-            :value-on-clear="-1"
-            @change="form.max_attempts = normalizeNonZeroNumber($event)"
-          />
-          <span>登录失败</span>
-          <span class="text-N500">(值为-1时，不显示验证码)</span>
-        </div>
-        <div class="flex items-center gap-2 mt-4">
-          <span>登录失败</span>
-          <el-input-number
-            v-model="form.failed_attempts"
-            :max="10"
-            :min="-1"
-            :step="1"
-            :value-on-clear="-1"
-            @change="form.max_attempts = normalizeNonZeroNumber($event)"
-          />
-          <span>次，</span>
-          <span>锁定账号</span>
-          <el-input-number
-            v-model="form.lock_time"
-            :min="1"
-            :step="1"
-            :value-on-clear="1"
-            @change="form.max_attempts = normalizeNonZeroNumber($event)"
-          />
-          <span>分钟</span>
-        </div>
-      </el-card>
-    </el-form-item>
-    <p class="mb-2">第三方用户默认角色分配</p>
-    <el-card shadow="never" class="bg-N100!">
-      <el-form-item label="角色" prop="role_id">
-        <el-select
-          v-model="form.role_id"
-          :loading="roleSettingOptionsLoading"
-          filterable
-          clearable
-          placeholder="请选择角色"
-          @change="handleRoleChange"
-        >
-          <el-option
-            v-for="role in roleOptions"
-            :key="role.id"
-            :label="role.name"
-            :value="role.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="工作空间" prop="workspace_id" v-if="auth.isEE && showWorkspaceSelector">
-        <el-select
-          v-model="form.workspace_id"
-          :loading="roleSettingOptionsLoading"
-          filterable
-          clearable
-          placeholder="请选择工作空间"
-          @change="handleWorkspaceChange"
-        >
-          <el-option
-            v-for="workspace in workspaceOptions"
-            :key="workspace.id"
-            :label="workspace.name"
-            :value="workspace.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用户组" v-if="form.workspace_id">
-        <el-select
-          filterable
-          clearable
-          v-model="form.group_id"
-          :loading="loadingGroups"
-          placeholder="请选择用户组"
-          class="w-240"
-        >
-          <el-option
-            v-for="userGroup in userGroups"
-            :key="userGroup.id"
-            :label="userGroup.name"
-            :value="userGroup.id"
-          />
-        </el-select>
-      </el-form-item>
-    </el-card>
-    <el-button class="mt-4" type="primary" @click="submit">保存</el-button>
-  </el-form>
-</template>
diff --git a/ui/src/views/system/chat/authentication/components/OAuth2.vue b/ui/src/views/system/chat/authentication/components/OAuth2.vue
index 79fb094ec63..4d77ab2b12e 100644
--- a/ui/src/views/system/chat/authentication/components/OAuth2.vue
+++ b/ui/src/views/system/chat/authentication/components/OAuth2.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'OidcAuthenticationSetting' })
@@ -11,7 +11,7 @@ const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? '
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'OAuth2',
+  auth_type: LOGIN_METHOD.OAUTH2,
   config: {
     authEndpoint: '',
     tokenEndpoint: '',
diff --git a/ui/src/views/system/chat/authentication/components/OIDC.vue b/ui/src/views/system/chat/authentication/components/OIDC.vue
index 7ad89b3c23b..e9eb0baebcf 100644
--- a/ui/src/views/system/chat/authentication/components/OIDC.vue
+++ b/ui/src/views/system/chat/authentication/components/OIDC.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'OidcAuthenticationSetting' })
@@ -12,7 +12,7 @@ const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? '
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'OIDC',
+  auth_type: LOGIN_METHOD.OIDC,
   config: {
     authEndpoint: '',
     tokenEndpoint: '',
diff --git a/ui/src/views/system/chat/authentication/components/SCANLogin.vue b/ui/src/views/system/chat/authentication/components/SCANLogin.vue
index a0c39f47187..408970f4fd4 100644
--- a/ui/src/views/system/chat/authentication/components/SCANLogin.vue
+++ b/ui/src/views/system/chat/authentication/components/SCANLogin.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
 import ChatUserAuthScanApi from '@/api/admin/system/chat-user-auth-scan'
-import type { QrCodeProvider, QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
+import {
+  LOGIN_METHOD,
+  type QrCodeProvider,
+  type QrLoginPlatform,
+  type QrLoginPlatformRequest,
+} from '@/api/types'
 import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
 import { MsgSuccess, MsgError } from '@/utils/message'
 import dingtalkLogo from '@/assets/logo/logo_dingtalk.svg'
@@ -20,16 +25,16 @@ const platformDefinitions: {
   logo: string
 }[] = [
   {
-    key: 'wecom',
+    key: LOGIN_METHOD.WECOM,
     logo: enterpriseWechatLogo,
     configKeys: ['corp_id', 'agent_id', 'app_secret'],
   },
   {
-    key: 'dingtalk',
+    key: LOGIN_METHOD.DINGTALK,
     logo: dingtalkLogo,
     configKeys: ['corp_id', 'app_key', 'app_secret'],
   },
-  { key: 'lark', logo: larkLogo, configKeys: ['app_key', 'app_secret'] },
+  { key: LOGIN_METHOD.LARK, logo: larkLogo, configKeys: ['app_key', 'app_secret'] },
 ]
 
 const apiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api`
diff --git a/ui/src/views/system/chat/authentication/components/Saml2.vue b/ui/src/views/system/chat/authentication/components/Saml2.vue
deleted file mode 100644
index 067be40ec54..00000000000
--- a/ui/src/views/system/chat/authentication/components/Saml2.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref, useTemplateRef } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
-import type { AuthProviderSetting } from '@/api/types'
-import { MsgSuccess } from '@/utils/message'
-
-defineOptions({ name: 'SamlAuthenticationSetting' })
-const samlApiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/saml2`
-const authFormRef = useTemplateRef<FormInstance>('authFormRef')
-const loading = ref(false)
-const form = reactive<AuthProviderSetting>({
-  auth_type: 'SAML2',
-  config: {
-    idpMetaUrl: '',
-    wantAssertionsSigned: true,
-    wantAuthnRequestsSigned: true,
-    privateKey: '',
-    certificate: '',
-    mapping: '',
-    spEntityId: `${samlApiBaseUrl}/metadata`,
-    spAcs: `${samlApiBaseUrl}/sso`,
-  },
-  is_active: false,
-})
-const rules = reactive<FormRules<AuthProviderSetting>>({
-  'config.idpMetaUrl': [{ required: true, message: '请输入 Idp MetaData Url', trigger: 'blur' }],
-  'config.privateKey': [{ required: true, message: '请输入 SP Private Key', trigger: 'blur' }],
-  'config.certificate': [{ required: true, message: '请输入 SP Certificate', trigger: 'blur' }],
-  'config.mapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
-  'config.spEntityId': [{ required: true, message: '请输入 SP Entity Id', trigger: 'blur' }],
-  'config.spAcs': [{ required: true, message: '请输入 SP Ace', trigger: 'blur' }],
-})
-
-function loadSetting() {
-  loading.value = true
-
-  return ChatUserAuthApi.getAuthSetting(form.auth_type)
-    .then((setting) => {
-      const settingConfig = setting.config ?? {}
-      const mapping = settingConfig.mapping
-
-      Object.assign(form, setting, {
-        config: {
-          ...form.config,
-          ...settingConfig,
-          mapping:
-            typeof mapping === 'string' && mapping
-              ? JSON.stringify(JSON.parse(mapping))
-              : mapping || '',
-          spEntityId: settingConfig.spEntityId || `${samlApiBaseUrl}/metadata`,
-          spAcs: settingConfig.spAcs || `${samlApiBaseUrl}/sso`,
-        },
-      })
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-function submit() {
-  authFormRef.value?.validate((valid) => {
-    if (!valid) return
-    loading.value = true
-    ChatUserAuthApi.putAuthSetting(form.auth_type, form)
-      .then(() => MsgSuccess('保存成功'))
-      .finally(() => (loading.value = false))
-  })
-}
-onMounted(() => loadSetting())
-</script>
-
-<template>
-  <el-form
-    ref="authFormRef"
-    v-loading="loading"
-    class="max-w-200"
-    :model="form"
-    :rules="rules"
-    label-position="top"
-  >
-    <el-form-item label="Idp MetaData Url" prop="config.idpMetaUrl"
-      ><el-input v-model="form.config.idpMetaUrl" placeholder="请输入 Idp MetaData Url"
-    /></el-form-item>
-    <el-form-item
-      ><div class="flex flex-col">
-        <span>开启请求签名</span
-        ><el-switch v-model="form.config.wantAssertionsSigned" class="self-start" /></div
-    ></el-form-item>
-    <el-form-item
-      ><div class="flex flex-col">
-        <span>开启断言签名</span
-        ><el-switch v-model="form.config.wantAuthnRequestsSigned" class="self-start" /></div
-    ></el-form-item>
-    <el-form-item label="SP Private Key" prop="config.privateKey"
-      ><el-input
-        v-model="form.config.privateKey"
-        placeholder="请输入 SP Private Key"
-        type="password"
-        show-password
-    /></el-form-item>
-    <el-form-item label="SP Certificate" prop="config.certificate"
-      ><el-input
-        v-model="form.config.certificate"
-        placeholder="请输入 SP Certificate"
-        type="password"
-        show-password
-    /></el-form-item>
-    <el-form-item label="字段映射" prop="config.mapping"
-      ><el-input v-model="form.config.mapping" placeholder="请输入字段映射"
-    /></el-form-item>
-    <el-form-item label="SP Entity ID" prop="config.spEntityId"
-      ><el-input v-model="form.config.spEntityId" placeholder="请输入 SP Entity ID"
-    /></el-form-item>
-    <el-form-item label="SP ACS" prop="config.spAcs"
-      ><el-input v-model="form.config.spAcs" placeholder="请输入 SP ACS"
-    /></el-form-item>
-    <el-form-item
-      ><div class="flex flex-col">
-        <span>启用 SAML2 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
-    ></el-form-item>
-    <el-button type="primary" @click="submit">保存</el-button>
-  </el-form>
-</template>
diff --git a/ui/src/views/system/chat/user-groups/GroupsListView.vue b/ui/src/views/system/chat/user-groups/GroupsListView.vue
index 7dc3ce8d614..167fd03e683 100644
--- a/ui/src/views/system/chat/user-groups/GroupsListView.vue
+++ b/ui/src/views/system/chat/user-groups/GroupsListView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
 import ChatGroupsApi from '@/api/admin/system/chat-user-groups.ts'
-import type {
-  ListItem,
-  ChatUserGroupMember,
-  LoginMethod,
-  OptionItem,
-  RequestParams,
+import {
+  LOGIN_METHOD,
+  type ListItem,
+  type ChatUserGroupMember,
+  type LoginMethod,
+  type OptionItem,
+  type RequestParams,
 } from '@/api/types'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
@@ -175,8 +176,8 @@ onMounted(() => loadChatUserGroups())
     <template #default="{ Header }">
       <template v-if="currentGroup">
         <component :is="Header">
-          <div class="flex items-center gap-2">
-            <h4>{{ currentGroup.name }}</h4>
+          <div class="flex min-w-0 flex-1 items-center gap-2">
+            <h4 class="min-w-0 truncate">{{ currentGroup.name }}</h4>
             <el-divider direction="vertical" />
             <span class="flex items-center text-N500">
               <MkIcon name="icon_member_filled" class="mr-1" />
@@ -201,15 +202,18 @@ onMounted(() => loadChatUserGroups())
           @current-change="loadGroupMembers()"
           @size-change="loadGroupMembers()"
           @selection-change="handleBatchSelectionChange"
-          :search="Boolean(memberQuery)"
+          :isSearching="Boolean(memberQuery)"
+          :max-table-height="280"
         >
           <el-table-column type="selection" width="40" />
           <el-table-column prop="nick_name" label="姓名" show-overflow-tooltip />
           <el-table-column prop="username" label="用户名" show-overflow-tooltip />
-          <el-table-column prop="source" label="用户来源" min-width="140">
+          <el-table-column prop="source" label="用户来源">
             <template #default="{ row }">
               {{
-                row.source === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[row.source as LoginMethod]
+                row.source === LOGIN_METHOD.LOCAL
+                  ? '系统用户'
+                  : LOGIN_METHOD_LABELS[row.source as LoginMethod]
               }}
             </template>
           </el-table-column>
diff --git a/ui/src/views/system/chat/users/UserListView.vue b/ui/src/views/system/chat/users/UserListView.vue
index 10af80da3c8..249c4a4ea20 100644
--- a/ui/src/views/system/chat/users/UserListView.vue
+++ b/ui/src/views/system/chat/users/UserListView.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
 import ChatUserApi from '@/api/admin/system/chat-user'
-import type { ChatUser, LoginMethod, OptionItem, RequestParams } from '@/api/types'
+import {
+  LOGIN_METHOD,
+  type ChatUser,
+  type LoginMethod,
+  type OptionItem,
+  type RequestParams,
+} from '@/api/types'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth'
@@ -48,7 +54,7 @@ const searchFields: OptionItem<string>[] = [
     label: '用户来源',
     value: 'source',
     options: Object.entries(LOGIN_METHOD_LABELS).map(([value, label]) => ({
-      label: value === 'LOCAL' ? '本地创建' : label,
+      label: value === LOGIN_METHOD.LOCAL ? '本地创建' : label,
       value,
     })),
   },
@@ -175,7 +181,7 @@ onMounted(() => loadChatUsers())
         @current-change="loadChatUsers()"
         @size-change="loadChatUsers()"
         @selection-change="handleBatchSelectionChange"
-        :search="Boolean(chatUserQuery)"
+        :isSearching="Boolean(chatUserQuery)"
       >
         <el-table-column type="selection" width="40" />
         <el-table-column prop="nick_name" label="姓名" min-width="150" show-overflow-tooltip />
@@ -206,7 +212,9 @@ onMounted(() => loadChatUsers())
         <el-table-column label="用户来源">
           <template #default="{ row }">
             {{
-              row.source === 'LOCAL' ? '本地创建' : LOGIN_METHOD_LABELS[row.source as LoginMethod]
+              row.source === LOGIN_METHOD.LOCAL
+                ? '本地创建'
+                : LOGIN_METHOD_LABELS[row.source as LoginMethod]
             }}
           </template>
         </el-table-column>
diff --git a/ui/src/views/system/chat/users/dialog/ImportUsersDialog.vue b/ui/src/views/system/chat/users/dialog/ImportUsersDialog.vue
index cc504d08509..7061bdfdd85 100644
--- a/ui/src/views/system/chat/users/dialog/ImportUsersDialog.vue
+++ b/ui/src/views/system/chat/users/dialog/ImportUsersDialog.vue
@@ -2,7 +2,12 @@
 import { reactive, ref } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import ChatUserApi from '@/api/admin/system/chat-user'
-import type { ChatUserSyncConflict, OptionItem, LoginMethod } from '@/api/types'
+import {
+  LOGIN_METHOD,
+  type ChatUserSyncConflict,
+  type OptionItem,
+  type LoginMethod,
+} from '@/api/types'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth'
 import { MsgSuccess } from '@/utils/message'
 
@@ -33,7 +38,10 @@ function loadSyncTypes() {
   return ChatUserApi.getChatUserSyncTypes()
     .then((syncTypes) => {
       syncTypeOptions.value = syncTypes.map((syncType) => ({
-        label: syncType === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[syncType as LoginMethod],
+        label:
+          syncType === LOGIN_METHOD.LOCAL
+            ? '系统用户'
+            : LOGIN_METHOD_LABELS[syncType as LoginMethod],
         value: syncType,
       }))
       importUsersForm.syncType = syncTypeOptions.value[0]?.value ?? ''
diff --git a/ui/src/views/system/identity/groups/GroupsListView.vue b/ui/src/views/system/identity/groups/GroupsListView.vue
index 2512f562df1..f91e450e04b 100644
--- a/ui/src/views/system/identity/groups/GroupsListView.vue
+++ b/ui/src/views/system/identity/groups/GroupsListView.vue
@@ -243,8 +243,8 @@ onMounted(() => loadWorkspaceOptions())
     <template #default="{ Header }">
       <template v-if="currentGroup">
         <component :is="Header">
-          <div class="flex items-center gap-2">
-            <h4>{{ currentGroup.name }}</h4>
+          <div class="flex min-w-0 flex-1 items-center gap-2">
+            <h4 class="min-w-0 truncate">{{ currentGroup.name }}</h4>
             <el-divider direction="vertical" />
             <span class="flex items-center text-N500">
               <MkIcon name="icon_member_filled" class="mr-1" />
@@ -263,11 +263,11 @@ onMounted(() => loadWorkspaceOptions())
 
         <MkTable
           v-loading="loadingMembers"
-          :max-table-height="340"
+          :max-table-height="280"
           v-model:pagination-config="paginationConfig"
           :data="userGroupMembers"
           @selection-change="handleMemberSelectionChange"
-          :search="Boolean(memberSearchQuery)"
+          :isSearching="Boolean(memberSearchQuery)"
         >
           <el-table-column type="selection" width="40" />
           <el-table-column prop="nick_name" label="姓名" min-width="198" show-overflow-tooltip />
diff --git a/ui/src/views/system/identity/roles/AddMemberDrawer.vue b/ui/src/views/system/identity/roles/AddMemberDrawer.vue
new file mode 100644
index 00000000000..dc2c5da42de
--- /dev/null
+++ b/ui/src/views/system/identity/roles/AddMemberDrawer.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type { FormInstance, FormRules } 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'
+import {
+  ROLE_TYPE,
+  type CreateRoleMemberItem,
+  type RoleItem,
+  type SystemUserOption,
+  type WorkspaceItem,
+} from '@/api/types'
+import { useStore } from '@/stores'
+import { MsgSuccess } from '@/utils/message'
+
+const props = defineProps<{ currentRole: RoleItem }>()
+const emit = defineEmits<{ refresh: [] }>()
+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 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: [] } : {}) }
+}
+
+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
+    })
+    .finally(() => {
+      optionsLoading.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 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
+  }
+}
+
+function open() {
+  resetData()
+  visible.value = true
+  loadOptions()
+}
+
+function close() {
+  visible.value = false
+  resetData()
+}
+
+function submit() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return
+    const members = memberRows.map((row) => ({
+      user_ids: row.user_ids,
+      workspace_ids:
+        props.currentRole.type === ROLE_TYPE.ADMIN
+          ? ['None']
+          : auth.isPE
+            ? ['default']
+            : row.workspace_ids,
+    }))
+    loading.value = true
+    RoleApi.postRoleMembers(props.currentRole.id, { members })
+      .then(() => {
+        MsgSuccess('添加成功')
+        emit('refresh')
+        close()
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+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
+      >
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="submit">添加</el-button>
+    </template>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/system/identity/roles/RoleListView.vue b/ui/src/views/system/identity/roles/RoleListView.vue
index 3e53b66b357..f079b396e7c 100644
--- a/ui/src/views/system/identity/roles/RoleListView.vue
+++ b/ui/src/views/system/identity/roles/RoleListView.vue
@@ -1,437 +1,181 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { ArrowDown, UserFilled } from '@element-plus/icons-vue'
-import { ElMessageBox } from 'element-plus'
-import { MsgSuccess } from '@/utils/message'
-
-interface SystemRole {
-  id: string
-  memberCount: number
-  name: string
-  system?: boolean
-}
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import RoleApi from '@/api/admin/system/role'
+import { ROLE_TYPE, type RoleItem, type RoleType } from '@/api/types'
+import { ROLE_TYPE_LABELS } from '@/constants/auth'
+import MkListItem from '@/components/mk-search-list/mk-list-item.vue'
+import { MsgConfirm, MsgSuccess } from '@/utils/message'
+import RoleMemberList from './components/RoleMemberList.vue'
+import RolePermissionConfiguration from './components/RolePermissionConfiguration.vue'
+import CreateOrUpdateRoleDialog from './dialog/CreateOrUpdateRoleDialog.vue'
+
+type RoleDetailTab = 'permission' | 'member'
+const currentTab = ref<RoleDetailTab>('permission')
+
+/* 角色列表 */
+const loadingRoles = ref(false)
+const filterText = ref('')
+const AllRoles = ref<RoleItem[]>([])
+const currentRole = ref<RoleItem>()
+
+const roleGroups = computed(() => {
+  const keyword = filterText.value.trim().toLowerCase()
+  return (Object.keys(ROLE_TYPE_LABELS) as RoleType[]).map((type) => ({
+    label: ROLE_TYPE_LABELS[type],
+    roles: AllRoles.value.filter(
+      (role) => role.type === type && (!keyword || role.role_name.toLowerCase().includes(keyword)),
+    ),
+    type,
+  }))
+})
 
-interface SystemRoleGroup {
-  id: string
-  name: string
-  roles: SystemRole[]
+function loadRoles(selectedRoleId?: string) {
+  loadingRoles.value = true
+  return RoleApi.getRoleList()
+    .then(({ internal_role, custom_role }) => {
+      AllRoles.value = [...internal_role, ...custom_role]
+      currentRole.value =
+        AllRoles.value.find(({ id }) => id === selectedRoleId) ??
+        AllRoles.value.find(({ id }) => id === currentRole.value?.id) ??
+        internal_role[0]
+    })
+    .finally(() => {
+      loadingRoles.value = false
+    })
 }
 
-interface PermissionRow {
-  category: string
-  categoryRowspan: number
-  module: string
-  moduleRowspan: number
-  object: string
-  permissions: string[]
+function handleRoleSelect(role: RoleItem) {
+  currentRole.value = role
 }
 
-type RoleDetailTab = 'permissions' | 'members'
-
-const route = useRoute()
-const searchKeyword = ref('')
-const selectedRoleId = ref('system-administrator')
-const activeRoleDetailTab = ref<RoleDetailTab>('permissions')
-const expandedRoleGroupIds = ref<string[]>(['system', 'workspace', 'general'])
-const systemRoleGroups = ref<SystemRoleGroup[]>([
-  {
-    id: 'system',
-    name: '系统管理员',
-    roles: [
-      { id: 'system-administrator', name: '系统管理员', memberCount: 240, system: true },
-      { id: 'administrator', name: '管理员', memberCount: 16 },
-    ],
-  },
-  {
-    id: 'workspace',
-    name: '工作空间管理员',
-    roles: [
-      { id: 'workspace-administrator', name: '工作空间管理员', memberCount: 58, system: true },
-      { id: 'maintenance', name: '维护人员', memberCount: 12 },
-    ],
-  },
-  {
-    id: 'general',
-    name: '普通用户',
-    roles: [
-      { id: 'general-user', name: '普通用户', memberCount: 106, system: true },
-      { id: 'test-role', name: '测试角色', memberCount: 6 },
-      { id: 'test', name: '测试', memberCount: 2 },
-    ],
-  },
+// 默认展开的角色组
+const expandedRoleTypes = ref<RoleType[]>([
+  ROLE_TYPE.ADMIN,
+  ROLE_TYPE.WORKSPACE_MANAGE,
+  ROLE_TYPE.USER,
 ])
-const permissionRows: PermissionRow[] = [
-  {
-    category: '身份与权限',
-    categoryRowspan: 4,
-    module: '用户管理',
-    moduleRowspan: 1,
-    object: '用户管理',
-    permissions: ['查看', '创建', '编辑', '修改密码', '启用/禁用', '删除'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '角色',
-    moduleRowspan: 1,
-    object: '角色',
-    permissions: ['查看', '创建', '编辑', '删除', '权限配置', '添加成员', '移除成员'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '工作空间',
-    moduleRowspan: 1,
-    object: '工作空间',
-    permissions: ['查看', '创建', '重命名', '删除', '添加成员', '移除成员'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '资源授权',
-    moduleRowspan: 1,
-    object: '资源授权',
-    permissions: ['查看', '授权'],
-  },
-  {
-    category: '资源管理',
-    categoryRowspan: 12,
-    module: '智能体',
-    moduleRowspan: 5,
-    object: '智能体',
-    permissions: ['查看', '管理', '去对话', '设置', '导出', '删除'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '概览',
-    permissions: ['查看', '嵌入第三方', '访问限制', '显示设置', 'API Key', '公共访问链接'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '应用接入',
-    permissions: ['查看', '企业微信应用', '飞书应用', '钉钉应用', '公众号', 'Slack'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '对话用户',
-    permissions: ['查看', '编辑'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '对话日志',
-    permissions: ['查看', '标注', '导出', '清除策略设置', '添加至知识库'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '知识库',
-    moduleRowspan: 5,
-    object: '知识库',
-    permissions: ['查看', '管理', '同步', '向量化', '设置', '导出', '删除'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '文档',
-    permissions: [
-      '查看',
-      '上传文档',
-      '编辑',
-      '同步',
-      '迁移',
-      '向量化',
-      '生成问题',
-      '设置',
-      '启用/禁用',
-      '导出',
-      '删除',
-    ],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '问题',
-    permissions: ['查看', '创建', '编辑', '关联分段', '删除'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '命中测试',
-    permissions: ['查看', '提问', '参数设置'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '',
-    moduleRowspan: 0,
-    object: '对话用户',
-    permissions: ['查看', '编辑'],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '工具',
-    moduleRowspan: 1,
-    object: '工具',
-    permissions: [
-      '查看',
-      '创建',
-      '编辑',
-      '复制',
-      '删除',
-      '启用/禁用',
-      '权限设置',
-      '导入',
-      '导出',
-      '启动参数',
-    ],
-  },
-  {
-    category: '',
-    categoryRowspan: 0,
-    module: '模型',
-    moduleRowspan: 1,
-    object: '模型',
-    permissions: ['查看', '创建', '编辑', '模型参数设置', '删除'],
-  },
-]
-
-const filteredRoleGroups = computed(() => {
-  const keyword = searchKeyword.value.trim().toLowerCase()
+function isRoleGroupExpanded(roleType: RoleType) {
+  return expandedRoleTypes.value.includes(roleType)
+}
 
-  if (!keyword) {
-    return systemRoleGroups.value
-  }
+/* 创建、重命名角色 */
+const roleDialogRef = useTemplateRef<InstanceType<typeof CreateOrUpdateRoleDialog>>('roleDialogRef')
 
-  return systemRoleGroups.value
-    .map((roleGroup) => ({
-      ...roleGroup,
-      roles: roleGroup.roles.filter((role) => role.name.toLowerCase().includes(keyword)),
-    }))
-    .filter((roleGroup) => roleGroup.roles.length > 0)
-})
-
-const selectedRole = computed(() => {
-  return systemRoleGroups.value
-    .flatMap((roleGroup) => roleGroup.roles)
-    .find((role) => role.id === selectedRoleId.value)
-})
+function handleOpenRoleDialog(role?: RoleItem) {
+  roleDialogRef.value?.open(role)
+}
 
-function toggleRoleGroup(roleGroupId: string) {
-  expandedRoleGroupIds.value = expandedRoleGroupIds.value.includes(roleGroupId)
-    ? expandedRoleGroupIds.value.filter((id) => id !== roleGroupId)
-    : [...expandedRoleGroupIds.value, roleGroupId]
+function handleRoleSaved(role: RoleItem) {
+  loadRoles(role.id)
 }
 
-async function createRole() {
-  try {
-    const { value } = await ElMessageBox.prompt('请输入角色名称', '创建角色', {
-      confirmButtonText: '创建',
-      cancelButtonText: '取消',
-      inputPattern: /\S+/,
-      inputErrorMessage: '请输入角色名称',
+/* 删除角色 */
+function handleDeleteRole(role: RoleItem) {
+  MsgConfirm(`是否刪除角色：${role.role_name}？`, '删除后，该角色下的成员都会被移除，请谨慎操作。')
+    .then(() => {
+      loadingRoles.value = true
+      return RoleApi.deleteRole(role.id).then(() => {
+        MsgSuccess('删除成功')
+        return loadRoles(currentRole.value?.id === role.id ? undefined : currentRole.value?.id)
+      })
+    })
+    .catch(() => {})
+    .finally(() => {
+      loadingRoles.value = false
     })
-    const roleName = value.trim()
-    const newRole = {
-      id: `role-${Date.now()}`,
-      memberCount: 0,
-      name: roleName,
-    }
-    const generalRoleGroup = systemRoleGroups.value.find((roleGroup) => roleGroup.id === 'general')
-
-    generalRoleGroup?.roles.push(newRole)
-    selectedRoleId.value = newRole.id
-    MsgSuccess('角色创建成功')
-  } catch {
-    return
-  }
 }
 
-function selectRole(roleId: string) {
-  selectedRoleId.value = roleId
-  activeRoleDetailTab.value = 'permissions'
+function handleMemberChanged() {
+  loadRoles(currentRole.value?.id)
 }
 
-function permissionTableSpan({ row, columnIndex }: { row: PermissionRow; columnIndex: number }) {
-  if (columnIndex === 0) {
-    return row.categoryRowspan ? [row.categoryRowspan, 1] : [0, 0]
-  }
-
-  if (columnIndex === 1) {
-    return row.moduleRowspan ? [row.moduleRowspan, 1] : [0, 0]
-  }
-
-  return [1, 1]
-}
+onMounted(() => loadRoles())
 </script>
 
 <template>
-  <div class="system-identity-roles flex h-full">
-    <aside class="flex w-60 shrink-0 flex-col border-r p-4">
-      <header class="flex-between mb-4">
-        <h4>{{ route.meta.title }}</h4>
-        <el-button text type="primary" @click="createRole">
-          <MkIcon name="icon_add_outlined" :size="18" />
-        </el-button>
-      </header>
-      <MkSearchList v-model="searchKeyword">
-        <div class="flex flex-col gap-1">
-          <section v-for="roleGroup in filteredRoleGroups" :key="roleGroup.id">
-            <button
-              type="button"
-              class="flex w-full items-center gap-2 pt-2 pb-1 text-left text-N500"
-              @click="toggleRoleGroup(roleGroup.id)"
-            >
-              <MkIcon
-                :icon="ArrowDown"
-                :size="10"
-                class="transition-transform"
-                :class="{ '-rotate-90': !expandedRoleGroupIds.includes(roleGroup.id) }"
-              />
-              <span class="font-medium">{{ roleGroup.name }}</span>
-            </button>
-
-            <div v-if="expandedRoleGroupIds.includes(roleGroup.id)" class="flex flex-col gap-1">
-              <button
-                v-for="role in roleGroup.roles"
+  <MkViewLayout class="system-identity-roles" :loading="loadingRoles">
+    <template #aside="{ title, Header }">
+      <component :is="Header">
+        <h4>{{ title }}</h4>
+        <el-tooltip content="创建角色" placement="top">
+          <el-button class="-mr-1" text type="primary" @click="handleOpenRoleDialog()">
+            <MkIcon name="icon_add_outlined" :size="18" />
+          </el-button>
+        </el-tooltip>
+      </component>
+
+      <div class="px-4">
+        <MkSearchInput v-model="filterText" class="shrink-0" />
+      </div>
+      <el-scrollbar class="min-h-0 flex-1">
+        <div class="px-4 pb-4 pt-2">
+          <MkCollapse
+            v-for="roleGroup in roleGroups"
+            :key="roleGroup.type"
+            :model-value="isRoleGroupExpanded(roleGroup.type)"
+            :title="roleGroup.label"
+          >
+            <div class="flex flex-col gap-1">
+              <MkListItem
+                v-for="(role, roleIndex) in roleGroup.roles"
                 :key="role.id"
-                type="button"
-                class="flex h-10 w-full items-center gap-1.5 rounded-md px-2 text-left"
-                :class="
-                  selectedRoleId === role.id
-                    ? 'bg-primary/10 font-medium text-primary'
-                    : 'text-N900 hover:bg-black/5'
-                "
-                @click="selectRole(role.id)"
+                :active="currentRole?.id === role.id"
+                :index="roleIndex"
+                label-field="role_name"
+                :row="role"
+                @click="handleRoleSelect(role)"
               >
-                <span>{{ role.name }}</span>
-                <span
-                  v-if="role.system"
-                  class="flex h-5 items-center rounded-sm bg-black/10 px-1 text-sm text-N600"
-                >
-                  系
-                </span>
-              </button>
+                <template #default>
+                  <span class="min-w-0 truncate">{{ role.role_name }}</span>
+                  <el-tag type="info" size="small" class="ml-[6px] text-N600!" v-if="role.internal"
+                    >系</el-tag
+                  >
+                </template>
+                <template v-if="!role.internal" #action-dropdown>
+                  <MkDropdownMenu>
+                    <MkDropdownItem @click="handleOpenRoleDialog(role)">
+                      <template #icon><MkIcon name="icon_edit_outlined" /></template>重命名
+                    </MkDropdownItem>
+                    <MkDropdownItem divided @click="handleDeleteRole(role)">
+                      <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>删除
+                    </MkDropdownItem>
+                  </MkDropdownMenu>
+                </template>
+              </MkListItem>
             </div>
-          </section>
-        </div>
-      </MkSearchList>
-    </aside>
-    <div v-if="selectedRole" class="flex min-w-0 flex-1 flex-col px-6">
-      <header class="flex items-center justify-between py-4">
-        <div class="flex min-w-0 items-center gap-2">
-          <h4 class="truncate">{{ selectedRole.name }}</h4>
-          <span
-            v-if="selectedRole.system"
-            class="flex h-5 items-center rounded-sm bg-black/10 px-1 text-sm text-N600"
-          >
-            系统
-          </span>
-          <el-divider direction="vertical" />
-          <span class="flex items-center text-N500">
-            <MkIcon :icon="UserFilled" :size="16" class="mr-1" />
-            {{ selectedRole.memberCount }}
-          </span>
-        </div>
-
-        <div class="flex rounded-md border border-black/15 p-0.5">
-          <button
-            type="button"
-            class="h-7 rounded px-2"
-            :class="
-              activeRoleDetailTab === 'permissions'
-                ? 'bg-primary/10 text-primary'
-                : 'text-N900 hover:bg-black/5'
-            "
-            @click="activeRoleDetailTab = 'permissions'"
-          >
-            权限配置
-          </button>
-          <button
-            type="button"
-            class="h-7 rounded px-2"
-            :class="
-              activeRoleDetailTab === 'members'
-                ? 'bg-primary/10 text-primary'
-                : 'text-N900 hover:bg-black/5'
-            "
-            @click="activeRoleDetailTab = 'members'"
-          >
-            成员
-          </button>
+          </MkCollapse>
         </div>
-      </header>
-
-      <el-scrollbar v-if="activeRoleDetailTab === 'permissions'" class="min-h-0 flex-1">
-        <el-table
-          :data="permissionRows"
-          border
-          class="role-permission-table w-full"
-          :span-method="permissionTableSpan"
-        >
-          <el-table-column prop="category" label="分类" width="120" />
-          <el-table-column prop="module" label="模块名称" width="122" />
-          <el-table-column prop="object" label="操作对象" width="122" />
-          <el-table-column label="权限" min-width="500">
-            <template #default="{ row }">
-              <div class="grid grid-cols-4 gap-x-5 gap-y-1">
-                <el-checkbox
-                  v-for="permission in row.permissions"
-                  :key="permission"
-                  :model-value="true"
-                  :disabled="selectedRole.system"
-                  class="!mr-0 !h-6"
-                >
-                  {{ permission }}
-                </el-checkbox>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column width="40" align="center">
-            <template #header>
-              <el-checkbox :model-value="true" :disabled="selectedRole.system" />
-            </template>
-            <template #default>
-              <el-checkbox :model-value="true" :disabled="selectedRole.system" />
-            </template>
-          </el-table-column>
-        </el-table>
       </el-scrollbar>
-
-      <div v-else class="min-h-0 flex-1">
-        <MkTable :data="[]">
-          <el-table-column prop="name" label="姓名" />
-          <el-table-column prop="username" label="用户名" />
-          <el-table-column prop="email" label="邮箱" />
-        </MkTable>
-      </div>
-    </div>
-  </div>
+    </template>
+
+    <template #default="{ Header }">
+      <template v-if="currentRole">
+        <component :is="Header">
+          <div class="flex min-w-0 flex-1 items-center gap-2">
+            <h4 class="min-w-0 truncate">{{ currentRole.role_name }}</h4>
+            <el-tag type="info" size="small" class="shrink-0 text-N600!">
+              {{ currentRole.internal ? '系' : ROLE_TYPE_LABELS[currentRole.type] }}</el-tag
+            >
+            <el-divider class="shrink-0" direction="vertical" />
+            <span class="flex shrink-0 items-center text-N500">
+              <MkIcon name="icon_member_filled" class="mr-1" />{{ currentRole.user_count ?? 0 }}
+            </span>
+          </div>
+          <el-radio-group v-model="currentTab">
+            <el-radio-button value="permission" label="权限配置" />
+            <el-radio-button value="member" label="成员" />
+          </el-radio-group>
+        </component>
+        <!-- 权限配置 -->
+        <RolePermissionConfiguration
+          v-if="currentTab === 'permission'"
+          :current-role="currentRole"
+        />
+        <!-- 成员 -->
+        <RoleMemberList v-else :current-role="currentRole" @changed="handleMemberChanged" />
+      </template>
+      <MkEmpty v-else class="flex-1" />
+    </template>
+  </MkViewLayout>
+  <CreateOrUpdateRoleDialog ref="roleDialogRef" @refresh="handleRoleSaved" />
 </template>
-
-<style scoped>
-.role-permission-table {
-  :deep(.el-table__cell) {
-    padding: 8px 0;
-  }
-}
-</style>
diff --git a/ui/src/views/system/identity/roles/components/RoleMemberList.vue b/ui/src/views/system/identity/roles/components/RoleMemberList.vue
new file mode 100644
index 00000000000..745cc85cfdb
--- /dev/null
+++ b/ui/src/views/system/identity/roles/components/RoleMemberList.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, useTemplateRef, watch } from 'vue'
+import RoleApi from '@/api/admin/system/role'
+import {
+  ROLE_TYPE,
+  type OptionItem,
+  type RequestParams,
+  type RoleItem,
+  type RoleMember,
+} from '@/api/types'
+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 })
+const searchQuery = ref<RequestParams>()
+const searchFields: OptionItem<string>[] = [
+  { label: '用户名', value: 'username' },
+  { label: '姓名', value: 'nick_name' },
+]
+
+function loadMembers(reset = false) {
+  if (reset) paginationConfig.value.currentPage = 1
+  loading.value = true
+  return RoleApi.getRoleMemberList(props.currentRole.id, paginationConfig.value, searchQuery.value)
+    .then(({ records, total }) => {
+      members.value = records
+      paginationConfig.value.total = total
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleSearch(query?: RequestParams) {
+  searchQuery.value = query
+  loadMembers(true)
+}
+
+const addMemberDrawerRef =
+  useTemplateRef<InstanceType<typeof AddMemberDrawer>>('addMemberDrawerRef')
+function handleOpenAddMemberDrawer() {
+  addMemberDrawerRef.value?.open()
+}
+
+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()
+      })
+    })
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+watch(
+  () => props.currentRole.id,
+  () => loadMembers(true),
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-1 flex-col">
+    <div class="flex-between mb-4">
+      <el-button type="primary" @click="handleOpenAddMemberDrawer">
+        <MkIcon name="icon_add_outlined" />添加成员
+      </el-button>
+      <MkComplexSearch :fields="searchFields" @change="handleSearch" />
+    </div>
+    <MkTable
+      v-model:pagination-config="paginationConfig"
+      v-loading="loading"
+      :data="members"
+      :isSearching="Boolean(searchQuery)"
+      @current-change="loadMembers()"
+      @size-change="loadMembers()"
+      :max-table-height="290"
+    >
+      <el-table-column type="selection" width="40" />
+      <el-table-column prop="nick_name" label="姓名" min-width="180" show-overflow-tooltip />
+      <el-table-column prop="username" label="用户名" min-width="180" show-overflow-tooltip />
+      <el-table-column
+        v-if="currentRole.type !== ROLE_TYPE.ADMIN"
+        prop="workspace_name"
+        label="工作空间"
+        min-width="180"
+        show-overflow-tooltip
+      />
+      <el-table-column label="操作" width="70" fixed="right">
+        <template #default="{ row }">
+          <el-tooltip content="移除" placement="top">
+            <el-button type="primary" text @click="handleRemoveMember(row)"
+              ><MkIcon name="icon_assigned_outlined"
+            /></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </MkTable>
+  </div>
+  <AddMemberDrawer
+    ref="addMemberDrawerRef"
+    :current-role="currentRole"
+    @refresh="handleMemberAdded"
+  />
+</template>
diff --git a/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue b/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue
new file mode 100644
index 00000000000..79c6b0c5505
--- /dev/null
+++ b/ui/src/views/system/identity/roles/components/RolePermissionConfiguration.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import RoleApi from '@/api/admin/system/role'
+import type { RoleItem, RolePermission, RolePermissionModule } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+interface PermissionTableRow {
+  id: string
+  moduleId: string
+  module: string
+  name: string
+  permissions: RolePermission[]
+}
+
+const props = defineProps<{ currentRole: RoleItem }>()
+
+/* 权限数据加载与表格展示 */
+const loading = ref(false)
+const permissionData = ref<PermissionTableRow[]>([])
+const disabled = computed(() => props.currentRole.internal)
+const permissionTableKey = computed(
+  () => `${props.currentRole.id}:${disabled.value ? 'readonly' : 'editable'}`,
+)
+
+function loadPermissions() {
+  loading.value = true
+  permissionData.value = []
+  return RoleApi.getRolePermissionList(props.currentRole.id)
+    .then((permissions) => {
+      permissionData.value = transformPermissions(permissions)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function transformPermissions(modules: RolePermissionModule[]) {
+  return modules.flatMap((module) =>
+    module.children.map((feature) => ({
+      id: `${module.id}:${feature.id}`,
+      moduleId: module.id,
+      module: module.name,
+      name: feature.name,
+      permissions: feature.permission,
+    })),
+  )
+}
+
+function permissionTableSpan({
+  row,
+  rowIndex,
+  columnIndex,
+}: {
+  row: PermissionTableRow
+  rowIndex: number
+  columnIndex: number
+}) {
+  if (columnIndex !== 0) return [1, 1]
+  const firstRowIndex = permissionData.value.findIndex(({ moduleId }) => moduleId === row.moduleId)
+  return rowIndex === firstRowIndex
+    ? [permissionData.value.filter(({ moduleId }) => moduleId === row.moduleId).length, 1]
+    : [0, 0]
+}
+
+/* 单项权限与查看权限联动 */
+function handlePermissionChange(
+  value: boolean,
+  permission: RolePermission,
+  row: PermissionTableRow,
+) {
+  permission.enable = value
+  if (row.permissions.some(({ id }) => id.includes('OTHER'))) return
+  const readPermission = row.permissions.find(({ id }) => /:READ$/.test(id))
+  if (value && permission.id !== readPermission?.id && readPermission) readPermission.enable = true
+  if (!value && permission.id === readPermission?.id) {
+    row.permissions.forEach((item) => (item.enable = false))
+  }
+}
+
+/* 行选择与全表选择 */
+function getPermissionState(permissions: RolePermission[]) {
+  const checkedCount = permissions.filter(({ enable }) => enable).length
+  return {
+    checked: permissions.length > 0 && checkedCount === permissions.length,
+    indeterminate: checkedCount > 0 && checkedCount < permissions.length,
+  }
+}
+
+function handleRowChange(value: boolean, row: PermissionTableRow) {
+  row.permissions.forEach((permission) => {
+    permission.enable = value
+  })
+}
+
+const allPermissions = computed(() =>
+  permissionData.value.flatMap(({ permissions }) => permissions),
+)
+const allPermissionState = computed(() => getPermissionState(allPermissions.value))
+
+function handleCheckAll(value: boolean) {
+  permissionData.value.forEach((row) => handleRowChange(value, row))
+}
+
+/* 权限配置保存 */
+function handleSave() {
+  loading.value = true
+  const permissions = permissionData.value.flatMap((row) =>
+    row.permissions.map(({ id, enable }) => ({ id, enable })),
+  )
+  RoleApi.postRolePermissions(props.currentRole.id, permissions)
+    .then(() => MsgSuccess('保存成功'))
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+watch(() => props.currentRole.id, loadPermissions, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <MkTable
+      :key="permissionTableKey"
+      class="role-permission-table"
+      row-key="id"
+      :span-method="permissionTableSpan"
+      :max-table-height="disabled ? 200 : 250"
+      :data="permissionData"
+    >
+      <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
+          >
+        </template>
+      </el-table-column>
+      <el-table-column :width="40">
+        <template #header>
+          <el-checkbox
+            :model-value="allPermissionState.checked"
+            :indeterminate="allPermissionState.indeterminate"
+            :disabled="disabled"
+            @change="handleCheckAll"
+          />
+        </template>
+        <template #default="{ row }">
+          <el-checkbox
+            :model-value="getPermissionState(row.permissions).checked"
+            :indeterminate="getPermissionState(row.permissions).indeterminate"
+            :disabled="disabled"
+            @change="(value: boolean) => handleRowChange(value, row)"
+          />
+        </template>
+      </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>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.role-permission-table.el-table) {
+  border: 1px solid var(--el-table-border-color);
+
+  .el-table__cell {
+    border-bottom: 1px solid var(--el-table-border-color);
+    border-right: 1px solid var(--el-table-border-color);
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  thead th.el-table__cell {
+    border-bottom: 1px solid var(--el-table-border-color) !important;
+  }
+}
+</style>
diff --git a/ui/src/views/system/identity/roles/dialog/CreateOrUpdateRoleDialog.vue b/ui/src/views/system/identity/roles/dialog/CreateOrUpdateRoleDialog.vue
new file mode 100644
index 00000000000..809499526aa
--- /dev/null
+++ b/ui/src/views/system/identity/roles/dialog/CreateOrUpdateRoleDialog.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import RoleApi from '@/api/admin/system/role'
+import { ROLE_TYPE, type RoleItem, type RoleType, type SaveRoleRequest } from '@/api/types'
+import { ROLE_TYPE_LABELS } from '@/constants/auth'
+import { MsgSuccess } from '@/utils/message'
+
+const emit = defineEmits<{ refresh: [role: RoleItem] }>()
+const visible = ref(false)
+const loading = ref(false)
+const formRef = ref<FormInstance>()
+const roleForm = reactive<SaveRoleRequest>({ role_name: '' })
+const rules: FormRules<SaveRoleRequest> = {
+  role_name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+  role_type: [{ required: true, message: '请选择继承角色', trigger: 'change' }],
+}
+const roleTypeOptions = ref<RoleType[]>([
+  ROLE_TYPE.ADMIN,
+  ROLE_TYPE.WORKSPACE_MANAGE,
+  ROLE_TYPE.USER,
+])
+
+function submit() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    RoleApi.postRole({ ...roleForm })
+      .then((role) => {
+        MsgSuccess(roleForm.role_id ? '重命名成功' : '创建成功')
+        emit('refresh', role)
+        close()
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+function open(role?: RoleItem) {
+  if (role) {
+    roleForm.role_id = role.id
+    roleForm.role_name = role.role_name
+    roleForm.role_type = role.type
+  }
+  visible.value = true
+}
+
+function close() {
+  visible.value = false
+  resetData()
+}
+function resetData() {
+  roleForm.role_id = undefined
+  roleForm.role_name = ''
+  roleForm.role_type = undefined
+  loading.value = false
+  formRef.value?.clearValidate()
+}
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDialog
+    v-model="visible"
+    :title="roleForm.role_id ? '重命名角色' : '创建角色'"
+    @closed="resetData"
+  >
+    <el-form ref="formRef" :model="roleForm" :rules="rules" label-position="top">
+      <el-form-item label="角色名称" prop="role_name">
+        <el-input
+          v-model="roleForm.role_name"
+          maxlength="64"
+          show-word-limit
+          placeholder="请输入角色名称"
+        />
+      </el-form-item>
+      <el-form-item v-if="!roleForm.role_id" label="继承角色" prop="role_type">
+        <el-select v-model="roleForm.role_type" placeholder="请选择角色">
+          <el-option
+            v-for="option in roleTypeOptions"
+            :key="option"
+            :value="option"
+            :label="ROLE_TYPE_LABELS[option]"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="submit">{{
+        roleForm.role_id ? '保存' : '创建'
+      }}</el-button>
+    </template>
+  </MkDialog>
+</template>
diff --git a/ui/src/views/system/identity/users/UserListView.vue b/ui/src/views/system/identity/users/UserListView.vue
index c4dbd692bc2..5272f731c33 100644
--- a/ui/src/views/system/identity/users/UserListView.vue
+++ b/ui/src/views/system/identity/users/UserListView.vue
@@ -2,7 +2,14 @@
 import { onMounted, ref, useTemplateRef } from 'vue'
 import { useStore } from '@/stores'
 import UserManageApi from '@/api/admin/system/user-manage'
-import type { LoginMethod, OptionItem, SystemUser, RequestParams } from '@/api/types/index.ts'
+import {
+  LOGIN_METHOD,
+  ROLE_TYPE,
+  type LoginMethod,
+  type OptionItem,
+  type SystemUser,
+  type RequestParams,
+} from '@/api/types/index.ts'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth.ts'
@@ -165,7 +172,7 @@ onMounted(() => loadSystemUsers())
         @current-change="loadSystemUsers()"
         @size-change="loadSystemUsers()"
         @selection-change="handleBatchSelectionChange"
-        :search="Boolean(systemUserQuery)"
+        :isSearching="Boolean(systemUserQuery)"
       >
         <el-table-column type="selection" width="40" />
         <el-table-column prop="nick_name" label="姓名" min-width="150" show-overflow-tooltip />
@@ -210,7 +217,9 @@ onMounted(() => loadSystemUsers())
         <el-table-column label="用户来源">
           <template #default="{ row }">
             {{
-              row.source === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[row.source as LoginMethod]
+              row.source === LOGIN_METHOD.LOCAL
+                ? '系统用户'
+                : LOGIN_METHOD_LABELS[row.source as LoginMethod]
             }}
           </template>
         </el-table-column>
@@ -226,7 +235,7 @@ onMounted(() => loadSystemUsers())
               <span @click.stop>
                 <el-switch
                   v-model="row.is_active"
-                  :disabled="row.role === 'ADMIN' || row.id === user.userInfo?.id"
+                  :disabled="row.role === ROLE_TYPE.ADMIN || row.id === user.userInfo?.id"
                   :before-change="() => handleChangeStatus(row)"
                   size="small"
                 />
diff --git a/ui/src/views/system/identity/users/components/UserRoleSetting.vue b/ui/src/views/system/identity/users/components/UserRoleSetting.vue
index 3b463d7ba8d..6273c790b53 100644
--- a/ui/src/views/system/identity/users/components/UserRoleSetting.vue
+++ b/ui/src/views/system/identity/users/components/UserRoleSetting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormItemRule } from 'element-plus'
-import type { ListItem, SystemUserRoleAssignment } from '@/api/types'
+import { ROLE_TYPE, type ListItem, type SystemUserRoleAssignment } from '@/api/types'
 import { useStore } from '@/stores'
 
 defineOptions({ name: 'UserRoleSettingSection' })
@@ -27,7 +27,7 @@ const workspaceRequiredRule: FormItemRule = {
 }
 
 function isAdminRole(roleId: string) {
-  return props.roleOptions.find(({ id }) => id === roleId)?.type === 'ADMIN'
+  return props.roleOptions.find(({ id }) => id === roleId)?.type === ROLE_TYPE.ADMIN
 }
 
 function addRole() {
diff --git a/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue b/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue
index 1db6905cddd..7899ac2a467 100644
--- a/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue
+++ b/ui/src/views/system/identity/users/dialog/BatchSetUserRoleDialog.vue
@@ -3,7 +3,7 @@ import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 import CurrentUserApi from '@/api/admin/auth/current-user'
 import UserManageApi from '@/api/admin/system/user-manage'
-import type { ListItem, BatchSetUserWorkspaceRolesRequest } from '@/api/types'
+import { ROLE_TYPE, type ListItem, type BatchSetUserWorkspaceRolesRequest } from '@/api/types'
 import { useStore } from '@/stores'
 import { MsgSuccess } from '@/utils/message'
 import UserRoleSetting from '../components/UserRoleSetting.vue'
@@ -67,7 +67,8 @@ function submitBatchSetUserRoles() {
           role_setting: batchRoleForm.role_setting.map((assignment) => ({
             ...assignment,
             workspace_ids:
-              roleOptions.value.find(({ id }) => id === assignment.role_id)?.type === 'ADMIN'
+              roleOptions.value.find(({ id }) => id === assignment.role_id)?.type ===
+              ROLE_TYPE.ADMIN
                 ? ['None']
                 : assignment.workspace_ids,
           })),
diff --git a/ui/src/views/system/identity/workspaces/WorkspaceListView.vue b/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
index f1a41d1a738..51b2d5525f3 100644
--- a/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
+++ b/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
@@ -234,8 +234,8 @@ onMounted(() => loadWorkspaceOptions())
     <template #default="{ Header }">
       <template v-if="currentWorkspace">
         <component :is="Header">
-          <div class="flex items-center gap-2">
-            <h4>{{ currentWorkspace.name }}</h4>
+          <div class="flex min-w-0 flex-1 items-center gap-2">
+            <h4 class="min-w-0 truncate">{{ currentWorkspace.name }}</h4>
             <el-divider direction="vertical" />
             <span class="flex items-center text-N500">
               <MkIcon name="icon_member_filled" class="mr-1" />
@@ -262,7 +262,7 @@ onMounted(() => loadWorkspaceOptions())
           :span-method="objectSpanMethod"
           :max-table-height="280"
           :row-key="getWorkspaceMemberRowKey"
-          :search="Boolean(memberSearchQuery)"
+          :isSearching="Boolean(memberSearchQuery)"
         >
           <el-table-column type="selection" width="64" />
           <el-table-column prop="nick_name" label="姓名" />
diff --git a/ui/src/views/system/settings/authentication/AuthenticationView.vue b/ui/src/views/system/settings/authentication/AuthenticationView.vue
index de7f6789136..46218f6a72e 100644
--- a/ui/src/views/system/settings/authentication/AuthenticationView.vue
+++ b/ui/src/views/system/settings/authentication/AuthenticationView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, type Component } from 'vue'
+import { LOGIN_METHOD } from '@/api/types'
 import LDAP from './components/LDAP.vue'
 import CAS from './components/CAS.vue'
 import OIDC from './components/OIDC.vue'
@@ -14,14 +15,14 @@ interface AuthenticationTab {
   name: string
 }
 
-const activeName = ref('SCAN')
+const activeName = ref('LoginSetting')
 const authenticationTabs: AuthenticationTab[] = [
   { label: '登录设置', name: 'LoginSetting', component: LoginSetting },
-  { label: 'LDAP', name: 'LDAP', component: LDAP },
-  { label: 'CAS', name: 'CAS', component: CAS },
-  { label: 'OIDC', name: 'OIDC', component: OIDC },
-  { label: 'OAuth2', name: 'OAuth2', component: OAuth2 },
-  { label: 'SAML2', name: 'SAML2', component: Saml2 },
+  { label: 'LDAP', name: LOGIN_METHOD.LDAP, component: LDAP },
+  { label: 'CAS', name: LOGIN_METHOD.CAS, component: CAS },
+  { label: 'OIDC', name: LOGIN_METHOD.OIDC, component: OIDC },
+  { label: 'OAuth2', name: LOGIN_METHOD.OAUTH2, component: OAuth2 },
+  { label: 'SAML2', name: LOGIN_METHOD.SAML2, component: Saml2 },
   { label: '扫码登录', name: 'SCAN', component: SCAN },
 ]
 </script>
@@ -47,15 +48,4 @@ const authenticationTabs: AuthenticationTab[] = [
   </MkViewLayout>
 </template>
 
-<style scoped lang="scss">
-.authentication-tabs {
-  :deep(.el-tabs__header) {
-    flex-shrink: 0;
-  }
-
-  :deep(.el-tabs__content) {
-    min-height: 0;
-    flex: 1;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/ui/src/views/system/settings/authentication/EditSCANDrawer.vue b/ui/src/views/system/settings/authentication/EditSCANDrawer.vue
index fb517447768..adc94cf38b0 100644
--- a/ui/src/views/system/settings/authentication/EditSCANDrawer.vue
+++ b/ui/src/views/system/settings/authentication/EditSCANDrawer.vue
@@ -2,7 +2,7 @@
 import { computed, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import AuthScanApi from '@/api/admin/system/auth-scan-setting'
-import type { QrLoginPlatformRequest } from '@/api/types'
+import { LOGIN_METHOD, type QrLoginPlatformRequest } from '@/api/types'
 import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
 import { MsgSuccess, MsgError } from '@/utils/message'
 
@@ -11,7 +11,7 @@ const visible = ref(false)
 const loading = ref(false)
 const formRef = useTemplateRef<FormInstance>('formRef')
 const form = reactive<QrLoginPlatformRequest>({
-  key: 'wecom',
+  key: LOGIN_METHOD.WECOM,
   isActive: false,
   config: {},
 })
@@ -65,7 +65,7 @@ function close() {
 }
 
 function resetData() {
-  Object.assign(form, { key: 'wecom', isActive: false, config: {} })
+  Object.assign(form, { key: LOGIN_METHOD.WECOM, isActive: false, config: {} })
   formRef.value?.resetFields()
 }
 defineExpose({ open })
diff --git a/ui/src/views/system/settings/authentication/components/CAS.vue b/ui/src/views/system/settings/authentication/components/CAS.vue
index 581c5c422af..1704c972532 100644
--- a/ui/src/views/system/settings/authentication/components/CAS.vue
+++ b/ui/src/views/system/settings/authentication/components/CAS.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'CasAuthenticationSetting' })
@@ -11,7 +11,7 @@ const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? '
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'CAS',
+  auth_type: LOGIN_METHOD.CAS,
   config: { ldpUri: '', validateUrl: '', redirectUrl: defaultRedirectUrl },
   is_active: false,
 })
diff --git a/ui/src/views/system/settings/authentication/components/LDAP.vue b/ui/src/views/system/settings/authentication/components/LDAP.vue
index ec9f47deb1f..7694b94622c 100644
--- a/ui/src/views/system/settings/authentication/components/LDAP.vue
+++ b/ui/src/views/system/settings/authentication/components/LDAP.vue
@@ -2,14 +2,14 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'LdapAuthenticationSetting' })
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'LDAP',
+  auth_type: LOGIN_METHOD.LDAP,
   config: { ldap_server: '', base_dn: '', password: '', ou: '', ldap_filter: '', ldap_mapping: '' },
   is_active: false,
 })
diff --git a/ui/src/views/system/settings/authentication/components/LoginSetting.vue b/ui/src/views/system/settings/authentication/components/LoginSetting.vue
index 632ae90d998..8d74592a48d 100644
--- a/ui/src/views/system/settings/authentication/components/LoginSetting.vue
+++ b/ui/src/views/system/settings/authentication/components/LoginSetting.vue
@@ -4,7 +4,14 @@ import type { FormInstance, FormRules } from 'element-plus'
 import CurrentUserApi from '@/api/admin/auth/current-user'
 import AuthSettingApi from '@/api/admin/system/auth-setting'
 import UserGroupsApi from '@/api/admin/system/user-groups'
-import type { ListItem, LoginAuthSetting, SystemUserGroup, LoginMethod } from '@/api/types'
+import {
+  LOGIN_METHOD,
+  ROLE_TYPE,
+  type ListItem,
+  type LoginAuthSetting,
+  type SystemUserGroup,
+  type LoginMethod,
+} from '@/api/types'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth'
 import { MsgSuccess } from '@/utils/message'
 import { useStore } from '@/stores'
@@ -14,12 +21,12 @@ const { auth } = useStore()
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<LoginAuthSetting>({
-  login_methods: ['LOCAL'],
-  default_value: 'LOCAL',
+  login_methods: [LOGIN_METHOD.LOCAL],
+  default_value: LOGIN_METHOD.LOCAL,
   max_attempts: 1,
   failed_attempts: 5,
   lock_time: 10,
-  role_id: 'USER',
+  role_id: ROLE_TYPE.USER,
   workspace_id: 'default',
   permission: 'NOT_AUTH',
 })
@@ -62,7 +69,7 @@ const workspaceOptions = ref<ListItem[]>([])
 const selectedRoleType = computed(
   () => roleOptions.value.find(({ id }) => id === form.role_id)?.type,
 )
-const showWorkspaceSelector = computed(() => selectedRoleType.value !== 'ADMIN')
+const showWorkspaceSelector = computed(() => selectedRoleType.value !== ROLE_TYPE.ADMIN)
 
 function loadRoleSettingOptions() {
   roleSettingOptionsLoading.value = true
diff --git a/ui/src/views/system/settings/authentication/components/OAuth2.vue b/ui/src/views/system/settings/authentication/components/OAuth2.vue
index ee781828c29..fbf2bc9fb77 100644
--- a/ui/src/views/system/settings/authentication/components/OAuth2.vue
+++ b/ui/src/views/system/settings/authentication/components/OAuth2.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'OidcAuthenticationSetting' })
@@ -11,7 +11,7 @@ const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? '
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'OAuth2',
+  auth_type: LOGIN_METHOD.OAUTH2,
   config: {
     authEndpoint: '',
     tokenEndpoint: '',
diff --git a/ui/src/views/system/settings/authentication/components/OIDC.vue b/ui/src/views/system/settings/authentication/components/OIDC.vue
index 924baa67a21..6d4fc85ea28 100644
--- a/ui/src/views/system/settings/authentication/components/OIDC.vue
+++ b/ui/src/views/system/settings/authentication/components/OIDC.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'OidcAuthenticationSetting' })
@@ -12,7 +12,7 @@ const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? '
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'OIDC',
+  auth_type: LOGIN_METHOD.OIDC,
   config: {
     authEndpoint: '',
     tokenEndpoint: '',
diff --git a/ui/src/views/system/settings/authentication/components/SCANLogin.vue b/ui/src/views/system/settings/authentication/components/SCANLogin.vue
index 43af77dc69d..e0e992688d5 100644
--- a/ui/src/views/system/settings/authentication/components/SCANLogin.vue
+++ b/ui/src/views/system/settings/authentication/components/SCANLogin.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
 import AuthScanApi from '@/api/admin/system/auth-scan-setting'
-import type { QrCodeProvider, QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
+import {
+  LOGIN_METHOD,
+  type QrCodeProvider,
+  type QrLoginPlatform,
+  type QrLoginPlatformRequest,
+} from '@/api/types'
 import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
 import { MsgSuccess, MsgError } from '@/utils/message'
 import dingtalkLogo from '@/assets/logo/logo_dingtalk.svg'
@@ -20,16 +25,16 @@ const platformDefinitions: {
   logo: string
 }[] = [
   {
-    key: 'wecom',
+    key: LOGIN_METHOD.WECOM,
     logo: enterpriseWechatLogo,
     configKeys: ['corp_id', 'agent_id', 'app_secret'],
   },
   {
-    key: 'dingtalk',
+    key: LOGIN_METHOD.DINGTALK,
     logo: dingtalkLogo,
     configKeys: ['corp_id', 'app_key', 'app_secret'],
   },
-  { key: 'lark', logo: larkLogo, configKeys: ['app_key', 'app_secret'] },
+  { key: LOGIN_METHOD.LARK, logo: larkLogo, configKeys: ['app_key', 'app_secret'] },
 ]
 
 const apiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api`
diff --git a/ui/src/views/system/settings/authentication/components/Saml2.vue b/ui/src/views/system/settings/authentication/components/Saml2.vue
index 433d16975ff..6ad66883e41 100644
--- a/ui/src/views/system/settings/authentication/components/Saml2.vue
+++ b/ui/src/views/system/settings/authentication/components/Saml2.vue
@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting } from '@/api/types'
+import { LOGIN_METHOD, type AuthProviderSetting } from '@/api/types'
 import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'SamlAuthenticationSetting' })
@@ -10,7 +10,7 @@ const samlApiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/a
 const authFormRef = useTemplateRef<FormInstance>('authFormRef')
 const loading = ref(false)
 const form = reactive<AuthProviderSetting>({
-  auth_type: 'SAML2',
+  auth_type: LOGIN_METHOD.SAML2,
   config: {
     idpMetaUrl: '',
     wantAssertionsSigned: true,