新增文件上传页面，新增文件上传的公共组件（进度条，步骤条，上传区域）

2025-03-31 19:53:26 +08:00
parent 65da73071d
commit 8fe88c1d15
19 changed files with 1492 additions and 32 deletions
@@ -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;
+  }
+}