From e5abc263b860e4ea3cf1c6e08f4e0bcfb3d2ff58 Mon Sep 17 00:00:00 2001
From: Felix <Felix>
Date: Thu, 11 Dec 2025 08:59:08 +0800
Subject: [PATCH] fix ui

---
 miniprogram/pages/upload/upload.ts   | 36 ++++++++++++++++++++++++++--
 miniprogram/pages/upload/upload.wxml | 14 +++++------
 miniprogram/pages/upload/upload.wxss |  7 +++++-
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/miniprogram/pages/upload/upload.ts b/miniprogram/pages/upload/upload.ts
index e31a0b4..2c061c3 100755
--- a/miniprogram/pages/upload/upload.ts
+++ b/miniprogram/pages/upload/upload.ts
@@ -65,6 +65,8 @@ Page({
     stripCentered: true,
     todayKey: '',
     animateWaterfall: true,
+    dateStripScrollLeft: 0,
+    dateStripTransform: '',
   },
 
   onLoad() {
@@ -933,8 +935,10 @@ Page({
         const weekday = weekdays[today.getDay()];
         strip.push({ type: 'day', key: todayKey, weekday, day: today.getDate(), year: today.getFullYear(), month: today.getMonth() + 1 });
       }
-      const stripCentered = strip.length <= 5;
-      this.setData({ dateStripItems: strip, imagesByDate, selectedDateKey: selectedKey, selectedDateImages: selectedImages, gridCols, selectedMonthTitle: monthTitle, useWaterfall, waterfallLeft, waterfallRight, stripCentered, todayKey, animateWaterfall: false });
+      const stripCentered = strip.length <= 3;
+      this.setData({ dateStripItems: strip, imagesByDate, selectedDateKey: selectedKey, selectedDateImages: selectedImages, gridCols, selectedMonthTitle: monthTitle, useWaterfall, waterfallLeft, waterfallRight, stripCentered, todayKey, animateWaterfall: false }, () => {
+        this.centerDateStrip();
+      });
       if (useWaterfall) {
         this.balanceWaterfall(selectedImages).then(() => {
           wx.nextTick(() => { this.setData({ animateWaterfall: true }); });
@@ -968,6 +972,7 @@ Page({
       waterfallLeft, 
       waterfallRight 
     }, () => {
+      this.centerDateStrip();
       // 在setData回调中处理瀑布流平衡
       if (useWaterfall && images.length > 0) {
         this.balanceWaterfall(images).then(() => {
@@ -1038,5 +1043,32 @@ Page({
     } catch (e) {}
   },
 
+  centerDateStrip() {
+    try {
+      const items = this.data.dateStripItems || [];
+      if (!items || items.length < 2) return;
+      const idx = items.findIndex((it: any) => it && it.key === this.data.selectedDateKey);
+      if (idx < 0) return;
+      const si = wx.getSystemInfoSync();
+      const ww = si.windowWidth;
+      const rpx = ww / 750;
+      const itemW = Math.floor(120 * rpx);
+      const gap = Math.floor(24 * rpx);
+      const n = items.length;
+      const contentW = n * itemW + (n - 1) * gap;
+      const containerW = ww;
+      if (contentW > containerW) {
+        let target = Math.floor(idx * (itemW + gap) - (containerW - itemW) / 2);
+        target = Math.max(0, Math.min(contentW - containerW, target));
+        this.setData({ dateStripScrollLeft: target, dateStripTransform: '' });
+      } else {
+        const selectedX = Math.floor(idx * (itemW + gap));
+        const centerX = Math.floor((containerW - itemW) / 2);
+        const shift = centerX - selectedX;
+        this.setData({ dateStripTransform: `transform: translateX(${shift}px);` });
+      }
+    } catch (e) {}
+  },
+
 })
 
diff --git a/miniprogram/pages/upload/upload.wxml b/miniprogram/pages/upload/upload.wxml
index c687311..a405d01 100755
--- a/miniprogram/pages/upload/upload.wxml
+++ b/miniprogram/pages/upload/upload.wxml
@@ -63,14 +63,14 @@
         <text class="month-title">{{selectedMonthTitle}}</text>
         <!-- <t-icon name="calendar" size="40rpx" /> -->
       </view>
-      <scroll-view class="date-strip" scroll-x>
-        <view class="date-strip-inner {{stripCentered ? 'strip-center' : 'strip-default'}}">
+      <scroll-view class="date-strip" scroll-x scroll-with-animation="{{true}}" scroll-left="{{dateStripScrollLeft}}">
+        <view class="date-strip-inner {{stripCentered ? 'strip-center' : 'strip-default'}}" style="{{dateStripTransform}}">
           <block wx:for="{{dateStripItems}}" wx:key="index">
-            <view wx:if="{{item.type === 'day'}}" class="date-item {{item.key === selectedDateKey ? 'active' : ''}}" data-key="{{item.key}}" bindtap="onDateTap">
+            <view wx:if="{{item.type === 'day'}}" id="date-item-{{item.key}}" class="date-item {{item.key === selectedDateKey ? 'active' : ''}}" data-key="{{item.key}}" bindtap="onDateTap">
               <view class="weekday">{{item.weekday}}</view>
               <view class="day">{{item.day}}</view>
             </view>
-            <view wx:elif="{{item.type === 'ym'}}" class="date-item label">
+            <view wx:elif="{{item.type === 'ym'}}" id="date-item-{{item.key}}" class="date-item label">
               <view class="weekday">{{item.year}}</view>
               <view class="day">{{item.month}}</view>
             </view>
@@ -78,12 +78,12 @@
         </view>
       </scroll-view>
     </view>
-    <view wx:if="{{!takePhoto && selectedDateImages && selectedDateImages.length > 0}}" class="history-wrap">
+    <view wx:if="{{!isLoading && !takePhoto && selectedDateImages && selectedDateImages.length > 0}}" class="history-wrap">
       <view class="history-card-item white-card">
         <scroll-view scroll-y>
           <block wx:if="{{!useWaterfall}}">
             <view class="image-list">
-              <view class="list-item" wx:for="{{selectedDateImages}}" wx:for-item="image" wx:key="index" catch:tap="onImageTap" data-image-id="{{image.image_id}}">
+              <view class="list-item {{animateWaterfall ? 'fade-in' : ''}}" wx:for="{{selectedDateImages}}" wx:for-item="image" wx:for-index="k" wx:key="image_id" catch:tap="onImageTap" data-image-id="{{image.image_id}}" style="animation-delay: {{k * 0.15}}s;">
                 <t-skeleton wx:if="{{image.thumbnail_loading}}" class="full-image" row-col="{{[1]}}" animation="gradient" loading></t-skeleton>
                 <image wx:else class="full-image" src="{{image.thumbnail_url}}" mode="widthFix" />
               </view>
@@ -110,7 +110,7 @@
     </view>
     <view wx:if="{{!isLoading && !takePhoto && selectedDateKey === todayKey && (!selectedDateImages || selectedDateImages.length === 0)}}" class="history-wrap">
       <view class="history-card-item blank-card">
-        <view class="blank-content" bindtap="handleImageSelect">
+        <view class="blank-content {{animateWaterfall ? 'visible' : ''}}" bindtap="handleImageSelect">
           <view class="photo-inner">
             <image class="blank-image" src="{{photoSvgData}}" mode="{{'aspectFit'}}"></image>
           </view>
diff --git a/miniprogram/pages/upload/upload.wxss b/miniprogram/pages/upload/upload.wxss
index d1f970d..26d322f 100755
--- a/miniprogram/pages/upload/upload.wxss
+++ b/miniprogram/pages/upload/upload.wxss
@@ -370,7 +370,7 @@
 }
 .month-title { font-size: 36rpx; }
 .date-strip { white-space: nowrap; height: 100rpx;}
-.date-strip-inner { display: flex; gap: 24rpx; }
+.date-strip-inner { display: flex; gap: 24rpx; transition: transform 0.3s ease; will-change: transform; }
 .strip-center { justify-content: center; min-width: 100%; }
 .strip-default { justify-content: flex-start; }
 .date-strip::-webkit-scrollbar { display: none; }
@@ -1271,8 +1271,13 @@
   border-width: 24rpx 24rpx 64rpx 24rpx;
   box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.2);
   overflow: hidden;
+  opacity: 0;
 }
 
+.blank-content.hidden { opacity: 0;  }
+.blank-content.visible { animation: blankFadeIn 300ms ease forwards; }
+@keyframes blankFadeIn { from { opacity: 0 } to { opacity: 1 } }
+
 .blank-image {
   width: 100%;
   height: 100%;