Weebapp003/shadcn-fintech-template
GitHub: Weebapp003/shadcn-fintech-template
基于 Next.js 和 shadcn/ui 构建的开源金融科技仪表盘模板，提供 11 个完整页面和丰富的金融交互组件，帮助开发者快速搭建金融类 Web 应用。
Stars: 151 | Forks: 879
# Shadcn Fintech
一个使用 Next.js、shadcn/ui 和 Tailwind CSS 构建的高级开源金融科技仪表盘。
[](LICENSE)
[](https://nextjs.org)
[](https://ui.shadcn.com)
[](https://tailwindcss.com)
[](https://typescriptlang.org)
## 功能
- **11 个完整构建的页面** — 仪表盘、账户、交易、转账、银行卡、加密货币、分析、投资、预算、设置、通知
- **加密货币仪表盘** — K 线图、实时投资组合、交易表单、包含 8 种货币的市场概览
- **拖放式仪表盘** — 使用 dnd-kit 重排小组件，并持久化存储到 localStorage
- **交互式信用卡** — 3D 翻转动画、冻结切换、虚拟卡生成器
- **实时投资行情** — 模拟实时价格更新及闪烁动画
- **消费热力图** — GitHub 风格的 365 天日历可视化
- **可操作的通知** — 内联接受/拒绝资金请求及设备授权
- **智能分析** — 类别下钻环形图、周期性扣费检测器、AI 洞察
- **预算追踪** — 动画 SVG 进度环、储蓄目标、月度预测
- **快速转账** — 带有发送模拟的联系人选择器
- **认证页面** — 登录 / 注册，配有动画 3D 地球仪，由 [Clerk](https://clerk.com) 提供支持
- **暗黑模式** — 全面支持暗色/亮色/系统主题
- **响应式** — 适用于桌面、平板和移动设备
## 页面
| 页面 | 描述 |
|------|-------------|
| `/dashboard` | 财务概览、钱包卡、快速转账、消费限额、资金流动 |
| `/accounts` | 关联的银行账户及余额、添加账户流程 |
| `/transactions` | 带有过滤器、可展开行和批量 CSV 导出的可搜索表格 |
| `/transfers` | 发送/接收/定时转账，带有统计和快速发送功能 |
| `/cards` | 3D 翻转卡、冻结/解冻、消费控制、虚拟卡创建器 |
| `/analytics` | 消费热力图、类别明细、周期性扣费、AI 洞察 |
| `/crypto` | K 线图、投资组合余额、热门货币、交易表单、市场概览 |
| `/investments` | 投资组合分配、带迷你图的持仓、实时行情、自选列表 |
| `/budgets` | 预算环、储蓄目标、消费日历、月度预测 |
| `/settings` | 个人资料、安全、通知、账单、外观 |
| `/notifications` | 可过滤且带有消除动画的通知流 |
| `/sign-in` | 带有动画 3D 地球仪和社交登录的认证页面，由 Clerk 提供支持 |
| `/sign-up` | 包含姓名、邮箱、密码和条款接受的注册页面 |
## 技术栈
| | 技术 |
|---|---|
| 框架 | [Next.js 16](https://nextjs.org) (App Router) |
| UI | [shadcn/ui](https://ui.shadcn.com) |
| 样式 | [Tailwind CSS v4](https://tailwindcss.com) |
| 图表 | [Recharts](https://recharts.org) |
| 动画 | [Motion](https://motion.dev) |
| 拖放 | [@dnd-kit](https://dndkit.com) |
| 认证 | [Clerk](https://clerk.com) |
| 3D 地球仪 | [three-globe](https://github.com/vasturiano/three-globe) + [Aceternity UI](https://ui.aceternity.com) |
| 图标 | [Lucide React](https://lucide.dev) |
| 语言 | TypeScript |
## 快速开始
```
git clone https://github.com/Weebapp003/shadcn-fintech-template.git
cd shadcn-fintech
pnpm install
pnpm dev
```
打开 [http://localhost:3000](http://localhost:3000) 查看仪表盘。
### Redis（可选）
当设置了 `REDIS_URL` 时，Redis 为 `/api/market/ticker` 缓存提供支持：
```
docker compose up -d
```
将 `.env.example` 复制到 `.env.local` 并设置 `REDIS_URL=redis://localhost:6379`。如果没有 Redis，ticker API 仍然可以工作，但会跳过缓存。
使用 `GET /api/health` 检查连通性 — 它会在可用时报告 Redis 配置和 ping 延迟。
## 自定义
**主题** — 编辑 `src/app/globals.css` 以自定义颜色。通过 CSS 变量全面支持暗黑模式。
**模拟数据** — 所有演示数据位于 `src/data/seed.ts`。请将其替换为您自己的数据或连接到真实的 API。
**仪表盘布局** — 点击仪表盘上的“Customize”以拖动并重新排列小组件。配置将持久化存储到 localStorage。
## 许可证
采用 [MIT License](LICENSE) 授权。标签：shadcn/ui, Tailwind CSS, TypeScript, 前端模板, 安全插件, 搜索引擎查询, 自动化攻击, 金融科技