docs: 添加用户指南文档和演示素材

- 新增用户指南流程文档（登录、实名认证、申摊、预约详情）
- 新增 README 概述文档
- 新增演示 HTML 文件（v1 和 v2 版本）
- 新增截图和视频素材

user-guide/01-登录流程.md

@@ -0,0 +1,63 @@
+# 登录流程
+
+首次打开阿尼坊小程序时，系统会引导您完成微信登录。
+
+## 步骤说明
+
+### 1. 打开小程序
+
+通过微信搜索"阿尼坊"或扫描二维码进入小程序。
+
+### 2. 触发登录
+
+当需要登录的功能（如申摊、预约）时，系统弹出登录提示。
+
+![未登录时点击申摊弹出的登录提示弹窗](screenshots/2_前往登录弹窗.jpg)
+
+点击「去登录」按钮进入登录流程。
+
+### 3. 填写个人信息
+
+登录表单包含以下内容：
+- **头像选择** - 点击头像区域选择或上传头像
+- **昵称填写** - 输入您的昵称（用于展示）
+- **用户协议** - 勾选同意用户协议
+
+![登录表单界面，填写头像、昵称，勾选用户协议](screenshots/3_填写昵称_头像信息.png)
+
+填写完成后点击「登录」按钮。
+
+### 4. 手机号授权
+
+系统申请获取您的微信绑定手机号：
+
+![手机号授权弹窗，申请获取微信绑定号码](screenshots/4_登录后授权手机号弹窗.png)
+
+点击「允许」按钮完成授权，手机号将用于：
+- 接收验证码
+- 订单通知
+- 客服联系
+
+### 5. 完成登录
+
+登录成功后：
+- 您的头像和昵称显示在「我的」页面
+- 系统自动生成唯一 UID（用户编号）
+
+## 重要提示
+
+⚠️ **游客用户限制**
+未登录的游客用户仅可浏览：
+- 活动公告
+- 商铺卡片详情
+- 摊位卡片详情
+
+需要登录后才能使用：
+- 设施预约
+- 摊位申请
+- 评论点赞
+- 收藏功能
+
+## 下一步
+
+完成登录后，请继续[实名认证](02-实名认证.md)以解锁完整功能。

user-guide/02-实名认证.md

@@ -0,0 +1,53 @@
+# 实名认证
+
+实名认证是使用设施预约和摊位申请功能的前置条件。
+
+## 认证入口
+
+进入「我的」页面，点击「前往实名认证」按钮。
+
+![登录后「我的」页面，实名认证入口按钮（同时可见预约详情入口）](screenshots/5_我的界面_前往实名认证.png)
+
+> 💡 从截图可见，「我的」页面还包含「预约详情」入口，方便查看申请状态。
+
+## 认证信息填写
+
+### 必填内容
+
+| 字段 | 说明 | 要求 |
+|------|------|------|
+| 真实姓名 | 与身份证一致 | 2-20个汉字 |
+| 身份证号码 | 18位身份证号 | 正确格式验证 |
+
+### 填写表单
+
+![实名认证表单，填写姓名和身份证号码](screenshots/6_填写实名认证信息.png)
+
+输入您的真实姓名和身份证号码，确保信息准确无误。
+
+### 提交认证
+
+填写完成后点击「提交」按钮，系统进行身份验证：
+- 验证身份证号与姓名是否匹配
+- 验证成功后显示「已实名」标签
+
+## 重要提示
+
+⚠️ **认证后不可修改**
+实名认证完成后，姓名和身份证号不可更改。如需修改请联系客服。
+
+⚠️ **信息准确性**
+请确保填写的信息与身份证一致，错误信息可能导致认证失败。
+
+## 解锁功能
+
+实名认证后可使用：
+- ✅ 设施预约（舞蹈室、练习室等）
+- ✅ 摊位申请（动漫市集参展）
+- ✅ 商铺卡片发布（商铺会员专属）
+
+## 下一步
+
+完成实名认证后，您可以：
+- [申请摊位](03-申摊流程.md) - 参加动漫市集
+- [预约设施](04-预约详情.md) - 使用场地设施

user-guide/03-申摊流程.md

