blob: a9e1c80bef1282e931d707fc1901a5aec6b08189 [file] [log] [blame]
.test-dashboard {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
}
.dashboard-header {
text-align: center;
margin-bottom: 30px;
color: white;
}
.dashboard-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.dashboard-header p {
font-size: 1.1rem;
opacity: 0.9;
}
.dashboard-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.user-info-card,
.token-info-card,
.api-test-card {
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: none;
}
.user-info-card .ant-card-head {
background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
border-radius: 12px 12px 0 0;
border-bottom: none;
}
.user-info-card .ant-card-head-title {
color: white;
font-weight: 600;
}
.user-info-card .ant-card-extra .ant-btn {
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.user-info-card .ant-card-extra .ant-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.user-info-card .ant-card-extra .ant-btn-danger {
background: #ef4444;
border-color: #ef4444;
}
.user-info-card .ant-card-extra .ant-btn-danger:hover {
background: #dc2626;
border-color: #dc2626;
}
.token-info-card .ant-card-head {
background: linear-gradient(90deg, #059669 0%, #0d9488 100%);
border-radius: 12px 12px 0 0;
border-bottom: none;
}
.token-info-card .ant-card-head-title {
color: white;
font-weight: 600;
}
.api-test-card .ant-card-head {
background: linear-gradient(90deg, #ea580c 0%, #dc2626 100%);
border-radius: 12px 12px 0 0;
border-bottom: none;
}
.api-test-card .ant-card-head-title {
color: white;
font-weight: 600;
}
.token-display {
background: #f8fafc;
padding: 20px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.token-text {
background: #1e293b;
color: #10b981;
padding: 12px;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 14px;
word-break: break-all;
margin: 10px 0;
border: 1px solid #334155;
}
.token-note {
color: #64748b;
font-size: 12px;
font-style: italic;
margin: 10px 0 0 0;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
color: white;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-left-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-container p {
font-size: 1.1rem;
opacity: 0.9;
}
/* 响应式设计 */
@media (max-width: 768px) {
.test-dashboard {
padding: 10px;
}
.dashboard-header h1 {
font-size: 2rem;
}
.dashboard-content {
gap: 15px;
}
.user-info-card .ant-card-extra {
flex-direction: column;
gap: 8px;
}
.token-text {
font-size: 12px;
}
}
/* Ant Design 组件样式覆写 */
.ant-descriptions-item-label {
font-weight: 600;
color: #374151;
background: #f9fafb;
}
.ant-descriptions-item-content {
color: #111827;
}
.ant-tag {
font-weight: 500;
border-radius: 6px;
padding: 2px 8px;
}