195 lines
4.5 KiB
CSS
195 lines
4.5 KiB
CSS
/**
|
|
* 提示词模板编辑页面样式
|
|
*/
|
|
|
|
.prompt-new-page {
|
|
--primary-color: var(--color-primary, #00684a);
|
|
--primary-hover: var(--color-primary-hover, #005a40);
|
|
--primary-light: rgba(0, 104, 74, 0.1);
|
|
--success-color: var(--color-success, #52c41a);
|
|
--warning-color: var(--color-warning, #faad14);
|
|
--error-color: var(--color-error, #ff4d4f);
|
|
--text-color: rgba(0, 0, 0, 0.85);
|
|
--text-secondary: rgba(0, 0, 0, 0.45);
|
|
--border-color: #f0f0f0;
|
|
--bg-gray: #f5f5f5;
|
|
}
|
|
|
|
/* 页面头部 */
|
|
.prompt-new-page .page-header {
|
|
@apply flex justify-between items-center mb-4;
|
|
}
|
|
|
|
.prompt-new-page .page-title {
|
|
@apply text-xl font-medium;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.prompt-new-page .form-group {
|
|
@apply mb-5;
|
|
}
|
|
|
|
.prompt-new-page .form-label {
|
|
@apply block mb-1.5 text-sm font-medium text-gray-800;
|
|
}
|
|
|
|
.prompt-new-page .form-input,
|
|
.prompt-new-page .form-select,
|
|
.prompt-new-page .form-textarea {
|
|
@apply w-full px-3 py-2 text-sm border border-gray-300 rounded transition-all duration-300;
|
|
}
|
|
|
|
.prompt-new-page .form-input:focus,
|
|
.prompt-new-page .form-select:focus,
|
|
.prompt-new-page .form-textarea:focus,
|
|
.prompt-new-page .form-code-editor:focus {
|
|
@apply outline-none border-[var(--primary-color)] shadow-[0_0_0_2px_rgba(0,104,74,0.2)];
|
|
}
|
|
|
|
.prompt-new-page .form-textarea {
|
|
@apply min-h-[80px];
|
|
resize: vertical;
|
|
}
|
|
|
|
.prompt-new-page .form-code-editor {
|
|
@apply font-mono text-sm p-3 min-h-[300px] rounded border border-gray-300 w-full whitespace-pre-wrap;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.prompt-new-page .help-text {
|
|
@apply text-[var(--text-secondary)] text-xs mt-1;
|
|
}
|
|
|
|
/* 只读字段 */
|
|
.prompt-new-page .read-only-field {
|
|
@apply bg-[var(--bg-gray)] cursor-not-allowed;
|
|
}
|
|
|
|
/* 变量相关样式 */
|
|
.prompt-new-page .var-container {
|
|
@apply flex flex-wrap gap-2 mt-2;
|
|
}
|
|
|
|
.prompt-new-page .var-badge {
|
|
@apply inline-flex items-center px-2 py-1 rounded-full bg-[var(--primary-light)] text-[var(--primary-color)] text-xs mr-1.5 mb-1.5;
|
|
}
|
|
|
|
.prompt-new-page .var-badge i {
|
|
@apply text-sm ml-1 cursor-pointer;
|
|
}
|
|
|
|
.prompt-new-page .example-section {
|
|
@apply mt-2 border border-[var(--border-color)] rounded p-3;
|
|
}
|
|
|
|
.prompt-new-page .example-header {
|
|
@apply font-medium mb-2 text-sm;
|
|
}
|
|
|
|
.prompt-new-page .var-input-group {
|
|
@apply flex gap-2 mb-2;
|
|
}
|
|
|
|
.prompt-new-page .var-input-group .form-input {
|
|
@apply flex-1 mb-0;
|
|
}
|
|
|
|
/* 开关样式 */
|
|
.prompt-new-page .switch {
|
|
@apply relative inline-block w-11 h-[22px];
|
|
}
|
|
|
|
.prompt-new-page .switch input {
|
|
@apply opacity-0 w-0 h-0;
|
|
}
|
|
|
|
.prompt-new-page .slider {
|
|
@apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-400 rounded-full transition-all duration-300;
|
|
}
|
|
|
|
.prompt-new-page .slider:before {
|
|
content: "";
|
|
@apply absolute h-[18px] w-[18px] left-[3px] bottom-[2px] bg-white rounded-full transition-all duration-300;
|
|
}
|
|
|
|
.prompt-new-page input:checked + .slider {
|
|
@apply bg-[var(--primary-color)];
|
|
}
|
|
|
|
.prompt-new-page input:focus + .slider {
|
|
@apply shadow-[0_0_1px_var(--primary-color)];
|
|
}
|
|
|
|
.prompt-new-page input:checked + .slider:before {
|
|
@apply transform translate-x-5;
|
|
}
|
|
|
|
/* 警告框样式 */
|
|
.prompt-new-page .alert {
|
|
@apply p-3 rounded mb-4 flex items-start;
|
|
}
|
|
|
|
.prompt-new-page .alert i {
|
|
@apply mr-2 mt-0.5;
|
|
}
|
|
|
|
.prompt-new-page .alert-info {
|
|
@apply bg-[#e6f7ff] border border-[#91d5ff] text-[#1890ff];
|
|
}
|
|
|
|
.prompt-new-page .alert-warning {
|
|
@apply bg-[#fffbe6] border border-[#ffe58f] text-[#faad14];
|
|
}
|
|
|
|
/* 类型标签 */
|
|
.prompt-new-page .type-tag {
|
|
@apply inline-flex items-center px-2 py-1 rounded text-xs mb-2;
|
|
}
|
|
|
|
.prompt-new-page .type-common {
|
|
@apply bg-[var(--primary-light)] text-[var(--primary-color)];
|
|
}
|
|
|
|
.prompt-new-page .type-extraction {
|
|
@apply bg-[rgba(82,196,26,0.1)] text-[var(--success-color)];
|
|
}
|
|
|
|
.prompt-new-page .type-evaluation {
|
|
@apply bg-[rgba(250,173,20,0.1)] text-[var(--warning-color)];
|
|
}
|
|
|
|
.prompt-new-page .type-summary {
|
|
@apply bg-[rgba(24,144,255,0.1)] text-[#1890ff];
|
|
}
|
|
|
|
/* 代码块样式 */
|
|
.prompt-new-page code {
|
|
@apply bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm font-mono;
|
|
}
|
|
|
|
/* 文本颜色 */
|
|
.prompt-new-page .text-error {
|
|
@apply text-[var(--error-color)];
|
|
}
|
|
|
|
.prompt-new-page .text-secondary {
|
|
@apply text-[var(--text-secondary)];
|
|
}
|
|
|
|
.prompt-new-page .text-primary {
|
|
@apply text-[var(--primary-color)];
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.prompt-new-page .ant-card {
|
|
@apply bg-white rounded-lg shadow-sm border border-gray-200 mb-4;
|
|
}
|
|
|
|
.prompt-new-page .ant-card-header {
|
|
@apply px-4 py-3 border-b border-gray-100 font-medium;
|
|
}
|
|
|
|
.prompt-new-page .ant-card-body {
|
|
@apply p-4;
|
|
} |