加拿大境内折后商品金额满 CA$99.00 免运费 · 部分偏远地区除外

系统功能指南

前台用户系统功能指南

源码核对（2026-07-15）：客服浮窗关闭时不再查询“匿名会话可认领”状态，登录也不会自动弹出阻断确认框。用户打开客服、进入历史会话面板并主动选择认领后，系统才显示确认框；会话转移依然由 API 校验旧访客身份和当前用户。

本手册面向 Trelanto 电商平台的普通用户，帮助您了解并使用平台提供的多语言切换、主题切换、移动端适配、活动页面参与等系统级功能。

1. 多语言切换

1.1 支持的语言

系统当前支持以下三种语言：

语言	标识	说明
中文	zh	默认语言（CN 租户）
English	en	英文界面（CA / TRELANTO 租户默认）
Français	fr	法文界面

系统默认语言取决于租户配置，用户可以随时切换到其他语言界面。

1.2 切换方式一：通过用户菜单（电脑端）

点击页面右上角的用户头像，展开下拉菜单。
下拉菜单中包含语言切换选项（以菜单项形式嵌入）。
点击该选项后弹出语言列表，菜单中列出所有可用语言，当前选中的语言旁边显示勾选标记（✓）。
点击目标语言即可完成切换。
切换后页面会立即更新为对应语言的内容。

1.3 切换方式二：通过侧边栏（手机端）

点击页面左上角的汉堡菜单图标（☰），展开左侧侧边栏。
侧边栏中包含语言切换选项。
点击该选项后弹出语言列表进行选择。

1.4 语言设置持久化

系统通过浏览器 Cookie（名称为 NEXT_LOCALE）保存您选择的语言偏好。
Cookie 的有效期为一年，在此期间每次访问网站都会自动使用您上次选择的语言。
清除浏览器 Cookie 后，语言设置会恢复为默认的中文。

1.5 多语言内容覆盖范围

以下内容会随语言切换而变化：

页面导航栏、按钮、提示文字等界面元素。
商品标题、描述和属性信息（如果商家为商品配置了多语言翻译）。
分类名称和描述。
首页板块标题。
轮播图的标题和副标题文字。
活动页面的标题、描述内容。
页脚栏目标题和链接文字。
搜索建议词和热门搜索词（根据当前语言返回对应语言的内容）。

注意：部分商品如果商家未提供全部语言翻译，切换语言后可能会显示备选语言的内容（如英文缺失时显示中文，反之亦然）。

在线客服入口和客服会话文案同样覆盖中文、英文、法文。已登录用户的客服会话会绑定账号；未登录访客会通过浏览器访客标识关联临时会话。

2. 主题切换

2.1 支持的主题模式

系统支持三种主题模式：

模式	图标	说明
浅色模式（Light）	太阳图标	浅色背景，深色文字
深色模式（Dark）	月亮图标	深色背景，浅色文字
跟随系统（System）	自动图标	根据操作系统的深色/浅色设置自动切换

2.2 切换方式一：通过用户菜单（电脑端）

点击页面右上角的用户头像，展开下拉菜单。
下拉菜单中包含主题切换选项（以菜单项形式嵌入）。
点击该选项后弹出主题选择菜单，菜单中列出三种模式（浅色、深色、跟随系统），当前选中的模式旁显示勾选标记。
点击目标模式即可完成切换。
页面会立即应用新的主题样式。

2.3 切换方式二：通过侧边栏（手机端）

点击页面左上角的汉堡菜单图标（☰），展开左侧侧边栏。
侧边栏中包含主题切换选项。
点击后弹出主题选择菜单进行切换。

2.4 主题设置持久化

系统通过浏览器 Cookie（名称为 theme）保存您选择的主题偏好。
Cookie 有效期为一年。
切换主题时，系统会同时更新 HTML 根元素的 class 属性，确保页面样式立即生效。
选择"跟随系统"模式时，系统会检测您的操作系统偏好设置（通过 CSS media query prefers-color-scheme），并自动应用对应的主题。

2.5 主题影响范围

主题切换会统一改变以下界面元素的配色：

页面背景色和文字颜色。
导航栏、侧边栏颜色。
按钮、输入框、卡片等组件的视觉样式。
图标颜色。
滚动条、分割线等辅助元素。

