kydc/progress/achievements/achievements.wxml

<view class="page">
  <scroll-view scroll-y class="content">
    <view class="heading">
      <text class="title">成就墙</text>
      <text class="subtitle">把你的每一次坚持都挂在墙上</text>
    </view>

    <view class="hero-card">
      <view class="hero-glow"></view>
      <view class="hero-row">
        <view>
          <text class="hero-num">{{unlocked}}</text>
          <text class="hero-label">已点亮勋章 / {{total}}</text>
        </view>
        <view class="hero-badge">
          <image class="hero-badge-img" src="{{heroBadgeIcon}}" mode="aspectFit" />
        </view>
      </view>
    </view>

    <view wx:if="{{loading}}" class="empty-state">
      <text class="empty-title">加载中...</text>
      <text class="empty-subtitle">正在同步成就数据</text>
    </view>

    <view wx:elif="{{error}}" class="error-banner">
      <text class="error-text">{{error}}</text>
    </view>

    <view wx:elif="{{!sections.length}}" class="empty-state">
      <text class="empty-title">暂无成就</text>
      <text class="empty-subtitle">继续复习和打卡后会逐渐解锁</text>
    </view>

    <view wx:else>
      <block wx:for="{{sections}}" wx:key="key">
        <view class="state-card {{item.key}}">
          <view class="state-head">
            <text class="state-title">{{item.title}}</text>
            <text class="state-subtitle">{{item.sections.length}} 个分组</text>
          </view>
          <block wx:for="{{item.sections}}" wx:key="key">
            <view class="section-card">
              <view class="section-head">
                <view class="section-title-wrap">
                  <image class="section-icon" src="{{item.meta.icon}}" mode="aspectFit" />
                  <view>
                    <text class="section-title">{{item.meta.title}}</text>
                    <text class="section-subtitle">{{item.meta.subtitle}}</text>
                  </view>
                </view>
                <text class="section-count">{{item.items.length}} 项</text>
              </view>
              <text class="section-progress">{{item.progressText}}</text>
              <view class="grid">
                <block wx:for="{{item.items}}" wx:key="id">
                  <view class="item {{item.is_unlocked ? 'accent-primary' : 'accent-secondary'}}">
                    <view class="item-icon">
                      <image class="item-icon-img" src="{{item.icon}}" mode="aspectFit" />
                    </view>
                    <text class="item-title">{{item.achievement_name}}</text>
                    <text class="item-sub">{{item.progress_value}} / {{item.target_value}}</text>
                  </view>
                </block>
              </view>
            </view>
          </block>
        </view>
      </block>
    </view>
  </scroll-view>
</view>