yss-project/src/app/pages/customer-service/project-detail/project-detail.html

<!-- 项目详情页面内容 -->
<div class="project-detail-container ios-style">
  <!-- 顶部导航/Header -->
    <header class="project-header ios-header">
      <div class="header-left">
        <div class="project-info">
          <h1 class="project-title">{{ project()?.name || '现代简约风格三居室设计' }}</h1>
          <div class="project-meta">
            <span class="project-status {{ getProjectStatusClass(project()?.status) }}">
              {{ project()?.status || '进行中' }}
            </span>
            <span class="project-stage">当前阶段：{{ project()?.currentStage || '方案修改与确认' }}</span>
            <span class="project-date">最后更新：{{ formatDate(currentDate()) }}</span>
          </div>
        </div>
      </div>
      
      <div class="header-right">
        <div class="header-actions">
          <button class="action-btn secondary-btn btn-hover-effect">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            <span>导出报告</span>
          </button>
          <button class="action-btn primary-btn btn-hover-effect">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            <span>联系客户</span>
          </button>
          <button class="action-btn back-btn" routerLink="/customer-service/dashboard">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M19 12H5"></path>
              <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
            返回工作台
          </button>
        </div>
      </div>
    </header>

  <!-- 主要内容区域 -->
  <div class="main-content-area ios-content">
    <!-- 主内容区 (居中) -->
    <div class="project-content-main ios-main">
      <!-- 项目进度卡片 -->
      <div class="card progress-card">
        <div class="progress-header">
          <h3>项目进度</h3>
          <span class="progress-percentage">{{ completionProgress() }}%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" [style.width]="progressFillWidth()"></div>
        </div>
        <div class="progress-meta">
          <span>开始时间：{{ formatDate(project()?.createdAt || '2023-06-01') }}</span>
          <span>预计完成：{{ formatDate(project()?.deadline || '2023-07-15') }}</span>
        </div>
      </div>
      
      <!-- 历史服务记录 -->
      <div class="card historical-records-card">
        <div class="records-header">
          <h3>历史服务记录</h3>
        </div>
        
        <!-- 过往咨询记录 -->
        <div class="record-section">
          <h4>过往咨询记录</h4>
          <div class="consultation-list">
            @for (record of consultationRecords(); track record.id || $index) {
              <div class="consultation-item">
                <div class="consultation-date">{{ formatDate(record.date) }}</div>
                <div class="consultation-content">{{ record.content }}</div>
                <div class="consultation-status"
                     [class.status-processed]="record.status === '已解决' || record.status === '成功'"
                     [class.status-processing]="record.status === '处理中'"
                     [class.status-pending]="record.status === '待处理'">
                  {{ record.status }}
                </div>
              </div>
            }
            </div>
          </div>
        </div>
        
        <!-- 合作项目 -->
        <div class="record-section">
          <h4>合作项目</h4>
          <div class="projects-list">
            @for (proj of cooperationProjects(); track proj.id || $index) {
              <div class="project-item">
                <div class="project-name">{{ proj.name }}</div>
                <div class="project-period">{{ formatDate(proj.startDate) }} - {{ formatDate(proj.endDate) }}</div>
                <div class="project-description">{{ proj.description }}</div>
                <div class="project-status">{{ proj.status }}</div>
              </div>
            }
            </div>
          </div>
        </div>
        
        <!-- 历史反馈/评价 -->
        <div class="record-section">
          <h4>历史反馈/评价</h4>
          <div class="feedback-list">
            @for (feedback of historicalFeedbacks(); track feedback.id || $index) {
              <div class="feedback-item">
                <div class="feedback-date">{{ formatDate(feedback.date) }}</div>
                <div class="feedback-rating">
                  @for (star of [1,2,3,4,5]; track star) {
                    <span>
                      <i class="fa" [ngClass]="{ 'fa-star': star <= feedback.rating, 'fa-star-o': star > feedback.rating }"></i>
                    </span>
                  }
                </div>
                <div class="feedback-content">{{ feedback.content }}</div>
                @if (feedback.response) {
                  <div class="feedback-response">
                    <strong>回复：</strong>{{ feedback.response }}
                  </div>
                }
              </div>
            }
          </div>
        </div>
      </div>

      <!-- 进度时间轴 -->
      <div class="card timeline-card">
        <div class="timeline-header">
          <h3 class="card-title">项目阶段时间轴</h3>
          
          <!-- 新的流程状态显示条 - 与标题右对齐 -->
          <div class="process-status-display">
            <app-process-status-bar 
              [stageData]="processStatusStages">
            </app-process-status-bar>
          </div>
        </div>
        
        <div class="project-timeline">
          @for (stage of projectStages; track $index; let i = $index) {
            <div class="timeline-item" [class.stage-completed]="stage.completed" [class.stage-in-progress]="stage.inProgress">
              <div class="timeline-icon" [class.icon-completed]="stage.completed" [class.icon-in-progress]="stage.inProgress">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="9"></circle>
                  @if (stage.completed) {
                    <path d="m5 12 5 5 10-10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  }
                  @if (stage.inProgress) {
                    <circle cx="12" cy="12" r="5"></circle>
                  }
                </svg>
              </div>
              @if (i < (projectStages?.length || 0) - 1) {
                <div class="timeline-line" [class.line-completed]="stage.completed && projectStages?.[i+1]?.completed"></div>
              }
              <div class="timeline-content">
                <div class="timeline-header">
                  <h4 class="stage-title">{{ stage.name }}</h4>
                  <span class="stage-status">
                    {{ stage.completed ? '已完成' : stage.inProgress ? '进行中' : '未开始' }}
                  </span>
                </div>
                <div class="timeline-meta">
                  <div class="stage-dates">
                    @if (stage.startDate) {
                      <span class="date-item">开始：{{ formatDate(stage.startDate) }}</span>
                    }
                    @if (stage.endDate) {
                      <span class="date-item">完成：{{ formatDate(stage.endDate) }}</span>
                    }
                  </div>
                  <div class="stage-responsible">负责人：{{ stage.responsible || '未分配' }}</div>
                </div>
                @if (stage.details) {
                  <div class="stage-details">
                    <p>{{ stage.details }}</p>
                  </div>
                }
              </div>
            </div>
          }
        </div>
      </div>

      <!-- 项目详情标签页 -->
      <div class="project-tabs ios-tabs">
        <div class="tab-header">
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'overview'" (click)="switchTab('overview')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
            <span>概览</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'milestones'" (click)="switchTab('milestones')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
            </svg>
            <span>里程碑</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'tasks'" (click)="switchTab('tasks')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
            </svg>
            <span>任务</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'messages'" (click)="switchTab('messages')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
            </svg>
            <span>消息</span>
          </button>
          <button class="tab-btn btn-hover-effect" [class.active]="activeTab() === 'files'" (click)="switchTab('files')">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            <span>文件</span>
          </button>
        </div>

        <!-- 消息标签内容 -->
        @if (activeTab() === 'messages') {
        }
          <div class="tab-content">
          <div class="messages-container">
            <div class="messages-list">
              @for (message of messages(); track $index) {
                <div class="message-item">
                  <div class="message-avatar">
                    {{ message.sender.charAt(0) }}
                  </div>
                  <div class="message-content">
                    <div class="message-header">
                      <span class="message-sender">{{ message.sender }}</span>
                      <span class="message-time">{{ formatDateTime(message.timestamp) }}</span>
                    </div>
                    <div class="message-text">{{ message.content }}</div>
                  </div>
                </div>
              }
            </div>
            <div class="message-input-area">
              <textarea 
                [value]="newMessage()"
                (input)="onMessageInput($event)"
                placeholder="输入消息内容..."
                rows="3"
                (keydown.enter.shift)="$event.preventDefault()"
                (keydown.enter)="sendMessage()"
              ></textarea>
              <div class="message-actions">
                <button class="secondary-btn btn-hover-effect">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                  </svg>
                  <span>上传文件</span>
                </button>
                <button class="primary-btn btn-hover-effect" (click)="sendMessage()" [disabled]="!newMessage().trim()">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                  </svg>
                  <span>发送</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 概览标签内容 -->
        @if (activeTab() === 'overview') {
          <div class="tab-content">
            <div class="overview-grid">
              <!-- 客户信息卡片 -->
              <div class="info-card">
                <h4 class="card-title">客户信息</h4>
                <div class="customer-info">
                  <div class="info-item">
                    <label>客户姓名</label>
                    <span>{{ project()?.customerName || '王先生' }}</span>
                  </div>
                  <div class="info-item">
                    <label>联系方式</label>
                    <span>138****5678</span>
                  </div>
                  <div class="info-item">
                    <label>标签</label>
                    <div class="tag-container">
                      <span class="tag">朋友圈</span>
                      <span class="tag">软装</span>
                      <span class="tag">现代风格</span>
                    </div>
                  </div>
                  <div class="info-item">
                    <label>高优先级需求</label>
                    <ul class="need-list">
                      @for (need of project()?.highPriorityNeeds || ['客厅光线充足', '储物空间充足', '环保材料']; track $index) {
                        <li>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <polyline points="20 6 9 17 4 12"></polyline>
                          </svg>
                          {{ need }}
                        </li>
                      }
                    </ul>
                  </div>
                </div>
              </div>

              <!-- 项目团队卡片 -->
              <div class="info-card">
                <h4 class="card-title">项目团队</h4>
                <div class="team-info">
                  <div class="team-member">
                    <div class="member-avatar" title="客服小李">IMG</div>
                    <div class="member-details">
                      <div class="member-name">客服小李</div>
                      <div class="member-role">客户经理</div>
                    </div>
                    <button class="message-btn">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                      </svg>
                    </button>
                  </div>
                  <div class="team-member">
                    <div class="member-avatar" title="张设计师">IMG</div>
                    <div class="member-details">
                      <div class="member-name">张设计师</div>
                      <div class="member-role">主设计师</div>
                    </div>
                    <button class="message-btn">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>

              <!-- 最近反馈卡片 -->
              <div class="info-card">
                <h4 class="card-title">客户反馈</h4>
                <div class="feedback-list">
                  @for (feedback of feedbacks(); track feedback.id || $index) {
                    <div class="feedback-item">
                      <div class="feedback-header">
                        <div class="feedback-author">{{ getFeedbackCustomerName(feedback) }}</div>
                        <div class="feedback-rating">
                          <span class="rating-stars">★★★★☆</span>
                          <span class="rating-number">{{ getFeedbackRating(feedback) }}.0</span>
                        </div>
                      </div>
                      <div class="feedback-content">{{ feedback?.content || '' }}</div>
                      @if (feedback?.response) {
                        <div class="feedback-response">
                          <div class="response-label">客服回复：</div>
                          <div class="response-text">{{ feedback.response }}</div>
                        </div>
                      }
                      <div class="feedback-meta">
                        <span class="feedback-date">{{ formatDate(feedback?.createdAt) }}</span>
                        <span class="feedback-status" [class.status-processed]="feedback?.status === '已解决'" [class.status-pending]="feedback?.status === '待处理'" [class.status-processing]="feedback?.status === '处理中'">
                          {{ feedback?.status || '未知状态' }}
                        </span>
                      </div>
                    </div>
                  }
                  @if (feedbacks().length > 0) {
                    <button class="view-all-btn btn-hover-effect">查看全部反馈</button>
                  }
                </div>
              </div>
            </div>
            
            <!-- 订单创建板块 -->
            <div class="order-creation-section">
              <div class="section-header">
                <h4 class="section-title">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                  </svg>
                  订单创建
                </h4>
                <button class="toggle-btn" (click)="toggleOrderCreation()" [class.expanded]="isOrderCreationExpanded()">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </button>
              </div>
              
              <div class="order-creation-content" [class.expanded]="isOrderCreationExpanded()">
                <div class="order-creation-container">
                  <div class="scrollable-content">
                    <!-- 客户信息长条栏 -->
                    <section class="customer-info-bar">
                    <div class="customer-bar-container">
                      <!-- 左侧客户搜索和信息 -->
                      <div class="customer-search-area">
                        @if (!selectedOrderCustomer()) {
                          <div class="search-input-container">
                            <div class="search-icon">
                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                              </svg>
                            </div>
                            <input 
                              type="text" 
                              [ngModel]="orderSearchKeyword()" 
                              (ngModelChange)="orderSearchKeyword.set($event); searchOrderCustomer()"
                              placeholder="输入客户姓名或手机号快速匹配老客户..."
                              class="customer-search-input"
                              autocomplete="off"
                              (keyup.enter)="quickFillOrderCustomerInfo(orderSearchKeyword())"
                            />
                            <button 
                              class="search-action-btn"
                              (click)="quickFillOrderCustomerInfo(orderSearchKeyword())"
                              [disabled]="!orderSearchKeyword().trim()"
                            >
                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 11l3 3 8-8"></path>
                                <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.51 0 2.93.37 4.18 1.03"></path>
                              </svg>
                              匹配
                            </button>
                          </div>
                          
                          <!-- 搜索结果下拉 -->
                          @if (orderSearchResults().length > 0) {
                            <div class="search-dropdown">
                              <div class="dropdown-header">
                                <span>找到 {{ orderSearchResults().length }} 位客户</span>
                              </div>
                              @for (customer of orderSearchResults(); track customer.id) {
                                <div class="customer-option" (click)="selectOrderCustomer(customer)">
                                  <div class="customer-avatar-sm">
                                    @if (customer.avatar) {
                                      <img [src]="customer.avatar" [alt]="customer.name">
                                    } @else {
                                      <span>{{ customer.name.charAt(0) }}</span>
                                    }
                                  </div>
                                  <div class="customer-details">
                                    <div class="customer-name">{{ customer.name }}</div>
                                    <div class="customer-phone">{{ customer.phone }}</div>
                                  </div>
                                  <div class="customer-tags">
                                    <span class="tag">{{ customer.customerType }}</span>
                                  </div>
                                </div>
                              }
                            </div>
                          }
                        } @else {
                          <!-- 已选择客户信息展示 -->
                          <div class="selected-customer-info">
                            <div class="customer-avatar-lg">
                              @if (selectedOrderCustomer()?.avatar) {
                                <img [src]="selectedOrderCustomer()?.avatar" [alt]="selectedOrderCustomer()?.name">
                              } @else {
                                <span>{{ selectedOrderCustomer()?.name?.charAt(0) }}</span>
                              }
                            </div>
                            <div class="customer-main-info">
                              <div class="customer-name">{{ selectedOrderCustomer()?.name }}</div>
                              <div class="customer-phone">{{ selectedOrderCustomer()?.phone }}</div>
                              <div class="customer-type">{{ selectedOrderCustomer()?.customerType }}</div>
                            </div>
                            <button class="clear-customer-btn" (click)="clearOrderCustomer()">
                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                              </svg>
                              重新选择
                            </button>
                          </div>
                        }
                      </div>
                    </div>
                  </section>

                  <!-- 项目需求表单 -->
                  <section class="requirement-section">
                    <div class="section-header">
                      <h3>项目需求</h3>
                    </div>
                    <form [formGroup]="orderRequirementForm" class="requirement-form">
                      <div class="form-row">
                        <div class="form-group">
                          <label for="projectType">项目类型 <span class="required">*</span></label>
                          <select id="projectType" formControlName="projectType" class="field-select">
                            <option value="">请选择项目类型</option>
                            <option value="residential">住宅设计</option>
                            <option value="commercial">商业空间</option>
                            <option value="office">办公空间</option>
                            <option value="restaurant">餐饮空间</option>
                          </select>
                        </div>
                        <div class="form-group">
                          <label for="area">面积 <span class="required">*</span></label>
                          <div class="input-with-unit">
                            <input type="number" id="area" formControlName="area" class="field-input" placeholder="请输入面积">
                            <span class="input-unit">㎡</span>
                          </div>
                        </div>
                      </div>
                      
                      <div class="form-row">
                        <div class="form-group">
                          <label for="style">装修风格</label>
                          <select id="style" formControlName="style" class="field-select">
                            <option value="">请选择装修风格</option>
                            @for (style of decorationStyles; track style.value) {
                              <option [value]="style.value">{{ style.label }}</option>
                            }
                          </select>
                        </div>
                        <div class="form-group">
                          <label for="budget">预算范围</label>
                          <select id="budget" formControlName="budget" class="field-select">
                            <option value="">请选择预算范围</option>
                            <option value="5-10">5-10万</option>
                            <option value="10-20">10-20万</option>
                            <option value="20-50">20-50万</option>
                            <option value="50+">50万以上</option>
                          </select>
                        </div>
                      </div>
                      
                      <div class="form-group full-width">
                        <label for="requirements">具体需求</label>
                        <textarea id="requirements" formControlName="requirements" class="field-textarea" placeholder="请详细描述您的设计需求..."></textarea>
                      </div>
                    </form>
                  </section>
                  </div>

                  <!-- 操作按钮 -->
                  <div class="order-actions">
                    <button class="secondary-btn" (click)="resetOrderForm()">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="1 4 1 10 7 10"></polyline>
                        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                      </svg>
                      重置
                    </button>
                    <button class="primary-btn" (click)="createOrder()" [disabled]="!isOrderFormValid()">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                      </svg>
                      创建订单
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }

        <!-- 里程碑标签内容 -->
        @if (activeTab() === 'milestones') {
          <div class="tab-content">
            <div class="milestones-timeline">
              @for (milestone of milestones(); track milestone.id || $index; let i = $index) {
                <div class="milestone-item">
                  <div class="milestone-dot" [class.completed]="milestone.isCompleted"></div>
                  @if (i < milestones().length - 1) {
                    <div class="milestone-line" [class.completed]="milestone.isCompleted && milestones()[i+1].isCompleted"></div>
                  }
                  <div class="milestone-content">
                    <div class="milestone-header">
                      <h4 class="milestone-title">{{ milestone.title }}</h4>
                      <span class="milestone-status" [class.status-completed]="milestone.isCompleted" [class.status-pending]="!milestone.isCompleted">
                        {{ milestone.isCompleted ? '已完成' : '进行中' }}
                      </span>
                    </div>
                    <p class="milestone-description">{{ milestone.description }}</p>
                    <div class="milestone-dates">
                      <div class="date-item">
                        <label>截止日期</label>
                        <span>{{ formatDate(milestone.dueDate) }}</span>
                      </div>
                      @if (milestone.completedDate) {
                        <div class="date-item">
                          <label>完成日期</label>
                          <span>{{ formatDate(milestone.completedDate) }}</span>
                        </div>
                      }
                    </div>
                    @if (!milestone.isCompleted) {
                      <div class="milestone-actions">
                        <button class="primary-btn small btn-hover-effect" (click)="completeMilestone(milestone.id)">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <polyline points="20 6 9 17 4 12"></polyline>
                          </svg>
                          <span>标记完成</span>
                        </button>
                      </div>
                    }
                  </div>
                </div>
              }
            </div>
          </div>
        }

        <!-- 任务标签内容 -->
        @if (activeTab() === 'tasks') {
          <div class="tab-content">
            <div class="tasks-filter">
              <div class="filter-options">
                <button class="filter-btn active">全部任务</button>
                <button class="filter-btn">进行中</button>
                <button class="filter-btn">已完成</button>
                <button class="filter-btn">逾期</button>
              </div>
              <div class="search-box">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input type="text" placeholder="搜索任务...">
              </div>
            </div>
            <div class="tasks-list">
              <!-- 修复任务列表中的状态显示，确保安全访问 -->
              @for (task of tasks(); track task.id || $index) {
                <div class="task-item">
                  <div class="task-checkbox">
                    <input type="checkbox" [checked]="task.isCompleted" (change)="task.isCompleted ? null : completeTask(task.id)">
                  </div>
                  <div class="task-content">
                    <h4 class="task-title" [class.completed]="task.isCompleted">{{ task.title || '未命名任务' }}</h4>
                    <p class="task-description">{{ task.description || '' }}</p>
                    <div class="task-meta">
                      <span class="task-assignee">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                          <circle cx="9" cy="7" r="4"></circle>
                          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        {{ task.assignee || '未分配' }}
                      </span>
                      <span class="task-deadline" [class.overdue]="task.isOverdue">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                          <circle cx="12" cy="12" r="10"></circle>
                          <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                        {{ formatDate(task.deadline) }}
                      </span>
                      <span class="task-priority" [class.priority-high]="task.priority === 'high'" [class.priority-medium]="task.priority === 'medium'" [class.priority-low]="task.priority === 'low'">
                        {{ task.priority === 'high' ? '高' : task.priority === 'medium' ? '中' : '低' }}
                      </span>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        }

        <!-- 消息标签内容 -->
        @if (activeTab() === 'messages') {
          <div class="tab-content">
          <div class="messages-container">
            <div class="messages-list">
              @for (message of messages(); track $index) {
                <div class="message-item">
                  <div class="message-avatar">
                    {{ message.sender.charAt(0) }}
                  </div>
                  <div class="message-content">
                    <div class="message-header">
                      <span class="message-sender">{{ message.sender }}</span>
                      <span class="message-time">{{ formatDateTime(message.timestamp) }}</span>
                    </div>
                    <div class="message-text">{{ message.content }}</div>
                  </div>
                </div>
              }
            </div>
      </div>
    </div>

    <!-- 右侧边栏 - 企业微信聊天集成 -->
    <div class="wechat-sidebar ios-sidebar">
      <div class="wechat-header">
        <h3>项目群聊</h3>
        <div class="wechat-actions">
          <button class="search-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="11" cy="11" r="8"></circle>
              <path d="m21 21-4.35-4.35"></path>
            </svg>
          </button>
          <button class="settings-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- 聊天消息列表 -->
      <div class="wechat-messages" #wechatMessages>
        @for (msg of wechatMessagesList; track $index) {
          <div class="wechat-message-item">
            <div class="message-avatar">
              {{ msg.sender.charAt(0) }}
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-sender">{{ msg.sender }}</span>
                <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
              </div>
              <div class="message-text">{{ msg.content }}</div>
            </div>
          </div>
        }
      </div>
      
      <!-- 消息输入框 -->
      <div class="wechat-input-area">
        <div class="input-actions">
          <button class="action-btn btn-hover-effect">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
          </button>
          <button class="action-btn btn-hover-effect">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
            </svg>
          </button>
        </div>
        <input 
          type="text" 
          [(ngModel)]="wechatInput" 
          placeholder="输入消息..." 
          class="wechat-input"
          (keydown.enter)="sendWechatMessage()"
        />
        <button class="send-btn btn-hover-effect" (click)="sendWechatMessage()" [disabled]="!wechatInput.trim()">
          发送
        </button>
      </div>
    </div>
  }

  <!-- 售后处理入口 (固定在底部) -->
  <div class="after-sales-actions ios-actions">
    <div class="actions-container">
      <button class="action-btn primary btn-hover-effect" (click)="openModificationRequest()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M12 20h9"></path>
          <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
        </svg>
        <span>申请修改</span>
      </button>
      <button class="action-btn warning btn-hover-effect" (click)="openComplaintWarning()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
        <span>投诉预警</span>
      </button>
      <button class="action-btn secondary btn-hover-effect" (click)="openRefundRequest()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
        </svg>
        <span>申请退款</span>
      </button>
    </div>
  </div>
</div>

<!-- 文件标签内容 -->
@if (activeTab() === 'files') {
  <div class="tab-content">
    <div class="files-header">
      <h4>项目文件</h4>
      <div class="files-actions">
        <button class="primary-btn btn-hover-effect" (click)="openRenderPreview()" [disabled]="renderImages().length === 0">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21 15 16 10 5 21"></polyline>
          </svg>
          <span>查看渲染图</span>
        </button>
      </div>
    </div>
    <div class="files-list">
      @for (f of files(); track f.id || $index) {
        <div class="file-item">
          <div class="file-icon">{{ f.type === 'image' ? 'IMG' : 'DOC' }}</div>
          <div class="file-info">
            <div class="file-name">{{ f.name }}</div>
            <div class="file-meta">{{ f.size }} · 由 {{ f.uploadedBy }} 于 {{ formatDate(f.uploadedAt) }} 上传</div>
          </div>
          <div class="file-actions">
            <button class="link" (click)="previewFile(f)">预览</button>
            <button class="link" (click)="downloadFile(f)">下载</button>
          </div>
        </div>
      }
    </div>
  </div>
}

<!-- 只读渲染图预览弹窗 -->
@if (showRenderPreviewModal) {
  <div class="modal-backdrop" (click)="closeRenderPreview()"></div>
  <div class="modal" role="dialog" aria-modal="true">
    <div class="modal-header">
      <h3>渲染图预览</h3>
      <button class="close-button" (click)="closeRenderPreview()" aria-label="关闭">×</button>
    </div>
    <div class="modal-body">
      @if (renderImages().length > 0) {
        <div class="thumb-list">
          @for (img of renderImages(); track img.id) {
            <div class="thumb-item">
              <img [src]="img.url" [alt]="img.name" />
              <div class="thumb-meta">
                <div class="name">{{ img.name }}</div>
                <div class="sub">{{ img.size }} · {{ formatDate(img.uploadedAt) }}</div>
              </div>
            </div>
          }
        </div>
      } @else {
        <div class="empty">
          <p>暂无可预览的渲染图</p>
        </div>
      }
    </div>
    <div class="modal-footer">
      <button class="secondary-btn" (click)="closeRenderPreview()">关闭</button>
    </div>
  </div>
}