zentaobiz.ui.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /* 通用智能体 - 调试 Modal */
  2. .test-miniprogram {
  3. height: 100%;
  4. display: flex;
  5. flex-direction: column;
  6. gap: 16px;
  7. }
  8. .test-miniprogram .modal-name {
  9. margin: 0;
  10. font-size: 16px;
  11. }
  12. .test-miniprogram .panels {
  13. flex: 1;
  14. max-height: calc(100% - 88px);
  15. display: flex;
  16. background-color: #FAFAFA;
  17. }
  18. .test-miniprogram .panels > div {
  19. flex: 1;
  20. padding: 16px;
  21. padding-top: 8px;
  22. display: flex;
  23. flex-direction: column;
  24. }
  25. .test-miniprogram .panel-debug {
  26. border-right: solid 1px #EFF1F7;
  27. flex-basis: 55%;
  28. }
  29. .test-miniprogram .panel-preview {
  30. flex-basis: 45%;
  31. }
  32. .test-miniprogram .panels .panel-content {
  33. flex: 1;
  34. overflow-y: auto;
  35. display: flex;
  36. flex-direction: column;
  37. gap: 16px;
  38. }
  39. #form-fields {
  40. padding: 1px;
  41. overflow-y: auto;
  42. }
  43. .test-miniprogram .panel-area {
  44. flex: 1;
  45. flex-shrink: 0;
  46. max-height: 50%;
  47. display: flex;
  48. flex-direction: column;
  49. gap: 16px;
  50. }
  51. .test-miniprogram .panel-area h3 {
  52. margin: 0;
  53. height: 32px;
  54. display: flex;
  55. align-items: center;
  56. font-size: 14px;
  57. gap: 4px;
  58. position: relative;
  59. flex-shrink: 0;
  60. }
  61. .test-miniprogram #generate-result {
  62. position: absolute;
  63. padding: 0 6px;
  64. right: 0;
  65. top: 50%;
  66. translate: 0 -50%;
  67. text-decoration: none;
  68. color: #2E7FFF;
  69. font-weight: normal;
  70. }
  71. #form-fields,
  72. .prompt-editor {
  73. padding: 1px; /* 修复 outline 被裁切的问题 */
  74. }
  75. .test-miniprogram .preview-box {
  76. flex: 1;
  77. padding: 8px;
  78. background-color: #F8F8F8;
  79. border: 1px solid #D8DBDE;
  80. overflow-y: auto;
  81. word-break: break-word;
  82. white-space: pre-wrap;
  83. }
  84. .prompt-editor,
  85. #prompt-editor,
  86. #prompt-editor div[contenteditable="true"] {
  87. height: 100%;
  88. }
  89. #prompt-preview span {
  90. color: #2E7FFF;
  91. font-weight: bold;
  92. }
  93. .test-miniprogram .actions {
  94. display: flex;
  95. justify-content: center;
  96. gap: 16px;
  97. }
  98. .test-miniprogram .actions .btn {
  99. width: 80px;
  100. }
  101. .modal-icon-warning {
  102. color: #FF9F46;
  103. }