tihao-ai/src/app/pages/rules-page.component.html

<section class="plain-view">
  <header class="page-hero">
    <div class="page-hero-copy">
      <p class="eyebrow">规则库</p>
      <h2>把商务和媒介经验沉淀成可复用规则</h2>
      <small>规则不会神秘生效，所有临时规则、AI 提炼规则都能看到来源和影响。</small>
      <div class="page-guide">
        <span><b>目标</b>管理提号判断依据</span>
        <span><b>操作</b>启停规则、试算影响、补临时规则</span>
        <span><b>产出</b>本次规则组合</span>
      </div>
    </div>
    <div class="page-actions">
      <button type="button" class="primary-button compact" (click)="state.addTemporaryRule()">+ 新增临时规则</button>
    </div>
  </header>

  <div class="temp-rule-box full">
    <label>
      规则标题
      <input [(ngModel)]="state.tempRuleTitle" />
    </label>
    <label>
      影响预估
      <input [(ngModel)]="state.tempRuleImpact" />
    </label>
  </div>

  <section class="rule-layer-grid">
    <article>
      <span>硬性剔除</span>
      <strong>黑名单、合作禁区、低活跃</strong>
      <small>命中后直接剔除或进入需复核池</small>
    </article>
    <article>
      <span>加权排序</span>
      <strong>风格、预算、粉丝画像</strong>
      <small>影响综合分和强推荐排序</small>
    </article>
    <article>
      <span>组合均衡</span>
      <strong>平台、价格带、头腰尾</strong>
      <small>保证整份名单不重复、不偏科</small>
    </article>
    <article>
      <span>客户偏好</span>
      <strong>反馈沉淀和临时需求</strong>
      <small>先人工确认，再决定生效范围</small>
    </article>
  </section>

  <section class="rule-ops-panel">
    <article>
      <span>当前启用</span>
      <strong>{{ state.selectedRulesCount }} 条规则</strong>
      <small>影响召回、评分、预算保护和客户版字段展示</small>
    </article>
    <article>
      <span>待复核账号</span>
      <strong>{{ state.reviewQueueCandidates.length }} 个</strong>
      <small>可用沙盘试算后批量转为备选或剔除</small>
    </article>
    <article>
      <span>选中规则</span>
      <strong>{{ state.selectedRule.category }}</strong>
      <small>{{ state.selectedRule.impact }}</small>
    </article>
  </section>

  <section class="rule-conflict-strip">
    <article *ngFor="let conflict of state.ruleConflicts">
      <em>{{ conflict.level }}</em>
      <div>
        <strong>{{ conflict.title }}</strong>
        <p>{{ conflict.detail }}</p>
      </div>
    </article>
  </section>

  <section class="rule-sandbox">
    <div class="section-mini-head">
      <div>
        <strong>规则沙盘试算</strong>
        <small>选中一条规则，模拟客户临时要求对名单的影响</small>
      </div>
      <button type="button" class="primary-button compact" (click)="state.runRuleSandbox()">运行试算</button>
    </div>

    <div class="sandbox-grid">
      <article class="sandbox-main">
        <span>当前规则</span>
        <h4>{{ state.selectedRule.title }}</h4>
        <p>{{ state.selectedRule.description }}</p>
        <label>
          客户要求样例
          <textarea [(ngModel)]="state.ruleSandboxText" aria-label="规则沙盘客户要求"></textarea>
        </label>
        <label>
          本次权重
          <input type="range" min="20" max="100" step="5" [(ngModel)]="state.ruleSandboxWeight" />
          <strong>{{ state.ruleSandboxWeight }}%</strong>
        </label>
        <em>{{ state.ruleSimulationState }}</em>
      </article>

      <article class="sandbox-tests">
        <strong>测试用例</strong>
        <label *ngFor="let item of state.ruleTestCases" [class.active]="item.enabled">
          <input type="checkbox" [checked]="item.enabled" (change)="state.toggleRuleTestCase(item)" />
          <div>
            <span>{{ item.label }}</span>
            <small>{{ item.condition }}</small>
            <p>{{ item.action }}</p>
          </div>
        </label>
      </article>
    </div>
  </section>

  <div class="rule-management">
    <article
      *ngFor="let rule of state.rules"
      [class.active]="state.selectedRule.id === rule.id"
      (click)="state.selectRule(rule)"
    >
      <span>{{ rule.id }}</span>
      <div>
        <strong>{{ rule.title }}</strong>
        <p>{{ rule.description }}</p>
        <small>{{ rule.source }} · {{ rule.impact }} · 命中 {{ rule.selected ? '12-48' : '0' }} 个账号</small>
      </div>
      <em>{{ rule.category }}</em>
      <button type="button" class="text-button" (click)="$event.stopPropagation(); state.toggleRule(rule)">
        {{ rule.selected ? '停用' : '启用' }}
      </button>
    </article>
  </div>
</section>