feat(roles): 优化角色管理页面布局和功能

- 重构角色管理页面布局，提升用户体验
- 添加角色权限物理删除方法
- 增强租户删除时的角色、组织和用户清理逻辑
- 优化用户关联和解绑的安全校验
- 更新前端组件和样式，增强视觉效果和交互性

backend/design/db_schema_pgsql.sql

@@ -19,7 +19,7 @@ CREATE TABLE sys_tenant (
                             updated_at      TIMESTAMP(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
                             is_deleted      SMALLINT DEFAULT 0
 );
-CREATE UNIQUE INDEX uk_tenant_code ON sys_tenant (tenant_code) WHERE is_deleted = FALSE;
+CREATE UNIQUE INDEX uk_tenant_code ON sys_tenant (tenant_code) WHERE is_deleted = 0;
 
 -- 组织架构表
 DROP TABLE IF EXISTS sys_org CASCADE;
@@ -65,7 +65,7 @@ CREATE TABLE sys_user (
                           updated_at         TIMESTAMP(6) NOT NULL DEFAULT now(),
                           is_platform_admin  BOOLEAN DEFAULT false
 );
-CREATE UNIQUE INDEX uk_user_username ON sys_user (username) WHERE is_deleted = FALSE;
+CREATE  INDEX uk_user_username ON sys_user (username) WHERE is_deleted = 0;
 
 -- 角色表
 DROP TABLE IF EXISTS sys_role CASCADE;
@@ -83,7 +83,7 @@ CREATE TABLE sys_role (
 );
 
 CREATE INDEX idx_sys_role_tenant ON sys_role (tenant_id);
-CREATE UNIQUE INDEX uk_role_code ON sys_role (tenant_id, role_code) WHERE is_deleted = FALSE;
+CREATE UNIQUE INDEX uk_role_code ON sys_role (tenant_id, role_code) WHERE is_deleted = 0;
 
 -- 用户-角色关联表 (按 tenant_id 强约束，避免跨租户角色污染)
 DROP TABLE IF EXISTS sys_user_role CASCADE;

backend/src/main/java/com/imeeting/controller/RoleController.java

@@ -54,8 +54,19 @@ public class RoleController {
 
   @GetMapping
   @PreAuthorize("@ss.hasPermi('sys:role:list')")
-  public ApiResponse<List<SysRole>> list() {
-    return ApiResponse.ok(sysRoleService.list());
+  public ApiResponse<List<SysRole>> list(@RequestParam(required = false) Long tenantId) {
+    QueryWrapper<SysRole> wrapper = new QueryWrapper<>();
+    
+    if (authScopeService.isCurrentPlatformAdmin()) {
+      if (tenantId != null) {
+        wrapper.eq("tenant_id", tenantId);
+      }
+    } else {
+      Long currentTenantId = getCurrentTenantId();
+      wrapper.eq("tenant_id", currentTenantId);
+    }
+    
+    return ApiResponse.ok(sysRoleService.list(wrapper));
   }
 
   @GetMapping("/{id}/users")
@@ -241,19 +252,21 @@ public class RoleController {
       if (userId == null) {
         continue;
       }
-      QueryWrapper<SysUserRole> qw = new QueryWrapper<>();
-      qw.eq("role_id", id).eq("user_id", userId).eq("tenant_id", role.getTenantId());
-      if (sysUserRoleMapper.selectCount(qw) == 0) {
-        boolean hasMembership = sysTenantUserService.count(
-            new com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper<com.imeeting.entity.SysTenantUser>()
-                .eq(com.imeeting.entity.SysTenantUser::getUserId, userId)
-                .eq(com.imeeting.entity.SysTenantUser::getTenantId, role.getTenantId())
-        ) > 0;
-        if (!hasMembership) {
-          return ApiResponse.error("用户不属于角色所在租户：" + role.getTenantId());
-        }
-        toInsertUserIds.add(userId);
+      
+      // 修复：处理逻辑删除导致的唯一键冲突
+      // 执行物理删除，彻底清除旧记录（包括已逻辑删除的）
+      sysUserRoleMapper.physicalDelete(id, userId, role.getTenantId());
+      
+      // 确保该用户属于该租户
+      boolean hasMembership = sysTenantUserService.count(
+          new com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper<com.imeeting.entity.SysTenantUser>()
+              .eq(com.imeeting.entity.SysTenantUser::getUserId, userId)
+              .eq(com.imeeting.entity.SysTenantUser::getTenantId, role.getTenantId())
+      ) > 0;
+      if (!hasMembership) {
+        return ApiResponse.error("用户不属于角色所在租户：" + role.getTenantId());
       }
+      toInsertUserIds.add(userId);
     }
 
     for (Long userId : toInsertUserIds) {
@@ -279,9 +292,7 @@ public class RoleController {
     if (!canAccessTenant(role.getTenantId())) {
       return ApiResponse.error("禁止跨租户解绑用户");
     }
-    QueryWrapper<SysUserRole> qw = new QueryWrapper<>();
-    qw.eq("role_id", id).eq("user_id", userId).eq("tenant_id", role.getTenantId());
-    sysUserRoleMapper.delete(qw);
+    sysUserRoleMapper.physicalDelete(id, userId, role.getTenantId());
     authVersionService.invalidateUserTenantAuth(userId, role.getTenantId());
     return ApiResponse.ok(true);
   }

backend/src/main/java/com/imeeting/mapper/SysUserRoleMapper.java

@@ -4,12 +4,19 @@ import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.imeeting.entity.SysUserRole;
 import org.apache.ibatis.annotations.Param;
 import org.apache.ibatis.annotations.Select;
+import org.apache.ibatis.annotations.Delete;
 import org.apache.ibatis.annotations.Mapper;
 
 import java.util.List;
 
 @Mapper
 public interface SysUserRoleMapper extends BaseMapper<SysUserRole> {
+  @Delete("""
+      DELETE FROM sys_user_role 
+      WHERE role_id = #{roleId} AND user_id = #{userId} AND tenant_id = #{tenantId}
+      """)
+  int physicalDelete(@Param("roleId") Long roleId, @Param("userId") Long userId, @Param("tenantId") Long tenantId);
+
   @Select("""
       SELECT COUNT(1)
       FROM sys_user_role ur

backend/src/main/java/com/imeeting/service/impl/SysTenantServiceImpl.java

@@ -54,19 +54,29 @@ public class SysTenantServiceImpl extends ServiceImpl<SysTenantMapper, SysTenant
     public boolean removeById(java.io.Serializable id) {
         Long tenantId = (Long) id;
         
-        // 1. 获取该租户下的所有用户 ID
+        // 1. 获取该租户下的所有用户 ID 和角色 ID
         List<SysTenantUser> tenantUsers = sysTenantUserService.list(
             new LambdaQueryWrapper<SysTenantUser>().eq(SysTenantUser::getTenantId, tenantId)
         );
         List<Long> userIds = tenantUsers.stream().map(SysTenantUser::getUserId).collect(Collectors.toList());
 
-        // 2. 逻辑删除租户下的角色
+        List<SysRole> roles = sysRoleService.list(
+            new LambdaQueryWrapper<SysRole>().eq(SysRole::getTenantId, tenantId)
+        );
+        List<Long> roleIds = roles.stream().map(SysRole::getRoleId).collect(Collectors.toList());
+
+        // 2. 逻辑删除角色权限关联
+        if (roleIds != null && !roleIds.isEmpty()) {
+            sysRolePermissionMapper.delete(new com.baomidou.mybatisplus.core.conditions.query.QueryWrapper<SysRolePermission>().in("role_id", roleIds));
+        }
+
+        // 3. 逻辑删除租户下的角色
         sysRoleService.lambdaUpdate()
             .set(SysRole::getIsDeleted, 1)
             .eq(SysRole::getTenantId, tenantId)
             .update();
             
-        // 3. 逻辑删除租户下的组织
+        // 4. 逻辑删除租户下的组织
         sysOrgService.lambdaUpdate()
             .set(SysOrg::getIsDeleted, 1)
             .eq(SysOrg::getTenantId, tenantId)

frontend/src/api/index.ts

@@ -50,8 +50,8 @@ export async function getUserDetail(id: number) {
   return resp.data.data as SysUser;
 }
 
-export async function listRoles() {
-  const resp = await http.get("/api/roles");
+export async function listRoles(tenantId?: number) {
+  const resp = await http.get("/api/roles", { params: { tenantId } });
   return resp.data.data as SysRole[];
 }
 

frontend/src/pages/Roles.css

@@ -1,80 +1,109 @@
 .roles-page-v2 {
-  padding: 24px;
+  background-color: #f0f2f5;
 }
 
-.full-height-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
 }
 
-.full-height-card .ant-card-body {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
+/* Role List Styling */
+.role-list-container-v3 {
+  scrollbar-width: thin;
+  scrollbar-color: #e8e8e8 transparent;
 }
 
-.role-list-container {
-  flex: 1;
-  overflow-y: auto;
-  border: 1px solid #f0f0f0;
-  border-radius: 4px;
+.role-list-container-v3::-webkit-scrollbar {
+  width: 6px;
 }
 
-.role-row {
-  transition: all 0.3s;
+.role-list-container-v3::-webkit-scrollbar-thumb {
+  background-color: #e8e8e8;
+  border-radius: 3px;
 }
 
-.role-row:hover {
-  background-color: #f5f5f5;
-}
-
-.role-row-selected {
-  background-color: #e6f7ff !important;
-  border-right: 3px solid #1890ff;
-}
-
-.role-item-content {
+.role-item-card-v3 {
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 0;
-}
-
-.role-item-name {
-  font-weight: 600;
-  color: #262626;
-}
-
-.role-item-code {
-  font-size: 12px;
-  color: #8c8c8c;
-}
-
-.role-tabs {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.role-tabs .ant-tabs-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.role-permission-tree-v2 {
-  border: 1px solid #f0f0f0;
-  border-radius: 4px;
-  padding: 16px;
+  border: 1px solid transparent;
   background: #fafafa;
 }
 
-.flex-center {
+.role-item-card-v3:hover {
+  background: #f0f7ff;
+  border-color: #e6f4ff;
+}
+
+.role-item-card-v3.active {
+  background: #e6f4ff;
+  border-color: #1890ff;
+}
+
+.role-item-card-v3.active .role-name {
+  color: #1890ff;
+}
+
+.role-item-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.role-item-name-row {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.role-name {
+  font-size: 14px;
+  color: #262626;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.role-code {
+  font-size: 12px;
+  color: #8c8c8c;
+  display: block;
+}
+
+.role-item-actions {
+  opacity: 0;
+  transition: opacity 0.2s;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.role-item-card-v3:hover .role-item-actions {
+  opacity: 1;
+}
+
+/* Tabs Styling */
+.role-detail-tabs .ant-tabs-nav {
+  margin-bottom: 0 !important;
+  padding: 0 24px;
+  background: #fff;
+}
+
+.role-detail-tabs .ant-tabs-content-holder {
+  background: #fff;
+  padding-top: 24px;
+}
+
+/* Tree Styling */
+.permission-tree-wrapper {
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 20px;
 }
 
 .role-permission-node {
@@ -82,6 +111,24 @@
   align-items: center;
 }
 
-.mb-4 {
-  margin-bottom: 16px;
+.ant-tree-treenode {
+  padding: 4px 0 !important;
 }
+
+.ant-tree-node-content-wrapper {
+  transition: background-color 0.2s;
+}
+
+.ant-tree-node-content-wrapper:hover {
+  background-color: #e6f4ff !important;
+}
+
+/* Table Styling */
+.ant-table-small {
+  background: transparent;
+.full-height-card {
+  height: 100%;
+}
+
+.shadow-sm {
+

frontend/src/pages/Roles.tsx

@@ -16,10 +16,16 @@ import {
   Tabs,
   Empty,
   Select,
-  Modal
+  Modal,
+  Tooltip,
+  Divider,
+  Switch,
+  Badge,
+  Avatar,
+  List
 } from "antd";
 import type { DataNode } from "antd/es/tree";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   createRole,
@@ -46,7 +52,10 @@ import {
   KeyOutlined,
   UserOutlined,
   SaveOutlined,
-  UserAddOutlined
+  UserAddOutlined,
+  TeamOutlined,
+  FilterOutlined,
+  ApartmentOutlined
 } from "@ant-design/icons";
 import PageHeader from "../components/shared/PageHeader";
 import "./Roles.css";
@@ -91,8 +100,12 @@ const toTreeData = (nodes: PermissionNode[], t: any): DataNode[] =>
     key: node.permId,
     title: (
       <span className="role-permission-node">
-        <span>{node.name}</span>
-        {node.permType === "button" && <Tag color="blue" style={{ marginLeft: 8 }}>{t('permissions.permType') === '按钮' ? '按钮' : 'Button'}</Tag>}
+        <span style={{ fontSize: '14px' }}>{node.name}</span>
+        {node.permType === "button" && (
+          <Tag color="cyan" style={{ marginLeft: 8, fontSize: '10px', borderRadius: '10px', padding: '0 8px' }}>
+            {t('permissions.permType') === '按钮' ? '按钮' : 'BTN'}
+          </Tag>
+        )}
       </span>
     ),
     children: node.children && node.children.length > 0 ? toTreeData(node.children, t) : undefined
@@ -108,10 +121,8 @@ export default function Roles() {
   const [permissions, setPermissions] = useState<SysPermission[]>([]);
   const [selectedRole, setSelectedRole] = useState<SysRole | null>(null);
   
-  // Dictionaries
   const { items: statusDict } = useDict("sys_common_status");
 
-  // Platform admin check
   const isPlatformMode = useMemo(() => {
     const profileStr = sessionStorage.getItem("userProfile");
     if (profileStr) {
@@ -123,23 +134,19 @@ export default function Roles() {
 
   const activeTenantId = useMemo(() => Number(localStorage.getItem("activeTenantId") || 0), []);
 
-  // Right side states
   const [selectedPermIds, setSelectedPermIds] = useState<number[]>([]);
   const [halfCheckedIds, setHalfCheckedIds] = useState<number[]>([]);
   const [roleUsers, setRoleUsers] = useState<SysUser[]>([]);
   const [loadingUsers, setLoadingUsers] = useState(false);
 
-  // User selection states
   const [allUsers, setAllUsers] = useState<SysUser[]>([]);
   const [userModalOpen, setUserModalOpen] = useState(false);
   const [selectedUserKeys, setSelectedUserKeys] = useState<number[]>([]);
   const [userSearchText, setUserSearchText] = useState("");
 
-  // Search
   const [searchText, setSearchText] = useState("");
   const [filterTenantId, setFilterTenantId] = useState<number | undefined>(undefined);
 
-  // Drawer (Only for Add/Edit basic info)
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [editing, setEditing] = useState<SysRole | null>(null);
   const [tenants, setTenants] = useState<SysTenant[]>([]);
@@ -186,20 +193,23 @@ export default function Roles() {
       message.success(t('common.success'));
       setUserModalOpen(false);
       selectRole(selectedRole);
-    } catch (e) {
-      // Handled by interceptor
-    }
+    } catch (e) {}
   };
 
   const handleUnbindUser = async (userId: number) => {
     if (!selectedRole) return;
+    
+    // 安全校验：租户管理员角色至少保留一个关联用户
+    if (selectedRole.roleCode === 'TENANT_ADMIN' && roleUsers.length <= 1) {
+      message.warning('租户管理员角色必须至少保留一个关联用户，以防止租户孤立');
+      return;
+    }
+
     try {
       await unbindUserFromRole(selectedRole.roleId, userId);
       message.success(t('common.success'));
       selectRole(selectedRole);
-    } catch (e) {
-      // Handled by interceptor
-    }
+    } catch (e) {}
   };
 
   const filteredModalUsers = useMemo(() => {
@@ -223,15 +233,8 @@ export default function Roles() {
   const loadRoles = async () => {
     setLoading(true);
     try {
-      const list = await listRoles();
+      const list = await listRoles(isPlatformMode ? filterTenantId : activeTenantId);
       let roles = list || [];
-      
-      if (isPlatformMode && filterTenantId !== undefined) {
-          roles = roles.filter(r => r.tenantId === filterTenantId);
-      } else if (!isPlatformMode) {
-          roles = roles.filter(r => r.tenantId === activeTenantId);
-      }
-
       setData(roles);
       if (roles.length > 0 && !selectedRole) {
         selectRole(roles[0]);
@@ -248,33 +251,27 @@ export default function Roles() {
   const selectRole = async (role: SysRole) => {
     setSelectedRole(role);
     try {
-      // Load permissions for this role
       const ids = await listRolePermissions(role.roleId);
       const normalized = (ids || []).map((id) => Number(id)).filter((id) => !Number.isNaN(id));
       
-      // Filter out parents for Tree回显
       const leafIds = normalized.filter(id => {
         return !permissions.some(p => p.parentId === id);
       });
       setSelectedPermIds(leafIds);
       setHalfCheckedIds([]);
 
-      // Load users for this role
       setLoadingUsers(true);
       const users = await fetchUsersByRoleId(role.roleId);
       setRoleUsers(users || []);
-    } catch (e) {
-      // Handled by interceptor
-    } finally {
+    } catch (e) {} finally {
       setLoadingUsers(false);
     }
   };
 
   useEffect(() => {
     loadRoles();
-  }, []);
+  }, [filterTenantId]);
 
-  // Reload role detail if permissions list loaded later
   useEffect(() => {
     if (selectedRole && permissions.length > 0) {
         const leafIds = selectedPermIds.filter(id => {
@@ -319,9 +316,7 @@ export default function Roles() {
       message.success(t('common.success'));
       if (selectedRole?.roleId === id) setSelectedRole(null);
       loadRoles();
-    } catch (e) {
-      // Handled by interceptor
-    }
+    } catch (e) {}
   };
 
   const submitBasic = async () => {
@@ -346,9 +341,7 @@ export default function Roles() {
       
       setDrawerOpen(false);
       loadRoles();
-    } catch (e) {
-      // Handled by interceptor
-    } finally {
+    } catch (e) {} finally {
       setSaving(false);
     }
   };
@@ -360,249 +353,240 @@ export default function Roles() {
       const allPermIds = Array.from(new Set([...selectedPermIds, ...halfCheckedIds]));
       await saveRolePermissions(selectedRole.roleId, allPermIds);
       message.success(t('common.success'));
-    } catch (e) {
-      // Handled by interceptor
-    } finally {
+    } catch (e) {} finally {
       setSaving(false);
     }
   };
 
   return (
-    <div className="roles-page-v2 p-6">
+    <div className="roles-page-v2" style={{ height: 'calc(100vh - 64px)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
       <PageHeader
         title={t('roles.title')}
         subtitle={t('roles.subtitle')}
         extra={can("sys:role:create") && (
           <Button 
             type="primary" 
-            icon={<PlusOutlined aria-hidden="true" />} 
+            icon={<PlusOutlined />} 
             onClick={openCreate}
           >
             {t('common.create')}
           </Button>
         )}
       />
-      <Row gutter={24} style={{ height: 'calc(100vh - 180px)' }}>
-        {/* Left: Role List */}
-        <Col span={8} style={{ height: '100%' }}>
-          <Card 
-            title="角色列表" 
-            className="full-height-card shadow-sm"
-          >
-            <div className="mb-4 flex gap-2">
-              {isPlatformMode && (
-                <Select
-                  placeholder={t('users.tenantFilter')}
-                  style={{ width: 150 }}
-                  allowClear
-                  value={filterTenantId}
-                  onChange={setFilterTenantId}
-                  options={tenants.map(t => ({ label: t.tenantName, value: t.id }))}
-                />
-              )}
-              <Input
-                placeholder={t('roles.searchPlaceholder')}
-                prefix={<SearchOutlined aria-hidden="true" />}
-                value={searchText}
-                onChange={e => setSearchText(e.target.value)}
-                allowClear
-                aria-label={t('roles.searchPlaceholder')}
-              />
-            </div>
-            <div className="role-list-container" style={{ height: 'calc(100% - 60px)', overflowY: 'auto' }}>
-              <Table
-                rowKey="roleId"
-                showHeader={false}
-                dataSource={filteredData}
-                loading={loading}
-                pagination={false}
-                locale={{ emptyText: <Empty description={t('roles.selectRole')} /> }}
-                onRow={(record) => ({
-                  onClick: () => selectRole(record),
-                  className: `cursor-pointer role-row ${selectedRole?.roleId === record.roleId ? 'role-row-selected' : ''}`
-                })}
-                columns={[
-                  {
-                    title: '角色',
-                    render: (_, record) => (
-                      <div className="role-item-content flex justify-between items-center p-2">
-                        <div className="role-item-main min-w-0">
-                          <div className="role-item-name font-medium truncate">{record.roleName}</div>
-                          <div className="role-item-code text-xs text-gray-400 truncate">{record.roleCode}</div>
-                        </div>
-                        <div className="role-item-actions flex gap-1">
-                          {can("sys:role:update") && (
-                            <Button 
-                              type="text" 
-                              size="small" 
-                              icon={<EditOutlined aria-hidden="true" />} 
-                              onClick={e => openEditBasic(e, record)} 
-                            />
-                          )}
-                          {can("sys:role:delete") && record.roleCode !== 'ADMIN' && (
-                            <Popconfirm 
-                              title={`确定删除角色 "${record.roleName}" 吗？`}
-                              onConfirm={e => handleRemove(e!, record.roleId)}
-                            >
-                              <Button 
-                                type="text" 
-                                size="small" 
-                                danger 
-                                icon={<DeleteOutlined aria-hidden="true" />} 
-                                onClick={e => e.stopPropagation()} 
-                              />
-                            </Popconfirm>
-                          )}
-                        </div>
-                      </div>
-                    )
-                  }
-                ]}
-              />
-            </div>
-          </Card>
-        </Col>
-
-        {/* Right: Detail Tabs */}
-        <Col span={16} style={{ height: '100%' }}>
-          {selectedRole ? (
+      
+      <div style={{ flex: 1, padding: '0 24px 24px 24px', overflow: 'hidden' }}>
+        <Row gutter={24} style={{ height: '100%' }}>
+          {/* Left: Role List Side */}
+          <Col span={7} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
             <Card 
-              className="full-height-card shadow-sm"
               title={
                 <Space>
-                  <SafetyCertificateOutlined style={{ color: '#1890ff' }} aria-hidden="true" />
-                  <span className="truncate max-w-[200px] inline-block align-bottom">{selectedRole.roleName}</span>
-                  <Tag color="blue">{selectedRole.roleCode}</Tag>
+                  <ApartmentOutlined />
+                  <span>角色列表</span>
+                  <Badge count={filteredData.length} overflowCount={999} style={{ backgroundColor: '#f0f2f5', color: '#8c8c8c', boxShadow: 'none' }} />
                 </Space>
               }
-              extra={
-                <Button 
-                  type="primary" 
-                  icon={<SaveOutlined aria-hidden="true" />} 
-                  loading={saving} 
-                  onClick={savePermissions}
-                  disabled={!can("sys:role:permission:save") || (selectedRole.roleCode === 'TENANT_ADMIN' && !isPlatformMode)}
-                >
-                  {t('roles.savePerms')}
-                </Button>
-              }
+              bordered={false}
+              className="shadow-sm"
+              style={{ height: '100%', borderRadius: '12px', display: 'flex', flexDirection: 'column' }}
+              bodyStyle={{ flex: 1, overflow: 'hidden', padding: '16px', display: 'flex', flexDirection: 'column' }}
             >
-              <Tabs defaultActiveKey="permissions" className="role-tabs">
-                <Tabs.TabPane 
-                  tab={<Space><KeyOutlined aria-hidden="true" />{t('roles.funcPerms')}</Space>} 
-                  key="permissions"
-                >
-                  <div className="role-permission-tree-v2" style={{ maxHeight: 'calc(100vh - 400px)', overflowY: 'auto' }}>
-                    <Tree
-                      checkable
-                      selectable={false}
-                      checkStrictly={false}
-                      treeData={permissionTreeData}
-                      checkedKeys={selectedPermIds}
-                      onCheck={(keys, info) => {
-                        const checked = Array.isArray(keys) ? keys : keys.checked;
-                        const halfChecked = info.halfCheckedKeys || [];
-                        setSelectedPermIds(checked.map(k => Number(k)));
-                        setHalfCheckedIds(halfChecked.map(k => Number(k)));
-                      }}
-                      defaultExpandAll
-                    />
-                  </div>
-                </Tabs.TabPane>
-                <Tabs.TabPane 
-                  tab={<Space><UserOutlined aria-hidden="true" />{t('roles.assignedUsers')} ({roleUsers.length})</Space>} 
-                  key="users"
-                >
-                  <div className="mb-4 flex justify-end">
-                    <Button 
-                      type="primary" 
-                      icon={<UserAddOutlined aria-hidden="true" />} 
-                      onClick={openUserModal}
-                      disabled={!can("sys:role:update")}
-                    >
-                      {t('common.create')}
-                    </Button>
-                  </div>
-                  <Table
-                    rowKey="userId"
-                    size="small"
-                    loading={loadingUsers}
-                    dataSource={roleUsers}
-                    pagination={{ pageSize: 10, showTotal: (total) => t('common.total', { total }) }}
-                    columns={[
-                      { 
-                        title: t('users.userInfo'), 
-                        render: (_, r) => (
-                          <Space>
-                            <UserOutlined aria-hidden="true" />
-                            <div className="min-w-0">
-                                <div style={{ fontWeight: 500 }} className="truncate">{r.displayName}</div>
-                                <div style={{ fontSize: 12, color: '#8c8c8c' }} className="truncate">@{r.username}</div>
-                            </div>
-                          </Space>
-                        )
-                      },
-                      { title: t('users.phone'), dataIndex: 'phone', className: 'tabular-nums' },
-                      { title: t('users.email'), dataIndex: 'email' },
-                      { 
-                        title: t('common.status'), 
-                        dataIndex: 'status',
-                        width: 80,
-                        render: (s: number) => {
-                          const item = statusDict.find(i => i.itemValue === String(s));
-                          return (
-                            <Tag color={s === 1 ? 'green' : 'red'}>
-                              {item ? item.itemLabel : (s === 1 ? '正常' : '禁用')}
-                            </Tag>
-                          );
-                        }
-                      },
-                      {
-                        title: t('common.action'),
-                        key: 'action',
-                        width: 100,
-                        render: (_, record) => (
-                          <Popconfirm
-                            title={t('common.delete') + "?"}
-                            onConfirm={() => handleUnbindUser(record.userId)}
-                            disabled={!can("sys:role:update")}
-                          >
-                            <Button 
-                              type="text" 
-                              danger 
-                              size="small" 
-                              icon={<DeleteOutlined aria-hidden="true" />}
-                              disabled={!can("sys:role:update")}
-                            />
-                          </Popconfirm>
-                        )
-                      }
-                    ]}
+              <Space direction="vertical" size={12} style={{ width: '100%', marginBottom: 16 }}>
+                {isPlatformMode && (
+                  <Select
+                    placeholder="按租户筛选"
+                    style={{ width: '100%' }}
+                    allowClear
+                    suffixIcon={<FilterOutlined />}
+                    value={filterTenantId}
+                    onChange={setFilterTenantId}
+                    options={tenants.map(t => ({ label: t.tenantName, value: t.id }))}
                   />
-                </Tabs.TabPane>
-              </Tabs>
-            </Card>
-          ) : (
-            <Card className="full-height-card flex items-center justify-center shadow-sm">
-              <Empty description={t('roles.selectRole')} />
-            </Card>
-          )}
-        </Col>
-      </Row>
+                )}
+                <Input
+                  placeholder="搜索角色名称/编码"
+                  prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
+                  value={searchText}
+                  onChange={e => setSearchText(e.target.value)}
+                  allowClear
+                  style={{ borderRadius: '6px' }}
+                />
+              </Space>
+
+              <div className="role-list-container-v3" style={{ flex: 1, overflowY: 'auto', margin: '0 -16px', padding: '0 16px' }}>
+                <List
+                  loading={loading}
+                  dataSource={filteredData}
+                  locale={{ emptyText: <Empty description="未找到角色" image={Empty.PRESENTED_IMAGE_SIMPLE} /> }}
+                  renderItem={(item) => (
+                    <div 
+                      key={item.roleId}
+                      className={`role-item-card-v3 ${selectedRole?.roleId === item.roleId ? 'active' : ''}`}
+                      onClick={() => selectRole(item)}
+                    >
+                      <div className="role-item-main">
+                        <div className="role-item-name-row">
+                          <Text strong className="role-name">{item.roleName}</Text>
+                          {isPlatformMode && (
+                            <Tag color="blue" style={{ fontSize: '10px', scale: '0.8', margin: '0 0 0 4px', borderRadius: '10px' }}>
+                              {item.tenantId === 0 ? '系统' : (tenants.find(t => t.id === item.tenantId)?.tenantName || `租户:${item.tenantId}`)}
+                            </Tag>
+                          )}
+                          {item.status === 0 && <Tag color="error" style={{ fontSize: '10px', scale: '0.8', margin: 0 }}>已禁用</Tag>}
+                        </div>
+                        <Text type="secondary" className="role-code">{item.roleCode}</Text>
+                      </div>
+                      <div className="role-item-actions">
+                        <Space size={4}>
+                          <Tooltip title="编辑详情">
+                            <Button type="text" size="small" icon={<EditOutlined />} onClick={e => openEditBasic(e, item)} />
+                          </Tooltip>
+                          {item.roleCode !== 'ADMIN' && (
+                            <Popconfirm title="确定删除？" onConfirm={e => handleRemove(e!, item.roleId)}>
+                              <Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={e => e.stopPropagation()} />
+                            </Popconfirm>
+                          )}
+                        </Space>
+                      </div>
+                    </div>
+                  )}
+                />
+              </div>
+            </Card>
+          </Col>
+
+          {/* Right: Permission and User Management */}
+          <Col span={17} style={{ height: '100%' }}>
+            {selectedRole ? (
+              <Card 
+                className="shadow-sm"
+                bordered={false}
+                style={{ height: '100%', borderRadius: '12px', display: 'flex', flexDirection: 'column' }}
+                bodyStyle={{ flex: 1, overflow: 'hidden', padding: '0', display: 'flex', flexDirection: 'column' }}
+                title={
+                  <Space size={16}>
+                    <div style={{ width: 40, height: 40, background: '#e6f7ff', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <SafetyCertificateOutlined style={{ fontSize: 20, color: '#1890ff' }} />
+                    </div>
+                    <div>
+                      <div style={{ fontSize: '16px', fontWeight: 600 }}>{selectedRole.roleName}</div>
+                      <Text type="secondary" style={{ fontSize: '12px' }}>{selectedRole.roleCode}</Text>
+                    </div>
+                  </Space>
+                }
+                extra={
+                  <Button 
+                    type="primary" 
+                    icon={<SaveOutlined />} 
+                    loading={saving} 
+                    onClick={savePermissions}
+                    disabled={!can("sys:role:permission:save") || (selectedRole.roleCode === 'TENANT_ADMIN' && !isPlatformMode)}
+                    style={{ borderRadius: '6px' }}
+                  >
+                    保存权限配置
+                  </Button>
+                }
+              >
+                <Tabs defaultActiveKey="permissions" className="role-detail-tabs" style={{ height: '100%' }}>
+                  <Tabs.TabPane 
+                    tab={<Space><KeyOutlined />功能权限</Space>} 
+                    key="permissions"
+                  >
+                    <div style={{ padding: '0 24px 24px 24px', height: 'calc(100vh - 350px)', overflowY: 'auto' }}>
+                      <div className="permission-tree-wrapper">
+                        <Tree
+                          checkable
+                          selectable={false}
+                          checkStrictly={false}
+                          treeData={permissionTreeData}
+                          checkedKeys={selectedPermIds}
+                          onCheck={(keys, info) => {
+                            const checked = Array.isArray(keys) ? keys : keys.checked;
+                            const halfChecked = info.halfCheckedKeys || [];
+                            setSelectedPermIds(checked.map(k => Number(k)));
+                            setHalfCheckedIds(halfChecked.map(k => Number(k)));
+                          }}
+                          defaultExpandAll
+                        />
+                      </div>
+                    </div>
+                  </Tabs.TabPane>
+                  
+                  <Tabs.TabPane 
+                    tab={<Space><TeamOutlined />成员管理 ({roleUsers.length})</Space>} 
+                    key="users"
+                  >
+                    <div style={{ padding: '0 24px 24px 24px', height: 'calc(100vh - 350px)', overflowY: 'auto' }}>
+                      <div className="mb-4 flex justify-between items-center">
+                        <Title level={5} style={{ margin: 0 }}>已分配用户</Title>
+                        <Button 
+                          type="primary" 
+                          ghost
+                          icon={<UserAddOutlined />} 
+                          onClick={openUserModal}
+                          disabled={!can("sys:role:update")}
+                        >
+                          关联用户
+                        </Button>
+                      </div>
+                      <Table
+                        rowKey="userId"
+                        size="small"
+                        loading={loadingUsers}
+                        dataSource={roleUsers}
+                        pagination={{ pageSize: 10, size: 'small' }}
+                        columns={[
+                          { 
+                            title: '用户信息', 
+                            render: (_, r) => (
+                              <Space>
+                                <Avatar size="small" icon={<UserOutlined />} style={{ backgroundColor: '#f0f2f5', color: '#8c8c8c' }} />
+                                <div>
+                                    <div style={{ fontWeight: 500 }}>{r.displayName}</div>
+                                    <div style={{ fontSize: 11, color: '#bfbfbf' }}>@{r.username}</div>
+                                </div>
+                              </Space>
+                            )
+                          },
+                          { title: '手机号', dataIndex: 'phone', className: 'tabular-nums' },
+                          { title: '状态', dataIndex: 'status', width: 80, render: (s: number) => <Badge status={s === 1 ? 'success' : 'error'} text={s === 1 ? '正常' : '禁用'} /> },
+                          {
+                            title: '操作',
+                            key: 'action',
+                            width: 80,
+                            render: (_, record) => (
+                              <Popconfirm title="移除关联？" onConfirm={() => handleUnbindUser(record.userId)} disabled={!can("sys:role:update")}>
+                                <Button type="text" danger size="small" icon={<DeleteOutlined />} disabled={!can("sys:role:update")} />
+                              </Popconfirm>
+                            )
+                          }
+                        ]}
+                      />
+                    </div>
+                  </Tabs.TabPane>
+                </Tabs>
+              </Card>
+            ) : (
+              <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff', borderRadius: '12px' }}>
+                <Empty description="请从左侧选择一个角色进行管理" />
+              </div>
+            )}
+          </Col>
+        </Row>
+      </div>
 
-      {/* User Selection Modal */}
       <Modal
-        title={t('roles.assignedUsers')}
+        title="关联用户到角色"
         open={userModalOpen}
         onCancel={() => setUserModalOpen(false)}
         onOk={handleAddUsers}
-        width={600}
+        width={650}
         destroyOnClose
       >
-        <div className="mb-4">
+        <div style={{ marginBottom: 16 }}>
           <Input
-            placeholder={t('users.searchPlaceholder')}
-            prefix={<SearchOutlined aria-hidden="true" />}
+            placeholder="搜索用户名/显示名"
+            prefix={<SearchOutlined />}
             value={userSearchText}
             onChange={e => setUserSearchText(e.target.value)}
             allowClear
@@ -612,61 +596,49 @@ export default function Roles() {
           rowKey="userId"
           size="small"
           dataSource={filteredModalUsers}
-          pagination={{ pageSize: 5 }}
+          pagination={{ pageSize: 6 }}
           rowSelection={{
             selectedRowKeys: selectedUserKeys,
             onChange: (keys) => setSelectedUserKeys(keys as number[])
           }}
           columns={[
-            { title: t('users.displayName'), dataIndex: 'displayName' },
-            { title: t('users.username'), dataIndex: 'username' },
-            { title: t('users.org'), dataIndex: 'orgId', render: () => '-' } // Simplification
+            { title: '显示名称', dataIndex: 'displayName' },
+            { title: '用户名', dataIndex: 'username' },
+            { title: '手机号', dataIndex: 'phone' }
           ]}
         />
       </Modal>
 
-      {/* Basic Info Drawer */}
       <Drawer
-        title={editing ? t('roles.drawerTitleEdit') : t('roles.drawerTitleCreate')}
+        title={editing ? '编辑角色信息' : '创建新角色'}
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
-        width={400}
+        width={420}
         destroyOnClose
         footer={
-          <div className="flex justify-end gap-2 p-2">
-            <Button onClick={() => setDrawerOpen(false)}>{t('common.cancel')}</Button>
-            <Button type="primary" loading={saving} onClick={submitBasic}>{t('common.confirm')}</Button>
+          <div style={{ textAlign: 'right', padding: '10px 16px' }}>
+            <Space>
+              <Button onClick={() => setDrawerOpen(false)}>取消</Button>
+              <Button type="primary" loading={saving} onClick={submitBasic}>确定</Button>
+            </Space>
           </div>
         }
       >
         <Form form={form} layout="vertical">
-          <Form.Item 
-            label={t('users.tenant')} 
-            name="tenantId" 
-            rules={[{ required: true }]}
-            hidden={!isPlatformMode}
-          >
-            <Select 
-              options={tenants.map(t => ({ label: t.tenantName, value: t.id }))} 
-              disabled={!!editing}
-            />
+          <Form.Item label="所属租户" name="tenantId" rules={[{ required: true }]} hidden={!isPlatformMode}>
+            <Select options={tenants.map(t => ({ label: t.tenantName, value: t.id }))} disabled={!!editing} />
           </Form.Item>
-          {!isPlatformMode && (
-            <Form.Item label={t('users.tenant')}>
-              <Input value={tenants.find(t => t.id === activeTenantId)?.tenantName || "当前租户"} disabled />
-            </Form.Item>
-          )}
-          <Form.Item label={t('roles.roleName')} name="roleName" rules={[{ required: true }]}>
-            <Input placeholder={t('roles.roleName')} />
+          <Form.Item label="角色名称" name="roleName" rules={[{ required: true }]}>
+            <Input placeholder="请输入角色名称" />
           </Form.Item>
-          <Form.Item label={t('roles.roleCode')} name="roleCode" rules={[{ required: true }]}>
-            <Input placeholder={t('roles.roleCode')} disabled={!!editing} />
+          <Form.Item label="角色编码" name="roleCode" rules={[{ required: true }]}>
+            <Input placeholder="由字母数字下划线组成" disabled={!!editing} />
           </Form.Item>
-          <Form.Item label={t('common.status')} name="status" initialValue={1}>
+          <Form.Item label="状态" name="status" initialValue={1}>
              <Select options={statusDict.map(i => ({ label: i.itemLabel, value: Number(i.itemValue) }))} />
           </Form.Item>
-          <Form.Item label={t('common.remark')} name="remark">
-            <Input.TextArea rows={3} />
+          <Form.Item label="备注" name="remark">
+            <Input.TextArea rows={4} placeholder="角色功能描述..." />
           </Form.Item>
         </Form>
       </Drawer>

frontend/src/pages/Users.tsx

@@ -141,6 +141,41 @@ export default function Users() {
   
   const selectedTenantId = Form.useWatch("tenantId", form);
 
+  const memberships = Form.useWatch("memberships", form) || [];
+
+  const tenantMap = useMemo(() => {
+    const map: Record<number, string> = {};
+    tenants.forEach(t => map[t.id] = t.tenantName);
+    return map;
+  }, [tenants]);
+
+  // 计算当前可用的角色选项
+  const roleOptions = useMemo(() => {
+    if (!isPlatformMode) {
+      return roles.map(r => ({ label: r.roleName, value: r.roleId }));
+    }
+
+    // 平台模式：根据 memberships 过滤角色
+    const selectedTenantIds = new Set(memberships.map((m: any) => m?.tenantId).filter(Boolean));
+    
+    return roles
+      .filter(r => selectedTenantIds.has(r.tenantId))
+      .map(r => {
+        const tenantName = tenantMap[r.tenantId] || `租户:${r.tenantId}`;
+        return {
+          label: (
+            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+              <span>{r.roleName}</span>
+              <span style={{ color: '#bfbfbf', fontSize: '11px', marginLeft: 8 }}>[{tenantName}]</span>
+            </div>
+          ),
+          value: r.roleId,
+          // 增加一个纯文本 label 用于搜索
+          searchText: `${r.roleName} ${tenantName}`
+        };
+      });
+  }, [isPlatformMode, roles, memberships, tenantMap]);
+
   const loadBaseData = async () => {
     try {
       const promises: Promise<any>[] = [listRoles()];
@@ -189,12 +224,6 @@ export default function Users() {
     fetchOrgs();
   }, [selectedTenantId, isPlatformMode, activeTenantId]);
 
-  const tenantMap = useMemo(() => {
-    const map: Record<number, string> = {};
-    tenants.forEach(t => map[t.id] = t.tenantName);
-    return map;
-  }, [tenants]);
-
   const orgTreeData = useMemo(() => buildOrgTree(orgs), [orgs]);
 
   const filteredData = useMemo(() => {
@@ -537,7 +566,8 @@ export default function Users() {
             <Select
               mode="multiple"
               placeholder={t('users.roles')}
-              options={roles.map(r => ({ label: r.roleName, value: r.roleId }))}
+              options={roleOptions}
+              optionFilterProp={isPlatformMode ? "searchText" : "label"}
             />
           </Form.Item>