diff --git a/cfg/cfg.go b/cfg/cfg.go
index 008580d..5a74951 100644
--- a/cfg/cfg.go
+++ b/cfg/cfg.go
@@ -55,7 +55,7 @@ var Global = &Options{
 	DB: config.Database{
 		Type:   "mysql",
 		Prefix: "vb_",
-		DSN:    "root:123456@tcp(127.0.0.1:3306)/vbase?charset=utf8&parseTime=True&loc=Local",
+		DSN:    "root:123456@tcp(127.0.0.1:3306)/vbase?charset=utf8mb4&parseTime=True&loc=Local",
 	},
 	Redis: config.Redis{
 		Addr: "memory",
diff --git a/ui/langs.json b/ui/langs.json
index ccb71cd..787db75 100644
--- a/ui/langs.json
+++ b/ui/langs.json
@@ -90,13 +90,46 @@
     "oauth.provider.enabled": "Enabled",
     "oauth.provider.name": "Name",
     "oauth.provider.redirect_uri": "Redirect URI",
+    "common.close": "Close",
+    "common.detail": "Detail",
+    "common.remove": "Remove",
+    "org.created": "Created successfully",
+    "org.deleted": "Deleted successfully",
+    "org.required_fields": "Please fill in required fields",
+    "org.updated": "Updated successfully",
+    "permission.level.admin": "Admin",
+    "permission.level.create": "Create",
+    "permission.level.read": "Read",
+    "permission.level.rw": "Read+Write",
+    "permission.level.write": "Write",
+    "role.add_permission": "Add Permission",
+    "role.add_user": "Add User",
     "role.code": "Role Code",
     "role.create": "Create Role",
     "role.delete_confirm": "Are you sure you want to delete this role?",
     "role.description": "Description",
+    "role.detail": "Role Detail",
     "role.edit": "Edit Role",
     "role.name": "Role Name",
+    "role.no_available_permissions": "No available permissions",
+    "role.no_available_users": "No available users",
+    "role.no_permissions": "No permissions assigned",
+    "role.no_users": "No users assigned",
+    "role.permission_removed": "Permission removed",
+    "role.permissions": "Permissions",
+    "role.permissions_desc": "Manage permissions for this role",
+    "role.permissions_updated": "Permissions updated",
+    "role.remove_permission_confirm": "Remove this permission?",
+    "role.remove_user_confirm": "Remove this user from role?",
+    "role.search_permissions": "Search permissions...",
     "role.search_placeholder": "Search roles...",
+    "role.search_users": "Search users...",
+    "role.search_users_placeholder": "Search by username or nickname...",
+    "role.select_permissions": "Select Permissions",
+    "role.select_users": "Select Users",
+    "role.user_removed": "User removed",
+    "role.users": "Users",
+    "role.users_updated": "Users updated",
     "settings.app.id": "App ID",
     "settings.app.id_desc": "Unique identifier for the application",
     "settings.app.name": "App Name",
@@ -236,9 +269,12 @@
     "auth.welcome_back": "欢迎回来！",
     "common.actions": "操作",
     "common.cancel": "取消",
+    "common.close": "关闭",
     "common.create": "创建",
     "common.delete": "删除",
+    "common.detail": "详情",
     "common.edit": "编辑",
+    "common.remove": "移除",
     "common.forbidden": "禁止访问",
     "common.not_found": "页面未找到",
     "common.processing": "处理中...",
@@ -266,14 +302,43 @@
     "oauth.provider.redirect_uri": "回调地址",
     "oauth.create": "创建",
     "oauth.create_app": "创建应用",
-    "org.created": "组织已创建",
+    "org.created": "创建成功",
+    "org.deleted": "删除成功",
+    "org.required_fields": "请填写必填字段",
+    "org.updated": "更新成功",
+    "permission.level.admin": "管理",
+    "permission.level.create": "创建",
+    "permission.level.read": "读取",
+    "permission.level.rw": "读写",
+    "permission.level.write": "写入",
+    "role.add_permission": "添加权限",
+    "role.add_user": "添加用户",
     "role.code": "角色代码",
     "role.create": "创建角色",
     "role.delete_confirm": "确定要删除该角色吗？",
     "role.description": "描述",
+    "role.detail": "角色详情",
     "role.edit": "编辑角色",
     "role.name": "角色名称",
+    "role.no_available_permissions": "没有可用权限",
+    "role.no_available_users": "没有可用用户",
+    "role.no_permissions": "未分配权限",
+    "role.no_users": "未分配用户",
+    "role.permission_removed": "权限已移除",
+    "role.permissions": "权限管理",
+    "role.permissions_desc": "管理此角色的权限",
+    "role.permissions_updated": "权限已更新",
+    "role.remove_permission_confirm": "确定移除该权限？",
+    "role.remove_user_confirm": "确定将该用户从角色中移除？",
+    "role.search_permissions": "搜索权限...",
     "role.search_placeholder": "搜索角色...",
+    "role.search_users": "搜索用户...",
+    "role.search_users_placeholder": "搜索用户名或昵称...",
+    "role.select_permissions": "选择权限",
+    "role.select_users": "选择用户",
+    "role.user_removed": "用户已移除",
+    "role.users": "用户管理",
+    "role.users_updated": "用户已更新",
     "settings.app.id": "应用标识",
     "settings.app.id_desc": "应用的唯一标识符",
     "settings.app.name": "应用名称",
diff --git a/ui/page/sys/role/index.html b/ui/page/sys/role/index.html
index d99822a..ea8bcf1 100644
--- a/ui/page/sys/role/index.html
+++ b/ui/page/sys/role/index.html
@@ -116,6 +116,126 @@
       background-color: color-mix(in srgb, var(--text-color-disabled), transparent 85%);
       color: var(--text-color-secondary);
     }
+
+    /* Tab Styles */
+    .tab, .tab-active {
+      padding: 12px 20px;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all var(--transition-base);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 500;
+    }
+
+    .tab {
+      color: var(--text-color-secondary);
+    }
+
+    .tab:hover {
+      color: var(--text-color);
+    }
+
+    .tab-active {
+      color: var(--color-primary);
+      border-bottom-color: var(--color-primary);
+    }
+
+    /* Permission List */
+    .permission-list, .user-list, .available-permission-list, .available-user-list {
+      max-height: 400px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .permission-item, .user-item, .available-permission-item, .available-user-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      background: var(--bg-color-tertiary);
+      border-radius: var(--radius-md);
+      transition: background var(--transition-base);
+    }
+
+    .permission-item:hover, .user-item:hover {
+      background: var(--border-color);
+    }
+
+    .permission-info, .user-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .permission-id, .user-name {
+      font-weight: 500;
+      color: var(--text-color);
+    }
+
+    .permission-scope, .user-username {
+      font-size: var(--font-size-sm);
+      color: var(--text-color-secondary);
+    }
+
+    .permission-level {
+      flex-shrink: 0;
+    }
+
+    .level-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-xs);
+      font-weight: 500;
+    }
+
+    .level-1 { background: color-mix(in srgb, var(--color-info), transparent 85%); color: var(--color-info); }
+    .level-2 { background: color-mix(in srgb, var(--color-success), transparent 85%); color: var(--color-success); }
+    .level-4 { background: color-mix(in srgb, var(--color-warning), transparent 85%); color: var(--color-warning); }
+    .level-6 { background: color-mix(in srgb, var(--color-warning), transparent 70%); color: var(--color-warning); }
+    .level-7 { background: color-mix(in srgb, var(--color-danger), transparent 85%); color: var(--color-danger); }
+
+    /* User Avatar */
+    .user-avatar, .user-avatar-sm {
+      border-radius: var(--radius-full);
+      object-fit: cover;
+    }
+
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+    }
+
+    .user-avatar-sm {
+      width: 32px;
+      height: 32px;
+    }
+
+    /* Empty State */
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px;
+      color: var(--text-color-secondary);
+      gap: 12px;
+    }
+
+    .empty-state p {
+      margin: 0;
+    }
+
+    /* Checkbox styling */
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: var(--color-primary);
+    }
   </style>
 </head>
 
