更新优化调整
This commit is contained in:
@@ -14,12 +14,12 @@
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5}
|
||||
#app,#loading{width:100%;height:100vh}
|
||||
#loading{position:fixed;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);z-index:9999;transition:opacity .3s}
|
||||
#loading{position:fixed;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff5f0,#ffe8dc);z-index:9999;transition:opacity .3s}
|
||||
#loading.hidden{opacity:0;pointer-events:none}
|
||||
.logo{width:60px;height:60px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:scale 1s ease-in-out infinite}
|
||||
.logo{width:60px;height:60px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:scale 1s ease-in-out infinite;box-shadow:0 8px 24px rgba(255,107,53,.15)}
|
||||
.logo svg{width:36px;height:36px}
|
||||
.text{color:#fff;font-size:24px;font-weight:600;margin-bottom:30px}
|
||||
.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:rotate .8s linear infinite}
|
||||
.text{color:#2d1810;font-size:24px;font-weight:600;margin-bottom:30px}
|
||||
.spinner{width:40px;height:40px;border:3px solid rgba(255,107,53,.3);border-top-color:#ff6b35;border-radius:50%;animation:rotate .8s linear infinite}
|
||||
@keyframes rotate{to{transform:rotate(360deg)}}
|
||||
@keyframes scale{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
|
||||
</style>
|
||||
@@ -28,10 +28,16 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
|
||||
<div id="loading">
|
||||
<div class="logo">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<rect width="24" height="24" rx="4" fill="#667eea"/>
|
||||
<rect width="24" height="24" rx="4" fill="url(#logoGradient)"/>
|
||||
<path d="M7 8h10v2H7V8Z" fill="white"/>
|
||||
<path d="M7 11h10v2H7v-2Z" fill="white"/>
|
||||
<path d="M7 14h7v2H7v-2Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff6b35"/>
|
||||
<stop offset="100%" stop-color="#ffb347"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text"><script>document.write(window.__APP_NAME__)</script></div>
|
||||
|
||||
@@ -69,96 +69,95 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.pages {
|
||||
flex: 1;
|
||||
// 标准页面布局（垂直布局）
|
||||
.pages-base-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.tool-bar {
|
||||
padding: 12px 16px;
|
||||
background-color: #fff;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-direction: row;
|
||||
|
||||
.left-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
|
||||
:deep(.ant-form) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label) {
|
||||
min-width: 70px;
|
||||
}
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边栏布局（左右分栏）
|
||||
.pages-sidebar-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 260px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.button-group {
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.tool-bar {
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
flex-direction: row;
|
||||
|
||||
// 搜索输入框样式
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-select-selector) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.ant-btn) {
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
.left-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
.right-panel {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 主按钮特殊样式
|
||||
:deep(.ant-btn-primary) {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
}
|
||||
}
|
||||
|
||||
// 危险按钮样式
|
||||
:deep(.ant-btn-dangerous) {
|
||||
&:hover {
|
||||
background: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,570 +0,0 @@
|
||||
// 认证页面统一样式文件
|
||||
// 使用明亮暖色调配色方案
|
||||
|
||||
// ===== 颜色变量 =====
|
||||
$primary-color: #ff6b35; // 橙红色
|
||||
$primary-light: #ff8a5b; // 浅橙红色
|
||||
$primary-dark: #e55a2b; // 深橙红色
|
||||
$secondary-color: #ffd93d; // 金黄色
|
||||
$accent-color: #ffb84d; // 橙黄色
|
||||
|
||||
$bg-dark: #1a1a2e; // 深色背景
|
||||
$bg-light: #16213e; // 浅色背景
|
||||
$bg-gradient-start: #0f0f23; // 渐变开始
|
||||
$bg-gradient-end: #1a1a2e; // 渐变结束
|
||||
|
||||
$text-primary: #ffffff;
|
||||
$text-secondary: rgba(255, 255, 255, 0.7);
|
||||
$text-muted: rgba(255, 255, 255, 0.5);
|
||||
|
||||
$border-color: rgba(255, 255, 255, 0.08);
|
||||
$border-hover: rgba(255, 107, 53, 0.3);
|
||||
$border-focus: rgba(255, 107, 53, 0.6);
|
||||
|
||||
// ===== 基础容器 =====
|
||||
.auth-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, $bg-gradient-start 0%, $bg-gradient-end 100%);
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
// ===== 科技感背景 =====
|
||||
.tech-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
||||
// 网格线
|
||||
.grid-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.08), transparent);
|
||||
animation: gridMove 8s linear infinite;
|
||||
|
||||
&:nth-child(1) { top: 20%; animation-delay: 0s; }
|
||||
&:nth-child(2) { top: 40%; animation-delay: 2s; }
|
||||
&:nth-child(3) { top: 60%; animation-delay: 4s; }
|
||||
&:nth-child(4) { top: 80%; animation-delay: 6s; }
|
||||
}
|
||||
|
||||
// 光点效果
|
||||
.light-spot {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px $primary-color, 0 0 20px $primary-color;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
|
||||
&:nth-child(5) { top: 15%; left: 20%; animation-delay: 0s; }
|
||||
&:nth-child(6) { top: 25%; left: 70%; animation-delay: 2s; }
|
||||
&:nth-child(7) { top: 55%; left: 15%; animation-delay: 4s; }
|
||||
&:nth-child(8) { top: 75%; left: 80%; animation-delay: 1s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
|
||||
50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
|
||||
}
|
||||
|
||||
// ===== 主卡片 =====
|
||||
.auth-wrapper {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-radius: 28px;
|
||||
padding: 0;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid $border-color;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
min-height: 580px;
|
||||
animation: cardFadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes cardFadeIn {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
// ===== 左侧装饰区 =====
|
||||
.decoration-area {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 217, 61, 0.03) 100%);
|
||||
padding: 60px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.tech-circle {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 48px;
|
||||
|
||||
.circle-inner {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 50px rgba(255, 107, 53, 0.4);
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, $secondary-color 0%, $accent-color 100%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 30px rgba(255, 217, 61, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.circle-ring {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border: 2px solid rgba(255, 107, 53, 0.2);
|
||||
border-radius: 50%;
|
||||
animation: rotate 12s linear infinite;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 15px $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-ring-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid rgba(255, 217, 61, 0.15);
|
||||
animation: rotate 18s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.08); opacity: 0.85; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.decoration-text {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $text-secondary;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 右侧表单区 =====
|
||||
.form-area {
|
||||
flex: 1.3;
|
||||
padding: 60px 56px;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $accent-color 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
color: $text-secondary;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 表单样式 =====
|
||||
.auth-form {
|
||||
margin-top: 0;
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label > label) {
|
||||
color: $text-secondary;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 输入框样式
|
||||
:deep(.ant-input-affix-wrapper),
|
||||
:deep(.ant-input) {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 12px;
|
||||
color: $text-primary;
|
||||
padding: 12px 16px;
|
||||
font-size: 15px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: $border-hover;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-input-affix-wrapper-focused {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input::placeholder) {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper > input.ant-input) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 图标样式
|
||||
:deep(.anticon) {
|
||||
color: $text-secondary;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper-focused .anticon) {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 按钮样式 =====
|
||||
.auth-form :deep(.ant-btn-primary) {
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
height: 48px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, $primary-light 0%, $accent-color 100%);
|
||||
box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: $text-muted;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 表单选项 =====
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 26px;
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
color: $text-primary;
|
||||
font-size: 14px;
|
||||
|
||||
.ant-checkbox {
|
||||
.ant-checkbox-inner {
|
||||
border-color: $border-color;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
&.ant-checkbox-checked .ant-checkbox-inner {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 验证码输入框 =====
|
||||
.code-input-wrapper {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, $primary-light 0%, $accent-color 100%);
|
||||
box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: $text-muted;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 协议复选框 =====
|
||||
.agreement-checkbox {
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
color: $text-secondary;
|
||||
font-size: 13px;
|
||||
align-items: flex-start;
|
||||
line-height: 1.6;
|
||||
|
||||
.ant-checkbox {
|
||||
margin-top: 2px;
|
||||
|
||||
.ant-checkbox-inner {
|
||||
border-color: $border-color;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
&.ant-checkbox-checked .ant-checkbox-inner {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 表单底部 =====
|
||||
.form-footer {
|
||||
text-align: center;
|
||||
margin-top: 28px;
|
||||
color: $text-secondary;
|
||||
font-size: 14px;
|
||||
|
||||
.auth-link {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-left: 6px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 响应式设计 =====
|
||||
@media (max-width: 768px) {
|
||||
.auth-card {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.decoration-area {
|
||||
padding: 48px 24px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.tech-circle {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
|
||||
.circle-inner {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
&::after {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-ring {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.circle-ring-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.decoration-text {
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-area {
|
||||
padding: 48px 32px;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.code-input-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.code-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.auth-wrapper {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.form-area {
|
||||
padding: 36px 24px;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { createApp } from 'vue'
|
||||
import Antd from 'ant-design-vue'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
import '@/assets/style/app.scss'
|
||||
import '@/assets/style/pages.scss'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import pinia from './stores'
|
||||
|
||||
@@ -3,29 +3,21 @@
|
||||
<!-- 工具栏区域 -->
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="部门名称">
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入部门名称" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchForm.status" placeholder="请选择状态" allow-clear style="width: 120px">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-space>
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="部门名称" allow-clear style="width: 200px" />
|
||||
<a-select v-model:value="searchForm.status" placeholder="状态" allow-clear style="width: 120px">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-space>
|
||||
|
||||
@@ -45,23 +45,17 @@
|
||||
<!-- 工具栏 -->
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="用户名">
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入用户名" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-space>
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="用户名" allow-clear style="width: 200px" />
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
<template>
|
||||
<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form :model="form" :rules="rules" ref="formRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<!-- 第一行：权限名称和类型 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="权限名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="权限名称" allow-clear />
|
||||
<a-form-item label="权限名称" name="title" required>
|
||||
<a-input v-model:value="form.title" placeholder="如：用户管理" allow-clear maxlength="50" show-count />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="类型" name="type" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-radio-group v-model:value="form.type" button-style="solid">
|
||||
<a-form-item label="权限类型" name="type" required :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-radio-group v-model:value="form.type" button-style="solid" @change="handleTypeChange">
|
||||
<a-radio-button value="menu">菜单</a-radio-button>
|
||||
<a-radio-button value="api">接口</a-radio-button>
|
||||
<a-radio-button value="button">按钮</a-radio-button>
|
||||
<a-radio-button value="url">链接</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@@ -28,32 +29,54 @@
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="权限编码" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="如: system.user.list" allow-clear />
|
||||
<div class="form-tip">格式：模块.功能.操作，系统唯一标识</div>
|
||||
<a-form-item label="权限编码" name="name" required>
|
||||
<a-input v-model:value="form.name" placeholder="如：system.users.index" allow-clear />
|
||||
<div class="form-tip">格式：模块.功能.操作，系统唯一标识，用于权限验证</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第三行：路由地址和组件路径 -->
|
||||
<a-row :gutter="16">
|
||||
<!-- 第三行：路由地址和组件路径（菜单类型才显示） -->
|
||||
<a-row v-if="form.type === 'menu'" :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="路由地址" name="path">
|
||||
<a-form-item label="路由地址" name="path" :required="isLeafNode">
|
||||
<a-input v-model:value="form.path" placeholder="/system/users" allow-clear />
|
||||
<div class="form-tip">前端路由路径，如 /system/users</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="组件路径" name="component">
|
||||
<a-form-item label="组件路径" name="component" :required="isLeafNode">
|
||||
<a-input v-model:value="form.component" placeholder="system/users/index" allow-clear>
|
||||
<template #addonBefore>pages/</template>
|
||||
</a-input>
|
||||
<div class="form-tip">顶级菜单或有子菜单的父节点不需要填写</div>
|
||||
<div class="form-tip" v-if="!isLeafNode">父级菜单或包含子菜单时不需要填写</div>
|
||||
<div class="form-tip" v-else>最后一级菜单必须填写，如 system/users/index</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第四行：菜单图标和排序 -->
|
||||
<a-row :gutter="16">
|
||||
<!-- API 类型显示路由名称 -->
|
||||
<a-row v-if="form.type === 'api'" :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="API路由" name="path" required>
|
||||
<a-input v-model:value="form.path" placeholder="如：users.index" allow-clear />
|
||||
<div class="form-tip">后端 API 路由名称，用于接口权限验证</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 链接类型显示 URL -->
|
||||
<a-row v-if="form.type === 'url'" :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="链接地址" name="path" required>
|
||||
<a-input v-model:value="form.path" placeholder="https://example.com" allow-clear />
|
||||
<div class="form-tip">外部链接地址</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第四行：菜单图标和排序（菜单类型才显示） -->
|
||||
<a-row v-if="form.type === 'menu'" :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="菜单图标" name="icon">
|
||||
<sc-icon-picker v-model:value="form.icon" placeholder="请选择图标" />
|
||||
@@ -62,6 +85,7 @@
|
||||
<a-col :span="12">
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" />
|
||||
<div class="form-tip">数值越小越靠前</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@@ -69,31 +93,35 @@
|
||||
<!-- 分隔线 -->
|
||||
<a-divider />
|
||||
|
||||
<!-- 选项设置区域 -->
|
||||
<div class="options-section">
|
||||
<!-- 选项设置区域（菜单类型才显示） -->
|
||||
<div v-if="form.type === 'menu'" class="options-section">
|
||||
<h4>选项设置</h4>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-form-item label="是否隐藏" name="hidden" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="显示选项" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
||||
<a-checkbox v-model:checked="form.hidden">隐藏菜单</a-checkbox>
|
||||
<a-checkbox v-model:checked="form.hiddenBreadcrumb">隐藏面包屑</a-checkbox>
|
||||
<a-checkbox v-model:checked="form.affix">固定标签页</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="是否缓存" name="keepAlive" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-switch v-model:checked="form.keepAlive" size="small" />
|
||||
<a-col :span="12">
|
||||
<a-form-item label="页面缓存" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
||||
<a-switch v-model:checked="form.keepAlive" checked-children="启用" un-checked-children="禁用" />
|
||||
<div class="form-tip">启用后页面会被缓存，切换回来时保留状态</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="是否固定" name="affix" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-switch v-model:checked="form.affix" size="small" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item label="外链" name="target">
|
||||
<a-radio-group v-model:value="form.target" button-style="solid" size="small">
|
||||
<a-radio-button value="null">当前窗口</a-radio-button>
|
||||
<a-radio-button value="_blank">新窗口</a-radio-button>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 外链打开方式（链接类型才显示） -->
|
||||
<div v-if="form.type === 'url'" class="options-section">
|
||||
<h4>外链设置</h4>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="打开方式" name="target">
|
||||
<a-radio-group v-model:value="form.target">
|
||||
<a-radio value="_self">当前窗口</a-radio>
|
||||
<a-radio value="_blank">新窗口</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@@ -106,17 +134,24 @@
|
||||
<!-- 状态 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="状态" name="status" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="启用状态" name="status" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
|
||||
<div class="form-tip">禁用后该权限将不生效</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-form-item :wrapper-col="{ span: 18, offset: 4 }" style="margin-top: 32px">
|
||||
<a-form-item :wrapper-col="{ span: 18, offset: 5 }" style="margin-top: 32px">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSave" :loading="loading" size="large">保存</a-button>
|
||||
<a-button @click="$emit('cancel')" size="large">取消</a-button>
|
||||
<a-button type="primary" @click="handleSave" :loading="loading" size="large">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
保存
|
||||
</a-button>
|
||||
<a-button @click="$emit('cancel')" size="large">
|
||||
<template #icon><CloseOutlined /></template>
|
||||
取消
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
@@ -125,6 +160,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
|
||||
import authApi from '@/api/auth'
|
||||
import scIconPicker from '@/components/scIconPicker/index.vue'
|
||||
|
||||
@@ -152,7 +188,7 @@ const form = reactive({
|
||||
sort: 0,
|
||||
type: 'menu',
|
||||
status: 1,
|
||||
target: null,
|
||||
target: '_self',
|
||||
// meta 字段内容
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
@@ -161,22 +197,52 @@ const form = reactive({
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
const formRef = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
||||
title: [
|
||||
{ required: true, message: '请输入权限名称', trigger: 'blur' },
|
||||
{ max: 50, message: '权限名称不能超过50个字符', trigger: 'blur' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入权限编码', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z][a-zA-Z0-9_.]*$/,
|
||||
message: '权限编码格式不正确，格式：模块.功能.操作',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [{ required: true, message: '请选择权限类型', trigger: 'change' }],
|
||||
path: (rule, value) => {
|
||||
// 根据类型动态验证
|
||||
if (form.type === 'menu' || form.type === 'api' || form.type === 'url') {
|
||||
if (!value || !value.trim()) {
|
||||
return Promise.reject('请输入' + getPathLabel(form.type))
|
||||
}
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
component: (rule, value) => {
|
||||
// 仅在菜单类型且为叶子节点时验证
|
||||
if (form.type === 'menu' && isLeafNode.value) {
|
||||
if (!value || !value.trim()) {
|
||||
return Promise.reject('请输入组件路径')
|
||||
}
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单选项
|
||||
const menuOptions = ref([])
|
||||
const menuFieldNames = {
|
||||
value: 'id',
|
||||
label: 'title',
|
||||
children: 'children'
|
||||
// 路径字段标签
|
||||
const getPathLabel = (type) => {
|
||||
const labelMap = {
|
||||
menu: '路由地址',
|
||||
api: 'API路由',
|
||||
url: '链接地址'
|
||||
}
|
||||
return labelMap[type] || '路径'
|
||||
}
|
||||
|
||||
// 状态开关计算属性
|
||||
@@ -187,6 +253,28 @@ const statusChecked = computed({
|
||||
}
|
||||
})
|
||||
|
||||
// 判断是否为叶子节点（没有子节点的节点）
|
||||
const isLeafNode = computed(() => {
|
||||
// 这里需要根据当前节点是否有子节点来判断
|
||||
// 暂时返回 false，需要根据实际数据判断
|
||||
return !hasChildren.value
|
||||
})
|
||||
|
||||
// 判断是否有子节点
|
||||
const hasChildren = computed(() => {
|
||||
if (!form.id || !props.menu) return false
|
||||
const node = findMenuNode(props.menu, form.id)
|
||||
return node && node.children && node.children.length > 0
|
||||
})
|
||||
|
||||
// 菜单选项
|
||||
const menuOptions = ref([])
|
||||
const menuFieldNames = {
|
||||
value: 'id',
|
||||
label: 'title',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 筛单化菜单树，排除自己和子节点
|
||||
const treeToMap = (tree, excludeId = null) => {
|
||||
const map = []
|
||||
@@ -240,27 +328,51 @@ watch(
|
||||
}
|
||||
} else if (!newVal) {
|
||||
// 清空表单
|
||||
setData({
|
||||
id: '',
|
||||
parent_id: props.parentId || 0,
|
||||
name: '',
|
||||
title: '',
|
||||
path: '',
|
||||
component: '',
|
||||
icon: '',
|
||||
sort: 0,
|
||||
type: 'menu',
|
||||
status: 1,
|
||||
target: null,
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
keepAlive: false,
|
||||
affix: false
|
||||
})
|
||||
resetForm()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 类型切换处理
|
||||
const handleTypeChange = () => {
|
||||
// 类型切换时清空一些字段
|
||||
form.path = ''
|
||||
form.component = ''
|
||||
form.icon = ''
|
||||
// 非菜单类型时清空meta相关字段
|
||||
if (form.type !== 'menu') {
|
||||
form.hidden = false
|
||||
form.hiddenBreadcrumb = false
|
||||
form.keepAlive = false
|
||||
form.affix = false
|
||||
}
|
||||
// 非链接类型时重置target
|
||||
if (form.type !== 'url') {
|
||||
form.target = '_self'
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(form, {
|
||||
id: '',
|
||||
parent_id: props.parentId || 0,
|
||||
name: '',
|
||||
title: '',
|
||||
path: '',
|
||||
component: '',
|
||||
icon: '',
|
||||
sort: 0,
|
||||
type: 'menu',
|
||||
status: 1,
|
||||
target: '_self',
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
keepAlive: false,
|
||||
affix: false
|
||||
})
|
||||
}
|
||||
|
||||
// 加载权限详情
|
||||
const loadMenuDetail = async (id) => {
|
||||
try {
|
||||
@@ -276,7 +388,7 @@ const loadMenuDetail = async (id) => {
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
await formRef.value.validate()
|
||||
loading.value = true
|
||||
|
||||
// 构建提交数据
|
||||
@@ -292,7 +404,12 @@ const handleSave = async () => {
|
||||
type: form.type,
|
||||
status: form.status,
|
||||
target: form.target,
|
||||
meta: {
|
||||
meta: null
|
||||
}
|
||||
|
||||
// 仅菜单类型才有meta字段
|
||||
if (form.type === 'menu') {
|
||||
submitData.meta = {
|
||||
hidden: form.hidden,
|
||||
hiddenBreadcrumb: form.hiddenBreadcrumb,
|
||||
keepAlive: form.keepAlive,
|
||||
@@ -300,6 +417,18 @@ const handleSave = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 根据类型处理空值
|
||||
if (form.type === 'button' || form.type === 'api') {
|
||||
submitData.component = ''
|
||||
submitData.icon = ''
|
||||
}
|
||||
if (form.type === 'button') {
|
||||
submitData.path = ''
|
||||
}
|
||||
if (form.type === 'api' || form.type === 'button' || form.type === 'url') {
|
||||
submitData.meta = null
|
||||
}
|
||||
|
||||
let res = {}
|
||||
if (form.id) {
|
||||
res = await authApi.permissions.edit.put(form.id, submitData)
|
||||
@@ -317,6 +446,10 @@ const handleSave = async () => {
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
loading.value = false
|
||||
if (error?.errorFields) {
|
||||
// 表单验证失败
|
||||
return
|
||||
}
|
||||
message.error('保存失败')
|
||||
}
|
||||
}
|
||||
@@ -333,7 +466,7 @@ const setData = (data, pid) => {
|
||||
form.sort = data.sort || 0
|
||||
form.type = data.type || 'menu'
|
||||
form.status = data.status !== undefined ? data.status : 1
|
||||
form.target = data.target || '_blank'
|
||||
form.target = data.target || '_self'
|
||||
|
||||
// 解析 meta 字段
|
||||
const meta = data.meta && typeof data.meta === 'string' ? JSON.parse(data.meta) : (data.meta || {})
|
||||
@@ -352,9 +485,16 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
// 清空表单验证
|
||||
const clearValidate = () => {
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
setData
|
||||
setData,
|
||||
clearValidate,
|
||||
resetForm
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,61 +2,117 @@
|
||||
<div class="pages-sidebar-layout permission-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
<a-input v-model:value="menuFilterText" placeholder="搜索权限..." allow-clear @change="handleMenuSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="search-wrapper">
|
||||
<a-input v-model:value="menuFilterText" placeholder="搜索权限名称或编码..." allow-clear
|
||||
@change="handleMenuSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a-space size="small">
|
||||
<a-tooltip title="展开全部">
|
||||
<a-button type="text" size="small" @click="handleExpandAll">
|
||||
<template #icon><UnorderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="折叠全部">
|
||||
<a-button type="text" size="small" @click="handleCollapseAll">
|
||||
<template #icon><OrderedListOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="添加根权限">
|
||||
<a-button type="text" size="small" @click="handleAdd(null)">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree
|
||||
v-model:selectedKeys="selectedMenuKeys"
|
||||
v-model:checkedKeys="checkedMenuKeys"
|
||||
:tree-data="filteredMenuTree"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }"
|
||||
show-line
|
||||
checkable
|
||||
:check-strictly="false"
|
||||
:expand-on-click-node="false"
|
||||
@select="onMenuSelect"
|
||||
@check="onMenuCheck">
|
||||
<template #icon="{ dataRef }">
|
||||
<ApartmentOutlined v-if="dataRef.children" />
|
||||
<FileOutlined v-else />
|
||||
</template>
|
||||
<template #title="{ dataRef }">
|
||||
<span class="tree-node-title">{{ dataRef.title }}</span>
|
||||
<PlusOutlined class="tree-node-add" @click.stop="handleAdd(dataRef)" />
|
||||
</template>
|
||||
</a-tree>
|
||||
<a-spin :spinning="loading" :delay="200">
|
||||
<a-tree
|
||||
ref="treeRef"
|
||||
v-model:selectedKeys="selectedMenuKeys"
|
||||
v-model:checkedKeys="checkedMenuKeys"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
:tree-data="filteredMenuTree"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }"
|
||||
show-line
|
||||
checkable
|
||||
:check-strictly="false"
|
||||
:expand-on-click-node="false"
|
||||
block-node
|
||||
@select="onMenuSelect"
|
||||
@check="onMenuCheck">
|
||||
<template #icon="{ dataRef }">
|
||||
<FolderOutlined v-if="dataRef.type === 'menu' && dataRef.children?.length" />
|
||||
<FolderOpenOutlined v-else-if="dataRef.type === 'menu'" />
|
||||
<ApiOutlined v-else-if="dataRef.type === 'api'" />
|
||||
<ControlOutlined v-else />
|
||||
</template>
|
||||
<template #title="{ dataRef }">
|
||||
<span class="tree-node-content">
|
||||
<span class="tree-node-title">{{ dataRef.title }}</span>
|
||||
<a-tag v-if="dataRef.name" class="tree-node-code" size="small">{{ dataRef.name }}</a-tag>
|
||||
<a-tag v-if="dataRef.type !== 'menu'" :color="getTypeColor(dataRef.type)" size="small">
|
||||
{{ getTypeLabel(dataRef.type) }}
|
||||
</a-tag>
|
||||
<span v-if="!dataRef.status" class="tree-node-disabled">
|
||||
<StopOutlined />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="header">
|
||||
<div class="title">{{ selectedMenu?.title || '请选择权限节点' }}</div>
|
||||
<a-button type="link" size="small" @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</a-button>
|
||||
<div class="title-wrapper">
|
||||
<span class="title">{{ selectedMenu?.title || '请选择权限节点' }}</span>
|
||||
<a-tag v-if="selectedMenu" :color="getTypeColor(selectedMenu.type)" size="small">
|
||||
{{ getTypeLabel(selectedMenu.type) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<a-space>
|
||||
<a-button v-if="checkedMenuKeys.length > 0" danger size="small" @click="handleDeleteBatch">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除 ({{ checkedMenuKeys.length }})
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="handleRefresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="body">
|
||||
<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
|
||||
@success="handleSaveSuccess" />
|
||||
<a-empty v-else description="请选择左侧权限节点后操作" :image-size="100" />
|
||||
<a-spin :spinning="detailLoading" :delay="200">
|
||||
<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
|
||||
@success="handleSaveSuccess" />
|
||||
<a-empty v-else description="请选择左侧权限节点后操作" :image-size="100" />
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
ApartmentOutlined,
|
||||
FileOutlined,
|
||||
PlusOutlined
|
||||
PlusOutlined,
|
||||
FolderOutlined,
|
||||
FolderOpenOutlined,
|
||||
ApiOutlined,
|
||||
ControlOutlined,
|
||||
UnorderedListOutlined,
|
||||
OrderedListOutlined,
|
||||
DeleteOutlined,
|
||||
StopOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import saveForm from './components/SaveForm.vue'
|
||||
import authApi from '@/api/auth'
|
||||
@@ -70,22 +126,38 @@ const menuTree = ref([])
|
||||
const filteredMenuTree = ref([])
|
||||
const selectedMenuKeys = ref([])
|
||||
const checkedMenuKeys = ref([])
|
||||
const expandedKeys = ref([])
|
||||
const menuFilterText = ref('')
|
||||
|
||||
// 当前选中的菜单
|
||||
const selectedMenu = ref(null)
|
||||
const parentId = ref(null)
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
|
||||
// 树引用
|
||||
const treeRef = ref()
|
||||
|
||||
// 加载权限树
|
||||
const loadMenuTree = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await authApi.permissions.tree.get()
|
||||
if (res.code === 200) {
|
||||
menuTree.value = res.data || []
|
||||
filteredMenuTree.value = res.data || []
|
||||
// 默认展开第一层
|
||||
expandAllKeys(menuTree.value, 1)
|
||||
} else {
|
||||
message.error(res.message || '加载权限树失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载权限树失败:', error)
|
||||
message.error('加载权限树失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,17 +175,19 @@ const handleRefresh = () => {
|
||||
|
||||
// 搜索权限
|
||||
const handleMenuSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
const keyword = (e.target?.value || '').trim()
|
||||
menuFilterText.value = keyword
|
||||
if (!keyword) {
|
||||
filteredMenuTree.value = menuTree.value
|
||||
return
|
||||
}
|
||||
|
||||
// 递归过滤权限树
|
||||
// 递归过滤权限树（支持搜索名称和编码）
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
|
||||
const titleMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
|
||||
const nameMatch = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
|
||||
const isMatch = titleMatch || nameMatch
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
@@ -127,6 +201,8 @@ const handleMenuSearch = (e) => {
|
||||
}
|
||||
|
||||
filteredMenuTree.value = filterTree(menuTree.value)
|
||||
// 搜索时展开所有匹配节点
|
||||
expandAllKeys(filteredMenuTree.value)
|
||||
}
|
||||
|
||||
// 查找权限节点
|
||||
@@ -176,38 +252,66 @@ const onMenuCheck = (checkedKeys, info) => {
|
||||
console.log('checkedKeys:', checkedKeys, 'info:', info)
|
||||
}
|
||||
|
||||
// 新增权限
|
||||
const handleAdd = async (parentNode) => {
|
||||
try {
|
||||
let newMenuData = {
|
||||
parent_id: parentNode ? parentNode.id : 0,
|
||||
name: '新权限',
|
||||
code: '',
|
||||
route: '',
|
||||
component: '',
|
||||
type: 'menu',
|
||||
sort: 0,
|
||||
status: 1
|
||||
}
|
||||
|
||||
const res = await authApi.permissions.add.post(newMenuData)
|
||||
if (res.code === 200) {
|
||||
newMenuData.id = res.data.id
|
||||
message.success('添加成功')
|
||||
await loadMenuTree()
|
||||
|
||||
// 选中新增的权限
|
||||
selectedMenuKeys.value = [newMenuData.id]
|
||||
const menuNode = findMenuNode(menuTree.value, newMenuData.id)
|
||||
selectedMenu.value = menuNode
|
||||
parentId.value = parentNode ? parentNode.id : null
|
||||
} else {
|
||||
message.error(res.message || '添加失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加权限失败:', error)
|
||||
message.error('添加失败')
|
||||
// 获取所有节点ID（用于展开/折叠）
|
||||
const getAllKeys = (nodes) => {
|
||||
const keys = []
|
||||
const traverse = (items) => {
|
||||
items.forEach(item => {
|
||||
keys.push(item.id)
|
||||
if (item.children?.length) {
|
||||
traverse(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
traverse(nodes)
|
||||
return keys
|
||||
}
|
||||
|
||||
// 展开全部
|
||||
const handleExpandAll = () => {
|
||||
expandedKeys.value = getAllKeys(filteredMenuTree.value)
|
||||
}
|
||||
|
||||
// 折叠全部
|
||||
const handleCollapseAll = () => {
|
||||
expandedKeys.value = []
|
||||
}
|
||||
|
||||
// 自动展开指定层级的节点
|
||||
const expandAllKeys = (nodes, maxLevel = 3) => {
|
||||
const keys = []
|
||||
const traverse = (items, level = 1) => {
|
||||
items.forEach(item => {
|
||||
if (level < maxLevel && item.children?.length) {
|
||||
keys.push(item.id)
|
||||
traverse(item.children, level + 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
traverse(nodes)
|
||||
expandedKeys.value = keys
|
||||
}
|
||||
|
||||
// 获取权限类型标签
|
||||
const getTypeLabel = (type) => {
|
||||
const typeMap = {
|
||||
menu: '菜单',
|
||||
api: '接口',
|
||||
button: '按钮',
|
||||
url: '链接'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
// 获取权限类型颜色
|
||||
const getTypeColor = (type) => {
|
||||
const colorMap = {
|
||||
menu: 'blue',
|
||||
api: 'green',
|
||||
button: 'orange',
|
||||
url: 'purple'
|
||||
}
|
||||
return colorMap[type] || 'default'
|
||||
}
|
||||
|
||||
// 批量删除权限
|
||||
@@ -256,10 +360,124 @@ const handleSaveSuccess = async () => {
|
||||
const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
|
||||
selectedMenu.value = menuNode
|
||||
}
|
||||
message.success('保存成功')
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadMenuTree()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
loadMenuTree,
|
||||
handleExpandAll,
|
||||
handleCollapseAll
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.permission-page {
|
||||
.left-box {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.search-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 8px;
|
||||
|
||||
:deep(.ant-tree) {
|
||||
background: transparent;
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
padding: 4px 0;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree-switcher {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.ant-tree-iconEle {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tree-node-title {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.tree-node-code {
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
background: #f0f0f0;
|
||||
border: none;
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.tree-node-disabled {
|
||||
color: #ff4d4f;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-treenode-selected) {
|
||||
> .ant-tree-node-content-wrapper {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,24 +2,18 @@
|
||||
<div class="pages-base-layout role-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="角色名称">
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入角色名称" allow-clear
|
||||
style="width: 180px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleUserReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-space>
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="角色名称" allow-clear
|
||||
style="width: 180px" />
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleUserReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-dropdown :disabled="selectedRows.length === 0">
|
||||
|
||||
@@ -21,24 +21,18 @@
|
||||
<div class="right-box">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="用户名">
|
||||
<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear
|
||||
style="width: 140px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleUserReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-space>
|
||||
<a-input v-model:value="searchForm.username" placeholder="用户名" allow-clear
|
||||
style="width: 140px" />
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleUserReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-dropdown :disabled="selectedRows.length === 0">
|
||||
|
||||
Reference in New Issue
Block a user