Merge branch 'shiy' into awen
# Conflicts: # package-lock.json # package.json
This commit is contained in:
@@ -94,7 +94,7 @@
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply bg-white border border-gray-300 text-gray-800 hover:border-[#00684a] focus:ring-[#00684a];
|
||||
@apply bg-white border border-gray-300 text-gray-800 focus:ring-gray-300;
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
.date-range-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-field {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
transition: all 0.2s ease;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-input:focus {
|
||||
border-color: var(--primary-color);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(0,104,74, 0.2);
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
margin: 0 4px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
align-self: flex-end;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-range-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-input {
|
||||
min-width: 130px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 640px) {
|
||||
.date-range-fields {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-range-fields {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.simple-date-range-picker .date-separator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.date-label {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
background-color: #1f1f1f;
|
||||
border-color: #444;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.date-input:focus {
|
||||
border-color: #177ddc;
|
||||
box-shadow: 0 0 0 2px rgba(23, 125, 220, 0.2);
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 文件上传进度组件样式
|
||||
*/
|
||||
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress-container {
|
||||
@apply my-6;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply h-2 bg-gray-100 rounded overflow-hidden mb-2;
|
||||
}
|
||||
|
||||
.progress-bar-inner {
|
||||
@apply h-full bg-[var(--primary-color)] rounded transition-[width] duration-300 ease-in-out w-0;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
@apply flex justify-between text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen sm {
|
||||
.progress-container {
|
||||
@apply my-4;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply h-1.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.file-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
background-color: #f0f0f0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.file-tag .file-tag-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 无背景模式 */
|
||||
.file-tag-no-bg {
|
||||
background-color: transparent !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-tag-no-bg .file-tag-icon {
|
||||
margin-right: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* 没有文本时的图标调整 */
|
||||
.file-tag:not(:has(.file-tag-text)) .file-tag-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* 尺寸变体 */
|
||||
.file-tag-sm {
|
||||
padding: 1px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.file-tag-sm .file-tag-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-tag-sm.file-tag-no-bg {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-tag-sm.file-tag-no-bg .file-tag-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-tag-lg {
|
||||
padding: 3px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-tag-lg .file-tag-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.file-tag-lg.file-tag-no-bg {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.file-tag-lg.file-tag-no-bg .file-tag-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* 文件类型变体 */
|
||||
.file-tag-pdf {
|
||||
background-color: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.file-tag-doc, .file-tag-docx {
|
||||
background-color: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.file-tag-xls, .file-tag-xlsx {
|
||||
background-color: #d1fae5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.file-tag-ppt, .file-tag-pptx {
|
||||
background-color: #ffedd5;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.file-tag-zip, .file-tag-rar {
|
||||
background-color: #e9d5ff;
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.file-tag-txt {
|
||||
background-color: #e4e4e7;
|
||||
color: #3f3f46;
|
||||
}
|
||||
|
||||
.file-tag-jpg, .file-tag-jpeg, .file-tag-png, .file-tag-gif {
|
||||
background-color: #d8b4fe;
|
||||
color: #6b21a8;
|
||||
}
|
||||
|
||||
/* 适配深色模式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-tag {
|
||||
background-color: #2d2d2d;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.file-tag-pdf {
|
||||
background-color: rgba(185, 28, 28, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.file-tag-doc, .file-tag-docx {
|
||||
background-color: rgba(29, 78, 216, 0.2);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.file-tag-xls, .file-tag-xlsx {
|
||||
background-color: rgba(4, 120, 87, 0.2);
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.file-tag-ppt, .file-tag-pptx {
|
||||
background-color: rgba(194, 65, 12, 0.2);
|
||||
color: #fdba74;
|
||||
}
|
||||
|
||||
.file-tag-zip, .file-tag-rar {
|
||||
background-color: rgba(126, 34, 206, 0.2);
|
||||
color: #c4b5fd;
|
||||
}
|
||||
|
||||
.file-tag-txt {
|
||||
background-color: rgba(63, 63, 70, 0.2);
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.file-tag-jpg, .file-tag-jpeg, .file-tag-png, .file-tag-gif {
|
||||
background-color: rgba(107, 33, 168, 0.2);
|
||||
color: #e9d5ff;
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,26 @@
|
||||
|
||||
/* 文件类型标签基础样式 */
|
||||
.file-type-tag {
|
||||
@apply inline-flex items-center px-2 py-1 rounded text-xs font-medium;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.file-type-tag .file-type-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 无图标模式 */
|
||||
.file-type-tag-no-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* 文件类型颜色 */
|
||||
@@ -61,13 +80,23 @@
|
||||
@apply bg-purple-100 text-purple-800;
|
||||
}
|
||||
|
||||
/* 文件类型尺寸 */
|
||||
/* 尺寸变体 */
|
||||
.file-type-tag-sm {
|
||||
@apply px-1.5 py-0 text-xs;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.file-type-tag-sm .file-type-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-type-tag-lg {
|
||||
@apply px-2.5 py-1 text-sm;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-type-tag-lg .file-type-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 带图标的文件类型标签 */
|
||||
@@ -77,4 +106,68 @@
|
||||
|
||||
.file-type-tag i {
|
||||
@apply mr-1 text-sm;
|
||||
}
|
||||
|
||||
/* 文件类型变体 */
|
||||
.file-type-sales-contract {
|
||||
background-color: #e8f5fd;
|
||||
color: #0077cc;
|
||||
}
|
||||
|
||||
.file-type-purchase-contract {
|
||||
background-color: #f5f0ff;
|
||||
color: #6b46c1;
|
||||
}
|
||||
|
||||
.file-type-license {
|
||||
background-color: #fef5e7;
|
||||
color: #dd6b20;
|
||||
}
|
||||
|
||||
.file-type-punishment {
|
||||
background-color: #fee7e7;
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.file-type-agreement {
|
||||
background-color: #e8fdf5;
|
||||
color: #00a67e;
|
||||
}
|
||||
|
||||
/* 动画效果 - 鼠标悬停 */
|
||||
.file-type-tag:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 适配深色模式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-type-tag {
|
||||
background-color: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.file-type-sales-contract {
|
||||
background-color: rgba(0, 119, 204, 0.2);
|
||||
color: #4db8ff;
|
||||
}
|
||||
|
||||
.file-type-purchase-contract {
|
||||
background-color: rgba(107, 70, 193, 0.2);
|
||||
color: #b794f4;
|
||||
}
|
||||
|
||||
.file-type-license {
|
||||
background-color: rgba(221, 107, 32, 0.2);
|
||||
color: #f6ad55;
|
||||
}
|
||||
|
||||
.file-type-punishment {
|
||||
background-color: rgba(229, 62, 62, 0.2);
|
||||
color: #fc8181;
|
||||
}
|
||||
|
||||
.file-type-agreement {
|
||||
background-color: rgba(0, 166, 126, 0.2);
|
||||
color: #68d5b1;
|
||||
}
|
||||
}
|
||||
@@ -24,10 +24,10 @@
|
||||
|
||||
/* 筛选控件 */
|
||||
.filter-control {
|
||||
@apply w-full;
|
||||
@apply w-full focus:border-[#00684a] focus:shadow-[0,0,0,2px,rgba(0,104,74,0.2)] focus:outline-none;
|
||||
}
|
||||
|
||||
/* 筛选操作按钮区域 */
|
||||
/* 筛选操作按钮区域 */
|
||||
.filter-actions {
|
||||
@apply flex justify-end items-center pt-4 mt-4 border-t border-gray-100 space-x-3;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 处理步骤组件样式
|
||||
*/
|
||||
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
|
||||
/* 横向步骤样式 */
|
||||
.steps-container-horizontal {
|
||||
@apply my-8 flex justify-between relative;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.steps-container-horizontal::before {
|
||||
content: "";
|
||||
@apply absolute top-[14px] left-[30px] right-[30px] h-0.5 bg-gray-200 z-0;
|
||||
}
|
||||
|
||||
.step-item-horizontal {
|
||||
@apply relative flex flex-col items-center flex-1 text-center z-[1];
|
||||
}
|
||||
|
||||
.step-icon-horizontal {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@apply rounded-full bg-gray-300 flex items-center justify-center mb-2 relative z-[2];
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.step-icon-horizontal i {
|
||||
@apply text-white text-base;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-icon-horizontal span:not(.loading-spinner) {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-item-horizontal.active .step-icon-horizontal {
|
||||
@apply bg-[var(--primary-color)];
|
||||
box-shadow: 0 0 0 4px rgba(0, 104, 74, 0.1);
|
||||
}
|
||||
|
||||
.step-item-horizontal.active .step-icon-horizontal span:not(.loading-spinner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-item-horizontal.done .step-icon-horizontal {
|
||||
@apply bg-[var(--success-color)];
|
||||
}
|
||||
|
||||
.step-item-horizontal.done .step-icon-horizontal i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-item-horizontal.error .step-icon-horizontal {
|
||||
@apply bg-[var(--error-color)];
|
||||
}
|
||||
|
||||
.step-item-horizontal.error .step-icon-horizontal i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-content-horizontal {
|
||||
@apply px-2 max-w-[140px];
|
||||
}
|
||||
|
||||
.step-title-horizontal {
|
||||
@apply font-medium mb-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.step-description-horizontal {
|
||||
@apply text-xs text-gray-500 leading-tight mt-1;
|
||||
}
|
||||
|
||||
.step-item-horizontal.active .step-title-horizontal {
|
||||
@apply text-[var(--primary-color)];
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-item-horizontal.done .step-title-horizontal {
|
||||
@apply text-[var(--success-color)];
|
||||
}
|
||||
|
||||
.step-item-horizontal.error .step-title-horizontal {
|
||||
@apply text-[var(--error-color)];
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-spinner {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -8px; /* 宽度的一半 */
|
||||
margin-top: -8px; /* 高度的一半 */
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: var(--primary-color);
|
||||
animation-name: spinner-rotate;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner-rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 响应式调整 - 只在小屏幕上应用垂直布局 */
|
||||
@media (max-width: 640px) {
|
||||
.steps-container-horizontal {
|
||||
@apply flex-col items-start;
|
||||
}
|
||||
|
||||
.steps-container-horizontal::before {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.step-item-horizontal {
|
||||
@apply flex-row items-start mb-5 w-full;
|
||||
}
|
||||
|
||||
.step-item-horizontal:last-child {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.step-content-horizontal {
|
||||
@apply text-left ml-3 max-w-none;
|
||||
}
|
||||
|
||||
.step-icon-horizontal {
|
||||
@apply mb-0 flex-shrink-0;
|
||||
}
|
||||
|
||||
.step-title-horizontal {
|
||||
@apply text-base;
|
||||
}
|
||||
|
||||
.step-description-horizontal {
|
||||
@apply mt-1 text-sm;
|
||||
}
|
||||
|
||||
/* 垂直连接线 */
|
||||
.step-item-horizontal::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 30px;
|
||||
bottom: -20px;
|
||||
width: 2px;
|
||||
background-color: #e8e8e8;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-item-horizontal:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -12,12 +12,12 @@
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.search-box-row .form-input {
|
||||
/* .search-box-row .form-input {
|
||||
@apply rounded-r-none;
|
||||
}
|
||||
} */
|
||||
|
||||
.search-box-row .search-button {
|
||||
@apply rounded-l-none h-full flex items-center;
|
||||
@apply h-full flex items-center;
|
||||
}
|
||||
|
||||
/* 搜索输入框 */
|
||||
|
||||
@@ -2,71 +2,90 @@
|
||||
* 状态徽章组件样式
|
||||
*/
|
||||
|
||||
/* 状态徽章基础样式 */
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 状态颜色 - 从 documents_index.css 同步 */
|
||||
.status-pending {
|
||||
background-color: #E6F7FF;
|
||||
color: #1890FF;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #FFF7E6;
|
||||
color: #FA8C16;
|
||||
}
|
||||
|
||||
.status-pass {
|
||||
background-color: #F6FFED;
|
||||
color: #52C41A;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #FFFBE6;
|
||||
color: #FAAD14;
|
||||
}
|
||||
|
||||
.status-fail {
|
||||
background-color: #FFF1F0;
|
||||
color: #F5222D;
|
||||
}
|
||||
|
||||
/* 动画效果 - 用于processing状态 */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.status-processing i {
|
||||
animation: spin 1.2s linear infinite;
|
||||
}
|
||||
|
||||
/* 状态徽章尺寸 */
|
||||
.status-badge-sm {
|
||||
@apply px-2 py-0.5 text-xs;
|
||||
padding: 0px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.status-badge-lg {
|
||||
@apply px-3 py-1 text-sm;
|
||||
}
|
||||
|
||||
/* 状态徽章类型 */
|
||||
.status-badge-success {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.status-badge-processing {
|
||||
@apply bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
.status-badge-warning {
|
||||
@apply bg-yellow-100 text-yellow-800;
|
||||
}
|
||||
|
||||
.status-badge-error {
|
||||
@apply bg-red-100 text-red-800;
|
||||
}
|
||||
|
||||
.status-badge-default {
|
||||
@apply bg-gray-100 text-gray-800;
|
||||
padding: 3px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 带图标的状态徽章 */
|
||||
.status-badge-with-icon {
|
||||
@apply pl-1.5;
|
||||
}
|
||||
|
||||
.status-badge i {
|
||||
@apply mr-1;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 可点击的状态徽章 */
|
||||
.status-badge-clickable {
|
||||
@apply cursor-pointer transition-colors duration-200;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-success:hover {
|
||||
@apply bg-green-200;
|
||||
.status-badge-clickable.status-pending:hover {
|
||||
background-color: #BAE7FF;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-processing:hover {
|
||||
@apply bg-blue-200;
|
||||
.status-badge-clickable.status-processing:hover {
|
||||
background-color: #FFE7BA;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-warning:hover {
|
||||
@apply bg-yellow-200;
|
||||
.status-badge-clickable.status-pass:hover {
|
||||
background-color: #D9F7BE;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-error:hover {
|
||||
@apply bg-red-200;
|
||||
.status-badge-clickable.status-warning:hover {
|
||||
background-color: #FFF1B8;
|
||||
}
|
||||
|
||||
.status-badge-clickable.status-badge-default:hover {
|
||||
@apply bg-gray-200;
|
||||
.status-badge-clickable.status-fail:hover {
|
||||
background-color: #FFCCC7;
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
/* 表格内容 */
|
||||
.ant-table tbody td {
|
||||
@apply py-3 px-4 border-b border-gray-100;
|
||||
@apply py-3 px-4 border-b border-gray-100 align-middle;
|
||||
}
|
||||
|
||||
/* 表格行 */
|
||||
@@ -63,6 +63,25 @@
|
||||
@apply text-[#00684a];
|
||||
}
|
||||
|
||||
/* 模板名称列垂直居中样式 */
|
||||
.ant-table .flex.items-center {
|
||||
height: 1.5rem; /* h-6 */
|
||||
}
|
||||
|
||||
.ant-table .flex.items-center i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ant-table .flex.items-center span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* 基础表格 */
|
||||
.table-container {
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 文件上传区域组件样式
|
||||
*/
|
||||
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
|
||||
/* 上传区域样式 */
|
||||
.upload-area {
|
||||
@apply border-2 border-dashed border-gray-300 rounded-lg p-10 text-center bg-gray-50 cursor-pointer transition-all duration-300;
|
||||
}
|
||||
|
||||
.upload-area:hover,
|
||||
.upload-area.dragover {
|
||||
@apply border-[var(--primary-color)] bg-[var(--primary-light)];
|
||||
}
|
||||
|
||||
.upload-area.disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
@apply text-5xl text-gray-400 mb-4;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
@apply text-gray-500 mb-2 font-medium;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
@apply text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen sm {
|
||||
.upload-area {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
@apply text-4xl mb-2;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
+12
-2
@@ -4,12 +4,12 @@
|
||||
*/
|
||||
|
||||
/* 导入组件样式 */
|
||||
@import './components/badge.css';
|
||||
@import './components/button.css';
|
||||
@import './components/card.css';
|
||||
@import './components/form.css';
|
||||
@import './components/navigation.css';
|
||||
@import './components/table.css';
|
||||
@import './components/badge.css';
|
||||
@import './components/pagination.css';
|
||||
@import './components/search-box.css';
|
||||
@import './components/filter-panel.css';
|
||||
@@ -18,6 +18,12 @@
|
||||
@import './components/file-type-tag.css';
|
||||
@import './components/status-dot.css';
|
||||
@import './components/tag.css';
|
||||
@import './components/file-progress.css';
|
||||
@import './components/processing-steps.css';
|
||||
@import './components/date-range-picker.css';
|
||||
@import './components/upload-area.css';
|
||||
@import './components/file-tag.css';
|
||||
|
||||
/* @import './components/modal.css'; */
|
||||
|
||||
/* Tailwind 基础指令 */
|
||||
@@ -83,13 +89,17 @@
|
||||
a {
|
||||
@apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 组件相关样式 */
|
||||
@layer components {
|
||||
/* 文本颜色工具类 */
|
||||
.text-primary {
|
||||
@apply text-[#00684a];
|
||||
@apply !text-[--color-primary];
|
||||
}
|
||||
.text-error {
|
||||
@apply !text-[--color-error];
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* 文档上传页面样式
|
||||
*/
|
||||
|
||||
.document-upload-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;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.document-upload-page .page-header {
|
||||
@apply flex justify-between items-center mb-4;
|
||||
}
|
||||
|
||||
.document-upload-page .page-title {
|
||||
@apply text-xl font-medium;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.document-upload-page .form-group {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.document-upload-page .form-label {
|
||||
@apply block font-medium text-gray-700 mb-2;
|
||||
}
|
||||
|
||||
.document-upload-page .form-tip {
|
||||
@apply text-xs text-gray-500 mt-1;
|
||||
}
|
||||
|
||||
/* 文件列表区域 */
|
||||
.document-upload-page .file-list {
|
||||
@apply mt-6;
|
||||
}
|
||||
|
||||
.document-upload-page .file-item {
|
||||
@apply flex items-center p-3 border border-gray-200 rounded-md mb-3 bg-white;
|
||||
}
|
||||
|
||||
.document-upload-page .file-item:hover {
|
||||
@apply bg-gray-50;
|
||||
}
|
||||
|
||||
.document-upload-page .file-info {
|
||||
@apply flex-1 ml-3;
|
||||
}
|
||||
|
||||
.document-upload-page .file-name {
|
||||
@apply font-medium mb-1;
|
||||
}
|
||||
|
||||
.document-upload-page .file-meta {
|
||||
@apply text-xs text-gray-500 flex items-center;
|
||||
}
|
||||
|
||||
.document-upload-page .file-size {
|
||||
@apply mr-4;
|
||||
}
|
||||
|
||||
.document-upload-page .progress-bar {
|
||||
@apply h-1 bg-gray-100 rounded overflow-hidden mt-2 w-full;
|
||||
}
|
||||
|
||||
.document-upload-page .progress-bar-inner {
|
||||
@apply h-full bg-[var(--primary-color)] rounded transition-[width] duration-300 ease-out;
|
||||
}
|
||||
|
||||
.document-upload-page .file-actions {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
/* 批量操作区域 */
|
||||
.document-upload-page .batch-actions {
|
||||
@apply flex justify-between items-center p-2 bg-gray-50 border border-gray-200 rounded-md mb-4;
|
||||
}
|
||||
|
||||
/* 高级选项区域 */
|
||||
.document-upload-page .advanced-options {
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
.document-upload-page .advanced-options-toggle {
|
||||
@apply text-[var(--primary-color)] cursor-pointer inline-flex items-center text-sm;
|
||||
}
|
||||
|
||||
.document-upload-page .advanced-options-toggle i {
|
||||
@apply ml-1 transition-transform duration-200;
|
||||
}
|
||||
|
||||
.document-upload-page .advanced-options-toggle.open i {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
.document-upload-page .advanced-options-content {
|
||||
@apply mt-3 p-3 bg-gray-50 border border-gray-200 rounded-md hidden;
|
||||
}
|
||||
|
||||
/* 提醒横幅 */
|
||||
.document-upload-page .alert {
|
||||
@apply p-3 flex items-center rounded-md mb-4;
|
||||
}
|
||||
|
||||
.document-upload-page .alert i {
|
||||
@apply mr-2;
|
||||
}
|
||||
|
||||
.document-upload-page .alert-success {
|
||||
@apply bg-green-50 text-green-700 border border-green-200;
|
||||
}
|
||||
|
||||
.document-upload-page .alert-info {
|
||||
@apply bg-blue-50 text-blue-700 border border-blue-200;
|
||||
}
|
||||
|
||||
.document-upload-page .alert-warning {
|
||||
@apply bg-yellow-50 text-yellow-700 border border-yellow-200;
|
||||
}
|
||||
|
||||
.document-upload-page .alert-error {
|
||||
@apply bg-red-50 text-red-700 border border-red-200;
|
||||
}
|
||||
|
||||
/* 完成操作区域 */
|
||||
.document-upload-page .upload-complete-actions {
|
||||
@apply text-center py-4 hidden;
|
||||
}
|
||||
|
||||
/* 复选框样式 */
|
||||
.document-upload-page .switch-container {
|
||||
@apply flex items-center mt-2;
|
||||
}
|
||||
|
||||
.document-upload-page .switch {
|
||||
@apply relative inline-block w-10 h-5 mr-2;
|
||||
}
|
||||
|
||||
.document-upload-page .switch input {
|
||||
@apply opacity-0 w-0 h-0;
|
||||
}
|
||||
|
||||
.document-upload-page .slider {
|
||||
@apply absolute cursor-pointer inset-0 bg-gray-300 rounded-full transition-all duration-300;
|
||||
}
|
||||
|
||||
.document-upload-page .slider:before {
|
||||
@apply absolute content-[''] h-4 w-4 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
|
||||
}
|
||||
|
||||
.document-upload-page input:checked + .slider {
|
||||
@apply bg-[var(--primary-color)];
|
||||
}
|
||||
|
||||
.document-upload-page input:checked + .slider:before {
|
||||
@apply transform translate-x-5;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen md {
|
||||
.document-upload-page .form-grid {
|
||||
@apply grid grid-cols-2 gap-6;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* 文档列表页面样式
|
||||
*/
|
||||
|
||||
.documents-page {
|
||||
/* 全局变量已定义在主样式表中，这里不需要重新定义 */
|
||||
}
|
||||
|
||||
/* 文档列表特有样式 */
|
||||
.form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(0,104,74, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 状态徽章样式已移动到 status-badge.css */
|
||||
|
||||
.file-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
max-width: 240px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.document-number {
|
||||
font-family: monospace;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.operations-cell {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1200px) {
|
||||
.filter-container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item.ml-auto {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* 文件上传页面样式
|
||||
*/
|
||||
|
||||
.file-upload-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;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.file-upload-page .page-header {
|
||||
@apply flex justify-between items-center mb-4;
|
||||
}
|
||||
|
||||
.file-upload-page .page-title {
|
||||
@apply text-xl font-medium;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.file-upload-page .form-group {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.file-upload-page .form-label {
|
||||
@apply block text-sm font-medium text-gray-700 mb-2;
|
||||
}
|
||||
|
||||
.file-upload-page .form-tip {
|
||||
@apply text-xs text-gray-500 mt-1;
|
||||
}
|
||||
|
||||
.file-upload-page .form-select {
|
||||
@apply block w-full px-3 py-2 text-base border-gray-300 rounded-md shadow-sm focus:outline-none;
|
||||
}
|
||||
|
||||
.file-upload-page .form-select:focus {
|
||||
@apply border-[#00684a] shadow-[0_0_0_2px_rgba(0,104,74,0.2)] outline-none;
|
||||
}
|
||||
|
||||
/* 上传区域样式 */
|
||||
.file-upload-page .upload-area {
|
||||
@apply border-2 border-dashed border-gray-300 rounded-lg p-10 text-center bg-gray-50 cursor-pointer transition-all duration-300;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-area:hover,
|
||||
.file-upload-page .upload-area.dragover {
|
||||
@apply border-[var(--primary-color)] bg-[var(--primary-light)];
|
||||
}
|
||||
|
||||
.file-upload-page .upload-icon {
|
||||
@apply text-5xl text-gray-400 mb-4;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-text {
|
||||
@apply text-gray-500 mb-2 font-medium;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-tip {
|
||||
@apply text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.file-upload-page .progress-container {
|
||||
@apply my-6;
|
||||
}
|
||||
|
||||
.file-upload-page .progress-bar {
|
||||
@apply h-2 bg-gray-100 rounded overflow-hidden mb-2;
|
||||
}
|
||||
|
||||
.file-upload-page .progress-bar-inner {
|
||||
@apply h-full bg-[var(--primary-color)] rounded transition-[width] duration-300 ease-in-out w-0;
|
||||
}
|
||||
|
||||
.file-upload-page .progress-text {
|
||||
@apply flex justify-between text-xs text-gray-500;
|
||||
}
|
||||
|
||||
/* 横向步骤样式 */
|
||||
.file-upload-page .steps-container-horizontal {
|
||||
@apply my-8 flex justify-between relative;
|
||||
}
|
||||
|
||||
.file-upload-page .steps-container-horizontal::before {
|
||||
content: "";
|
||||
@apply absolute top-[14px] left-0 right-0 h-0.5 bg-gray-200 z-0;
|
||||
}
|
||||
|
||||
.file-upload-page .step-item-horizontal {
|
||||
@apply relative flex flex-col items-center flex-1 text-center z-[1];
|
||||
}
|
||||
|
||||
.file-upload-page .step-icon-horizontal {
|
||||
@apply w-[30px] h-[30px] rounded-full bg-gray-300 flex items-center justify-center mb-2 relative z-[2];
|
||||
}
|
||||
|
||||
.file-upload-page .step-icon-horizontal i {
|
||||
@apply hidden text-white text-base absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0 p-0;
|
||||
}
|
||||
|
||||
.file-upload-page .step-item-horizontal.active .step-icon-horizontal {
|
||||
@apply bg-[var(--primary-color)];
|
||||
}
|
||||
|
||||
.file-upload-page .step-item-horizontal.done .step-icon-horizontal {
|
||||
@apply bg-[var(--success-color)];
|
||||
}
|
||||
|
||||
.file-upload-page .step-item-horizontal.done .step-icon-horizontal i {
|
||||
@apply inline-block;
|
||||
}
|
||||
|
||||
.file-upload-page .step-item-horizontal.error .step-icon-horizontal {
|
||||
@apply bg-[var(--error-color)];
|
||||
}
|
||||
|
||||
.file-upload-page .step-content-horizontal {
|
||||
@apply px-2 max-w-[140px];
|
||||
}
|
||||
|
||||
.file-upload-page .step-title-horizontal {
|
||||
@apply font-medium mb-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis;
|
||||
}
|
||||
|
||||
.file-upload-page .step-description-horizontal {
|
||||
@apply text-xs text-gray-500 leading-tight mt-1;
|
||||
}
|
||||
|
||||
.file-upload-page .step-item-horizontal.active .step-title-horizontal {
|
||||
@apply text-[var(--primary-color)];
|
||||
}
|
||||
|
||||
/* 文件信息样式 */
|
||||
.file-upload-page .file-info-list {
|
||||
@apply list-none p-0 m-0;
|
||||
}
|
||||
|
||||
.file-upload-page .file-info-item {
|
||||
@apply flex mb-2;
|
||||
}
|
||||
|
||||
.file-upload-page .file-info-label {
|
||||
@apply flex-none w-20 text-gray-500;
|
||||
}
|
||||
|
||||
.file-upload-page .file-info-value {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
/* 文件类型徽章 */
|
||||
.file-upload-page .file-type-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.file-upload-page .file-type-badge i {
|
||||
@apply mr-1 text-sm;
|
||||
}
|
||||
|
||||
.file-upload-page .file-type-contract {
|
||||
@apply bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
.file-upload-page .file-type-license {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.file-upload-page .file-type-punishment {
|
||||
@apply bg-yellow-100 text-yellow-800;
|
||||
}
|
||||
|
||||
/* 状态徽章 */
|
||||
.file-upload-page .status-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.file-upload-page .status-waiting {
|
||||
@apply bg-purple-100 text-purple-800;
|
||||
}
|
||||
|
||||
.file-upload-page .status-processing {
|
||||
@apply bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
.file-upload-page .status-success {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.file-upload-page .status-error {
|
||||
@apply bg-red-100 text-red-800;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-page .pulse-animation {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@screen md {
|
||||
.file-upload-page .file-info-grid {
|
||||
@apply grid grid-cols-2 gap-6;
|
||||
}
|
||||
}
|
||||
@@ -96,27 +96,6 @@
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-badge.status-success {
|
||||
@apply bg-green-100 text-green-900;
|
||||
}
|
||||
|
||||
.status-badge.status-warning {
|
||||
@apply bg-yellow-100 text-yellow-900;
|
||||
}
|
||||
|
||||
.status-badge.status-error {
|
||||
@apply bg-red-100 text-red-900;
|
||||
}
|
||||
|
||||
.status-badge.status-processing {
|
||||
@apply bg-blue-100 text-blue-900;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.dashboard-card {
|
||||
@apply bg-white rounded-lg shadow p-5 mb-5 transition-all duration-200;
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* 提示词模板管理页面样式
|
||||
*/
|
||||
|
||||
.prompt-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);
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.prompt-page .page-header {
|
||||
@apply flex justify-between items-center mb-4;
|
||||
}
|
||||
|
||||
.prompt-page .page-title {
|
||||
@apply text-xl font-medium;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.prompt-page .search-container {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.prompt-page .search-form {
|
||||
@apply flex flex-wrap items-end gap-4;
|
||||
}
|
||||
|
||||
.prompt-page .search-field {
|
||||
@apply flex-1 min-w-[200px];
|
||||
}
|
||||
|
||||
.prompt-page .search-actions {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
/* 数据表格 */
|
||||
.prompt-page .table-container {
|
||||
@apply overflow-x-auto;
|
||||
}
|
||||
|
||||
/* 选择框focus状态 */
|
||||
.prompt-page .form-select:focus {
|
||||
@apply border-[#00684a] shadow-[0_0_0_2px_rgba(0,104,74,0.2)] outline-none;
|
||||
}
|
||||
|
||||
/* 类型标签 */
|
||||
.prompt-page .type-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium mr-1;
|
||||
}
|
||||
|
||||
.prompt-page .type-extraction {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.prompt-page .type-evaluation {
|
||||
@apply bg-yellow-100 text-yellow-800;
|
||||
}
|
||||
|
||||
.prompt-page .type-summary {
|
||||
@apply bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
.prompt-page .type-common {
|
||||
@apply bg-purple-100 text-purple-800;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.prompt-page .status-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-center;
|
||||
}
|
||||
|
||||
.prompt-page .status-active {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.prompt-page .status-inactive {
|
||||
@apply bg-red-100 text-red-800;
|
||||
}
|
||||
|
||||
.prompt-page .status-system {
|
||||
@apply bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.prompt-page .operation-btn {
|
||||
@apply !text-black inline-flex items-center px-3 py-1 text-sm rounded-md hover:bg-gray-100 transition-colors duration-150 ease-in-out hover:!text-[--color-primary];
|
||||
}
|
||||
|
||||
.prompt-page .operation-btn i {
|
||||
@apply mr-1;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.prompt-page .pagination-info {
|
||||
@apply text-sm text-gray-500;
|
||||
}
|
||||
|
||||
.prompt-page .pagination-controls {
|
||||
@apply flex items-center;
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* 提示词模板编辑页面样式
|
||||
*/
|
||||
|
||||
.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 {
|
||||
@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;
|
||||
}
|
||||
@@ -166,6 +166,14 @@
|
||||
.rule-groups-page .ant-btn-text.text-primary {
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.rule-groups-page .operations-cell {
|
||||
@apply flex space-x-2;
|
||||
}
|
||||
|
||||
.rule-groups-page .operation-btn {
|
||||
@apply text-sm flex items-center text-[--color-primary] bg-transparent hover:underline p-2;
|
||||
}
|
||||
|
||||
.rule-groups-page .ant-btn-text.text-primary:hover {
|
||||
color: #00684a;
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
* 评查点分组新增/编辑页样式
|
||||
*/
|
||||
|
||||
/* 页面容器 */
|
||||
.rule-group-new-page {
|
||||
@apply p-5;
|
||||
}
|
||||
|
||||
/* 页面标题区域 */
|
||||
.rule-group-new-page .page-header {
|
||||
@apply flex justify-between items-center mb-6;
|
||||
}
|
||||
|
||||
.rule-group-new-page .page-title {
|
||||
@apply text-xl font-medium mb-1;
|
||||
}
|
||||
|
||||
.rule-group-new-page .page-subtitle {
|
||||
@apply text-sm text-gray-500;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
.rule-group-new-page .form-container {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
/* 提示信息区域 */
|
||||
.rule-group-new-page .info-message {
|
||||
@apply flex items-center p-4 mb-5 bg-[rgba(0,104,74,0.05)] border border-[rgba(0,104,74,0.1)] rounded-md;
|
||||
}
|
||||
|
||||
.rule-group-new-page .info-message i {
|
||||
@apply text-lg mr-3 text-[#00684a];
|
||||
}
|
||||
|
||||
.rule-group-new-page .info-message p {
|
||||
@apply text-sm text-gray-600 m-0;
|
||||
}
|
||||
|
||||
/* 表单区域 */
|
||||
.rule-group-new-page .form-section {
|
||||
@apply bg-white rounded-md border border-gray-200 mb-6 transition-shadow duration-200 shadow-sm;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-section:hover {
|
||||
@apply shadow-md;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-section-header {
|
||||
@apply flex items-center p-4 border-b border-gray-100;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-section-header i {
|
||||
@apply text-lg mr-2 text-[#00684a];
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-section-header h3 {
|
||||
@apply text-base font-medium m-0;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-section-body {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
/* 表单元素 */
|
||||
.rule-group-new-page .form-group {
|
||||
@apply mb-5;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-label {
|
||||
@apply block text-sm font-medium mb-2 text-gray-700;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-label .required-mark {
|
||||
@apply text-red-500 ml-1;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-input,
|
||||
.rule-group-new-page .form-select,
|
||||
.rule-group-new-page .form-textarea {
|
||||
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a] outline-none text-sm transition-all duration-200;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-input:hover,
|
||||
.rule-group-new-page .form-select:hover,
|
||||
.rule-group-new-page .form-textarea:hover {
|
||||
@apply border-[#00684a];
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-input.error,
|
||||
.rule-group-new-page .form-select.error,
|
||||
.rule-group-new-page .form-textarea.error {
|
||||
@apply border-red-500 focus:ring-0 ;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-textarea {
|
||||
@apply min-h-[120px] resize-y;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-tip {
|
||||
@apply mt-1.5 text-xs text-gray-500;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-error {
|
||||
@apply mt-1.5 text-xs text-red-500;
|
||||
}
|
||||
|
||||
/* 单选框组样式 */
|
||||
.rule-group-new-page .radio-group {
|
||||
@apply flex gap-6;
|
||||
}
|
||||
|
||||
.rule-group-new-page .radio-item {
|
||||
@apply flex items-center cursor-pointer;
|
||||
}
|
||||
|
||||
.rule-group-new-page .radio-input {
|
||||
@apply mr-2 cursor-pointer;
|
||||
}
|
||||
|
||||
/* 行布局 */
|
||||
.rule-group-new-page .form-row {
|
||||
@apply flex flex-col md:flex-row gap-6;
|
||||
}
|
||||
|
||||
.rule-group-new-page .form-col {
|
||||
@apply flex-1 min-w-0;
|
||||
}
|
||||
|
||||
/* 按钮组 */
|
||||
.rule-group-new-page .form-actions {
|
||||
@apply flex justify-end gap-3 mt-6 mb-10;
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.rule-group-new-page .general-error {
|
||||
@apply p-4 mb-6 bg-red-50 border border-red-100 rounded-md text-red-700 text-sm;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.rule-group-new-page .form-row {
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
.rule-group-new-page .page-header {
|
||||
@apply flex-col items-start;
|
||||
}
|
||||
|
||||
.rule-group-new-page .page-header .header-actions {
|
||||
@apply mt-4;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user