zhifu-platform/docs/design/wireframes/style-preview/index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="../">
  <title>智服 · 已确认视觉风格</title>
  <link rel="stylesheet" href="wireframes.css">
  <link rel="stylesheet" href="style-preview/style.css">
  <!-- 复用已确认的页面与交互，视觉提案独立于线稿入口。 -->
  <script defer src="shared.js"></script>
  <script defer src="customer.js"></script>
  <script defer src="workspace.js"></script>
  <script defer src="management.js"></script>
  <script defer src="product-layout.js"></script>
  <script defer src="admin-login.js"></script>
  <script defer src="notifications.js"></script>
  <script defer src="app.js"></script>
</head>
<body>
  <header class="review-header">
    <div><strong>智服 · 视觉规范</strong><span>已确认 · 示例内容</span><button type="button" id="review-toggle" data-action="review-toggle">评审工具</button></div>
    <nav aria-label="评审入口" id="role-nav"></nav>
  </header>
  <details class="style-guide">
    <summary>设计说明 · 后台 / 消费者 H5</summary>
    <div class="style-guide-grid">
      <section><span class="style-label">01 / 管理系统</span><h2>海军蓝导航 · 蓝色操作 · 浅色内容</h2><p>商家与平台共用视觉规范。深色侧栏区分系统导航，白色内容区承载表格、表单、消息与客服会话。</p><div class="swatches"><span style="--swatch:#071126">导航 #071126</span><span style="--swatch:#2f6bff">品牌 #2F6BFF</span><span style="--swatch:#f8fafc">背景 #F8FAFC</span></div><p>正文 14px / 页面标题 22px / 控件圆角 8px / 内容卡片 12px</p></section>
      <section><span class="style-label">02 / 消费者 H5</span><h2>明亮商城 · 清晰卡片 · AI 服务入口</h2><p>白色与浅蓝色组成购物界面，保留首页、分类、购物车、我的。AI 使用蓝色标识，商品与订单提供场景入口。</p><div class="swatches"><span style="--swatch:#ffffff">卡片 #FFFFFF</span><span style="--swatch:#edf4ff">浅蓝 #EDF4FF</span><span style="--swatch:#245fe5">操作 #245FE5</span></div><p>正文 14px / 页面标题 18px / 卡片圆角 16px / 触控区域至少 44px</p></section>
    </div>
    <p>通过顶部切换产品，使用评审工具查看不同员工角色。后台登录使用任意非空演示账户与密码。商品图片继续保留位置标识。</p>
  </details>
  <div class="review-layout">
    <aside class="review-sidebar" hidden>
      <section id="merchant-role-controls"><h2>商家员工角色</h2><div id="merchant-role-nav"></div><p class="muted">演示不同登录员工的权限；正式产品由账户授权决定。</p></section>
      <h2>页面目录</h2><nav aria-label="页面目录" id="page-nav"></nav>
      <details open><summary>情景演示</summary><div id="scenario-nav"></div></details>
      <button type="button" data-action="reset">重置全部演示</button>
      <p class="muted">员工角色与情景切换仅用于评审。</p>
    </aside>
    <main id="main" tabindex="-1">
      <div class="page-heading"><div><p id="page-code"></p><h1 id="page-title"></h1></div><span id="screen-scope"></span></div>
      <div id="notice" role="status" aria-live="polite"></div>
      <section id="product" aria-label="产品页面"></section>
      <details class="annotation"><summary>本页交互说明</summary><div id="notes"></div></details>
    </main>
  </div>
  <dialog id="confirm-dialog" aria-labelledby="dialog-title"><form method="dialog"><h2 id="dialog-title"></h2><p id="dialog-body"></p><div class="actions"><button value="cancel">返回检查</button><button id="dialog-confirm" value="confirm" class="primary">确认操作</button></div></form></dialog>
  <noscript>请启用 JavaScript 以浏览设计提案。</noscript>
</body>
</html>