shanxia2.0/mobile-ui/shanxia-mp-pattern-index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>山峡化工 · UI Pattern 索引</title>
  <link rel="stylesheet" href="shanxia-mp-base.css" />
  <style>
    body { background: #eef3f0; }
    .index-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
    .index-hero { background: var(--header-gradient); color: #fff; border-radius: 20px; padding: 24px 20px; box-shadow: var(--shadow-md); margin-bottom: 20px; }
    .index-hero h1 { font-size: 22px; margin-bottom: 8px; }
    .index-hero p { font-size: 13px; opacity: 0.9; line-height: 1.6; }
    .index-grid { display: grid; gap: 12px; }
    .index-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
    .index-card:hover { box-shadow: var(--shadow-sm); }
    .index-card__icon { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 12px; }
    .index-card h2 { font-size: 16px; margin-bottom: 4px; }
    .index-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
    .index-card__tag { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--brand-green-dark); background: var(--brand-green-soft); padding: 2px 8px; border-radius: 999px; }
    .index-section-title { font-size: 13px; color: var(--text-muted); margin: 20px 0 10px; font-weight: 600; }
    .token-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-top: 20px; }
    .token-box h3 { font-size: 14px; margin-bottom: 10px; }
    .class-list { font-size: 11px; color: var(--text-muted); line-height: 1.9; font-family: ui-monospace, monospace; }
    .class-list code { color: var(--brand-green-dark); }
  </style>
</head>
<body>
  <div class="index-wrap">
    <header class="index-hero">
      <h1>UI Pattern 组件库</h1>
      <p>山峡化工小程序通用页面模式。所有样式集中在 <strong>shanxia-mp-base.css</strong>，落地 uni-app 时按 class 映射复用。</p>
    </header>

    <p class="index-section-title">页面模式（4 个核心 Pattern）</p>
    <div class="index-grid">
      <a class="index-card" href="shanxia-mp-pattern-list.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#087f57,#0a9f6d)">LIST</div>
        <div>
          <h2>P-LIST · 标准列表</h2>
          <p>Header / 筛选 Tab / 可点击卡片列表 / 空态 / 骨架屏 / 触底提示</p>
          <span class="index-card__tag">列表办理入口</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-pattern-view.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#0a9f6d,#11b37a)">VIEW</div>
        <div>
          <h2>P-VIEW · 查看详情</h2>
          <p>Hero 摘要 + 分块 KV + 时间线 + 附件 + 底栏操作 + 抽屉快捷预览</p>
          <span class="index-card__tag">只读详情</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-pattern-form.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#c9922f,#d6a343)">FORM</div>
        <div>
          <h2>P-FORM · 新增/编辑表单</h2>
          <p>分组面板 + 堆叠输入 + 行式选择器 + 附件上传 + 底栏提交</p>
          <span class="index-card__tag">数据录入</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-pattern-feedback.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#247a70,#2b8a7e)">UI</div>
        <div>
          <h2>P-FEEDBACK · 弹窗与反馈</h2>
          <p>确认弹窗 / 底部抽屉 / Action Sheet / Toast / 空态 / 骨架屏</p>
          <span class="index-card__tag">交互反馈</span>
        </div>
      </a>
    </div>

    <p class="index-section-title">推荐页面流转</p>
    <div class="token-box">
      <p style="font-size:13px;line-height:1.8;color:var(--text-primary)">
        工作台菜单 → <strong>列表页</strong> → 点击卡片 → <strong>查看详情</strong><br>
        列表 Header「新增」→ <strong>表单页</strong> → 提交 → 返回列表<br>
        详情「更多」→ Action Sheet → 删除 → 确认弹窗 → Toast
      </p>
    </div>

    <section class="token-box">
      <h3>核心 Class 速查</h3>
      <div class="class-list">
        布局：<code>.mp-navbar</code> <code>.mp-header</code> <code>.mp-footer-bar</code><br>
        列表：<code>.mp-tabs</code> <code>.mp-card--clickable</code> <code>.mp-list-end</code> <code>.mp-empty</code>（方案 B · 组件 <code>mp-empty</code>）<br>
        详情：<code>.mp-detail-hero</code> <code>.mp-block</code> <code>.mp-kv-list</code> <code>.mp-timeline</code><br>
        表单：<code>.mp-form-group</code> <code>.mp-field</code> <code>.mp-field-row</code> <code>.mp-attach-upload</code><br>
        弹窗：<code>.mp-overlay</code> <code>.mp-sheet</code> <code>.mp-dialog</code> <code>.mp-action-sheet</code> <code>.mp-toast</code><br>
        状态：<code>.mp-tag--success|warning|danger|info|muted</code>
      </div>
      <p style="margin-top:12px;font-size:12px;color:var(--text-muted)">
        <a href="shanxia-mp-index.html" style="color:var(--brand-green-dark)">← 返回小程序 Demo 总索引</a>
      </p>
    </section>
  </div>
</body>
</html>