中西讲师 / DESIGN REVIEW / 2026.10.20返回完整 Demo ↗

DEMO 04 · 橙白与集体表达

中西商家，迎战未来
中西讲师，汇聚实战力量

保留原开场，把主色重新统一为橙色与暖白。用集体合影、背景光场和清晰的课程信息表达整个平台，让访客主动了解每一位同行。

当前导航：两个入口

展示页用于了解讲师、筛选课程和发起意向；管理工作台负责信息维护、业务办理与核对。展示页只为内部模块加标记，公开模块不再重复标注“对外”。

入口	包含内容	导航行为
展示页 →	讲师地图与信息库、合影、标杆、课程、公开活动、AI工具和权益介绍；意向预约标“仅内部使用”。	栏目在同页滚动定位；仅业务办理按钮进入工作台。
管理工作台 →	档案与资料、活动排期、磨课共建、报账中心、权益与关怀。	统一顶部栏目，切换相应业务功能，不混入展示页的滚动链接。

已确认的归并

档案与资料统一一个入口，下分讲师信息、课程信息、案例素材、附件版本与校对。保留已有附件与审核功能和全部原记录，不再并列展示新旧管理入口。本轮统一的是导航和职责，没有强制合并两套历史数据。

报账、权益登记、关怀记录与可讲时间维护集中在工作台。展示端保留权益说明、选师和意向预约；原报账锚点会转到工作台报账页。活动审批仍可绕过意向直接提交，管理仍可直接安排。

原配色、首屏内容、地图滚动、人物轮播、知识吸收特效与群像保持原样。此次检查覆盖页面导航、原记录保留、时间维护及报账操作；未进行真实浏览器画面验收。

这次具体调整了什么

01 / BRAND

保留原开场，恢复橙白

原宣言、居中排版、两个行动入口与四项统计保留。按指定参考站使用亮橙、暖白、浅橙边线和深蓝灰文字，统一到地图、目录与内部页。

02 / COLLECTIVE

集体展示，按需了解

首页保留集体宣言，不固定主推个人。讲师名片恢复辨认用头像，标杆故事恢复人物海报并轮播三位示例讲师。合影八人同尺度、不默认选中，两位AI形象配六个白色轮廓。

03 / MAP

区域分布保持中立

删除成都中心及所有城市连接线。初始为全部区域总览，城市等权显示，点击后只强调所选区域。悬停不改变选区；右侧名录持续缓慢往复滚动，去掉悬停、聚焦、详情弹窗和定时停留的暂停逻辑。

标杆人物轮播

保留左侧人物海报、右侧故事的版式，三位示例讲师轮流展示，支持上一个、下一个、分页和暂停。照片、故事详情、海报与互动记录随人物同步切换；林知行原有的点赞和交流记录继续保留。下方影像访谈也恢复人物缩略图。

轮播在悬停、键盘聚焦、打开详情、切换页签、离屏或后台时暂停，并响应全局暂停与系统减少动态效果。

背景特效与群像交互

不只让元素移动

增加暖橙光场、细纹、透视网格、呼吸曲线和扫过的光束。移除鼠标圆圈，改为 AWB、全站推、P4P、背调、开发、建档、跟进、选品、团队、文化逐个出现，沿弧线向鼠标聚拢、缩小淡出，表达知识吸收。手机等无精确指针设备会自动汇聚至“发现中西讲师”按钮；关键词从按钮上方留白出现，按钮离屏或页面隐藏时停止。

让轮廓决定触发范围

白色小人用人形路径判断，AI人物用透明通道掩码判断。人物外部、两腿之间以及轮廓间的留白不触发介绍。鼠标、触屏和键盘都能体验。

方便直接评估

首屏可重播、暂停和静态对照，并可切换“展示 / 轻柔”特效强度；群像选择后显示姓名、公司、课程与适合人群，并沿用讲师详情/预约入口。未选择人物时展示集体说明。

合影素材是虚构演示：两张由本轮 imagegen 生成的透明全身图，六个白色人形用于减少 Demo 素材工作量。正式合影可以替换每个人的素材与轮廓数据，不按人物位置、大小或默认高亮表示排名。

本轮参考与实际转化