3. 移动端适配与使用

3.1 响应式布局

本平台采用响应式设计，会根据不同屏幕尺寸自动调整布局：

设备类型	屏幕断点	布局特点
手机 / 平板	小于 900px (md)	移动端头部导航（汉堡菜单 + 侧边栏），单列或双列商品列表
桌面	大于等于 900px	完整顶部导航（Logo + 分类 + 搜索 + 用户菜单 + 购物车），多列商品列表

3.2 移动端专属界面

在移动端（屏幕宽度小于 900px）访问时，以下界面元素会有所变化：

顶部导航栏（手机端布局从左到右）：
- 高度变为 52px（桌面端为 64px）。
- 左侧：汉堡菜单图标（☰），点击展开左侧侧边栏（包含所有的导航与功能入口）。
- 中间：搜索框，始终展开可见，可直接输入关键词搜索。
- 右侧：管理后台图标（仅管理员可见）、首页快捷图标、购物车图标。
左侧侧边栏：
- 点击汉堡菜单图标后从左侧滑入。
- 包含：用户信息（已登录时显示头像与客户号，未登录时显示欢迎语）、商品分类、我的订单、我的收藏、我的评价、地址管理（按租户配置显示）、语言切换、主题切换、设置、登录/退出登录等全部功能入口。
- 桌面端（≥900px）无汉堡菜单，上述功能均通过顶部导航栏右侧的用户头像下拉菜单访问。
导航快捷按钮：
- 在订单、收藏、地址、设置等子页面顶部提供「返回上一页」和「返回首页」两个快捷按钮。
- 在桌面端和手机端均会显示，方便快速导航。
轮播图：
- 移动端会自动使用独立的移动端 Banner 图片（如果商家配置了）。
- 轮播图宽高比从桌面端的 21:9 切换为移动端的 16:9。
- 支持触控滑动手势切换。
商品列表：
- 商品网格从多列调整为单列或双列。
- 商品卡片尺寸自动适配屏幕宽度。
搜索页面：
- 筛选面板以底部抽屉（Drawer）形式弹出，而非侧边栏。
- 搜索结果同样支持无限滚动加载。

3.3 触控操作

轮播图支持左右滑动手势切换图片。
商品详情页的图片画廊支持手势操作。
列表页面支持下拉滚动加载更多内容。

3.4 移动端访问方式

直接在手机浏览器中输入网站地址即可访问。
无需安装任何应用程序。
推荐使用 Chrome、Safari 或 Edge 移动版浏览器。

4. 活动页面参与

4.1 什么是活动页面

活动页面是平台运营人员发布的促销活动或专题页面。每个活动页面包含：

活动标题和副标题
活动 Banner 图片（桌面端和移动端可能使用不同图片）
活动描述（支持富文本内容）
活动内容图片（按顺序展示）
活动起止时间

4.2 查看活动

从首页进入：首页轮播图或推荐板块可能链接到活动页面，点击即可跳转。
通过活动链接：活动页面的 URL 形式为 /activities/活动slug，如 /activities/spring-sale。
进入活动页面后可以看到完整的活动信息和图片。

4.3 活动状态

进行中：活动当前有效，页面正常展示所有内容。
已过期：活动结束后，页面会显示"活动已结束"的过期提示，并显示活动结束时间。已过期的活动仍然可以访问，但会有明确的过期标识。
未找到：如果活动不存在或 slug 错误，页面会显示友好的提示信息。

4.4 活动页面操作

查看活动详情、Banner 图片和内容图片。
阅读活动描述和参与规则。
根据活动内容中的指引进行操作（如跳转到指定商品页面等）。

5. 页面导航系统

5.1 顶部导航栏

顶部导航栏是整个网站的主要导航入口，根据设备类型有所不同：

电脑端（≥900px）顶部导航栏（从左到右）：

网站 Logo：点击可返回首页。
分类导航：展示商品分类树，支持多级分类展开。
搜索框：输入关键词搜索商品。
管理后台图标（仅有 admin:access 权限的用户可见）：点击跳转至管理后台。
用户头像：始终显示（未登录时显示人形图标）；点击展开下拉菜单（包含登录/注册、订单、收藏、设置、语言切换、主题切换等入口）。
购物车图标：显示购物车中的商品数量，点击进入购物车页面。

