feat: 新增订单列表交互

pages/order/components/Tabs/styles/index.scss

@@ -0,0 +1,100 @@
+.tab-container {
+  position: relative;
+}
+
+.tab-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  transition: all 0.3s ease;
+  padding: 0 8px;
+}
+
+.tab-text {
+  font-size: 14px;
+  color: #666;
+  font-weight: 400;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.tab-text-active {
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.tab-item-active {
+  .tab-text {
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  min-height: 3px; /* 确保最小高度 */
+  background-color: #007AFF;
+  border-radius: 10px;
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+  transform: translateZ(0); /* 启用硬件加速 */
+  will-change: left, width; /* 优化动画性能 */
+  
+  /* 初始状态：未初始化时隐藏 */
+  opacity: 0;
+  width: 15px; /* 默认宽度15px */
+  left: 0;
+}
+
+/* 已初始化状态 */
+.tab-indicator.initialized {
+  opacity: 1;
+}
+
+
+/* 点击效果 */
+.tab-item:active {
+  opacity: 0.7;
+}
+
+/* 自定义主题色支持 */
+.tab-container[data-indicator-color="red"] .tab-indicator {
+  background-color: #ff4d4f;
+}
+
+.tab-container[data-indicator-color="green"] .tab-indicator {
+  background-color: #52c41a;
+}
+
+.tab-container[data-indicator-color="orange"] .tab-indicator {
+  background-color: #fa8c16;
+}
+
+/* 动画增强 */
+@keyframes tabSwitch {
+  0% {
+    transform: translateZ(0) scaleX(0.8);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateZ(0) scaleX(1);
+    opacity: 1;
+  }
+}
+
+.tab-indicator.animating {
+  animation: tabSwitch 0.3s ease-out;
+}