@becrafter/prompt-manager 0.1.1 → 0.1.8

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 (110) hide show
  1. package/README.md +304 -121
  2. package/app/cli/commands/start.js +28 -4
  3. package/app/cli/support/argv.js +6 -0
  4. package/env.example +32 -0
  5. package/package.json +36 -6
  6. package/packages/server/api/admin.routes.js +409 -1
  7. package/packages/server/api/open.routes.js +7 -2
  8. package/packages/server/api/tool.routes.js +479 -0
  9. package/packages/server/app.js +97 -25
  10. package/packages/server/configs/models/built-in/bigmodel.yaml +6 -0
  11. package/packages/server/configs/models/providers.yaml +50 -0
  12. package/packages/server/configs/templates/built-in/general-iteration.yaml +60 -0
  13. package/packages/server/configs/templates/built-in/general-optimize.yaml +63 -0
  14. package/packages/server/configs/templates/built-in/output-format-optimize.yaml +95 -0
  15. package/packages/server/mcp/heartbeat-patch.js +73 -0
  16. package/packages/server/mcp/mcp.server.js +63 -314
  17. package/packages/server/mcp/prompt.handler.js +26 -0
  18. package/packages/server/mcp/thinking-toolkit.handler.js +380 -0
  19. package/packages/server/package.json +35 -3
  20. package/packages/server/server.js +114 -12
  21. package/packages/server/services/TerminalService.js +498 -0
  22. package/packages/server/services/WebSocketService.js +484 -0
  23. package/packages/server/services/manager.js +38 -7
  24. package/packages/server/services/model.service.js +473 -0
  25. package/packages/server/services/optimization.service.js +457 -0
  26. package/packages/server/services/template.service.js +333 -0
  27. package/packages/server/toolm/tool-description-generator-optimized.service.js +5 -2
  28. package/packages/server/toolm/tool-sync.service.js +47 -3
  29. package/packages/server/utils/config.js +8 -1
  30. package/packages/server/utils/port-checker.js +63 -0
  31. package/packages/server/utils/util.js +27 -0
  32. package/IFLOW.md +0 -175
  33. package/app/desktop/assets/app.1.png +0 -0
  34. package/app/desktop/assets/app.png +0 -0
  35. package/app/desktop/assets/icons/icon.icns +0 -0
  36. package/app/desktop/assets/icons/icon.ico +0 -0
  37. package/app/desktop/assets/icons/icon.png +0 -0
  38. package/app/desktop/assets/icons/tray.png +0 -0
  39. package/app/desktop/assets/templates/about.html +0 -147
  40. package/app/desktop/assets/tray.1.png +0 -0
  41. package/app/desktop/assets/tray.png +0 -0
  42. package/app/desktop/main.js +0 -241
  43. package/app/desktop/package-lock.json +0 -4997
  44. package/app/desktop/package.json +0 -100
  45. package/app/desktop/preload.js +0 -7
  46. package/app/desktop/src/core/error-handler.js +0 -108
  47. package/app/desktop/src/core/event-emitter.js +0 -84
  48. package/app/desktop/src/core/logger.js +0 -108
  49. package/app/desktop/src/core/state-manager.js +0 -125
  50. package/app/desktop/src/services/module-loader.js +0 -214
  51. package/app/desktop/src/services/runtime-manager.js +0 -301
  52. package/app/desktop/src/services/service-manager.js +0 -169
  53. package/app/desktop/src/services/update-manager.js +0 -268
  54. package/app/desktop/src/ui/about-dialog-manager.js +0 -208
  55. package/app/desktop/src/ui/admin-window-manager.js +0 -757
  56. package/app/desktop/src/ui/splash-manager.js +0 -253
  57. package/app/desktop/src/ui/tray-manager.js +0 -186
  58. package/app/desktop/src/utils/icon-manager.js +0 -133
  59. package/app/desktop/src/utils/path-utils.js +0 -58
  60. package/app/desktop/src/utils/resource-paths.js +0 -49
  61. package/app/desktop/src/utils/resource-sync.js +0 -260
  62. package/app/desktop/src/utils/runtime-sync.js +0 -241
  63. package/app/desktop/src/utils/template-renderer.js +0 -284
  64. package/app/desktop/src/utils/version-utils.js +0 -59
  65. package/examples/prompts/developer/code-review.yaml +0 -32
  66. package/examples/prompts/developer/code_refactoring.yaml +0 -31
  67. package/examples/prompts/developer/doc-generator.yaml +0 -36
  68. package/examples/prompts/developer/error-code-fixer.yaml +0 -35
  69. package/examples/prompts/engineer/engineer-professional.yaml +0 -92
  70. package/examples/prompts/engineer/laowang-engineer.yaml +0 -132
  71. package/examples/prompts/engineer/nekomata-engineer.yaml +0 -123
  72. package/examples/prompts/engineer/ojousama-engineer.yaml +0 -124
  73. package/examples/prompts/generator/gen_3d_edu_webpage_html.yaml +0 -117
  74. package/examples/prompts/generator/gen_3d_webpage_html.yaml +0 -75
  75. package/examples/prompts/generator/gen_bento_grid_html.yaml +0 -112
  76. package/examples/prompts/generator/gen_html_web_page.yaml +0 -88
  77. package/examples/prompts/generator/gen_knowledge_card_html.yaml +0 -83
  78. package/examples/prompts/generator/gen_magazine_card_html.yaml +0 -82
  79. package/examples/prompts/generator/gen_mimeng_headline_title.yaml +0 -71
  80. package/examples/prompts/generator/gen_podcast_script.yaml +0 -69
  81. package/examples/prompts/generator/gen_prd_prototype_html.yaml +0 -175
  82. package/examples/prompts/generator/gen_summarize.yaml +0 -157
  83. package/examples/prompts/generator/gen_title.yaml +0 -119
  84. package/examples/prompts/generator/others/api_documentation.yaml +0 -32
  85. package/examples/prompts/generator/others/build_mcp_server.yaml +0 -26
  86. package/examples/prompts/generator/others/project_architecture.yaml +0 -31
  87. package/examples/prompts/generator/others/test_case_generator.yaml +0 -30
  88. package/examples/prompts/generator/others/writing_assistant.yaml +0 -72
  89. package/examples/prompts/recommend/human_3-0_growth_diagnostic_coach_prompt.yaml +0 -105
  90. package/examples/prompts/workflow/sixstep-workflow.yaml +0 -192
  91. package/packages/admin-ui/.babelrc +0 -3
  92. package/packages/admin-ui/admin.html +0 -412
  93. package/packages/admin-ui/css/codemirror-theme_xq-light.css +0 -43
  94. package/packages/admin-ui/css/codemirror.css +0 -344
  95. package/packages/admin-ui/css/main.css +0 -2592
  96. package/packages/admin-ui/css/recommended-prompts.css +0 -610
  97. package/packages/admin-ui/package-lock.json +0 -6981
  98. package/packages/admin-ui/package.json +0 -36
  99. package/packages/admin-ui/src/codemirror.js +0 -53
  100. package/packages/admin-ui/src/index.js +0 -3188
  101. package/packages/admin-ui/webpack.config.js +0 -76
  102. package/packages/server/toolm/test-tools.js +0 -264
  103. package/scripts/build-icons.js +0 -135
  104. package/scripts/build.sh +0 -57
  105. package/scripts/postinstall.js +0 -34
  106. package/scripts/surge/CNAME +0 -1
  107. package/scripts/surge/README.md +0 -47
  108. package/scripts/surge/package-lock.json +0 -34
  109. package/scripts/surge/package.json +0 -20
  110. package/scripts/surge/sync-to-surge.js +0 -151
