智能西装服务店网页产品系统

1. 市场规模持续扩大：中国服装定制市场整体规模已在 2023 年突破 2600 亿元，预计 2025 年将超过 3000 亿元，年复合增长率保持在 15% 左右，定制已从"小众需求"变为大众消费选择。西装定制细分赛道 2021–2025 年复合增长率保持在 5%–8%，商务场景（会议、职场）与婚庆场景（约 68% 新郎选择定制西装）是两大核心驱动力。全球男装市场 2025 年约 6766 亿美元，预计 2026–2034 年复合增长率约 6.92%，正装是其中重要品类。
2. 智能化定制是增速最快的方向：智能定制西装市场规模 2025 年预计达 182.7 亿元，年复合增长率高达 28.3%；3D 量体设备渗透率预计 2025 年达 42.3%，且 92% 的服装企业将智能定制技术列为未来三年核心战略。
3. 本项目契合的行业痛点与趋势：行业正经历"互联网定制"转型：上门量体、线上预约、线上线下协作的混合模式正在侵蚀传统裁缝店份额；项目中的"预约量体 + 电话预约"正是这一 O2O 模式的典型落地。但线上定制存在信任短板——约 42% 的投诉集中在"实物与线上色差""面料手感不符预期"。这解释了项目为何强调面料溯源（意大利 VBC、英国多美）、工艺展示（68 道工序）和到店量体，本质上是在用内容透明化弥补线上体验的先天不足。

1. 商品浏览与检索：
分类导航/筛选：西装套装、单西外套、衬衫、西裤、配饰共 5 大分类 + 全部，顶部导航与目录页标签页双向同步
排序：默认 / 价格升序 / 价格降序
实时搜索：按名称、面料、款式关键词即时过滤，含空状态提示（"没有找到相符的西装…"）
2. 商品详情：
模态弹窗展示详情：分类、价格、描述、面料/版型规格参数
尺码选择（按品类给默认尺码，如衬衫 40/41/42、西裤腰围码）
数量步进器（加减按钮）
可选项："定制量体"到店复核提示
3. 购物袋（核心）
加入购物袋、抽屉式侧边栏展示（含遮罩层）
数量增减、移除单品、清空
实时合计金额与顶部角标计数
localStorage 持久化，刷新页面不丢数据
4. 交互与反馈
Toast 轻提示（加入成功/移除等操作反馈）
键盘 ESC 关闭弹窗与抽屉、点击遮罩关闭、aria-* 无障碍属性
滚动时头部导航效果、移动端汉堡菜单
5. 品牌与营销内容
Hero 首屏（品牌宣言 + 双 CTA）
工艺宣言区（面料/版型/工艺三栏，强化定制信任）
预约量体区（门店地址、电话、营业时间 + 一键拨号）
页脚（服务/关于导航、版权）
6. 视觉生成（特色）
所有商品图均由 JS 动态生成 SVG 服装插画：garmentSVG() 按品类（套装/单西/衬衫/西裤/领带/口袋巾/皮带/袖扣）绘制不同廓形，weavePattern() 生成对应织纹（羊毛格、牛津纺、真丝等），shade() 算法自动推导明暗色——即商品数据中的 color 十六进制值直接决定成衣视觉，无需任何图片资源。

技术栈：纯前端三件套（HTML5 + CSS3 + 原生 ES6 JavaScript），零框架、零构建工具、零外部依赖（仅引 Google Fonts 字体），双击 index.html 即可运行。
单一状态源：state = { category, query, sort, cart, modal… }，任何操作只改状态，再由 renderTabs() / renderGrid() / renderCart() 重渲染——典型的单向数据流思想，用原生 JS 实现了类似 React 的状态驱动模式。
过滤管道：filteredProducts() 按 分类 → 关键词 → 排序 三级管道处理 PRODUCTS，一处函数同时服务导航、标签页、搜索框和排序下拉框。
程序化视觉：衣服不是图片，而是 garmentSVG() 用 按廓形绘制，配合 shade(color, -30) 明暗推导和织纹图案叠加，实现"改一个颜色值就换一款面料"的数据驱动渲染。
购物车持久化：loadCart() / saveCart() 封装 localStorage（2 处调用），购物车项以 {id, size, qty} 存储；角标、合计均由纯函数 cartTotal() / cartCountValue() 计算。
主题与体验工程：CSS 变量定义整套"纸墨黄铜"高端配色（--ink/--paper/--brass）；clamp() 流式字号；backdrop-filter 毛玻璃抽屉；@media (560px/900px) 双断点适配移动端；prefers-reduced-motion 尊重系统减弱动画设置。