业务和功能介绍
一、立项背景与目标
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动态调整组件渲染策略，确保大屏体验最优。
示例图片视频
相似推荐
档案管理系统
图润档案管理系统是面向机关单位、工程项目、企事业单位打造的全生命周期数字化档案管理平台，覆盖文书档案、工程档案、拆迁档案、合同档案、影像资料、纸质扫描件等各类资料的标准化录入、分类归档、审核管理、权限管控、在线查阅、借阅审批、统计台账、安全备份等核心业务。
系统彻底替代传统纸质档案人工整理、手工登记、台账混乱、查找困难、归档不规范、资料易丢失、借阅无记录等管理痛点，实现档案数字化、归档标准化、流程规范化、权限精细化、管理智能化，满足单位日常档案管理、项目验收、审计检查、资料溯源等业务需求。
系统适配政府事业单位、工程项目部、企业行政部、工程部、综合办公室等多场景使用，完全贴合国家档案归档规范，支持自定义档案类目、自定义审批流程、自定义台账字段，适配各类专项档案管理业务。
AI知识图谱智教平台
平台包含新形态教材、线上与线下课程、章节知识点、教学资源库、知识图谱、学习路径、AI 问答、随堂测验、考试阅卷、学习任务、学情管理和数据看板等模块。教师可以建设教材与课程、上传多媒体资源、配置学习任务和试卷，并按班级或学员查看学习进度与测验结果；学员可以沿推荐路径学习课程、完成练习考试并获得基于课程知识库的智能答疑。平台还提供多角色权限、资源分类、证书、讨论热点及统计分析能力，形成从内容建设、教学实施到效果评估的完整闭环。
面向感知任务的大模型智能体记忆压缩优化系统‑AgentMemoryOpt-AgentMemoryOpt
本系统针对感知类智能Agent存在记忆上下文冗余、token消耗过高问题，设计记忆筛选与压缩算法。实现对Agent历史感知对话、环境观测记录做过滤、摘要压缩，减少大模型输入token开销。提供API接口，可对接各类感知Agent，完成多组对比实验，验证压缩后Agent任务效果损失可控，显著降低调用成本，可用于智能体原型开发与学术研究。
中债金科pc 端办公网站开发
1.为方便内部人员在线查看各部门问题及解决问题而开发 作用是在线提出部门遇到的问题，监测问题状态审批流转，显示不同角色登录查看问题提出或者解答及对问题答案是否认同的情况和对应的问题数据反显
2.提供可视化数据显示方案
Eleconet智能知识库系统-Eleconet
本系统是一个 RAG 智能知识库问答平台，包含八个功能模块。
用户认证模块支持用户名、邮箱或手机号注册登录，也支持短信验证码免密登录，修改密码和联系方式均需验证，会话采用 JWT Token。
知识库管理模块允许用户创建、编辑和删除知识库。文档上传支持多文件批量操作，后台异步完成解析和向量化。文件格式覆盖 TXT、PDF、Word、Excel、PPT，图片通过 OCR 提取文字，音视频通过 Whisper 转录。系统按 Free、Pro、Enterprise 三档套餐限制知识库数量、文档数和文件大小。
RAG 智能问答模块是系统核心。用户提问后，系统先语义检索知识库内容，再发送给大语言模型生成答案并附带引用来源。支持流式输出和多轮对话，历史对话可管理。
分享与访客模块允许高级用户生成限时分享链接，访客无需登录即可对知识库提问。
付费模块支持月付和年付，通过微信扫码或支付宝付款，自动确认支付并升级套餐，支持沙箱模拟支付。
知识库市场模块由管理员发布模板，用户可一键基于模板创建知识库。
系统管理模块赋予管理员用户管理、角色套餐修改、批量重置密码等权限。
系统配置模块供管理员配置 AI 模型、OCR、短信、支付渠道等参数，密钥脱敏展示。
后端 API 分为十组：/api/auth/ 为注册登录等九个认证接口；/api/kb/ 为知识库和文档管理七个接口；/api/chat/ 为问答和对话管理五个接口；/api/share/ 为分享链接四个接口；/api/guest/ 为访客免登录问答两个接口；/api/payment/ 为下单支付和配置八个接口；/api/kb-market/ 为模板管理五个接口；/api/settings/ 为系统配置十个接口；/api/admin/ 为用户管理五个接口；/api/stats/ 返回统计数据。
前端页面中，/login 为登录页，/pricing 为价格页，/guest 为访客问答页。登录后 / 为仪表盘，/knowledge-base 为知识库列表，/knowledge-base/:id 为知识库详情，/market 为模板市场，/chat 为问答对话页，/conversations 为对话列表，/profile 为个人资料，/payment 为支付页，/settings 和 /admin 为管理员专用页。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服