Saas-voc/src/modules/domestic-voc/framework/domestic-action-workbench.component.html

<section class="framework-page action-workbench">
  <app-page-header
    title="行动中心"
    eyebrow="Action Center"
    description="统一管理 VOC 洞察、反馈原声和经营规则形成的行动项。"
    icon="✓"
    density="compact"
    [crumbs]="[
      { label: '行动中心', link: '/action-suggestion' },
      { label: '行动工作台', link: '/action-suggestion/kanban' },
      { label: section === 'experience' ? '体验优化' : section === 'iteration' ? '产品迭代' : section === 'strategy' ? '长期策略' : '全部行动' }
    ]"
    [badges]="[{ label: 'ActionItem API', tone: 'green' }, { label: currentTypeLabel, tone: 'blue' }]"
    [meta]="[
      { label: '行动项', value: actions.length },
      { label: '待推进', value: activeCount },
      { label: '进行中', value: inProgressCount },
      { label: '逾期', value: overdueCount }
    ]">
    <div pageHeaderActions class="action-header-actions">
      <button
        type="button"
        class="action-icon-button"
        aria-label="刷新行动项"
        title="刷新"
        [disabled]="refreshing"
        (click)="loadActions(true)">
        <lucide-icon [class.spinning]="refreshing" [img]="icons.refresh" [size]="17" [strokeWidth]="1.9"></lucide-icon>
      </button>
    </div>
  </app-page-header>

  <app-page-toolbar [fields]="toolbarFields">
    <div pageToolbarActions class="action-header-actions">
      <button type="button" class="action-primary-button" (click)="openCreatePanel()">
        <lucide-icon [img]="icons.plus" [size]="17" [strokeWidth]="2"></lucide-icon>
        <span>新建行动</span>
      </button>
    </div>
  </app-page-toolbar>

  <app-board-tabs
    class="framework-tabs action-scope-tabs"
    [tabs]="tabs"
    [activeKey]="section"
    density="compact">
  </app-board-tabs>

  <div class="action-health-band" aria-label="行动推进概况">
    <div class="health-band-item">
      <span>当前视图</span>
      <strong>{{ filteredActions.length }}</strong>
      <small>共 {{ actions.length }} 项</small>
    </div>
    <div class="health-band-item">
      <span>进行中</span>
      <strong>{{ inProgressCount }}</strong>
      <small>正在推进</small>
    </div>
    <div class="health-band-item" [class.health-risk]="blockedCount > 0">
      <span>阻塞</span>
      <strong>{{ blockedCount }}</strong>
      <small>等待处理</small>
    </div>
    <div class="health-band-item" [class.health-risk]="overdueCount > 0">
      <span>已逾期</span>
      <strong>{{ overdueCount }}</strong>
      <small>未完成且超期</small>
    </div>
  </div>

  @if (loadWarning) {
    <div class="action-load-warning" role="status">
      <lucide-icon [img]="icons.alert" [size]="16" [strokeWidth]="1.8"></lucide-icon>
      <span>{{ loadWarning }}；行动项仍可继续查看和更新。</span>
    </div>
  }

  <section class="action-surface" aria-label="行动项工作台">
    <div class="action-toolbar">
      <label class="action-search">
        <lucide-icon [img]="icons.search" [size]="16" [strokeWidth]="1.8"></lucide-icon>
        <input
          type="search"
          aria-label="搜索行动项"
          placeholder="搜索标题、商品、负责人或验证指标"
          [(ngModel)]="searchTerm" />
      </label>

      <div class="action-filter-group" aria-label="行动项筛选">
        <label class="action-select">
          <span class="sr-only">状态</span>
          <select [(ngModel)]="statusFilter" aria-label="按状态筛选">
            @for (option of statusOptions; track option.value) {
              <option [ngValue]="option.value">{{ option.label }}</option>
            }
          </select>
        </label>
        <label class="action-select">
          <span class="sr-only">负责人</span>
          <select [(ngModel)]="assigneeFilter" aria-label="按负责人筛选">
            <option value="all">全部负责人</option>
            <option value="unassigned">待分配</option>
            @for (owner of ownerOptions; track owner.value) {
              <option [value]="owner.value">{{ owner.label }}</option>
            }
          </select>
        </label>
        <label class="action-select">
          <span class="sr-only">来源</span>
          <select [(ngModel)]="sourceFilter" aria-label="按来源筛选">
            @for (option of sourceOptions; track option.value) {
              <option [ngValue]="option.value">{{ option.label }}</option>
            }
          </select>
        </label>
        @if (hasActiveFilters) {
          <button type="button" class="action-text-button" (click)="resetFilters()">
            <lucide-icon [img]="icons.clear" [size]="15" [strokeWidth]="1.8"></lucide-icon>
            <span>清除</span>
          </button>
        }
      </div>

      <div class="action-view-switch" role="group" aria-label="视图模式">
        <button
          type="button"
          aria-label="表格视图"
          title="表格视图"
          [class.active]="viewMode === 'table'"
          [attr.aria-pressed]="viewMode === 'table'"
          (click)="setViewMode('table')">
          <lucide-icon [img]="icons.list" [size]="16" [strokeWidth]="1.8"></lucide-icon>
        </button>
        <button
          type="button"
          aria-label="看板视图"
          title="看板视图"
          [class.active]="viewMode === 'board'"
          [attr.aria-pressed]="viewMode === 'board'"
          (click)="setViewMode('board')">
          <lucide-icon [img]="icons.board" [size]="16" [strokeWidth]="1.8"></lucide-icon>
        </button>
      </div>
    </div>

    @if (loading) {
      <div class="action-state">
        <app-loading-spinner size="lg" text="正在加载行动项..."></app-loading-spinner>
      </div>
    } @else if (error) {
      <app-error-state
        title="行动中心暂未加载"
        [description]="error"
        (retry)="loadActions()">
      </app-error-state>
    } @else if (!filteredActions.length) {
      <app-empty-state
        [title]="hasActiveFilters ? '当前筛选没有行动项' : '当前视图暂无行动项'"
        [description]="hasActiveFilters ? '清除筛选条件后查看其他行动。' : '从已确认洞察创建行动，或直接建立执行任务。'"
        [actionText]="hasActiveFilters ? '清除筛选' : '新建行动'"
        (action)="onEmptyAction()">
      </app-empty-state>
    } @else if (viewMode === 'table') {
      <div class="action-table-wrap">
        <table class="action-table">
          <thead>
            <tr>
              <th scope="col">行动项</th>
              <th scope="col">类型 / 来源</th>
              <th scope="col">优先级</th>
              <th scope="col">状态</th>
              <th scope="col">负责人</th>
              <th scope="col">期限</th>
              <th scope="col">验证指标</th>
              <th scope="col"><span class="sr-only">查看</span></th>
            </tr>
          </thead>
          <tbody>
            @for (action of filteredActions; track action.id) {
              <tr class="is-clickable" [class.is-overdue]="isOverdue(action)" (click)="openDetail(action)">
                <td class="action-main-cell">
                  <div class="action-title-button">
                    <strong>{{ action.title }}</strong>
                    <span>{{ action.description || '暂无补充说明' }}</span>
                  </div>
                </td>
                <td>
                  <span class="action-type-label">{{ actionTypeLabel(action.actionType) }}</span>
                  <span class="action-source-label">{{ sourceLabel(action) }}</span>
                </td>
                <td><span class="priority-badge" [class]="'priority-badge priority-' + action.priority">{{ priorityLabel(action.priority) }}</span></td>
                <td><span class="status-badge" [class]="'status-badge ' + statusClass(action.status)"><i></i>{{ statusLabel(action.status) }}</span></td>
                <td><span class="owner-cell"><lucide-icon [img]="icons.user" [size]="14" [strokeWidth]="1.8"></lucide-icon>{{ ownerLabel(action.assigneeUserId) }}</span></td>
                <td>
                  <span class="due-cell" [class.due-overdue]="isOverdue(action)">{{ date(action.dueAt) }}</span>
                </td>
                <td><span class="validation-cell">{{ action.validationMetric || '待定义' }}</span></td>
                <td>
                  <span class="row-open-button" aria-hidden="true">
                    <lucide-icon [img]="icons.chevron" [size]="17" [strokeWidth]="1.8"></lucide-icon>
                  </span>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    } @else {
      <div class="action-board">
        @for (lane of lanes; track lane.id) {
          <section class="action-lane" [attr.aria-label]="lane.label">
            <header class="lane-header">
              <div>
                <strong>{{ lane.label }}</strong>
                <span>{{ lane.description }}</span>
              </div>
              <b>{{ actionsForLane(lane).length }}</b>
            </header>
            <div class="lane-list">
              @for (action of actionsForLane(lane); track action.id) {
                <button type="button" class="action-board-card" [class.is-overdue]="isOverdue(action)" (click)="openDetail(action)">
                  <span class="board-card-topline">
                    <span class="priority-badge" [class]="'priority-badge priority-' + action.priority">{{ priorityLabel(action.priority) }}</span>
                    <span>{{ sourceLabel(action) }}</span>
                  </span>
                  <strong>{{ action.title }}</strong>
                  <span class="board-card-description">{{ action.description || '暂无补充说明' }}</span>
                  <span class="board-card-meta">
                    <span><lucide-icon [img]="icons.user" [size]="13" [strokeWidth]="1.8"></lucide-icon>{{ ownerLabel(action.assigneeUserId) }}</span>
                    <span [class.due-overdue]="isOverdue(action)"><lucide-icon [img]="icons.calendar" [size]="13" [strokeWidth]="1.8"></lucide-icon>{{ date(action.dueAt) }}</span>
                  </span>
                </button>
              } @empty {
                <div class="lane-empty">暂无行动项</div>
              }
            </div>
          </section>
        }
      </div>
    }
  </section>

  @if (createPanelOpen) {
    <app-action-create-panel
      [workspaceId]="workspaceId"
      [actionType]="createActionType"
      [sourceKind]="'raw_feedback'"
      sourceLabel="行动中心手动创建"
      (created)="onActionCreated($event)"
      (cancelled)="closeCreatePanel()">
    </app-action-create-panel>
  }
</section>