@@ -0,0 +1,89 @@
+# 申摊流程
+
+本指南帮助您完成摊位申请，参加阿尼坊动漫市集。
+
+## 前置条件
+
+申请摊位前请确保：
+- ✅ 已完成微信登录
+- ✅ 已完成实名认证
+
+> 💡 未登录用户点击「申摊」时，会弹出登录提示（见登录流程文档）
+
+## 申请入口
+
+进入「市集」页面，点击右上角「申摊」按钮。
+
+![市集页面整体界面，右上角申摊按钮位置](screenshots/1_市集界面_右上角申摊.png)
+
+> 💡 从截图可见，市集页面底部导航高亮「市集」，页面展示摊位卡片瀑布流。
+
+## 未登录提示
+
+如果您未登录，点击「申摊」后会弹出登录提示：
+
+![未登录时点击申摊弹出的登录提示弹窗](screenshots/2_前往登录弹窗.jpg)
+
+点击「去登录」按钮，完成登录后再继续申摊。
+
+## 填写申请信息
+
+### 必填内容
+
+| 字段 | 限制 | 说明 |
+|------|------|------|
+| 标题 | 50字以内 | 卡片标题 |
+| 正文 | 500字以内 | 内容描述，可用 #标签 |
+| 图片 | 1张，≤5MB | 卡片封面图 |
+| 联系QQ | 可修改 | 客服联系渠道 |
+| 预约场次 | 下拉选择 | 日期+区域 |
+| 动漫IP标签 | 1-10个 | 必选至少1个 |
+
+### 1. 填写标题和正文
+
+输入吸引人的标题和详细的内容描述（正文最多500字，可用 #标签）。
+
+### 2. 上传图片
+
+点击上传按钮，选择一张清晰图片作为卡片封面（≤5MB）。
+
+### 3. 选择场次
+
+从下拉菜单选择参展场次（显示日期、星期、场地区域），同一天仅能申请一个区域。
+
+### 4. 添加动漫IP标签
+
+点击标签输入框搜索并选择标签（如：名侦探柯南、EVA、龙珠），至少选择1个，最多10个。
+
+### 5. 查看须知弹窗
+
+提交前需阅读申摊须知，勾选「已阅读」选项后点击「确认提交」。
+
+## 申请结果
+
+提交成功后显示注意事项弹窗，可通过「预约详情」查看进度。
+
+## 申请状态流转
+
+| 状态 | 说明 |
+|------|------|
+| 待抽签 | 申请已提交，等待抽签 |
+| 审核中 | 抽签中签，等待审核 |
+| 待缴费 | 审核通过，等待支付 |
+| 未中签 | 抽签未中 |
+| 审核驳回 | 审核未通过（显示原因） |
+| 成功 | 已公布摊位号 |
+
+## 重要提示
+
+⚠️ **场次限制**
+- 每天仅能申请一个场次
+- 申请前请确认场次信息
+
+⚠️ **存稿机制**
+- 系统自动保存上次填写内容
+- 30天后自动清理存稿
+
+## 下一步
+
+提交申请后，请前往[预约详情](04-预约详情.md)查看申请状态。

user-guide/04-预约详情.md

@@ -0,0 +1,68 @@
+# 预约详情
+
+本页面展示您的摊位申请和设施预约记录。
+
+## 入口位置
+
+进入「我的」页面，点击「预约详情」入口。
+
+![登录后「我的」页面，实名认证入口按钮（同时可见预约详情入口）](screenshots/5_我的界面_前往实名认证.png)
+
+> 💡 从截图可见，「预约详情」入口位于「我的」页面中。
+
+## 页面结构
+
+页面分为两个栏目：
+- **摊位栏目** - 摊位申请记录
+- **设施栏目** - 设施预约记录
+
+## 摊位申请状态
+
+### 状态说明
+
+| 状态 | 显示内容 | 操作 |
+|------|----------|------|
+| 待抽签 | 场次信息、备注 | 无 |
+| 待缴费 | 场次信息、订单号、金额、截止时间 | 「支付」「取消」按钮 |
+| 未中签 | 场次信息 | 无 |
+| 审核驳回 | 场次信息、驳回原因 | 无 |
+| 待公布 | 场次信息、订单号、备注、退款提示 | 「申请退款」按钮 |
+| 成功 | 场次信息、摊位号、订单号、备注 | 无 |
+| 已失效 | 场次信息、订单号、备注 | 无 |
+
+### 摊位号格式
+
+公布后的摊位号格式：`月.日 + 区域 + 编号`
+
+示例：`2.1 A区13`
+
+## 设施预约状态
+
+| 状态 | 显示内容 | 操作 |
+|------|----------|------|
+| 待缴费 | 设施名称、时间段、时长、金额、截止时间 | 「支付」「取消」按钮 |
+| 成功 | 设施名称、时间段、订单号、退款提示 | 「申请退款」按钮 |
+| 已失效 | 设施名称、时间段、订单号 | 无 |
+| 已退款 | 设施名称、时间段、订单号 | 无 |
+
+## 支付操作
+
+### 待缴费状态
+
+点击「支付」按钮进入微信支付流程，请在截止时间前完成支付，超时将自动取消订单。
+
+### 退款申请
+
+符合退款条件时点击「申请退款」按钮，系统处理退款请求，退款成功后状态变更为「已退款」。
+
+## 重要提示
+
+⚠️ **支付时限**
+请在截止时间前完成支付，超时订单自动取消。
+
+⚠️ **退款截止时间**
+各场次有退款截止时间，请留意提示。
+
+## 下一步
+
+如有问题，请通过「我的」-「意见反馈」联系客服。

