yss-project/src/modules/project/components/project-issues-modal/project-issues-modal.component.html

<div class="issues-modal" *ngIf="isVisible">
  <div class="overlay" (click)="onClose()"></div>
  <div class="modal">
    <div class="header">
      <div class="title-area">
        <h3>问题追踪</h3>
        <div class="counts">
          <span class="count total">总计 {{ counts.total }}</span>
          <span class="count open">未开始 {{ counts.open }}</span>
          <span class="count in-progress">处理中 {{ counts.in_progress }}</span>
          <span class="count resolved">已解决 {{ counts.resolved }}</span>
          <span class="count closed">已关闭 {{ counts.closed }}</span>
        </div>
      </div>
      <button class="close-btn" (click)="onClose()" aria-label="关闭">×</button>
    </div>

    <div class="tools">
      <input
        class="search-input"
        type="text"
        placeholder="搜索标题、标签或描述..."
        [(ngModel)]="searchText"
        (input)="onSearchChange()"
      />
      <div class="filters">
        <button class="chip" [class.active]="filterStatus.includes('open')" (click)="toggleStatusFilter('open')">未开始</button>
        <button class="chip" [class.active]="filterStatus.includes('in_progress')" (click)="toggleStatusFilter('in_progress')">处理中</button>
        <button class="chip" [class.active]="filterStatus.includes('resolved')" (click)="toggleStatusFilter('resolved')">已解决</button>
        <button class="chip" [class.active]="filterStatus.includes('closed')" (click)="toggleStatusFilter('closed')">已关闭</button>
      </div>
      <button class="primary" (click)="startCreate()" *ngIf="!creating">+ 新建问题</button>
    </div>

    <div class="create-form" *ngIf="creating">
      <div class="form-grid">
        <div class="form-item">
          <label>标题</label>
          <input type="text" [(ngModel)]="newTitle" placeholder="简短描述问题" />
        </div>
        <div class="form-item">
          <label>优先级</label>
          <select [(ngModel)]="newPriority">
            <option value="low">低</option>
            <option value="medium">中</option>
            <option value="high">高</option>
            <option value="critical">紧急</option>
          </select>
        </div>
        <div class="form-item">
          <label>类型</label>
          <select [(ngModel)]="newType">
            <option value="task">任务</option>
            <option value="bug">问题</option>
            <option value="feedback">反馈</option>
            <option value="risk">风险</option>
          </select>
        </div>
        <div class="form-item">
          <label>截止日期</label>
          <input type="date" [(ngModel)]="newDueDate" />
        </div>
        <div class="form-item full">
          <label>描述</label>
          <textarea rows="3" [(ngModel)]="newDescription" placeholder="可选：详细说明"></textarea>
        </div>
        <div class="form-item full">
          <label>标签</label>
          <input type="text" [(ngModel)]="newTagsText" placeholder="用逗号分隔，如：灯光,尺寸" />
        </div>
      </div>
      <div class="form-actions">
        <button class="secondary" (click)="cancelCreate()">取消</button>
        <button class="primary" (click)="submitCreate()" [disabled]="!newTitle.trim()">创建</button>
      </div>
    </div>

    <div class="body">
      <div class="loading" *ngIf="loading">加载中...</div>
      <div class="error" *ngIf="error">{{ error }}</div>
      <div class="empty" *ngIf="!loading && !error && issues.length === 0">暂无问题，点击右上角“新建问题”开始吧。</div>

      <div class="issue-list" *ngIf="!loading && !error && issues.length > 0">
        <div class="issue-item" *ngFor="let issue of issues">
          <div class="title-row">
            <div class="left">
              <span class="issue-title">{{ issue.title }}</span>
              <span class="badge status" [class.open]="issue.status==='open'" [class.in-progress]="issue.status==='in_progress'" [class.resolved]="issue.status==='resolved'" [class.closed]="issue.status==='closed'">
                {{ issue.status === 'open' ? '未开始' : issue.status === 'in_progress' ? '处理中' : issue.status === 'resolved' ? '已解决' : '已关闭' }}
              </span>
              <span class="badge priority" [class.low]="issue.priority==='low'" [class.medium]="issue.priority==='medium'" [class.high]="issue.priority==='high'" [class.critical]="issue.priority==='critical'">
                {{ issue.priority === 'low' ? '低' : issue.priority === 'medium' ? '中' : issue.priority === 'high' ? '高' : '紧急' }}
              </span>
            </div>
            <div class="right">
              <button class="icon" title="删除" (click)="deleteIssue(issue)">🗑</button>
            </div>
          </div>
          <div class="description" *ngIf="issue.description">{{ issue.description }}</div>
          <div class="meta">
            <span class="tag" *ngFor="let t of issue.tags">{{ t }}</span>
            <span class="due" *ngIf="issue.dueDate">截止: {{ issue.dueDate | date:'MM-dd' }}</span>
          </div>
          <div class="actions">
            <span class="action-label">状态切换:</span>
            <button class="ghost" (click)="setStatus(issue, 'open')">未开始</button>
            <button class="ghost" (click)="setStatus(issue, 'in_progress')">处理中</button>
            <button class="ghost" (click)="setStatus(issue, 'resolved')">已解决</button>
            <button class="ghost" (click)="setStatus(issue, 'closed')">关闭</button>
          </div>
          <div class="comments">
            <div class="comment-item" *ngFor="let c of issue.comments">
              <span class="time">{{ c.createdAt | date:'MM-dd HH:mm' }}</span>
              <span class="content">{{ c.content }}</span>
            </div>
            <div class="comment-input">
              <input type="text" placeholder="添加评论或催办..." #cInput>
              <button class="primary" (click)="addComment(issue, cInput.value); cInput.value=''">发送</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>