# 支付页面管理模式与预览模式设计文档

日期: 2026-05-12
作者: AI Assistant
状态: 待审阅

# 概述

对 docs/.vuepress/public/pay.html 进行改造，实现「管理模式」与「预览模式」两种界面状态，通过 URL 查询参数自动切换。

# 模式判定规则

模式 触发条件
管理模式 URL 无有效预览参数（name/company/image 都为空或不存在）
预览模式 URL 包含至少一个有效预览参数（name/company/image 任一非空）

# 管理模式设计

# 布局

  • 左右分栏：各占 50% 宽度，使用 flex 布局
  • 左侧：编辑面板
  • 右侧：实时预览面板

# 左侧编辑面板

# 表单字段

  1. 姓名 - 文本输入框，placeholder: "请输入姓名"
  2. 公司名称 - 文本输入框，placeholder: "请输入公司名称"
  3. 图片上传 - 文件选择器，accept: "image/*"

# 图片上传流程

  1. 用户选择图片文件
  2. 显示"上传中..."状态
  3. POST 到 https://img.scdn.io/api/v1.php
  4. 请求格式: multipart/form-data，字段名: image
  5. 响应处理:
    • 成功: 提取 URL（支持 {url: "..."} 或直接返回字符串）
    • 失败: 提示错误，不阻断其他操作
  6. 上传完成后更新预览

# 复制链接按钮

  • 位置: 编辑面板底部
  • 点击后:
    1. 收集当前非空字段（name/company/image）
    2. 使用 URLSearchParams 编码查询参数
    3. 拼接为完整 URL
    4. navigator.clipboard.writeText() 复制到剪贴板
    5. 按钮文字变为"已复制"，2秒后恢复

# 右侧预览面板

  • 显示完整的支付页面（与原页面一致）
  • 实时根据左侧输入更新内容
  • 无编辑控件

# 预览模式设计

# 布局

  • 全屏显示完整支付页面
  • 无编辑面板
  • 无复制按钮

# 数据填充

  • 从 URL 查询参数读取 name/company/image
  • 填充到页面对应位置
  • 图片加载失败显示默认占位

# 技术实现方案

# 状态管理

const state = {
  name: '',
  company: '',
  image: ''
};

# 文件结构

  • 单文件实现: docs/.vuepress/public/pay.html
  • 保留原有 HTML/CSS/JS
  • 新增模式切换逻辑

# 关键函数

  1. getMode() - 判断当前模式
  2. getParams() - 从 URL 读取参数
  3. renderAdmin() - 渲染管理模式布局
  4. renderPreview() - 渲染预览内容（供两种模式共用）
  5. uploadImage(file) - 上传图片
  6. copyLink() - 复制链接
  7. updateState(key, value) - 更新状态并刷新预览

# DOM 操作策略

  • 管理模式: 重写 body.innerHTML 为左右分栏结构
  • 预览内容更新: 通过选择器定位元素并修改内容/属性

# 与原有页面的集成

# 保留内容

  • 完整的 CSS 样式
  • 套餐选择功能
  • 星星评分功能
  • 支付模态框
  • 实时时钟
  • 原有交互逻辑

# 修改内容

  • 页面初始化逻辑: 根据模式渲染不同布局
  • 数据填充: 从 state/params 读取而非硬编码
  • "郑焕辉" → state.name
  • "广东纽瑞芯" → state.company
  • base64 图片 → state.image

# 错误处理

场景 处理方式
图片上传失败 alert 提示，继续允许编辑
图片加载失败 显示默认占位图（灰色圆形）
剪贴板API不可用 降级到 prompt 显示 URL
所有参数为空的预览模式 显示默认硬编码内容

# 验收标准

  1. ✅ 无参数访问 → 显示管理模式（左右分栏）
  2. ✅ 输入姓名/公司 → 右侧实时更新
  3. ✅ 上传图片 → 上传成功后预览显示
  4. ✅ 点击复制 → URL 包含当前非空参数
  5. ✅ 访问带参数 URL → 显示预览模式（仅支付页面）
  6. ✅ 预览模式功能完整（套餐选择、支付等）
  7. ✅ 原有功能无回归
  • MIT Licensed | Copyright © 2024 小皮咖