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

<!-- 项目详情页面内容 -->
<div class="project-detail-container">
  <!-- 右侧主要内容 -->
  <div class="project-content">
      <!-- 项目头部信息 -->
      <div class="project-header">
        <div class="project-title-section">
          <h2 class="project-title">{{ project()?.name || '现代简约风格三居室设计' }}</h2>
          <div class="project-meta">
            <span class="project-status {{ getProjectStatusClass(project()?.status) }}">
              {{ project()?.status || '进行中' }}
            </span>
            <span class="project-stage">当前阶段：{{ project()?.currentStage || '方案修改与确认' }}</span>
          </div>
        </div>
        <div class="project-actions">
          <button class="secondary-btn">
            <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="primary-btn">
            <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>
        </div>
      </div>

      <!-- 项目进度卡片 -->
      <div class="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="project-tabs">
        <div class="tab-header">
          <button class="tab-btn" [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" [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" [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" [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" [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>

        <!-- 消息标签内容 - 只保留一个消息输入区域 -->
        <div *ngIf="activeTab() === 'messages'" class="tab-content">
          <div class="messages-container">
            <div class="messages-list">
              <!-- 消息列表内容保持不变 -->
            </div>
            <div class="message-input-area">
              <!-- 只使用单向绑定 + input事件，移除双向绑定 -->
              <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">
                  <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" (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>

        <!-- 概览标签内容 -->
        <div *ngIf="activeTab() === 'overview'" 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">
                    <li *ngFor="let need of project()?.highPriorityNeeds || ['客厅光线充足', '储物空间充足', '环保材料']">
                      <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">
                  <img src="https://picsum.photos/id/64/48/48" alt="客服小李" class="member-avatar">
                  <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">
                  <img src="https://picsum.photos/id/91/48/48" alt="张设计师" class="member-avatar">
                  <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">
                <div *ngFor="let feedback of feedbacks()" class="feedback-item">
                  <!-- 修改前 -->
                  <div class="feedback-item">
                    <div class="feedback-header">
                      <div class="feedback-author">{{ feedback?.customerName || '未知客户' }}</div>
                      <div class="feedback-rating">
                        <span class="rating-stars">★★★★☆</span>
                        <span class="rating-number">{{ feedback?.rating || 0 }}.0</span>
                      </div>
                    </div>
                    <div class="feedback-content">{{ feedback?.content || '' }}</div>
                    <div class="feedback-response" *ngIf="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 === '待处理'">
                        {{ feedback?.status || '未知状态' }}
                      </span>
                    </div>
                  </div>
                  
                  <!-- 修改后 -->
                  <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>
                    <div class="feedback-response" *ngIf="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>
                  <button class="view-all-btn" *ngIf="feedbacks().length > 0">查看全部反馈</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 里程碑标签内容 -->
        <div *ngIf="activeTab() === 'milestones'" class="tab-content">
          <div class="milestones-timeline">
            <div *ngFor="let milestone of milestones(); index as i" class="milestone-item">
              <div class="milestone-dot" [class.completed]="milestone.isCompleted"></div>
              <div class="milestone-line" *ngIf="i < milestones().length - 1" [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>
                  <div class="date-item" *ngIf="milestone.completedDate">
                    <label>完成日期</label>
                    <span>{{ formatDate(milestone.completedDate) }}</span>
                  </div>
                </div>
                <div class="milestone-actions" *ngIf="!milestone.isCompleted">
                  <button class="primary-btn small" (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>

        <!-- 任务标签内容 -->
        <div *ngIf="activeTab() === 'tasks'" 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">
            <!-- 修复任务列表中的状态显示，确保安全访问 -->
            <div *ngFor="let task of tasks()" 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>

        <!-- 消息标签内容 -->
        <div *ngIf="activeTab() === 'messages'" class="tab-content">
          <div class="messages-container">
            <div class="messages-list">
              <div *ngFor="let message of messages()" 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">
            <!-- 只使用单向绑定 + input事件 -->
            <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">
                <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" (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>

        <!-- 文件标签内容 -->
        <div *ngIf="activeTab() === 'files'" class="tab-content">
          <div class="files-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="files-list">
            <div *ngFor="let file of files()" class="file-item">
              <div class="file-icon" [class.type-document]="file.type === 'document'" [class.type-image]="file.type === 'image'" [class.type-spreadsheet]="file.type === 'spreadsheet'">
                <svg width="24" height="24" 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>
              </div>
              <div class="file-info">
                <h4 class="file-name">{{ file.name }}</h4>
                <div class="file-meta">
                  <span class="file-uploader">上传者：{{ file.uploadedBy }}</span>
                  <span class="file-date">{{ formatDate(file.uploadedAt) }}</span>
                  <span class="file-size">{{ file.size }}</span>
                </div>
              </div>
              <div class="file-actions">
                <button class="action-btn" (click)="previewFile(file)" title="预览">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                  </svg>
                </button>
                <button class="action-btn" (click)="downloadFile(file)" title="下载">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>