feat: 实现 Mini Game AI 工具平台

基于 Next.js 15、React 19 和 TypeScript 构建面向小游戏开发者的 AI 赋能工具平台。

主要功能:
- 首页:包含 Hero、功能展示、优势介绍、定价和 CTA 区域
- 三大核心工具:视频转序列帧、图片压缩、音频压缩
- 响应式布局:包含顶部导航、页脚和侧边栏
- 文件上传:支持拖拽上传,使用 react-dropzone
- 进度追踪:实时显示上传和处理进度
- 可配置工具:每个工具都支持自定义参数配置
- 结果预览:支持下载处理后的文件
- 4K 优化:针对大屏幕优化的响应式设计
- API 路由:文件上传和处理的模拟实现

技术栈:
- Next.js 15 (App Router)
- React 19
- TypeScript (严格模式)
- Tailwind CSS(自定义 4K 断点)
- shadcn/ui 组件库
- Framer Motion 动画
- Zustand 状态管理

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-20 22:26:55 +08:00
parent 9529a684a1
commit a7449bf49b
40 changed files with 10963 additions and 0 deletions

98
tailwind.config.ts Normal file
View File

@@ -0,0 +1,98 @@
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
chart: {
"1": "hsl(var(--chart-1))",
"2": "hsl(var(--chart-2))",
"3": "hsl(var(--chart-3))",
"4": "hsl(var(--chart-4))",
"5": "hsl(var(--chart-5))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"fade-in": {
"0%": { opacity: "0", transform: "translateY(10px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
"slide-in": {
"0%": { transform: "translateX(-100%)" },
"100%": { transform: "translateX(0)" },
},
"pulse-slow": {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0.5" },
},
"float": {
"0%, 100%": { transform: "translateY(0px)" },
"50%": { transform: "translateY(-20px)" },
},
},
animation: {
"fade-in": "fade-in 0.5s ease-out",
"slide-in": "slide-in 0.3s ease-out",
"pulse-slow": "pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
"float": "float 3s ease-in-out infinite",
},
fontFamily: {
sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
mono: ["var(--font-geist-mono)", "monospace"],
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"gradient-primary": "linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%)",
"gradient-dark": "linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%)",
},
},
},
plugins: [require("@tailwindcss/typography")],
};
export default config;