yss-project/src/app/pages/admin/system-settings/system-settings.html

<div class="system-settings">
  <!-- 引入ECharts的CDN -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    /* 全局样式 */
    :host {
      display: block;
      padding: 20px;
      background-color: #f5f7fa;
      min-height: 100vh;
    }
    
    /* 统计卡片样式 */
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 24px;
    }
    
    .stat-card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .stat-card .label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .stat-card .value {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }
    
    .stat-card .unit {
      font-size: 14px;
      color: #999;
    }
    
    /* 图表容器样式 */
    .charts-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }
    
    .chart-wrapper {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .chart-container {
      height: 300px;
      margin-top: 16px;
    }
    
    /* 响应式设计 */
    @media (max-width: 1024px) {
      .charts-container {
        grid-template-columns: 1fr;
      }
      
      .stats-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (max-width: 768px) {
      .stats-cards {
        grid-template-columns: 1fr;
      }
    }
  </style>
  <!-- 页面标题 -->
  <div class="page-header">
    <h2 class="page-title">系统设置</h2>
    <p class="page-description">配置项目状态流、SOP流程、报价规则、绩效规则等系统设置</p>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button class="tab-btn" [class.active]="activeTab === 'workflow'"
            (click)="switchTab('workflow')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
      </svg>
      项目状态流
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'sop'"
            (click)="switchTab('sop')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
      </svg>
      SOP流程模板
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'pricing'"
            (click)="switchTab('pricing')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <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>
      报价规则
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'performance'"
            (click)="switchTab('performance')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
        <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
        <line x1="6" y1="1" x2="6" y2="4"></line>
        <line x1="10" y1="1" x2="10" y2="4"></line>
        <line x1="14" y1="1" x2="14" y2="4"></line>
      </svg>
      绩效规则
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'system'"
            (click)="switchTab('system')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
        <line x1="8" y1="21" x2="16" y2="21"></line>
        <line x1="12" y1="17" x2="12" y2="21"></line>
      </svg>
      系统配置
    </button>
  </div>

  <!-- 项目状态流标签内容 -->
  <div *ngIf="activeTab === 'workflow'" class="tab-content">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索阶段名称或描述..."
               [(ngModel)]="workflowSearchTerm" (keyup.enter)="onWorkflowSearch()"
               class="search-input">
        <button mat-button *ngIf="workflowSearchTerm" class="clear-search-btn"
                (click)="workflowSearchTerm = ''; onWorkflowSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <button mat-raised-button color="primary" class="create-btn"
              (click)="openWorkflowDialog()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        添加阶段
      </button>
    </div>

    <!-- 阶段列表 -->
    <div class="workflow-stages-list">
      <div *ngFor="let stage of filteredWorkflowStages; let i = index" class="stage-item" [class.disabled]="!stage.isActive">
        <div class="stage-header">
          <div class="stage-order">{{ stage.order }}</div>
          <div class="stage-info">
            <h3 class="stage-name">{{ stage.name }}</h3>
            <p class="stage-description">{{ stage.description }}</p>
          </div>
          <div class="stage-controls">
            <mat-slide-toggle
              [checked]="stage.isActive"
              (change)="toggleActive('workflow', stage.id, $event.checked)"
              class="stage-toggle">
              {{ stage.isActive ? '启用' : '禁用' }}
            </mat-slide-toggle>
            <div class="action-buttons">
              <button mat-icon-button class="action-btn" color="primary"
                      title="编辑阶段"
                      (click)="openWorkflowDialog(stage)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button mat-icon-button class="action-btn" color="warn"
                      title="删除阶段"
                      (click)="deleteSetting('workflow', stage.id)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="stage-divider" *ngIf="i < filteredWorkflowStages.length - 1">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="22 12 13.5 12 13.5 2"></polyline>
            <polyline points="1 12 8.5 12 8.5 22"></polyline>
          </svg>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div *ngIf="filteredWorkflowStages.length === 0" class="empty-state">
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
      </svg>
      <p>没有找到符合条件的项目阶段</p>
      <button mat-button color="primary" (click)="workflowSearchTerm = ''; onWorkflowSearch()">
        清除筛选条件
      </button>
    </div>
  </div>

  <!-- SOP流程模板标签内容 -->
  <div *ngIf="activeTab === 'sop'" class="tab-content">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索模板名称、描述或分类..."
               [(ngModel)]="sopSearchTerm" (keyup.enter)="onSOPSearch()"
               class="search-input">
        <button mat-button *ngIf="sopSearchTerm" class="clear-search-btn"
                (click)="sopSearchTerm = ''; onSOPSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <button mat-raised-button color="primary" class="create-btn"
              (click)="openSOPDialog()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        添加模板
      </button>
    </div>

    <!-- SOP模板列表 -->
    <div class="sop-templates-list">
      <div *ngFor="let template of filteredSOPTemplates" class="template-item" [class.disabled]="!template.isActive">
        <div class="template-header">
          <div class="template-info">
            <div class="template-title-row">
              <h3 class="template-name">{{ template.name }}</h3>
            </div>
            <p class="template-description">{{ template.description }}</p>
          </div>
          <div class="template-controls">
            <mat-slide-toggle
              [checked]="template.isActive"
              (change)="toggleActive('sop', template.id, $event.checked)"
              class="template-toggle">
              {{ template.isActive ? '启用' : '禁用' }}
            </mat-slide-toggle>
            <div class="action-buttons">
              <button mat-icon-button class="action-btn" color="primary"
                      title="编辑模板"
                      (click)="openSOPDialog(template)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button mat-icon-button class="action-btn" color="warn"
                      title="删除模板"
                      (click)="deleteSetting('sop', template.id)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="template-steps">
          <div class="steps-header">流程步骤：</div>
          <div class="steps-list">
            <div *ngFor="let step of template.steps; let i = index" class="step-item">
              <div class="step-number">{{ i + 1 }}</div>
              <div class="step-name">{{ step }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div *ngIf="filteredSOPTemplates.length === 0" class="empty-state">
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
      </svg>
      <p>没有找到符合条件的SOP模板</p>
      <button mat-button color="primary" (click)="sopSearchTerm = ''; onSOPSearch()">
        清除筛选条件
      </button>
    </div>
  </div>

  <!-- 报价规则标签内容 -->
  <div *ngIf="activeTab === 'pricing'" class="tab-content">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索规则名称、描述或分类..."
               [(ngModel)]="pricingSearchTerm" (keyup.enter)="onPricingSearch()"
               class="search-input">
        <button mat-button *ngIf="pricingSearchTerm" class="clear-search-btn"
                (click)="pricingSearchTerm = ''; onPricingSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <button mat-raised-button color="primary" class="create-btn"
              (click)="openPricingDialog()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        添加规则
      </button>
    </div>

    <!-- 报价规则列表 -->
    <div class="pricing-rules-list">
      <div *ngFor="let rule of filteredPricingRules" class="rule-item" [class.disabled]="!rule.isActive">
        <div class="rule-header">
          <div class="rule-info">
            <div class="rule-title-row">
              <h3 class="rule-name">{{ rule.name }}</h3>
            </div>
            <p class="rule-description">{{ rule.description }}</p>
          </div>
          <div class="rule-controls">
            <mat-slide-toggle
              [checked]="rule.isActive"
              (change)="toggleActive('pricing', rule.id, $event.checked)"
              class="rule-toggle">
              {{ rule.isActive ? '启用' : '禁用' }}
            </mat-slide-toggle>
            <div class="action-buttons">
              <button mat-icon-button class="action-btn" color="primary"
                      title="编辑规则"
                      (click)="openPricingDialog(rule)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button mat-icon-button class="action-btn" color="warn"
                      title="删除规则"
                      (click)="deleteSetting('pricing', rule.id)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="rule-formula">
          <div class="formula-label">条件：</div>
          <div class="formula-content">{{ rule.condition }}</div>
          <div class="formula-label">价格：</div>
          <div class="formula-content">{{ rule.price }} 元</div>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div *ngIf="filteredPricingRules.length === 0" class="empty-state">
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <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>
      <p>没有找到符合条件的报价规则</p>
      <button mat-button color="primary" (click)="pricingSearchTerm = ''; onPricingSearch()">
        清除筛选条件
      </button>
    </div>
  </div>

  <!-- 绩效规则标签内容 -->
  <div *ngIf="activeTab === 'performance'" class="tab-content">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-input-wrapper">
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input matInput type="text" placeholder="搜索规则名称、描述或指标..."
               [(ngModel)]="performanceSearchTerm" (keyup.enter)="onPerformanceSearch()"
               class="search-input">
        <button mat-button *ngIf="performanceSearchTerm" class="clear-search-btn"
                (click)="performanceSearchTerm = ''; onPerformanceSearch()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <button mat-raised-button color="primary" class="create-btn"
              (click)="openPerformanceDialog()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        添加规则
      </button>
    </div>

    <!-- 绩效规则列表 -->
    <div class="performance-rules-list">
      <div *ngFor="let rule of filteredPerformanceRules" class="rule-item" [class.disabled]="!rule.isActive">
        <div class="rule-header">
          <div class="rule-info">
            <div class="rule-title-row">
              <h3 class="rule-name">{{ rule.name }}</h3>
              <span class="rule-metric">{{ rule.metric }}</span>
            </div>
            <p class="rule-description">{{ rule.description }}</p>
          </div>
          <div class="rule-controls">
            <mat-slide-toggle
              [checked]="rule.isActive"
              (change)="toggleActive('performance', rule.id, $event.checked)"
              class="rule-toggle">
              {{ rule.isActive ? '启用' : '禁用' }}
            </mat-slide-toggle>
            <div class="action-buttons">
              <button mat-icon-button class="action-btn" color="primary"
                      title="编辑规则"
                      (click)="openPerformanceDialog(rule)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>
              <button mat-icon-button class="action-btn" color="warn"
                      title="删除规则"
                      (click)="deleteSetting('performance', rule.id)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3,6 5,6 21,6"></polyline>
                  <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="rule-details">
          <div class="detail-row">
            <div class="detail-label">阈值：</div>
            <div class="detail-value">{{ rule.threshold }}%</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">奖励方式：</div>
            <div class="detail-value">{{ rule.reward }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div *ngIf="filteredPerformanceRules.length === 0" class="empty-state">
      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
        <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
        <line x1="6" y1="1" x2="6" y2="4"></line>
        <line x1="10" y1="1" x2="10" y2="4"></line>
        <line x1="14" y1="1" x2="14" y2="4"></line>
      </svg>
      <p>没有找到符合条件的绩效规则</p>
      <button mat-button color="primary" (click)="performanceSearchTerm = ''; onPerformanceSearch()">
        清除筛选条件
      </button>
    </div>
  </div>

  <!-- 系统配置标签内容 -->
  <div *ngIf="activeTab === 'system'" class="tab-content">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="label">总存储容量</div>
        <div class="value">{{ systemStats.totalDataSize }}</div>
        <div class="unit">GB</div>
      </div>
      <div class="stat-card">
        <div class="label">已用存储</div>
        <div class="value">{{ systemStats.usedDataSize }}</div>
        <div class="unit">GB</div>
      </div>
      <div class="stat-card">
        <div class="label">备份次数</div>
        <div class="value">{{ systemStats.backupCount }}</div>
        <div class="unit">次</div>
      </div>
      <div class="stat-card">
        <div class="label">活跃用户</div>
        <div class="value">{{ systemStats.activeUsers }}</div>
        <div class="unit">人</div>
      </div>
      <div class="stat-card">
        <div class="label">系统可用率</div>
        <div class="value">{{ systemStats.systemUptime }}</div>
      </div>
      <div class="stat-card">
        <div class="label">上次备份</div>
        <div class="value">{{ systemStats.lastBackup }}</div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-container">
      <div class="chart-wrapper">
        <div #dataUsageChart class="chart-container"></div>
      </div>
      <div class="chart-wrapper">
        <div #backupHistoryChart class="chart-container"></div>
      </div>
      <div class="chart-wrapper" style="grid-column: span 2;">
        <div #systemPerformanceChart class="chart-container"></div>
      </div>
    </div>

    <div class="system-config-section">
      <h3 class="section-title">基础配置</h3>
      
      <div class="config-items">
        <div class="config-item">
          <div class="config-info">
            <div class="config-name">启用系统审计日志</div>
            <div class="config-description">记录用户操作日志，用于安全审计和问题追踪</div>
          </div>
          <mat-slide-toggle
            [(ngModel)]="systemOptions.enableAuditLog"
            class="config-toggle">
          </mat-slide-toggle>
        </div>
        
        <div class="config-item">
          <div class="config-info">
            <div class="config-name">启用系统通知</div>
            <div class="config-description">向用户发送项目状态变更、任务提醒等通知</div>
          </div>
          <mat-slide-toggle
            [(ngModel)]="systemOptions.enableNotification"
            class="config-toggle">
          </mat-slide-toggle>
        </div>
        
        <div class="config-item">
          <div class="config-info">
            <div class="config-name">启用自动备份</div>
            <div class="config-description">定期自动备份系统数据，确保数据安全</div>
          </div>
          <mat-slide-toggle
            [(ngModel)]="systemOptions.autoBackupEnabled"
            class="config-toggle">
          </mat-slide-toggle>
        </div>
      </div>
    </div>

    <div class="system-config-section">
      <h3 class="section-title">数据管理</h3>
      
      <div class="config-items">
        <div class="config-item">
          <div class="config-info">
            <div class="config-name">备份频率</div>
            <div class="config-description">设置数据自动备份的时间间隔</div>
          </div>
          <mat-select [(ngModel)]="systemOptions.backupFrequency" class="config-select">
            <mat-option value="daily">每日</mat-option>
            <mat-option value="weekly">每周</mat-option>
            <mat-option value="monthly">每月</mat-option>
          </mat-select>
        </div>
        
        <div class="config-item">
          <div class="config-info">
            <div class="config-name">数据保留天数</div>
            <div class="config-description">设置系统日志和备份数据的保留期限</div>
          </div>
          <mat-form-field appearance="outline" class="config-input">
            <input matInput type="number" [(ngModel)]="systemOptions.dataRetentionDays" min="7" max="3650">
            <span matSuffix>天</span>
          </mat-form-field>
        </div>
        
        <div class="config-item">
          <div class="config-info">
            <div class="config-name">启用数据导出</div>
            <div class="config-description">允许用户导出系统数据为Excel等格式</div>
          </div>
          <mat-slide-toggle
            [(ngModel)]="systemOptions.enableDataExport"
            class="config-toggle">
          </mat-slide-toggle>
        </div>
      </div>
    </div>

    <div class="system-config-actions">
      <button mat-raised-button color="primary" class="save-btn"
              (click)="saveSystemOptions()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
          <polyline points="17 21 17 13 7 13 7 21"></polyline>
          <polyline points="7 3 7 8 15 8"></polyline>
        </svg>
        保存配置
      </button>
      <button mat-button class="reset-btn" (click)="loadWorkflowStages(); loadSOPTemplates(); loadPricingRules(); loadPerformanceRules()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="1 4 1 10 7 10"></polyline>
          <polyline points="23 20 23 14 17 14"></polyline>
          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
        </svg>
        重置设置
      </button>
    </div>
  </div>
</div>