React

前端链接: https://github.com/zhutoutoutousan/chat-voting-chaos-chess 后端链接: https://github.com/zhutoutoutousan/chat-voting-chaos-chess-platform 项目描述: 开发了一个创新的在线用户投票混乱效果的国际象棋对战平台，融合了传统国际象棋规则与随机事件机制，为玩家提供独特的游戏体验。 技术栈: ● 前端: Next.js, TypeScript, TailwindCSS, Framer Motion, react-three-fiber ● 后端: NestJS, TypeORM, PostgreSQL, Supabase ● 实时通信: WebSocket, Supabase Realtime ● 认证: Clerk Authentication ● 部署: Vercel 核心功能与技术难点: ● 实时对战系统, 混乱象棋的后端管理 ● 实现了基于WebSocket的实时游戏状态同步 ● 设计了可扩展的游戏房间管理系统 ● 使用Supabase实现了实时数据更新和状态广播 创新玩法设计 ● 开发了独特的随机事件系统，包括棋子升级、复制等特殊效果 ● 实现了实时投票机制，让玩家参与决定下一个随机事件 ● 设计了AI对战功能，提供单人游戏模式 用户体验优化 ● 使用Framer Motion实现流畅的动画效果 ● 实现了响应式设计，支持多设备访问 ● 添加了实时聊天功能，增强社交互动 项目难点解决: 1. 解决了复杂的游戏状态同步问题，确保多人对战的一致性 优化了WebSocket连接管理，提高了系统稳定性 3. 实现了优雅的错误处理和断线重连机制 项目成果: ● 支持多人同时在线对战 ● 平均响应时间低于100ms ● 用户留存率提升30% ● 获得积极的用户反馈，特别是对创新玩法的认可 这个项目展示了我的全栈开发能力，特别是在实时系统、游戏开发和用户体验设计方面的专业技能。

1、本项目是针对市、区、县、的智慧路测停车收费 2、项目分类：管理端、uni-app 开发的小程序、H5扫码支付 3、项目根据不同甲方的需求使用不同的技术框架。 4、项目解决了各个地方的收费、计费、追缴、统计的功能

1、根据产品需求，使用VUE3框架来完成项目的开发； 2、负责项目的搭建，联调，页面的展示以及组件的封装； 3、与后台合作，实现产品的交互流程，提升产品的兼容性和易用性； 4、使用若依框架VUE+TS进行书写代码 5、使用Pinia,VUEX等状态管理器； 6、 封装可复用组件，提高工作开发效率和方便维护

