@becrafter/prompt-manager 0.2.4-dev.5 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/package.json +1 -3
  2. package/packages/web/0.26974981f2e663e001ca.js +0 -1
  3. package/packages/web/112.895e73058c36df517412.js +0 -1
  4. package/packages/web/130.2145d293d97ee88902a1.js +0 -1
  5. package/packages/web/142.4ef07b4323c04c87bd81.js +0 -1
  6. package/packages/web/165.3b013a0e62121061ce41.js +0 -2
  7. package/packages/web/165.3b013a0e62121061ce41.js.LICENSE.txt +0 -9
  8. package/packages/web/203.a3697c577f74b6538257.js +0 -1
  9. package/packages/web/241.c0b98c14268a1d46d55d.js +0 -1
  10. package/packages/web/249.e10b6b8a1ac4f66185ea.js +0 -1
  11. package/packages/web/291.8c281d2823aa37833137.js +0 -1
  12. package/packages/web/319.5b4ef8bdd727fdac0520.js +0 -1
  13. package/packages/web/32.22d5433bcd9b6b4e98f1.js +0 -1
  14. package/packages/web/325.8810a3f94093d0f19341.js +0 -1
  15. package/packages/web/366.24666676c36ca63de8e1.js +0 -1
  16. package/packages/web/378.07aa22b5f489f8f1ec36.js +0 -1
  17. package/packages/web/391.f39db51c15feb65b46cb.js +0 -1
  18. package/packages/web/393.ab70195ea156eebec40b.js +0 -1
  19. package/packages/web/412.6d38dd3b290782c51ed6.js +0 -1
  20. package/packages/web/465.fb5ab26f362d3eb53da9.js +0 -1
  21. package/packages/web/48.7643e76aedee153e680c.js +0 -1
  22. package/packages/web/480.237737e805b568087d34.js +0 -1
  23. package/packages/web/489.182e98261f30e4da62d6.js +0 -1
  24. package/packages/web/490.3f311f0c36d0c52f8b52.js +0 -1
  25. package/packages/web/492.d07d9857e3682710f3a5.js +0 -1
  26. package/packages/web/495.60324846746eea7d588b.js +0 -1
  27. package/packages/web/510.b6e2c433d2f9bc9a1edd.js +0 -1
  28. package/packages/web/543.223a1c0b8345b4e65ed3.js +0 -1
  29. package/packages/web/567.e438fd025d21373bc95b.js +0 -1
  30. package/packages/web/592.c670d3500195bdb18ca4.js +0 -1
  31. package/packages/web/616.a8b495ba380ec0bcafd9.js +0 -1
  32. package/packages/web/617.bc4db899b54108068892.js +0 -1
  33. package/packages/web/641.1e5e900d36819777d808.js +0 -1
  34. package/packages/web/672.ae0e48b24fd6863bb4d1.js +0 -1
  35. package/packages/web/731.595770c0a8f30f8c453d.js +0 -1
  36. package/packages/web/746.3faf506c16dc0e6ae25a.js +0 -1
  37. package/packages/web/756.16d54ad97aadec6eb440.js +0 -1
  38. package/packages/web/77.d3de1da7532138022a7c.js +0 -1
  39. package/packages/web/802.0a9a7f92703bd3ed0228.js +0 -1
  40. package/packages/web/815.879527c51deda81ff3e6.js +0 -1
  41. package/packages/web/821.12f33b53b488b3995bb9.js +0 -1
  42. package/packages/web/846.64e9bb4b76cae3245c47.js +0 -1
  43. package/packages/web/869.aadd9a07fd56e04ba5dd.js +0 -1
  44. package/packages/web/885.6dc8edf4c16f6b578da6.js +0 -1
  45. package/packages/web/901.45604b599d11f86ae9d8.js +0 -1
  46. package/packages/web/928.69835904eae42113a3ce.js +0 -1
  47. package/packages/web/955.827020bdb97be41eb055.js +0 -1
  48. package/packages/web/981.e4d081b9d1dac0cd275f.js +0 -1
  49. package/packages/web/992.a3843959b85c7fdc6cf9.js +0 -1
  50. package/packages/web/996.07a82c3066973c75984b.js +0 -1
  51. package/packages/web/css/codemirror-theme_xq-light.css +0 -43
  52. package/packages/web/css/codemirror.css +0 -344
  53. package/packages/web/css/main.b013c98c7a56511f8710.css +0 -9995
  54. package/packages/web/css/main.css +0 -4404
  55. package/packages/web/css/skills.css +0 -1753
  56. package/packages/web/css/terminal.css +0 -1218
  57. package/packages/web/index.html +0 -3
  58. package/packages/web/main.cf6dd52dbaa4f935d45a.js +0 -2
  59. package/packages/web/main.cf6dd52dbaa4f935d45a.js.LICENSE.txt +0 -3
