shanxia2.0/mobile-ui/shanxia-mp-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>山峡化工小程序 · Demo 索引</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: 13px; }
    .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; }
    .arch-list { font-size: 12px; color: var(--text-muted); line-height: 1.8; padding-left: 16px; }
  </style>
</head>
<body>
  <div class="index-wrap">
    <header class="index-hero">
      <h1>山峡化工 · 小程序 UI Demo</h1>
      <p>底部 Tab：首页 / 待办 / 工作台 / 我的。登录后默认进入<strong>工作台</strong>，点击业务菜单进入列表办理页。</p>
    </header>

    <p class="index-section-title">UI Pattern 组件库（列表 / 查看 / 表单 / 弹窗）</p>
    <div class="index-grid">
      <a class="index-card" href="shanxia-mp-pattern-index.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#066b49,#0a9f6d)">Kit</div>
        <div>
          <h2>UI Pattern 索引 ★</h2>
          <p>标准列表、查看详情、表单填写、弹窗反馈 — 小程序通用框架与样式规范。</p>
          <span class="index-card__tag">开发前必读</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-empty-state-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#087f57,#11b37a)">空态</div>
        <div>
          <h2>全局空态 Empty State</h2>
          <p>已采用方案 B · 插画文件夹；组件 <code>mp-empty</code>，CRM/BX/DB/PL 列表已统一。</p>
          <span class="index-card__tag">已采用 B</span>
        </div>
      </a>
    </div>

    <p class="index-section-title">Tab 主框架（4 个）</p>
    <div class="index-grid">
      <a class="index-card" href="shanxia-mp-home-demo.html">
        <div class="index-card__icon" style="background:#94a39c">首页</div>
        <div>
          <h2>首页</h2>
          <p>占位页，本期暂不开发。</p>
          <span class="index-card__tag">Phase 2</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-todo-demo.html">
        <div class="index-card__icon" style="background:#94a39c">待办</div>
        <div>
          <h2>待办</h2>
          <p>占位页，本期暂不开发。</p>
          <span class="index-card__tag">Phase 2</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-workbench-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#087f57,#0a9f6d)">工作台</div>
        <div>
          <h2>工作台 ★</h2>
          <p>四大业务模块 + 子菜单卡片；点击菜单进入业务列表。</p>
          <span class="index-card__tag">本期核心</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-mine-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#0a9f6d,#11b37a)">我的</div>
        <div>
          <h2>我的</h2>
          <p>修改个人信息、退出登录。</p>
          <span class="index-card__tag">本期开发</span>
        </div>
      </a>
    </div>

    <p class="index-section-title">业务列表页（从工作台菜单进入）</p>
    <div class="index-grid">
      <a class="index-card" href="shanxia-mp-crm-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#0a9f6d,#11b37a)">CRM</div>
        <div><h2>线索管理列表</h2><p>示例：CRM 业务办理页</p></div>
      </a>
      <a class="index-card" href="shanxia-mp-crm-product-category-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#087f57,#0a9f6d)">分类</div>
        <div>
          <h2>产品分类（树形）</h2>
          <p>已采用方案 A · 缩进展开；页面 <code>pages/crm/product-category</code>。</p>
          <span class="index-card__tag">已采用 A</span>
        </div>
      </a>
      <a class="index-card" href="shanxia-mp-bx-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#c9922f,#d6a343)">报销</div>
        <div><h2>待办任务列表</h2><p>示例：报销审批办理页</p></div>
      </a>
      <a class="index-card" href="shanxia-mp-db-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#247a70,#2b8a7e)">地磅</div>
        <div><h2>地磅单列表</h2><p>示例：地磅业务办理页</p></div>
      </a>
      <a class="index-card" href="shanxia-mp-pl-demo.html">
        <div class="index-card__icon" style="background:linear-gradient(145deg,#066b49,#087f57)">运输</div>
        <div><h2>运输计划列表</h2><p>示例：运输业务办理页</p></div>
      </a>
    </div>

    <section class="token-box">
      <h3>信息架构</h3>
      <ul class="arch-list">
        <li>登录成功 → 默认跳转「工作台」Tab</li>
        <li>工作台：CRM / 报销 / 地磅 / 运输 四大模块，每模块下为菜单卡片网格</li>
        <li>点击菜单卡片 → 进入对应业务列表页（无底部 Tab，顶部返回工作台）</li>
        <li>灰色禁用卡片 = 本期暂不移植的功能</li>
        <li>业务开发对照 <strong>shanxia-mp-pattern-*.html</strong> 四类页面模式</li>
      </ul>
      <p style="margin-top:12px;font-size:12px;color:var(--text-muted)">共享样式：<strong>shanxia-mp-base.css</strong></p>
    </section>
  </div>
</body>
</html>