https://hhsqdw.github.io/tags/react/Recent content in React on Leo's BlogHugozh-CNMon, 21 Apr 2025 00:00:00 +0000https://hhsqdw.github.io/project/new-api/Mon, 21 Apr 2025 00:00:00 +0000https://hhsqdw.github.io/project/new-api/<h2 id="项目概述">项目概述 <a href="#%e9%a1%b9%e7%9b%ae%e6%a6%82%e8%bf%b0"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h2> <p><strong>New API</strong> 是一个企业级的 LLM API 网关与资产管理系统。该项目通过统一的接口聚合了全球 40+ 家主流 AI 服务商（包括 OpenAI、Claude、Google Gemini、Azure、AWS Bedrock 等），为企业和开发者提供一站式的 AI 能力接入方案。</p> <p>作为 <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener">One API</a> 的增强版分支，New API 在保持完全数据兼容的基础上，新增了大量企业级功能，包括智能路由、格式转换、多租户管理、支付计费系统等。</p> <hr> <h2 id="核心功能">核心功能 <a href="#%e6%a0%b8%e5%bf%83%e5%8a%9f%e8%83%bd"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h2> <h3 id="-多提供商聚合">🌐 多提供商聚合 <a href="#-%e5%a4%9a%e6%8f%90%e4%be%9b%e5%95%86%e8%81%9a%e5%90%88"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <p>支持 <strong>40+</strong> 家 AI 服务商，覆盖主流 LLM、图像生成、音频处理等能力：</p>https://hhsqdw.github.io/project/yszd/Mon, 20 Jan 2025 00:00:00 +0000https://hhsqdw.github.io/project/yszd/<h2 id="项目概述">项目概述 <a href="#%e9%a1%b9%e7%9b%ae%e6%a6%82%e8%bf%b0"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h2> <p>云商智搭是一个融合了 <strong>Spring AI</strong> 技术的智能电商平台，通过对话式 AI 助手为用户提供全新的购物体验。系统采用前后端分离架构，后端基于 Spring Boot 3.2 + Spring AI，前端采用 React 18 + TypeScript + Vite，实现了商品浏览、购物车、订单管理、收藏功能等核心电商功能，并创新性地集成了 AI 智能购物助手。</p> <hr> <h2 id="核心亮点">核心亮点 <a href="#%e6%a0%b8%e5%bf%83%e4%ba%ae%e7%82%b9"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h2> <h3 id="-ai-智能购物助手">🤖 AI 智能购物助手 <a href="#-ai-%e6%99%ba%e8%83%bd%e8%b4%ad%e7%89%a9%e5%8a%a9%e6%89%8b"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <ul> <li><strong>对话式购物</strong>：用户可通过自然语言与 AI 助手交互，实现商品搜索、加购、查询等操作</li> <li><strong>智能搭配推荐</strong>：AI 自动为用户推荐上下装组合，一键加购</li> <li><strong>智能搜索优化</strong>：支持模糊关键词识别（如&quot;裤子&quot;自动匹配&quot;西裤&quot;、&ldquo;牛仔裤&rdquo;）</li> <li><strong>多轮对话记忆</strong>：基于 ChatMemory 实现会话上下文记忆</li> <li><strong>流式响应</strong>：支持 SSE 流式输出，提供更流畅的交互体验</li> </ul> <h3 id="-完整电商功能">🛒 完整电商功能 <a href="#-%e5%ae%8c%e6%95%b4%e7%94%b5%e5%95%86%e5%8a%9f%e8%83%bd"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <ul> <li><strong>商品管理</strong>：商品列表、详情展示、分类筛选、价格排序</li> <li><strong>购物车系统</strong>：支持商品添加、数量调整、实时价格计算</li> <li><strong>订单流程</strong>：下单、支付、订单历史查询</li> <li><strong>收藏功能</strong>：商品收藏与管理</li> <li><strong>用户认证</strong>：基于 Context 的用户身份管理</li> </ul> <h3 id="-现代化界面">🎨 现代化界面 <a href="#-%e7%8e%b0%e4%bb%a3%e5%8c%96%e7%95%8c%e9%9d%a2"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <ul> <li><strong>响应式设计</strong>：完美适配桌面和移动端</li> <li><strong>流畅动画</strong>：使用 Framer Motion 实现优雅的页面过渡效果</li> <li><strong>组件化开发</strong>：高复用性的 React 组件架构</li> </ul> <hr> <h2 id="技术栈">技术栈 <a href="#%e6%8a%80%e6%9c%af%e6%a0%88"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h2> <h3 id="前端技术">前端技术 <a href="#%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <table> <thead> <tr> <th>技术</th> <th>版本</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td><strong>React</strong></td> <td>18.2</td> <td>UI 框架</td> </tr> <tr> <td><strong>TypeScript</strong></td> <td>5.2</td> <td>类型安全</td> </tr> <tr> <td><strong>Vite</strong></td> <td>5.1</td> <td>构建工具</td> </tr> <tr> <td><strong>Tailwind CSS</strong></td> <td>3.4</td> <td>样式框架</td> </tr> <tr> <td><strong>React Router</strong></td> <td>6.22</td> <td>路由管理</td> </tr> <tr> <td><strong>Framer Motion</strong></td> <td>11.0</td> <td>动画效果</td> </tr> <tr> <td><strong>Lucide React</strong></td> <td>0.344</td> <td>图标库</td> </tr> </tbody> </table> <h3 id="后端技术">后端技术 <a href="#%e5%90%8e%e7%ab%af%e6%8a%80%e6%9c%af"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <table> <thead> <tr> <th>技术</th> <th>版本</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td><strong>Spring Boot</strong></td> <td>3.2.3</td> <td>应用框架</td> </tr> <tr> <td><strong>Spring AI</strong></td> <td>1.0.0-M6</td> <td>AI 集成框架</td> </tr> <tr> <td><strong>Spring Data JPA</strong></td> <td>-</td> <td>ORM 框架</td> </tr> <tr> <td><strong>MySQL</strong></td> <td>8.0</td> <td>数据库</td> </tr> <tr> <td><strong>Java</strong></td> <td>17</td> <td>开发语言</td> </tr> <tr> <td><strong>Lombok</strong></td> <td>-</td> <td>减少样板代码</td> </tr> </tbody> </table> <hr> <h2 id="ai-功能详解">AI 功能详解 <a href="#ai-%e5%8a%9f%e8%83%bd%e8%af%a6%e8%a7%a3"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h2> <h3 id="1-智能商品搜索">1. 智能商品搜索 <a href="#1-%e6%99%ba%e8%83%bd%e5%95%86%e5%93%81%e6%90%9c%e7%b4%a2"><svg class="anchor-symbol" aria-hidden="true" height="26" width="26" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="currentColor"></path> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path> </svg></a> </h3> <p>AI 助手能够理解用户的自然语言查询，自动优化搜索关键词：</p>