手机端（<900px）顶部导航栏（从左到右）：

汉堡菜单图标（☰）：点击展开左侧侧边栏，包含所有功能导航入口。
搜索框：始终展开可见，可直接输入关键词。
管理后台图标（仅有 admin:access 权限的用户可见）：点击跳转至管理后台。
首页图标：点击快速返回首页。
购物车图标：显示购物车中的商品数量，点击进入购物车页面。

5.2 用户菜单（电脑端下拉菜单 / 手机端侧边栏）

电脑端：点击右上角用户头像后展开下拉菜单。
手机端：点击左上角汉堡菜单图标（☰）后展开左侧侧边栏。
两端菜单均包含以下入口（均需登录后才显示完整功能）：

菜单项	图标	功能	可见条件
我的订单	列表图标	查看历史订单	已登录
我的收藏	心形图标	查看收藏的商品	已登录
我的评价	评价图标	查看和管理商品评价	已登录
地址管理	定位图标	管理收货地址	已登录且租户需要地址
语言切换	地球图标	切换界面语言（中文/英文/法文）	始终可见
主题切换	主题图标	切换浅色/深色/跟随系统主题	始终可见
设置	齿轮图标	进入个人资料、密码修改等设置页面	已登录
注册	用户图标	前往注册页面	未登录
退出登录	退出图标	退出当前登录状态	已登录
登录	登录图标	前往登录页面	未登录

注意：「管理后台」入口不在用户下拉菜单内，而是作为独立的盾牌图标按钮显示在顶部导航栏（电脑端和手机端均在导航栏右侧区域），仅对持有 admin:access 权限的用户可见。

5.3 面包屑导航

面包屑导航出现在以下页面：

商品详情页：首页 > 分类名 > 商品名
分类页面：首页 > 一级分类 > 二级分类
品牌页面：首页 > 品牌名
搜索结果页：首页 > 搜索结果

点击面包屑中的任意层级可快速返回该层级页面。

5.4 智能粘性头部

导航栏采用智能粘性定位：向下滚动页面时导航栏会自动隐藏，向上滚动时重新出现。
此设计在移动端可以最大化内容展示区域，同时保持导航的可访问性。
滚动超过 10px 后导航栏会添加阴影效果，帮助区分导航栏和页面内容。

6. 页脚信息与内容页面

6.1 页脚结构

页面底部的页脚区域包含以下信息：

按栏目分组的链接（如"关于我们""客户服务""帮助中心"等）。
每个栏目下有多个链接，可跳转到对应的内容页面。
联系与关注入口（邮箱、社交/消息链接、二维码弹窗等）。
版权信息和备案号。

6.2 内容页面（CMS 页面）

页脚链接可能指向由平台管理的内容页面，如：

关于我们
隐私政策
用户协议
退换货政策
常见问题

这些页面的 URL 形式为 /p/页面slug（例如 /en/p/terms-of-service），内容由平台运营人员在后台配置和维护。

6.3 查看内容页面

点击页脚中的链接进入对应的内容页面。
内容页面支持多语言，会根据当前语言设置显示对应的内容。
页面支持富文本格式，可能包含文字、图片等内容。

7. 在线客服与消息支持

7.1 入口与身份

前台在线客服入口在商城页面中提供，文案随当前语言切换。已登录用户创建的客服会话会绑定账号；未登录用户通过浏览器访客标识创建访客会话。用户可以在会话中描述订单、商品或支付问题，系统会把消息同步到后台客服工作台。

7.2 邮件与在线消息

客服系统支持在线消息和邮件回复两条链路。后台客服人员通过 /admin/support 处理会话；当客服通过邮件回复时，邮件会携带会话 token，客户直接回复邮件后也能回到同一客服会话。订单确认邮件的回复地址会优先指向客服地址，便于客户围绕订单继续沟通。

7.3 附件与订单关联

客服会话可以关联订单，方便客服查看问题上下文。附件下载仍会校验当前访客、用户或后台人员是否拥有对应会话访问权，不能通过附件 ID 跨会话访问。

8. 会话管理

8.1 登录会话