user-guide/README.md

@@ -0,0 +1,53 @@
+# 阿尼坊小程序用户指南
+
+欢迎使用阿尼坊小程序！本指南将帮助您快速上手。
+
+## 目录
+
+1. [登录流程](01-登录流程.md) - 微信授权登录
+2. [实名认证](02-实名认证.md) - 完成身份验证
+3. [申摊流程](03-申摊流程.md) - 申请摊位参展
+4. [预约详情](04-预约详情.md) - 查看申请状态
+
+## 截图素材
+
+### 现有截图清单
+
+| 文件名 | 截图内容说明 | 对应文档 |
+|--------|--------------|----------|
+| `1_市集界面_右上角申摊.png` | 市集页面整体界面，右上角申摊按钮位置 | 03-申摊流程.md |
+| `2_前往登录弹窗.jpg` | 未登录时点击申摊弹出的登录提示弹窗 | 01-登录流程.md、03-申摊流程.md |
+| `3_填写昵称_头像信息.png` | 登录表单界面，填写头像、昵称，勾选用户协议 | 01-登录流程.md |
+| `4_登录后授权手机号弹窗.png` | 手机号授权弹窗，申请获取微信绑定号码 | 01-登录流程.md |
+| `5_我的界面_前往实名认证.png` | 登录后「我的」页面，实名认证入口按钮（同时可见预约详情入口） | 02-实名认证.md、04-预约详情.md |
+| `6_填写实名认证信息.png` | 实名认证表单，填写姓名和身份证号码 | 02-实名认证.md |
+
+### 截图命名规范
+
+- 使用数字序号前缀（按流程顺序）
+- 使用中文描述截图内容
+- 使用下划线分隔各部分
+- 文件格式：PNG 或 JPG
+- 建议尺寸：宽度750px（适配移动端）
+
+**命名格式：** `{序号}_{页面名称}_{关键元素}.png`
+
+**示例：**
+- `1_市集界面_右上角申摊.png` - 第1步，市集页面，申摊按钮
+- `2_前往登录弹窗.jpg` - 第2步，登录提示弹窗
+- `3_填写昵称_头像信息.png` - 第3步，登录表单内容
+
+### 截图存放位置
+
+截图文件存放于 `screenshots/` 目录，在文档中引用示例：
+
+```markdown
+![市集界面申摊入口](screenshots/1_市集界面_右上角申摊.png)
+```
+
+## 演示页面
+
+可打开 [演示htlm_v1.html](演示htlm_v1.html) 在浏览器中查看完整指南。
+
+---
+阿尼坊团队

