alert-contract-expiring-hr/assets/html/example-report.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>{{TITLE}}</title>
  <style>
    /* 数据管理 iframe 预览布局基线 */
    html, body {
      margin: 0;
      padding: 16px;
      font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: #1f2329;
      background: #fafbfc;
      line-height: 1.6;
    }
    .report { max-width: 100%; }
    .header {
      padding: 20px;
      background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
      color: #fff;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .header h1 { margin: 0 0 8px; font-size: 22px; }
    .header .meta { color: #dbeafe; font-size: 13px; }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }
    .info-card {
      padding: 12px 16px;
      background: #fff;
      border: 1px solid #e5e6eb;
      border-radius: 8px;
    }
    .info-card .label { color: #8c959f; font-size: 12px; }
    .info-card .value { font-size: 16px; font-weight: 600; margin-top: 4px; word-break: break-word; }
    .section {
      padding: 16px 20px;
      background: #fff;
      border: 1px solid #e5e6eb;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .section h2 { margin: 0 0 12px; font-size: 16px; color: #1e3a8a; }
    .summary-text { white-space: pre-wrap; color: #4e5969; }
    .ai-suggestion {
      padding: 14px 18px;
      border-left: 4px solid #3b82f6;
      background: #eff6ff;
      border-radius: 4px;
      color: #1e40af;
    }
    .ai-suggestion.renew { border-left-color: #059669; background: #ecfdf5; color: #065f46; }
    .ai-suggestion.observe { border-left-color: #d97706; background: #fffbeb; color: #92400e; }
    .ai-suggestion.non-renew { border-left-color: #c53030; background: #fef2f2; color: #991b1b; }
    .checklist { list-style: none; padding: 0; margin: 0; }
    .checklist li {
      padding: 8px 0;
      border-bottom: 1px solid #f0f1f3;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .checklist li:last-child { border-bottom: 0; }
    .checklist .box {
      width: 16px; height: 16px;
      border: 1px solid #cbd5e1;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .footer { margin-top: 16px; color: #8c959f; font-size: 12px; text-align: right; }
  </style>
</head>
<body>
  <div class="report">
    <div class="header">
      <h1>{{TITLE}}</h1>
      <div class="meta">任务编号：{{TASK_ID}}　·　生成时间：{{GENERATED_AT}}</div>
    </div>

    <div class="info-grid">
      <div class="info-card"><div class="label">教职工姓名</div><div class="value">{{TEACHER_NAME}}</div></div>
      <div class="info-card"><div class="label">工号</div><div class="value">{{EMPLOYEE_ID}}</div></div>
      <div class="info-card"><div class="label">所在单位</div><div class="value">{{UNIT_NAME}}</div></div>
      <div class="info-card"><div class="label">聘任岗位</div><div class="value">{{POSITION}}</div></div>
      <div class="info-card"><div class="label">合同类型</div><div class="value">{{CONTRACT_TYPE}}</div></div>
      <div class="info-card"><div class="label">合同起止</div><div class="value">{{CONTRACT_START}} ~ {{CONTRACT_END}}</div></div>
      <div class="info-card"><div class="label">距到期日</div><div class="value">{{DAYS_TO_EXPIRE}} 天</div></div>
      <div class="info-card"><div class="label">预警等级</div><div class="value">{{ALERT_LEVEL}}</div></div>
    </div>

    <div class="section">
      <h2>近三年工作业绩摘要</h2>
      <div class="summary-text">{{PERFORMANCE_SUMMARY}}</div>
    </div>

    <div class="section">
      <h2>AI 续聘建议</h2>
      <div class="ai-suggestion {{SUGGESTION_CLASS}}">
        <strong>{{SUGGESTION_LABEL}}</strong><br />
        {{SUGGESTION_REASON}}
      </div>
    </div>

    <div class="section">
      <h2>所需材料清单（请于 {{DEADLINE}} 前备齐）</h2>
      <ul class="checklist">
        {{CHECKLIST_BODY}}
      </ul>
    </div>

    <div class="footer">本任务书由「合同到期智能预警与续聘辅助」技能自动生成 · 最终续聘决定权归人事处</div>
  </div>
</body>
</html>