登录后系统会为您创建一个会话。修改密码后，所有设备上的登录状态将自动失效，需要使用新密码重新登录。

8.2 Token 自动刷新

系统使用 Access Token 和 Refresh Token 机制维持登录状态。
Access Token 有效期较短，到期前系统会自动使用 Refresh Token 获取新的 Access Token，用户无需手动操作。
如果 Refresh Token 也过期，系统会提示您重新登录。

9. 操作注意事项

9.1 语言切换

切换语言后页面会立即刷新显示新语言的内容。
商品内容的多语言取决于商家是否配置了对应语言的翻译，未配置的内容会使用备选语言显示。
语言偏好存储在 Cookie 中，使用隐私模式或清除 Cookie 后需要重新设置。

9.2 主题切换

选择"跟随系统"后，当您在操作系统中切换深色/浅色模式时，网站主题也会自动跟随变化。
主题设置不影响页面内容，仅改变视觉样式。
深色模式下部分图片可能与背景对比度有所变化，属于正常现象。

9.3 移动端使用

在移动端使用时，建议竖屏操作以获得最佳体验。
部分复杂的筛选操作在移动端以抽屉方式呈现，使用相同的功能但交互方式有所调整。
如遇到页面显示异常，可尝试刷新页面或清除浏览器缓存。

9.4 活动页面

活动有明确的起止时间，过期后活动页面仍可访问但会标记为已结束。
活动相关的优惠和规则以活动页面的描述为准。
部分活动可能需要登录后才能参与。

10. 常见问题

Q1：切换语言后部分内容没有变化，还是显示原来的语言？

这是因为该部分内容的目标语言翻译尚未配置。系统会使用备选语言的内容作为后备显示。例如，当切换到英文后，如果某商品只配置了中文信息，则仍然显示中文版本。这不是系统故障，而是内容翻译覆盖的范围问题。

Q2：深色模式下页面某些元素看不清楚怎么办？

可以尝试切换到浅色模式。如果问题持续存在，可能是特定内容（如运营人员上传的图片）未针对深色模式优化，建议反馈给平台客服。

Q3：手机上访问页面加载很慢怎么办？

检查网络连接是否稳定。
尝试关闭其他占用网络的应用。
清除浏览器缓存后重新访问。
建议使用 Wi-Fi 网络进行大量浏览操作。

Q4：在手机上找不到筛选按钮？

在移动端，搜索结果页面的筛选功能以按钮形式呈现。点击页面上的筛选按钮后，筛选面板会从底部弹出（抽屉式），您可以在其中设置价格范围、品牌、属性等筛选条件。

Q5：活动页面显示"活动已结束"是什么意思？

表示该活动的有效期已过。活动运营人员设置了活动结束时间，当前时间已超过该时间点。页面上会显示活动结束的具体日期和时间供您参考。

Q6：如何收藏搜索条件或筛选结果？

当前系统不支持保存搜索条件。但搜索结果页面的 URL 中包含搜索关键词参数（如 ?q=关键词），您可以将该 URL 加入浏览器书签以便下次快速访问。

Q7：页脚的内容页面打不开怎么办？

检查网页链接是否正确。
内容页面可能尚未配置或已被下线，建议联系客服了解情况。
尝试切换到另一种语言查看是否有内容。

Q8：如何从前台快速进入管理后台？

如果您的账号具有管理员权限（admin:access），登录后在前台页面顶部导航栏会出现专用的「管理后台」图标按钮（盾牌图标）。电脑端该图标显示在右上角用户头像旁；手机端该图标也显示在顶部导航栏右侧区域（购物车左侧）。点击该图标即可进入管理后台，系统会自动定位到您有权限访问的第一个管理页面。普通用户不会看到该图标。

Q9：为什么切换语言后热门搜索词变了？

热门搜索词是按语言维度分别统计的。中文环境下的热搜词和英文环境下的热搜词是独立计算的，切换语言后自然会显示对应语言下的热门搜索内容。法文界面同理。

Q10：页面显示和操作系统的主题不一致？

请检查主题设置是否为"跟随系统"模式。如果已设置为浅色或深色固定模式，页面将不会随操作系统的主题变化而变化。将主题切换为"跟随系统"即可使网站主题与操作系统保持一致。