wxamp-ymtxUser/pagesB/pages/repository/repository.wxml

<view class="container_zsl">
  <!-- 搜索区域 -->
  <view class="search-area">
    <view class="search-box">
      <view class="search-input-wrapper">
        <image src="/pagesB/images/sou.png" class="search-icon" />
        <input 
          class="search-input" 
          placeholder="请输入关键词搜索，如：猪瘟、饲养、疫苗..." 
          placeholder-class="placeholder"
          value="{{searchValue}}"
          bindinput="onInputSearch"
          bindconfirm="onSearch"
        />
        <icon 
          class="clear-icon" 
          type="clear" 
          size="16" 
          wx:if="{{searchValue}}"
          bindtap="onClearSearch"
        />
      </view>
    </view>
    
    <!-- 分类筛选 -->
    <view class="category-filter">
      <view 
        class="category-item {{activeCategory === item ? 'active' : ''}}" 
        wx:for="{{categories}}" 
        wx:key="index"
        data-category="{{item}}"
        bindtap="onFilterCategory"
      >
        {{item}}
        <view class="category-dot" wx:if="{{activeCategory === item}}"></view>
      </view>
    </view>
  </view>

  <!-- 加载状态 -->
  <view wx:if="{{isLoading}}" class="loading">
    <view class="spinner">
      <view class="spinner-item"></view>
      <view class="spinner-item"></view>
      <view class="spinner-item"></view>
    </view>
    <text class="loading-text">正在搜索...</text>
  </view>

  <!-- 搜索结果 -->
  <scroll-view wx:else class="result-list" scroll-y enable-back-to-top>
    <!-- 搜索结果列表 -->
    <view wx:if="{{searchResults.length > 0}}">
      <view class="result-count">
        <text>找到 {{searchResults.length}} 条相关结果</text>
      </view>
      
      <view class="knowledge-list">
        <view 
          class="knowledge-item" 
          wx:for="{{searchResults}}" 
          wx:key="id"
          data-id="{{item.id}}"
          bindtap="onViewDetail"
        >
          <view class="item-header">
            <view class="title-wrapper">
              <view class="item-title">{{item.title}}</view>
              <view class="item-category">{{item.category}}</view>
            </view>
          </view>
          
          <view class="item-content">{{item.content}}</view>
          <view class="item-footer">
            <view class="tags">
              <view class="tag" wx:for="{{item.tags}}" wx:key="*this">
                {{item}}
              </view>
            </view>
            <view class="actions">
              <view class="date-info">
                <text class="date">{{item.date}}</text>
              </view>
              <view 
                class="copy-btn" 
                data-content="{{item.content}}"
                bindtap="onCopyContent"
              >
                <text>复制</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 无结果 -->
    <view class="empty-state" wx:if="{{searchValue && searchResults.length==0}}">
      <text class="empty-text">未找到"{{searchValue}}"的相关信息</text>
      <view class="suggestions">
        <view class="suggestion-item">
          <view class="suggestion-dot"></view>
          <text>检查关键词拼写</text>
        </view>
        <view class="suggestion-item">
          <view class="suggestion-dot"></view>
          <text>尝试其他相关词汇</text>
        </view>
        <view class="suggestion-item">
          <view class="suggestion-dot"></view>
          <text>咨询专业兽医</text>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

<!-- 使用提示弹框 -->
<view wx:if="{{showTipsModal}}" class="modal-mask" bindtap="hideTips">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <image src="/pagesB/images/syts.png" class="modal-icon" />
      <text class="modal-title">使用提示</text>
    </view>
    
    <view class="modal-body">
      <view class="tip-item">
        <view class="tip-number">1</view>
        <text class="tip-text">可以搜索疾病名称（如：猪瘟）</text>
      </view>
      <view class="tip-item">
        <view class="tip-number">2</view>
        <text class="tip-text">可以搜索动物种类（如：鸡、牛）</text>
      </view>
      <view class="tip-item">
        <view class="tip-number">3</view>
        <text class="tip-text">可以搜索症状（如：腹泻）</text>
      </view>
      <view class="tip-item">
        <view class="tip-number">4</view>
        <text class="tip-text">可以搜索管理方法（如：饲料、消毒）</text>
      </view>
    </view>
    
    <view class="modal-footer">
      <button class="modal-confirm" bindtap="hideTips">我知道了</button>
    </view>
  </view>
</view>