@@ -1,4404 +0,0 @@
1
- /* 主要应用样式 */
2
- :root {
3
- --primary: #393939;
4
- --primary-dark: #393939;
5
- --success: #28a745;
6
- --danger: #dc3545;
7
- --warning: #ffc107;
8
- --dark: #1a1a1a;
9
- --light: #f8f9fa;
10
- --gray: #6c757d;
11
- --gray-light: #dee2e6;
12
- --border: #e0e0e0;
13
- --sidebar-bg: #f8f9fa;
14
- --editor-bg: #263238;
15
- --preview-bg: #f5f5f5;
16
- --scrollbar-width: 6px;
17
- --scrollbar-thumb-color: rgba(0, 0, 0, 0.15);
18
- --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.25);
19
- }
20
-
21
- /* 全局滚动条样式 - 默认隐藏,悬停时显示 */
22
- * {
23
- scrollbar-width: thin;
24
- scrollbar-color: transparent transparent;
25
- }
26
-
27
- *:hover {
28
- scrollbar-color: var(--scrollbar-thumb-color) transparent;
29
- }
30
-
31
- /* Webkit 浏览器滚动条样式 */
32
- *::-webkit-scrollbar {
33
- width: var(--scrollbar-width);
34
- height: var(--scrollbar-width);
35
- }
36
-
37
- *::-webkit-scrollbar-track {
38
- background: transparent;
39
- }
40
-
41
- *::-webkit-scrollbar-thumb {
42
- background: transparent;
43
- border-radius: calc(var(--scrollbar-width) / 2);
44
- transition: background-color 0.2s ease;
45
- }
46
-
47
- *:hover::-webkit-scrollbar-thumb {
48
- background: var(--scrollbar-thumb-color);
49
- }
50
-
51
- *::-webkit-scrollbar-thumb:hover {
52
- background: var(--scrollbar-thumb-hover-color);
53
- }
54
-
55
- * {
56
- box-sizing: border-box;
57
- margin: 0;
58
- padding: 0;
59
- font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
60
- -webkit-font-smoothing: antialiased;
61
- -moz-osx-font-smoothing: grayscale;
62
- text-rendering: optimizeLegibility;
63
- }
64
-
65
- body {
66
- background-color: var(--light);
67
- color: var(--dark);
68
- min-height: 100vh;
69
- display: flex;
70
- flex-direction: column;
71
- letter-spacing: -0.01em;
72
- font-weight: 420;
73
- overflow-y: hidden;
74
- }
75
-
76
- header {
77
- background-color: white;
78
- padding: 8px 25px;
79
- display: flex;
80
- align-items: center;
81
- justify-content: space-between;
82
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
83
- border-bottom: 1px solid var(--border);
84
- }
85
-
86
- .logo {
87
- font-size: 24px;
88
- font-weight: 580;
89
- color: var(--primary);
90
- display: flex;
91
- align-items: center;
92
- gap: 10px;
93
- letter-spacing: -0.02em;
94
- }
95
-
96
- .logo span {
97
- color: #8e8989;
98
- font-size: 10px;
99
- padding: 2px 6px;
100
- border-radius: 4px;
101
- font-weight: 400;
102
- border: 1px solid var(--border);
103
- letter-spacing: 0;
104
- }
105
-
106
- .nav-right {
107
- display: flex;
108
- gap: 12px;
109
- align-items: center;
110
- position: relative;
111
- }
112
-
113
- .github-link {
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- width: 32px;
118
- height: 32px;
119
- color: #6c757d;
120
- text-decoration: none;
121
- border-radius: 6px;
122
- transition: all 0.2s ease;
123
- }
124
-
125
- .github-link:hover {
126
- color: #24292e;
127
- background-color: rgba(36, 41, 46, 0.1);
128
- text-decoration: none;
129
- }
130
-
131
- .user-profile {
132
- position: relative;
133
- }
134
-
135
- .avatar-btn {
136
- width: 32px;
137
- height: 32px;
138
- padding: 0;
139
- border: none;
140
- background: rgba(0,0,0,0.02);
141
- cursor: pointer;
142
- border-radius: 50%;
143
- overflow: hidden;
144
- transition: all 0.2s ease;
145
- display: flex;
146
- align-items: center;
147
- justify-content: center;
148
- }
149
-
150
- .avatar-btn:hover {
151
- transform: translateY(-1px);
152
- background: rgba(0,0,0,0.04);
153
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
154
- }
155
-
156
- /* 当不需要认证时,头像显示为不可点击状态 */
157
- .avatar-btn.no-auth {
158
- cursor: default;
159
- }
160
-
161
- .avatar-btn.no-auth:hover {
162
- transform: none;
163
- background: rgba(0,0,0,0.02);
164
- box-shadow: none;
165
- }
166
-
167
- .avatar-img {
168
- width: 26px;
169
- height: 26px;
170
- object-fit: cover;
171
- border-radius: 50%;
172
- opacity: 0.75;
173
- transition: opacity 0.2s ease;
174
- }
175
-
176
- .avatar-btn:hover .avatar-img {
177
- opacity: 0.9;
178
- }
179
-
180
- .dropdown-menu {
181
- position: absolute;
182
- top: calc(100% + 8px);
183
- right: 0;
184
- width: 240px;
185
- background: white;
186
- border-radius: 12px;
187
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
188
- opacity: 0;
189
- visibility: hidden;
190
- transform: translateY(-8px) scale(0.96);
191
- transform-origin: top right;
192
- transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
193
- z-index: 1000;
194
- border: 1px solid var(--border);
195
- }
196
-
197
- .dropdown-menu.show {
198
- opacity: 1;
199
- visibility: visible;
200
- transform: translateY(0) scale(1);
201
- }
202
-
203
- .dropdown-header {
204
- padding: 16px;
205
- border-bottom: 1px solid var(--border);
206
- }
207
-
208
- .user-info {
209
- display: flex;
210
- align-items: center;
211
- gap: 12px;
212
- }
213
-
214
- .user-avatar {
215
- width: 36px;
216
- height: 36px;
217
- border-radius: 50%;
218
- background: var(--light);
219
- padding: 3px;
220
- opacity: 0.8;
221
- }
222
-
223
- .user-details {
224
- flex: 1;
225
- min-width: 0;
226
- padding: 2px 0;
227
- }
228
-
229
- .user-name {
230
- font-size: 15px;
231
- font-weight: 500;
232
- color: var(--dark);
233
- margin-bottom: 2px;
234
- }
235
-
236
- .user-role {
237
- font-size: 13px;
238
- color: var(--gray);
239
- }
240
-
241
- .dropdown-divider {
242
- height: 1px;
243
- background: var(--border);
244
- margin: 8px 0;
245
- }
246
-
247
- .dropdown-item {
248
- display: flex;
249
- align-items: center;
250
- gap: 10px;
251
- width: 100%;
252
- padding: 12px 16px;
253
- border: none;
254
- background: none;
255
- font-size: 14px;
256
- color: var(--dark);
257
- cursor: pointer;
258
- transition: all 0.2s ease;
259
- }
260
-
261
- .dropdown-item:last-child {
262
- border-radius: 0 0 12px 12px;
263
- }
264
-
265
- .dropdown-item:hover {
266
- background: rgba(0, 0, 0, 0.04);
267
- }
268
-
269
- .dropdown-item .dropdown-icon {
270
- width: 18px;
271
- height: 18px;
272
- color: var(--gray);
273
- }
274
-
275
- .dropdown-item:hover .dropdown-icon {
276
- color: var(--primary);
277
- }
278
-
279
- .btn {
280
- padding: 8px 16px;
281
- border-radius: 6px;
282
- font-size: 14px;
283
- font-weight: 500;
284
- cursor: pointer;
285
- transition: all 0.2s;
286
- border: none;
287
- display: flex;
288
- align-items: center;
289
- gap: 6px;
290
- }
291
-
292
- .btn-primary {
293
- background: var(--primary);
294
- color: white;
295
- }
296
-
297
- .btn-primary:hover {
298
- background: var(--primary-dark);
299
- }
300
-
301
- .btn-success {
302
- background: var(--success);
303
- color: white;
304
- }
305
-
306
- .btn-outline {
307
- background: transparent;
308
- border: 1px solid var(--border);
309
- color: var(--dark);
310
- }
311
-
312
- .btn-outline:hover {
313
- background: var(--light);
314
- }
315
-
316
- .btn-light {
317
- background: white;
318
- border: 1px solid var(--border);
319
- color: var(--dark);
320
- }
321
-
322
- .btn-light:hover {
323
- background: var(--light);
324
- }
325
-
326
- .btn-dark {
327
- background: var(--dark);
328
- color: white;
329
- }
330
-
331
- .btn-dark:hover {
332
- background: #000;
333
- }
334
-
335
- .btn-danger {
336
- background: var(--danger);
337
- color: white;
338
- }
339
-
340
- .btn-danger:hover {
341
- background: #b71f31;
342
- }
343
-
344
- .btn-sm {
345
- padding: 6px 12px;
346
- font-size: 13px;
347
- }
348
-
349
- #addArgumentBtn {
350
- padding: 6px 12px;
351
- font-size: 12px;
352
- }
353
-
354
- button#saveBtn{
355
- padding: 8px 16px;
356
- font-size: 14px;
357
- }
358
-
359
- .btn.loading {
360
- opacity: 0.6;
361
- pointer-events: none;
362
- }
363
-
364
- .btn-icon {
365
- padding: 6px;
366
- width: 32px;
367
- height: 32px;
368
- display: flex;
369
- align-items: center;
370
- justify-content: center;
371
- }
372
-
373
- main {
374
- display: flex;
375
- flex: 1;
376
- overflow: hidden;
377
- height: calc(100vh - 57px); /* 减去header高度 */
378
- }
379
-
380
- /* 一级导航样式 */
381
- .primary-nav {
382
- width: 58px;
383
- background: #fafafa;
384
- border-right: 1px solid var(--border);
385
- display: flex;
386
- flex-direction: column;
387
- padding: 12px 0;
388
- flex-shrink: 0;
389
- height: 100%;
390
- overflow-y: auto;
391
- }
392
-
393
- .primary-nav-items {
394
- display: flex;
395
- flex-direction: column;
396
- gap: 8px;
397
- padding: 0 8px;
398
- }
399
-
400
- .primary-nav-item {
401
- display: flex;
402
- flex-direction: column;
403
- align-items: center;
404
- justify-content: center;
405
- gap: 4px;
406
- padding: 12px 8px;
407
- border: none;
408
- background: transparent;
409
- border-radius: 10px;
410
- cursor: pointer;
411
- transition: all 0.2s ease;
412
- color: var(--gray);
413
- position: relative;
414
- }
415
-
416
- .primary-nav-item svg {
417
- width: 14px;
418
- height: 14px;
419
- stroke-width: 2;
420
- transition: all 0.2s ease;
421
- /* transform: rotate(90deg); */
422
- }
423
-
424
- .primary-nav-item span {
425
- font-size: 11px;
426
- font-weight: 700;
427
- letter-spacing: 1px;
428
- writing-mode: vertical-lr;
429
- text-transform: uppercase;
430
- opacity: 0.85;
431
- }
432
-
433
- .primary-nav-item:hover {
434
- background: rgba(0, 0, 0, 0.04);
435
- color: var(--primary);
436
- }
437
-
438
- .primary-nav-item.active {
439
- background: white;
440
- color: var(--primary);
441
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
442
- }
443
-
444
- .primary-nav-item.active::before {
445
- content: '';
446
- position: absolute;
447
- left: 0;
448
- top: 50%;
449
- transform: translateY(-50%);
450
- width: 3px;
451
- height: 60%;
452
- background: var(--primary);
453
- border-radius: 0 3px 3px 0;
454
- }
455
-
456
- aside {
457
- width: 280px;
458
- background: var(--sidebar-bg);
459
- border-right: 1px solid var(--border);
460
- padding: 0;
461
- display: flex;
462
- flex-direction: column;
463
- height: 100%;
464
- overflow-y: auto;
465
- flex-shrink: 0;
466
- }
467
-
468
- .sidebar-header {
469
- padding: 15px;
470
- display: flex;
471
- flex-direction: column;
472
- gap: 12px;
473
- background: white;
474
- border-bottom: 1px solid var(--border);
475
- }
476
-
477
- .new-prompt-btn {
478
- background: var(--primary);
479
- color: white;
480
- border: none;
481
- border-radius: 10px;
482
- padding: 12px 16px;
483
- font-size: 15px;
484
- font-weight: 500;
485
- cursor: pointer;
486
- display: flex;
487
- align-items: center;
488
- justify-content: center;
489
- gap: 8px;
490
- width: 100%;
491
- transition: all 0.2s ease;
492
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
493
- }
494
-
495
- .new-prompt-btn:hover {
496
- background: #333;
497
- transform: translateY(-1px);
498
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
499
- }
500
-
501
- .blank-area-new-prompt-btn {
502
- font-weight: 500;
503
- background: none;
504
- border: none;
505
- color: inherit;
506
- text-decoration: none;
507
- cursor: pointer;
508
- padding: 0;
509
- display: inline;
510
- font-size: inherit;
511
- transition: color 0.2s ease;
512
- }
513
-
514
- .blank-area-new-prompt-btn:hover {
515
- color: var(--primary);
516
- text-decoration: none;
517
- }
518
-
519
- .search-container {
520
- display: flex;
521
- gap: 10px;
522
- margin-top: 2px;
523
- }
524
-
525
- .search-box {
526
- position: relative;
527
- flex: 1;
528
- }
529
-
530
- .search-box input {
531
- width: 100%;
532
- padding: 9px 32px 9px 38px;
533
- border: 1px solid var(--border);
534
- border-radius: 8px;
535
- font-size: 14px;
536
- transition: all 0.2s ease;
537
- background: white;
538
- }
539
-
540
- .search-box input:focus {
541
- outline: none;
542
- border-color: var(--primary);
543
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1);
544
- }
545
-
546
- .search-box::before {
547
- content: '';
548
- position: absolute;
549
- left: 12px;
550
- top: 50%;
551
- transform: translateY(-50%);
552
- width: 16px;
553
- height: 16px;
554
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
555
- background-size: contain;
556
- opacity: 0.6;
557
- }
558
-
559
- .search-box .clear-btn {
560
- position: absolute;
561
- right: 8px;
562
- top: 50%;
563
- transform: translateY(-50%);
564
- width: 20px;
565
- height: 20px;
566
- border: none;
567
- background: transparent;
568
- cursor: pointer;
569
- padding: 0;
570
- display: none;
571
- align-items: center;
572
- justify-content: center;
573
- color: var(--gray);
574
- opacity: 0.6;
575
- transition: opacity 0.2s ease;
576
- }
577
-
578
- .search-box .clear-btn::before {
579
- content: '';
580
- width: 16px;
581
- height: 16px;
582
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") no-repeat center;
583
- background-size: contain;
584
- }
585
-
586
- .search-box .clear-btn:hover {
587
- opacity: 1;
588
- }
589
-
590
- .search-box input:not(:placeholder-shown) + .clear-btn {
591
- display: flex;
592
- }
593
-
594
- .folder-btn {
595
- background: white;
596
- border: 1px solid var(--border);
597
- border-radius: 8px;
598
- width: 38px;
599
- height: 38px;
600
- cursor: pointer;
601
- display: flex;
602
- align-items: center;
603
- justify-content: center;
604
- transition: all 0.2s ease;
605
- flex-shrink: 0;
606
- }
607
-
608
- .folder-btn::before {
609
- content: '';
610
- width: 18px;
611
- height: 18px;
612
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3Cline x1='12' y1='11' x2='12' y2='17'/%3E%3Cline x1='9' y1='14' x2='15' y2='14'/%3E%3C/svg%3E") no-repeat center;
613
- background-size: contain;
614
- opacity: 0.6;
615
- transition: opacity 0.2s ease;
616
- }
617
-
618
- .skills-layout .folder-btn::before {
619
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center;
620
- }
621
-
622
- .folder-btn:hover {
623
- background: #f8f9fa;
624
- border-color: var(--primary);
625
- transform: translateY(-1px);
626
- box-shadow: 0 2px 8px rgba(0,0,0,0.08);
627
- }
628
-
629
- .folder-btn:hover::before {
630
- opacity: 1;
631
- }
632
-
633
- .toast-container {
634
- position: fixed;
635
- bottom: 24px;
636
- right: 24px;
637
- display: flex;
638
- flex-direction: column-reverse;
639
- gap: 12px;
640
- z-index: 5000;
641
- align-items: flex-end;
642
- }
643
-
644
- .toast {
645
- min-width: 280px;
646
- max-width: 360px;
647
- background: rgba(255, 255, 255, 0.96);
648
- border-radius: 12px;
649
- padding: 16px 18px;
650
- display: flex;
651
- align-items: flex-start;
652
- gap: 14px;
653
- box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
654
- border: 1px solid transparent;
655
- opacity: 0;
656
- transform: translateY(16px);
657
- animation: toast-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
658
- pointer-events: auto;
659
- }
660
-
661
- .toast.toast-leave {
662
- animation: toast-leave 0.25s ease forwards;
663
- }
664
-
665
- .toast-success {
666
- border-color: rgba(40,167,69,0.35);
667
- background: linear-gradient(145deg, rgba(40,167,69,0.08), rgba(40,167,69,0.02));
668
- }
669
-
670
- .toast-error {
671
- border-color: rgba(220,53,69,0.35);
672
- background: linear-gradient(145deg, rgba(220,53,69,0.08), rgba(220,53,69,0.02));
673
- }
674
-
675
- .toast-info {
676
- border-color: rgba(0,102,255,0.3);
677
- background: linear-gradient(145deg, rgba(0,102,255,0.08), rgba(0,102,255,0.02));
678
- }
679
-
680
- .toast-warning {
681
- border-color: rgba(255,193,7,0.35);
682
- background: linear-gradient(145deg, rgba(255,193,7,0.1), rgba(255,193,7,0.03));
683
- }
684
-
685
- .toast-icon {
686
- width: 36px;
687
- height: 36px;
688
- border-radius: 50%;
689
- display: flex;
690
- align-items: center;
691
- justify-content: center;
692
- font-size: 18px;
693
- font-weight: 600;
694
- flex-shrink: 0;
695
- background: rgba(0,0,0,0.05);
696
- color: var(--dark);
697
- }
698
-
699
- .toast-success .toast-icon {
700
- background: rgba(40,167,69,0.15);
701
- color: var(--success);
702
- }
703
-
704
- .toast-error .toast-icon {
705
- background: rgba(220,53,69,0.15);
706
- color: var(--danger);
707
- }
708
-
709
- .toast-info .toast-icon {
710
- background: rgba(0,102,255,0.15);
711
- color: var(--primary);
712
- }
713
-
714
- .toast-warning .toast-icon {
715
- background: rgba(255,193,7,0.2);
716
- color: #b58100;
717
- }
718
-
719
- .toast-content {
720
- flex: 1;
721
- display: flex;
722
- flex-direction: column;
723
- gap: 4px;
724
- }
725
-
726
- .toast-title {
727
- font-size: 15px;
728
- font-weight: 600;
729
- color: var(--dark);
730
- }
731
-
732
- .toast-message {
733
- font-size: 13px;
734
- color: var(--gray);
735
- line-height: 1.5;
736
- white-space: pre-line;
737
- }
738
-
739
- .toast-close {
740
- border: none;
741
- background: transparent;
742
- color: var(--gray);
743
- font-size: 18px;
744
- cursor: pointer;
745
- padding: 2px;
746
- line-height: 1;
747
- margin-left: 8px;
748
- flex-shrink: 0;
749
- }
750
-
751
- .toast-close:hover {
752
- color: var(--dark);
753
- }
754
-
755
- @keyframes toast-enter {
756
- to {
757
- opacity: 1;
758
- transform: translateY(0);
759
- }
760
- }
761
-
762
- @keyframes toast-leave {
763
- to {
764
- opacity: 0;
765
- transform: translateY(12px);
766
- }
767
- }
768
-
769
- .variable-desc {
770
- font-size: 12px;
771
- color: var(--gray);
772
- margin-top: 2px;
773
- }
774
-
775
- .group-section {
776
- margin-bottom: 8px;
777
- }
778
-
779
- .group-header {
780
- padding: 12px 15px;
781
- font-size: 14px;
782
- font-weight: 500;
783
- color: var(--dark);
784
- display: flex;
785
- align-items: center;
786
- justify-content: space-between;
787
- cursor: pointer;
788
- border-bottom: 1px solid var(--border);
789
- }
790
-
791
- .group-section.disabled {
792
- position: relative;
793
- }
794
-
795
- .group-section.disabled .group-header {
796
- position: relative;
797
- color: #858a91;
798
- background: rgba(0,0,0,0.02);
799
- box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
800
- }
801
-
802
- .group-section.disabled .group-header::before {
803
- content: '';
804
- position: absolute;
805
- top: 8px;
806
- left: 9px;
807
- width: 40px;
808
- height: 40px;
809
- background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1NicgaGVpZ2h0PSc1Nic+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdnJyB4MT0nMCcgeTE9JzAnIHgyPScxJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZDVkOWRlJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjYWViNGJjJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBvbHlnb24gcG9pbnRzPScwLDAgMCw1NiA1NiwwJyBmaWxsPSd1cmwoI2cpJy8+PHRleHQgeD0nNicgeT0nMjQnIGZvbnQtZmFtaWx5PSdJbnRlcixzeXN0ZW0tdWksU2Vnb2UgVUksSGVsdmV0aWNhLEFyaWFsLHNhbnMtc2VyaWYnIGZvbnQtc2l6ZT0nMTInIGZpbGw9JyM3ZTdmODInIHRyYW5zZm9ybT0ncm90YXRlKC00NSAxOCAyMCknIGZvbnQtd2VpZ2h0PSc2MDAnPuWGu+e7kzwvdGV4dD48L3N2Zz4=") no-repeat;
810
- background-size: contain;
811
- pointer-events: none;
812
- transform: translate(-8px, -8px);
813
- }
814
-
815
- .group-section.disabled .group-header:hover {
816
- background: rgba(0,0,0,0.04);
817
- }
818
-
819
- .group-header:hover {
820
- background: #f0f0f0;
821
- }
822
-
823
- .group-content {
824
- overflow: hidden;
825
- transition: max-height 0.3s ease-out;
826
- }
827
-
828
- .group-content.collapsed {
829
- max-height: 0;
830
- }
831
-
832
- .group-content.expanded {
833
- max-height: 2400px;
834
- overflow: visible;
835
- }
836
-
837
- .group-children {
838
- display: flex;
839
- flex-direction: column;
840
- margin-top: 4px;
841
- }
842
-
843
- .group-count {
844
- background: #9ea2a6;
845
- color: white;
846
- font-size: 11px;
847
- padding: 2px 6px;
848
- border-radius: 10px;
849
- }
850
-
851
- .group-section.disabled .group-count {
852
- background: rgba(0,0,0,0.35);
853
- }
854
-
855
- .prompt-list {
856
- padding: 10px 8px;
857
- }
858
-
859
- .prompt-item {
860
- padding: 12px;
861
- padding-right: 18px; /* 为操作按钮预留空间 */
862
- margin-bottom: 8px;
863
- border-radius: 8px;
864
- cursor: pointer;
865
- position: relative;
866
- background: #f5f5f5;
867
- border: 1px solid transparent;
868
- transition: all 0.2s;
869
- margin-right: 10px;
870
- overflow: hidden;
871
- }
872
-
873
- .prompt-info {
874
- display: flex;
875
- flex-direction: column;
876
- justify-content: center;
877
- width: 100%;
878
- min-width: 0;
879
- padding-right: 10px; /* 为 prompt-meta 预留空间 */
880
- }
881
-
882
- .prompt-name {
883
- font-weight: 500;
884
- margin-bottom: 4px;
885
- white-space: nowrap;
886
- overflow: hidden;
887
- text-overflow: ellipsis;
888
- }
889
-
890
- .prompt-meta {
891
- position: absolute;
892
- right: 0;
893
- top: 0;
894
- bottom: 0;
895
- width: 50px;
896
- display: flex;
897
- align-items: center;
898
- justify-content: center;
899
- pointer-events: none;
900
- }
901
-
902
- .prompt-item:hover {
903
- background: #eeeeee;
904
- border-color: var(--primary);
905
- box-shadow: 0 2px 8px rgba(0,102,255,0.1);
906
- }
907
-
908
- .prompt-item.active {
909
- background: rgba(0,102,255,0.05);
910
- border-color: var(--primary);
911
- }
912
-
913
- .prompt-desc {
914
- font-size: 12px;
915
- color: var(--gray);
916
- line-height: 1.3;
917
- height: 16px;
918
- overflow: hidden;
919
- position: relative;
920
- text-overflow: ellipsis;
921
- white-space: nowrap;
922
- cursor: pointer;
923
- }
924
-
925
- .prompt-meta-hint {
926
- font-size: 11px;
927
- color: var(--gray);
928
- margin-top: 4px;
929
- text-transform: none;
930
- }
931
-
932
- /* Tooltip样式 */
933
- .tooltip {
934
- position: relative;
935
- }
936
-
937
- .tooltip::after {
938
- content: attr(title);
939
- position: absolute;
940
- bottom: 100%;
941
- left: 50%;
942
- transform: translateX(-50%);
943
- background: rgba(0, 0, 0, 0.8);
944
- color: white;
945
- padding: 8px 12px;
946
- border-radius: 4px;
947
- font-size: 12px;
948
- white-space: pre-wrap;
949
- word-wrap: break-word;
950
- max-width: 300px;
951
- z-index: 1000;
952
- opacity: 0;
953
- visibility: hidden;
954
- transition: opacity 0.2s, visibility 0.2s;
955
- pointer-events: none;
956
- }
957
-
958
- .tooltip:hover::after {
959
- opacity: 1;
960
- visibility: visible;
961
- }
962
-
963
- /* 启用状态边框样式 */
964
- .prompt-item.enabled {
965
- border-left: 4px solid #b8b3b3; /* 浅30%的深灰色,原#333调浅30%约为#666 */
966
- }
967
-
968
- /* 操作按钮样式 */
969
- .prompt-actions {
970
- display: flex;
971
- flex-direction: column;
972
- justify-content: center;
973
- gap: 8px;
974
- position: absolute;
975
- right: 0;
976
- top: 0;
977
- bottom: 0;
978
- width: 70px;
979
- opacity: 0;
980
- visibility: hidden;
981
- padding: 8px;
982
- transform: translateX(100%);
983
- transition: all 0.25s ease;
984
- background: linear-gradient(to left,
985
- rgba(238, 238, 238, 0.95) 0%,
986
- rgba(238, 238, 238, 0.9) 30%,
987
- rgba(238, 238, 238, 0.6) 60%,
988
- rgba(238, 238, 238, 0) 100%);
989
- z-index: 1;
990
- pointer-events: auto;
991
- }
992
-
993
- .prompt-item:hover .prompt-actions {
994
- opacity: 1;
995
- visibility: visible;
996
- transform: translateX(0);
997
- }
998
-
999
- .action-btn {
1000
- background: rgba(255, 255, 255, 0.8);
1001
- border: 1px solid var(--border);
1002
- border-radius: 4px;
1003
- padding: 4px;
1004
- margin: -3px;
1005
- font-size: 11px;
1006
- cursor: pointer;
1007
- white-space: nowrap;
1008
- text-align: center;
1009
- transition: all 0.2s ease;
1010
- backdrop-filter: blur(2px);
1011
- width: 100%;
1012
- }
1013
-
1014
- .action-btn:hover {
1015
- background: rgba(255, 255, 255, 0.95);
1016
- transform: translateX(-2px);
1017
- box-shadow: 0 1px 23px rgba(0,0,0,0.1);
1018
- }
1019
-
1020
- /* 美化目录三角图标 */
1021
- .group-toggle {
1022
- position: relative;
1023
- width: 20px;
1024
- height: 20px;
1025
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1026
- }
1027
-
1028
- .group-toggle::before {
1029
- content: '';
1030
- position: absolute;
1031
- width: 16px;
1032
- height: 16px;
1033
- top: 50%;
1034
- left: 50%;
1035
- transform: translate(-50%, -50%);
1036
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
1037
- background-size: contain;
1038
- opacity: 0.6;
1039
- transition: opacity 0.2s ease;
1040
- }
1041
-
1042
- .group-toggle.collapsed {
1043
- transform: rotate(-90deg);
1044
- }
1045
-
1046
- .group-header:hover .group-toggle::before {
1047
- opacity: 1;
1048
- }
1049
-
1050
- .prompt-meta {
1051
- display: flex;
1052
- align-items: center;
1053
- gap: 6px;
1054
- }
1055
-
1056
- .prompt-tag {
1057
- background: rgba(0,102,255,0.1);
1058
- color: var(--primary);
1059
- font-size: 11px;
1060
- padding: 2px 6px;
1061
- border-radius: 4px;
1062
- font-weight: 500;
1063
- }
1064
-
1065
- .prompt-status {
1066
- width: 8px;
1067
- height: 8px;
1068
- border-radius: 50%;
1069
- }
1070
-
1071
- .prompt-status.enabled {
1072
- background: var(--success);
1073
- }
1074
-
1075
- .prompt-status.disabled {
1076
- background: var(--gray-light);
1077
- }
1078
-
1079
- .prompt-list-empty {
1080
- padding: 16px 14px;
1081
- border: 1px dashed rgba(0,0,0,0.12);
1082
- border-radius: 10px;
1083
- color: var(--gray);
1084
- font-size: 13px;
1085
- line-height: 1.6;
1086
- background: rgba(0,0,0,0.02);
1087
- text-align: left;
1088
- }
1089
-
1090
- .prompt-list-empty span {
1091
- display: block;
1092
- color: var(--dark);
1093
- font-weight: 550;
1094
- margin-bottom: 4px;
1095
- }
1096
-
1097
- .group-modal-content {
1098
- min-width: 460px;
1099
- }
1100
-
1101
- .group-modal-tabs {
1102
- display: flex;
1103
- gap: 8px;
1104
- padding: 4px;
1105
- background: rgba(0,0,0,0.03);
1106
- border-radius: 10px;
1107
- margin-bottom: 16px;
1108
- }
1109
-
1110
- .group-modal-tab {
1111
- flex: 1;
1112
- border: none;
1113
- background: transparent;
1114
- border-radius: 8px;
1115
- padding: 10px 12px;
1116
- font-size: 14px;
1117
- font-weight: 500;
1118
- color: var(--gray);
1119
- cursor: pointer;
1120
- transition: all 0.2s ease;
1121
- }
1122
-
1123
- .group-modal-tab:hover {
1124
- color: var(--primary);
1125
- }
1126
-
1127
- .group-modal-tab.active {
1128
- background: white;
1129
- box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
1130
- color: var(--primary);
1131
- font-weight: 580;
1132
- }
1133
-
1134
- .group-modal-panel {
1135
- display: flex;
1136
- flex-direction: column;
1137
- gap: 12px;
1138
- }
1139
-
1140
- .group-modal-panel.hidden {
1141
- display: none;
1142
- }
1143
-
1144
- .group-modal-hint {
1145
- font-size: 12px;
1146
- color: var(--gray);
1147
- margin-top: 6px;
1148
- }
1149
-
1150
- .group-modal-footer {
1151
- display: flex;
1152
- gap: 12px;
1153
- width: 100%;
1154
- justify-content: flex-end;
1155
- }
1156
-
1157
- .group-modal-footer.hidden {
1158
- display: none;
1159
- }
1160
-
1161
- .group-manage-toolbar {
1162
- display: flex;
1163
- align-items: center;
1164
- gap: 10px;
1165
- }
1166
-
1167
- .group-manage-toolbar input {
1168
- flex: 1;
1169
- padding: 8px 12px;
1170
- border: 1px solid var(--border);
1171
- border-radius: 8px;
1172
- font-size: 14px;
1173
- transition: all 0.2s ease;
1174
- }
1175
-
1176
- .group-manage-toolbar input:focus {
1177
- outline: none;
1178
- border-color: var(--primary);
1179
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1180
- }
1181
-
1182
- .group-manage-list {
1183
- display: flex;
1184
- flex-direction: column;
1185
- gap: 10px;
1186
- max-height: 300px;
1187
- overflow-y: auto;
1188
- padding-right: 4px;
1189
- }
1190
-
1191
- .group-manage-empty {
1192
- padding: 18px 12px;
1193
- text-align: center;
1194
- color: var(--gray);
1195
- font-size: 13px;
1196
- border-radius: 10px;
1197
- background: rgba(0,0,0,0.04);
1198
- }
1199
-
1200
- .group-manage-empty.hidden {
1201
- display: none;
1202
- }
1203
-
1204
- .group-manage-item {
1205
- --depth: 0;
1206
- display: flex;
1207
- align-items: flex-start;
1208
- justify-content: space-between;
1209
- gap: 12px;
1210
- padding: 12px 14px;
1211
- border: 1px solid rgba(0,0,0,0.08);
1212
- border-radius: 12px;
1213
- background: white;
1214
- transition: all 0.2s ease;
1215
- }
1216
-
1217
- .group-manage-item:hover {
1218
- border-color: rgba(0,0,0,0.15);
1219
- box-shadow: 0 12px 30px rgba(15,23,42,0.12);
1220
- }
1221
-
1222
- .group-manage-item.is-disabled {
1223
- opacity: 0.85;
1224
- }
1225
-
1226
- .group-manage-info {
1227
- flex: 1;
1228
- min-width: 0;
1229
- }
1230
-
1231
- .group-manage-name {
1232
- display: flex;
1233
- align-items: center;
1234
- gap: 8px;
1235
- font-size: 14px;
1236
- font-weight: 560;
1237
- color: var(--dark);
1238
- padding-left: calc(var(--depth) * 16px);
1239
- }
1240
-
1241
- .group-manage-edit {
1242
- display: flex;
1243
- align-items: center;
1244
- gap: 8px;
1245
- padding-left: calc(var(--depth) * 16px);
1246
- }
1247
-
1248
- .group-manage-path {
1249
- font-size: 12px;
1250
- color: var(--gray);
1251
- margin-top: 4px;
1252
- word-break: break-all;
1253
- }
1254
-
1255
- .group-status-badge {
1256
- font-size: 11px;
1257
- padding: 2px 6px;
1258
- border-radius: 999px;
1259
- background: rgba(0,0,0,0.06);
1260
- color: var(--gray);
1261
- font-weight: 500;
1262
- margin-left: 6px;
1263
- }
1264
-
1265
- .group-status-badge.enabled {
1266
- background: rgba(40,167,69,0.12);
1267
- color: var(--success);
1268
- }
1269
-
1270
- .group-status-badge.disabled {
1271
- background: rgba(220,53,69,0.15);
1272
- color: var(--danger);
1273
- }
1274
-
1275
- .group-status-badge.default {
1276
- background: rgba(0,0,0,0.08);
1277
- color: var(--dark);
1278
- }
1279
-
1280
- .group-manage-actions {
1281
- display: flex;
1282
- align-items: center;
1283
- gap: 8px;
1284
- }
1285
-
1286
- .group-manage-action-btn {
1287
- border: none;
1288
- background: transparent;
1289
- padding: 6px 8px;
1290
- border-radius: 6px;
1291
- font-size: 13px;
1292
- color: var(--primary);
1293
- cursor: pointer;
1294
- transition: all 0.2s ease;
1295
- }
1296
-
1297
- .group-manage-action-btn:hover {
1298
- background: rgba(0,0,0,0.05);
1299
- }
1300
-
1301
- .group-manage-action-btn.danger {
1302
- color: var(--danger);
1303
- }
1304
-
1305
- .group-manage-action-btn[disabled] {
1306
- cursor: not-allowed;
1307
- opacity: 0.6;
1308
- }
1309
-
1310
- .group-manage-rename-input {
1311
- width: 100%;
1312
- padding: 8px 10px;
1313
- border: 1px solid var(--border);
1314
- border-radius: 8px;
1315
- font-size: 14px;
1316
- transition: all 0.2s ease;
1317
- }
1318
-
1319
- .group-manage-rename-input:focus {
1320
- outline: none;
1321
- border-color: var(--primary);
1322
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1323
- }
1324
-
1325
- .editor-container {
1326
- flex: 1;
1327
- display: flex;
1328
- flex-direction: column;
1329
- background: #f5f5f5;
1330
- border-left: 1px solid var(--border);
1331
- padding: 16px 16px 0 16px;
1332
- overflow-y: auto;
1333
- min-width: 0;
1334
- }
1335
-
1336
- .editor-header {
1337
- padding: 8px 0 8px;
1338
- display: flex;
1339
- flex-direction: column;
1340
- gap: 12px;
1341
- background: white;
1342
- flex-shrink: 0;
1343
- }
1344
-
1345
- .editor-header-top {
1346
- display: flex;
1347
- gap: 8px;
1348
- align-items: center;
1349
- width: 100%;
1350
- }
1351
-
1352
- .editor-header-top input,
1353
- .prompt-description {
1354
- padding: 8px 12px;
1355
- border: 1px solid var(--border);
1356
- border-radius: 6px;
1357
- font-size: 14px;
1358
- background: white;
1359
- }
1360
-
1361
- .editor-header-top input {
1362
- flex: 1;
1363
- min-width: 0;
1364
- }
1365
-
1366
- .editor-header-top input:focus,
1367
- .prompt-description:focus {
1368
- outline: none;
1369
- border-color: var(--primary);
1370
- }
1371
-
1372
- .group-selector {
1373
- position: relative;
1374
- flex-shrink: 0;
1375
- }
1376
-
1377
- .group-selector-btn {
1378
- display: flex;
1379
- align-items: center;
1380
- gap: 8px;
1381
- min-width: 160px;
1382
- padding: 8px 12px;
1383
- border: 1px solid var(--border);
1384
- border-radius: 6px;
1385
- background: white;
1386
- font-size: 14px;
1387
- color: var(--dark);
1388
- cursor: pointer;
1389
- transition: all 0.2s ease;
1390
- }
1391
-
1392
- .group-selector-btn:hover {
1393
- border-color: var(--primary);
1394
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
1395
- transform: translateY(-1px);
1396
- }
1397
-
1398
- .group-selector-label {
1399
- color: var(--gray);
1400
- font-size: 12px;
1401
- letter-spacing: 0;
1402
- }
1403
-
1404
- .group-selector-value {
1405
- font-weight: 500;
1406
- color: var(--primary);
1407
- max-width: 160px;
1408
- overflow: hidden;
1409
- text-overflow: ellipsis;
1410
- white-space: nowrap;
1411
- }
1412
-
1413
- .group-selector-icon {
1414
- margin-left: auto;
1415
- display: flex;
1416
- align-items: center;
1417
- justify-content: center;
1418
- color: var(--gray);
1419
- }
1420
-
1421
- .group-selector-input {
1422
- position: absolute;
1423
- inset: 0;
1424
- opacity: 0;
1425
- pointer-events: none;
1426
- }
1427
-
1428
- .prompt-description {
1429
- width: 100%;
1430
- min-height: 38px;
1431
- max-height: 200px;
1432
- line-height: 1.5;
1433
- resize: vertical;
1434
- overflow-y: auto;
1435
- transition: border-color 0.2s ease;
1436
- }
1437
-
1438
- .editor-controls {
1439
- display: flex;
1440
- align-items: center;
1441
- gap: 16px;
1442
- margin-left: auto;
1443
- }
1444
-
1445
- .mode-toggle {
1446
- display: inline-flex;
1447
- align-items: center;
1448
- padding: 3px;
1449
- border-radius: 999px;
1450
- background: var(--light);
1451
- border: 1px solid var(--border);
1452
- }
1453
-
1454
- .mode-btn {
1455
- padding: 6px 18px;
1456
- border: none;
1457
- background: transparent;
1458
- border-radius: 999px;
1459
- font-size: 13px;
1460
- font-weight: 500;
1461
- cursor: pointer;
1462
- color: var(--gray);
1463
- transition: all 0.2s;
1464
- }
1465
-
1466
- .mode-btn.active {
1467
- background: white;
1468
- color: var(--primary);
1469
- box-shadow: 0 1px 4px rgba(0,0,0,0.08);
1470
- }
1471
-
1472
- .editor-content {
1473
- display: flex;
1474
- flex-direction: column;
1475
- gap: 16px;
1476
- margin: 12px 0 0 0;
1477
- min-height: 0;
1478
- }
1479
-
1480
- .arguments-section {
1481
- padding: 10px 20px;
1482
- background: white;
1483
- border: 1px solid var(--border);
1484
- border-radius: 12px;
1485
- box-shadow: 0 8px 24px rgba(0,0,0,0.05);
1486
- display: flex;
1487
- flex-direction: column;
1488
- gap: 16px;
1489
- transition: all 0.3s ease;
1490
- }
1491
-
1492
- .arguments-section.collapsed {
1493
- padding: 10px 20px 10px 20px;
1494
- gap: 0;
1495
- }
1496
-
1497
- .arguments-section.collapsed .arguments-list {
1498
- max-height: 0;
1499
- overflow: hidden;
1500
- opacity: 0;
1501
- margin-top: 0;
1502
- transition: all 0.3s ease;
1503
- }
1504
-
1505
- .arguments-section:not(.collapsed) .arguments-list {
1506
- max-height: 2000px;
1507
- opacity: 1;
1508
- margin-top: 16px;
1509
- transition: all 0.3s ease;
1510
- }
1511
-
1512
- .arguments-section.has-error {
1513
- border-color: rgba(220,53,69,0.4);
1514
- box-shadow: 0 0 0 2px rgba(220,53,69,0.08), 0 8px 24px rgba(220,53,69,0.08);
1515
- }
1516
-
1517
- .arguments-header {
1518
- display: flex;
1519
- align-items: center;
1520
- justify-content: space-between;
1521
- gap: 12px;
1522
- flex-wrap: wrap;
1523
- cursor: pointer;
1524
- user-select: none;
1525
- }
1526
-
1527
- .arguments-header:hover .arguments-toggle {
1528
- opacity: 1;
1529
- }
1530
-
1531
- .arguments-title {
1532
- display: flex;
1533
- align-items: center;
1534
- gap: 8px;
1535
- }
1536
-
1537
- .arguments-toggle {
1538
- width: 24px;
1539
- height: 24px;
1540
- display: flex;
1541
- align-items: center;
1542
- justify-content: center;
1543
- border: none;
1544
- background: transparent;
1545
- color: var(--gray);
1546
- cursor: pointer;
1547
- border-radius: 4px;
1548
- transition: all 0.3s ease;
1549
- opacity: 0.6;
1550
- padding: 0;
1551
- }
1552
-
1553
- .arguments-toggle:hover {
1554
- background: rgba(0,0,0,0.05);
1555
- opacity: 1;
1556
- }
1557
-
1558
- .arguments-section.collapsed .arguments-toggle {
1559
- transform: rotate(-90deg);
1560
- }
1561
-
1562
- .arguments-title > span {
1563
- font-size: 14px;
1564
- font-weight: 600;
1565
- color: var(--gray);
1566
- }
1567
-
1568
- .arguments-count {
1569
- font-size: 12px;
1570
- font-weight: 500;
1571
- color: var(--gray);
1572
- opacity: 0.7;
1573
- }
1574
-
1575
- .arguments-title small {
1576
- font-size: 12px;
1577
- color: var(--gray);
1578
- }
1579
-
1580
- .arguments-actions {
1581
- display: flex;
1582
- gap: 10px;
1583
- align-items: center;
1584
- }
1585
-
1586
- .arguments-list {
1587
- display: grid;
1588
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1589
- gap: 12px;
1590
- }
1591
-
1592
- .arguments-empty {
1593
- grid-column: 1 / -1;
1594
- font-size: 13px;
1595
- color: var(--gray);
1596
- background: var(--light);
1597
- border: 1px dashed var(--border);
1598
- border-radius: 8px;
1599
- padding: 16px;
1600
- text-align: center;
1601
- }
1602
-
1603
- .argument-card {
1604
- border: 1px solid var(--border);
1605
- border-radius: 12px;
1606
- background: linear-gradient(180deg, rgba(248,249,250,0.9), rgba(255,255,255,0.9));
1607
- padding: 16px;
1608
- display: flex;
1609
- flex-direction: column;
1610
- gap: 12px;
1611
- /* min-height: 150px; */
1612
- position: relative;
1613
- overflow: hidden;
1614
- }
1615
-
1616
- .argument-card.argument-card-unused {
1617
- border-color: rgba(220,53,69,0.45);
1618
- box-shadow: 0 0 0 1px rgba(220,53,69,0.18);
1619
- background: rgba(220,53,69,0.04);
1620
- }
1621
-
1622
- .argument-card-header {
1623
- display: flex;
1624
- justify-content: space-between;
1625
- align-items: flex-start;
1626
- gap: 8px;
1627
- }
1628
-
1629
- .argument-name {
1630
- font-size: 15px;
1631
- font-weight: 600;
1632
- color: var(--primary);
1633
- word-break: break-all;
1634
- }
1635
-
1636
- .argument-badges {
1637
- display: flex;
1638
- flex-wrap: wrap;
1639
- gap: 6px;
1640
- }
1641
-
1642
- .argument-badge {
1643
- padding: 2px 8px;
1644
- border-radius: 999px;
1645
- font-size: 11px;
1646
- background: rgba(0,0,0,0.04);
1647
- color: var(--gray);
1648
- }
1649
-
1650
- .argument-required {
1651
- background: rgba(220,53,69,0.12);
1652
- color: var(--danger);
1653
- font-weight: 600;
1654
- }
1655
-
1656
- .argument-body {
1657
- display: flex;
1658
- flex-direction: column;
1659
- gap: 6px;
1660
- color: var(--gray);
1661
- font-size: 12px;
1662
- /* margin-bottom: 24px; */
1663
- }
1664
-
1665
- .argument-body .argument-description {
1666
- color: var(--dark);
1667
- font-size: 13px;
1668
- line-height: 1.5;
1669
- display: -webkit-box;
1670
- -webkit-line-clamp: 3;
1671
- -webkit-box-orient: vertical;
1672
- overflow: hidden;
1673
- }
1674
-
1675
- .argument-body .argument-placeholder {
1676
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1677
- background: rgba(0,0,0,0.04);
1678
- padding: 2px 6px;
1679
- border-radius: 4px;
1680
- color: var(--primary);
1681
- display: inline-block;
1682
- }
1683
-
1684
- .argument-actions {
1685
- display: flex;
1686
- justify-content: center;
1687
- gap: 8px;
1688
- opacity: 0;
1689
- visibility: hidden;
1690
- transition: all 0.25s ease;
1691
- position: absolute;
1692
- left: 0;
1693
- right: 0;
1694
- bottom: 0;
1695
- padding: 12px;
1696
- background: linear-gradient(to top,
1697
- rgba(255, 255, 255, 0.95) 0%,
1698
- rgba(255, 255, 255, 0.9) 50%,
1699
- rgba(255, 255, 255, 0) 100%);
1700
- transform: translateY(100%);
1701
- }
1702
-
1703
- .argument-card:hover .argument-actions {
1704
- opacity: 1;
1705
- visibility: visible;
1706
- transform: translateY(0);
1707
- }
1708
-
1709
- .argument-action-btn {
1710
- border: none;
1711
- background: rgba(0,0,0,0.06);
1712
- color: var(--primary);
1713
- font-size: 12px;
1714
- padding: 6px 12px;
1715
- border-radius: 6px;
1716
- cursor: pointer;
1717
- transition: all 0.2s ease;
1718
- backdrop-filter: blur(4px);
1719
- }
1720
-
1721
- .argument-action-btn:hover {
1722
- background: rgba(0,0,0,0.1);
1723
- transform: translateY(-1px);
1724
- }
1725
-
1726
- .argument-action-btn.delete {
1727
- color: var(--danger);
1728
- background: rgba(220,53,69,0.12);
1729
- }
1730
-
1731
- .argument-action-btn.delete:hover {
1732
- background: rgba(220,53,69,0.18);
1733
- }
1734
-
1735
- .modal {
1736
- position: fixed;
1737
- inset: 0;
1738
- background: rgba(17, 17, 17, 0.35);
1739
- display: flex;
1740
- align-items: center;
1741
- justify-content: center;
1742
- z-index: 1200;
1743
- padding: 24px;
1744
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1745
- backdrop-filter: blur(4px);
1746
- }
1747
-
1748
- .modal.hidden {
1749
- opacity: 0;
1750
- pointer-events: none;
1751
- }
1752
-
1753
- .modal.hidden .modal-content {
1754
- transform: scale(0.95) translateY(10px);
1755
- }
1756
-
1757
- .modal-dialog {
1758
- width: min(520px, 90vw);
1759
- margin: auto;
1760
- }
1761
-
1762
- .modal-content {
1763
- background: white;
1764
- border-radius: 16px;
1765
- box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
1766
- overflow: hidden;
1767
- transform: scale(1) translateY(0);
1768
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1769
- border: 1px solid rgba(0,0,0,0.08);
1770
- max-height: 85vh;
1771
- display: flex;
1772
- flex-direction: column;
1773
- }
1774
-
1775
- .modal-header {
1776
- padding: 12px 24px;
1777
- border-bottom: 1px solid var(--border);
1778
- display: flex;
1779
- align-items: center;
1780
- justify-content: space-between;
1781
- background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.95));
1782
- }
1783
-
1784
- .modal-header h3 {
1785
- font-size: 18px;
1786
- font-weight: 580;
1787
- color: var(--dark);
1788
- letter-spacing: -0.01em;
1789
- margin: 0;
1790
- }
1791
-
1792
- .modal-close {
1793
- width: 32px;
1794
- height: 32px;
1795
- border: none;
1796
- background: transparent;
1797
- border-radius: 8px;
1798
- color: var(--gray);
1799
- cursor: pointer;
1800
- display: flex;
1801
- align-items: center;
1802
- justify-content: center;
1803
- transition: all 0.2s ease;
1804
- padding: 0;
1805
- }
1806
-
1807
- .modal-close:hover {
1808
- background: rgba(0,0,0,0.04);
1809
- color: var(--dark);
1810
- }
1811
-
1812
- .modal-body {
1813
- padding: 24px;
1814
- flex: 1;
1815
- overflow-y: auto;
1816
- min-height: 0;
1817
- }
1818
-
1819
- .modal-footer {
1820
- padding: 12px 24px;
1821
- border-top: 1px solid var(--border);
1822
- display: flex;
1823
- justify-content: flex-end;
1824
- gap: 12px;
1825
- background: rgba(248,249,250,0.65);
1826
- }
1827
-
1828
- .group-dropdown {
1829
- position: absolute;
1830
- top: calc(100% + 8px);
1831
- right: 0;
1832
- width: 420px;
1833
- max-height: 420px;
1834
- padding: 16px;
1835
- border-radius: 14px;
1836
- background: white;
1837
- border: 1px solid rgba(0,0,0,0.08);
1838
- box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
1839
- display: none;
1840
- flex-direction: column;
1841
- gap: 14px;
1842
- z-index: 1200;
1843
- }
1844
-
1845
- .group-dropdown.show {
1846
- display: flex;
1847
- }
1848
-
1849
- .group-dropdown-search input {
1850
- width: 100%;
1851
- padding: 10px 14px;
1852
- border: 1px solid var(--border);
1853
- border-radius: 8px;
1854
- font-size: 14px;
1855
- transition: all 0.2s ease;
1856
- }
1857
-
1858
- .group-dropdown-search input:focus {
1859
- outline: none;
1860
- border-color: var(--primary);
1861
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1862
- }
1863
-
1864
- .group-dropdown-body {
1865
- display: flex;
1866
- flex-direction: column;
1867
- gap: 10px;
1868
- min-height: 220px;
1869
- }
1870
-
1871
- .group-cascader {
1872
- display: flex;
1873
- gap: 12px;
1874
- }
1875
-
1876
- .group-cascader-column {
1877
- flex: 1;
1878
- min-width: 0;
1879
- display: flex;
1880
- flex-direction: column;
1881
- gap: 4px;
1882
- max-height: 260px;
1883
- overflow-y: auto;
1884
- padding-right: 4px;
1885
- border-right: 1px solid rgba(0,0,0,0.06);
1886
- }
1887
-
1888
- .group-cascader-column:last-child {
1889
- border-right: none;
1890
- }
1891
-
1892
- .group-cascader-title {
1893
- font-size: 12px;
1894
- color: var(--gray);
1895
- letter-spacing: 0;
1896
- padding: 0 6px;
1897
- }
1898
-
1899
- .group-cascader-list {
1900
- display: flex;
1901
- flex-direction: column;
1902
- gap: 2px;
1903
- }
1904
-
1905
- .group-cascader-empty {
1906
- padding: 6px 4px;
1907
- font-size: 12px;
1908
- color: var(--gray);
1909
- }
1910
-
1911
- .group-cascader-item {
1912
- border: none;
1913
- background: transparent;
1914
- text-align: left;
1915
- padding: 6px 8px;
1916
- border-radius: 8px;
1917
- font-size: 13px;
1918
- color: var(--dark);
1919
- cursor: pointer;
1920
- transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
1921
- position: relative;
1922
- }
1923
-
1924
- .group-cascader-item:hover {
1925
- background: rgba(0,0,0,0.05);
1926
- color: var(--primary);
1927
- padding-left: 12px;
1928
- }
1929
-
1930
- .group-cascader-item.active {
1931
- background: rgba(0,0,0,0.04);
1932
- color: var(--primary);
1933
- }
1934
-
1935
- .group-cascader-label {
1936
- display: inline-flex;
1937
- align-items: center;
1938
- gap: 6px;
1939
- }
1940
-
1941
- .group-cascader-path-hint {
1942
- font-size: 11px;
1943
- color: var(--gray);
1944
- letter-spacing: 0;
1945
- margin-left: 6px;
1946
- }
1947
-
1948
- .group-cascader-suffix {
1949
- margin-left: auto;
1950
- font-size: 12px;
1951
- color: var(--gray);
1952
- transition: color 0.18s ease;
1953
- display: inline-flex;
1954
- align-items: center;
1955
- }
1956
-
1957
- .group-cascader-item:hover .group-cascader-suffix,
1958
- .group-cascader-item.active .group-cascader-suffix,
1959
- .group-cascader-item.selected .group-cascader-suffix {
1960
- color: var(--primary);
1961
- }
1962
-
1963
- .group-cascader-check {
1964
- margin-left: auto;
1965
- font-size: 12px;
1966
- color: var(--primary);
1967
- display: inline-flex;
1968
- align-items: center;
1969
- }
1970
-
1971
- .group-search-results {
1972
- display: none;
1973
- flex-direction: column;
1974
- gap: 6px;
1975
- max-height: 280px;
1976
- overflow-y: auto;
1977
- padding-right: 4px;
1978
- }
1979
-
1980
- .group-search-results.show {
1981
- display: flex;
1982
- }
1983
-
1984
- .group-search-item {
1985
- border: 1px solid rgba(0,0,0,0.06);
1986
- border-radius: 10px;
1987
- padding: 8px 10px;
1988
- display: flex;
1989
- flex-direction: column;
1990
- gap: 4px;
1991
- cursor: pointer;
1992
- transition: all 0.2s ease;
1993
- background: white;
1994
- text-align: left;
1995
- font-size: 13px;
1996
- color: var(--dark);
1997
- }
1998
-
1999
- .group-search-item:hover {
2000
- border-color: var(--primary);
2001
- box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
2002
- transform: translateY(-1px);
2003
- }
2004
-
2005
- .group-search-item.selected {
2006
- border-color: var(--primary);
2007
- box-shadow: inset 0 0 0 1px var(--primary);
2008
- }
2009
-
2010
- .group-search-path {
2011
- font-size: 12px;
2012
- color: var(--gray);
2013
- letter-spacing: 0;
2014
- }
2015
-
2016
- .group-dropdown-empty {
2017
- padding: 18px 12px;
2018
- border-radius: 10px;
2019
- text-align: center;
2020
- background: rgba(0,0,0,0.03);
2021
- color: var(--gray);
2022
- font-size: 13px;
2023
- }
2024
-
2025
- .group-dropdown-empty.hidden {
2026
- display: none;
2027
- }
2028
-
2029
- .form-group {
2030
- margin-bottom: 0;
2031
- }
2032
-
2033
- .form-group label {
2034
- display: block;
2035
- margin-bottom: 8px;
2036
- font-size: 14px;
2037
- font-weight: 500;
2038
- color: var(--gray);
2039
- }
2040
-
2041
- .form-group input {
2042
- width: 100%;
2043
- padding: 12px 14px;
2044
- border: 1.5px solid var(--border);
2045
- border-radius: 10px;
2046
- font-size: 15px;
2047
- transition: all 0.2s ease;
2048
- background: white;
2049
- }
2050
-
2051
- .form-group input:focus {
2052
- outline: none;
2053
- border-color: var(--primary);
2054
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
2055
- }
2056
-
2057
- .form-group input::placeholder {
2058
- color: #adb5bd;
2059
- opacity: 0.8;
2060
- }
2061
-
2062
- .argument-modal {
2063
- position: fixed;
2064
- inset: 0;
2065
- background: rgba(17, 17, 17, 0.4);
2066
- display: flex;
2067
- align-items: center;
2068
- justify-content: center;
2069
- z-index: 1200;
2070
- padding: 24px;
2071
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2072
- backdrop-filter: blur(4px);
2073
- }
2074
-
2075
- .argument-modal.hidden {
2076
- opacity: 0;
2077
- pointer-events: none;
2078
- }
2079
-
2080
- .argument-modal.hidden .argument-modal-dialog {
2081
- transform: scale(0.95) translateY(10px);
2082
- }
2083
-
2084
- .argument-modal-dialog {
2085
- width: min(520px, 100%);
2086
- background: white;
2087
- border-radius: 16px;
2088
- box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
2089
- display: flex;
2090
- flex-direction: column;
2091
- overflow: hidden;
2092
- border: 1px solid rgba(0,0,0,0.08);
2093
- transform: scale(1) translateY(0);
2094
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2095
- }
2096
-
2097
- .argument-modal-header {
2098
- display: flex;
2099
- justify-content: space-between;
2100
- align-items: center;
2101
- padding: 20px 24px;
2102
- border-bottom: 1px solid var(--border);
2103
- background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.95));
2104
- }
2105
-
2106
- .argument-modal-header h3 {
2107
- font-size: 18px;
2108
- font-weight: 580;
2109
- color: var(--dark);
2110
- letter-spacing: -0.01em;
2111
- margin: 0;
2112
- }
2113
-
2114
- .argument-modal-close {
2115
- width: 32px;
2116
- height: 32px;
2117
- border: none;
2118
- background: transparent;
2119
- border-radius: 8px;
2120
- color: var(--gray);
2121
- cursor: pointer;
2122
- display: flex;
2123
- align-items: center;
2124
- justify-content: center;
2125
- transition: all 0.2s ease;
2126
- padding: 0;
2127
- }
2128
-
2129
- .argument-modal-close:hover {
2130
- background: rgba(0,0,0,0.04);
2131
- color: var(--dark);
2132
- }
2133
-
2134
- .argument-modal-body {
2135
- padding: 24px;
2136
- }
2137
-
2138
- .argument-form-grid {
2139
- display: grid;
2140
- grid-template-columns: repeat(2, minmax(0, 1fr));
2141
- gap: 20px;
2142
- }
2143
-
2144
- .form-field {
2145
- display: flex;
2146
- flex-direction: column;
2147
- }
2148
-
2149
- .form-field.full-width {
2150
- grid-column: 1 / -1;
2151
- }
2152
-
2153
- .form-field-inline {
2154
- align-self: end;
2155
- height: 100%;
2156
- display: flex;
2157
- align-items: flex-end;
2158
- padding-top: 26px;
2159
- }
2160
-
2161
- .argument-modal label {
2162
- font-size: 13px;
2163
- color: var(--dark);
2164
- font-weight: 500;
2165
- letter-spacing: 0.01em;
2166
- margin-bottom: 6px;
2167
- }
2168
-
2169
- .argument-modal .required {
2170
- color: var(--danger);
2171
- font-weight: 600;
2172
- font-size: 12px;
2173
- }
2174
-
2175
- /* 统一表单字段样式 */
2176
- .argument-modal .form-field input,
2177
- .argument-modal .form-field textarea {
2178
- width: 100%;
2179
- padding: 10px 12px;
2180
- border: 1px solid var(--border);
2181
- border-radius: 8px;
2182
- font-size: 14px;
2183
- transition: all 0.2s ease;
2184
- background: white;
2185
- box-shadow: 0 1px 2px rgba(0,0,0,0.02);
2186
- color: var(--dark);
2187
- }
2188
-
2189
- .argument-modal .form-field input:focus,
2190
- .argument-modal .form-field textarea:focus {
2191
- outline: none;
2192
- border-color: var(--primary);
2193
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1), 0 1px 2px rgba(0,0,0,0.05);
2194
- background: white;
2195
- }
2196
-
2197
- .argument-modal .form-field input::placeholder,
2198
- .argument-modal .form-field textarea::placeholder {
2199
- color: #a0aec0;
2200
- opacity: 0.8;
2201
- }
2202
-
2203
- /* 必填字段的特殊样式 */
2204
- .argument-modal .form-field.required-field input,
2205
- .argument-modal .form-field.required-field textarea {
2206
- border: 1px solid #cbd5e0;
2207
- background: #fafafa;
2208
- }
2209
-
2210
- .argument-modal .form-field.required-field input:focus,
2211
- .argument-modal .form-field.required-field textarea:focus {
2212
- border-color: var(--primary);
2213
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1), 0 1px 2px rgba(0,0,0,0.05);
2214
- background: white;
2215
- }
2216
-
2217
- .argument-modal textarea {
2218
- resize: vertical;
2219
- min-height: 100px;
2220
- line-height: 1.5;
2221
- }
2222
-
2223
- /* 现代化复选框样式 */
2224
- .checkbox-field {
2225
- display: inline-flex;
2226
- align-items: center;
2227
- gap: 8px;
2228
- font-size: 13px;
2229
- color: var(--dark);
2230
- cursor: pointer;
2231
- padding: 6px 0;
2232
- border: none;
2233
- border-radius: 0;
2234
- }
2235
-
2236
- .checkbox-field:hover {
2237
- /* background-color: rgba(0,0,0,0.03); */
2238
- }
2239
-
2240
- .checkbox-field input[type="checkbox"] {
2241
- position: relative;
2242
- width: 18px;
2243
- height: 18px;
2244
- appearance: none;
2245
- background: white;
2246
- border: 1px solid #cbd5e0;
2247
- border-radius: 4px;
2248
- cursor: pointer;
2249
- padding: 10px 10px;
2250
- transition: all 0.2s ease;
2251
- box-shadow: 0 1px 2px rgba(0,0,0,0.03);
2252
- }
2253
-
2254
- .checkbox-field input[type="checkbox"]:checked {
2255
- background: var(--primary);
2256
- border-color: var(--primary);
2257
- }
2258
-
2259
- .checkbox-field input[type="checkbox"]:checked::before {
2260
- content: '';
2261
- position: absolute;
2262
- left: 50%;
2263
- top: 50%;
2264
- width: 4px;
2265
- height: 8px;
2266
- border: solid white;
2267
- border-width: 0 2px 2px 0;
2268
- transform: translate(-50%, -50%) rotate(45deg);
2269
- }
2270
-
2271
- .checkbox-field input[type="checkbox"]:focus {
2272
- outline: none;
2273
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1), 0 1px 2px rgba(0,0,0,0.05);
2274
- }
2275
-
2276
- .form-control {
2277
- width: 100%;
2278
- padding: 12px 14px;
2279
- border: 1.5px solid var(--border);
2280
- border-radius: 10px;
2281
- font-size: 15px;
2282
- transition: all 0.2s ease;
2283
- background: white;
2284
- }
2285
-
2286
- .form-control:focus {
2287
- outline: none;
2288
- border-color: var(--primary);
2289
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
2290
- }
2291
-
2292
- .form-control::placeholder {
2293
- color: #adb5bd;
2294
- opacity: 0.8;
2295
- }
2296
-
2297
- .argument-modal-footer {
2298
- display: flex;
2299
- justify-content: flex-end;
2300
- gap: 12px;
2301
- padding: 16px 24px;
2302
- border-top: 1px solid var(--border);
2303
- background: rgba(248,249,250,0.65);
2304
- }
2305
-
2306
- body.modal-open {
2307
- overflow: hidden;
2308
- }
2309
-
2310
- .editor-body {
2311
- box-sizing: border-box;
2312
- }
2313
-
2314
- .workspace-pane {
2315
- display: flex;
2316
- flex-direction: column;
2317
- background: white;
2318
- transition: opacity 0.25s ease;
2319
- border-radius: 12px;
2320
- overflow: hidden;
2321
- border: 1px solid var(--border);
2322
- box-shadow: 0 8px 24px rgba(0,0,0,0.05);
2323
- }
2324
-
2325
- .workspace-pane.hidden {
2326
- opacity: 0;
2327
- visibility: hidden;
2328
- pointer-events: none;
2329
- display: none;
2330
- }
2331
-
2332
- .pane-header {
2333
- padding: 10px 24px;
2334
- border-bottom: 1px solid var(--border);
2335
- background: white;
2336
- font-size: 14px;
2337
- font-weight: 600;
2338
- color: var(--gray);
2339
- }
2340
-
2341
- .pane-content {
2342
- display: flex;
2343
- flex-direction: column;
2344
- padding: 0;
2345
- }
2346
-
2347
- .pane-content.preview {
2348
- background: var(--preview-bg);
2349
- padding: 24px;
2350
- }
2351
-
2352
- /* 原始textarea样式 */
2353
- #editor {
2354
- width: 100%;
2355
- height: 100%;
2356
- min-height: 200px;
2357
- border: none;
2358
- outline: none;
2359
- font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2360
- font-size: 14px;
2361
- line-height: 1.5;
2362
- padding: 8px 12px;
2363
- resize: none;
2364
- flex: 1;
2365
- }
2366
-
2367
- /* CodeMirror 5 编辑器样式 */
2368
- .CodeMirror {
2369
- height: auto;
2370
- /* min-height: 200px; */
2371
- min-height: calc(100vh - 372px);
2372
- font-size: 14px;
2373
- line-height: 1.5;
2374
- color: #000;
2375
- background: #fff;
2376
- border-radius: 4px;
2377
- padding: 4px;
2378
- }
2379
-
2380
- .CodeMirror-scroll {
2381
- height: auto;
2382
- overflow-y: hidden;
2383
- overflow-x: auto;
2384
- }
2385
-
2386
- .cm-scroller {
2387
- font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2388
- height: 100%;
2389
- overflow: auto;
2390
- }
2391
-
2392
- .cm-content {
2393
- padding: 8px 12px;
2394
- height: 100%;
2395
- }
2396
-
2397
- .cm-gutters {
2398
- display: none;
2399
- }
2400
-
2401
- .cm-line {
2402
- padding: 0 4px;
2403
- height: 1.5em;
2404
- }
2405
-
2406
- .preview-content {
2407
- flex: 1;
2408
- padding: 24px;
2409
- overflow: auto;
2410
- background: white;
2411
- border-radius: 12px;
2412
- }
2413
-
2414
- /* 预览模式下的 CodeMirror 样式调整 */
2415
- .preview-content .CodeMirror {
2416
- height: auto;
2417
- background: transparent;
2418
- border: none;
2419
- padding: 0;
2420
- font-size: 14px;
2421
- }
2422
-
2423
- .preview-content .CodeMirror-scroll {
2424
- overflow: hidden !important;
2425
- }
2426
-
2427
- .preview-content .CodeMirror-gutters {
2428
- display: none;
2429
- }
2430
-
2431
- .preview-content .CodeMirror-cursor {
2432
- display: none !important;
2433
- }
2434
-
2435
- @media (max-width: 1100px) {
2436
- .arguments-list {
2437
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
2438
- }
2439
- }
2440
-
2441
- .empty-state {
2442
- text-align: center;
2443
- padding: 40px 20px;
2444
- color: var(--gray);
2445
- }
2446
-
2447
- .empty-state h3 {
2448
- margin-bottom: 8px;
2449
- font-weight: 500;
2450
- }
2451
-
2452
- .empty-state p {
2453
- font-size: 14px;
2454
- margin-bottom: 16px;
2455
- }
2456
-
2457
- .login-container {
2458
- position: fixed;
2459
- top: 0;
2460
- left: 0;
2461
- right: 0;
2462
- bottom: 0;
2463
- background: linear-gradient(135deg,
2464
- rgba(255,255,255,0.92),
2465
- rgba(248,249,250,0.95),
2466
- rgba(255,255,255,0.98)
2467
- );
2468
- display: flex;
2469
- align-items: center;
2470
- justify-content: center;
2471
- z-index: 1000;
2472
- backdrop-filter: blur(12px);
2473
- }
2474
-
2475
- .login-box {
2476
- width: 400px;
2477
- background: white;
2478
- border-radius: 20px;
2479
- box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
2480
- padding: 48px 40px;
2481
- text-align: center;
2482
- border: 1px solid rgba(0,0,0,0.06);
2483
- position: relative;
2484
- animation: login-box-show 0.5s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
2485
- backdrop-filter: blur(10px);
2486
- background: linear-gradient(180deg,
2487
- rgba(255, 255, 255, 0.98) 0%,
2488
- rgba(255, 255, 255, 0.96) 100%
2489
- );
2490
- }
2491
-
2492
- @keyframes login-box-show {
2493
- 0% {
2494
- opacity: 0;
2495
- transform: translateY(20px);
2496
- }
2497
- 100% {
2498
- opacity: 1;
2499
- transform: translateY(0);
2500
- }
2501
- }
2502
-
2503
- .login-box h2 {
2504
- font-size: 28px;
2505
- font-weight: 600;
2506
- color: var(--primary);
2507
- margin-bottom: 36px;
2508
- position: relative;
2509
- display: inline-block;
2510
- }
2511
-
2512
- .login-box h2::after {
2513
- content: '';
2514
- position: absolute;
2515
- bottom: -12px;
2516
- left: 50%;
2517
- transform: translateX(-50%);
2518
- width: 45px;
2519
- height: 4px;
2520
- background: linear-gradient(to right, var(--primary), var(--primary-dark));
2521
- border-radius: 4px;
2522
- opacity: 0.8;
2523
- }
2524
-
2525
- .login-box .input-group {
2526
- position: relative;
2527
- margin-bottom: 24px;
2528
- width: 100%;
2529
- }
2530
-
2531
- .login-box .input-group::before {
2532
- content: '';
2533
- position: absolute;
2534
- left: 16px;
2535
- top: 50%;
2536
- transform: translateY(-50%);
2537
- width: 16px;
2538
- height: 16px;
2539
- opacity: 0.5;
2540
- transition: opacity 0.2s ease;
2541
- background-size: contain;
2542
- background-repeat: no-repeat;
2543
- }
2544
-
2545
- .login-box .input-group.username::before {
2546
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
2547
- }
2548
-
2549
- .login-box .input-group.password::before {
2550
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
2551
- }
2552
-
2553
- .login-box .input-group:focus-within::before {
2554
- opacity: 1;
2555
- }
2556
-
2557
- .login-box input {
2558
- width: 100%;
2559
- padding: 14px 15px 14px 48px;
2560
- border: 1.5px solid var(--border);
2561
- border-radius: 12px;
2562
- font-size: 16px;
2563
- font-weight: 450;
2564
- letter-spacing: -0.01em;
2565
- transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
2566
- background: rgba(255, 255, 255, 0.9);
2567
- box-shadow: 0 2px 6px rgba(0,0,0,0.02);
2568
- }
2569
-
2570
- .login-box input:focus {
2571
- outline: none;
2572
- border-color: var(--primary);
2573
- border-width: 1.5px;
2574
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08), 0 2px 8px rgba(0,0,0,0.04);
2575
- background: white;
2576
- }
2577
-
2578
- .login-box input::placeholder {
2579
- color: #adb5bd;
2580
- font-size: 15px;
2581
- font-weight: 450;
2582
- letter-spacing: -0.01em;
2583
- opacity: 0.85;
2584
- }
2585
-
2586
- .login-box button {
2587
- width: 100%;
2588
- padding: 16px 132px;
2589
- margin-top: 32px;
2590
- border: none;
2591
- border-radius: 12px;
2592
- font-size: 16px;
2593
- font-weight: 520;
2594
- background: var(--primary);
2595
- color: white;
2596
- cursor: pointer;
2597
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2598
- position: relative;
2599
- overflow: hidden;
2600
- letter-spacing: 0.02em;
2601
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
2602
- }
2603
-
2604
- .login-box button::before {
2605
- content: '';
2606
- position: absolute;
2607
- top: 0;
2608
- left: 0;
2609
- right: 0;
2610
- bottom: 0;
2611
- background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
2612
- transform: translateX(-100%);
2613
- transition: transform 0.8s ease;
2614
- }
2615
-
2616
- .login-box button:hover {
2617
- background: var(--primary-dark);
2618
- transform: translateY(-2px);
2619
- box-shadow: 0 8px 16px rgba(0,0,0,0.12);
2620
- }
2621
-
2622
- .login-box button:active {
2623
- transform: translateY(0);
2624
- box-shadow: 0 3px 8px rgba(0,0,0,0.08);
2625
- background: var(--primary);
2626
- }
2627
-
2628
- .login-box button:hover::before {
2629
- transform: translateX(100%);
2630
- }
2631
-
2632
- .error-msg {
2633
- color: var(--danger);
2634
- font-size: 13px;
2635
- margin-top: 12px;
2636
- text-align: center;
2637
- opacity: 0;
2638
- transform: translateY(-10px);
2639
- animation: error-show 0.3s ease forwards;
2640
- display: flex;
2641
- align-items: center;
2642
- justify-content: center;
2643
- gap: 6px;
2644
- }
2645
-
2646
- .error-msg::before {
2647
- content: '';
2648
- width: 16px;
2649
- height: 16px;
2650
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center;
2651
- background-size: contain;
2652
- }
2653
-
2654
- @keyframes error-show {
2655
- to {
2656
- opacity: 1;
2657
- transform: translateY(0);
2658
- }
2659
- }
2660
-
2661
- .success-msg {
2662
- color: var(--success);
2663
- font-size: 13px;
2664
- margin-top: 12px;
2665
- text-align: center;
2666
- display: flex;
2667
- align-items: center;
2668
- justify-content: center;
2669
- gap: 6px;
2670
- }
2671
-
2672
- .success-msg::before {
2673
- content: '';
2674
- width: 16px;
2675
- height: 16px;
2676
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") no-repeat center;
2677
- background-size: contain;
2678
- }
2679
-
2680
- .loading {
2681
- opacity: 0.6;
2682
- pointer-events: none;
2683
- }
2684
-
2685
- .status-badge {
2686
- display: inline-flex;
2687
- align-items: center;
2688
- gap: 4px;
2689
- padding: 4px 8px;
2690
- border-radius: 12px;
2691
- font-size: 12px;
2692
- font-weight: 500;
2693
- }
2694
-
2695
- .status-badge.enabled {
2696
- background: rgba(40,167,69,0.1);
2697
- color: var(--success);
2698
- }
2699
-
2700
- .status-badge.disabled {
2701
- background: rgba(220,53,69,0.1);
2702
- color: var(--danger);
2703
- }
2704
-
2705
- /* 加载中效果 */
2706
- .loading-overlay {
2707
- position: fixed;
2708
- top: 0;
2709
- left: 0;
2710
- width: 100%;
2711
- height: 100%;
2712
- background: rgba(255, 255, 255, 0.92);
2713
- display: flex;
2714
- flex-direction: column;
2715
- align-items: center;
2716
- justify-content: center;
2717
- z-index: 9999;
2718
- backdrop-filter: blur(1px);
2719
- }
2720
-
2721
- .loading-overlay.hidden {
2722
- display: none;
2723
- }
2724
-
2725
- .loading-spinner {
2726
- width: 50px;
2727
- height: 50px;
2728
- border: 4px solid rgba(57, 57, 57, 0.08);
2729
- border-top: 4px solid rgba(57, 57, 57, 0.4);
2730
- border-radius: 50%;
2731
- animation: spin 1s linear infinite;
2732
- margin-bottom: 20px;
2733
- }
2734
-
2735
- .loading-text {
2736
- font-size: 16px;
2737
- color: rgba(26, 26, 26, 0.7);
2738
- font-weight: 500;
2739
- text-align: center;
2740
- }
2741
-
2742
- .loading-subtext {
2743
- font-size: 13px;
2744
- color: rgba(108, 117, 125, 0.7);
2745
- margin-top: 8px;
2746
- text-align: center;
2747
- }
2748
-
2749
- @keyframes spin {
2750
- 0% { transform: rotate(0deg); }
2751
- 100% { transform: rotate(360deg); }
2752
- }
2753
-
2754
- .custom-blank-content {
2755
- display: flex;
2756
- flex-direction: column;
2757
- width: min(1280px, 100%);
2758
- margin: 0 auto 16px auto;
2759
- padding: 24px;
2760
- background: #ffffff;
2761
- border-radius: 8px;
2762
- box-shadow: 4px 4px 4px #ccc;
2763
- min-height: 400px;
2764
- }
2765
-
2766
- .blank-placeholder {
2767
- flex: 1;
2768
- display: flex;
2769
- align-items: center;
2770
- justify-content: center;
2771
- padding: 40px 20px;
2772
- }
2773
-
2774
- .blank-placeholder-body {
2775
- text-align: center;
2776
- color: var(--gray);
2777
- }
2778
-
2779
- .blank-placeholder-emoji {
2780
- font-size: 48px;
2781
- margin-bottom: 16px;
2782
- }
2783
-
2784
- .blank-placeholder-text {
2785
- font-size: 14px;
2786
- line-height: 1.6;
2787
- color: var(--gray);
2788
- }
2789
-
2790
- #promptEditorArea {
2791
- display: none;
2792
- flex-direction: column;
2793
- width: min(1280px, 100%);
2794
- margin: 0 auto 16px auto;
2795
- padding: 8px 15px 16px 15px;
2796
- background: #ffffff;
2797
- border-radius: 8px;
2798
- box-shadow: 4px 4px 4px #ccc;
2799
- }
2800
-
2801
- /* 工具区域样式 */
2802
- .tools-area {
2803
- flex: 1;
2804
- display: flex;
2805
- flex-direction: column;
2806
- background: white;
2807
- border-left: 1px solid var(--border);
2808
- overflow: hidden;
2809
- }
2810
-
2811
- /* 工具页面头部 */
2812
- .tools-header {
2813
- display: flex;
2814
- justify-content: space-between;
2815
- align-items: center;
2816
- padding: 18px 32px;
2817
- border-bottom: 1px solid var(--border);
2818
- background: #fafafa;
2819
- }
2820
-
2821
- .tools-header-left {
2822
- display: flex;
2823
- align-items: center;
2824
- gap: 24px;
2825
- }
2826
-
2827
- .tools-title {
2828
- font-size: 24px;
2829
- font-weight: 600;
2830
- color: var(--dark);
2831
- margin: 0;
2832
- }
2833
-
2834
- .skills-search,
2835
- .tools-search {
2836
- width: 320px;
2837
- }
2838
-
2839
- .skills-search .search-box,
2840
- .tools-search .search-box {
2841
- position: relative;
2842
- }
2843
-
2844
- .skills-search .search-box input,
2845
- .tools-search .search-box input {
2846
- width: 100%;
2847
- padding: 10px 36px 10px 40px;
2848
- border: 1px solid var(--border);
2849
- border-radius: 10px;
2850
- font-size: 14px;
2851
- background: var(--light);
2852
- transition: all 0.25s ease;
2853
- }
2854
-
2855
- .skills-search .search-box input:focus,
2856
- .tools-search .search-box input:focus {
2857
- outline: none;
2858
- border-color: #6366f1;
2859
- background: var(--white);
2860
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
2861
- }
2862
-
2863
- .skills-search .search-box::before,
2864
- .tools-search .search-box::before {
2865
- content: '';
2866
- position: absolute;
2867
- left: 14px;
2868
- top: 50%;
2869
- transform: translateY(-50%);
2870
- width: 16px;
2871
- height: 16px;
2872
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
2873
- background-size: contain;
2874
- opacity: 0.6;
2875
- }
2876
-
2877
- .search-clear-btn {
2878
- position: absolute;
2879
- right: 8px;
2880
- top: 50%;
2881
- transform: translateY(-50%);
2882
- width: 24px;
2883
- height: 24px;
2884
- border: none;
2885
- background: transparent;
2886
- cursor: pointer;
2887
- display: none;
2888
- align-items: center;
2889
- justify-content: center;
2890
- color: var(--gray);
2891
- border-radius: 6px;
2892
- transition: all 0.15s ease;
2893
- }
2894
-
2895
- .search-clear-btn:hover {
2896
- background: rgba(0, 0, 0, 0.05);
2897
- color: var(--dark);
2898
- }
2899
-
2900
- .skills-search .search-box input:not(:placeholder-shown) + .search-clear-btn,
2901
- .tools-search .search-box input:not(:placeholder-shown) + .search-clear-btn {
2902
- display: flex;
2903
- }
2904
-
2905
- .tools-header-right {
2906
- display: flex;
2907
- align-items: center;
2908
- gap: 20px;
2909
- }
2910
-
2911
- .tools-filter {
2912
- display: flex;
2913
- gap: 2px;
2914
- background: var(--light);
2915
- padding: 3px;
2916
- border-radius: 10px;
2917
- }
2918
-
2919
- .filter-btn {
2920
- padding: 8px 16px;
2921
- border: none;
2922
- background: transparent;
2923
- color: var(--gray);
2924
- font-size: 14px;
2925
- border-radius: 7px;
2926
- cursor: pointer;
2927
- transition: all 0.2s ease;
2928
- font-weight: 500;
2929
- white-space: nowrap;
2930
- }
2931
-
2932
- .filter-btn:hover {
2933
- background: white;
2934
- color: var(--dark);
2935
- }
2936
-
2937
- .filter-btn.active {
2938
- background: white;
2939
- color: var(--primary);
2940
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2941
- }
2942
-
2943
- /* 工具内容区域 */
2944
- .tools-content {
2945
- flex: 1;
2946
- overflow-y: auto;
2947
- /* padding: 32px; */
2948
- min-height: 0;
2949
- }
2950
-
2951
- /* 工具网格 */
2952
- .tools-grid {
2953
- display: grid;
2954
- grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
2955
- gap: 24px;
2956
- animation: fadeIn 0.3s ease;
2957
- margin: 24px;
2958
- }
2959
-
2960
- /* 工具卡片 */
2961
- .tool-card {
2962
- background: white;
2963
- border: 1px solid var(--border);
2964
- border-radius: 12px;
2965
- padding: 24px;
2966
- transition: all 0.3s ease;
2967
- cursor: pointer;
2968
- position: relative;
2969
- overflow: hidden;
2970
- height: 100%;
2971
- display: flex;
2972
- flex-direction: column;
2973
- }
2974
-
2975
- .tool-card::before {
2976
- content: '';
2977
- position: absolute;
2978
- top: 0;
2979
- left: 0;
2980
- right: 0;
2981
- height: 4px;
2982
- /* background: linear-gradient(90deg, var(--primary), #6366f1); */
2983
- background: var(--primary);
2984
- opacity: 0;
2985
- transition: opacity 0.3s ease;
2986
- }
2987
-
2988
- .tool-card:hover {
2989
- transform: translateY(-4px);
2990
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
2991
- border-color: var(--primary);
2992
- }
2993
-
2994
- .tool-card:hover::before {
2995
- opacity: 1;
2996
- }
2997
-
2998
- .tool-card-header {
2999
- display: flex;
3000
- justify-content: space-between;
3001
- align-items: flex-start;
3002
- margin-bottom: 16px;
3003
- }
3004
-
3005
- .tool-card-title {
3006
- font-size: 18px;
3007
- font-weight: 600;
3008
- color: var(--dark);
3009
- margin: 0;
3010
- display: flex;
3011
- align-items: center;
3012
- gap: 10px;
3013
- line-height: 1.3;
3014
- flex: 1;
3015
- }
3016
-
3017
- .tool-card-icon {
3018
- width: 28px;
3019
- height: 28px;
3020
- background: linear-gradient(135deg, var(--primary), #6366f1);
3021
- border-radius: 8px;
3022
- display: flex;
3023
- align-items: center;
3024
- justify-content: center;
3025
- color: white;
3026
- font-size: 14px;
3027
- font-weight: 600;
3028
- flex-shrink: 0;
3029
- }
3030
-
3031
- .tool-card-version {
3032
- font-size: 12px;
3033
- color: var(--gray);
3034
- background: var(--light);
3035
- padding: 4px 10px;
3036
- border-radius: 6px;
3037
- font-weight: 500;
3038
- flex-shrink: 0;
3039
- }
3040
-
3041
- .tool-card-description {
3042
- color: var(--gray);
3043
- font-size: 14px;
3044
- line-height: 1.6;
3045
- /* margin-bottom: 20px; */
3046
- display: -webkit-box;
3047
- -webkit-line-clamp: 2;
3048
- line-clamp: 2;
3049
- -webkit-box-orient: vertical;
3050
- overflow: hidden;
3051
- text-overflow: ellipsis;
3052
- max-height: calc(1.6em * 2); /* 2行高度:line-height * 行数 */
3053
- flex-grow: 1;
3054
- word-break: break-word;
3055
- }
3056
-
3057
- .tool-card-meta {
3058
- display: flex;
3059
- flex-wrap: wrap;
3060
- gap: 8px;
3061
- margin-bottom: 20px;
3062
- }
3063
-
3064
- .tool-card-category-row {
3065
- margin-bottom: 12px;
3066
- padding-bottom: 12px;
3067
- border-bottom: 1px solid #f0f0f0;
3068
- }
3069
-
3070
- .tool-card-category {
3071
- font-size: 14px;
3072
- font-weight: 600;
3073
- color: #2d3748;
3074
- display: inline-block;
3075
- padding: 6px 0;
3076
- position: relative;
3077
- }
3078
-
3079
- .tool-card-category::before {
3080
- content: '';
3081
- position: absolute;
3082
- left: -12px;
3083
- top: 50%;
3084
- transform: translateY(-50%);
3085
- width: 4px;
3086
- height: 16px;
3087
- background: #4299e1;
3088
- border-radius: 2px;
3089
- }
3090
-
3091
- .tool-card-description-wrapper {
3092
- margin-bottom: 10px;
3093
- padding-bottom: 10px;
3094
- border-bottom: 1px dashed var(--gray-light);
3095
- }
3096
-
3097
- .tool-card-category-badge {
3098
- display: inline-block;
3099
- font-size: 12px;
3100
- font-weight: 600;
3101
- color: #838282;
3102
- background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
3103
- /* border: 1px solid #90caf9; */
3104
- border-radius: 4px;
3105
- padding: 1px 6px;
3106
- margin-right: 6px;
3107
- vertical-align: baseline;
3108
- box-shadow: 0 1px 2px rgba(66, 153, 225, 0.1);
3109
- transition: all 0.2s ease;
3110
- }
3111
-
3112
- .tool-card-category-badge:hover {
3113
- background: linear-gradient(135deg, #bbdefb 0%, #e3f2fd 100%);
3114
- border-color: #64b5f6;
3115
- box-shadow: 0 2px 4px rgba(66, 153, 225, 0.15);
3116
- }
3117
-
3118
- .tool-card-tags-row {
3119
- position: relative;
3120
- height: 32px;
3121
- margin-bottom: 8px;
3122
- overflow-y: auto;
3123
- }
3124
-
3125
- .tool-card-tags-container {
3126
- display: flex;
3127
- flex-wrap: wrap;
3128
- gap: 8px;
3129
- line-height: 1.2;
3130
- max-height: 64px;
3131
- overflow-y: auto;
3132
- }
3133
-
3134
- .tool-card-tags-row.expanded .tool-card-tags-container {
3135
- max-height: 200px;
3136
- }
3137
-
3138
- .tool-card-tag {
3139
- font-size: 12px;
3140
- color: #718096;
3141
- background: #f7fafc;
3142
- border: 1px solid #e2e8f0;
3143
- padding: 4px 8px;
3144
- border-radius: 4px;
3145
- font-weight: 400;
3146
- transition: all 0.2s ease;
3147
- position: relative;
3148
- }
3149
-
3150
- .tool-card-tag:hover {
3151
- background: #edf2f7;
3152
- border-color: #cbd5e0;
3153
- color: #4a5568;
3154
- }
3155
-
3156
- /* 展开按钮 */
3157
- .tool-card-footer {
3158
- display: flex;
3159
- justify-content: space-between;
3160
- align-items: center;
3161
- padding-top: 16px;
3162
- border-top: 1px solid var(--gray-light);
3163
- margin-top: auto;
3164
- }
3165
-
3166
- .tool-card-author {
3167
- font-size: 13px;
3168
- color: var(--gray);
3169
- display: flex;
3170
- align-items: center;
3171
- gap: 8px;
3172
- }
3173
-
3174
- .tool-card-author::before {
3175
- /* content: '👤'; */
3176
- font-size: 14px;
3177
- }
3178
-
3179
- .tool-card-actions {
3180
- display: flex;
3181
- gap: 8px;
3182
- }
3183
-
3184
- .tool-card-action {
3185
- padding: 6px 12px;
3186
- font-size: 12px;
3187
- border: 1px solid var(--border);
3188
- background: white;
3189
- color: var(--gray);
3190
- border-radius: 6px;
3191
- cursor: pointer;
3192
- transition: all 0.2s ease;
3193
- font-weight: 500;
3194
- }
3195
-
3196
- .tool-card-action:hover {
3197
- background: var(--primary);
3198
- color: white;
3199
- border-color: var(--primary);
3200
- }
3201
-
3202
- /* 工具卡片特殊字段 - Tab设计 */
3203
- .tool-card-meta {
3204
- /* margin-top: 16px; */
3205
- padding-top: 16px;
3206
- border-top: 1px dashed var(--gray-light);
3207
- }
3208
-
3209
- .tool-card-meta-tabs {
3210
- display: flex;
3211
- border-bottom: 1px solid var(--gray-light);
3212
- margin-bottom: 12px;
3213
- width: 100%;
3214
- }
3215
-
3216
- .tool-card-meta-tab {
3217
- padding: 6px 22px 6px 12px;
3218
- font-size: 11px;
3219
- font-weight: 500;
3220
- color: var(--gray);
3221
- background: none;
3222
- border: none;
3223
- border-bottom: 1px solid transparent;
3224
- cursor: pointer;
3225
- transition: all 0.2s ease;
3226
- text-transform: uppercase;
3227
- letter-spacing: 0.5px;
3228
- display: flex;
3229
- align-items: center;
3230
- gap: 4px;
3231
- /* flex: 1; */
3232
- justify-content: center;
3233
- }
3234
-
3235
- .tool-card-meta-tab:hover {
3236
- color: var(--dark);
3237
- background: rgba(57, 57, 57, 0.04);
3238
- border-radius: 4px 4px 0 0;
3239
- }
3240
-
3241
- .tool-card-meta-tab.active {
3242
- color: var(--primary);
3243
- border-bottom-color: var(--primary);
3244
- }
3245
-
3246
- .tool-card-meta-tab.scenarios-tab.active {
3247
- color: var(--dark);
3248
- border-bottom-color: var(--dark);
3249
- }
3250
-
3251
- .tool-card-meta-tab.limitations-tab.active {
3252
- color: var(--danger);
3253
- border-bottom-color: var(--danger);
3254
- }
3255
-
3256
- .tool-card-meta-content {
3257
- min-height: 40px;
3258
- max-height: 120px;
3259
- overflow-y: auto;
3260
- }
3261
-
3262
- .tool-card-meta-panel {
3263
- display: none;
3264
- }
3265
-
3266
- .tool-card-meta-panel.active {
3267
- display: block;
3268
- }
3269
-
3270
- .tool-card-meta-list {
3271
- display: flex;
3272
- flex-wrap: wrap;
3273
- gap: 4px;
3274
- }
3275
-
3276
- .tool-card-meta-item {
3277
- font-size: 11px;
3278
- padding: 2px 6px;
3279
- border-radius: 3px;
3280
- background: var(--light);
3281
- color: var(--gray);
3282
- border: 1px solid var(--gray-light);
3283
- transition: all 0.2s ease;
3284
- line-height: 1.3;
3285
- }
3286
-
3287
- .tool-card-meta-panel.scenarios .tool-card-meta-item {
3288
- background: rgba(57, 57, 57, 0.06);
3289
- color: var(--dark);
3290
- border-color: rgba(57, 57, 57, 0.12);
3291
- }
3292
-
3293
- .tool-card-meta-panel.scenarios .tool-card-meta-item:hover {
3294
- background: rgba(57, 57, 57, 0.1);
3295
- border-color: rgba(57, 57, 57, 0.2);
3296
- }
3297
-
3298
- .tool-card-meta-panel.limitations .tool-card-meta-item {
3299
- background: rgba(220, 53, 69, 0.06);
3300
- color: var(--danger);
3301
- border-color: rgba(220, 53, 69, 0.12);
3302
- }
3303
-
3304
- .tool-card-meta-panel.limitations .tool-card-meta-item:hover {
3305
- background: rgba(220, 53, 69, 0.1);
3306
- border-color: rgba(220, 53, 69, 0.2);
3307
- }
3308
-
3309
- /* 单个tab时的样式 */
3310
- .tool-card-meta-tabs.single-tab .tool-card-meta-tab {
3311
- border-bottom: 2px solid var(--primary);
3312
- color: var(--primary);
3313
- }
3314
-
3315
- .tool-card-meta-tabs.single-tab.scenarios-only .tool-card-meta-tab {
3316
- border-bottom-color: var(--dark);
3317
- color: var(--dark);
3318
- }
3319
-
3320
- .tool-card-meta-tabs.single-tab.limitations-only .tool-card-meta-tab {
3321
- border-bottom-color: var(--danger);
3322
- color: var(--danger);
3323
- }
3324
-
3325
- /* 聚合视图样式 */
3326
- .tools-aggregated-view {
3327
- animation: fadeIn 0.3s ease;
3328
- padding: 0 8px 0 0;
3329
- height: 100%;
3330
- overflow: hidden;
3331
- }
3332
-
3333
- .aggregated-view {
3334
- width: 100%;
3335
- height: 100%;
3336
- display: flex;
3337
- gap: 18px;
3338
- }
3339
-
3340
- .aggregated-sidebar {
3341
- width: 280px;
3342
- height: 100%;
3343
- flex-shrink: 0;
3344
- background: white;
3345
- border-right: 1px solid var(--border);
3346
- /* border-radius: 12px; */
3347
- overflow: hidden;
3348
- display: flex;
3349
- flex-direction: column;
3350
- }
3351
-
3352
- .aggregated-sidebar-header {
3353
- padding: 13px 25px;
3354
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
3355
- border-bottom: 1px solid var(--border);
3356
- flex-shrink: 0;
3357
- }
3358
-
3359
- .aggregated-sidebar-header h3 {
3360
- font-size: 16px;
3361
- font-weight: 600;
3362
- color: var(--dark);
3363
- margin: 0;
3364
- }
3365
-
3366
- .aggregated-sidebar-list {
3367
- flex: 1;
3368
- overflow-y: auto;
3369
- padding: 8px;
3370
- }
3371
-
3372
- .aggregated-content {
3373
- flex: 1;
3374
- height: 100%;
3375
- display: flex;
3376
- flex-direction: column;
3377
- min-width: 0;
3378
- overflow-y: auto;
3379
- padding: 11px 20px 0 0;
3380
- }
3381
-
3382
- .aggregated-content-header {
3383
- margin-bottom: 24px;
3384
- padding-bottom: 16px;
3385
- border-bottom: 2px solid var(--border);
3386
- flex-shrink: 0;
3387
- }
3388
-
3389
- .aggregated-content-header h3 {
3390
- font-size: 20px;
3391
- font-weight: 600;
3392
- color: var(--dark);
3393
- margin: 0;
3394
- }
3395
-
3396
- .aggregated-content-grid {
3397
- display: grid;
3398
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
3399
- gap: 20px;
3400
- padding-bottom: 32px;
3401
- }
3402
-
3403
- .aggregated-header {
3404
- margin-bottom: 32px;
3405
- padding-bottom: 16px;
3406
- border-bottom: 2px solid var(--border);
3407
- flex-shrink: 0;
3408
- }
3409
-
3410
- .aggregated-header h3 {
3411
- font-size: 22px;
3412
- font-weight: 600;
3413
- color: var(--dark);
3414
- margin: 0;
3415
- }
3416
-
3417
- /* 侧边栏列表项 */
3418
- .sidebar-item {
3419
- padding: 12px 16px;
3420
- margin-bottom: 4px;
3421
- border-radius: 8px;
3422
- cursor: pointer;
3423
- transition: all 0.2s ease;
3424
- display: flex;
3425
- align-items: center;
3426
- gap: 12px;
3427
- background: transparent;
3428
- }
3429
-
3430
- .sidebar-item:hover {
3431
- background: #f8f9fa;
3432
- }
3433
-
3434
- .sidebar-item.active {
3435
- background: linear-gradient(135deg, #f5f5f5 0%, #f0f7ff 100%);
3436
- border-left: 3px solid var(--primary);
3437
- padding-left: 13px;
3438
- }
3439
-
3440
- .sidebar-item-icon {
3441
- width: 36px;
3442
- height: 36px;
3443
- border-radius: 8px;
3444
- display: flex;
3445
- align-items: center;
3446
- justify-content: center;
3447
- font-size: 18px;
3448
- background: linear-gradient(135deg, #d6d6d6, #ffffff);
3449
- color: white;
3450
- flex-shrink: 0;
3451
- border: 1px solid #e0e0e0;
3452
- }
3453
-
3454
- .sidebar-item.active .sidebar-item-icon {
3455
- box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
3456
- }
3457
-
3458
- .sidebar-item-content {
3459
- flex: 1;
3460
- min-width: 0;
3461
- }
3462
-
3463
- .sidebar-item-name {
3464
- font-size: 14px;
3465
- font-weight: 600;
3466
- color: var(--dark);
3467
- margin-bottom: 2px;
3468
- white-space: nowrap;
3469
- overflow: hidden;
3470
- text-overflow: ellipsis;
3471
- display: flex;
3472
- align-items: center;
3473
- gap: 4px;
3474
- }
3475
-
3476
- .sidebar-item-name .featured-badge {
3477
- flex-shrink: 0;
3478
- font-size: 12px;
3479
- }
3480
-
3481
- .sidebar-item-count {
3482
- font-size: 12px;
3483
- color: var(--gray);
3484
- }
3485
-
3486
- .sidebar-item.active .sidebar-item-name {
3487
- color: var(--primary);
3488
- }
3489
-
3490
- /* 类别网格 */
3491
- .category-grid {
3492
- display: grid;
3493
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
3494
- gap: 20px;
3495
- }
3496
-
3497
- .category-card {
3498
- background: white;
3499
- border: 1px solid var(--border);
3500
- border-radius: 12px;
3501
- padding: 24px;
3502
- text-align: center;
3503
- cursor: pointer;
3504
- transition: all 0.3s ease;
3505
- height: 100%;
3506
- }
3507
-
3508
- .category-card:hover {
3509
- transform: translateY(-4px);
3510
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
3511
- border-color: var(--primary);
3512
- }
3513
-
3514
- .category-icon {
3515
- width: 56px;
3516
- height: 56px;
3517
- margin: 0 auto 16px;
3518
- background: linear-gradient(135deg, var(--primary), #6366f1);
3519
- border-radius: 16px;
3520
- display: flex;
3521
- align-items: center;
3522
- justify-content: center;
3523
- color: white;
3524
- font-size: 24px;
3525
- box-shadow: 0 4px 12px rgba(57, 57, 57, 0.2);
3526
- }
3527
-
3528
- .category-name {
3529
- font-size: 16px;
3530
- font-weight: 600;
3531
- color: var(--dark);
3532
- margin-bottom: 6px;
3533
- }
3534
-
3535
- .category-count {
3536
- font-size: 13px;
3537
- color: var(--gray);
3538
- }
3539
-
3540
- /* 标签视图特殊布局 */
3541
- #tagView.aggregated-view {
3542
- flex-direction: column;
3543
- overflow-y: auto;
3544
- padding: 0 20px 32px 20px;
3545
- }
3546
-
3547
- /* 标签云 */
3548
- .tag-cloud {
3549
- display: flex;
3550
- flex-wrap: wrap;
3551
- gap: 10px;
3552
- margin-bottom: 32px;
3553
- padding: 20px;
3554
- background: var(--light);
3555
- border-radius: 12px;
3556
- flex-shrink: 0;
3557
- }
3558
-
3559
- .tag-item {
3560
- padding: 8px 16px;
3561
- background: white;
3562
- border: 1px solid var(--border);
3563
- border-radius: 10px;
3564
- font-size: 14px;
3565
- color: var(--gray);
3566
- cursor: pointer;
3567
- transition: all 0.2s ease;
3568
- font-weight: 500;
3569
- }
3570
-
3571
- .tag-item:hover {
3572
- background: var(--primary);
3573
- color: white;
3574
- border-color: var(--primary);
3575
- transform: translateY(-1px);
3576
- }
3577
-
3578
- .tag-item.active {
3579
- background: var(--primary);
3580
- color: white;
3581
- border-color: var(--primary);
3582
- box-shadow: 0 2px 8px rgba(57, 57, 57, 0.2);
3583
- }
3584
-
3585
- .tag-tools-list {
3586
- display: grid;
3587
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
3588
- gap: 20px;
3589
- padding-bottom: 20px;
3590
- }
3591
-
3592
- /* 作者网格 */
3593
- .author-grid {
3594
- display: grid;
3595
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
3596
- gap: 24px;
3597
- }
3598
-
3599
- .author-card {
3600
- background: white;
3601
- border: 1px solid var(--border);
3602
- border-radius: 16px;
3603
- padding: 28px;
3604
- text-align: center;
3605
- cursor: pointer;
3606
- transition: all 0.3s ease;
3607
- height: 100%;
3608
- }
3609
-
3610
- .author-card:hover {
3611
- transform: translateY(-4px);
3612
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
3613
- border-color: var(--primary);
3614
- }
3615
-
3616
- .author-avatar {
3617
- width: 72px;
3618
- height: 72px;
3619
- margin: 0 auto 16px;
3620
- border-radius: 50%;
3621
- background: linear-gradient(135deg, var(--primary), #6366f1);
3622
- display: flex;
3623
- align-items: center;
3624
- justify-content: center;
3625
- color: white;
3626
- font-size: 28px;
3627
- font-weight: 600;
3628
- box-shadow: 0 4px 16px rgba(57, 57, 57, 0.2);
3629
- }
3630
-
3631
- .author-name {
3632
- font-size: 18px;
3633
- font-weight: 600;
3634
- color: var(--dark);
3635
- margin-bottom: 6px;
3636
- }
3637
-
3638
- .author-role {
3639
- font-size: 14px;
3640
- color: var(--gray);
3641
- margin-bottom: 12px;
3642
- font-weight: 500;
3643
- }
3644
-
3645
- .author-bio {
3646
- font-size: 13px;
3647
- color: var(--gray);
3648
- line-height: 1.5;
3649
- margin-bottom: 16px;
3650
- }
3651
-
3652
- .author-stats {
3653
- display: flex;
3654
- justify-content: center;
3655
- gap: 24px;
3656
- padding-top: 16px;
3657
- border-top: 1px solid var(--gray-light);
3658
- }
3659
-
3660
- .author-stat {
3661
- text-align: center;
3662
- }
3663
-
3664
- .author-stat-value {
3665
- font-size: 20px;
3666
- font-weight: 600;
3667
- color: var(--dark);
3668
- }
3669
-
3670
- .author-stat-label {
3671
- font-size: 12px;
3672
- color: var(--gray);
3673
- margin-top: 2px;
3674
- }
3675
-
3676
- /* 上传弹窗样式 */
3677
- .upload-area {
3678
- border: 2px dashed var(--border);
3679
- border-radius: 12px;
3680
- padding: 40px;
3681
- text-align: center;
3682
- transition: all 0.3s ease;
3683
- margin-bottom: 24px;
3684
- background: rgba(248, 249, 250, 0.5);
3685
- }
3686
-
3687
- .upload-area.dragover {
3688
- border-color: var(--primary);
3689
- background: rgba(57, 57, 57, 0.05);
3690
- transform: scale(1.01);
3691
- }
3692
-
3693
- .upload-content {
3694
- display: flex;
3695
- flex-direction: column;
3696
- align-items: center;
3697
- gap: 20px;
3698
- }
3699
-
3700
- .upload-icon {
3701
- color: var(--gray);
3702
- opacity: 0.7;
3703
- }
3704
-
3705
- .upload-title {
3706
- font-size: 16px;
3707
- font-weight: 500;
3708
- color: var(--dark);
3709
- margin: 0;
3710
- }
3711
-
3712
- .upload-subtitle {
3713
- font-size: 14px;
3714
- color: var(--gray);
3715
- margin: 0;
3716
- line-height: 1.4;
3717
- }
3718
-
3719
- .upload-progress {
3720
- margin-top: 24px;
3721
- }
3722
-
3723
- .progress-bar {
3724
- width: 100%;
3725
- height: 10px;
3726
- background: var(--light);
3727
- border-radius: 6px;
3728
- overflow: hidden;
3729
- margin-bottom: 12px;
3730
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
3731
- }
3732
-
3733
- .progress-fill {
3734
- height: 100%;
3735
- background: linear-gradient(90deg, var(--primary), #6366f1);
3736
- width: 0%;
3737
- transition: width 0.3s ease;
3738
- border-radius: 6px;
3739
- }
3740
-
3741
- .progress-text {
3742
- font-size: 14px;
3743
- color: var(--gray);
3744
- text-align: center;
3745
- font-weight: 500;
3746
- }
3747
-
3748
- .upload-requirements {
3749
- background: var(--light);
3750
- padding: 20px;
3751
- border-radius: 12px;
3752
- border: 1px solid var(--gray-light);
3753
- }
3754
-
3755
- .upload-requirements h4 {
3756
- font-size: 14px;
3757
- font-weight: 600;
3758
- color: var(--dark);
3759
- margin-bottom: 12px;
3760
- }
3761
-
3762
- .upload-requirements ul {
3763
- list-style: none;
3764
- padding: 0;
3765
- margin: 0;
3766
- }
3767
-
3768
- .upload-requirements li {
3769
- font-size: 13px;
3770
- color: var(--gray);
3771
- padding: 6px 0;
3772
- padding-left: 20px;
3773
- position: relative;
3774
- line-height: 1.4;
3775
- }
3776
-
3777
- .upload-requirements li::before {
3778
- content: '•';
3779
- position: absolute;
3780
- left: 0;
3781
- color: var(--primary);
3782
- font-weight: bold;
3783
- }
3784
-
3785
- /* 工具详情弹窗样式 - 已迁移到 markdown.css */
3786
- /* 新样式请查看 css/markdown.css 文件 */
3787
-
3788
- /* 空状态 */
3789
- .tools-empty {
3790
- display: flex;
3791
- flex-direction: column;
3792
- align-items: center;
3793
- justify-content: center;
3794
- gap: 16px;
3795
- color: var(--gray);
3796
- padding: 60px 20px;
3797
- }
3798
-
3799
- .tools-empty-icon {
3800
- font-size: 64px;
3801
- opacity: 0.5;
3802
- }
3803
-
3804
- .tools-empty-text {
3805
- font-size: 20px;
3806
- font-weight: 500;
3807
- color: var(--dark);
3808
- }
3809
-
3810
- .tools-empty-hint {
3811
- font-size: 14px;
3812
- color: var(--gray);
3813
- }
3814
-
3815
- /* 动画效果 */
3816
- @keyframes fadeIn {
3817
- from {
3818
- opacity: 0;
3819
- transform: translateY(10px);
3820
- }
3821
- to {
3822
- opacity: 1;
3823
- transform: translateY(0);
3824
- }
3825
- }
3826
-
3827
- /* 响应式设计 */
3828
- @media (max-width: 768px) {
3829
- .tools-header {
3830
- flex-direction: column;
3831
- gap: 16px;
3832
- align-items: stretch;
3833
- }
3834
-
3835
- .tools-header-left,
3836
- .tools-header-right {
3837
- flex-direction: column;
3838
- gap: 12px;
3839
- }
3840
-
3841
- .skills-search,
3842
- .tools-search {
3843
- width: 100%;
3844
- }
3845
-
3846
- .tools-filter {
3847
- justify-content: center;
3848
- }
3849
-
3850
- .tools-grid {
3851
- grid-template-columns: 1fr;
3852
- }
3853
-
3854
- .category-grid,
3855
- .tag-tools-list,
3856
- .author-grid {
3857
- grid-template-columns: 1fr;
3858
- }
3859
- }
3860
-
3861
- /* 作者详情页头部样式 */
3862
- .author-header {
3863
- display: flex;
3864
- align-items: center;
3865
- gap: 16px;
3866
- padding: 16px 20px;
3867
- /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
3868
- background: linear-gradient(135deg, #c6c6c6 0%, #ededed 100%);
3869
- border-radius: 12px;
3870
- color: white;
3871
- margin-bottom: 20px;
3872
- }
3873
-
3874
- .author-header-avatar {
3875
- width: 64px;
3876
- height: 64px;
3877
- border-radius: 50%;
3878
- display: flex;
3879
- align-items: center;
3880
- justify-content: center;
3881
- font-size: 28px;
3882
- font-weight: bold;
3883
- background: rgba(255, 255, 255, 0.2);
3884
- flex-shrink: 0;
3885
- border: 2px solid rgba(255, 255, 255, 0.3);
3886
- }
3887
-
3888
- .author-header-avatar-default {
3889
- background: rgba(255, 255, 255, 0.2);
3890
- }
3891
-
3892
- .author-header-info {
3893
- flex: 1;
3894
- min-width: 0;
3895
- }
3896
-
3897
- .author-header-info h3 {
3898
- margin: 0 0 8px 0;
3899
- font-size: 24px;
3900
- font-weight: 600;
3901
- color: white;
3902
- display: flex;
3903
- align-items: center;
3904
- gap: 10px;
3905
- flex-wrap: wrap;
3906
- }
3907
-
3908
- .author-header-github-inline {
3909
- display: inline-flex;
3910
- align-items: center;
3911
- justify-content: center;
3912
- }
3913
-
3914
- .author-header-github-inline .author-header-link {
3915
- padding: 6px 10px;
3916
- background: rgba(255, 255, 255, 0.2);
3917
- border-radius: 8px;
3918
- }
3919
-
3920
- .author-header-github-inline .author-header-link:hover {
3921
- background: rgba(255, 255, 255, 0.3);
3922
- transform: translateY(-1px);
3923
- }
3924
-
3925
- .author-header-github-inline svg {
3926
- width: 16px;
3927
- height: 22px;
3928
- }
3929
-
3930
- .author-header-homepage-inline {
3931
- display: inline-flex;
3932
- align-items: center;
3933
- margin-left: 12px;
3934
- }
3935
-
3936
- .author-header-homepage-inline .author-header-link {
3937
- padding: 4px 8px;
3938
- background: rgba(255, 255, 255, 0.12);
3939
- font-size: 11px;
3940
- }
3941
-
3942
- .author-header-homepage-inline svg {
3943
- width: 14px;
3944
- height: 14px;
3945
- }
3946
-
3947
- .author-header-bio {
3948
- font-size: 14px;
3949
- color: rgba(255, 255, 255, 0.9);
3950
- line-height: 1.5;
3951
- margin-bottom: 8px;
3952
- }
3953
-
3954
- .author-header-links {
3955
- display: flex;
3956
- gap: 8px;
3957
- flex-wrap: wrap;
3958
- }
3959
-
3960
- .author-header-link {
3961
- display: inline-flex;
3962
- align-items: center;
3963
- gap: 4px;
3964
- padding: 4px 10px;
3965
- background: rgba(255, 255, 255, 0.15);
3966
- border-radius: 6px;
3967
- color: white;
3968
- text-decoration: none;
3969
- font-size: 12px;
3970
- transition: all 0.2s ease;
3971
- }
3972
-
3973
- .author-header-link:hover {
3974
- background: rgba(255, 255, 255, 0.25);
3975
- transform: translateY(-1px);
3976
- }
3977
-
3978
- /* 作者侧边栏头像样式 */
3979
- .sidebar-item-avatar-default {
3980
- background: #f7f8fa;
3981
- border: 1px solid #eceaea;
3982
- }
3983
-
3984
- /* 精选作者徽章 */
3985
- .featured-badge {
3986
- font-size: 14px;
3987
- margin-left: 4px;
3988
- }
3989
-
3990
- /* 作者侧边栏头像容器 */
3991
- .sidebar-item-avatar {
3992
- width: 40px;
3993
- height: 40px;
3994
- border-radius: 50%;
3995
- display: flex;
3996
- align-items: center;
3997
- justify-content: center;
3998
- font-size: 18px;
3999
- font-weight: bold;
4000
- color: white;
4001
- flex-shrink: 0;
4002
- overflow: hidden;
4003
- position: relative;
4004
- border: 1px solid #eceaea;
4005
- padding: 2px;
4006
- }
4007
-
4008
- .sidebar-item-avatar-img {
4009
- width: 100%;
4010
- height: 100%;
4011
- object-fit: cover;
4012
- border-radius: 50%;
4013
- opacity: 0;
4014
- transition: opacity 0.3s ease;
4015
- }
4016
-
4017
- .sidebar-item-avatar-img.loaded,
4018
- .sidebar-item-avatar-img.hidden {
4019
- opacity: 1;
4020
- }
4021
-
4022
- .sidebar-item-avatar-fallback {
4023
- position: absolute;
4024
- inset: 0;
4025
- display: flex;
4026
- align-items: center;
4027
- justify-content: center;
4028
- background: inherit;
4029
- border-radius: 50%;
4030
- font-size: 16px;
4031
- font-weight: 600;
4032
- z-index: 1;
4033
- }
4034
-
4035
- .sidebar-item-avatar-img.loaded,
4036
- .sidebar-item-avatar-img:not(.hidden) {
4037
- opacity: 1;
4038
- z-index: 2;
4039
- }
4040
-
4041
- .sidebar-item-avatar-img.loaded ~ .sidebar-item-avatar-fallback,
4042
- .sidebar-item-avatar-img:not(.hidden) ~ .sidebar-item-avatar-fallback {
4043
- display: none;
4044
- }
4045
-
4046
- /* 作者详情页头像容器 */
4047
- .author-header-avatar {
4048
- width: 55px;
4049
- height: 55px;
4050
- border-radius: 50%;
4051
- display: flex;
4052
- align-items: center;
4053
- justify-content: center;
4054
- /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
4055
- color: white;
4056
- font-size: 28px;
4057
- font-weight: bold;
4058
- flex-shrink: 0;
4059
- overflow: hidden;
4060
- position: relative;
4061
- border: 1px solid rgba(255, 255, 255, 0.3);
4062
- padding: 2px;
4063
- }
4064
-
4065
- .author-header-avatar-img {
4066
- width: 100%;
4067
- height: 100%;
4068
- object-fit: cover;
4069
- border-radius: 50%;
4070
- opacity: 0;
4071
- transition: opacity 0.3s ease;
4072
- }
4073
-
4074
- .author-header-avatar-img.loaded,
4075
- .author-header-avatar-img.hidden {
4076
- opacity: 1;
4077
- }
4078
-
4079
- .author-header-avatar-fallback {
4080
- position: absolute;
4081
- inset: 0;
4082
- display: flex;
4083
- align-items: center;
4084
- justify-content: center;
4085
- background: inherit;
4086
- border-radius: 50%;
4087
- font-size: 24px;
4088
- font-weight: 600;
4089
- z-index: 1;
4090
- }
4091
-
4092
- .author-header-avatar-img.loaded,
4093
- .author-header-avatar-img:not(.hidden) {
4094
- opacity: 1;
4095
- z-index: 2;
4096
- }
4097
-
4098
- .author-header-avatar-img.loaded ~ .author-header-avatar-fallback,
4099
- .author-header-avatar-img:not(.hidden) ~ .author-header-avatar-fallback {
4100
- display: none;
4101
- }
4102
-
4103
- /* 响应式适配 */
4104
- @media (max-width: 768px) {
4105
- .author-header {
4106
- flex-direction: column;
4107
- gap: 12px;
4108
- padding: 20px;
4109
- }
4110
-
4111
- .author-header-avatar {
4112
- width: 56px;
4113
- height: 56px;
4114
- font-size: 24px;
4115
- }
4116
-
4117
- .author-header-info h3 {
4118
- font-size: 24px;
4119
- }
4120
-
4121
- .author-header-bio {
4122
- font-size: 14px;
4123
- }
4124
-
4125
- .author-header-links {
4126
- gap: 8px;
4127
- }
4128
-
4129
- .sidebar-item-avatar {
4130
- width: 36px;
4131
- height: 36px;
4132
- font-size: 16px;
4133
- }
4134
- }
4135
-
4136
- @media (max-width: 480px) {
4137
- .author-header {
4138
- padding: 16px;
4139
- }
4140
-
4141
- .author-header-avatar {
4142
- width: 48px;
4143
- height: 48px;
4144
- font-size: 20px;
4145
- }
4146
-
4147
- .author-header-info h3 {
4148
- font-size: 20px;
4149
- }
4150
-
4151
- .author-header-bio {
4152
- font-size: 13px;
4153
- }
4154
-
4155
- .sidebar-item-avatar {
4156
- width: 32px;
4157
- height: 32px;
4158
- font-size: 14px;
4159
- }
4160
- }
4161
-
4162
- /* 工具卡片作者头像样式 */
4163
- .tool-card-author {
4164
- display: flex;
4165
- align-items: center;
4166
- gap: 8px;
4167
- }
4168
-
4169
- .tool-card-author-avatar {
4170
- width: 24px;
4171
- height: 24px;
4172
- border-radius: 50%;
4173
- display: flex;
4174
- align-items: center;
4175
- justify-content: center;
4176
- font-size: 12px;
4177
- font-weight: bold;
4178
- color: white;
4179
- /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
4180
- background: #f7f8fa;
4181
- overflow: hidden;
4182
- flex-shrink: 0;
4183
- border: 1px solid #e7e7e7;
4184
- }
4185
-
4186
- .tool-card-author-avatar img {
4187
- width: 100%;
4188
- height: 100%;
4189
- object-fit: cover;
4190
- border-radius: 50%;
4191
- padding: 2px;
4192
- }
4193
-
4194
- .tool-card-author-avatar-default {
4195
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
4196
- }
4197
-
4198
- /* 作者详情页GitHub头像样式 */
4199
- .author-header-avatar-github {
4200
- background: transparent !important;
4201
- border: none !important;
4202
- box-shadow: none !important;
4203
- }
4204
-
4205
- .author-header-avatar-github img {
4206
- width: 64px;
4207
- height: 64px;
4208
- border-radius: 50%;
4209
- object-fit: cover;
4210
- border: 3px solid rgba(255, 255, 255, 0.4);
4211
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
4212
- }
4213
-
4214
- /* 作者侧边栏GitHub头像样式 */
4215
- .sidebar-item-avatar-github {
4216
- background: transparent !important;
4217
- border: none !important;
4218
- box-shadow: none !important;
4219
- }
4220
-
4221
- .sidebar-item-avatar-github img {
4222
- width: 40px;
4223
- height: 40px;
4224
- border-radius: 50%;
4225
- object-fit: cover;
4226
- border: 2px solid rgba(255, 255, 255, 0.3);
4227
- }
4228
-
4229
- /* 响应式适配 */
4230
- @media (max-width: 768px) {
4231
- .tool-card-author-avatar {
4232
- width: 20px;
4233
- height: 20px;
4234
- font-size: 10px;
4235
- }
4236
-
4237
- .sidebar-item-avatar-github img {
4238
- width: 36px;
4239
- height: 36px;
4240
- }
4241
-
4242
- .author-header-avatar-github img {
4243
- width: 56px;
4244
- height: 56px;
4245
- }
4246
- }
4247
-
4248
- @media (max-width: 480px) {
4249
- .tool-card-author-avatar {
4250
- width: 18px;
4251
- height: 18px;
4252
- font-size: 9px;
4253
- }
4254
-
4255
- .sidebar-item-avatar-github img {
4256
- width: 32px;
4257
- height: 32px;
4258
- }
4259
-
4260
- .author-header-avatar-github img {
4261
- width: 48px;
4262
- height: 48px;
4263
- }
4264
- }
4265
-
4266
- /* ===== Skills Area 主容器 ===== */
4267
- .skills-area {
4268
- flex: 1;
4269
- display: flex;
4270
- flex-direction: column;
4271
- background: var(--light);
4272
- border-left: 1px solid var(--border);
4273
- overflow: hidden;
4274
- }
4275
-
4276
- /* ===== Skills Header ===== */
4277
- .skills-header {
4278
- display: flex;
4279
- align-items: center;
4280
- justify-content: space-between;
4281
- padding: 20px 32px 19px;
4282
- background: #fafafa;
4283
- border-bottom: 1px solid var(--border);
4284
- flex-shrink: 0;
4285
- }
4286
-
4287
- .skills-header-left {
4288
- display: flex;
4289
- align-items: center;
4290
- gap: 24px;
4291
- }
4292
-
4293
- .skills-title {
4294
- display: flex;
4295
- align-items: center;
4296
- gap: 10px;
4297
- font-size: 24px;
4298
- font-weight: 600;
4299
- color: var(--dark);
4300
- margin: 0;
4301
- }
4302
-
4303
- .skills-title-icon {
4304
- color: #6366f1;
4305
- }
4306
-
4307
-
4308
- .skills-header-right {
4309
- display: flex;
4310
- align-items: center;
4311
- gap: 20px;
4312
- }
4313
-
4314
- /* ===== Skills Filters ===== */
4315
- .skills-filters {
4316
- display: flex;
4317
- align-items: center;
4318
- justify-content: space-between;
4319
- padding: 12px 24px;
4320
- background: var(--white);
4321
- border-bottom: 1px solid var(--border);
4322
- flex-shrink: 0;
4323
- }
4324
-
4325
- .filter-tabs {
4326
- display: flex;
4327
- gap: 8px;
4328
- }
4329
-
4330
- .filter-tab {
4331
- display: flex;
4332
- align-items: center;
4333
- gap: 6px;
4334
- padding: 8px 16px;
4335
- border: none;
4336
- background: transparent;
4337
- border-radius: 9999px;
4338
- font-size: 14px;
4339
- font-weight: 500;
4340
- color: var(--gray);
4341
- cursor: pointer;
4342
- transition: all 0.15s ease;
4343
- }
4344
-
4345
- .filter-tab:hover {
4346
- background: var(--light);
4347
- color: var(--dark);
4348
- }
4349
-
4350
- .filter-tab.active {
4351
- background: #6366f1;
4352
- color: var(--white);
4353
- }
4354
-
4355
- .filter-badge {
4356
- font-size: 11px;
4357
- padding: 2px 8px;
4358
- border-radius: 9999px;
4359
- font-weight: 500;
4360
- }
4361
-
4362
- .filter-badge.built-in {
4363
- background: #fef3c7;
4364
- color: #92400e;
4365
- }
4366
-
4367
- .filter-badge.custom {
4368
- background: #dcfce7;
4369
- color: #166534;
4370
- }
4371
-
4372
- .filter-tab.active .filter-badge {
4373
- background: rgba(255,255,255,0.2);
4374
- color: var(--white);
4375
- }
4376
-
4377
- .view-toggle {
4378
- display: flex;
4379
- gap: 4px;
4380
- padding: 4px;
4381
- background: var(--light);
4382
- border-radius: 10px;
4383
- }
4384
-
4385
- .view-btn {
4386
- padding: 6px 10px;
4387
- border: none;
4388
- background: transparent;
4389
- border-radius: 6px;
4390
- cursor: pointer;
4391
- color: var(--gray);
4392
- transition: all 0.15s ease;
4393
- }
4394
-
4395
- .view-btn:hover {
4396
- color: var(--dark);
4397
- }
4398
-
4399
- .view-btn.active {
4400
- background: var(--white);
4401
- color: #6366f1;
4402
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
4403
- }
4404
-