完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口
This commit is contained in:
@@ -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,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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user