fix: 1. 继续对齐交叉评查的接口，完善创建交叉评查的逻辑 和 相关组件的渲染布局。
2. 文档的基本信息修改改用接口。 3. 重新完善角色权限管理的页面逻辑。 4.将评查点列表中的返回逻辑改用浏览器的记忆返回。
This commit is contained in:
@@ -59,6 +59,43 @@
|
||||
@apply absolute inset-0 flex items-center justify-center bg-white bg-opacity-70;
|
||||
}
|
||||
|
||||
/* 固定表头滚动样式 */
|
||||
.ant-table-container {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.ant-table-header {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
.ant-table-header .ant-table thead th {
|
||||
@apply bg-gray-50 font-medium py-3 px-4 text-left text-gray-700 border-b border-gray-200;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
.ant-table-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.ant-table-body::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100 rounded;
|
||||
}
|
||||
|
||||
.ant-table-body::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded;
|
||||
}
|
||||
|
||||
.ant-table-body::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
|
||||
/* 表格行选中状态 */
|
||||
.ant-table tr.selected {
|
||||
@apply bg-[rgba(0,104,74,0.05)];
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.role-permissions-page .page-title {
|
||||
@@ -235,18 +236,23 @@
|
||||
.permissions-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* v3.8: 固定头部区域 */
|
||||
.permissions-tab-header {
|
||||
flex-shrink: 0;
|
||||
background: white;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.permissions-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.permissions-header h3 {
|
||||
@@ -256,79 +262,331 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 路由树 */
|
||||
.routes-tree {
|
||||
/* max-height: calc(100vh - 240px); */
|
||||
/* height: 400px; */
|
||||
/* v3.9: 折叠控制栏 */
|
||||
.collapse-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapse-control-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.collapse-control-btn:hover {
|
||||
color: var(--color-primary);
|
||||
background: rgba(0, 104, 74, 0.04);
|
||||
}
|
||||
|
||||
.collapse-control-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 路由树容器 */
|
||||
.routes-tree-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: #fafbfc;
|
||||
min-height: 0;
|
||||
padding: 4px;
|
||||
margin: -4px;
|
||||
}
|
||||
|
||||
.route-item {
|
||||
margin-bottom: 2px;
|
||||
/* 路由树 */
|
||||
.routes-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 一级路由卡片 - 使用柔和阴影效果 */
|
||||
.route-card {
|
||||
background: white;
|
||||
border: none;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.route-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 104, 74, 0.1), 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.route-card.checked {
|
||||
background: linear-gradient(to right, rgba(0, 104, 74, 0.03), rgba(255, 255, 255, 0.98));
|
||||
box-shadow: 0 2px 8px rgba(0, 104, 74, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* 路由项内容 */
|
||||
.route-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
padding: 14px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.route-item-content:hover {
|
||||
background: #e6e8eb;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.route-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 10px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.route-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.route-icon {
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
color: var(--color-primary);
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.route-title {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.route-path {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
background: #f5f7fa;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 权限展开按钮 */
|
||||
.permission-expand-btn {
|
||||
margin-left: auto;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.permission-expand-btn:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
/* v3.9: 折叠按钮 */
|
||||
.collapse-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.collapse-btn i {
|
||||
font-size: 16px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* 子路由数量标签 */
|
||||
.children-count {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 子路由容器 */
|
||||
.route-children {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
padding: 3px 1px 12px 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
/* v3.9: 折叠动画 */
|
||||
max-height: 2000px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out, opacity 0.2s ease, padding 0.3s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* v3.9: 折叠状态 */
|
||||
.route-children.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* 子路由项 - 柔和的背景效果 */
|
||||
.route-children .route-item-content {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.015);
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.route-children .route-item-content:hover {
|
||||
background: rgba(0, 0, 0, 0.035);
|
||||
}
|
||||
|
||||
.route-children .route-item-content.checked {
|
||||
background: rgba(0, 104, 74, 0.05);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* API权限列表 - 柔和背景 */
|
||||
.permissions-list {
|
||||
margin-top: 8px;
|
||||
margin-left: 44px;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.permission-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: -2px -10px;
|
||||
}
|
||||
|
||||
.permission-item:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.permission-item.shared {
|
||||
background: rgba(24, 144, 255, 0.06);
|
||||
border-left: 2px solid rgba(24, 144, 255, 0.5);
|
||||
margin-left: -12px;
|
||||
padding-left: 10px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.permission-item.shared:hover {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 权限方法标签 */
|
||||
.method-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
min-width: 52px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.method-tag.get { background: #e6f7ed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.method-tag.post { background: #e6f0ff; color: #1890ff; border: 1px solid #91caff; }
|
||||
.method-tag.put { background: #fff7e6; color: #faad14; border: 1px solid #ffd591; }
|
||||
.method-tag.delete { background: #fff1f0; color: #f5222d; border: 1px solid #ffa39e; }
|
||||
.method-tag.patch { background: #f0f5ff; color: #722ed1; border: 1px solid #d3adf7; }
|
||||
|
||||
/* 通用权限标签 */
|
||||
.shared-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
font-size: 11px;
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
border-radius: 3px;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 关联路由显示 */
|
||||
.related-routes {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: #8c8c8c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.related-routes i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.related-route-tag {
|
||||
padding: 2px 8px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 权限统计 - 固定底部 */
|
||||
.permissions-summary {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: #ecf5ff;
|
||||
margin-top: 16px;
|
||||
background: linear-gradient(to right, #ecf5ff, #f0f7ff);
|
||||
border: 1px solid #b3d8ff;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user