| .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; |
| } |