Zhubin-jiemian/myapp/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>AI法律咨询</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card class="lawyer-card">
    <div class="card-header">
      <div class="avatar-container">
        <img src="assets/lin.jpg" alt="林正鸿律师" class="lawyer-avatar">
      </div>
      <div class="header-text">
        <h2>林正鸿</h2>
        <p class="title">国正律师事务所 创始合伙人</p>
      </div>
    </div>

    <ion-card-content>
      <div class="specialty-tags">
        <ion-chip color="primary">刑事辩护</ion-chip>
        <ion-chip color="primary">婚姻家庭</ion-chip>
        <ion-chip color="primary">合同纠纷</ion-chip>
      </div>
      
      <div class="profile-desc">
        <p><ion-icon name="school-outline"></ion-icon> 全国优秀律师 | 全国律协刑事专业委员会副主任</p>
        <p><ion-icon name="document-text-outline"></ion-icon> 擅长经济犯罪辩护、企业合规及司法政策研究</p>
        <p><ion-icon name="ribbon-outline"></ion-icon> 参与多项最高法司法解释制定工作</p>
      </div>
    </ion-card-content>

    <!-- 修改后的咨询卡片部分，移除了row/col布局 -->
    <ion-card class="consultation-card">
      <ion-card-header class="ion-text-center">
        <ion-icon name="document-text-outline" color="primary" class="feature-icon" style="font-size: 48px;"></ion-icon>
        <ion-card-title class="ion-padding-top">法律咨询服务</ion-card-title>
        <ion-card-subtitle>专业法律咨询 - 维护您的合法权益</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content>
        <ion-text color="medium" class="ion-text-center ion-margin-bottom">
          <p>我们的专业律师团队随时为您提供法律咨询服务</p>
        </ion-text>

        @if (consultList) {
          <ion-list lines="none" class="consult-history">
            <ion-list-header>
              <ion-label>历史咨询记录</ion-label>
              <ion-button fill="clear" size="small" (click)="loadConsult()">
                <ion-icon slot="icon-only" name="refresh"></ion-icon>
              </ion-button>
            </ion-list-header>

            @for (consult of consultList; track consult) {
              <ion-item button detail (click)="openConsult(consult.get('chatId'))" class="consult-item">
                @if (consult.get('avatar')) {
                  <ion-avatar slot="start">
                    <img [src]="consult.get('avatar')" alt="律师头像">
                  </ion-avatar>
                } @else {
                  <ion-avatar slot="start">
                    <ion-icon name="person-circle" style="font-size: 40px;"></ion-icon>
                  </ion-avatar>
                }

                <ion-label>
                  <h3>{{ consult.get('name') || '未命名咨询' }}</h3>
                  <p>{{ consult.updatedAt | date:'yyyy-MM-dd HH:mm' }}</p>
                </ion-label>

                <ion-button slot="end" fill="clear" color="danger" (click)="$event.stopPropagation(); deleteConsult(consult)">
                  <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-button>
              </ion-item>
            }
          </ion-list>
        }
      </ion-card-content>

      <ion-footer class="ion-no-border">
        <ion-toolbar>
          <ion-button (click)="openConsult()" expand="block" color="primary" shape="round">
            <ion-icon slot="start" name="chatbubbles"></ion-icon>
            开始新咨询
          </ion-button>
        </ion-toolbar>
      </ion-footer>
    </ion-card>
  </ion-card>
</ion-content>