SuperAPI AI 工具集

dashboard-builder

前端与建站

查看项目

更新于 10-16 04:56

技能介绍

用途:构建全栈仪表盘应用,提供现代化 UI、丰富图表与动态动效,适合大屏(4K、超宽屏)专业数据可视化场景。

主要能力:前端采用 Next.js 14+(App Router)与 React 18+,UI 组件用 shadcn/ui + Tailwind CSS,图表用 Recharts,动效用 Framer Motion,后端用 Express.js;数据源可配置为 API、数据库或静态数据。设计上采用深色主题与渐变、卡片式布局、专业配色(slate-900 到 slate-950 背景、emerald-500 成功、rose-500 危险、blue-500 强调)、大字号排版、网格布局;动效包含入场淡入与上滑、滚动触发、数字计数、进度条、悬停抬升与实时数据脉冲指示。

使用方式:提供自动脚本 ./setup-and-run.sh 完成建项目、装依赖、初始化组件并启动服务,默认地址 http://localhost:3000;也可手动执行 npx create-next-app@latest my-dashboard --typescript --tailwind --eslint,进入目录后 npm install shadcn-ui recharts framer-motion lucide-react,再运行 npx shadcn-ui@latest init 与 npx shadcn-ui@latest add card button badge table scroll-area alert,最后 npm run dev。项目包含 app、components、lib、server、styles 等目录结构,并附数据 API 集成、Recharts 模式、大屏 UI、快速开始与数据集成等参考文档。

限制:资料未提供收费、价格、平台支持范围或实际运行效果等额外信息;使用需具备 Node.js 与 Next.js 相关环境,具体依赖版本与兼容性暂未提供。