我的项目

这是一个基于 Next.js + TypeScript 的订单管理中心示例项目，包含前端页面、API 路由和订单状态机实现（用于演示订单生命周期和操作）。 **主要技术栈** Next.js (App Router) React + TypeScript 自研状态机实现（useStateMachine） **界面**   **关键点说明** Orders API：定义了多个 API 路由（如创建、查询、支付、退款、发货、取消、批量操作等），路由以文件夹结构组织。 订单状态机：项目的订单状态与操作由状态机驱动，使复杂的状态转移、并发操作与权限控制变得可预测与可测试。 状态机实现说明（自研 useStateMachine）： 1）一个轻量的有限状态机抽象，入口位于 src/hooks/useStateMachine.ts，订单的具体转移表定义在 src/features/orders/domain/stateMachine.ts。 2）功能点：该实现提供状态管理、事件分发（dispatch）、守卫（guard）、副作用（effect）的执行、可用操作枚举（actions）、异步执行标记（pending）和错误跟踪（error）。 3）在本项目的用法：通过 useOrderMachine（封装于 src/features/orders/hooks/useOrderMachine.ts）将 orderTransitions 注入到 useStateMachine，UI 向 dispatch 发送事件触发转移；副作用（如调用 ordersApi）在转移定义中实现为 effect。 服务层与模拟：后端调用封装在 src/features/orders/services，便于在本地模拟支付/退款流程并替换为真实服务。 权限与认证：提供权限角色与服务器端判断，页面层通过 hooks (useAuthRole.ts) 控制动作可见性与可执行性。 Hooks 与封装：常用逻辑被抽成 hooks（useOrderList、useOrderActions、useOrderSelection、useOrderMachine），便于复用与测试。 **自研组件库（beaver-ui）** 组件库名称：beaver-ui（已在 package.json 中列为依赖）。 功能概要：提供常用的企业级 UI 组件（例如 Button、Modal、Table、Form、Toast 等），并包含主题化与可定制样式能力，方便在订单管理场景中复用。

这是我用 Next.js + TypeScript + Prisma + PostgreSQL 构建的个人博客，支持数据库动态内容、用户管理与完善的工程配置。 核心定位 - 写文章、可登陆、可管理 - 数据通过 Prisma + PostgreSQL 处理 - 部署在 Vercel 环境上 - 支持开发、生产完整流程 ### 前端 - Next.js：支持 SSR / SSG / ISR 混合渲染 - TypeScript 全程强类型 - 响应式布局和现代前端最佳实践  ### 后台 - Prisma ORM：强类型数据库访问层 - PostgreSQL：稳定关系型数据库 - 自动迁移与数据库启动脚本（可用 Docker 一键启动）  ### 工程实践 - ESLint / Prettier / 自动格式化 - Docker + docker-compose 支持 - Vercel 部署配置 - 环境变量 / 多环境构建 - 完整开发到生产流水线

Beaver UI 是我打造的一个轻量、实用、可定制的前端 UI 组件库，基于React + TypeScript + tsup + Storybook 构建，支持现代前端开发的主流场景。 ### 核心理念 - 简单好用：用最基础的 API 组合实现常见 UI 功能，学习成本低。 - 强类型安全：全量 TypeScript 类型定义，IDE 智能提示友好。 - 可定制主题：通过 CSS 变量轻松覆盖主题配色、radius、间距等样式。 - 可在实际项目中直接复用，兼容 React 主流构建方案（含 SSR/Next.js 细节说明）。 ------ ### 组件亮点 Beaver UI 包含 17+ 个常用 UI 组件，覆盖从基础交互到复杂反馈的需求： 基础组件 - Button：支持多种按钮类型和尺寸。 - Input / Select / Checkbox / Radio / Switch：表单基础控件，支持完整受控/非受控写法。 - DatePicker / Upload：日期选择及文件上传控件。 结构 & 布局 - Form / FormItem：表单容器与验证结构。 - Table：数据展示表格。 - Pagination：分页组件。 反馈 & 交互 - Alert / Toast 提示：状态提醒与消息反馈。 - Tooltip / Popconfirm：轻量交互提示。 - Modal / Drawer：模态框与抽屉式弹层。 ### storybook演示页面 

运营数据驾驶舱是一个模拟真实电商/交易系统的数据可视化看板。采用 Next.js 15 + React 19 + ECharts 技术栈，实现了统一筛选系统、KPI 汇总、趋势/结构分析，以及点击下钻到订单明细等核心能力。支持 URL 参数同步，便于分享和复现分析状态。 ## 目的 - 设计一个真实可用的数据看板架构 - 前端状态管理与 URL 同步 - ECharts 交互和品质优化的通用模式 - 实现可维护的单元测试 ## 界面   ## 核心亮点 **技术栈** - Next.js 15（App Router）+ React 19 + TypeScript - ECharts 通过自定义 hook 封装，解耦实例与事件 - beaver-ui 提供筛选、抽屉、表格等基础组件 **功能完整性** - 多维筛选系统：时间、渠道、地区、订单状态四维度联动 - KPI 汇总：GMV、订单数、退款率等关键指标 + 上期同比 - 可视化分析：趋势折线图（双 Y 轴）、渠道堆叠柱图 - 智能下钻：点击图表即可查看该时间段订单明细，支持搜索和分页 **工程化亮点** - **两阶段筛选**：草稿态编辑 + 提交态应用，避免频繁重算 - **URL 双向同步**：筛选条件与 querystring 同步，支持链接分享和状态复现 - **统一边界态**：loading/empty/error 由卡片容器统一处理，提升用户体验 - **最小化单测**：使用 Vitest 覆盖关键派生逻辑

这是一个轻量的“信息卡片”管理小工具，使用 React + TypeScript + Vite 构建，旨在作为快速记录与浏览简短项目卡片（标题、标签、30 秒讲法等），用于学习、面试、演讲、复习等场景。 ## 核心目标 - 让你快速记录项目想法/问题与对应的解决思路 - 支持按关键字、项目与标签过滤和搜索 - 支持从 Markdown/JSON 导入批量卡片 ## 技术栈 - 运行时：Node.js（建议 18+） - 构建：Vite - 框架：React 19 + TypeScript - 路由：react-router-dom - UI：beaver-ui（用于部分输入、按钮、弹窗等） ## 主要功能 - 列表页（ListPage）：显示卡片网格，支持搜索/过滤、批量导入、复制 30 秒讲法、编辑和删除 - 详情页（DetailPage）：查看卡片完整内容 - 编辑页（EditPage）：新建或编辑卡片