@@ -168,6 +288,9 @@
           </td>
           <td>
             <div style="display: flex; gap: 8px;">
+              <v-btn icon size="sm" variant="outline" :click="() => openDetailModal(r)" :title="$t('common.detail')">
+                <i class="fas fa-eye"></i>
+              </v-btn>
               <v-btn icon size="sm" variant="outline" :click="() => openEditModal(r)" :title="$t('common.edit')" :disabled="r.is_system">
                 <i class="fas fa-edit"></i>
               </v-btn>
@@ -196,8 +319,145 @@
       </v-btn>
     </div>
   </v-dialog>
+
+  <!-- Role Detail Dialog - Permissions & Users -->
+  <v-dialog v:visible="showDetailModal" width="800px"
+    :title="$t('role.detail') + ' - ' + (currentRole?.name || '')">
+    <div style="display: flex; flex-direction: column; gap: 20px;">
+      <!-- Tabs -->
+      <div style="display: flex; gap: 8px; border-bottom: 1px solid var(--border-color);">
+        <div :class="detailTab === 'permissions' ? 'tab-active' : 'tab'" @click="switchTab('permissions')">
+          <i class="fas fa-shield-alt"></i> {{ $t('role.permissions') }}
+        </div>
+        <div :class="detailTab === 'users' ? 'tab-active' : 'tab'" @click="switchTab('users')">
+          <i class="fas fa-users"></i> {{ $t('role.users') }}
+        </div>
+      </div>
+
+      <!-- Permissions Tab -->
+      <div v-if="detailTab === 'permissions'" style="display: flex; flex-direction: column; gap: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <span style="color: var(--text-color-secondary); font-size: var(--font-size-sm);">
+            {{ $t('role.permissions_desc') }}
+          </span>
+          <v-btn size="sm" color="primary" :click="openPermissionSelector" :disabled="currentRole?.is_system">
+            <i class="fas fa-plus"></i> {{ $t('role.add_permission') }}
+          </v-btn>
+        </div>
+        <div class="permission-list">
+          <div v-for="p in rolePermissions" class="permission-item">
+            <div class="permission-info">
+              <div class="permission-id">{{ p.permission_id }}</div>
+              <div class="permission-scope">{{ p.scope }}</div>
+            </div>
+            <div class="permission-level">
+              <span :class="'level-badge level-' + p.level">{{ formatLevel(p.level) }}</span>
+            </div>
+            <v-btn v-if="!currentRole?.is_system" icon size="xs" color="danger" variant="ghost"
+              :click="() => removePermission(p)" :title="$t('common.remove')">
+              <i class="fas fa-times"></i>
+            </v-btn>
+          </div>
+          <div v-if="rolePermissions.length === 0" class="empty-state">
+            <i class="fas fa-shield-alt" style="font-size: 48px; color: var(--text-color-disabled);"></i>
+            <p>{{ $t('role.no_permissions') }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Users Tab -->
+      <div v-if="detailTab === 'users'" style="display: flex; flex-direction: column; gap: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div class="search-box" style="min-width: 240px;">
+            <i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
+            <input type="text" v:value="userSearchQuery" :placeholder="$t('role.search_users')">
+          </div>
+          <v-btn size="sm" color="primary" :click="openUserSelector" :disabled="currentRole?.is_system">
+            <i class="fas fa-plus"></i> {{ $t('role.add_user') }}
+          </v-btn>
+        </div>
+        <div class="user-list">
+          <div v-for="u in filteredRoleUsers" class="user-item">
+            <img :src="u.avatar || '/assets/default-avatar.png'" class="user-avatar" alt="">
+            <div class="user-info">
+              <div class="user-name">{{ u.nickname || u.username }}</div>
+              <div class="user-username">@{{ u.username }}</div>
+            </div>
+            <v-btn v-if="!currentRole?.is_system" icon size="xs" color="danger" variant="ghost"
+              :click="() => removeUserFromRole(u)" :title="$t('common.remove')">
+              <i class="fas fa-times"></i>
+            </v-btn>
+          </div>
+          <div v-if="filteredRoleUsers.length === 0" class="empty-state">
+            <i class="fas fa-users" style="font-size: 48px; color: var(--text-color-disabled);"></i>
+            <p>{{ $t('role.no_users') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div vslot="footer">
+      <v-btn variant="outline" :click="closeDetailModal">{{ $t('common.close') }}</v-btn>
+    </div>
+  </v-dialog>
+
+  <!-- Permission Selector Dialog -->
+  <v-dialog v:visible="showPermissionSelector" width="600px"
+    :title="$t('role.select_permissions')">
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="search-box">
+        <i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
+        <input type="text" v:value="permissionSearchQuery" :placeholder="$t('role.search_permissions')">
+      </div>
+      <div class="available-permission-list">
+        <div v-for="p in filteredAvailablePermissions" class="available-permission-item">
+          <input type="checkbox" :checked="isPermissionSelected(p.id)" @change="togglePermission(p.id)">
+          <div class="permission-info">
+            <div class="permission-id">{{ p.permission_id }}</div>
+            <div class="permission-scope">{{ p.scope }}</div>
+          </div>
+        </div>
+        <div v-if="filteredAvailablePermissions.length === 0" class="empty-state">
+          <p>{{ $t('role.no_available_permissions') }}</p>
+        </div>
+      </div>
+    </div>
+    <div vslot="footer">
+      <v-btn variant="outline" :click="closePermissionSelector">{{ $t('common.cancel') }}</v-btn>
+      <v-btn color="primary" :click="saveRolePermissions">{{ $t('common.save') }}</v-btn>
+    </div>
+  </v-dialog>
+
+  <!-- User Selector Dialog -->
+  <v-dialog v:visible="showUserSelector" width="600px"
+    :title="$t('role.select_users')">
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="search-box">
+        <i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
+        <input type="text" v:value="availableUserSearchQuery" @input="searchAvailableUsers"
+          :placeholder="$t('role.search_users_placeholder')">
+      </div>
+      <div class="available-user-list">
+        <div v-for="u in availableUsers" class="available-user-item">
+          <input type="checkbox" :checked="isUserSelected(u.id)" @change="toggleUser(u.id)">
+          <img :src="u.avatar || '/assets/default-avatar.png'" class="user-avatar-sm" alt="">
+          <div class="user-info">
+            <div class="user-name">{{ u.nickname || u.username }}</div>
+            <div class="user-username">@{{ u.username }}</div>
+          </div>
+        </div>
+        <div v-if="availableUsers.length === 0" class="empty-state">
+          <p>{{ $t('role.no_available_users') }}</p>
+        </div>
+      </div>
+    </div>
+    <div vslot="footer">
+      <v-btn variant="outline" :click="closeUserSelector">{{ $t('common.cancel') }}</v-btn>
+      <v-btn color="primary" :click="saveRoleUsers">{{ $t('common.save') }}</v-btn>
+    </div>
+  </v-dialog>
 </body>
 <script setup>
+  // Basic data
   roles = [];
   searchQuery = "";
   showModal = false;
@@ -209,6 +469,26 @@
     description: ""
   };
 
+  // Detail modal data
+  showDetailModal = false;
+  detailTab = "permissions";
+  currentRole = null;
+
+  // Permissions data
+  rolePermissions = [];
+  showPermissionSelector = false;
+  permissionSearchQuery = "";
+  availablePermissions = [];
+  selectedPermissionIds = [];
+
+  // Users data
+  roleUsers = [];
+  userSearchQuery = "";
+  showUserSelector = false;
+  availableUserSearchQuery = "";
+  availableUsers = [];
+  selectedUserIds = [];
+
   loadRoles = async () => {
     try {
       const res = await $axios.get('/api/roles');
@@ -246,20 +526,20 @@
 
   saveRole = async () => {
     if (!formData.code || !formData.name) {
-      $message.error($t('org.required_fields')); // Reusing existing message or add new one
+      $message.error($t('org.required_fields'));
       return;
     }
     try {
       if (isEdit) {
-        const payload = { 
+        const payload = {
           name: formData.name,
           description: formData.description
         };
         await $axios.patch(`/api/roles/${formData.id}`, payload);
-        $message.success($t('org.updated')); // Reusing
+        $message.success($t('org.updated'));
       } else {
         await $axios.post('/api/roles', formData);
-        $message.success($t('org.created')); // Reusing
+        $message.success($t('org.created'));
       }
       closeModal();
       loadRoles();
@@ -272,12 +552,278 @@
     try {
       await $message.confirm($t('role.delete_confirm'));
       await $axios.delete(`/api/roles/${r.id}`);
-      $message.success($t('org.deleted')); // Reusing
+      $message.success($t('org.deleted'));
       loadRoles();
     } catch (e) {
       // Cancelled
     }
   };
+
+  // Detail modal functions
+  openDetailModal = (r) => {
+    currentRole = r;
+    detailTab = "permissions";
+    showDetailModal = true;
+    loadRolePermissions();
+    loadRoleUsers();
+  };
+
+  closeDetailModal = () => {
+    showDetailModal = false;
+    currentRole = null;
+    rolePermissions = [];
+    roleUsers = [];
+  };
+
+  switchTab = (tab) => {
+    detailTab = tab;
+  };
+
+  // Permission functions
+  loadRolePermissions = async () => {
+    if (!currentRole) return;
+    try {
+      const res = await $axios.get(`/api/roles/${currentRole.id}/permissions`);
+      rolePermissions = res || [];
+    } catch (e) {
+      $message.error(e.message);
+    }
+  };
+
+  openPermissionSelector = async () => {
+    selectedPermissionIds = rolePermissions.map(p => p.id);
+    showPermissionSelector = true;
+    await loadAvailablePermissions();
+  };
+
+  closePermissionSelector = () => {
+    showPermissionSelector = false;
+    permissionSearchQuery = "";
+    selectedPermissionIds = [];
+  };
+
+  loadAvailablePermissions = async () => {
+    // Get all permissions from user's own permissions or a dedicated endpoint
+    // For now, we'll use a mock approach - in real implementation,
+    // you might need a /api/permissions endpoint to list all available permissions
+    try {
+      // This is a placeholder - adjust based on your actual API
+      const res = await $axios.get('/api/auth/me');
+      if (res.permissions) {
+        // Extract unique permission IDs
+        const uniquePerms = [];
+        const seen = new Set();
+        res.permissions.forEach(p => {
+          if (!seen.has(p.permission_id)) {
+            seen.add(p.permission_id);
+            uniquePerms.push({
+              id: p.permission_id,
+              permission_id: p.permission_id,
+              scope: p.scope,
+              level: p.level
+            });
+          }
+        });
+        availablePermissions = uniquePerms;
+      }
+    } catch (e) {
+      // Fallback: use current role permissions as base
+      availablePermissions = rolePermissions.map(p => ({
+        id: p.id,
+        permission_id: p.permission_id,
+        scope: p.scope,
+        level: p.level
+      }));
+    }
+  };
+
+  filteredAvailablePermissions = () => {
+    if (!permissionSearchQuery) return availablePermissions;
+    const query = permissionSearchQuery.toLowerCase();
+    return availablePermissions.filter(p =>
+      p.permission_id.toLowerCase().includes(query) ||
+      p.scope.toLowerCase().includes(query)
+    );
+  };
+
+  isPermissionSelected = (id) => {
+    return selectedPermissionIds.includes(id);
+  };
+
+  togglePermission = (id) => {
+    const idx = selectedPermissionIds.indexOf(id);
+    if (idx > -1) {
+      selectedPermissionIds.splice(idx, 1);
+    } else {
+      selectedPermissionIds.push(id);
+    }
+    // Trigger reactivity
+    selectedPermissionIds = [...selectedPermissionIds];
+  };
+
+  saveRolePermissions = async () => {
+    if (!currentRole) return;
+    try {
+      await $axios.put(`/api/roles/${currentRole.id}/permissions`, {
+        permission_ids: selectedPermissionIds
+      });
+      $message.success($t('role.permissions_updated'));
+      closePermissionSelector();
+      loadRolePermissions();
+    } catch (e) {
+      $message.error(e.message);
+    }
+  };
+
+  removePermission = async (p) => {
+    if (!currentRole || currentRole.is_system) return;
+    try {
+      await $message.confirm($t('role.remove_permission_confirm'));
+      const newPermissions = rolePermissions
+        .filter(rp => rp.id !== p.id)
+        .map(rp => rp.id);
+      await $axios.put(`/api/roles/${currentRole.id}/permissions`, {
+        permission_ids: newPermissions
+      });
+      $message.success($t('role.permission_removed'));
+      loadRolePermissions();
+    } catch (e) {
+      // Cancelled or error
+    }
+  };
+
+  formatLevel = (level) => {
+    const levels = {
+      1: $t('permission.level.create') || 'Create',
+      2: $t('permission.level.read') || 'Read',
+      4: $t('permission.level.write') || 'Write',
+      6: $t('permission.level.rw') || 'Read+Write',
+      7: $t('permission.level.admin') || 'Admin'
+    };
+    return levels[level] || `Level ${level}`;
+  };
+
+  // User functions
+  loadRoleUsers = async () => {
+    if (!currentRole) return;
+    try {
+      // Get users who have this role
+      // We need to fetch users and filter by role
+      const res = await $axios.get('/api/users', { params: { page_size: 1000 } });
+      const allUsers = res.items || [];
+      // For each user, check if they have this role
+      const usersWithRole = [];
+      for (const user of allUsers) {
+        try {
+          const userRoles = await $axios.get(`/api/users/${user.id}/roles`);
+          if (userRoles.some(ur => ur.id === currentRole.id)) {
+            usersWithRole.push(user);
+          }
+        } catch (e) {
+          // Skip users we can't check
+        }
+      }
+      roleUsers = usersWithRole;
+    } catch (e) {
+      $message.error(e.message);
+    }
+  };
+
+  filteredRoleUsers = () => {
+    if (!userSearchQuery) return roleUsers;
+    const query = userSearchQuery.toLowerCase();
+    return roleUsers.filter(u =>
+      (u.nickname || u.username).toLowerCase().includes(query) ||
+      u.username.toLowerCase().includes(query)
+    );
+  };
+
+  openUserSelector = async () => {
+    selectedUserIds = roleUsers.map(u => u.id);
+    showUserSelector = true;
+    await searchAvailableUsers();
+  };
+
+  closeUserSelector = () => {
+    showUserSelector = false;
+    availableUserSearchQuery = "";
+    availableUsers = [];
+    selectedUserIds = [];
+  };
+
+  searchAvailableUsers = async () => {
+    try {
+      const res = await $axios.get('/api/auth/users', {
+        params: {
+          keyword: availableUserSearchQuery,
+          limit: 50
+        }
+      });
+      availableUsers = res.items || [];
+    } catch (e) {
+      $message.error(e.message);
+    }
+  };
+
+  isUserSelected = (id) => {
+    return selectedUserIds.includes(id);
+  };
+
+  toggleUser = (id) => {
+    const idx = selectedUserIds.indexOf(id);
+    if (idx > -1) {
+      selectedUserIds.splice(idx, 1);
+    } else {
+      selectedUserIds.push(id);
+    }
+    // Trigger reactivity
+    selectedUserIds = [...selectedUserIds];
+  };
+
+  saveRoleUsers = async () => {
+    if (!currentRole) return;
+    try {
+      // Update each user's roles
+      const currentUserIds = roleUsers.map(u => u.id);
+
+      // Users to add
+      const toAdd = selectedUserIds.filter(id => !currentUserIds.includes(id));
+      // Users to remove
+      const toRemove = currentUserIds.filter(id => !selectedUserIds.includes(id));
+
+      for (const userId of toAdd) {
+        const userRoles = await $axios.get(`/api/users/${userId}/roles`);
+        const roleIds = [...userRoles.map(r => r.id), currentRole.id];
+        await $axios.put(`/api/users/${userId}/roles`, { role_ids: roleIds });
+      }
+
+      for (const userId of toRemove) {
+        const userRoles = await $axios.get(`/api/users/${userId}/roles`);
+        const roleIds = userRoles.filter(r => r.id !== currentRole.id).map(r => r.id);
+        await $axios.put(`/api/users/${userId}/roles`, { role_ids: roleIds });
+      }
+
+      $message.success($t('role.users_updated'));
+      closeUserSelector();
+      loadRoleUsers();
+    } catch (e) {
+      $message.error(e.message);
+    }
+  };
+
+  removeUserFromRole = async (u) => {
+    if (!currentRole || currentRole.is_system) return;
+    try {
+      await $message.confirm($t('role.remove_user_confirm'));
+      const userRoles = await $axios.get(`/api/users/${u.id}/roles`);
+      const roleIds = userRoles.filter(r => r.id !== currentRole.id).map(r => r.id);
+      await $axios.put(`/api/users/${u.id}/roles`, { role_ids: roleIds });
+      $message.success($t('role.user_removed'));
+      loadRoleUsers();
+    } catch (e) {
+      // Cancelled or error
+    }
+  };
 </script>
 <script>
   $data.loadRoles();