完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口

2025-04-01 22:14:43 +08:00
parent 8fe88c1d15
commit 706cea8705
37 changed files with 4512 additions and 1459 deletions
@@ -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;
+  }
+} 
@@ -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;