blob: a9e1c80bef1282e931d707fc1901a5aec6b08189 [file] [log] [blame]
Raverafc93da2025-06-15 18:12:49 +08001.test-dashboard {
2 min-height: 100vh;
3 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
4 padding: 20px;
5}
6
7.dashboard-header {
8 text-align: center;
9 margin-bottom: 30px;
10 color: white;
11}
12
13.dashboard-header h1 {
14 font-size: 2.5rem;
15 margin-bottom: 10px;
16 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
17}
18
19.dashboard-header p {
20 font-size: 1.1rem;
21 opacity: 0.9;
22}
23
24.dashboard-content {
25 max-width: 1200px;
26 margin: 0 auto;
27 display: flex;
28 flex-direction: column;
29 gap: 20px;
30}
31
32.user-info-card,
33.token-info-card,
34.api-test-card {
35 background: white;
36 border-radius: 12px;
37 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
38 border: none;
39}
40
41.user-info-card .ant-card-head {
42 background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
43 border-radius: 12px 12px 0 0;
44 border-bottom: none;
45}
46
47.user-info-card .ant-card-head-title {
48 color: white;
49 font-weight: 600;
50}
51
52.user-info-card .ant-card-extra .ant-btn {
53 color: white;
54 border-color: rgba(255, 255, 255, 0.3);
55}
56
57.user-info-card .ant-card-extra .ant-btn:hover {
58 background: rgba(255, 255, 255, 0.1);
59 border-color: rgba(255, 255, 255, 0.5);
60}
61
62.user-info-card .ant-card-extra .ant-btn-danger {
63 background: #ef4444;
64 border-color: #ef4444;
65}
66
67.user-info-card .ant-card-extra .ant-btn-danger:hover {
68 background: #dc2626;
69 border-color: #dc2626;
70}
71
72.token-info-card .ant-card-head {
73 background: linear-gradient(90deg, #059669 0%, #0d9488 100%);
74 border-radius: 12px 12px 0 0;
75 border-bottom: none;
76}
77
78.token-info-card .ant-card-head-title {
79 color: white;
80 font-weight: 600;
81}
82
83.api-test-card .ant-card-head {
84 background: linear-gradient(90deg, #ea580c 0%, #dc2626 100%);
85 border-radius: 12px 12px 0 0;
86 border-bottom: none;
87}
88
89.api-test-card .ant-card-head-title {
90 color: white;
91 font-weight: 600;
92}
93
94.token-display {
95 background: #f8fafc;
96 padding: 20px;
97 border-radius: 8px;
98 border: 1px solid #e2e8f0;
99}
100
101.token-text {
102 background: #1e293b;
103 color: #10b981;
104 padding: 12px;
105 border-radius: 6px;
106 font-family: 'Courier New', monospace;
107 font-size: 14px;
108 word-break: break-all;
109 margin: 10px 0;
110 border: 1px solid #334155;
111}
112
113.token-note {
114 color: #64748b;
115 font-size: 12px;
116 font-style: italic;
117 margin: 10px 0 0 0;
118}
119
120.loading-container {
121 display: flex;
122 flex-direction: column;
123 align-items: center;
124 justify-content: center;
125 height: 100vh;
126 color: white;
127}
128
129.spinner {
130 width: 40px;
131 height: 40px;
132 border: 4px solid rgba(255, 255, 255, 0.3);
133 border-left-color: white;
134 border-radius: 50%;
135 animation: spin 1s linear infinite;
136 margin-bottom: 20px;
137}
138
139@keyframes spin {
140 to {
141 transform: rotate(360deg);
142 }
143}
144
145.loading-container p {
146 font-size: 1.1rem;
147 opacity: 0.9;
148}
149
150/* 响应式设计 */
151@media (max-width: 768px) {
152 .test-dashboard {
153 padding: 10px;
154 }
155
156 .dashboard-header h1 {
157 font-size: 2rem;
158 }
159
160 .dashboard-content {
161 gap: 15px;
162 }
163
164 .user-info-card .ant-card-extra {
165 flex-direction: column;
166 gap: 8px;
167 }
168
169 .token-text {
170 font-size: 12px;
171 }
172}
173
174/* Ant Design 组件样式覆写 */
175.ant-descriptions-item-label {
176 font-weight: 600;
177 color: #374151;
178 background: #f9fafb;
179}
180
181.ant-descriptions-item-content {
182 color: #111827;
183}
184
185.ant-tag {
186 font-weight: 500;
187 border-radius: 6px;
188 padding: 2px 8px;
189}