miniprogram-1/miniprogram/pages/upload/upload.wxml

<!-- upload.wxml - 主功能页面 -->
<navigation-bar title="" back="{{false}}" color="{{day_type === 'night' ? 'white' : 'black'}}" background="{{day_type === 'night' ? '#232946' : '#fffffe'}}">
  <view slot="left">
    <t-icon class="user-home" name="user-circle" size="46rpx" bind:tap="goProfile" />
  </view>
</navigation-bar>
<view class="{{['upload-container', day_type]}}">
  <!-- 主功能界面 -->
  <view class="main-content">
    <view class="sunny-wrap" wx:if="{{ day_type !== 'night' }}">
      <image src="{{sunSvgData}}" class="sunny-icon" />
      <image class="face {{facePosition}}" src="{{avatarSvgData}}" mode="aspectFit"></image>
    </view>
    <view wx:else>
      <view class="moon-wrap">
        <t-icon name="moon-filled" class="moon-icon" size="160rpx" />
      </view>
      <div class="star-icon">★</div>
      <div class="star-icon-2">★</div>
    </view>
    <t-icon name="cloud-filled" class="cloud-icon" size="220rpx" />
    <view class="feature-section">
      <!-- <view class="date">{{ current_date }}</view> -->
      <!-- <view class="hello">{{DayTypeMap[day_type]}}</view> -->
      <!-- <view class="begin-text">用一个新单词, 开启美好的一天</view> -->
      <view class="camera-wrawpper {{!isLoading && todaySummary.length == 0 && groupedHistory.length == 0 && !takePhoto ? 'default' : ''}} {{takePhoto ? 'action' : ''}}">
        <view class="camera" bindtap="handleImageSelect">
          <view class="strip"></view>
          <view class="lens">
            <view class="lens-shutter"></view>
          </view>
          <view class="led"></view>
          <view class="btn"></view>
          <view class="bottom"></view>
        </view>
        <view class="photo-wrapper" wx:if="{{(todaySummary.length == 0 && groupedHistory.length == 0) || takePhoto}}">
          <view class="photo">
            <view class="photo-inner">
              <image class="photo-image" src="{{takePhoto ? photoPath : photoSvgData}}" mode="{{takePhoto ? 'widthFix' : 'aspectFit'}}"></image>
            </view>
          </view>
        </view>
        <view wx:if="{{takePhoto && showExpandLayer }}" class="photo-expand-layer" style="{{photoExpandTransform}} {{photoExpandTransition}}">
          <view class="photo-expand-inner" style="{{photoExpandCurrentWidth ? ('width: ' + photoExpandCurrentWidth + 'px;') : ''}}">
            <!-- <view class="expand-border-bg" style="{{expandBorderStyle}}"></view> -->
            <image class="photo-expand-image" src="{{takePhoto ? photoPath : photoSvgData}}" mode="widthFix"></image>
            <view class="scanner {{scannerVisible ? 'scanner-visible' : 'scanner-hidden'}}">
              <view class="star star1"></view>
              <view class="star star2"></view>
              <view class="star star3"></view>
            </view>
          </view>
        </view>
        <t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />
      </view>
      <!-- <view class='button-wrapper'>
        <view class='button'>123</view>
        <view class='button-bg'></view>
      </view> -->
    </view>
    <view wx:if="{{!takePhoto && dateStripItems && dateStripItems.length > 0}}" class="date-section">
      <view class="date-strip-header">
        <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'}}">
          <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 class="weekday">{{item.weekday}}</view>
              <view class="day">{{item.day}}</view>
            </view>
            <view wx:elif="{{item.type === 'ym'}}" class="date-item label">
              <view class="weekday">{{item.year}}</view>
              <view class="day">{{item.month}}</view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <view wx:if="{{!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}}">
                <t-skeleton wx:if="{{image.thumbnail_loading}}" class="full-image" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
                <image wx:else class="full-image" src="{{image.thumbnail_url}}" mode="widthFix" />
              </view>
            </view>
          </block>
          <block wx:else>
            <view class="waterfall">
              <view class="wf-col">
                <view class="wf-item" wx:for="{{waterfallLeft}}" wx:key="index" catch:tap="onImageTap" data-image-id="{{item.image_id}}">
                  <t-skeleton wx:if="{{item.thumbnail_loading}}" class="wf-image" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
                  <image wx:else class="wf-image" src="{{item.thumbnail_url}}" mode="widthFix" />
                </view>
              </view>
              <view class="wf-col">
                <view class="wf-item" wx:for="{{waterfallRight}}" wx:key="index" catch:tap="onImageTap" data-image-id="{{item.image_id}}">
                  <t-skeleton wx:if="{{item.thumbnail_loading}}" class="wf-image" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
                  <image wx:else class="wf-image" src="{{item.thumbnail_url}}" mode="widthFix" />
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
    </view>
    <!-- 历史记录区域 -->
    <!-- 仅在加载更多时显示骨架屏 -->
    <t-skeleton wx:if="{{isLoading && page >= 1}}" theme="paragraph" animation="gradient" loading="{{true}}"></t-skeleton>
    <!-- 使用提示 -->
    <!-- <view class="tips-section">
      <view class="tips-card">
        <text class="tips-title">使用提示</text>
        <view class="tips-list">
          <text class="tip-item">• 拍照时请确保光线充足</text>
          <text class="tip-item">• 图片会自动压缩以提高识别速度</text>
        </view>
      </view>
    </view> -->
  </view>
</view>