ai-salesperson-assistant/ai-assisant/src/modules/crm/mobile/page-crm-decision/page-crm-decision.html

<div class="container">
  <!-- 顶部导航 -->
  <header class="app-header">
    <div class="header-title">
      <i class="fas fa-robot"></i>
      <h1>九州宴会 - 销售话术决策助手</h1>
    </div>
  </header>
  
  <!-- 场景选择 -->
  <section class="scene-selector">
    <h2 class="input-title">
      <i class="fas fa-dharmachakra"></i>
      选择分析场景
    </h2>
    <div class="scene-options">
      <div class="scene-option" [class.active]="selectedScene === 'first-contact'" 
          (click)="selectScene('first-contact')">
        <i class="fas fa-handshake"></i>
        <h3>首次接触</h3>
        <p>分析初次沟通策略</p>
      </div>
      <div class="scene-option" [class.active]="selectedScene === 'deep-talk'" 
          (click)="selectScene('deep-talk')">
        <i class="fas fa-comments"></i>
        <h3>深度交流</h3>
        <p>优化后续跟进策略</p>
      </div>
    </div>
  </section>
  
  <!-- 文件上传区域 -->
  <section class="upload-area">
    <div class="upload-container">
      <label for="file-upload" class="upload-label">
        <i class="fas fa-cloud-upload-alt"></i>
        <span>上传聊天记录文件</span>
      </label>
      <input type="file" id="file-upload" #fileInput (change)="onFileSelected($event)" accept=".json" class="hidden">
      <p class="upload-hint">支持JSON格式的聊天记录文件</p>
    </div>
  </section>
  
  <!-- 客户对话分析 -->
  <section class="input-area">
    <h2 class="chat-title">
      <i class="fas fa-comments"></i>
      客户对话分析
      <span class="current-role-indicator" [ngClass]="{'customer-indicator': currentRole === 'customer', 'assistant-indicator': currentRole === 'assistant'}">
        当前角色: {{currentRole === 'customer' ? '客户' : '销售顾问'}}
      </span>
    </h2>
    <div class="chat-area" #chatContainer>
      <div *ngIf="!messages.length" class="empty-chat">
        <i class="fas fa-comments"></i>
        <p>请上传聊天记录或开始新的对话</p>
      </div>
      <div *ngFor="let msg of messages" class="chat-message" 
          [class.customer-message]="msg.role === 'customer'"
          [class.assistant-message]="msg.role === 'assistant'">
        <div class="message-header" [class.customer-header]="msg.role === 'customer'"
             [class.assistant-header]="msg.role === 'assistant'">
          <div class="icon">
            <i *ngIf="msg.role === 'customer'" class="fas fa-user"></i>
            <i *ngIf="msg.role === 'assistant'" class="fas fa-headset"></i>
          </div>
          <div>{{msg.role === 'customer' ? '客户' : '销售顾问'}}</div>
        </div>
        <div class="message-content">{{msg.content}}</div>
        <div class="message-time">{{msg.time}}</div>
      </div>
    </div>
    
    <!-- 客户标签编辑区 -->
    <div class="tags-area">
      <div class="tags-header">
        <div class="tags-title">客户标签</div>
        <div class="add-tag" (click)="addTag()">
          <i class="fas fa-plus"></i>
          <span>添加标签</span>
        </div>
      </div>
      <div class="input-tags">
        <div *ngFor="let tag of tags" class="tag" [style.background]="tag.background" 
            [style.color]="tag.color">
          <i [class]="tag.icon"></i>
          <span>{{tag.text}}</span>
          <span class="delete" (click)="removeTag($event, tag)">
            <i class="fas fa-times"></i>
          </span>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 输入工作区 -->
  <section class="input-area">
    <h2 class="input-title">
      <i class="fas fa-comment-dots"></i>
      添加对话内容
    </h2>
    
    <div class="role-selector">
      <div class="role-btn" [class.active]="currentRole === 'customer'" 
          (click)="setRole('customer')">客户消息</div>
      <div class="role-btn" [class.active]="currentRole === 'assistant'" 
          (click)="setRole('assistant')">销售回复</div>
    </div>
    
    <div class="input-field">
      <textarea class="text-input" placeholder="输入对话内容..." [(ngModel)]="newMessage" 
                (keydown)="onTextareaKeydown($event)" [disabled]="isProcessing"></textarea>
      <div *ngIf="isProcessing" class="processing-indicator">
        <i class="fas fa-circle-notch fa-spin"></i>
        <span>AI分析中...</span>
      </div>
    </div>
    
    <div class="action-buttons">
      <div class="action-btn save-btn" (click)="sendMessage()" [class.disabled]="isProcessing" [style.pointer-events]="isProcessing ? 'none' : 'auto'">
        <i class="fa fa-paper-plane"></i>
        <span>发送消息</span>
      </div>
      <div class="action-btn history-btn" (click)="viewHistory()">
        <i class="fa fa-history"></i>
        <span>历史记录</span>
      </div>
      <div class="action-btn" (click)="generateAIResponse()" [class.disabled]="isProcessing" [style.pointer-events]="isProcessing ? 'none' : 'auto'">
        <i class="fa fa-robot"></i>
        <span>AI回答</span>
      </div>
    </div>    
  </section>
  
  <!-- 策略卡片组 -->
  <section class="strategy-area">
    <h2 class="strategy-title">
      <i class="fas fa-cards"></i>
      {{sceneTitle}} - 推荐应对策略
    </h2>
    <div class="cards-container">
      {{aicontent}}
      <div *ngFor="let strategy of strategies; let i = index" 
          class="strategy-card"
          [class.card-aggressive]="strategy.type === 'aggressive'"
          [class.card-neutral]="strategy.type === 'neutral'"
          [class.card-conservative]="strategy.type === 'conservative'"
          [style.transform]="getCardTransform(i)"
          [style.zIndex]="getCardZIndex(i)"
          (click)="activateCard(i)">
        <div class="card-header">
          <div class="card-title">{{strategy.title}}</div>
          <div class="card-icon" [style.background]="strategy.iconBg" 
              [style.color]="strategy.iconColor">
            <i [class]="strategy.icon"></i>
          </div>
        </div>
        <div class="card-content">
          <p>{{strategy.description}}</p>
          <div class="card-highlight">
            {{strategy.highlight}}
          </div>
          <p><strong>适用场景：</strong>{{strategy.applicable}}</p>
          <p><strong>优势：</strong>{{strategy.advantage}}</p>
        </div>
        <div class="card-footer">
          <div class="card-hint">成功率: {{strategy.successRate}}</div>
          <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: {{strategy.rating}}</div>
        </div>
      </div>
    </div>
    
    <!-- 卡片导航点 -->
    <div class="card-navigation">
      <div *ngFor="let strategy of strategies; let i = index" 
          class="card-nav-btn" 
          [class.active]="activeCardIndex === i"
          (click)="activateCard(i)"></div>
    </div>
  </section>
  
  <!-- 操作按钮 -->
  <div class="action-buttons fixed-buttons">
    <div class="action-btn save-btn" (click)="saveRecord()">
      <i class="fas fa-save"></i>
      <span>保存记录</span>
    </div>
    <div class="action-btn history-btn" (click)="viewHistory()">
      <i class="fas fa-history"></i>
      <span>查看历史</span>
    </div>
  </div>
  
  <!-- 历史记录模态框 -->
  <div *ngIf="showHistoryModal" class="history-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>历史记录</h3>
        <button class="close-btn" (click)="showHistoryModal = false">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div *ngIf="!chatRecords.length" class="empty-history">
          <i class="fas fa-folder-open"></i>
          <p>暂无保存的记录</p>
        </div>
        <div *ngFor="let record of chatRecords" class="history-item" (click)="selectRecord(record)">
          <div class="history-header">
            <div class="history-title">
              <span>{{record.scene === 'first-contact' ? '首次接触' : '深度交流'}}</span>
              <span class="history-timestamp">{{formatDate(record.timestamp)}}</span>
            </div>
            <button class="delete-btn" (click)="deleteRecord(record); $event.stopPropagation()">
              <i class="fas fa-trash"></i>
            </button>
          </div>
          <div class="history-preview">
            <p class="history-summary">
              {{record.messages.length}}条消息 | 策略: {{record.strategies[activeCardIndex].title}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>