<!-- System Settings Page -->
<div class="system-settings">

  <!-- 页面标题 -->
  <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 workflow-search">
      <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>
  
      <!-- 悬浮 + 按钮，hover 展开“添加阶段/批量操作” -->
      <button mat-fab color="primary" class="fab-add" [matMenuTriggerFor]="fabMenu" #fabTrigger="matMenuTrigger"
              (mouseenter)="fabTrigger.openMenu()">
        <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>
      <mat-menu #fabMenu="matMenu" xPosition="before">
        <button mat-menu-item (click)="openWorkflowDialog()">添加阶段</button>
        <button mat-menu-item (click)="onBulkAction()">批量操作</button>
      </mat-menu>
    </div>
  
    <!-- 批量操作工具条 -->
    <div class="bulk-toolbar" *ngIf="isBulkMode">
      <div class="bulk-left">
        <mat-checkbox (change)="($event.checked ? selectAllVisibleWorkflow() : clearSelectionWorkflow())"></mat-checkbox>
        <span>已选 {{ bulkSelectedCount }} 个核心阶段</span>
      </div>
      <div class="bulk-actions">
        <button mat-stroked-button color="primary" (click)="bulkEnableWorkflow(true)">启用</button>
        <button mat-stroked-button color="primary" (click)="bulkEnableWorkflow(false)">禁用</button>
        <button mat-stroked-button (click)="bulkCopyWorkflow()">复制</button>
        <button mat-stroked-button (click)="bulkSortWorkflow()">排序</button>
        <button mat-stroked-button (click)="bulkExportWorkflow()">导出</button>
        <button mat-stroked-button color="warn" (click)="bulkDeleteWorkflow()">删除</button>
        <button mat-button (click)="exitBulkMode()">退出选择模式</button>
      </div>
    </div>
  
    <!-- 横向时间轴（展示核心 1~4 阶段） -->
    <div class="workflow-timeline" *ngIf="coreWorkflowStages?.length">
      <div class="timeline-step" *ngFor="let stage of coreWorkflowStages; let last = last" [class.last]="last" [attr.title]="stage.order + '. ' + stage.name">
        <div class="node">
          <span class="order">{{ stage.order }}</span>
        </div>
        <div class="label">{{ getStageAbbr(stage.name) }}</div>
      </div>
    </div>
  
    <!-- 栅格卡片：每个阶段两列卡片 -->
    <div class="timeline-stage-cards" *ngIf="coreWorkflowStages?.length">
      <div class="stage-cards-row" *ngFor="let stage of coreWorkflowStages">
        <div class="stage-title">{{ stage.name }}</div>
        <div class="stage-grid">
          <!-- 信息卡片 -->
          <div class="stage-card" [class.disabled]="!stage.isActive">
            <div class="bulk-check" *ngIf="isBulkMode">
              <mat-checkbox [checked]="isSelectedWorkflow(stage.id)" (change)="toggleSelectWorkflow(stage.id, $event.checked)"></mat-checkbox>
            </div>
            <div class="card-actions">
              <button mat-icon-button class="action-btn" color="primary" title="编辑阶段" (click)="openWorkflowDialog(stage)">
                <svg width="18" height="18" 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="18" height="18" 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 class="stage-name">{{ stage.name }}</div>
            <div class="stage-desc">{{ stage.description }}</div>
            <div class="stage-ops">
              <mat-slide-toggle [checked]="stage.isActive" (change)="toggleActive('workflow', stage.id, $event.checked)" class="stage-toggle">
                {{ stage.isActive ? '启用' : '禁用' }}
              </mat-slide-toggle>
            </div>
          </div>
          <!-- 占位：操作/说明卡片，可扩展为表单或统计 -->
          <div class="stage-card muted">
            <div class="hint-title">配置建议</div>
            <ul class="hint-list">
              <li>明确阶段产出与验收节点</li>
              <li>约定跨阶段交接标准</li>
              <li>必要时在此卡片扩展清单/表单</li>
            </ul>
          </div>
        </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>
              <span class="rule-metric" *ngIf="template.category">{{ template.category }}</span>
            </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.category }}</div>
          <div class="formula-label">计算公式：</div>
          <div class="formula-content">{{ rule.formula }}</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>