user-guide/演示h5_v1.html

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>阿尼坊小程序 - 用户指南</title>
+    <style>
+        :root {
+            --primary-color: #6366f1; /* 阿尼坊主题色（紫色系示例） */
+            --primary-hover: #4f46e5;
+            --text-main: #1f2937;
+            --text-muted: #6b7280;
+            --bg-color: #f3f4f6;
+            --bg-content: #ffffff;
+            --border-color: #e5e7eb;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            color: var(--text-main);
+            background-color: var(--bg-color);
+            display: flex;
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+
+        /* 侧边栏样式 */
+        .sidebar {
+            width: 280px;
+            background-color: var(--bg-content);
+            border-right: 1px solid var(--border-color);
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+            padding: 2rem 0;
+        }
+
+        .sidebar-header {
+            padding: 0 2rem 1rem;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 1rem;
+        }
+
+        .sidebar-header h2 {
+            font-size: 1.25rem;
+            color: var(--primary-color);
+        }
+
+        .nav-links {
+            list-style: none;
+        }
+
+        .nav-links li a {
+            display: block;
+            padding: 0.75rem 2rem;
+            text-decoration: none;
+            color: var(--text-main);
+            transition: all 0.2s;
+        }
+
+        .nav-links li a:hover, .nav-links li a.active {
+            background-color: #eef2ff;
+            color: var(--primary-color);
+            border-right: 3px solid var(--primary-color);
+        }
+
+        /* 主内容区样式 */
+        .main-content {
+            flex: 1;
+            margin-left: 280px;
+            padding: 2rem 4rem;
+            max-width: 1000px;
+        }
+
+        .section {
+            background-color: var(--bg-content);
+            padding: 2.5rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+            scroll-margin-top: 2rem;
+        }
+
+        /* 排版样式 */
+        h1 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--text-main); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; }
+        h2 { font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--text-main); }
+        h3 { font-size: 1.2rem; margin: 1.5rem 0 0.8rem; color: var(--text-main); }
+        p { margin-bottom: 1rem; color: var(--text-muted); }
+        ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--text-muted); }
+        li { margin-bottom: 0.5rem; }
+        
+        /* 截图占位符样式 */
+        .img-placeholder {
+            background-color: #f8fafc;
+            border: 2px dashed #cbd5e1;
+            border-radius: 8px;
+            padding: 2rem;
+            text-align: center;
+            color: #64748b;
+            margin: 1.5rem 0;
+            font-weight: 500;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .img-placeholder i { font-size: 2rem; margin-bottom: 0.5rem; }
+
+        /* 实际截图样式 */
+        .actual-img {
+            width: 100%;
+            max-width: 375px;
+            border-radius: 8px;
+            margin: 1.5rem 0;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        /* 表格样式 */
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1.5rem 0;
+            background-color: white;
+        }
+        th, td {
+            border: 1px solid var(--border-color);
+            padding: 0.75rem 1rem;
+            text-align: left;
+        }
+        th { background-color: #f8fafc; font-weight: 600; color: var(--text-main); }
+
+        /* 提示框样式 */
+        .alert {
+            padding: 1rem 1.5rem;
+            border-radius: 8px;
+            margin: 1.5rem 0;
+            display: flex;
+            flex-direction: column;
+        }
+        .alert.warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
+        .alert.info { background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
+        .alert strong { margin-bottom: 0.5rem; display: block; }
+
+        /* 代码块样式 */
+        pre { background-color: #1e293b; color: #e2e8f0; padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
+        code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; }
+        p code, li code { background-color: #f1f5f9; color: #ef4444; padding: 0.2rem 0.4rem; border-radius: 4px; }
+
+        /* 响应式 */
+        @media (max-width: 768px) {
+            .sidebar { transform: translateX(-100%); }
+            .main-content { margin-left: 0; padding: 1rem; }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- 侧边栏导航 -->
+    <nav class="sidebar">
+        <div class="sidebar-header">
+            <h2>🦊 阿尼坊指南</h2>
+        </div>
+        <ul class="nav-links">
+            <li><a href="#readme">首页：用户指南</a></li>
+            <li><a href="#login">01 - 登录流程</a></li>
+            <li><a href="#auth">02 - 实名认证</a></li>
+            <li><a href="#booth">03 - 申摊流程</a></li>
+            <li><a href="#reservation">04 - 预约详情</a></li>
+        </ul>
+    </nav>
+
+    <!-- 主内容区 -->
+    <main class="main-content">
+        
+        <!-- README -->
+        <section id="readme" class="section">
+            <h1>阿尼坊小程序用户指南</h1>
+            <p>欢迎使用阿尼坊小程序！本指南将帮助您快速上手。</p>
+            <h2>目录</h2>
+            <ol>
+                <li><a href="#login" style="color:var(--primary-color)">登录流程</a> - 微信授权登录</li>
+                <li><a href="#auth" style="color:var(--primary-color)">实名认证</a> - 完成身份验证</li>
+                <li><a href="#booth" style="color:var(--primary-color)">申摊流程</a> - 申请摊位参展</li>
+                <li><a href="#reservation" style="color:var(--primary-color)">预约详情</a> - 查看申请状态</li>
+            </ol>
+            <h2>快速开始</h2>
+            <p>如果您是新用户，建议按顺序阅读以上文档。如有问题，请通过「我的」-「意见反馈」联系客服。</p>
+        </section>
+
+        <!-- 01 登录流程 -->
+        <section id="login" class="section">
+            <h1>登录流程</h1>
+            <p>首次打开阿尼坊小程序时，系统会引导您完成微信登录。</p>
+
+            <h2>步骤说明</h2>
+            <h3>1. 打开小程序</h3>
+            <p>通过微信搜索"阿尼坊"或扫描二维码进入小程序。</p>
+
+            <h3>2. 触发登录</h3>
+            <p>当使用需要登录的功能时，系统弹出登录提示。</p>
+            <img src="screenshots/2_前往登录弹窗.jpg" alt="登录提示弹窗" class="actual-img">
+
+            <h3>3. 填写个人信息</h3>
+            <p>登录表单包含头像选择、昵称填写和用户协议勾选。</p>
+            <img src="screenshots/3_填写昵称_头像信息.png" alt="登录表单" class="actual-img">
+
+            <h3>4. 手机号授权</h3>
+            <p>系统申请获取微信绑定手机号，用于验证码接收和客服联系。</p>
+            <img src="screenshots/4_登录后授权手机号弹窗.png" alt="手机号授权" class="actual-img">
+
+            <h3>5. 完成登录</h3>
+            <p>登录成功后，头像和昵称显示在「我的」页面。</p>
+
+            <div class="alert warning">
+                <strong>⚠️ 游客用户限制</strong>
+                <p>未登录的游客用户仅可浏览：活动公告、商铺卡片详情、摊位卡片详情。</p>
+                <p>需要登录后才能使用：设施预约、摊位申请、评论点赞、收藏功能。</p>
+            </div>
+        </section>
+
+        <!-- 02 实名认证 -->
+        <section id="auth" class="section">
+            <h1>实名认证</h1>
+            <p>实名认证是使用设施预约和摊位申请功能的前置条件。</p>
+
+            <h2>认证入口</h2>
+            <p>进入「我的」页面，点击「前往实名认证」按钮。</p>
+            <img src="screenshots/5_我的界面_前往实名认证.png" alt="实名认证入口" class="actual-img">
+
+            <h2>认证信息填写</h2>
+            <h3>必填内容</h3>
+            <table>
+                <thead>
+                    <tr><th>字段</th><th>说明</th><th>示例</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>真实姓名</td><td>与身份证一致</td><td>张三</td></tr>
+                    <tr><td>身份证号码</td><td>18位身份证号</td><td>123456789012345678</td></tr>
+                </tbody>
+            </table>
+
+            <h3>1. 填写姓名和身份证号</h3>
+            <img src="screenshots/6_填写实名认证信息.png" alt="实名认证表单" class="actual-img">
+
+            <h3>2. 提交认证</h3>
+            <p>填写完成后点击「提交」按钮，系统进行身份验证并显示「已实名」标签。</p>
+
+            <div class="alert warning">
+                <strong>⚠️ 认证后不可修改</strong>
+                <p>实名认证完成后，姓名和身份证号不可更改。如需修改请联系客服。</p>
+            </div>
+
+            <h2>解锁功能</h2>
+            <p>实名认证后可使用：✅ 设施预约 ✅ 摊位申请 ✅ 商铺卡片发布</p>
+        </section>
+
+        <!-- 03 申摊流程 -->
+        <section id="booth" class="section">
+            <h1>申摊流程</h1>
+            <p>本指南帮助您完成摊位申请，参加阿尼坊动漫市集。</p>
+
+            <div class="alert info">
+                <strong>💡 前置条件</strong>
+                <p>申请摊位前请确保：✅ 已完成微信登录 ✅ 已完成实名认证</p>
+            </div>
+
+            <h2>申请入口</h2>
+            <p>进入「市集」页面，点击右上角「申摊」按钮。</p>
+            <img src="screenshots/1_市集界面_右上角申摊.png" alt="申摊入口" class="actual-img">
+
+            <h2>未登录提示</h2>
+            <p>未登录用户点击「申摊」会弹出登录提示：</p>
+            <img src="screenshots/2_前往登录弹窗.jpg" alt="登录提示" class="actual-img">
+
+            <h2>填写申请信息</h2>
+            <table>
+                <thead>
+                    <tr><th>字段</th><th>限制</th><th>说明</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>标题</td><td>50字以内</td><td>卡片标题</td></tr>
+                    <tr><td>正文</td><td>500字以内</td><td>内容描述，可用 #标签</td></tr>
+                    <tr><td>图片</td><td>1张，≤5MB</td><td>卡片封面图</td></tr>
+                    <tr><td>预约场次</td><td>下拉选择</td><td>日期+区域</td></tr>
+                    <tr><td>动漫IP标签</td><td>1-10个</td><td>必选至少1个</td></tr>
+                </tbody>
+            </table>
+
+            <div class="alert info">
+                <strong>💡 表单填写提示</strong>
+                <p>申摊表单包含：标题（50字以内）、正文（500字以内）、封面图（≤5MB）、预约场次选择、动漫IP标签（1-10个）。系统自动保存上次填写内容（存稿机制），30天后自动清理。</p>
+            </div>
+
+            <h2>申请状态流转</h2>
+            <table>
+                <thead>
+                    <tr><th>状态</th><th>说明</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>待抽签</td><td>申请已提交，等待抽签</td></tr>
+                    <tr><td>审核中</td><td>抽签中签，等待审核</td></tr>
+                    <tr><td>待缴费</td><td>审核通过，等待支付</td></tr>
+                    <tr><td>未中签 / 审核驳回</td><td>抽签未中 / 审核未通过</td></tr>
+                    <tr><td>成功</td><td>已公布摊位号</td></tr>
+                </tbody>
+            </table>
+
+            <div class="alert warning">
+                <strong>⚠️ 注意事项</strong>
+                <p>1. 场次限制：每天仅能申请一个场次。<br>2. 存稿机制：系统自动保存上次填写内容，30天后自动清理。</p>
+            </div>
+        </section>
+
+        <!-- 04 预约详情 -->
+        <section id="reservation" class="section">
+            <h1>预约详情</h1>
+            <p>本页面展示您的摊位申请和设施预约记录。</p>
+
+            <h2>入口位置</h2>
+            <p>进入「我的」页面，点击「预约详情」入口。</p>
+            <img src="screenshots/5_我的界面_前往实名认证.png" alt="预约详情入口" class="actual-img">
+
+            <h2>摊位申请状态操作</h2>
+            <table>
+                <thead>
+                    <tr><th>状态</th><th>显示内容</th><th>操作按钮</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>待缴费</td><td>场次、订单号、金额、截止时间</td><td>「支付」「取消」</td></tr>
+                    <tr><td>待公布</td><td>场次、订单号、退款提示</td><td>「申请退款」</td></tr>
+                    <tr><td>成功</td><td>摊位号 (如: <code>2.1 A区13</code>)、订单号</td><td>无</td></tr>
+                </tbody>
+            </table>
+            <div class="alert info">
+                <strong>💡 成功状态</strong>
+                <p>摊位申请成功后，系统公布摊位号，格式如：<code>2.1 A区13</code>，可在预约详情页面查看。</p>
+            </div>
+
+            <h2>支付与退款操作</h2>
+            <p>点击「支付」进入微信支付，需在截止时间前完成，超时自动取消订单。符合条件可点击「申请退款」。</p>
+        </section>
+
+    </main>
+
+    <!-- 简单的滚动监听脚本，用于侧边栏高亮 -->
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const sections = document.querySelectorAll('.section');
+            const navLinks = document.querySelectorAll('.nav-links a');
+
+            window.addEventListener('scroll', () => {
+                let current = '';
+                sections.forEach(section => {
+                    const sectionTop = section.offsetTop;
+                    const sectionHeight = section.clientHeight;
+                    if (scrollY >= (sectionTop - 100)) {
+                        current = section.getAttribute('id');
+                    }
+                });
+
+                navLinks.forEach(link => {
+                    link.classList.remove('active');
+                    if (link.getAttribute('href').includes(current)) {
+                        link.classList.add('active');
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>

user-guide/演示h5_v2_ iPhone16竖屏比例.html

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>阿尼坊小程序 - 用户指南 (截图排版版)</title>
+    <style>
+        :root {
+            --primary-color: #6366f1; 
+            --text-main: #1f2937;
+            --text-muted: #4b5563;
+            --bg-color: #1e293b; /* 暗色背景凸显截图卡片 */
+            --bg-content: #ffffff;
+            --border-color: #e5e7eb;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+            color: var(--text-main);
+            background-color: var(--bg-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 60px 0;
+            line-height: 1.5;
+        }
+
+        /* 顶部提示工具栏 */
+        .toolbar {
+            position: fixed;
+            top: 0; left: 0; right: 0;
+            background: #0f172a;
+            color: #fff;
+            text-align: center;
+            padding: 12px;
+            font-size: 14px;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
+        }
+
+        /* 核心：iPhone16 竖屏卡片 9:19.5 (393x852) */
+        .iphone-card {
+            width: 393px;
+            height: 852px;
+            background-color: var(--bg-content);
+            margin-bottom: 40px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
+            /* 直角边缘方便直接矩形截图 */
+            border: 1px solid #d1d5db;
+        }
+
+        .card-header {
+            background-color: var(--primary-color);
+            color: #ffffff;
+            height: 54px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 20px;
+            font-weight: 600;
+            font-size: 16px;
+            flex-shrink: 0;
+        }
+
+        .card-body {
+            padding: 24px 20px;
+            flex: 1;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .card-footer {
+            height: 40px;
+            text-align: center;
+            color: #94a3b8;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-top: 1px dashed var(--border-color);
+            flex-shrink: 0;
+        }
+
+        /* 内部排版样式 */
+        h1 { font-size: 22px; margin-bottom: 16px; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }
+        h2 { font-size: 18px; margin: 16px 0 8px; color: var(--text-main); }
+        h3 { font-size: 15px; margin: 12px 0 6px; color: var(--text-main); font-weight: 600; }
+        p { margin-bottom: 10px; font-size: 14px; color: var(--text-muted); }
+        ul, ol { margin-bottom: 12px; padding-left: 20px; font-size: 14px; color: var(--text-muted); }
+        li { margin-bottom: 6px; }
+
+        /* 封面特殊排版 */
+        .cover-body { justify-content: center; align-items: center; text-align: center; }
+        .cover-icon { font-size: 64px; margin-bottom: 20px; }
+        .cover-title { font-size: 28px; color: var(--primary-color); margin-bottom: 10px; border: none;}
+        .cover-subtitle { font-size: 16px; color: var(--text-muted); margin-bottom: 40px; }
+        .cover-list { text-align: left; background: #f8fafc; padding: 20px 30px; border-radius: 12px; width: 100%; border: 1px solid var(--border-color); }
+        .cover-list ol { margin-bottom: 0; }
+        .cover-list li { margin-bottom: 12px; font-weight: 500;}
+
+        /* 截图图片控制 */
+        .img-wrapper { text-align: center; margin: 10px 0; flex-shrink: 0; }
+        .actual-img {
+            max-width: 100%;
+            border-radius: 6px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            object-fit: contain;
+            border: 1px solid #e2e8f0;
+        }
+
+        /* 表格样式适配移动端 */
+        table { width: 100%; border-collapse: collapse; margin: 12px 0; background-color: white; font-size: 12px; }
+        th, td { border: 1px solid var(--border-color); padding: 8px; text-align: left; }
+        th { background-color: #f8fafc; font-weight: 600; color: var(--text-main); }
+
+        /* 提示框样式 */
+        .alert { padding: 12px 14px; border-radius: 8px; margin: 12px 0; display: flex; flex-direction: column; font-size: 13px; }
+        .alert.warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
+        .alert.info { background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
+        .alert strong { margin-bottom: 4px; font-size: 14px; }
+        .alert p { margin-bottom: 4px; font-size: 13px; color: inherit; }
+        .alert p:last-child { margin-bottom: 0; }
+
+        /* 代码块样式 */
+        pre { 
+            background-color: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 8px; 
+            margin: 10px 0; font-size: 12px; white-space: pre-wrap; word-wrap: break-word;
+        }
+        code { font-family: ui-monospace, monospace; }
+        p code, li code { background-color: #f1f5f9; color: #ef4444; padding: 2px 4px; border-radius: 4px; }
+    </style>
+</head>
+<body>
+    <div class="toolbar">
+        💡 页面布局已调整为 iPhone 16 竖屏比例 (393x852) - 共 7 页，请直接框选白色卡片范围进行截图。
+    </div>
+
+    <!-- Page 1: 封面 -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>01 / 07</span></div>
+        <div class="card-body cover-body">
+            <div class="cover-icon">🦊</div>
+            <h1 class="cover-title">阿尼坊小程序</h1>
+            <div class="cover-subtitle">用户操作指南</div>
+            
+            <div class="cover-list">
+                <ol>
+                    <li><strong style="color:var(--primary-color)">登录流程</strong> - 微信授权登录</li>
+                    <li><strong style="color:var(--primary-color)">实名认证</strong> - 完成身份验证</li>
+                    <li><strong style="color:var(--primary-color)">申摊流程</strong> - 申请摊位参展</li>
+                    <li><strong style="color:var(--primary-color)">预约详情</strong> - 查看申请状态</li>
+                </ol>
+            </div>
+            <p style="margin-top: 30px; font-size: 13px;">欢迎使用阿尼坊！本指南将帮助您快速上手，顺利参与动漫市集。如有问题请通过「我的」-「意见反馈」联系客服。</p>
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+    <!-- Page 2: 登录流程 (上) -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>02 / 07</span></div>
+        <div class="card-body">
+            <h1>01 登录流程</h1>
+            <p>首次打开阿尼坊小程序时，系统会引导您完成微信登录。</p>
+
+            <h3>1. 打开小程序</h3>
+            <p>通过微信搜索"阿尼坊"或扫描二维码进入小程序。</p>
+
+            <h3>2. 触发登录</h3>
+            <p>当您点击需要登录的功能（如申摊）时，系统会弹出登录提示框。</p>
+            <div class="img-wrapper">
+                <img src="screenshots/2_前往登录弹窗.jpg" alt="登录提示弹窗" class="actual-img" style="max-height: 280px;">
+            </div>
+
+            <div class="alert warning" style="margin-top: auto;">
+                <strong>⚠️ 游客用户限制</strong>
+                <p>未登录仅可浏览：活动公告、商铺、摊位卡片详情。</p>
+                <p>登录后可使用：设施预约、摊位申请、评论点赞、收藏。</p>
+            </div>
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+    <!-- Page 3: 登录流程 (下) -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>03 / 07</span></div>
+        <div class="card-body">
+            <h1>01 登录流程 (续)</h1>
+            
+            <h3>3. 填写个人信息</h3>
+            <p>登录表单包含头像选择、昵称填写和用户协议勾选。</p>
+            <div class="img-wrapper">
+                <img src="screenshots/3_填写昵称_头像信息.png" alt="登录表单" class="actual-img" style="max-height: 220px;">
+            </div>
+
+            <h3>4. 手机号授权</h3>
+            <p>系统申请获取微信绑定手机号，用于验证码接收和客服联系。</p>
+            <div class="img-wrapper">
+                <img src="screenshots/4_登录后授权手机号弹窗.png" alt="手机号授权" class="actual-img" style="max-height: 220px;">
+            </div>
+
+            <h3>5. 完成登录</h3>
+            <p>授权完成后，您的头像和昵称将显示在「我的」页面，表示登录成功。</p>
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+    <!-- Page 4: 实名认证 -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>04 / 07</span></div>
+        <div class="card-body">
+            <h1>02 实名认证</h1>
+            <p>实名认证是使用设施预约和摊位申请功能的前置条件。</p>
+
+            <h3>认证入口</h3>
+            <p>进入「我的」页面，点击「前往实名认证」按钮。</p>
+            <div class="img-wrapper">
+                <img src="screenshots/5_我的界面_前往实名认证.png" alt="实名认证入口" class="actual-img" style="max-height: 220px;">
+            </div>
+
+            <h3>认证信息填写</h3>
+            <p>填写姓名和身份证号（必须与身份证保持一致）。</p>
+            <div class="img-wrapper">
+                <img src="screenshots/6_填写实名认证信息.png" alt="实名认证表单" class="actual-img" style="max-height: 220px;">
+            </div>
+
+            <div class="alert warning" style="margin-top: auto;">
+                <strong>⚠️ 认证后不可修改</strong>
+                <p>实名认证完成后，姓名和身份证号不可更改。如需修改请联系客服。</p>
+            </div>
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+    <!-- Page 5: 申摊流程 (上) -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>05 / 07</span></div>
+        <div class="card-body">
+            <h1>03 申摊流程</h1>
+            <div class="alert info">
+                <strong>💡 前置条件</strong>
+                <p>申请摊位前请确保：✅ 已完成登录 ✅ 已实名认证</p>
+            </div>
+
+            <h3>申请入口</h3>
+            <p>进入「市集」页面，点击右上角「申摊」按钮。</p>
+            <div class="img-wrapper">
+                <img src="screenshots/1_市集界面_右上角申摊.png" alt="申摊入口" class="actual-img" style="max-height: 280px;">
+            </div>
+
+            <h3>填写申请信息</h3>
+            <table>
+                <thead>
+                    <tr><th>字段</th><th>限制</th><th>说明</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>标题</td><td>50字内</td><td>摊位卡片标题</td></tr>
+                    <tr><td>正文</td><td>500字内</td><td>描述内容，可用 #标签</td></tr>
+                    <tr><td>图片</td><td>1张,≤5MB</td><td>卡片封面图</td></tr>
+                    <tr><td>预约场次</td><td>下拉选择</td><td>日期 + 区域</td></tr>
+                    <tr><td>动漫IP</td><td>1-10个</td><td>必选至少1个标签</td></tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+    <!-- Page 6: 申摊流程 (下) -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>06 / 07</span></div>
+        <div class="card-body">
+            <h1>03 申摊流程 (续)</h1>
+            
+            <div class="alert info">
+                <strong>💡 表单填写提示</strong>
+                <p>系统自动保存上次填写内容（存稿机制），30天后自动清理未提交的草稿。</p>
+            </div>
+
+            <h3>申请状态流转</h3>
+            <table>
+                <thead>
+                    <tr><th>状态</th><th>说明</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>待抽签</td><td>申请已提交，等待系统抽签</td></tr>
+                    <tr><td>审核中</td><td>抽签已中签，等待人工审核</td></tr>
+                    <tr><td>待缴费</td><td>审核通过，等待支付费用</td></tr>
+                    <tr><td>未中签/驳回</td><td>未抽中 / 审核未通过</td></tr>
+                    <tr><td>成功</td><td>已公布摊位号，申摊完成</td></tr>
+                </tbody>
+            </table>
+
+            <div class="alert warning">
+                <strong>⚠️ 注意事项</strong>
+                <p>1. 每天仅能申请一个场次。<br>2. 请在规定时间内完成缴费，超时将自动取消资格。</p>
+            </div>
+            
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+    <!-- Page 7: 预约详情 -->
+    <div class="iphone-card">
+        <div class="card-header"><span>🦊 阿尼坊</span><span>07 / 07</span></div>
+        <div class="card-body">
+            <h1>04 预约详情</h1>
+            <p>本页面集中展示您的摊位申请记录和设施预约记录。</p>
+
+            <h3>入口位置</h3>
+            <p>进入「我的」页面，点击「预约详情」图标即可进入。</p>
+
+            <h3>状态与操作</h3>
+            <table>
+                <thead>
+                    <tr><th>状态</th><th>显示内容</th><th>操作</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>待缴费</td><td>订单号、金额、截止时间</td><td>支付 / 取消</td></tr>
+                    <tr><td>待公布</td><td>订单号、退款提示</td><td>申请退款</td></tr>
+                    <tr><td>成功</td><td>摊位号 (如: <code>2.1 A区13</code>)</td><td>无</td></tr>
+                </tbody>
+            </table>
+
+            <div class="alert info">
+                <strong>💡 摊位号查看</strong>
+                <p>申请最终成功后，系统会公布具体摊位号，您可在本页面的卡片详情中查看。</p>
+            </div>
+
+            <h3>支付与退款</h3>
+            <p>点击「支付」进入微信支付，需在截止时间前完成；符合条件的订单可点击「申请退款」发起售后。</p>
+        </div>
+        <div class="card-footer">- 官方运营指南 -</div>
+    </div>
+
+</body>
+</html>