业务和功能介绍
一、立项背景与目标
1、背景：为深化新零售战略，荣耀推出“星耀商城”，旨在构建独立于传统渠道的精选平台。项目不仅销售荣耀全场景产品，未来还将引入第三方智能设备，丰富“1+8+N”生态。同时，需满足用户消费升级需求，提供沉浸式购物体验，并探索AI智能体、分布式能力等技术在购物场景的应用。
目标：打造极致用户体验，确保多设备（手机、平板、折叠屏等）体验一致且流畅；构建模块化、可扩展的前端架构，支持未来功能迭代；实现购物全流程闭环，并通过数据分析驱动运营优化；探索与YOYO智能体、服务卡片等系统能力的深度整合，提升用户粘性与转化率。
二、软件功能与核心模块
项目采用Vue 3、TypeScript等现代技术栈，遵循移动优先设计原则，核心模块如下：
首页模块：作为流量入口，包含动态Banner轮播（展示营销活动）、金刚区导航（快速直达分类）、瀑布流商品推荐（个性化+懒加载）及可配置活动楼层。
商品列表与搜索模块：提供智能搜索（支持历史记录与热门推荐）、多维筛选（价格、品牌、属性等）及统一商品卡片展示。
商品详情模块：全面展示商品信息，含多图轮播/3D预览、规格选择器（价格实时联动）、促销信息区及底部操作栏（加购、立即购买）。
购物车模块：管理意向商品，支持单选/全选、数量调整、实时价格计算、失效商品处理，并通过Pinia实现数据持久化与跨设备同步。
订单与支付模块：处理结算流程，含订单确认页（汇总商品、地址、金额）、多支付方式集成（华为支付、支付宝等）及支付结果反馈。
个人中心模块：管理用户信息，包含我的订单（状态分类、售后申请）、地址管理、我的收藏及优惠券/资产查看。
三、业务流程与功能路径
核心购物流程：用户通过首页或搜索进入商品列表→选择商品进入详情页→加入购物车→在购物车结算→提交订单并支付→在个人中心追踪订单或申请售后。
特色功能路径：折叠屏设备支持分屏比价，可一键分屏对比本平台与第三方同款商品；服务卡片支持将“每日特价”“订单状态”等功能添加至桌面，点击直达应用内对应页面；跨设备流转通过鸿蒙分布式能力，实现手机加入购物车后，平板或智慧屏继续结算的无缝体验。
1、背景：为深化新零售战略，荣耀推出“星耀商城”，旨在构建独立于传统渠道的精选平台。项目不仅销售荣耀全场景产品，未来还将引入第三方智能设备，丰富“1+8+N”生态。同时，需满足用户消费升级需求，提供沉浸式购物体验，并探索AI智能体、分布式能力等技术在购物场景的应用。
目标：打造极致用户体验，确保多设备（手机、平板、折叠屏等）体验一致且流畅；构建模块化、可扩展的前端架构，支持未来功能迭代；实现购物全流程闭环，并通过数据分析驱动运营优化；探索与YOYO智能体、服务卡片等系统能力的深度整合，提升用户粘性与转化率。
二、软件功能与核心模块
项目采用Vue 3、TypeScript等现代技术栈，遵循移动优先设计原则，核心模块如下：
首页模块：作为流量入口，包含动态Banner轮播（展示营销活动）、金刚区导航（快速直达分类）、瀑布流商品推荐（个性化+懒加载）及可配置活动楼层。
商品列表与搜索模块：提供智能搜索（支持历史记录与热门推荐）、多维筛选（价格、品牌、属性等）及统一商品卡片展示。
商品详情模块：全面展示商品信息，含多图轮播/3D预览、规格选择器（价格实时联动）、促销信息区及底部操作栏（加购、立即购买）。
购物车模块：管理意向商品，支持单选/全选、数量调整、实时价格计算、失效商品处理，并通过Pinia实现数据持久化与跨设备同步。
订单与支付模块：处理结算流程，含订单确认页（汇总商品、地址、金额）、多支付方式集成（华为支付、支付宝等）及支付结果反馈。
个人中心模块：管理用户信息，包含我的订单（状态分类、售后申请）、地址管理、我的收藏及优惠券/资产查看。
三、业务流程与功能路径
核心购物流程：用户通过首页或搜索进入商品列表→选择商品进入详情页→加入购物车→在购物车结算→提交订单并支付→在个人中心追踪订单或申请售后。
特色功能路径：折叠屏设备支持分屏比价，可一键分屏对比本平台与第三方同款商品；服务卡片支持将“每日特价”“订单状态”等功能添加至桌面，点击直达应用内对应页面；跨设备流转通过鸿蒙分布式能力，实现手机加入购物车后，平板或智慧屏继续结算的无缝体验。
项目实现
一、整体架构和设计思路
本项目采用前后端分离的微前端架构，旨在实现技术栈解耦与团队并行开发。整体架构分为四层：UI框架层（Vue3）、应用层（业务逻辑编排）、领域层（纯业务规则）和基础设施层（API调用）。核心设计思路遵循“移动优先”与“组件化”原则，利用Vite作为构建工具，通过Qiankun框架将商品、购物车、用户中心等模块拆分为独立子应用，确保各模块可独立开发、测试与部署。状态管理选用Pinia，网络请求封装基于Axios，UI组件库采用uni-ui，以保障开发效率与一致性。
二、负责模块与结果
我主要负责商品详情与购物车模块的前端开发。
商品详情页：实现了图片轮播、规格选择器（颜色/内存）与价格实时联动、数量增减及加入购物车功能。通过IntersectionObserver实现图片懒加载，首屏加载时间从6秒优化至1.8秒，提升30%。
购物车模块：完成商品列表展示、单选/全选、数量调整、实时总价计算及失效商品处理。利用Pinia实现状态持久化，确保数据刷新不丢失。编写15个自动化测试用例，覆盖核心流程85%。
性能优化：通过CSS Grid布局重构商品列表，减少30%的DOM操作；使用React Hooks优化组件渲染，性能提升20%。最终模块上线后，用户停留时长增加18%，转化率提升12%。
三、难点与解决方案
跨端兼容性难题：在H5、小程序与APP端，rpx单位渲染差异导致布局错位。解决方案：采用条件编译（#ifdef）针对不同平台编写特定样式，并统一使用vp（虚拟像素）单位，确保多端视觉一致。
状态管理复杂性：购物车商品数量、选中状态与总价计算逻辑耦合，易引发状态不同步。解决方案：引入Pinia模块化状态管理，将购物车逻辑封装为独立Store，通过Action统一操作，确保状态变更可预测。
折叠屏适配挑战：折叠屏展开后，商品列表需从两列变为四列，传统媒体查询难以精准控制。解决方案：结合CSS Grid与Flexbox，通过min-width媒体查询实现响应式布局，并利用设备信息API动态调整组件渲染策略，确保大屏体验最优。
本项目采用前后端分离的微前端架构，旨在实现技术栈解耦与团队并行开发。整体架构分为四层：UI框架层（Vue3）、应用层（业务逻辑编排）、领域层（纯业务规则）和基础设施层（API调用）。核心设计思路遵循“移动优先”与“组件化”原则，利用Vite作为构建工具，通过Qiankun框架将商品、购物车、用户中心等模块拆分为独立子应用，确保各模块可独立开发、测试与部署。状态管理选用Pinia，网络请求封装基于Axios，UI组件库采用uni-ui，以保障开发效率与一致性。
二、负责模块与结果
我主要负责商品详情与购物车模块的前端开发。
商品详情页：实现了图片轮播、规格选择器（颜色/内存）与价格实时联动、数量增减及加入购物车功能。通过IntersectionObserver实现图片懒加载，首屏加载时间从6秒优化至1.8秒，提升30%。
购物车模块：完成商品列表展示、单选/全选、数量调整、实时总价计算及失效商品处理。利用Pinia实现状态持久化，确保数据刷新不丢失。编写15个自动化测试用例，覆盖核心流程85%。
性能优化：通过CSS Grid布局重构商品列表，减少30%的DOM操作；使用React Hooks优化组件渲染，性能提升20%。最终模块上线后，用户停留时长增加18%，转化率提升12%。
三、难点与解决方案
跨端兼容性难题：在H5、小程序与APP端，rpx单位渲染差异导致布局错位。解决方案：采用条件编译（#ifdef）针对不同平台编写特定样式，并统一使用vp（虚拟像素）单位，确保多端视觉一致。
状态管理复杂性：购物车商品数量、选中状态与总价计算逻辑耦合，易引发状态不同步。解决方案：引入Pinia模块化状态管理，将购物车逻辑封装为独立Store，通过Action统一操作，确保状态变更可预测。
折叠屏适配挑战：折叠屏展开后，商品列表需从两列变为四列，传统媒体查询难以精准控制。解决方案：结合CSS Grid与Flexbox，通过min-width媒体查询实现响应式布局，并利用设备信息API动态调整组件渲染策略，确保大屏体验最优。
示例图片视频
相似推荐
同城清算
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
暂无功能介绍
女性健康管理与社区服务 App-美柚
美柚 App 是面向女性用户的健康管理与社区服务平台，覆盖经期记录、备孕、孕期、育儿、健康内容、社区互动等核心场景。产品通过周期记录、健康提醒、内容推荐、工具服务和社区交流，帮助用户在不同人生阶段进行健康管理和经验获取。同时，App 内部承载首页、日历、社区详情、孕期工具、会员订阅、商业化广告等多个业务模块，支撑用户日常高频使用和多场景业务转化。
Mloos平台-Mlops平台
MLOps: AI推理平台的构建与开发；主要工作是基于Volcano构建NPU训推一体能力，构建大模型部署Operator，开发与维护统一的AI推理框架与模型相关监控等，提高算法人员的部署、升级与维护效率；推理流量每月4000亿左右，NPU卡总规模5w
AI智能客服与大模型应用
基于飞致云 MaxKB 知识库问答系统作为底座，快速完善企业在线智能客服的 AI 助手能力。主要负责 MaxKB 的二次配置、知识库构建、RAG 链路调优、多渠道接入及效果评测。
1.底座集成：部署并配置 MaxKB 开源版本，将其作为智能客服的核心引擎。利用其内置的模型管理、知识库管理和 RAG 流水线能力，大幅缩短开发周期。
2.知识库构建：梳理 10 万+ 条历史客服对话记录，完成清洗、分类与结构化处理，导入 MaxKB 知识库。通过文档分段、QA 对提取等方式提升知识召回率。
3.RAG 检索优化：在 MaxKB 原生 RAG 流程基础上，调整检索参数（Top-K、相似度阈值），并增加重排序（Rerank）环节。并基于 MaxKB 支持的模型接入能力，选用 Qwen3系列模型。利用收集的领域数据，通过 LoRA 方法进行轻量化微调，并集成回 MaxKB 底座。微调后客服场景回答准确率达 92%，幻觉率降至 5% 以下。通过 MaxKB 提供的 API 接口，实现与企业微信、App、Web 端等多渠道的无缝对接。开发简单的消息适配层，完成会话管理、上下文关联等基础功能。
景区导航数字人ai-scenic-ai-guide
1、立项背景和目标
本项目是一款AI智能景区导游助手Web应用，覆盖全国358家5A级旅游景区。立项背景有三：一是国内旅游市场复苏后，游客对景区智能化导览服务需求激增，但现有方案以语音导览机为主，缺乏交互性与个性化；二是大语言模型成熟后，AI对话式导览成为可能，可替代传统静态语音讲解；三是多模态交互（文字/语音/图片）可降低中老年用户使用门槛。目标是打造一款面向C端的、具备商业化落地能力的智能导览产品，支持景区知识问答、路线规划、虚拟数字人陪伴讲解等核心场景。
2、软件功能、核心功能模块
应用包含八大核心功能模块：
AI对话系统：基于SSE流式协议实现实时对话与打字机效果，支持多轮会话管理（conversationId缓存），网络异常时自动降级至HTTP JSON或Mock模式；
语音交互系统：双路径设计——首选浏览器Web Speech API实现零延迟语音识别，降级方案使用Web Audio API手动编码WAV（16kHz/单声道/16bit PCM）传输至后端ASR+TTS，语音播报支持多音色切换；
Live2D数字人系统：基于PixiJS + Live2D Cubism 4集成3D动画角色，支持点击交互与口型同步。设计三层降级策略：Live2D模型 → CSS纯绘角色（含口型/眨眼动画）→ 加载中状态，确保弱网环境可用；
景区数据体系：构建358家5A景区结构化数据（含省份/城市/标签/坐标），支持名称、省份、城市、标签多维搜索，按省份分组卡片网格渲染；
管理后台数据大屏：基于ECharts实现服务人次趋势、热门问答TOP5、满意度走势、问答分类分布等核心指标可视化，按需引入优化打包体积；
路由与权限系统：完整路由守卫（未登录自动跳转/login），localStorage存储登录态，区分C端用户与管理员视图；
多模态输入：文字/语音/图片三通道输入，图片上传目前走Mock AI回复，预留多模态API接入接口；
地图与路线规划：基于Leaflet集成地图视图，支持景区位置标记与游览路线添加。
3、业务流程、功能路径描述
用户访问 → 登录页（模拟登录）→ 景区选择页（卡片网格+搜索+省份筛选）→ 选择景区进入主界面（底部Tab：对话/地图/功能区/个人中心）→ 对话页：文字输入/语音输入/图片上传 → AI流式回复 + TTS语音播报 + Live2D口型同步 → 支持多轮对话（同一景区上下文连续）→ 切换景区自动重置会话 → 管理员登录后进入管理后台 → 查看数据大屏/知识库管理/数字人配置/舆情分析。未登录状态访问任何页面自动跳转登录页。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服