TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:1. 优化角色权限管理的加载中样式。

Browse Source 
2. root添加限制51707端口的路由访问，只允许访问交叉评查。
3. 开启省局端口限制的配置。
This commit is contained in:
yorn
2025-12-15 22:25:05 +08:00
parent 0aa75c6ffb
commit d2346aad70
3 changed files with 84 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1 -1
View File
@@ -5,4 +5,4 @@ JWT_SECRET=gdyc-super-secrets-jjwtt-key-change-this-in-production-20250721-from-
# 交叉评查专属模式
# 设置为 true 时，端口51707只显示交叉评查入口，隐藏其他模块
# 设置为 false 时，保持正常模式显示所有模块
CROSS_CHECKING_ONLY_MODE=false
CROSS_CHECKING_ONLY_MODE=true
app/root.tsx
+22 -15
View File
@@ -34,12 +34,19 @@ import RouteChangeLoader from "~/components/ui/RouteChangeLoader";
// 导入认证相关的服务器端功能（仅在服务器端使用）
import {
// getUserSession,
import {
// getUserSession,
logout,
type UserRole
type UserRole
} from "~/api/login/auth.server";
// 导入交叉评查专属模式配置
import {
CROSS_CHECKING_ONLY_MODE,
CROSS_CHECKING_ONLY_PORT,
getCurrentPort
} from "~/config/api-config";
// 定义需要高级权限的路径
// export const developerOnlyPaths = [
// '/settings',
@@ -289,20 +296,20 @@ export async function loader({ request }: LoaderFunctionArgs) {
// 如果执行到这里，说明已通过认证或是公共路径
}
// 检查51707端口访问控制
const currentPort = process.env.PORT || process.env.API_PORT_CONFIG;
const runtimePort = url.port || currentPort;
const isPort51707 = currentPort === '51707' || runtimePort === '51707';
// 检查交叉评查专属模式访问控制
// 当 CROSS_CHECKING_ONLY_MODE=true 且端口为指定端口时，只允许访问 /cross-checking 相关路由
const currentPort = getCurrentPort();
const isCrossCheckingOnlyMode = CROSS_CHECKING_ONLY_MODE && currentPort === CROSS_CHECKING_ONLY_PORT;
if (isPort51707 && !isPublicPath) {
// 51707端口(省局)只允许访问交叉评查相关路径和首页
const allowedPaths = ['/', '/cross-checking','/chat-with-llm'];
const isAllowedPath = allowedPaths.some(path => pathname === path) ||
pathname.startsWith('/cross-checking/') ||
pathname.startsWith('/chat-with-llm/');
if (isCrossCheckingOnlyMode && !isPublicPath) {
// 交叉评查专属模式：只允许访问首页和交叉评查相关路径
const crossCheckingAllowedPaths = ['/', '/cross-checking'];
const isCrossCheckingAllowedPath = crossCheckingAllowedPaths.some(path => pathname === path) ||
pathname.startsWith('/cross-checking/');
if (!isAllowedPath) {
return redirect("/cross-checking");
if (!isCrossCheckingAllowedPath) {
console.warn(`⚠️ [Root Loader] 交叉评查专属模式：拒绝访问 ${pathname}`);
throw new Response("交叉评查专属模式下无权访问此页面", { status: 403 });
}
}
app/routes/role-permissions._index.tsx
+61 -48
View File
@@ -868,6 +868,9 @@ export default function RolePermissions() {
// v3.8: 加载角色权限的 loading 状态
const [loadingPermissions, setLoadingPermissions] = useState(false);
// 加载用户列表的 loading 状态
const [loadingUsers, setLoadingUsers] = useState(false);
// v3.8: 路由ID到路由信息的映射（用于显示通用权限关联的路由名称）
const [routeIdToInfoMap, setRouteIdToInfoMap] = useState<Map<number, { title: string; path: string }>>(new Map());
@@ -981,6 +984,7 @@ export default function RolePermissions() {
const handleSelectRole = async (role: RoleInfo) => {
setSelectedRole(role);
setLoadingPermissions(true); // v3.8: 开始加载权限
setLoadingUsers(true); // 开始加载用户列表
try {
// 动态导入权限映射工具
@@ -1069,6 +1073,7 @@ export default function RolePermissions() {
toastService.error('加载角色权限失败');
} finally {
setLoadingPermissions(false); // v3.8: 结束加载权限
setLoadingUsers(false); // 结束加载用户列表
}
};
@@ -1933,59 +1938,67 @@ export default function RolePermissions() {
</Button>
</div>
<div className="users-list">
{roleUsers.length > 0 ? (
roleUsers.map(user => (
<div key={user.id} className="user-card">
<div className="user-avatar">
<i className="ri-user-line"></i>
</div>
<div className="user-info">
<div className="user-name">
{user.nick_name}
{user.is_leader && (
<span className="leader-badge">负责人</span>
)}
{/* 加载状态显示 */}
{loadingUsers ? (
<div className="loading-container" style={{ minHeight: '300px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '12px' }}>
<i className="ri-loader-4-line spin" style={{ fontSize: '32px', color: '#00684a' }}></i>
<span style={{ color: '#666' }}>正在加载用户列表...</span>
</div>
) : (
<div className="users-list">
{roleUsers.length > 0 ? (
roleUsers.map(user => (
<div key={user.id} className="user-card">
<div className="user-avatar">
<i className="ri-user-line"></i>
</div>
<div className="user-username">@{user.username}</div>
<div className="user-org">
{/* {JSON.stringify(user)} */}
{user.ou_name}
{user.area && <span style={{ marginLeft: '8px', color: '#666' }}>• {user.area}</span>}
<div className="user-info">
<div className="user-name">
{user.nick_name}
{user.is_leader && (
<span className="leader-badge">负责人</span>
)}
</div>
<div className="user-username">@{user.username}</div>
<div className="user-org">
{/* {JSON.stringify(user)} */}
{user.ou_name}
{user.area && <span style={{ marginLeft: '8px', color: '#666' }}>• {user.area}</span>}
</div>
<div className="user-contact">
{user.phone_number && (
<span>
<i className="ri-phone-line"></i>
{user.phone_number}
</span>
)}
{user.email && (
<span>
<i className="ri-mail-line"></i>
{user.email}
</span>
)}
</div>
</div>
<div className="user-contact">
{user.phone_number && (
<span>
<i className="ri-phone-line"></i>
{user.phone_number}
</span>
)}
{user.email && (
<span>
<i className="ri-mail-line"></i>
{user.email}
</span>
)}
<div className="user-actions">
<button
className="btn-icon text-error"
onClick={() => handleRemoveUserRole(user)}
title="移除角色"
>
<i className="ri-user-unfollow-line"></i>
</button>
</div>
</div>
<div className="user-actions">
<button
className="btn-icon text-error"
onClick={() => handleRemoveUserRole(user)}
title="移除角色"
>
<i className="ri-user-unfollow-line"></i>
</button>
</div>
))
) : (
<div className="empty-state">
<i className="ri-user-line"></i>
<p>暂无用户拥有此角色</p>
</div>
))
) : (
<div className="empty-state">
<i className="ri-user-line"></i>
<p>暂无用户拥有此角色</p>
</div>
)}
</div>
)}
</div>
)}
</div>
)}
</div>