<template>
  <section class="view single">
    <article class="panel">
      <PanelHead eyebrow="Policy automation" title="规则运行状态" note="把关键政策、阈值和命中表现集中维护。" />
      <div class="list">
        <InfoRow
          v-for="policy in policies"
          :key="policy.code"
          :rank="policy.code"
          :title="policy.title"
          :note="policy.note"
          :badge="policy.badge"
          :tone="policy.tone"
        />
      </div>
    </article>
  </section>
</template>

<script setup>
import PanelHead from '../components/shared/PanelHead.vue'
import InfoRow from '../components/shared/InfoRow.vue'
import { policies } from '../data/policies.js'
</script>

<style scoped>
.view { display: grid; gap: 22px; animation: fadeUp 220ms var(--ease) both; }
.view.single { max-width: 1120px; }
.panel { padding: 20px; }
.list { display: grid; gap: 12px; }
</style>
