yss-project/src/app/pages/admin/dashboard/dashboard.html

<div class="admin-dashboard">
  <!-- 页面标题 -->
  <div class="page-header">
    <h2 class="page-title">总览看板</h2>
    <p class="page-description">系统运营数据总览和趋势分析</p>
  </div>

  <!-- 统计卡片区域 -->
  <div class="stats-grid">
    <!-- 总项目数 -->
    <div class="stat-card clickable" (click)="showPanel('totalProjects')">
      <div class="stat-icon primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="8" y1="6" x2="21" y2="6"></line>
          <line x1="8" y1="12" x2="21" y2="12"></line>
          <line x1="8" y1="18" x2="21" y2="18"></line>
          <line x1="3" y1="6" x2="3.01" y2="6"></line>
          <line x1="3" y1="12" x2="3.01" y2="12"></line>
          <line x1="3" y1="18" x2="3.01" y2="18"></line>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.totalProjects() }}</div>
        <div class="stat-label">总项目数</div>
      </div>
      <div class="stat-trend positive">
        <span>+12%</span>
      </div>
    </div>

    <!-- 进行中项目 -->
    <div class="stat-card clickable" (click)="showPanel('active')">
      <div class="stat-icon secondary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.activeProjects() }}</div>
        <div class="stat-label">进行中项目</div>
      </div>
      <div class="stat-trend positive">
        <span>+8%</span>
      </div>
    </div>

    <!-- 已完成项目 -->
    <div class="stat-card clickable" (click)="showPanel('completed')">
      <div class="stat-icon success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.completedProjects() }}</div>
        <div class="stat-label">已完成项目</div>
      </div>
      <div class="stat-trend positive">
        <span>+15%</span>
      </div>
    </div>

    <!-- 设计师总数 -->
    <div class="stat-card clickable" (click)="showPanel('designers')">
      <div class="stat-icon primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M16 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="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.totalDesigners() }}</div>
        <div class="stat-label">设计师总数</div>
      </div>
      <div class="stat-trend neutral">
        <span>持平</span>
      </div>
    </div>

    <!-- 客户总数 -->
    <div class="stat-card clickable" (click)="showPanel('customers')">
      <div class="stat-icon secondary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <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>
      <div class="stat-content">
        <div class="stat-value">{{ stats.totalCustomers() }}</div>
        <div class="stat-label">客户总数</div>
      </div>
      <div class="stat-trend positive">
        <span>+20%</span>
      </div>
    </div>

    <!-- 总收入 -->
    <div class="stat-card clickable" (click)="showPanel('revenue')">
      <div class="stat-icon success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="12" y1="1" x2="12" y2="23"></line>
          <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ formatCurrency(stats.totalRevenue()) }}</div>
        <div class="stat-label">总收入</div>
      </div>
      <div class="stat-trend positive">
        <span>+28%</span>
      </div>
    </div>
  </div>

  <!-- 图表区域 -->
  <div class="charts-grid">
    <!-- 项目趋势图 -->
    <div class="chart-card">
      <div class="chart-header">
        <h3>项目数量趋势</h3>
        <div class="chart-period">
          <button class="period-btn" [class.active]="projectPeriod() === '6m'" (click)="setProjectPeriod('6m')">近6个月</button>
          <button class="period-btn" [class.active]="projectPeriod() === '12m'" (click)="setProjectPeriod('12m')">近12个月</button>
        </div>
      </div>
      <div id="projectTrendChart" class="chart-container"></div>
    </div>

    <!-- 收入统计图 -->
    <div class="chart-card">
      <div class="chart-header">
        <h3>季度收入统计</h3>
        <div class="chart-period">
          <button class="period-btn" [class.active]="revenuePeriod() === 'quarter'" (click)="setRevenuePeriod('quarter')">本季度</button>
          <button class="period-btn" [class.active]="revenuePeriod() === 'year'" (click)="setRevenuePeriod('year')">全年</button>
        </div>
      </div>
      <div id="revenueChart" class="chart-container"></div>
    </div>
  </div>

  <!-- 最近活动 - 重新设计 -->
  <div class="recent-activities-enhanced">
    <div class="section-header-enhanced">
      <div class="header-left">
        <div class="header-icon">
          <svg width="24" height="24" 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>
        </div>
        <div class="header-text">
          <h3>最近活动</h3>
          <p class="header-subtitle">实时跟踪系统动态 • 共 {{ recentActivities().length }} 条</p>
        </div>
      </div>
      <button class="view-all-btn" (click)="viewAllActivities()" *ngIf="!showAllActivities()">
        <span>查看全部</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="5" y1="12" x2="19" y2="12"></line>
          <polyline points="12 5 19 12 12 19"></polyline>
        </svg>
      </button>
    </div>
    
    <!-- 加载状态 -->
    @if (loadingActivities()) {
      <div class="loading-activities">
        <div class="spinner"></div>
        <p>加载活动日志...</p>
      </div>
    }
    
    <!-- 活动列表 -->
    @if (!loadingActivities() && recentActivities().length > 0) {
      <div class="timeline-container">
        @for (activity of displayedActivities(); track activity.id; let isLast = $last) {
          <div class="timeline-item" [ngClass]="getActivityClass(activity)">
            <div class="timeline-marker">
              <div class="marker-dot"></div>
              @if (!isLast) {
                <div class="marker-line"></div>
              }
            </div>
            <div class="timeline-content">
              <div class="activity-card">
                <div class="card-header">
                  <div class="activity-type-badge" [ngClass]="getActivityClass(activity)">
                    <span [innerHTML]="activity.icon"></span>
                    <span>{{ getActionTypeLabel(activity.actionType) }}</span>
                  </div>
                  <div class="activity-time">
                    <svg width="12" height="12" 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>
                    <span>{{ activity.formattedTime }}</span>
                  </div>
                </div>
                <div class="card-body">
                  <div class="activity-description">
                    <span class="actor-name">{{ activity.actorName }}</span> {{ activity.description }}
                    <div [ngClass]="getEntityTagClass(activity.module)">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        @if (activity.module === 'project') {
                          <path d="M3 3h7v7H3z"></path>
                          <path d="M14 3h7v7h-7z"></path>
                          <path d="M14 14h7v7h-7z"></path>
                          <path d="M3 14h7v7H3z"></path>
                        }
                        @if (activity.module === 'customer') {
                          <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>
                        }
                        @if (activity.module === 'task' || activity.module === 'design' || activity.module === 'urgent_task') {
                          <polyline points="9 11 12 14 22 4"></polyline>
                          <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        }
                        @if (activity.module === 'finance') {
                          <line x1="12" y1="1" x2="12" y2="23"></line>
                          <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                        }
                      </svg>
                      <span>{{ activity.entityName }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    }
    
    <!-- 空状态 -->
    @if (!loadingActivities() && recentActivities().length === 0) {
      <div class="empty-activities">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
        <p>暂无活动记录</p>
      </div>
    }
  </div>

  <!-- 详情抽屉 -->
  <div class="drawer" *ngIf="detailOpen()" (click)="closeDetailPanel()">
    <div class="drawer-panel" (click)="$event.stopPropagation()">
      <div class="drawer-header">
        <h3 class="drawer-title">{{ detailTitle() }}</h3>
        <button class="drawer-close" (click)="closeDetailPanel()">✕</button>
      </div>
      <div class="drawer-body">
        <div id="detailChart" class="chart-container"></div>
    
        <div class="drawer-toolbar">
          <div class="filters">
            <input type="text" placeholder="关键字搜索"
                   [value]="keyword()"
                   (input)="setKeyword($any($event.target).value)" />
    
            <select [value]="statusFilter()" (change)="setStatus($any($event.target).value)">
              <option *ngFor="let opt of getStatusOptions()" [value]="opt.value">{{ opt.label }}</option>
            </select>
    
            <input type="date" [value]="dateFrom() || ''" (change)="setDateFrom($any($event.target).value)" />
            <span class="date-sep">-</span>
            <input type="date" [value]="dateTo() || ''" (change)="setDateTo($any($event.target).value)" />
    
            <button class="btn reset" (click)="resetFilters()">重置</button>
          </div>
          <div class="actions">
            <button class="btn export" (click)="exportCSV()">导出 CSV</button>
          </div>
        </div>
    
        <div class="detail-table-wrapper">
          <table class="detail-table">
            <thead>
              <tr>
                <th *ngFor="let col of getColumns()">{{ col.label }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of pagedData(); let i = index">
                <td *ngFor="let col of getColumns()">{{ col.formatter ? col.formatter(row[col.field]) : row[col.field] }}</td>
              </tr>
              <tr *ngIf="pagedData().length === 0">
                <td class="empty" [attr.colspan]="getColumns().length">暂无数据</td>
              </tr>
            </tbody>
          </table>
    
          <div class="pagination">
            <div class="info">共 {{ totalItems() }} 条 • 第 {{ pageIndex() }} / {{ totalPages }} 页</div>
            <div class="pager">
              <button (click)="prevPage()" [disabled]="pageIndex() <= 1">上一页</button>
              <ng-container *ngFor="let n of getPages()">
                <button class="num" [class.active]="pageIndex() === n" (click)="goToPage(n)">{{ n }}</button>
              </ng-container>
              <button (click)="nextPage()" [disabled]="pageIndex() >= totalPages">下一页</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>