网站作品集与开发笔记https://studio.kamioj.tophttps://studio.kamioj.top/post/project/cura-companion-careproject/cura-companion-care广州医院陪护信息撮合平台双端原型，14 个高保真页面 · 锁价透明 · 同行推荐 · 一套代码同时编译微信小程序与 H5。Thu, 30 Apr 2026 15:50:00 GMT<h2>项目背景<a href="#项目背景"><span></span></a></h2> <p>医院陪护行业长期靠老护工带新护工的真实推荐网络运转，缺乏数字化撮合渠道；家属选护工时面对的是不透明价格、看不见的服务过程。Cura 把这层”同行推荐”网络数字化，做信息撮合的居间平台，为住院家庭提供锁定价格 + 实时交班日志的安心方案。</p> <h2>技术亮点<a href="#技术亮点"><span></span></a></h2> <ul> <li><strong>uni-app + Vue 3 + TS + Vite</strong>：一套代码同时编译微信小程序与 H5，差异仅在浏览器顶部栏与分享逻辑</li> <li><strong>完整双端 14 页面</strong>：病家端（首页 / 护工详情 / 三步下单 / 订单 / 交班日志 / 推荐落地）+ 护工端（认证 / 接单大厅 / GPS 签到 / 写日志 / 收益看板 / 推广中心）</li> <li><strong>设计系统中国化</strong>：医疗青 #1b9c8c + 中国红 #e84f4c + 同行金 #c89b5a，刻意避开西方 wellness 暖米调</li> <li><strong>零后端依赖</strong>：本地 mock 数据 + Promise 包装的 fake API，原型阶段所有交互都有反馈</li> <li><strong>Cloudflare Pages 部署 + 自定义域名 cura.kamioj.top</strong></li> </ul> <h2>我的角色<a href="#我的角色"><span></span></a></h2> <p>负责全栈：从 0-1 市场调研、PRD 撰写、Curt 高保真设计稿迭代、uni-app 工程搭建、14 页面实现、双端编译验证、Cloudflare 部署上线。</p> <p>后端、登录、支付、合同、GPS 等真实集成尚未接入，本作品聚焦”原型可演示”的完整闭环。</p>category:作品集tag:uni-apptag:Vue 3tag:TypeScripttag:双端编译tag:医疗陪护tag:AI 协作https://studio.kamioj.top/post/project/danzhihuiyan-uiproject/danzhihuiyan-uiAI 驱动的智能眼镜推荐平台，上传自拍自动识别脸型，结合度数与风格偏好给出个性化推荐，支持虚拟试戴效果演示。Sat, 25 Apr 2026 12:00:00 GMT<blockquote> <p>在线体验：<a href="https://danzhihuiyan-ui.vercel.app">https://danzhihuiyan-ui.vercel.app</a> 为方便展示，当前为纯前端 Mock 数据版，无需等待后端启动，点开即用。</p> </blockquote> <h2>项目背景：为什么做这个？<a href="#项目背景为什么做这个"><span></span></a></h2> <p>买眼镜这件事，一直是个让人头疼的痛点。在线下店挑选，面对满墙的镜框容易挑花眼，还常常伴随着销售的”贴身跟随”；选择在线上下单，又往往只能对着模特图”盲猜”是否适合自己的脸型，最后沦为买家秀与卖家秀的惨烈对比。</p> <p>基于这个痛点，我开发了**「丹智慧眼」**。</p> <p>这是一款结合 AI 脸型识别的眼镜电商应用。核心思路很明确：用户只需上传一张自拍，系统就会通过 AI 分析出其面部轮廓特征，再结合用户填写的近视度数和日常风格偏好，精准匹配并推荐最适合的镜框，同时提供一套完整的电商购买链路。</p> <figure><img src="/img/projects/danzhihuiyan-home.png" alt="首页截图" loading="lazy" /><figcaption>首页截图</figcaption></figure> <p>在当前版本中，系统支持 <strong>6 种</strong>核心脸型的精确分析，内置了 <strong>500+</strong> 款精选镜框数据，单次面部特征提取与推荐分析的平均耗时控制在 <strong>10 秒</strong>以内。</p> <h2>核心业务模块<a href="#核心业务模块"><span></span></a></h2> <h3>一、AI 试戴与个性化推荐（核心链路）<a href="#一ai-试戴与个性化推荐核心链路"><span></span></a></h3> <p>这是整个项目最具挑战、也是打磨最久的模块。用户进入该模块后，只需三步：</p> <ol> <li><strong>图像采集</strong>：支持实时调用摄像头或从相册上传，兼容 JPG/PNG 格式</li> <li><strong>偏好设定</strong>：提供分段控制器，可勾选商务/时尚/复古等风格，并可选填度数来过滤不合适的镜框</li> <li><strong>分析与推荐</strong>：点击确认后屏幕出现科技感扫描光效，配合进度条缓慢推进，结果揭晓时下方顺滑展开匹配度最高的眼镜卡片</li> </ol> <figure><img src="/img/projects/danzhihuiyan-ai.png" alt="AI 试戴页面" loading="lazy" /><figcaption>AI 试戴页面</figcaption></figure> <p>底层真实接入了 HuggingFace 的 <code>metadome/face_shape_classification</code> 模型（基于 ViT 架构）。为防止网络波动或 CPU 推理过慢导致页面卡死，这里做了一层优雅降级——推理超时或失败时，系统会自动平滑切换为兜底推荐策略，保证主流程不被阻断。</p> <h3>二、电商商城闭环<a href="#二电商商城闭环"><span></span></a></h3> <p>商城大厅支持基于「脸型、风格、分类、价格区间」的多维交叉筛选，展示品牌、评分、销量。从商品列表浏览、点击详情查看图文，到加购、修改数量、结算、下单、支付及确认收货，一整套业务状态流转顺滑跑通。</p> <h3>三、个人中心与数据沉淀<a href="#三个人中心与数据沉淀"><span></span></a></h3> <ul> <li><strong>试戴档案</strong>：记录每次 AI 分析结果，包括推荐款式与匹配度得分，方便随时回溯</li> <li><strong>动态偏好</strong>：收藏行为和手动设置的风格偏好会直接影响后续商城列表与推荐权重排序</li> </ul> <h3>四、数据看板（管理后台）<a href="#四数据看板管理后台"><span></span></a></h3> <p>轻量级 Admin 后台，除基础的商品上下架和订单状态管理外，利用 ECharts 引入数据可视化，直观呈现全站用户的「脸型分布饼图」与「试戴活跃度折线图」。</p> <h2>技术实现思路<a href="#技术实现思路"><span></span></a></h2> <p>在这个项目中，技术选型保持了一定的克制，没有盲目堆砌庞大框架，更看重基础功底和交互细节。</p> <p><strong>前端</strong></p> <ul> <li>放弃 Vue/React，采用纯 Vanilla JS（ES6+）构建，手写全部组件化逻辑、页面路由分发与全局状态管理</li> <li>借助 Tailwind CSS 复刻 iOS 17 设计语言：毛玻璃卡片、Sheet 底部弹层、分段控制器</li> <li>Particles.js 粒子背景 + ECharts 数据可视化，整体 UI 偏向轻盈通透</li> </ul> <p><strong>服务端</strong>（完整版架构，当前展示为 Mock）</p> <ul> <li>Flask 蓝图架构，划分认证、商品、订单、AI 等 7 个独立业务模块</li> <li>Flask-JWT-Extended 无状态权限校验，SQLite + Flask-SQLAlchemy，支持首次部署自动初始化</li> </ul> <h2>演示环境说明<a href="#演示环境说明"><span></span></a></h2> <p>当前访问的链接是专门打包的纯前端 Mock 版本，所有数据已在 <code>js/api.js</code> 中本地化处理。</p> <ul> <li><strong>免注册体验</strong>：打开自动以 <code>demo</code> 身份登录，随意输入账号密码即可，验证逻辑已绕过</li> <li><strong>AI 结果固定</strong>：Mock 版 AI 分析固定返回「鹅蛋形」及对应推荐，保证演示流畅度</li> <li><strong>状态重置</strong>：购物车与订单在当前 Session 内有效，刷新即恢复初始状态，可毫无顾忌体验全流程</li> </ul> <h2>总结<a href="#总结"><span></span></a></h2> <p>开发「丹智慧眼」最大的收获跳出了纯代码的范畴。</p> <p>相比跑通复杂的电商支付逻辑，我花了更多心思推敲”等待 AI 识别”那 10 秒钟的用户心理——如何用扫描动画缓解焦躁、如何用柔和的文案解释脸型特征。这让我深刻体会到，优秀的技术最终还是要服务于产品体验的。</p> <p>如果对项目中的某个组件实现或业务逻辑感兴趣，可以通过作品集上的联系方式找到我，期待与您的交流 </p>category:作品集tag:AItag:眼镜推荐tag:脸型识别tag:虚拟试戴https://studio.kamioj.top/post/project/example-saas-dashboardproject/example-saas-dashboard一套面向中小企业的 SaaS 后台管理系统，含权限、数据可视化、表单引擎等模块。Sat, 01 Nov 2025 02:00:00 GMT<blockquote> <p>占位作品示例 —— 用户后续替换为真实案例。</p> </blockquote> <h2>项目背景<a href="#项目背景"><span></span></a></h2> <p>为某行业客户搭建的 SaaS 后台，承载日常业务运营、数据分析与权限管理。重点解决了大规模表单与数据列表的渲染性能问题。</p> <h2>技术亮点<a href="#技术亮点"><span></span></a></h2> <ul> <li>基于 Vue 3 Composition API + TypeScript 严格模式，组件复用率高</li> <li>自研表单引擎，配置式生成复杂表单，节省 60% 业务侧开发量</li> <li>列表虚拟滚动 + 服务端分页，支持万级数据无卡顿</li> <li>接入 ECharts 做实时数据看板</li> </ul> <h2>我的角色<a href="#我的角色"><span></span></a></h2> <p>负责整体前端架构设计、核心模块开发、性能优化。</p> <h2>项目状态<a href="#项目状态"><span></span></a></h2> <p>已交付并稳定运行。</p>category:作品集tag:Vue3tag:TypeScripttag:Element Plustag:Piniahttps://studio.kamioj.top/post/project/example-corporate-siteproject/example-corporate-site高端制造业企业的品牌官网，注重视觉表现力与 SEO 收录效果。Fri, 15 Aug 2025 02:00:00 GMT<blockquote> <p>占位作品示例 —— 用户后续替换为真实案例。</p> </blockquote> <h2>项目背景<a href="#项目背景"><span></span></a></h2> <p>为某制造业客户重做品牌官网，从纯展示型升级为带产品库、解决方案、案例中心的内容站，需兼顾视觉冲击与搜索引擎收录。</p> <h2>技术亮点<a href="#技术亮点"><span></span></a></h2> <ul> <li>Next.js App Router + 静态导出，配合 CDN 实现全球访问 &lt; 1s 首屏</li> <li>使用 Framer Motion 设计入场动画，关键页面转化率提升 30%</li> <li>结构化数据 + sitemap + 多语言 hreflang，半年内核心关键词 SEO 排名进入前 3</li> </ul> <h2>我的角色<a href="#我的角色"><span></span></a></h2> <p>负责前端开发、动效设计、SEO 落地。</p>category:作品集tag:Next.jstag:Tailwind CSStag:Framer Motiontag:SEOhttps://studio.kamioj.top/post/project/example-ecommerce-h5project/example-ecommerce-h5双 11 大促活动落地 H5，强动效 + 强埋点，活动期间 PV 超百万。Tue, 20 May 2025 02:00:00 GMT<blockquote> <p>占位作品示例 —— 用户后续替换为真实案例。</p> </blockquote> <h2>项目背景<a href="#项目背景"><span></span></a></h2> <p>电商客户大促活动 H5 页面，要求在 4 周内交付，承载主会场 → 分会场 → 商详的完整链路。</p> <h2>技术亮点<a href="#技术亮点"><span></span></a></h2> <ul> <li>用 GSAP 做滚动联动动画，弱网下也能 60fps</li> <li>图片懒加载 + WebP + 占位骨架屏，首屏 LCP &lt; 2.5s</li> <li>全埋点 + AB 实验框架，支持运营在线热更新文案与样式</li> </ul> <h2>我的角色<a href="#我的角色"><span></span></a></h2> <p>负责整体动效设计与开发、性能优化、运营接入。</p>category:作品集tag:H5tag:GSAPtag:动效设计tag:性能优化