# 使用说明

> 承启非遗文化网站 · 操作手册
> 演示账号：管理员 `admin / admin123`｜商家 `shouyi01 / 123456`｜普通用户 `user01 / 123456`

---

## 〇、打开网站

**方式一（推荐）**：双击项目根目录的 `启动网站.bat`，脚本会自动用本地服务器打开首页。

**方式二**：在 VS Code 中右键 `html/index.html` → **Open with Live Server**。

**方式三**：直接双击根目录 `index.html`（会自动跳转到 `html/index.html`）。
本项目已针对 `file://` 做过兼容，双击任意页面均可完整运行。

> 打开后停在**公告首页**。想直接看后台，访问 `html/admin/index.html` 会因未登录跳转到登录页，
> 在登录页点击「管理员」卡片下的**一键填充** → 登录，即自动进入后台。

---

## 一、完整演示动线（建议按此顺序演示）

### 第 1 步 · 公告首页（约 1 分钟）
1. 打开首页，注意**全屏影像首屏**：背景视频自动播放，右下角有「暂停影像」按钮；
   右侧竖排圆点在**视频与两张推荐轮播图**之间切换，每 7 秒自动切换。
2. 首屏下方统计条显示平台数据（非遗项目数、在售商品数、入驻商家数、注册用户数）——**实时来自数据表**。
3. 向下滚动：
   - **最新公告滚动条**（自动滚动，悬停暂停）
   - **01 非遗文化展示**：点分类标签可即时筛选
   - **文字滚动带**：20 个非遗项目名
   - **02 非遗影像档案**：把鼠标移到视频卡片上，卡片会**自动播放预览短片**
   - **03 非遗文创商城**：分类切换、直接「加入」
   - **04 一个平台，三类角色，十二个功能模块**：前后台模块对应表
   - **05 公告信息** + 首页推荐位 + 热门非遗项目

### 第 2 步 · 非遗文化展示（约 2 分钟）
1. 顶栏点「非遗文化展示」→ 项目列表页。
2. 演示**多维筛选**：分类（带数量）、级别、地区下拉、关键词搜索、排序；
   右上角可切换**网格 / 列表**视图。筛选条件会同步到地址栏（可复制分享）。
3. 打开 **蔚县剪纸** 详情页：
   - 顶部大图头：级别、地区、年代、浏览量、收藏数
   - 图集：点右侧缩略图切换主图
   - 内容页签：项目简介 / 历史脉络 / 工艺流程 / 传承人 / 用户评价
   - **工艺流程**用带序号的步骤卡呈现
   - 页面下方「与该技艺相关的文创商品」——**这就是创新点 1：文化展示与电商交易的关联**
   - 点右上「收藏」按钮（需登录）

### 第 3 步 · 注册 / 登录（约 1 分钟）
1. 顶栏「登录 / 注册」→ 登录页。
2. 演示**统一登录入口**：三类角色同一页面，点不同卡片的「一键填充」；
   登录后系统按 `role` 字段自动跳转（用户 → 用户中心、商家 → 商家中心、管理员 → 后台）。
3. 也可以现场注册一个新用户（演示实时校验：账号格式、密码强度、两次一致、手机号）。

### 第 4 步 · 商城下单全流程（约 3 分钟，核心流程）
1. 进入「非遗商城」→ 筛选 + 搜索。
2. 打开 **景德镇手绘青花主人杯**：
   - 左侧图集、右侧价格 / 库存 / 规格 / 数量
   - **「本项目出自非遗技艺」卡片**展示关联的「景德镇手工制瓷技艺」——可点进去看项目
   - 选规格 → 点「加入购物车」
3. 顶栏购物车角标实时 +1，进入 **购物车**：改数量、勾选、看运费与优惠、合计。
4. 点「去结算」→ **结算页**：
   - 选择/新增收货地址
   - 商品按商家分组列出
   - 选支付方式（微信 / 支付宝 / 银联）
   - 提交订单 → 生成订单号 → **模拟扫码支付**（二维码为本地 canvas 绘制，带 15 分钟倒计时）
   - 点「我已完成支付」→ 订单状态变为**待发货**
5. 进入「用户中心 → 我的订单」查看该订单。

### 第 5 步 · 商家发货（约 1.5 分钟）
1. 退出登录 → 用 `shouyi01 / 123456` 登录 → 自动进入**商家中心**。
2. **商品管理**：演示「上架新商品」表单（**必须选择关联的非遗项目**），提交后状态为**待审核**。
3. **订单管理**：找到刚才的订单 → 点「发货」→ 选快递公司 + 填运单号 → 订单变为**待收货**。
4. 也可以演示「售后处理」和「导出 CSV」。

### 第 6 步 · 管理员审核（约 2 分钟，形成闭环）
1. 退出登录 → 用 `admin / admin123` 登录 → 进入**后台概览**：
   统计卡、待办中心、纯 CSS 绘制的柱状图 / 条形图 / 环形图、最近操作日志。
2. **商家管理 → 商品审核**：找到商家刚提交的商品 → 「审核通过」→ 状态变为**已上架**。
3. **回到前台商城**（顶栏「查看前台」），刷新即可看到该商品已上架——**完成前后台数据闭环**。
4. 其他可演示：
   - **公告管理**：发布一条公告，勾选「设为首页轮播推荐」并选一张横幅图 → 回首页看首屏轮播已更新
   - **非遗文化展示管理**：新增/编辑项目、动态添加工序、查看关联商品数量
   - **分类管理**：新增分类、调整排序、删除时校验是否被占用
   - **用户管理**：启用/禁用用户、重置密码、查看角色权限矩阵
   - **系统设置**：修改运费与包邮门槛（影响结算页计算）、评论是否需审核、导出与清理操作日志