来源	学到什么	本版采用
用户指定的橙白参考站	亮橙主色、暖白留白、浅橙边界、深蓝正文及居中宣言。	恢复原首页构成；全站使用 #fe6701 主橙、#fff8f0 暖白、#15213a 文字。
Codrops · Ambient Canvas Backgrounds	通过低频光场、柔化色层与纹理构造背景气氛。	以 CSS 渐变、细网格和 SVG 曲线形成橙白空间感，复用现有粒子。
Codrops · Interactive Animated Landscape	把鼠标输入转化为背景的局部响应。	保留局部暖光；按用户反馈将圆圈改为知识关键词的出现、汇聚与吸收。
Codrops · Line & Letter Hover Animations	字体本身可承担视觉变化；本轮读到官方示例，文章读取受限。	只借鉴表达方向，中文标题用整体遮罩揭幕，不复用字母算法。
GSAP Flip	布局改变时保持位置连续。	延续精确筛选后的卡片平滑归位，使用原生动画。
WebKit 减少动态效果示例	静态状态仍保持完整内容和构图。	统一暂停、静态对照、离屏与后台处理；系统减动效优先。

案例研究由独立子代理承担，证据为本轮官网文章、官方示例与源码读取。参考站源码成功取回；本轮没有播放参考站动画，也没有进行帧率测量。

轻量协作 · 本轮新增

沿用现有橙白视觉，新增资料维护与版本、活动安排与审批、磨课与课程共建。首页构图、头像、标杆轮播、知识吸收特效、地图及持续名单滚动均保留。

页面	对外 · 讲师	对内 · 阿里小二	对管理
资料维护与版本	查看本人资料与核对意见	代录、补充、提交版本	核对版本、退回补充、设置使用范围
活动安排与审批	查看本人已确认安排，无需在线确认	选时段登记意向后查看联系方式；附沟通记录申请，也可直接申请	审批、改期、取消；无申请也可直接安排
磨课与课程共建	查看参与课程、反馈与版本	代录反馈、修改回应和课件，提交内容确认	确认指定可授课版本，核对参与贡献

进入活动安排 →　资料维护 →　磨课共建 →　两个入口 →

以人为本：意向是可选起点；讲师线下同意后，小二附聊天记录或沟通纪要，由管理审批。管理也可直接排期。重叠时段保留提示，管理填写协调依据后可继续，不强制删除另一条安排。

资料如何关联

讲师与课程采用固定编号关联；课程下可保留多个资料，每轮磨课明确指向一个课件及版本。资料核对确认文件可用，磨课确认当前可授课版本；修改中的新版本不覆盖旧的已确认版本。活动保留确认时关联的课程版本。

现有本机意向可承接到新活动，原意向保留。活动确认后展示在原约课日历；模拟活动结束后可关联报账。磨课和授课贡献只形成待核对记录，不自动积分或晋级。公开活动区不自动发布内部安排。

轻量版边界

新页面只保存本浏览器的演示数据。选择的截图、PDF 等可在本次页面中预览，刷新后只保留文件名、版本和说明。没有共享后台、真实上传、身份鉴权、消息发送或复杂同步。视角切换用于核对分工，不构成真实权限隔离；联系方式仍为虚构示例。

原资料管理页和运营记录完整保留，不迁移或覆盖旧记录；新版与原资料管理页暂不双向同步。新增三个页面共享同一套本地讲师、课程、版本、活动与磨课关系。

复用与验证

入口 workflows-v5.html，角色表 audiences-v5.html；共用 audience-v5.js 与 workflow-data-v5.js?v=20261022-simplify。新样式只加载于新工作台和角色表，未改首页样式或动效。

已进行状态、DOM 交互、原页面回归及资源核对。当前工具没有可连接的浏览器页面，真实画面和动效播放尚未完成现场验收。

后续落地 · 小服务器与本地附件电脑

适用：搭建与维护人员2026-10-20 · 已确认方向 / 待实现

采用“服务器保留网页、业务记录与预览图，本地电脑保存附件原件”的分工。服务器核验访问权限后流式中转文件；本地电脑负责大文件与转换处理。此处是后续实施依据，不表示当前 Demo 已具备这些能力。

