<view class="page safe-bottom">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left" bindtap="onBack">
      <image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
      <text class="unified-back-text">返回</text>
    </view>
    <text class="unified-header-title">心伴学堂</text>
    <view class="unified-header-right"></view>
  </view>

  <scroll-view scroll-y class="content" style="padding-top: 194rpx" enhanced show-scrollbar="{{false}}">
    <view class="category-bar">
      <scroll-view scroll-x class="category-scroll" show-scrollbar="{{false}}">
        <view class="category-list">
          
          <view class="category-item {{activeCategory === item.id ? 'active' : ''}}" 
                wx:for="{{categories}}" 
                wx:key="id"
                data-id="{{item.id}}" 
                bindtap="onCategoryTap">
            {{item.name}}
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="article-list">
      <view class="article-item" wx:for="{{articles}}" wx:key="id" bindtap="onArticleTap" data-id="{{item.id}}">
        <image src="{{item.cover}}" class="article-cover" mode="aspectFill"></image>
        <view class="article-info">
          <view class="article-title">{{item.title}}</view>
          <view class="article-desc">{{item.summary}}</view>
          <view class="article-footer">
            <text class="article-date">{{item.date}}</text>
            <text class="article-views">{{item.views}}次阅读</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="loading-tip" wx:if="{{loading}}">
      <text>加载中...</text>
    </view>

    <view class="empty-tip" wx:if="{{!loading && articles.length === 0 && !error}}">
      <image src="/images/icon-empty.png" mode="aspectFit"></image>
      <text>暂无内容</text>
    </view>

    <view class="error-tip" wx:if="{{error}}">
      <text>{{error}}</text>
      <text class="retry-btn" bindtap="loadArticles">点击重试</text>
    </view>
  </scroll-view>
</view>