---

## 二、各页面操作速查

### 前台

| 页面 | 主要操作 |
|---|---|
| 首页 `index.html` | 首屏轮播、暂停/播放影像、分类筛选、悬停播放预览视频、加入购物车 |
| 登录 `login.html` | 三角色一键填充、图形验证码（点击刷新）、记住我、`?redirect=` 回跳 |
| 注册 `register.html` | 切换普通用户/商家、实时校验、商家可同步提交店铺信息 |
| 商家入驻 `merchant-join.html` | 四步流程说明、填表、资质本地预览、查看审核状态 |
| 公告列表 `announcement.html` | 类型页签、关键词搜索、分页、右侧推荐位 |
| 公告详情 `announcement-detail.html` | 正文阅读、上下篇导航、相关公告 |
| 非遗列表 `heritage.html` | 分类/级别/地区/关键词/排序、网格↔列表、清空筛选、分页 |
| 非遗详情 `heritage-detail.html` | 图集切换、内容页签、工序步骤、传承人、评论、收藏、关联商品 |
| 商城 `shop.html` | 分类/关联项目/价格区间/关键词/排序、加入购物车 |
| 商品详情 `goods-detail.html` | 图集、规格选择、数量、加入购物车、立即购买、收藏、评价分布、关联非遗项目 |
| 购物车 `cart.html` | 全选、改数量、删除、清空、运费与优惠、去结算 |
| 结算 `checkout.html` | 选/新增地址、支付方式、备注、提交订单、扫码支付、支付完成 |
| 售后评价 `aftersale.html` | 待评价、发表评价（星级+文字）、已评价列表、申请售后 |
| 用户中心 `user-center.html` | 资料概览、订单状态页签、支付/确认收货/再次购买、查看物流 |
| 个人信息 `user-profile.html` | 修改资料与头像、修改密码、查看最近登录 |
| 收货地址 `user-address.html` | 新增/编辑/删除地址、设为默认 |
| 我的收藏 `user-favorites.html` | 项目/商品页签、关键词过滤、批量取消收藏 |
| 商家中心 `merchant-center.html` | 数据概览、销售趋势图、待办中心、店铺资料编辑 |
| 商品管理 `merchant-goods.html` | 上架新商品、编辑、上下架、删除、库存预警 |
| 订单管理 `merchant-orders.html` | 订单筛选、发货、售后处理、导出 CSV |
| 关于平台 `about.html` | 项目背景、平台机制、功能结构图、技术路线、数据库设计、创新点 |

### 后台（`html/admin/`）

| 页面 | 主要操作 |
|---|---|
| `index.html` | 数据统计卡、快捷入口、待办中心、三张纯 CSS 图表、最近操作日志 |
| `announcement.html` | 发布/编辑/删除公告、置顶开关、首页轮播位设置与排序 |
| `heritage.html` | 新增/编辑非遗项目、动态编辑工序、标签管理、发布上下架、查看关联商品 |
| `category.html` | 项目分类与商品分类维护、排序上移下移、删除占用校验 |
| `shop.html` | 订单管理（改状态、批量发货、导出）、售后评价管理（审核评论、处理售后） |
| `merchant.html` | 商家入驻审核、商品审核（通过/驳回+意见）、商家订单监督 |
| `user.html` | 用户列表（启禁用、重置密码、删除）、角色权限矩阵 |
| `system.html` | 基础设置（站点/联系/交易/审核开关）、操作日志（筛选、导出、清理） |

---

## 三、数据存储与重置

- 所有数据保存在浏览器 **`localStorage`**，键名前缀 `chengqi_`（如 `chengqi_users`、`chengqi_goods`）。
- 首次打开会自动写入演示种子数据。
- **重置为初始数据**的两种方式：
  1. 登录管理员 → 后台右上角 **「重置数据」** 按钮；
  2. 浏览器控制台执行 `CQ_DB.reset()` 后刷新页面。
- 购物车同样存于本地（`chengqi_cart`），不落库，与真实电商一致。

---

## 四、常见问题

**Q1：页面打开是空白 / 样式错乱？**
请确认没有单独把某个 HTML 文件挪出目录。页面资源使用相对路径，必须在原目录结构内运行。

**Q2：双击打开后，某些功能不生效？**
本项目已适配 `file://`，理论上全部可用。若浏览器隐私设置禁用了本地存储，请改用 `启动网站.bat` 启动本地服务器访问。

**Q3：为什么商城里有些商品看不到？**
前台商城只展示状态为**已上架**的商品。待审核 / 已下架商品只在商家中心与后台可见——这是「商品审核」流程的设计。

**Q4：为什么我发表的评论没显示？**
系统设置中的「评论需审核」默认开启，新评论状态为**待审核**，需管理员在「商城管理 → 售后评价管理」中审核通过后才会在前台展示。

**Q5：怎么查看某个非遗项目下有多少商品？**
后台「非遗文化展示管理」中每行的「关联商品」操作会列出该项目关联的全部商品。

**Q6：结算页的运费怎么算的？**
运费与包邮门槛来自 `DB.settings()`（后台「系统设置 → 交易设置」）。未满 `freeShippingAt` 收 `expressFee` 元，满额免运费。