<template>
  <section class="page-grid">
    <section class="panel panel-hero">
      <div class="hero-copy">
        <p class="eyebrow">模块联动</p>
        <span
          class="title-with-help"
          title="主数据统一编码，库存统一批次，生产统一工单与工序，财务统一按工单和期间核算。这样仓库、采购、生产、财务看到的是同一份业务事实。"
        >
          <h3>这套 ERP 不是“功能堆叠”，而是按订单主线把数据打通</h3>
        </span>
      </div>
      <div class="hero-stats">
        <div class="hero-stat">
          <span>数据库 DDL</span>
          <strong>53 张核心表</strong>
        </div>
        <div class="hero-stat">
          <span>技术架构</span>
          <strong>Vue + FastAPI + MySQL</strong>
        </div>
        <div class="hero-stat">
          <span>重点能力</span>
          <strong>流程化、工序化、批次化</strong>
        </div>
      </div>
    </section>

    <section class="matrix-grid">
      <article v-for="module in moduleMatrix" :key="module.name" class="panel matrix-card">
        <p class="eyebrow">{{ module.name }}</p>
        <h3>{{ module.description }}</h3>
        <div class="table-chip-list">
          <span v-for="table in module.tables" :key="table" class="table-chip">{{ table }}</span>
        </div>
      </article>
    </section>

    <section class="panel two-column-panel">
      <div>
        <div class="panel-header">
          <div>
            <p class="eyebrow">管理员操作逻辑</p>
            <h3>建议的高频使用路径</h3>
          </div>
          <span class="panel-tag">简约高效</span>
        </div>

        <ol class="ordered-flow">
          <li>维护产品、材料、BOM、工艺路线、设备、员工角色。</li>
          <li>订单录入后，系统自动展开 MRP 与工单建议。</li>
          <li>采购按建议重量与采购倍数下单，到货后按批次入库。</li>
          <li>计划员释放工单，仓库按工单批次领料，工人扫码逐工序报工。</li>
          <li>系统根据报废率、停机、节拍偏差自动标红异常。</li>
          <li>完工入库、发货、退货、返工、报废与财务成本归集自动串联。</li>
        </ol>
      </div>

      <div class="highlight-panel" title="当前环境已接入真实数据库与权限登录，可按主数据、订单、MRP、生产、财务顺序推进业务上线。">
        <p class="eyebrow">文档与交付</p>
        <h3>当前项目关键资料</h3>
        <div class="doc-card">
          <strong>数据库表结构</strong>
          <code>/backend/sql/jiaheng_erp_schema.sql</code>
        </div>
        <div class="doc-card">
          <strong>系统设计说明</strong>
          <code>/docs/system-design.md</code>
        </div>
        <div class="doc-card">
          <strong>生产使用案例</strong>
          <code>/docs/production-operation-case.md</code>
        </div>
      </div>
    </section>
  </section>
</template>

<script setup>
import { moduleMatrix } from "../data/catalog";
</script>