@@ -1,2592 +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
- }
17
-
18
- * {
19
- box-sizing: border-box;
20
- margin: 0;
21
- padding: 0;
22
- font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
23
- -webkit-font-smoothing: antialiased;
24
- -moz-osx-font-smoothing: grayscale;
25
- text-rendering: optimizeLegibility;
26
- }
27
-
28
- body {
29
- background-color: var(--light);
30
- color: var(--dark);
31
- min-height: 100vh;
32
- display: flex;
33
- flex-direction: column;
34
- letter-spacing: -0.01em;
35
- font-weight: 420;
36
- overflow-y: hidden;
37
- }
38
-
39
- header {
40
- background-color: white;
41
- padding: 12px 25px;
42
- display: flex;
43
- align-items: center;
44
- justify-content: space-between;
45
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
46
- border-bottom: 1px solid var(--border);
47
- }
48
-
49
- .logo {
50
- font-size: 24px;
51
- font-weight: 580;
52
- color: var(--primary);
53
- display: flex;
54
- align-items: center;
55
- gap: 10px;
56
- letter-spacing: -0.02em;
57
- }
58
-
59
- .logo span {
60
- color: #8e8989;
61
- font-size: 12px;
62
- padding: 3px 8px;
63
- border-radius: 5px;
64
- font-weight: 450;
65
- border: 1px solid var(--border);
66
- letter-spacing: 0;
67
- }
68
-
69
- .nav-right {
70
- display: flex;
71
- gap: 12px;
72
- align-items: center;
73
- position: relative;
74
- }
75
-
76
- .user-profile {
77
- position: relative;
78
- }
79
-
80
- .avatar-btn {
81
- width: 32px;
82
- height: 32px;
83
- padding: 0;
84
- border: none;
85
- background: rgba(0,0,0,0.02);
86
- cursor: pointer;
87
- border-radius: 50%;
88
- overflow: hidden;
89
- transition: all 0.2s ease;
90
- display: flex;
91
- align-items: center;
92
- justify-content: center;
93
- }
94
-
95
- .avatar-btn:hover {
96
- transform: translateY(-1px);
97
- background: rgba(0,0,0,0.04);
98
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
99
- }
100
-
101
- /* 当不需要认证时,头像显示为不可点击状态 */
102
- .avatar-btn.no-auth {
103
- cursor: default;
104
- }
105
-
106
- .avatar-btn.no-auth:hover {
107
- transform: none;
108
- background: rgba(0,0,0,0.02);
109
- box-shadow: none;
110
- }
111
-
112
- .avatar-img {
113
- width: 26px;
114
- height: 26px;
115
- object-fit: cover;
116
- border-radius: 50%;
117
- opacity: 0.75;
118
- transition: opacity 0.2s ease;
119
- }
120
-
121
- .avatar-btn:hover .avatar-img {
122
- opacity: 0.9;
123
- }
124
-
125
- .dropdown-menu {
126
- position: absolute;
127
- top: calc(100% + 8px);
128
- right: 0;
129
- width: 240px;
130
- background: white;
131
- border-radius: 12px;
132
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
133
- opacity: 0;
134
- visibility: hidden;
135
- transform: translateY(-8px) scale(0.96);
136
- transform-origin: top right;
137
- transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
138
- z-index: 1000;
139
- border: 1px solid var(--border);
140
- }
141
-
142
- .dropdown-menu.show {
143
- opacity: 1;
144
- visibility: visible;
145
- transform: translateY(0) scale(1);
146
- }
147
-
148
- .dropdown-header {
149
- padding: 16px;
150
- border-bottom: 1px solid var(--border);
151
- }
152
-
153
- .user-info {
154
- display: flex;
155
- align-items: center;
156
- gap: 12px;
157
- }
158
-
159
- .user-avatar {
160
- width: 36px;
161
- height: 36px;
162
- border-radius: 50%;
163
- background: var(--light);
164
- padding: 3px;
165
- opacity: 0.8;
166
- }
167
-
168
- .user-details {
169
- flex: 1;
170
- min-width: 0;
171
- padding: 2px 0;
172
- }
173
-
174
- .user-name {
175
- font-size: 15px;
176
- font-weight: 500;
177
- color: var(--dark);
178
- margin-bottom: 2px;
179
- }
180
-
181
- .user-role {
182
- font-size: 13px;
183
- color: var(--gray);
184
- }
185
-
186
- .dropdown-divider {
187
- height: 1px;
188
- background: var(--border);
189
- margin: 8px 0;
190
- }
191
-
192
- .dropdown-item {
193
- display: flex;
194
- align-items: center;
195
- gap: 10px;
196
- width: 100%;
197
- padding: 12px 16px;
198
- border: none;
199
- background: none;
200
- font-size: 14px;
201
- color: var(--dark);
202
- cursor: pointer;
203
- transition: all 0.2s ease;
204
- }
205
-
206
- .dropdown-item:last-child {
207
- border-radius: 0 0 12px 12px;
208
- }
209
-
210
- .dropdown-item:hover {
211
- background: rgba(0, 0, 0, 0.04);
212
- }
213
-
214
- .dropdown-item .dropdown-icon {
215
- width: 18px;
216
- height: 18px;
217
- color: var(--gray);
218
- }
219
-
220
- .dropdown-item:hover .dropdown-icon {
221
- color: var(--primary);
222
- }
223
-
224
- .btn {
225
- padding: 8px 16px;
226
- border-radius: 6px;
227
- font-size: 14px;
228
- font-weight: 500;
229
- cursor: pointer;
230
- transition: all 0.2s;
231
- border: none;
232
- display: flex;
233
- align-items: center;
234
- gap: 6px;
235
- }
236
-
237
- .btn-primary {
238
- background: var(--primary);
239
- color: white;
240
- }
241
-
242
- .btn-primary:hover {
243
- background: var(--primary-dark);
244
- }
245
-
246
- .btn-success {
247
- background: var(--success);
248
- color: white;
249
- }
250
-
251
- .btn-outline {
252
- background: transparent;
253
- border: 1px solid var(--border);
254
- color: var(--dark);
255
- }
256
-
257
- .btn-outline:hover {
258
- background: var(--light);
259
- }
260
-
261
- .btn-light {
262
- background: white;
263
- border: 1px solid var(--border);
264
- color: var(--dark);
265
- }
266
-
267
- .btn-light:hover {
268
- background: var(--light);
269
- }
270
-
271
- .btn-dark {
272
- background: var(--dark);
273
- color: white;
274
- }
275
-
276
- .btn-dark:hover {
277
- background: #000;
278
- }
279
-
280
- .btn-danger {
281
- background: var(--danger);
282
- color: white;
283
- }
284
-
285
- .btn-danger:hover {
286
- background: #b71f31;
287
- }
288
-
289
- .btn-sm {
290
- padding: 6px 12px;
291
- font-size: 13px;
292
- }
293
-
294
- #addArgumentBtn {
295
- padding: 6px 12px;
296
- font-size: 12px;
297
- }
298
-
299
- button#saveBtn{
300
- padding: 8px 16px;
301
- font-size: 14px;
302
- }
303
-
304
- .btn.loading {
305
- opacity: 0.6;
306
- pointer-events: none;
307
- }
308
-
309
- .btn-icon {
310
- padding: 6px;
311
- width: 32px;
312
- height: 32px;
313
- display: flex;
314
- align-items: center;
315
- justify-content: center;
316
- }
317
-
318
- main {
319
- display: flex;
320
- flex: 1;
321
- overflow: hidden;
322
- height: 93%;
323
- }
324
-
325
- aside {
326
- width: 320px;
327
- background: var(--sidebar-bg);
328
- border-right: 1px solid var(--border);
329
- padding: 0;
330
- display: flex;
331
- flex-direction: column;
332
- max-height: 100%;
333
- overflow-y: auto;
334
- scrollbar-width: none;
335
- }
336
-
337
- .sidebar-header {
338
- padding: 15px;
339
- display: flex;
340
- flex-direction: column;
341
- gap: 12px;
342
- background: white;
343
- border-bottom: 1px solid var(--border);
344
- }
345
-
346
- .new-prompt-btn {
347
- background: var(--primary);
348
- color: white;
349
- border: none;
350
- border-radius: 10px;
351
- padding: 12px 16px;
352
- font-size: 15px;
353
- font-weight: 500;
354
- cursor: pointer;
355
- display: flex;
356
- align-items: center;
357
- justify-content: center;
358
- gap: 8px;
359
- width: 100%;
360
- transition: all 0.2s ease;
361
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
362
- }
363
-
364
- .new-prompt-btn:hover {
365
- background: #333;
366
- transform: translateY(-1px);
367
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
368
- }
369
-
370
- .blank-area-new-prompt-btn {
371
- font-weight: 500;
372
- background: none;
373
- border: none;
374
- color: inherit;
375
- text-decoration: none;
376
- cursor: pointer;
377
- padding: 0;
378
- display: inline;
379
- font-size: inherit;
380
- transition: color 0.2s ease;
381
- }
382
-
383
- .blank-area-new-prompt-btn:hover {
384
- color: var(--primary);
385
- text-decoration: none;
386
- }
387
-
388
- .search-container {
389
- display: flex;
390
- gap: 10px;
391
- margin-top: 2px;
392
- }
393
-
394
- .search-box {
395
- position: relative;
396
- flex: 1;
397
- }
398
-
399
- .search-box input {
400
- width: 100%;
401
- padding: 9px 32px 9px 38px;
402
- border: 1px solid var(--border);
403
- border-radius: 8px;
404
- font-size: 14px;
405
- transition: all 0.2s ease;
406
- background: white;
407
- }
408
-
409
- .search-box input:focus {
410
- outline: none;
411
- border-color: var(--primary);
412
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1);
413
- }
414
-
415
- .search-box::before {
416
- content: '';
417
- position: absolute;
418
- left: 12px;
419
- top: 50%;
420
- transform: translateY(-50%);
421
- width: 16px;
422
- height: 16px;
423
- 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;
424
- background-size: contain;
425
- opacity: 0.6;
426
- }
427
-
428
- .search-box .clear-btn {
429
- position: absolute;
430
- right: 8px;
431
- top: 50%;
432
- transform: translateY(-50%);
433
- width: 20px;
434
- height: 20px;
435
- border: none;
436
- background: transparent;
437
- cursor: pointer;
438
- padding: 0;
439
- display: none;
440
- align-items: center;
441
- justify-content: center;
442
- color: var(--gray);
443
- opacity: 0.6;
444
- transition: opacity 0.2s ease;
445
- }
446
-
447
- .search-box .clear-btn::before {
448
- content: '';
449
- width: 16px;
450
- height: 16px;
451
- 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;
452
- background-size: contain;
453
- }
454
-
455
- .search-box .clear-btn:hover {
456
- opacity: 1;
457
- }
458
-
459
- .search-box input:not(:placeholder-shown) + .clear-btn {
460
- display: flex;
461
- }
462
-
463
- .folder-btn {
464
- background: white;
465
- border: 1px solid var(--border);
466
- border-radius: 8px;
467
- width: 38px;
468
- height: 38px;
469
- cursor: pointer;
470
- display: flex;
471
- align-items: center;
472
- justify-content: center;
473
- transition: all 0.2s ease;
474
- flex-shrink: 0;
475
- }
476
-
477
- .folder-btn::before {
478
- content: '';
479
- width: 18px;
480
- height: 18px;
481
- 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;
482
- background-size: contain;
483
- opacity: 0.6;
484
- transition: opacity 0.2s ease;
485
- }
486
-
487
- .folder-btn:hover {
488
- background: #f8f9fa;
489
- border-color: var(--primary);
490
- transform: translateY(-1px);
491
- box-shadow: 0 2px 8px rgba(0,0,0,0.08);
492
- }
493
-
494
- .folder-btn:hover::before {
495
- opacity: 1;
496
- }
497
-
498
- .toast-container {
499
- position: fixed;
500
- bottom: 24px;
501
- right: 24px;
502
- display: flex;
503
- flex-direction: column-reverse;
504
- gap: 12px;
505
- z-index: 5000;
506
- align-items: flex-end;
507
- }
508
-
509
- .toast {
510
- min-width: 280px;
511
- max-width: 360px;
512
- background: rgba(255, 255, 255, 0.96);
513
- border-radius: 12px;
514
- padding: 16px 18px;
515
- display: flex;
516
- align-items: flex-start;
517
- gap: 14px;
518
- box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
519
- border: 1px solid transparent;
520
- opacity: 0;
521
- transform: translateY(16px);
522
- animation: toast-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
523
- pointer-events: auto;
524
- }
525
-
526
- .toast.toast-leave {
527
- animation: toast-leave 0.25s ease forwards;
528
- }
529
-
530
- .toast-success {
531
- border-color: rgba(40,167,69,0.35);
532
- background: linear-gradient(145deg, rgba(40,167,69,0.08), rgba(40,167,69,0.02));
533
- }
534
-
535
- .toast-error {
536
- border-color: rgba(220,53,69,0.35);
537
- background: linear-gradient(145deg, rgba(220,53,69,0.08), rgba(220,53,69,0.02));
538
- }
539
-
540
- .toast-info {
541
- border-color: rgba(0,102,255,0.3);
542
- background: linear-gradient(145deg, rgba(0,102,255,0.08), rgba(0,102,255,0.02));
543
- }
544
-
545
- .toast-warning {
546
- border-color: rgba(255,193,7,0.35);
547
- background: linear-gradient(145deg, rgba(255,193,7,0.1), rgba(255,193,7,0.03));
548
- }
549
-
550
- .toast-icon {
551
- width: 36px;
552
- height: 36px;
553
- border-radius: 50%;
554
- display: flex;
555
- align-items: center;
556
- justify-content: center;
557
- font-size: 18px;
558
- font-weight: 600;
559
- flex-shrink: 0;
560
- background: rgba(0,0,0,0.05);
561
- color: var(--dark);
562
- }
563
-
564
- .toast-success .toast-icon {
565
- background: rgba(40,167,69,0.15);
566
- color: var(--success);
567
- }
568
-
569
- .toast-error .toast-icon {
570
- background: rgba(220,53,69,0.15);
571
- color: var(--danger);
572
- }
573
-
574
- .toast-info .toast-icon {
575
- background: rgba(0,102,255,0.15);
576
- color: var(--primary);
577
- }
578
-
579
- .toast-warning .toast-icon {
580
- background: rgba(255,193,7,0.2);
581
- color: #b58100;
582
- }
583
-
584
- .toast-content {
585
- flex: 1;
586
- display: flex;
587
- flex-direction: column;
588
- gap: 4px;
589
- }
590
-
591
- .toast-title {
592
- font-size: 15px;
593
- font-weight: 600;
594
- color: var(--dark);
595
- }
596
-
597
- .toast-message {
598
- font-size: 13px;
599
- color: var(--gray);
600
- line-height: 1.5;
601
- white-space: pre-line;
602
- }
603
-
604
- .toast-close {
605
- border: none;
606
- background: transparent;
607
- color: var(--gray);
608
- font-size: 18px;
609
- cursor: pointer;
610
- padding: 2px;
611
- line-height: 1;
612
- margin-left: 8px;
613
- flex-shrink: 0;
614
- }
615
-
616
- .toast-close:hover {
617
- color: var(--dark);
618
- }
619
-
620
- @keyframes toast-enter {
621
- to {
622
- opacity: 1;
623
- transform: translateY(0);
624
- }
625
- }
626
-
627
- @keyframes toast-leave {
628
- to {
629
- opacity: 0;
630
- transform: translateY(12px);
631
- }
632
- }
633
-
634
- .variable-desc {
635
- font-size: 12px;
636
- color: var(--gray);
637
- margin-top: 2px;
638
- }
639
-
640
- .group-section {
641
- margin-bottom: 8px;
642
- }
643
-
644
- .group-header {
645
- padding: 12px 15px;
646
- font-size: 14px;
647
- font-weight: 500;
648
- color: var(--dark);
649
- display: flex;
650
- align-items: center;
651
- justify-content: space-between;
652
- cursor: pointer;
653
- border-bottom: 1px solid var(--border);
654
- }
655
-
656
- .group-section.disabled {
657
- position: relative;
658
- }
659
-
660
- .group-section.disabled .group-header {
661
- position: relative;
662
- color: #858a91;
663
- background: rgba(0,0,0,0.02);
664
- box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
665
- }
666
-
667
- .group-section.disabled .group-header::before {
668
- content: '';
669
- position: absolute;
670
- top: 8px;
671
- left: 9px;
672
- width: 40px;
673
- height: 40px;
674
- background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1NicgaGVpZ2h0PSc1Nic+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdnJyB4MT0nMCcgeTE9JzAnIHgyPScxJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZDVkOWRlJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjYWViNGJjJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBvbHlnb24gcG9pbnRzPScwLDAgMCw1NiA1NiwwJyBmaWxsPSd1cmwoI2cpJy8+PHRleHQgeD0nNicgeT0nMjQnIGZvbnQtZmFtaWx5PSdJbnRlcixzeXN0ZW0tdWksU2Vnb2UgVUksSGVsdmV0aWNhLEFyaWFsLHNhbnMtc2VyaWYnIGZvbnQtc2l6ZT0nMTInIGZpbGw9JyM3ZTdmODInIHRyYW5zZm9ybT0ncm90YXRlKC00NSAxOCAyMCknIGZvbnQtd2VpZ2h0PSc2MDAnPuWGu+e7kzwvdGV4dD48L3N2Zz4=") no-repeat;
675
- background-size: contain;
676
- pointer-events: none;
677
- transform: translate(-8px, -8px);
678
- }
679
-
680
- .group-section.disabled .group-header:hover {
681
- background: rgba(0,0,0,0.04);
682
- }
683
-
684
- .group-header:hover {
685
- background: #f0f0f0;
686
- }
687
-
688
- .group-content {
689
- overflow: hidden;
690
- transition: max-height 0.3s ease-out;
691
- }
692
-
693
- .group-content.collapsed {
694
- max-height: 0;
695
- }
696
-
697
- .group-content.expanded {
698
- max-height: 2400px;
699
- overflow: visible;
700
- padding-top: 8px;
701
- scrollbar-width: none;
702
- }
703
-
704
- .group-children {
705
- display: flex;
706
- flex-direction: column;
707
- margin-top: 4px;
708
- }
709
-
710
- .group-count {
711
- background: #9ea2a6;
712
- color: white;
713
- font-size: 11px;
714
- padding: 2px 6px;
715
- border-radius: 10px;
716
- }
717
-
718
- .group-section.disabled .group-count {
719
- background: rgba(0,0,0,0.35);
720
- }
721
-
722
- .prompt-list {
723
- padding: 0 15px 15px;
724
- }
725
-
726
- .prompt-item {
727
- padding: 12px;
728
- margin-bottom: 8px;
729
- border-radius: 8px;
730
- cursor: pointer;
731
- position: relative;
732
- background: #f5f5f5;
733
- border: 1px solid transparent;
734
- transition: all 0.2s;
735
- margin-right: 10px;
736
- overflow: hidden;
737
- }
738
-
739
- .prompt-info {
740
- display: flex;
741
- flex-direction: column;
742
- justify-content: center;
743
- width: 100%;
744
- min-width: 0;
745
- padding-right: 10px; /* 为 prompt-meta 预留空间 */
746
- }
747
-
748
- .prompt-name {
749
- font-weight: 500;
750
- margin-bottom: 4px;
751
- white-space: nowrap;
752
- overflow: hidden;
753
- text-overflow: ellipsis;
754
- }
755
-
756
- .prompt-meta {
757
- position: absolute;
758
- right: 0;
759
- top: 0;
760
- bottom: 0;
761
- width: 50px;
762
- display: flex;
763
- align-items: center;
764
- justify-content: center;
765
- }
766
-
767
- .prompt-item:hover {
768
- background: #eeeeee;
769
- border-color: var(--primary);
770
- box-shadow: 0 2px 8px rgba(0,102,255,0.1);
771
- }
772
-
773
- .prompt-item.active {
774
- background: rgba(0,102,255,0.05);
775
- border-color: var(--primary);
776
- }
777
-
778
- .prompt-desc {
779
- font-size: 12px;
780
- color: var(--gray);
781
- line-height: 1.3;
782
- height: 16px;
783
- overflow: hidden;
784
- position: relative;
785
- text-overflow: ellipsis;
786
- white-space: nowrap;
787
- cursor: pointer;
788
- }
789
-
790
- .prompt-meta-hint {
791
- font-size: 11px;
792
- color: var(--gray);
793
- margin-top: 4px;
794
- text-transform: none;
795
- }
796
-
797
- /* Tooltip样式 */
798
- .tooltip {
799
- position: relative;
800
- }
801
-
802
- .tooltip::after {
803
- content: attr(title);
804
- position: absolute;
805
- bottom: 100%;
806
- left: 50%;
807
- transform: translateX(-50%);
808
- background: rgba(0, 0, 0, 0.8);
809
- color: white;
810
- padding: 8px 12px;
811
- border-radius: 4px;
812
- font-size: 12px;
813
- white-space: pre-wrap;
814
- word-wrap: break-word;
815
- max-width: 300px;
816
- z-index: 1000;
817
- opacity: 0;
818
- visibility: hidden;
819
- transition: opacity 0.2s, visibility 0.2s;
820
- pointer-events: none;
821
- }
822
-
823
- .tooltip:hover::after {
824
- opacity: 1;
825
- visibility: visible;
826
- }
827
-
828
- /* 启用状态边框样式 */
829
- .prompt-item.enabled {
830
- border-left: 4px solid #b8b3b3; /* 浅30%的深灰色,原#333调浅30%约为#666 */
831
- }
832
-
833
- /* 选中状态样式 */
834
- .prompt-item.active {
835
- border-left: 4px solid #666; /* 选中时的灰色边框 */
836
- }
837
-
838
- /* 悬停状态样式 */
839
- .prompt-item:hover {
840
- border-color: #666; /* 鼠标悬停时的灰色边框 */
841
- }
842
-
843
- /* 操作按钮样式 */
844
- .prompt-actions {
845
- display: flex;
846
- flex-direction: column;
847
- justify-content: center;
848
- gap: 8px;
849
- position: absolute;
850
- right: 0;
851
- top: 0;
852
- bottom: 0;
853
- width: 100px;
854
- opacity: 0;
855
- visibility: hidden;
856
- padding: 12px 16px;
857
- transform: translateX(100%);
858
- transition: all 0.25s ease;
859
- background: linear-gradient(to left,
860
- rgba(238, 238, 238, 0.95) 0%,
861
- rgba(238, 238, 238, 0.9) 30%,
862
- rgba(238, 238, 238, 0.6) 60%,
863
- rgba(238, 238, 238, 0) 100%);
864
- z-index: 1;
865
- }
866
-
867
- .prompt-item {
868
- padding-right: 24px; /* 为操作按钮预留空间 */
869
- }
870
-
871
- .prompt-item:hover .prompt-actions {
872
- opacity: 1;
873
- visibility: visible;
874
- transform: translateX(0);
875
- }
876
-
877
- .action-btn {
878
- background: rgba(255, 255, 255, 0.8);
879
- border: 1px solid var(--border);
880
- border-radius: 4px;
881
- padding: 4px;
882
- margin: -3px;
883
- font-size: 11px;
884
- cursor: pointer;
885
- white-space: nowrap;
886
- text-align: center;
887
- transition: all 0.2s ease;
888
- backdrop-filter: blur(2px);
889
- width: 100%;
890
- }
891
-
892
- .action-btn:hover {
893
- background: rgba(255, 255, 255, 0.95);
894
- transform: translateX(-2px);
895
- box-shadow: 0 1px 23px rgba(0,0,0,0.1);
896
- }
897
-
898
- /* 美化目录三角图标 */
899
- .group-toggle {
900
- position: relative;
901
- width: 20px;
902
- height: 20px;
903
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
904
- }
905
-
906
- .group-toggle::before {
907
- content: '';
908
- position: absolute;
909
- width: 16px;
910
- height: 16px;
911
- top: 50%;
912
- left: 50%;
913
- transform: translate(-50%, -50%);
914
- 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;
915
- background-size: contain;
916
- opacity: 0.6;
917
- transition: opacity 0.2s ease;
918
- }
919
-
920
- .group-toggle.collapsed {
921
- transform: rotate(-90deg);
922
- }
923
-
924
- .group-header:hover .group-toggle::before {
925
- opacity: 1;
926
- }
927
-
928
- .prompt-meta {
929
- display: flex;
930
- align-items: center;
931
- gap: 6px;
932
- }
933
-
934
- .prompt-tag {
935
- background: rgba(0,102,255,0.1);
936
- color: var(--primary);
937
- font-size: 11px;
938
- padding: 2px 6px;
939
- border-radius: 4px;
940
- font-weight: 500;
941
- }
942
-
943
- .prompt-status {
944
- width: 8px;
945
- height: 8px;
946
- border-radius: 50%;
947
- }
948
-
949
- .prompt-status.enabled {
950
- background: var(--success);
951
- }
952
-
953
- .prompt-status.disabled {
954
- background: var(--gray-light);
955
- }
956
-
957
- .prompt-list-empty {
958
- padding: 16px 14px;
959
- border: 1px dashed rgba(0,0,0,0.12);
960
- border-radius: 10px;
961
- color: var(--gray);
962
- font-size: 13px;
963
- line-height: 1.6;
964
- background: rgba(0,0,0,0.02);
965
- text-align: left;
966
- }
967
-
968
- .prompt-list-empty span {
969
- display: block;
970
- color: var(--dark);
971
- font-weight: 550;
972
- margin-bottom: 4px;
973
- }
974
-
975
- .group-modal-content {
976
- min-width: 460px;
977
- }
978
-
979
- .group-modal-tabs {
980
- display: flex;
981
- gap: 8px;
982
- padding: 4px;
983
- background: rgba(0,0,0,0.03);
984
- border-radius: 10px;
985
- margin-bottom: 16px;
986
- }
987
-
988
- .group-modal-tab {
989
- flex: 1;
990
- border: none;
991
- background: transparent;
992
- border-radius: 8px;
993
- padding: 10px 12px;
994
- font-size: 14px;
995
- font-weight: 500;
996
- color: var(--gray);
997
- cursor: pointer;
998
- transition: all 0.2s ease;
999
- }
1000
-
1001
- .group-modal-tab:hover {
1002
- color: var(--primary);
1003
- }
1004
-
1005
- .group-modal-tab.active {
1006
- background: white;
1007
- box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
1008
- color: var(--primary);
1009
- font-weight: 580;
1010
- }
1011
-
1012
- .group-modal-panel {
1013
- display: flex;
1014
- flex-direction: column;
1015
- gap: 12px;
1016
- }
1017
-
1018
- .group-modal-panel.hidden {
1019
- display: none;
1020
- }
1021
-
1022
- .group-modal-hint {
1023
- font-size: 12px;
1024
- color: var(--gray);
1025
- margin-top: 6px;
1026
- }
1027
-
1028
- .group-modal-footer {
1029
- display: flex;
1030
- gap: 12px;
1031
- width: 100%;
1032
- justify-content: flex-end;
1033
- }
1034
-
1035
- .group-modal-footer.hidden {
1036
- display: none;
1037
- }
1038
-
1039
- .group-manage-toolbar {
1040
- display: flex;
1041
- align-items: center;
1042
- gap: 10px;
1043
- }
1044
-
1045
- .group-manage-toolbar input {
1046
- flex: 1;
1047
- padding: 8px 12px;
1048
- border: 1px solid var(--border);
1049
- border-radius: 8px;
1050
- font-size: 14px;
1051
- transition: all 0.2s ease;
1052
- }
1053
-
1054
- .group-manage-toolbar input:focus {
1055
- outline: none;
1056
- border-color: var(--primary);
1057
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1058
- }
1059
-
1060
- .group-manage-list {
1061
- display: flex;
1062
- flex-direction: column;
1063
- gap: 10px;
1064
- max-height: 300px;
1065
- overflow-y: auto;
1066
- padding-right: 4px;
1067
- }
1068
-
1069
- .group-manage-empty {
1070
- padding: 18px 12px;
1071
- text-align: center;
1072
- color: var(--gray);
1073
- font-size: 13px;
1074
- border-radius: 10px;
1075
- background: rgba(0,0,0,0.04);
1076
- }
1077
-
1078
- .group-manage-empty.hidden {
1079
- display: none;
1080
- }
1081
-
1082
- .group-manage-item {
1083
- --depth: 0;
1084
- display: flex;
1085
- align-items: flex-start;
1086
- justify-content: space-between;
1087
- gap: 12px;
1088
- padding: 12px 14px;
1089
- border: 1px solid rgba(0,0,0,0.08);
1090
- border-radius: 12px;
1091
- background: white;
1092
- transition: all 0.2s ease;
1093
- }
1094
-
1095
- .group-manage-item:hover {
1096
- border-color: rgba(0,0,0,0.15);
1097
- box-shadow: 0 12px 30px rgba(15,23,42,0.12);
1098
- }
1099
-
1100
- .group-manage-item.is-disabled {
1101
- opacity: 0.85;
1102
- }
1103
-
1104
- .group-manage-info {
1105
- flex: 1;
1106
- min-width: 0;
1107
- }
1108
-
1109
- .group-manage-name {
1110
- display: flex;
1111
- align-items: center;
1112
- gap: 8px;
1113
- font-size: 14px;
1114
- font-weight: 560;
1115
- color: var(--dark);
1116
- padding-left: calc(var(--depth) * 16px);
1117
- }
1118
-
1119
- .group-manage-edit {
1120
- display: flex;
1121
- align-items: center;
1122
- gap: 8px;
1123
- padding-left: calc(var(--depth) * 16px);
1124
- }
1125
-
1126
- .group-manage-path {
1127
- font-size: 12px;
1128
- color: var(--gray);
1129
- margin-top: 4px;
1130
- word-break: break-all;
1131
- }
1132
-
1133
- .group-status-badge {
1134
- font-size: 11px;
1135
- padding: 2px 6px;
1136
- border-radius: 999px;
1137
- background: rgba(0,0,0,0.06);
1138
- color: var(--gray);
1139
- font-weight: 500;
1140
- margin-left: 6px;
1141
- }
1142
-
1143
- .group-status-badge.enabled {
1144
- background: rgba(40,167,69,0.12);
1145
- color: var(--success);
1146
- }
1147
-
1148
- .group-status-badge.disabled {
1149
- background: rgba(220,53,69,0.15);
1150
- color: var(--danger);
1151
- }
1152
-
1153
- .group-status-badge.default {
1154
- background: rgba(0,0,0,0.08);
1155
- color: var(--dark);
1156
- }
1157
-
1158
- .group-manage-actions {
1159
- display: flex;
1160
- align-items: center;
1161
- gap: 8px;
1162
- }
1163
-
1164
- .group-manage-action-btn {
1165
- border: none;
1166
- background: transparent;
1167
- padding: 6px 8px;
1168
- border-radius: 6px;
1169
- font-size: 13px;
1170
- color: var(--primary);
1171
- cursor: pointer;
1172
- transition: all 0.2s ease;
1173
- }
1174
-
1175
- .group-manage-action-btn:hover {
1176
- background: rgba(0,0,0,0.05);
1177
- }
1178
-
1179
- .group-manage-action-btn.danger {
1180
- color: var(--danger);
1181
- }
1182
-
1183
- .group-manage-action-btn[disabled] {
1184
- cursor: not-allowed;
1185
- opacity: 0.6;
1186
- }
1187
-
1188
- .group-manage-rename-input {
1189
- width: 100%;
1190
- padding: 8px 10px;
1191
- border: 1px solid var(--border);
1192
- border-radius: 8px;
1193
- font-size: 14px;
1194
- transition: all 0.2s ease;
1195
- }
1196
-
1197
- .group-manage-rename-input:focus {
1198
- outline: none;
1199
- border-color: var(--primary);
1200
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1201
- }
1202
-
1203
- .editor-container {
1204
- flex: 1;
1205
- display: flex;
1206
- flex-direction: column;
1207
- background: white;
1208
- border-left: 1px solid var(--border);
1209
- padding: 16px; /* 添加四周内边距 */
1210
- background: #f5f5f5;
1211
- }
1212
-
1213
- .editor-header {
1214
- padding: 15px 0;
1215
- /* border-bottom: 1px solid var(--border); */
1216
- display: flex;
1217
- flex-direction: column;
1218
- gap: 12px;
1219
- background: white;
1220
- }
1221
-
1222
- .editor-header-top {
1223
- display: flex;
1224
- gap: 8px;
1225
- align-items: center;
1226
- width: 100%;
1227
- }
1228
-
1229
- .editor-header-top input,
1230
- .prompt-description {
1231
- padding: 8px 12px;
1232
- border: 1px solid var(--border);
1233
- border-radius: 6px;
1234
- font-size: 14px;
1235
- background: white;
1236
- }
1237
-
1238
- .editor-header-top input {
1239
- flex: 1;
1240
- min-width: 0;
1241
- }
1242
-
1243
- .editor-header-top input:focus,
1244
- .prompt-description:focus {
1245
- outline: none;
1246
- border-color: var(--primary);
1247
- }
1248
-
1249
- .group-selector {
1250
- position: relative;
1251
- flex-shrink: 0;
1252
- }
1253
-
1254
- .group-selector-btn {
1255
- display: flex;
1256
- align-items: center;
1257
- gap: 8px;
1258
- min-width: 160px;
1259
- padding: 8px 12px;
1260
- border: 1px solid var(--border);
1261
- border-radius: 6px;
1262
- background: white;
1263
- font-size: 14px;
1264
- color: var(--dark);
1265
- cursor: pointer;
1266
- transition: all 0.2s ease;
1267
- }
1268
-
1269
- .group-selector-btn:hover {
1270
- border-color: var(--primary);
1271
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
1272
- transform: translateY(-1px);
1273
- }
1274
-
1275
- .group-selector-label {
1276
- color: var(--gray);
1277
- font-size: 12px;
1278
- letter-spacing: 0;
1279
- }
1280
-
1281
- .group-selector-value {
1282
- font-weight: 500;
1283
- color: var(--primary);
1284
- max-width: 160px;
1285
- overflow: hidden;
1286
- text-overflow: ellipsis;
1287
- white-space: nowrap;
1288
- }
1289
-
1290
- .group-selector-icon {
1291
- margin-left: auto;
1292
- display: flex;
1293
- align-items: center;
1294
- justify-content: center;
1295
- color: var(--gray);
1296
- }
1297
-
1298
- .group-selector-input {
1299
- position: absolute;
1300
- inset: 0;
1301
- opacity: 0;
1302
- pointer-events: none;
1303
- }
1304
-
1305
- .prompt-description {
1306
- width: 100%;
1307
- min-height: 38px;
1308
- line-height: 1.5;
1309
- resize: none;
1310
- overflow-y: hidden;
1311
- transition: border-color 0.2s ease;
1312
- }
1313
-
1314
- .prompt-description::-webkit-scrollbar {
1315
- width: 6px;
1316
- }
1317
-
1318
- .prompt-description::-webkit-scrollbar-thumb {
1319
- background: var(--gray-light);
1320
- border-radius: 3px;
1321
- }
1322
-
1323
- .editor-controls {
1324
- display: flex;
1325
- align-items: center;
1326
- gap: 16px;
1327
- margin-left: auto;
1328
- }
1329
-
1330
- .mode-toggle {
1331
- display: inline-flex;
1332
- align-items: center;
1333
- padding: 3px;
1334
- border-radius: 999px;
1335
- background: var(--light);
1336
- border: 1px solid var(--border);
1337
- }
1338
-
1339
- .mode-btn {
1340
- padding: 6px 18px;
1341
- border: none;
1342
- background: transparent;
1343
- border-radius: 999px;
1344
- font-size: 13px;
1345
- font-weight: 500;
1346
- cursor: pointer;
1347
- color: var(--gray);
1348
- transition: all 0.2s;
1349
- }
1350
-
1351
- .mode-btn.active {
1352
- background: white;
1353
- color: var(--primary);
1354
- box-shadow: 0 1px 4px rgba(0,0,0,0.08);
1355
- }
1356
-
1357
- .editor-content {
1358
- display: flex;
1359
- flex-direction: column;
1360
- flex: 1;
1361
- gap: 16px;
1362
- margin: 12px 0 20px;
1363
- overflow-y: auto;
1364
- scrollbar-width: none;
1365
- }
1366
-
1367
- .arguments-section {
1368
- padding: 10px 20px;
1369
- background: white;
1370
- border: 1px solid var(--border);
1371
- border-radius: 12px;
1372
- box-shadow: 0 8px 24px rgba(0,0,0,0.05);
1373
- display: flex;
1374
- flex-direction: column;
1375
- gap: 16px;
1376
- }
1377
-
1378
- .arguments-section.has-error {
1379
- border-color: rgba(220,53,69,0.4);
1380
- box-shadow: 0 0 0 2px rgba(220,53,69,0.08), 0 8px 24px rgba(220,53,69,0.08);
1381
- }
1382
-
1383
- .arguments-header {
1384
- display: flex;
1385
- align-items: center;
1386
- justify-content: space-between;
1387
- gap: 12px;
1388
- flex-wrap: wrap;
1389
- }
1390
-
1391
- .arguments-title {
1392
- display: flex;
1393
- flex-direction: column;
1394
- gap: 4px;
1395
- }
1396
-
1397
- .arguments-title span {
1398
- font-size: 14px;
1399
- font-weight: 600;
1400
- color: var(--gray);
1401
- }
1402
-
1403
- .arguments-title small {
1404
- font-size: 12px;
1405
- color: var(--gray);
1406
- }
1407
-
1408
- .arguments-actions {
1409
- display: flex;
1410
- gap: 10px;
1411
- align-items: center;
1412
- }
1413
-
1414
- .arguments-list {
1415
- display: grid;
1416
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1417
- gap: 12px;
1418
- }
1419
-
1420
- .arguments-empty {
1421
- grid-column: 1 / -1;
1422
- font-size: 13px;
1423
- color: var(--gray);
1424
- background: var(--light);
1425
- border: 1px dashed var(--border);
1426
- border-radius: 8px;
1427
- padding: 16px;
1428
- text-align: center;
1429
- }
1430
-
1431
- .argument-card {
1432
- border: 1px solid var(--border);
1433
- border-radius: 12px;
1434
- background: linear-gradient(180deg, rgba(248,249,250,0.9), rgba(255,255,255,0.9));
1435
- padding: 16px;
1436
- display: flex;
1437
- flex-direction: column;
1438
- gap: 12px;
1439
- /* min-height: 150px; */
1440
- position: relative;
1441
- overflow: hidden;
1442
- }
1443
-
1444
- .argument-card.argument-card-unused {
1445
- border-color: rgba(220,53,69,0.45);
1446
- box-shadow: 0 0 0 1px rgba(220,53,69,0.18);
1447
- background: rgba(220,53,69,0.04);
1448
- }
1449
-
1450
- .argument-card-header {
1451
- display: flex;
1452
- justify-content: space-between;
1453
- align-items: flex-start;
1454
- gap: 8px;
1455
- }
1456
-
1457
- .argument-name {
1458
- font-size: 15px;
1459
- font-weight: 600;
1460
- color: var(--primary);
1461
- word-break: break-all;
1462
- }
1463
-
1464
- .argument-badges {
1465
- display: flex;
1466
- flex-wrap: wrap;
1467
- gap: 6px;
1468
- }
1469
-
1470
- .argument-badge {
1471
- padding: 2px 8px;
1472
- border-radius: 999px;
1473
- font-size: 11px;
1474
- background: rgba(0,0,0,0.04);
1475
- color: var(--gray);
1476
- }
1477
-
1478
- .argument-required {
1479
- background: rgba(220,53,69,0.12);
1480
- color: var(--danger);
1481
- font-weight: 600;
1482
- }
1483
-
1484
- .argument-body {
1485
- display: flex;
1486
- flex-direction: column;
1487
- gap: 6px;
1488
- color: var(--gray);
1489
- font-size: 12px;
1490
- /* margin-bottom: 24px; */
1491
- }
1492
-
1493
- .argument-body .argument-description {
1494
- color: var(--dark);
1495
- font-size: 13px;
1496
- line-height: 1.5;
1497
- display: -webkit-box;
1498
- -webkit-line-clamp: 3;
1499
- -webkit-box-orient: vertical;
1500
- overflow: hidden;
1501
- }
1502
-
1503
- .argument-body .argument-placeholder {
1504
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1505
- background: rgba(0,0,0,0.04);
1506
- padding: 2px 6px;
1507
- border-radius: 4px;
1508
- color: var(--primary);
1509
- display: inline-block;
1510
- }
1511
-
1512
- .argument-actions {
1513
- display: flex;
1514
- justify-content: center;
1515
- gap: 8px;
1516
- opacity: 0;
1517
- visibility: hidden;
1518
- transition: all 0.25s ease;
1519
- position: absolute;
1520
- left: 0;
1521
- right: 0;
1522
- bottom: 0;
1523
- padding: 12px;
1524
- background: linear-gradient(to top,
1525
- rgba(255, 255, 255, 0.95) 0%,
1526
- rgba(255, 255, 255, 0.9) 50%,
1527
- rgba(255, 255, 255, 0) 100%);
1528
- transform: translateY(100%);
1529
- }
1530
-
1531
- .argument-card:hover .argument-actions {
1532
- opacity: 1;
1533
- visibility: visible;
1534
- transform: translateY(0);
1535
- }
1536
-
1537
- .argument-action-btn {
1538
- border: none;
1539
- background: rgba(0,0,0,0.06);
1540
- color: var(--primary);
1541
- font-size: 12px;
1542
- padding: 6px 12px;
1543
- border-radius: 6px;
1544
- cursor: pointer;
1545
- transition: all 0.2s ease;
1546
- backdrop-filter: blur(4px);
1547
- }
1548
-
1549
- .argument-action-btn:hover {
1550
- background: rgba(0,0,0,0.1);
1551
- transform: translateY(-1px);
1552
- }
1553
-
1554
- .argument-action-btn.delete {
1555
- color: var(--danger);
1556
- background: rgba(220,53,69,0.12);
1557
- }
1558
-
1559
- .argument-action-btn.delete:hover {
1560
- background: rgba(220,53,69,0.18);
1561
- }
1562
-
1563
- .modal {
1564
- position: fixed;
1565
- inset: 0;
1566
- background: rgba(17, 17, 17, 0.35);
1567
- display: flex;
1568
- align-items: center;
1569
- justify-content: center;
1570
- z-index: 1200;
1571
- padding: 24px;
1572
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1573
- backdrop-filter: blur(4px);
1574
- }
1575
-
1576
- .modal.hidden {
1577
- opacity: 0;
1578
- pointer-events: none;
1579
- }
1580
-
1581
- .modal.hidden .modal-content {
1582
- transform: scale(0.95) translateY(10px);
1583
- }
1584
-
1585
- .modal-dialog {
1586
- width: min(420px, 90vw);
1587
- margin: auto;
1588
- }
1589
-
1590
- .modal-content {
1591
- background: white;
1592
- border-radius: 16px;
1593
- box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
1594
- overflow: hidden;
1595
- transform: scale(1) translateY(0);
1596
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1597
- border: 1px solid rgba(0,0,0,0.08);
1598
- }
1599
-
1600
- .modal-header {
1601
- padding: 20px 24px;
1602
- border-bottom: 1px solid var(--border);
1603
- display: flex;
1604
- align-items: center;
1605
- justify-content: space-between;
1606
- background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.95));
1607
- }
1608
-
1609
- .modal-header h3 {
1610
- font-size: 18px;
1611
- font-weight: 580;
1612
- color: var(--dark);
1613
- letter-spacing: -0.01em;
1614
- margin: 0;
1615
- }
1616
-
1617
- .modal-close {
1618
- width: 32px;
1619
- height: 32px;
1620
- border: none;
1621
- background: transparent;
1622
- border-radius: 8px;
1623
- color: var(--gray);
1624
- cursor: pointer;
1625
- display: flex;
1626
- align-items: center;
1627
- justify-content: center;
1628
- transition: all 0.2s ease;
1629
- padding: 0;
1630
- }
1631
-
1632
- .modal-close:hover {
1633
- background: rgba(0,0,0,0.04);
1634
- color: var(--dark);
1635
- }
1636
-
1637
- .modal-body {
1638
- padding: 24px;
1639
- }
1640
-
1641
- .modal-footer {
1642
- padding: 16px 24px;
1643
- border-top: 1px solid var(--border);
1644
- display: flex;
1645
- justify-content: flex-end;
1646
- gap: 12px;
1647
- background: rgba(248,249,250,0.65);
1648
- }
1649
-
1650
- .group-dropdown {
1651
- position: absolute;
1652
- top: calc(100% + 8px);
1653
- right: 0;
1654
- width: 420px;
1655
- max-height: 420px;
1656
- padding: 16px;
1657
- border-radius: 14px;
1658
- background: white;
1659
- border: 1px solid rgba(0,0,0,0.08);
1660
- box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
1661
- display: none;
1662
- flex-direction: column;
1663
- gap: 14px;
1664
- z-index: 1200;
1665
- }
1666
-
1667
- .group-dropdown.show {
1668
- display: flex;
1669
- }
1670
-
1671
- .group-dropdown-search input {
1672
- width: 100%;
1673
- padding: 10px 14px;
1674
- border: 1px solid var(--border);
1675
- border-radius: 8px;
1676
- font-size: 14px;
1677
- transition: all 0.2s ease;
1678
- }
1679
-
1680
- .group-dropdown-search input:focus {
1681
- outline: none;
1682
- border-color: var(--primary);
1683
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1684
- }
1685
-
1686
- .group-dropdown-body {
1687
- display: flex;
1688
- flex-direction: column;
1689
- gap: 10px;
1690
- min-height: 220px;
1691
- }
1692
-
1693
- .group-cascader {
1694
- display: flex;
1695
- gap: 12px;
1696
- }
1697
-
1698
- .group-cascader-column {
1699
- flex: 1;
1700
- min-width: 0;
1701
- display: flex;
1702
- flex-direction: column;
1703
- gap: 4px;
1704
- max-height: 260px;
1705
- overflow-y: auto;
1706
- padding-right: 4px;
1707
- border-right: 1px solid rgba(0,0,0,0.06);
1708
- }
1709
-
1710
- .group-cascader-column:last-child {
1711
- border-right: none;
1712
- }
1713
-
1714
- .group-cascader-title {
1715
- font-size: 12px;
1716
- color: var(--gray);
1717
- letter-spacing: 0;
1718
- padding: 0 6px;
1719
- }
1720
-
1721
- .group-cascader-list {
1722
- display: flex;
1723
- flex-direction: column;
1724
- gap: 2px;
1725
- }
1726
-
1727
- .group-cascader-empty {
1728
- padding: 6px 4px;
1729
- font-size: 12px;
1730
- color: var(--gray);
1731
- }
1732
-
1733
- .group-cascader-item {
1734
- border: none;
1735
- background: transparent;
1736
- text-align: left;
1737
- padding: 6px 8px;
1738
- border-radius: 8px;
1739
- font-size: 13px;
1740
- color: var(--dark);
1741
- cursor: pointer;
1742
- transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
1743
- position: relative;
1744
- }
1745
-
1746
- .group-cascader-item:hover {
1747
- background: rgba(0,0,0,0.05);
1748
- color: var(--primary);
1749
- padding-left: 12px;
1750
- }
1751
-
1752
- .group-cascader-item.active {
1753
- background: rgba(0,0,0,0.04);
1754
- color: var(--primary);
1755
- }
1756
-
1757
- .group-cascader-label {
1758
- display: inline-flex;
1759
- align-items: center;
1760
- gap: 6px;
1761
- }
1762
-
1763
- .group-cascader-path-hint {
1764
- font-size: 11px;
1765
- color: var(--gray);
1766
- letter-spacing: 0;
1767
- margin-left: 6px;
1768
- }
1769
-
1770
- .group-cascader-suffix {
1771
- margin-left: auto;
1772
- font-size: 12px;
1773
- color: var(--gray);
1774
- transition: color 0.18s ease;
1775
- display: inline-flex;
1776
- align-items: center;
1777
- }
1778
-
1779
- .group-cascader-item:hover .group-cascader-suffix,
1780
- .group-cascader-item.active .group-cascader-suffix,
1781
- .group-cascader-item.selected .group-cascader-suffix {
1782
- color: var(--primary);
1783
- }
1784
-
1785
- .group-cascader-check {
1786
- margin-left: auto;
1787
- font-size: 12px;
1788
- color: var(--primary);
1789
- display: inline-flex;
1790
- align-items: center;
1791
- }
1792
-
1793
- .group-search-results {
1794
- display: none;
1795
- flex-direction: column;
1796
- gap: 6px;
1797
- max-height: 280px;
1798
- overflow-y: auto;
1799
- padding-right: 4px;
1800
- }
1801
-
1802
- .group-search-results.show {
1803
- display: flex;
1804
- }
1805
-
1806
- .group-search-item {
1807
- border: 1px solid rgba(0,0,0,0.06);
1808
- border-radius: 10px;
1809
- padding: 8px 10px;
1810
- display: flex;
1811
- flex-direction: column;
1812
- gap: 4px;
1813
- cursor: pointer;
1814
- transition: all 0.2s ease;
1815
- background: white;
1816
- text-align: left;
1817
- font-size: 13px;
1818
- color: var(--dark);
1819
- }
1820
-
1821
- .group-search-item:hover {
1822
- border-color: var(--primary);
1823
- box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
1824
- transform: translateY(-1px);
1825
- }
1826
-
1827
- .group-search-item.selected {
1828
- border-color: var(--primary);
1829
- box-shadow: inset 0 0 0 1px var(--primary);
1830
- }
1831
-
1832
- .group-search-path {
1833
- font-size: 12px;
1834
- color: var(--gray);
1835
- letter-spacing: 0;
1836
- }
1837
-
1838
- .group-dropdown-empty {
1839
- padding: 18px 12px;
1840
- border-radius: 10px;
1841
- text-align: center;
1842
- background: rgba(0,0,0,0.03);
1843
- color: var(--gray);
1844
- font-size: 13px;
1845
- }
1846
-
1847
- .group-dropdown-empty.hidden {
1848
- display: none;
1849
- }
1850
-
1851
- .form-group {
1852
- margin-bottom: 0;
1853
- }
1854
-
1855
- .form-group label {
1856
- display: block;
1857
- margin-bottom: 8px;
1858
- font-size: 14px;
1859
- font-weight: 500;
1860
- color: var(--gray);
1861
- }
1862
-
1863
- .form-group input {
1864
- width: 100%;
1865
- padding: 12px 14px;
1866
- border: 1.5px solid var(--border);
1867
- border-radius: 10px;
1868
- font-size: 15px;
1869
- transition: all 0.2s ease;
1870
- background: white;
1871
- }
1872
-
1873
- .form-group input:focus {
1874
- outline: none;
1875
- border-color: var(--primary);
1876
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
1877
- }
1878
-
1879
- .form-group input::placeholder {
1880
- color: #adb5bd;
1881
- opacity: 0.8;
1882
- }
1883
-
1884
- .argument-modal {
1885
- position: fixed;
1886
- inset: 0;
1887
- background: rgba(17, 17, 17, 0.4);
1888
- display: flex;
1889
- align-items: center;
1890
- justify-content: center;
1891
- z-index: 1200;
1892
- padding: 24px;
1893
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1894
- backdrop-filter: blur(4px);
1895
- }
1896
-
1897
- .argument-modal.hidden {
1898
- opacity: 0;
1899
- pointer-events: none;
1900
- }
1901
-
1902
- .argument-modal.hidden .argument-modal-dialog {
1903
- transform: scale(0.95) translateY(10px);
1904
- }
1905
-
1906
- .argument-modal-dialog {
1907
- width: min(520px, 100%);
1908
- background: white;
1909
- border-radius: 16px;
1910
- box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
1911
- display: flex;
1912
- flex-direction: column;
1913
- overflow: hidden;
1914
- border: 1px solid rgba(0,0,0,0.08);
1915
- transform: scale(1) translateY(0);
1916
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1917
- }
1918
-
1919
- .argument-modal-header {
1920
- display: flex;
1921
- justify-content: space-between;
1922
- align-items: center;
1923
- padding: 20px 24px;
1924
- border-bottom: 1px solid var(--border);
1925
- background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.95));
1926
- }
1927
-
1928
- .argument-modal-header h3 {
1929
- font-size: 18px;
1930
- font-weight: 580;
1931
- color: var(--dark);
1932
- letter-spacing: -0.01em;
1933
- margin: 0;
1934
- }
1935
-
1936
- .argument-modal-close {
1937
- width: 32px;
1938
- height: 32px;
1939
- border: none;
1940
- background: transparent;
1941
- border-radius: 8px;
1942
- color: var(--gray);
1943
- cursor: pointer;
1944
- display: flex;
1945
- align-items: center;
1946
- justify-content: center;
1947
- transition: all 0.2s ease;
1948
- padding: 0;
1949
- }
1950
-
1951
- .argument-modal-close:hover {
1952
- background: rgba(0,0,0,0.04);
1953
- color: var(--dark);
1954
- }
1955
-
1956
- .argument-modal-body {
1957
- padding: 24px;
1958
- }
1959
-
1960
- .argument-form-grid {
1961
- display: grid;
1962
- grid-template-columns: repeat(2, minmax(0, 1fr));
1963
- gap: 20px;
1964
- }
1965
-
1966
- .form-field {
1967
- display: flex;
1968
- flex-direction: column;
1969
- }
1970
-
1971
- .form-field.full-width {
1972
- grid-column: 1 / -1;
1973
- }
1974
-
1975
- .form-field-inline {
1976
- align-self: end;
1977
- height: 100%;
1978
- display: flex;
1979
- align-items: flex-end;
1980
- padding-top: 26px;
1981
- }
1982
-
1983
- .argument-modal label {
1984
- font-size: 13px;
1985
- color: var(--dark);
1986
- font-weight: 500;
1987
- letter-spacing: 0.01em;
1988
- margin-bottom: 6px;
1989
- }
1990
-
1991
- .argument-modal .required {
1992
- color: var(--danger);
1993
- font-weight: 600;
1994
- font-size: 12px;
1995
- }
1996
-
1997
- /* 统一表单字段样式 */
1998
- .argument-modal .form-field input,
1999
- .argument-modal .form-field textarea {
2000
- width: 100%;
2001
- padding: 10px 12px;
2002
- border: 1px solid var(--border);
2003
- border-radius: 8px;
2004
- font-size: 14px;
2005
- transition: all 0.2s ease;
2006
- background: white;
2007
- box-shadow: 0 1px 2px rgba(0,0,0,0.02);
2008
- color: var(--dark);
2009
- }
2010
-
2011
- .argument-modal .form-field input:focus,
2012
- .argument-modal .form-field textarea:focus {
2013
- outline: none;
2014
- border-color: var(--primary);
2015
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1), 0 1px 2px rgba(0,0,0,0.05);
2016
- background: white;
2017
- }
2018
-
2019
- .argument-modal .form-field input::placeholder,
2020
- .argument-modal .form-field textarea::placeholder {
2021
- color: #a0aec0;
2022
- opacity: 0.8;
2023
- }
2024
-
2025
- /* 必填字段的特殊样式 */
2026
- .argument-modal .form-field.required-field input,
2027
- .argument-modal .form-field.required-field textarea {
2028
- border: 1px solid #cbd5e0;
2029
- background: #fafafa;
2030
- }
2031
-
2032
- .argument-modal .form-field.required-field input:focus,
2033
- .argument-modal .form-field.required-field textarea:focus {
2034
- border-color: var(--primary);
2035
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1), 0 1px 2px rgba(0,0,0,0.05);
2036
- background: white;
2037
- }
2038
-
2039
- .argument-modal textarea {
2040
- resize: vertical;
2041
- min-height: 100px;
2042
- line-height: 1.5;
2043
- }
2044
-
2045
- /* 现代化复选框样式 */
2046
- .checkbox-field {
2047
- display: inline-flex;
2048
- align-items: center;
2049
- gap: 8px;
2050
- font-size: 13px;
2051
- color: var(--dark);
2052
- cursor: pointer;
2053
- padding: 6px 0;
2054
- border: none;
2055
- border-radius: 0;
2056
- }
2057
-
2058
- .checkbox-field:hover {
2059
- /* background-color: rgba(0,0,0,0.03); */
2060
- }
2061
-
2062
- .checkbox-field input[type="checkbox"] {
2063
- position: relative;
2064
- width: 18px;
2065
- height: 18px;
2066
- appearance: none;
2067
- background: white;
2068
- border: 1px solid #cbd5e0;
2069
- border-radius: 4px;
2070
- cursor: pointer;
2071
- padding: 10px 10px;
2072
- transition: all 0.2s ease;
2073
- box-shadow: 0 1px 2px rgba(0,0,0,0.03);
2074
- }
2075
-
2076
- .checkbox-field input[type="checkbox"]:checked {
2077
- background: var(--primary);
2078
- border-color: var(--primary);
2079
- }
2080
-
2081
- .checkbox-field input[type="checkbox"]:checked::before {
2082
- content: '';
2083
- position: absolute;
2084
- left: 50%;
2085
- top: 50%;
2086
- width: 4px;
2087
- height: 8px;
2088
- border: solid white;
2089
- border-width: 0 2px 2px 0;
2090
- transform: translate(-50%, -50%) rotate(45deg);
2091
- }
2092
-
2093
- .checkbox-field input[type="checkbox"]:focus {
2094
- outline: none;
2095
- box-shadow: 0 0 0 3px rgba(57,57,57,0.1), 0 1px 2px rgba(0,0,0,0.05);
2096
- }
2097
-
2098
- .form-control {
2099
- width: 100%;
2100
- padding: 12px 14px;
2101
- border: 1.5px solid var(--border);
2102
- border-radius: 10px;
2103
- font-size: 15px;
2104
- transition: all 0.2s ease;
2105
- background: white;
2106
- }
2107
-
2108
- .form-control:focus {
2109
- outline: none;
2110
- border-color: var(--primary);
2111
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08);
2112
- }
2113
-
2114
- .form-control::placeholder {
2115
- color: #adb5bd;
2116
- opacity: 0.8;
2117
- }
2118
-
2119
- .argument-modal-footer {
2120
- display: flex;
2121
- justify-content: flex-end;
2122
- gap: 12px;
2123
- padding: 16px 24px;
2124
- border-top: 1px solid var(--border);
2125
- background: rgba(248,249,250,0.65);
2126
- }
2127
-
2128
- body.modal-open {
2129
- overflow: hidden;
2130
- }
2131
-
2132
- .editor-body {
2133
- position: relative;
2134
- flex: 1;
2135
- box-sizing: border-box;
2136
- min-height: 0;
2137
- }
2138
-
2139
- .workspace-pane {
2140
- position: absolute;
2141
- inset: 0;
2142
- display: flex;
2143
- flex-direction: column;
2144
- background: white;
2145
- transition: opacity 0.25s ease;
2146
- border-radius: 12px;
2147
- overflow: hidden;
2148
- border: 1px solid var(--border);
2149
- box-shadow: 0 8px 24px rgba(0,0,0,0.05);
2150
- min-height: 400px;
2151
- scrollbar-width: none;
2152
- }
2153
-
2154
- .workspace-pane.hidden {
2155
- opacity: 0;
2156
- visibility: hidden;
2157
- pointer-events: none;
2158
- }
2159
-
2160
- .pane-header {
2161
- padding: 10px 24px;
2162
- border-bottom: 1px solid var(--border);
2163
- background: white;
2164
- font-size: 14px;
2165
- font-weight: 600;
2166
- color: var(--gray);
2167
- }
2168
-
2169
- .pane-content {
2170
- flex: 1;
2171
- display: flex;
2172
- flex-direction: column;
2173
- padding: 0;
2174
- min-height: 200px;
2175
- height: 100%;
2176
- }
2177
-
2178
- .pane-content.preview {
2179
- background: var(--preview-bg);
2180
- padding: 24px;
2181
- }
2182
-
2183
- /* 原始textarea样式 */
2184
- #editor {
2185
- width: 100%;
2186
- height: 100%;
2187
- min-height: 200px;
2188
- border: none;
2189
- outline: none;
2190
- font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2191
- font-size: 14px;
2192
- line-height: 1.5;
2193
- padding: 8px 12px;
2194
- resize: none;
2195
- flex: 1;
2196
- }
2197
-
2198
- /* CodeMirror 5 编辑器样式 */
2199
- .CodeMirror {
2200
- height: auto;
2201
- min-height: 200px;
2202
- font-size: 14px;
2203
- line-height: 1.5;
2204
- color: #000;
2205
- background: #fff;
2206
- /* border: 1px solid #e0e0e0; */
2207
- border-radius: 4px;
2208
- padding: 8px; /* 添加内边距 */
2209
- }
2210
-
2211
- .cm-scroller {
2212
- font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2213
- height: 100%;
2214
- overflow: auto;
2215
- }
2216
-
2217
- .cm-content {
2218
- padding: 8px 12px;
2219
- height: 100%;
2220
- }
2221
-
2222
- .cm-gutters {
2223
- display: none;
2224
- }
2225
-
2226
- .cm-line {
2227
- padding: 0 4px;
2228
- height: 1.5em;
2229
- }
2230
-
2231
- .preview-content {
2232
- flex: 1;
2233
- padding: 24px;
2234
- overflow: auto;
2235
- background: white;
2236
- border-radius: 12px;
2237
- box-shadow: 0 8px 24px rgba(0,0,0,0.08);
2238
- scrollbar-width: thin;
2239
- scrollbar-color: var(--gray-light) transparent;
2240
- }
2241
-
2242
- /* 预览模式下的 CodeMirror 样式调整 */
2243
- .preview-content .CodeMirror {
2244
- height: auto;
2245
- background: transparent;
2246
- border: none;
2247
- padding: 0;
2248
- font-size: 14px;
2249
- }
2250
-
2251
- .preview-content .CodeMirror-scroll {
2252
- overflow: hidden !important;
2253
- }
2254
-
2255
- .preview-content .CodeMirror-gutters {
2256
- display: none;
2257
- }
2258
-
2259
- .preview-content .CodeMirror-cursor {
2260
- display: none !important;
2261
- }
2262
-
2263
- @media (max-width: 1100px) {
2264
- .arguments-list {
2265
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
2266
- }
2267
- }
2268
-
2269
- .empty-state {
2270
- text-align: center;
2271
- padding: 40px 20px;
2272
- color: var(--gray);
2273
- }
2274
-
2275
- .empty-state h3 {
2276
- margin-bottom: 8px;
2277
- font-weight: 500;
2278
- }
2279
-
2280
- .empty-state p {
2281
- font-size: 14px;
2282
- margin-bottom: 16px;
2283
- }
2284
-
2285
- .login-container {
2286
- position: fixed;
2287
- top: 0;
2288
- left: 0;
2289
- right: 0;
2290
- bottom: 0;
2291
- background: linear-gradient(135deg,
2292
- rgba(255,255,255,0.92),
2293
- rgba(248,249,250,0.95),
2294
- rgba(255,255,255,0.98)
2295
- );
2296
- display: flex;
2297
- align-items: center;
2298
- justify-content: center;
2299
- z-index: 1000;
2300
- backdrop-filter: blur(12px);
2301
- }
2302
-
2303
- .login-box {
2304
- width: 400px;
2305
- background: white;
2306
- border-radius: 20px;
2307
- box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
2308
- padding: 48px 40px;
2309
- text-align: center;
2310
- border: 1px solid rgba(0,0,0,0.06);
2311
- position: relative;
2312
- animation: login-box-show 0.5s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
2313
- backdrop-filter: blur(10px);
2314
- background: linear-gradient(180deg,
2315
- rgba(255, 255, 255, 0.98) 0%,
2316
- rgba(255, 255, 255, 0.96) 100%
2317
- );
2318
- }
2319
-
2320
- @keyframes login-box-show {
2321
- 0% {
2322
- opacity: 0;
2323
- transform: translateY(20px);
2324
- }
2325
- 100% {
2326
- opacity: 1;
2327
- transform: translateY(0);
2328
- }
2329
- }
2330
-
2331
- .login-box h2 {
2332
- font-size: 28px;
2333
- font-weight: 600;
2334
- color: var(--primary);
2335
- margin-bottom: 36px;
2336
- position: relative;
2337
- display: inline-block;
2338
- }
2339
-
2340
- .login-box h2::after {
2341
- content: '';
2342
- position: absolute;
2343
- bottom: -12px;
2344
- left: 50%;
2345
- transform: translateX(-50%);
2346
- width: 45px;
2347
- height: 4px;
2348
- background: linear-gradient(to right, var(--primary), var(--primary-dark));
2349
- border-radius: 4px;
2350
- opacity: 0.8;
2351
- }
2352
-
2353
- .login-box .input-group {
2354
- position: relative;
2355
- margin-bottom: 24px;
2356
- width: 100%;
2357
- }
2358
-
2359
- .login-box .input-group::before {
2360
- content: '';
2361
- position: absolute;
2362
- left: 16px;
2363
- top: 50%;
2364
- transform: translateY(-50%);
2365
- width: 16px;
2366
- height: 16px;
2367
- opacity: 0.5;
2368
- transition: opacity 0.2s ease;
2369
- background-size: contain;
2370
- background-repeat: no-repeat;
2371
- }
2372
-
2373
- .login-box .input-group.username::before {
2374
- 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");
2375
- }
2376
-
2377
- .login-box .input-group.password::before {
2378
- 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");
2379
- }
2380
-
2381
- .login-box .input-group:focus-within::before {
2382
- opacity: 1;
2383
- }
2384
-
2385
- .login-box input {
2386
- width: 100%;
2387
- padding: 14px 15px 14px 48px;
2388
- border: 1.5px solid var(--border);
2389
- border-radius: 12px;
2390
- font-size: 16px;
2391
- font-weight: 450;
2392
- letter-spacing: -0.01em;
2393
- transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
2394
- background: rgba(255, 255, 255, 0.9);
2395
- box-shadow: 0 2px 6px rgba(0,0,0,0.02);
2396
- }
2397
-
2398
- .login-box input:focus {
2399
- outline: none;
2400
- border-color: var(--primary);
2401
- border-width: 1.5px;
2402
- box-shadow: 0 0 0 3px rgba(57,57,57,0.08), 0 2px 8px rgba(0,0,0,0.04);
2403
- background: white;
2404
- }
2405
-
2406
- .login-box input::placeholder {
2407
- color: #adb5bd;
2408
- font-size: 15px;
2409
- font-weight: 450;
2410
- letter-spacing: -0.01em;
2411
- opacity: 0.85;
2412
- }
2413
-
2414
- .login-box button {
2415
- width: 100%;
2416
- padding: 16px 132px;
2417
- margin-top: 32px;
2418
- border: none;
2419
- border-radius: 12px;
2420
- font-size: 16px;
2421
- font-weight: 520;
2422
- background: var(--primary);
2423
- color: white;
2424
- cursor: pointer;
2425
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2426
- position: relative;
2427
- overflow: hidden;
2428
- letter-spacing: 0.02em;
2429
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
2430
- }
2431
-
2432
- .login-box button::before {
2433
- content: '';
2434
- position: absolute;
2435
- top: 0;
2436
- left: 0;
2437
- right: 0;
2438
- bottom: 0;
2439
- background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
2440
- transform: translateX(-100%);
2441
- transition: transform 0.8s ease;
2442
- }
2443
-
2444
- .login-box button:hover {
2445
- background: var(--primary-dark);
2446
- transform: translateY(-2px);
2447
- box-shadow: 0 8px 16px rgba(0,0,0,0.12);
2448
- }
2449
-
2450
- .login-box button:active {
2451
- transform: translateY(0);
2452
- box-shadow: 0 3px 8px rgba(0,0,0,0.08);
2453
- background: var(--primary);
2454
- }
2455
-
2456
- .login-box button:hover::before {
2457
- transform: translateX(100%);
2458
- }
2459
-
2460
- .error-msg {
2461
- color: var(--danger);
2462
- font-size: 13px;
2463
- margin-top: 12px;
2464
- text-align: center;
2465
- opacity: 0;
2466
- transform: translateY(-10px);
2467
- animation: error-show 0.3s ease forwards;
2468
- display: flex;
2469
- align-items: center;
2470
- justify-content: center;
2471
- gap: 6px;
2472
- }
2473
-
2474
- .error-msg::before {
2475
- content: '';
2476
- width: 16px;
2477
- height: 16px;
2478
- 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;
2479
- background-size: contain;
2480
- }
2481
-
2482
- @keyframes error-show {
2483
- to {
2484
- opacity: 1;
2485
- transform: translateY(0);
2486
- }
2487
- }
2488
-
2489
- .success-msg {
2490
- color: var(--success);
2491
- font-size: 13px;
2492
- margin-top: 12px;
2493
- text-align: center;
2494
- display: flex;
2495
- align-items: center;
2496
- justify-content: center;
2497
- gap: 6px;
2498
- }
2499
-
2500
- .success-msg::before {
2501
- content: '';
2502
- width: 16px;
2503
- height: 16px;
2504
- 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;
2505
- background-size: contain;
2506
- }
2507
-
2508
- .loading {
2509
- opacity: 0.6;
2510
- pointer-events: none;
2511
- }
2512
-
2513
- .status-badge {
2514
- display: inline-flex;
2515
- align-items: center;
2516
- gap: 4px;
2517
- padding: 4px 8px;
2518
- border-radius: 12px;
2519
- font-size: 12px;
2520
- font-weight: 500;
2521
- }
2522
-
2523
- .status-badge.enabled {
2524
- background: rgba(40,167,69,0.1);
2525
- color: var(--success);
2526
- }
2527
-
2528
- .status-badge.disabled {
2529
- background: rgba(220,53,69,0.1);
2530
- color: var(--danger);
2531
- }
2532
-
2533
- /* 加载中效果 */
2534
- .loading-overlay {
2535
- position: fixed;
2536
- top: 0;
2537
- left: 0;
2538
- width: 100%;
2539
- height: 100%;
2540
- background: rgba(255, 255, 255, 0.92);
2541
- display: flex;
2542
- flex-direction: column;
2543
- align-items: center;
2544
- justify-content: center;
2545
- z-index: 9999;
2546
- backdrop-filter: blur(1px);
2547
- }
2548
-
2549
- .loading-overlay.hidden {
2550
- display: none;
2551
- }
2552
-
2553
- .loading-spinner {
2554
- width: 50px;
2555
- height: 50px;
2556
- border: 4px solid rgba(57, 57, 57, 0.08);
2557
- border-top: 4px solid rgba(57, 57, 57, 0.4);
2558
- border-radius: 50%;
2559
- animation: spin 1s linear infinite;
2560
- margin-bottom: 20px;
2561
- }
2562
-
2563
- .loading-text {
2564
- font-size: 16px;
2565
- color: rgba(26, 26, 26, 0.7);
2566
- font-weight: 500;
2567
- text-align: center;
2568
- }
2569
-
2570
- .loading-subtext {
2571
- font-size: 13px;
2572
- color: rgba(108, 117, 125, 0.7);
2573
- margin-top: 8px;
2574
- text-align: center;
2575
- }
2576
-
2577
- @keyframes spin {
2578
- 0% { transform: rotate(0deg); }
2579
- 100% { transform: rotate(360deg); }
2580
- }
2581
-
2582
- #promptEditorArea {
2583
- display: none;
2584
- flex-direction: column;
2585
- height: 100%;
2586
- width: min(1280px, 100% - 48px);
2587
- margin: 0 auto;
2588
- padding:8px 15px;
2589
- background: #ffffff;
2590
- border-radius: 8px;
2591
- box-shadow: 4px 4px 4px #ccc;
2592
- }