项目二: 芯赛云C端平台 (http://223.4.250.252) (仅前端静态页面) 项目二: 芯赛云企业O端管理平台 项目描述: 芯赛云C端主要提供云计算服务,包括不限于计算,存储,网络,安全,数据库等多个方面,基本对照阿里云,腾讯云开发的平台.企业O端管理平台,提供可视化拖拽配置C端用的套餐,表单,流程图,BI监控报表等 主要功能: 1云服器,裸金属,硬盘,弹性ip,私有网络,对象存储,cdn,数据库,容器云,ai的组合购买及独立产品的相关操作 2订单,账单,余额,账户的管理 3用户组,用户,企业管理和产品的权限策略控制 4不同产品的优惠活动及价格计算器和机器的实时云监控 5云产品文档和OpenAPI文档说明 6 O端提供控制台产品所有的基础配置参数和产品终端控制权 7 O端能可视化拖拽生成产品的套餐,内部使用的表单和审批的流程图,整体资源监控通过BI大屏统计 主要技术: 1 C端基于vue3构建,通过qiankun控制主子项目的独立打包部署和通信 2 C端整体使用vite,vue-router4,vue3,pinia,andt vue等工具搭建 3 C端基于antd vue定制了@sincerecloud/sc-ui组件库,调整了其样式,添加了新的api,通过npm发布 4 O端基于react构建,子项目大多数使用react hook、react-router、redux搭建 5 O端基于eCharts定制了可视化BI报表和云监控 6 O端相关属性配置采用了可视化配置如套餐,活动,定价,表单,流程图等 7基于lodash定制了@sincerecloud/sc-utils工具库,包括日常常用的方法集合 8项目建立了ws链接实现产品状态实时更新,通过主项目下发 9使用vitepress实现常用的云产品文档和OpenAPI文档说明

项目一: mes系统和移动端 (http://223.4.250.252/industry) (http://223.4.250.252/apk) (仅前端静态页面) 项目描述: mes系统主要运用在电机电器行业,为不同的工厂/车间进行mes系统的定制且提供对应移动端app/工位机的支持 主要功能和技术: 1 整体功能包括工厂建模/生产计划/库存控制/设备运维/质量管理/人员管理等等 2 整个项目通过部门角色进行权限按钮的授权 3 项目基于react构建,通过router进行单页面跳转,通过redux进行数据存储 4 样式基于antd定制化了表单和表格等组件 5 使用react native配合React Native Elements/NativeBase进行移动端支持

1、本项目是一个专为程序员打造的学习型项目，其核心目标是助力程序员快速上手 React 开发，开启入门之旅。 2、项目运用了 React 全家桶技术栈，能让开发者全面体验 React 生态的强大功能。后端则采用 PHP 的 CI 框架来开发接口，该框架轻量级且高效，为项目提供稳定的数据交互支持。 3、开发者只需下载源码，简单配置访问域名，就能轻松启动项目，开启 React 开发的学习与实践。

http://quantum.cqapps.net/ http://quantum.cqapps.net/http://quantum.cqapps.net/http://quantum.cqapps.net/

lingolet翻译系统主要针对美国市场翻译需求。 主要包括视频翻译、语音翻译、同声传译、文档翻译等模块。 针对市场：美国非英语区养老院，医院，学校以及餐馆等场所。 整个系统由PC端、安卓端、iOS端、硬件系统、H5端组成，所有前端部分都由本人完成

该项目面向会员和普通用户开放。其中普通会员可查看免费和体验课程和会员可查看所有课程。本app有课程信息，会员系统等核心功能组成，技术选型为react native技术为主的app（Android、ios）及antd为主的后台管理系统。

1. 该项目面向会员和普通用户开放。其中普通会员可查看福布斯精选和会员专访资讯。若参加活动需成为会员并线上报名参加活动。方便快捷的参加活动并核销，第一时间了解最新资讯。 2. 本小程序有资讯信息，会员系统，活动报名核销等核心功能组成，技术选型为react技术为主的微信小程序及antd为主的后台管理系统。

功能： 1.人员管理：支持Excel批量导入人员，并且支持三要素验证 2.薪资发放：通过Excel导入需要发放薪资的人员进行薪资发放，系统会自动按照企业费率来计算服务费 特点：可以通过权限来配置菜单和按钮，从而支持运营、企业、财务等多种角色来使用系统 技术：前端采用React、后端使用PHP、数据是Mysql

提供一个统一的用户与组织机构管理平台，解决多公司、多用户场景下的管理复杂性问题。通过集中化管理，用户可以高效地新增、编辑、排序和启用/停用账号，同时快速重置登录密码，提升管理效率。此外，系统还提供全面的日志管理功能，帮助管理员追踪页面访问、登录、数据编辑等操作，确保系统安全与可追溯性。

面向需要高效对话交互与知识管理的用户，包括个人用户、企业团队以及开发者。通过对接LLM（大语言模型）的流数据接口，我们解决了传统对话系统中交互不流畅、知识管理分散、问答针对性不足等问题。用户可以通过该系统实现自然语言对话、知识库问答以及文件内容问答，同时能够创建和管理个性化知识库，提升信息获取与管理的效率。 多模态对话支持：支持个人聊天对话、知识库问答以及个人文件问答，满足用户多样化的交互需求。 知识库管理：用户可以创建、编辑和管理自己的知识库，实现知识的个性化存储与高效检索。 针对性问答：基于用户上传的文件或知识库内容，系统能够提供针对性的问答服务，提升答案的准确性与实用性。 流式数据交互：通过对接LLM的流数据接口，实现实时、流畅的对话交互，减少用户等待时间。 代码块与页面展示：支持代码块的高亮显示和页面知识库的格式化输出，方便开发者和技术用户快速获取结构化信息。 可扩展性：系统设计模块化，易于扩展新功能或对接其他AI模型，满足不同场景需求。 基于React构建聊天窗页面，支持代码块高亮和知识库内容的格式化展示，支持用户上传文件并提取内容用于问答

为公司的数据监控和展示需求开发的可视化大屏，该大屏主要用于对公司核心业务数据进行实时监测和展示，为管理层提供直观的数据可视化界面，帮助其快速掌握业务动态，辅助决策分析。涉及的数据包括但不限于销售数据、用户活跃度、流量统计等，数据来源涵盖多个业务系统，数据量庞大且更新频繁。 使用技术：Echarts、HTML5、CSS3、JavaScript、React、WebSocket，TypeScript 职责和成果： 1.利用Echarts实现多维度数据的动态可视化展示，包括折线图、柱状图、饼图等。 2.通过WebSocket技术实现数据的实时更新，确保数据的及时性和准确性。 3.采用响应式设计，使大屏在不同分辨率和设备上均能完美展示，提升用户体验。 4.优化页面加载性能，使用虚拟滚动和懒加载技术，页面加载时间缩短25%。 5.实现自适应布局和媒体查询，确保在高清大屏到普通显示器的多场景适用性。

APP端： 1. 实时发布各种旅游路线，用户可购买旅游路线、分享旅游心得、分享旅游视频， 2. 可以查看他人上传的视频， 3. 有积分和商城系统； 管理端： 1. 旅游路线，景点、酒店管理； 2. 用户和视频管理，有审核视频功能； 3. 商城和订单管理； 4. 广告管理

1、负责产品Web界面设计开发、易用性改进、界面优化以及性能优化，持续提升用户体验； 2、负责产品的前端构建，各类交互设计与实现； 3、负责与后端工程师配合，为产品提供最优化的技术解决方案。 4、参与公司PC端、移动端、小程序端等多端的技术开发工作

面向群体与核心问题（30%） 本方案适用于希望搭建高性能、易维护的个人博客或内容网站的开发者。它通过 静态生成（Static Generation） 的方式，将 Markdown 作为内容管理方式，使用户无需依赖复杂的数据库或 CMS，即可轻松发布和管理文章。 核心优势与特点（50%） 与市场上的常规博客解决方案相比，本方案具有以下独特优势： 高效的静态生成：基于 Next.js 的 getStaticProps 预渲染机制，实现页面的静态构建，提升访问速度，同时减少服务器负载。 Markdown 驱动的内容管理：所有文章均以 Markdown 文件存储，开发者可直接编写或同步 Git 仓库，无需额外的 CMS 后台。 TypeScript 全面支持：相比于 JavaScript 方案，本项目引入 TypeScript，提供更好的类型安全性和开发体验，提高代码质量。 自动解析与 SEO 友好：利用 remark 和 remark-html 处理 Markdown 内容，并通过 Next.js 内置的优化策略，确保页面在搜索引擎中的良好表现。 灵活拓展性：可结合 灰阶前端（gray-matter） 解析文章元数据（如发布时间、标签、封面图等），方便定制文章展示形式。 技术选型与产品组成（20%） 前端框架：Next.js（支持静态生成和动态路由） 内容解析：remark + remark-html（将 Markdown 转换为 HTML） 数据处理：gray-matter（解析 Markdown 前置元数据） 开发语言：TypeScript（提升代码可靠性） 本方案通过上述技术组合，打造了一款轻量、高效、可扩展的静态博客系统，适用于个人博客、技术文档、企业内容展示等多种场景。

核心功能 可视化规则管理 提供基于 Web 的规则设计器，支持通过拖拽方式定义规则、决策表、评分卡等，降低非技术人员参与规则配置的门槛。 支持规则版本控制、多环境发布（开发/测试/生产），确保规则变更可追溯。 多规则类型支持 决策表：以表格形式管理条件与结果的映射关系，适合复杂逻辑的批量配置。 评分卡：基于权重和分值计算综合得分，常用于风控或信用评估场景。 脚本规则：支持 Groovy、JavaScript 等脚本语言，满足高度定制化需求。 高性能规则引擎 基于 RETE 算法优化，支持实时规则匹配与高效执行。 内置规则缓存机制，减少重复计算开销。 集成与扩展 提供 Spring Boot Starter，可快速集成到 Java 项目中。 支持通过 REST API 远程调用规则，适配微服务架构。 可扩展自定义函数、变量和规则加载器。 监控与调试 记录规则执行日志，支持规则命中率、执行时长等指标监控。 提供规则调试模式，实时验证逻辑正确性。 应用场景： 风控系统：实时计算用户风险等级（如反欺诈、贷款审批）。 营销活动：动态配置优惠券发放规则、用户分群策略。 物联网（IoT）：根据设备数据触发告警或自动化操作。 医疗诊断：基于患者指标匹配诊疗方案。

项目描述：针对于杭州楼掌柜微信小程序的b端后台管理系统； 技术描述： 1、以 react + redux + redux-saga + react-router + antd + TypeScript + react hooks 进行页面的 构建和组件的封装； 2、使用 less 进行样式的编写； 3、登录页面编写，获取 token 与用户身份信息，缓存到浏览器中； 4、给 axios 进行二次封装，方便页面接口调用； 5、使用 AMap 进行地图地址搜索、定位、区域面积展示等操作； 6、使用 ECharts 图表开发，做数据统计。 7、编写防抖函数，阻止用户点击按钮重复提交和 input 输入框重复调用接口； 8、引入 ifanrx-react-ueditor 做富文本编辑器组件；

欢迎来到我的个人博客！这是一个基于React、TypeScript和Vite技术栈构建的现代化个人网站，旨在展示我的技术能力、项目经验以及个人兴趣。虽然目前页面还在不断完善中，但已经具备了美观的界面设计和全面的个人资料展示功能。通过这个博客，我希望能够与大家分享我的学习心得、技术探索以及生活中的点滴感悟。无论是前端开发的技巧，还是对TypeScript的深入理解，你都可以在这里找到相关的内容。未来，我计划进一步丰富博客的功能，比如添加文章分类、评论系统以及更多的交互体验。感谢你的访问，期待与你一起成长与进步！