<template>
  <div class="admin-settings-page">
    <section class="admin-page-hero">
      <div>
        <span class="admin-eyebrow">SETTINGS</span>
        <h2>个人设置</h2>
        <p>管理账号信息、后台菜单布局和接口规范提示。这里先做配置壳，后续接入 nl_admin_preference。</p>
      </div>
      <button class="primary-button admin-primary-action" type="button">保存设置</button>
    </section>

    <div class="admin-settings-grid">
      <article v-for="card in cards" :key="card.title" class="admin-setting-card">
        <i :class="card.icon"></i>
        <h3>{{ card.title }}</h3>
        <p>{{ card.desc }}</p>
        <button class="admin-button" type="button">{{ card.action }}</button>
      </article>
    </div>

    <section class="admin-board admin-board-v2">
      <div class="admin-board__head">
        <div><span class="admin-eyebrow">API RULES</span><h3>接口规则</h3></div>
      </div>
      <ul class="admin-rule-list">
        <li>HTTP 状态码统一 200，业务状态由 code 区分。</li>
        <li>响应固定为 code、message、result。</li>
        <li>JSON 字段统一 snake_case，例如 order_no、menu_layout。</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
const cards = [
  { icon: 'fas fa-table-columns', title: '菜单布局', desc: '支持单列与双列，个人偏好优先于全局配置。', action: '切换布局' },
  { icon: 'fas fa-user-shield', title: '账号安全', desc: '后续接入操作密码、登录 IP 和密码更新时间。', action: '查看安全' },
  { icon: 'fas fa-moon', title: '后台主题', desc: '跟随官网灰黑暗色体系，保证夜间值班可读。', action: '主题设置' }
]
</script>