存放位置	保留内容与职责	页面与流程要求
服务器	网页、头像、经核对可展示的课件首页缩略图；讲师、课程、预约、审批、附件版本与访问范围等小型业务数据库；身份校验与文件转发。	本地附件电脑离线时，页面、允许访问的预览图和已有业务记录仍可查看，预约与审批记录仍可维护。
本地附件电脑	课件原件、聊天记录附件、视频、历史版本；生成首页缩略图、课件转换与文件完整性校验。	运行文件服务，经认证连接到服务器；需要取用原件时保持开机联网。原件另做备份，单台电脑不是备份。
访客浏览器	运行现有滚动、轮播、知识吸收与群像交互；显示传输进度、结果与离线提示。	保留现有视觉与动效；大文件按需请求，不随首页加载，不把完整附件写入浏览器演示记录。

文件与业务记录分开关联

服务器以稳定的附件编号关联讲师、课程、活动或磨课记录，保留版本编号、文件名、大小、校验值、存储位置标识、上传人、更新时间、访问范围及文件状态。本地真实磁盘路径不暴露给访客。新版本单独登记，不覆盖活动或审批引用的已确认版本。

上传流程：选择文件 → 服务器核验权限并转发 → 本地电脑完整保存并返回校验结果 → 登记可用版本 → 页面显示上传成功。中断或本地离线时保留业务草稿，附件标记“未完成 / 待重试”，不能把选中文件、登记文件名或一次预览当作上传成功。服务器首期不承担离线原件暂存。

下载流程：用户申请 → 服务器按身份与资料范围核验 → 经认证通道读取本地文件并边读边发。原件离线时提示“文件源暂时离线，请稍后重试”，不无限等待。聊天记录及其预览仅向对应内部人员开放；把文件放本地不等于已经实现权限隔离。

运行内存与储存控制

控制项	实施要求	验收依据
流式传输	附件上传与下载单独配置缓冲策略；代理、连接通道和应用全链路边收边发，不整份读入内存，不用完整文件的 Base64 中转。用户取消后及时释放上游连接。	大文件传输时内存保持有界；检查临时目录，确认没有意外累积完整原件。不能只检查 Nginx 一层。
轻量后台	优先评估单个轻量业务服务与 SQLite；查询分页、缓存有上限。课件转换、缩略图生成和视频处理放在本地电脑。	测量常驻与高峰内存，并检查服务端写入一致性、重启恢复和数据库备份；技术选型以实测为准。
传输并发	初期可从同时 2～3 个附件传输试验，超出时明确等待或重试；与普通页面、预约和审批请求分开控制。	这是试验参数，不是容量承诺或用户数上限；按实际峰值与网络表现调整。
资源余量	本机为约 0.5GB RAM 的共享服务器；运行内存与磁盘分别监测。限制日志与缓存增长，不把空闲内存全部分给新后台。	同时测试浏览、上传、下载与审批，并观察现有服务、可用内存、交换活动、磁盘和出口带宽。
带宽与可用性	中转仍消耗服务器流量；本地宽带上传速度影响下载。通道需具备超时、断线恢复和可识别的在线状态。	验证本地关机、断网、传输中断、重新连接和备份恢复；上线前确认实际网络与设备维护责任。

分期实施与原有流程

第一步保留当前轻量 Demo，只记录上述架构约定。第二步接入共享业务数据库与真实身份校验，使预约、审批和版本信息跨设备一致。第三步接通本地文件服务与流式中转，并验证离线提示、权限、文件完整性及备份恢复；实际业务依赖附件前完成这一步。

附件可用状态与审批状态分别记录。意向预约仍是可选起点，讲师无需在线点击确认；阿里小二可附线下沟通记录提交，管理人员也可直接安排。附件离线需明确提示，由人工核对后记录处理依据，不静默伪造“已查看附件”或改变既有审批结果。

已确认的是部署分工；具体本地电脑、连接方式、端口、后台实现和资源阈值仍待落地时核验。当前仍是浏览器本地演示，未接通文件电脑、共享数据库或真实鉴权。本次说明补充不改变首页、动效及现有业务交互。流式代理机制参考 Nginx 响应缓冲与上传请求缓冲官方说明。