first save
This commit is contained in:
Mikuisnotavailable
37
README.md
37
README.md
@@ -1,36 +1 @@
|
|||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
3D预览还没实现
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
First, run the development server:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
|
||||||
|
|
||||||
## Deploy on Vercel
|
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
|
||||||
21
components.json
Normal file
21
components.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
@@ -1,7 +1,11 @@
|
|||||||
import type { NextConfig } from "next";
|
// next.config.js
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig: NextConfig = {
|
const nextConfig = {
|
||||||
/* config options here */
|
reactStrictMode: true,
|
||||||
|
images: {
|
||||||
|
domains: ['localhost'],
|
||||||
|
},
|
||||||
|
// 添加其他配置...
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
module.exports = nextConfig;
|
||||||
2101
package-lock.json
generated
2101
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
package.json
@@ -3,25 +3,41 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev --turbopack",
|
"dev": "next dev ",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "19.1.0",
|
"@radix-ui/react-label": "^2.1.7",
|
||||||
"react-dom": "19.1.0",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"next": "15.4.4"
|
"@react-three/drei": "^9.122.0",
|
||||||
|
"@react-three/fiber": "^8.18.0",
|
||||||
|
"axios": "^1.11.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.533.0",
|
||||||
|
"next": "^14.2.30",
|
||||||
|
"next-auth": "^4.24.11",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-dropzone": "^14.3.8",
|
||||||
|
"tailwind-merge": "^3.3.1",
|
||||||
|
"three": "^0.152.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "^5",
|
"@eslint/eslintrc": "^3",
|
||||||
"@types/node": "^20",
|
|
||||||
"@types/react": "^19",
|
|
||||||
"@types/react-dom": "^19",
|
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"tailwindcss": "^4",
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19.1.9",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"@types/three": "^0.178.1",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "15.4.4",
|
"eslint-config-next": "15.4.4",
|
||||||
"@eslint/eslintrc": "^3"
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^4.1.11",
|
||||||
|
"tw-animate-css": "^1.3.6",
|
||||||
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import AuthForm from '@/components/auth/AuthForm';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
return (
|
||||||
|
<div className="max-w-md mx-auto">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-center">登录你的littlelan账户</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<AuthForm type="login" />
|
||||||
|
<div className="mt-4 text-center text-sm">
|
||||||
|
还没有账号?
|
||||||
|
<Link href="/register" className="ml-1 text-blue-500 hover:underline">
|
||||||
|
立即注册
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
// src/app/api/auth/[...nextauth]/route.ts
|
||||||
|
import { authOptions } from '@/lib/api/auth';
|
||||||
|
import NextAuth from 'next-auth';
|
||||||
|
|
||||||
|
const handler = NextAuth(authOptions);
|
||||||
|
export { handler as GET, handler as POST };
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
// src/app/dashboard/page.tsx
|
||||||
|
import { getServerSession } from 'next-auth';
|
||||||
|
import { authOptions } from '@/lib/api/auth';
|
||||||
|
import { redirect } from 'next/navigation';
|
||||||
|
import SkinGrid from '@/components/skins/SkinGrid';
|
||||||
|
|
||||||
|
export default async function Dashboard() {
|
||||||
|
const session = await getServerSession(authOptions);
|
||||||
|
|
||||||
|
if (!session) {
|
||||||
|
redirect('/login');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 安全地获取用户ID
|
||||||
|
const userId = session.user?.id || 'unknown';
|
||||||
|
|
||||||
|
// 实际应用中这里会从API获取用户皮肤数据
|
||||||
|
const mockSkins = [
|
||||||
|
{ id: '1', name: 'Steve皮肤', createdAt: '2023-05-01' },
|
||||||
|
{ id: '2', name: 'Alex皮肤', createdAt: '2023-05-15' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold mb-6">我的皮肤库</h1>
|
||||||
|
<div className="mb-6">
|
||||||
|
<a
|
||||||
|
href="/skins/upload"
|
||||||
|
className="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded"
|
||||||
|
>
|
||||||
|
上传新皮肤
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<SkinGrid skins={mockSkins} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,26 +1,122 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
:root {
|
@custom-variant dark (&:is(.dark *));
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #171717;
|
|
||||||
}
|
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-geist-sans);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
:root {
|
||||||
:root {
|
--radius: 0.625rem;
|
||||||
--background: #0a0a0a;
|
--background: oklch(1 0 0);
|
||||||
--foreground: #ededed;
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: oklch(0.205 0 0);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.97 0 0);
|
||||||
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
--muted: oklch(0.97 0 0);
|
||||||
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
--accent: oklch(0.97 0 0);
|
||||||
|
--accent-foreground: oklch(0.205 0 0);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.922 0 0);
|
||||||
|
--input: oklch(0.922 0 0);
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.205 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.205 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.922 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.556 0 0);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
background: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,33 +1,36 @@
|
|||||||
import type { Metadata } from "next";
|
// src/app/layout.tsx
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import './globals.css';
|
||||||
import "./globals.css";
|
import type { Metadata } from 'next';
|
||||||
|
import { Inter } from 'next/font/google';
|
||||||
|
import Navbar from '@/components/Navbar';
|
||||||
|
|
||||||
const geistSans = Geist({
|
const inter = Inter({ subsets: ['latin'] });
|
||||||
variable: "--font-geist-sans",
|
const grassIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABCElEQVRYw+2W0Q6DIAxAZ3b/r7y7L0QNlKEFdLfEFyVQ+pVSCgBwB4DfGz4fQJxzGGOYc34d4DkAVVVVdQqgqioiIuccxhgAQFVVMMYg50wAY4w5gDEGKaWl0nPOoZQiAGPM7wGMMXDOwVqLtm2Rc0bXdTDGwDmHnPN/ADHGdF2HEAJijOj7HjFGpJTQ9z36vkeMESkl9H0PYwystYgxLgHGGHDOwTmHtm3hnEPbtmCMgXO+6DkA1lo45+C9R0oJwzAgpQRrLZxz8N4jpYRhGJBSgrUWzjlYa5cAzjkYY2CMQdM0YIyBMQbOOQEAwzCgrmtUVYW6rjEMA4ZhgDEGTdOAMQbOOQEA4ziiqio0TYO2bTGbYRiQc0bTNGiaBm3bYjY5Z4zjiKqqMAwD6rqGtRYpJYzjiJwzrLVomgZt22I2OWeM44i6rjEMA+q6RkoJ4zgi5wxrLZqmwWyGYUDOGXVdYxxH1HWNlBLGcUTOGdZaNE2D2QzDgJwz6rrGOI6o6xopJYzjiJwzrLVomgazGYYBOWfUdY1xHFHXNVJKGMfxfwB1XWO2OWeM44i6rjGOI+q6RkoJ4zgi5wxrLZqmwWyGYUDOGXVdYxxH1HWNlBLGcUTOGdZaNE2D2QzDgJwz6rrGOI6o6xopJYzj+AAQY4QQQgghhBBCCCGEkHv7AQm0VqDdH3i9AAAAAElFTkSuQmCC';
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: 'HITWH皮肤管理器',
|
||||||
description: "Generated by create next app",
|
description: '上传和管理你的Minecraft皮肤',
|
||||||
|
icons: {
|
||||||
|
icon: grassIcon,//或是用mc-favicon
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="zh-CN">
|
||||||
<body
|
<head>
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
<link
|
||||||
>
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||||
{children}
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body className={`${inter.className} bg-gray-50 dark:bg-gray-900`}>
|
||||||
|
<Navbar />
|
||||||
|
<main className="container mx-auto px-4 py-8">{children}</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
// src/app/not-found.tsx
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||||
|
<div className="max-w-md w-full text-center">
|
||||||
|
<h1 className="text-9xl font-bold text-green-600 dark:text-green-400 mb-4">404</h1>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">页面未找到</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 mb-8">
|
||||||
|
您访问的页面不存在或已被移除。
|
||||||
|
</p>
|
||||||
|
<Link href="/" className="inline-block px-6 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors">
|
||||||
|
返回首页
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
257
src/app/page.tsx
257
src/app/page.tsx
@@ -1,103 +1,174 @@
|
|||||||
import Image from "next/image";
|
// src/app/page.tsx
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
|
||||||
export default function Home() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
<div className="min-h-screen bg-gradient-to-br from-green-50 to-cyan-100 dark:from-gray-900 dark:to-gray-800">
|
||||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
{/* 导航栏 */}
|
||||||
<Image
|
<nav className="bg-white dark:bg-gray-800 shadow-md py-4 px-6 flex justify-between items-center">
|
||||||
className="dark:invert"
|
<div className="flex items-center space-x-2">
|
||||||
src="/next.svg"
|
<div className="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10" />
|
||||||
alt="Next.js logo"
|
<span className="text-xl font-bold text-green-600 dark:text-green-400">HITWH皮肤库</span>
|
||||||
width={180}
|
|
||||||
height={38}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
|
||||||
<li className="mb-2 tracking-[-.01em]">
|
|
||||||
Get started by editing{" "}
|
|
||||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
|
||||||
src/app/page.tsx
|
|
||||||
</code>
|
|
||||||
.
|
|
||||||
</li>
|
|
||||||
<li className="tracking-[-.01em]">
|
|
||||||
Save and see your changes instantly.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
Deploy now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Read our docs
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<div className="flex space-x-4">
|
||||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
<Button asChild variant="outline" className="border-green-600 text-green-600 hover:bg-green-50">
|
||||||
<a
|
<Link href="/login">登录</Link>
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
</Button>
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
<Button asChild className="bg-green-600 hover:bg-green-700">
|
||||||
target="_blank"
|
<Link href="/register">注册账号</Link>
|
||||||
rel="noopener noreferrer"
|
</Button>
|
||||||
>
|
</div>
|
||||||
<Image
|
</nav>
|
||||||
aria-hidden
|
|
||||||
src="/file.svg"
|
{/* 区域 */}
|
||||||
alt="File icon"
|
<section className="container mx-auto px-4 py-16 flex flex-col md:flex-row items-center justify-between">
|
||||||
width={16}
|
<div className="md:w-1/2 mb-12 md:mb-0">
|
||||||
height={16}
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">
|
||||||
|
创建、分享和管理你的
|
||||||
|
<span className="text-green-600 dark:text-green-400"> Minecraft 皮肤</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8 max-w-lg">
|
||||||
|
上传你的自定义皮肤，在3D预览中查看效果，并与HITWH的大家分享你的创作。简单、快捷！
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button asChild size="lg" className="text-lg bg-green-600 hover:bg-green-700 py-6">
|
||||||
|
<Link href="/skins/upload">立即上传皮肤</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" size="lg" className="text-lg border-green-600 text-green-600 hover:bg-green-50 py-6">
|
||||||
|
<Link href="/dashboard">浏览皮肤库</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="md:w-1/2 flex justify-center">
|
||||||
|
<div className="relative w-full max-w-md">
|
||||||
|
<div className="absolute inset-0 bg-green-500 rounded-2xl transform rotate-6"></div>
|
||||||
|
<div className="relative bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center">
|
||||||
|
<div className="text-center p-6">
|
||||||
|
<h3 className="text-xl font-bold mb-4">皮肤预览区域</h3>
|
||||||
|
<p className="text-gray-600">这里将展示3D皮肤预览</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 功能特性区域 */}
|
||||||
|
<section className="py-16 bg-white dark:bg-gray-800">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-16">
|
||||||
|
为什么选择我们的皮肤库？
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<FeatureCard
|
||||||
|
title="3D实时预览"
|
||||||
|
description="上传后立即在3D模型中查看皮肤效果，支持360度旋转查看"
|
||||||
|
icon="👁️"
|
||||||
/>
|
/>
|
||||||
Learn
|
<FeatureCard
|
||||||
</a>
|
title="一键应用"
|
||||||
<a
|
description="获取皮肤链接，在Minecraft游戏中一键应用你的新皮肤"
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
icon="⚡"
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/window.svg"
|
|
||||||
alt="Window icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
/>
|
||||||
Examples
|
<FeatureCard
|
||||||
</a>
|
title="社区分享"
|
||||||
<a
|
description="社区认同和安全保障（大概？"
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
icon="🌍"
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/globe.svg"
|
|
||||||
alt="Globe icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
/>
|
||||||
Go to nextjs.org →
|
</div>
|
||||||
</a>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 行动号召区域 */}
|
||||||
|
<section className="py-20 bg-gradient-to-r from-green-500 to-cyan-500 dark:from-green-700 dark:to-cyan-700">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||||
|
加入HITWH300众（误
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-green-100 max-w-2xl mx-auto mb-10">
|
||||||
|
免费注册账号，开始创建和分享你的独特皮肤
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<Button asChild size="lg" className="text-lg bg-white text-green-600 hover:bg-green-50 py-6">
|
||||||
|
<Link href="/register">立即注册</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" size="lg" className="text-lg border-white text-white hover:bg-green-600 py-6">
|
||||||
|
<Link href="/login">登录账号</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 页脚 */}
|
||||||
|
<footer className="bg-gray-800 text-gray-300 py-10">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<div className="mb-6 md:mb-0">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8" />
|
||||||
|
<span className="text-xl font-bold text-green-400">HITWH皮肤库</span>
|
||||||
|
</div>
|
||||||
|
<p className="mt-2 text-sm">创建、分享和管理你的 Minecraft 皮肤</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-green-400 font-semibold mb-3">导航</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li><Link href="/" className="hover:text-white">首页</Link></li>
|
||||||
|
<li><Link href="/dashboard" className="hover:text-white">皮肤库</Link></li>
|
||||||
|
<li><Link href="/skins/upload" className="hover:text-white">上传皮肤</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-green-400 font-semibold mb-3">账号</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li><Link href="/login" className="hover:text-white">登录</Link></li>
|
||||||
|
<li><Link href="/register" className="hover:text-white">注册</Link></li>
|
||||||
|
<li><Link href="/dashboard" className="hover:text-white">我的皮肤</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-green-400 font-semibold mb-3">支持</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li><Link href="/help" className="hover:text-white">帮助中心</Link></li>
|
||||||
|
<li><Link href="/contact" className="hover:text-white">联系我们</Link></li>
|
||||||
|
<li><Link href="/terms" className="hover:text-white">服务条款</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-700 mt-10 pt-6 text-center text-sm">
|
||||||
|
<p>© {new Date().getFullYear()} HITWHGAMES. 保留所有权利.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 功能卡片组件
|
||||||
|
function FeatureCard({ title, description, icon }: { title: string; description: string; icon: string }) {
|
||||||
|
return (
|
||||||
|
<Card className="h-full transition-transform hover:scale-[1.02] hover:shadow-lg">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="text-4xl mb-4">{icon}</div>
|
||||||
|
<CardTitle className="text-xl">{title}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">{description}</p>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button variant="link" className="text-green-600 dark:text-green-400 p-0">
|
||||||
|
了解更多 →
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { notFound } from 'next/navigation';
|
||||||
|
import SkinViewer3D from '@/components/skins/SkinViewer3D';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
interface SkinDetailProps {
|
||||||
|
params: { id: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SkinDetail({ params }: SkinDetailProps) {
|
||||||
|
// 实际应用中这里会从API获取皮肤数据
|
||||||
|
const skinData = {
|
||||||
|
id: params.id,
|
||||||
|
name: `皮肤 #${params.id}`,
|
||||||
|
description: '这是你的Minecraft角色皮肤',
|
||||||
|
createdAt: '2023-06-01',
|
||||||
|
downloadUrl: `/api/skins/${params.id}/download`,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!skinData) return notFound();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<h1 className="text-3xl font-bold mb-6">{skinData.name}</h1>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
|
||||||
|
<SkinViewer3D skinUrl={skinData.downloadUrl} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="mb-4">{skinData.description}</p>
|
||||||
|
<p className="text-gray-500 mb-6">创建于: {skinData.createdAt}</p>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button asChild>
|
||||||
|
<a href={skinData.downloadUrl} download>下载皮肤</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline">
|
||||||
|
分享
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
'use client';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useDropzone } from 'react-dropzone';
|
||||||
|
import SkinUploader from '@/components/skins/SkinUploader';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
export default function SkinUploadPage() {
|
||||||
|
const [skinFile, setSkinFile] = useState<File | null>(null);
|
||||||
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
|
|
||||||
|
const { getRootProps, getInputProps } = useDropzone({
|
||||||
|
accept: {
|
||||||
|
'image/png': ['.png']
|
||||||
|
},
|
||||||
|
maxFiles: 1,
|
||||||
|
onDrop: (acceptedFiles) => {
|
||||||
|
setSkinFile(acceptedFiles[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleUpload = async () => {
|
||||||
|
if (!skinFile) return;
|
||||||
|
|
||||||
|
setIsUploading(true);
|
||||||
|
try {
|
||||||
|
// 实际应用中这里会调用API上传皮肤
|
||||||
|
console.log('上传皮肤文件:', skinFile.name);
|
||||||
|
// 模拟上传延迟
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||||
|
alert('皮肤上传成功！');
|
||||||
|
setSkinFile(null);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传失败:', error);
|
||||||
|
alert('皮肤上传失败，请重试');
|
||||||
|
} finally {
|
||||||
|
setIsUploading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h1 className="text-3xl font-bold mb-6">上传新皮肤</h1>
|
||||||
|
|
||||||
|
<div
|
||||||
|
{...getRootProps()}
|
||||||
|
className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer mb-6"
|
||||||
|
>
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
<p className="text-gray-500">拖放PNG格式的皮肤文件到这里，或点击选择文件</p>
|
||||||
|
<p className="text-sm text-gray-400 mt-2">标准皮肤尺寸应为64x32像素</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{skinFile && (
|
||||||
|
<div className="mb-6">
|
||||||
|
<h3 className="text-lg font-medium mb-3">预览</h3>
|
||||||
|
<SkinUploader file={skinFile} />
|
||||||
|
<div className="mt-3">
|
||||||
|
<p>文件名: {skinFile.name}</p>
|
||||||
|
<p>大小: {(skinFile.size / 1024).toFixed(2)} KB</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleUpload}
|
||||||
|
disabled={!skinFile || isUploading}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{isUploading ? '上传中...' : '上传皮肤'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
// src/app/template.tsx
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function Template({ children }: { children: React.ReactNode }) {
|
||||||
|
useEffect(() => {
|
||||||
|
// 模板特定的效果
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
// src/components/Navbar.tsx
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { getServerSession } from 'next-auth';
|
||||||
|
import { authOptions } from '@/lib/api/auth';
|
||||||
|
import { signOut } from '@/lib/api/auth';
|
||||||
|
|
||||||
|
export default async function Navbar() {
|
||||||
|
const session = await getServerSession(authOptions);
|
||||||
|
|
||||||
|
// 处理客户端退出函数
|
||||||
|
const handleSignOut = async () => {
|
||||||
|
'use server';
|
||||||
|
await signOut();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 安全地获取用户名
|
||||||
|
const userName = session?.user?.name || '玩家';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="bg-gray-800 text-white py-4">
|
||||||
|
<div className="container mx-auto px-4 flex justify-between items-center">
|
||||||
|
<div className="flex items-center space-x-6">
|
||||||
|
<Link href="/" className="text-xl font-bold">我的世界皮肤库</Link>
|
||||||
|
<div className="hidden md:flex space-x-4">
|
||||||
|
<Link href="/dashboard" className="hover:text-gray-300">仪表盘</Link>
|
||||||
|
<Link href="/skins" className="hover:text-gray-300">皮肤库</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
{session ? (
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<span>你好, {userName}</span>
|
||||||
|
<form action={handleSignOut}>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
type="submit"
|
||||||
|
className="text-white border-white hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
退出登录
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button asChild variant="outline" className="text-white border-white hover:bg-gray-700">
|
||||||
|
<Link href="/login">登录</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild className="bg-green-600 hover:bg-green-700">
|
||||||
|
<Link href="/register">注册</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
// src/components/auth/AuthForm.tsx
|
||||||
|
'use client';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
|
interface AuthFormProps {
|
||||||
|
type: 'login' | 'register';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AuthForm({ type }: AuthFormProps) {
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [username, setUsername] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [minecraftUsername, setMinecraftUsername] = useState('');
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
// 这里应该调用认证API
|
||||||
|
console.log('提交表单', { username, password, email, minecraftUsername });
|
||||||
|
|
||||||
|
// 模拟API请求
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||||
|
setIsLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="username">用户名</Label>
|
||||||
|
<Input
|
||||||
|
id="username"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={username}
|
||||||
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="password">密码</Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{type === 'register' && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="email">电子邮箱</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="minecraftUsername">Minecraft 用户名</Label>
|
||||||
|
<Input
|
||||||
|
id="minecraftUsername"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={minecraftUsername}
|
||||||
|
onChange={(e) => setMinecraftUsername(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||||
|
{isLoading ? '处理中...' : type === 'login' ? '登录' : '注册'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
// src/components/skins/SkinGrid.tsx
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
|
||||||
|
interface Skin {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SkinGrid({ skins }: { skins: Skin[] }) {
|
||||||
|
if (skins.length === 0) {
|
||||||
|
return <p>你还没有上传任何皮肤</p>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{skins.map((skin) => (
|
||||||
|
<Link key={skin.id} href={`/skins/${skin.id}`}>
|
||||||
|
<Card className="hover:shadow-lg transition-shadow">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{skin.name}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-gray-500">创建于: {skin.createdAt}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
// src/components/skins/SkinUploader.tsx
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
export default function SkinUploader({ file }: { file: File }) {
|
||||||
|
const imageUrl = URL.createObjectURL(file);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border rounded-md p-2 bg-gray-50">
|
||||||
|
<Image
|
||||||
|
src={imageUrl}
|
||||||
|
alt="皮肤预览"
|
||||||
|
width={128}
|
||||||
|
height={64}
|
||||||
|
className="object-contain mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
// src/components/skins/SkinViewer3D.tsx
|
||||||
|
//这部分还没写完！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
|
||||||
|
'use client';
|
||||||
|
import { extend, Canvas } from '@react-three/fiber';
|
||||||
|
import { OrbitControls, useTexture } from '@react-three/drei';
|
||||||
|
import { Suspense } from 'react';
|
||||||
|
import * as THREE from 'three';
|
||||||
|
|
||||||
|
// 显式扩展 Three.js 类
|
||||||
|
extend({
|
||||||
|
Mesh: THREE.Mesh,
|
||||||
|
BoxGeometry: THREE.BoxGeometry,
|
||||||
|
MeshStandardMaterial: THREE.MeshStandardMaterial,
|
||||||
|
AmbientLight: THREE.AmbientLight,
|
||||||
|
SpotLight: THREE.SpotLight,
|
||||||
|
MeshBasicMaterial: THREE.MeshBasicMaterial
|
||||||
|
});
|
||||||
|
|
||||||
|
interface SkinModelProps {
|
||||||
|
skinUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SkinModel: React.FC<SkinModelProps> = ({ skinUrl }) => {
|
||||||
|
const texture = useTexture(skinUrl);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<mesh rotation={[0, Math.PI / 4, 0]}>
|
||||||
|
<boxGeometry args={[1, 2, 0.5]} />
|
||||||
|
<meshStandardMaterial map={texture} side={THREE.DoubleSide} />
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FallbackModel: React.FC = () => (
|
||||||
|
<mesh>
|
||||||
|
<boxGeometry args={[1, 1, 1]} />
|
||||||
|
<meshBasicMaterial color="#cccccc" wireframe opacity={0.5} transparent />
|
||||||
|
</mesh>
|
||||||
|
);
|
||||||
|
|
||||||
|
interface SkinViewer3DProps {
|
||||||
|
skinUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SkinViewer3D: React.FC<SkinViewer3DProps> = ({ skinUrl }) => {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-96 bg-gray-100 dark:bg-gray-800 rounded-lg">
|
||||||
|
<Canvas
|
||||||
|
camera={{
|
||||||
|
position: [3, 1.5, 3],
|
||||||
|
fov: 50,
|
||||||
|
near: 0.1,
|
||||||
|
far: 100
|
||||||
|
}}
|
||||||
|
shadows
|
||||||
|
>
|
||||||
|
<ambientLight intensity={0.7} />
|
||||||
|
<spotLight
|
||||||
|
position={[5, 8, 5]}
|
||||||
|
angle={0.3}
|
||||||
|
penumbra={1}
|
||||||
|
intensity={1.5}
|
||||||
|
castShadow
|
||||||
|
shadow-mapSize-width={1024}
|
||||||
|
shadow-mapSize-height={1024}
|
||||||
|
/>
|
||||||
|
<Suspense fallback={<FallbackModel />}>
|
||||||
|
<SkinModel skinUrl={skinUrl} />
|
||||||
|
<OrbitControls
|
||||||
|
enableZoom={true}
|
||||||
|
enablePan={true}
|
||||||
|
minPolarAngle={Math.PI / 6}
|
||||||
|
maxPolarAngle={Math.PI / 1.8}
|
||||||
|
/>
|
||||||
|
</Suspense>
|
||||||
|
</Canvas>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SkinViewer3D;
|
||||||
59
src/components/ui/button.tsx
Normal file
59
src/components/ui/button.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
21
src/components/ui/input.tsx
Normal file
21
src/components/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
|
className={cn(
|
||||||
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Label({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
data-slot="label"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label }
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
// src/lib/api/auth.ts
|
||||||
|
import NextAuth, { AuthOptions } from 'next-auth';
|
||||||
|
import CredentialsProvider from 'next-auth/providers/credentials';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const API_URL = process.env.NEXT_PUBLIC_API_URL || '/api';
|
||||||
|
|
||||||
|
declare module "next-auth" {
|
||||||
|
interface Session {
|
||||||
|
user: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
minecraftUsername?: string;
|
||||||
|
} ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 定义 authOptions 并导出
|
||||||
|
export const authOptions: AuthOptions = {
|
||||||
|
providers: [
|
||||||
|
CredentialsProvider({
|
||||||
|
name: 'Credentials',
|
||||||
|
credentials: {
|
||||||
|
username: { label: "用户名", type: "text" },
|
||||||
|
password: { label: "密码", type: "password" }
|
||||||
|
},
|
||||||
|
async authorize(credentials) {
|
||||||
|
try {
|
||||||
|
const response = await axios.post(`${API_URL}/auth/login`, {
|
||||||
|
username: credentials?.username,
|
||||||
|
password: credentials?.password
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data && response.data.user) {
|
||||||
|
return {
|
||||||
|
id: response.data.user.id,
|
||||||
|
name: response.data.user.username,
|
||||||
|
email: response.data.user.email
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('认证失败:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
pages: {
|
||||||
|
signIn: '/login',
|
||||||
|
signOut: '/login'
|
||||||
|
},
|
||||||
|
callbacks: {
|
||||||
|
async jwt({ token, user }) {
|
||||||
|
if (user) {
|
||||||
|
token.id = user.id;
|
||||||
|
}
|
||||||
|
return token;
|
||||||
|
},
|
||||||
|
async session({ session, token }) {
|
||||||
|
if (token && token.id) {
|
||||||
|
session.user.id = token.id as string;
|
||||||
|
}
|
||||||
|
return session;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
secret: process.env.NEXTAUTH_SECRET,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出 NextAuth 处理函数
|
||||||
|
export const nextAuthHandler = NextAuth(authOptions);
|
||||||
|
|
||||||
|
// 导出登录函数
|
||||||
|
export const login = async (credentials: {
|
||||||
|
username: string;
|
||||||
|
password: string
|
||||||
|
}) => {
|
||||||
|
// 实现同上...
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出注册函数
|
||||||
|
export const register = async (userData: {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
email: string;
|
||||||
|
minecraftUsername: string;
|
||||||
|
}) => {
|
||||||
|
// 实现同上...
|
||||||
|
};
|
||||||
|
export async function signOut() {
|
||||||
|
// 实际应用中这里会调用API退出登录
|
||||||
|
console.log('用户退出登录');
|
||||||
|
// 在客户端组件中，你可能会使用 next-auth 的 signOut 方法
|
||||||
|
}
|
||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
/* src/styles/globals.css */
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* 添加 Minecraft 像素风格字体 */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
|
||||||
|
/* 自定义全局样式 */
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
@apply bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
@apply font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Minecraft 风格按钮 */
|
||||||
|
.btn-minecraft {
|
||||||
|
@apply px-4 py-2 rounded-md font-bold text-white bg-minecraft-green
|
||||||
|
border-2 border-b-4 border-minecraft-dark-green
|
||||||
|
hover:bg-minecraft-dark-green hover:border-minecraft-dark
|
||||||
|
active:transform active:translate-y-1 active:border-b-2
|
||||||
|
transition-all duration-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 像素风格元素 */
|
||||||
|
.pixel-border {
|
||||||
|
@apply border-2 border-gray-800;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
src/types/global.d.ts
vendored
17
src/types/global.d.ts
vendored
@@ -0,0 +1,17 @@
|
|||||||
|
// src/types/global.d.ts
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { Object3DNode } from '@react-three/fiber';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
// Three.js 元素
|
||||||
|
mesh: Object3DNode<THREE.Mesh, typeof THREE.Mesh>;
|
||||||
|
boxGeometry: Object3DNode<THREE.BoxGeometry, typeof THREE.BoxGeometry>;
|
||||||
|
meshStandardMaterial: Object3DNode<THREE.MeshStandardMaterial, typeof THREE.MeshStandardMaterial>;
|
||||||
|
ambientLight: Object3DNode<THREE.AmbientLight, typeof THREE.AmbientLight>;
|
||||||
|
spotLight: Object3DNode<THREE.SpotLight, typeof THREE.SpotLight>;
|
||||||
|
meshBasicMaterial: Object3DNode<THREE.MeshBasicMaterial, typeof THREE.MeshBasicMaterial>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/types/next-auth.d.ts
vendored
13
src/types/next-auth.d.ts
vendored
@@ -0,0 +1,13 @@
|
|||||||
|
// src/types/next-auth.d.ts
|
||||||
|
import 'next-auth';
|
||||||
|
|
||||||
|
declare module 'next-auth' {
|
||||||
|
interface Session {
|
||||||
|
user: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
minecraftUsername?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
17
src/types/three.d.ts
vendored
17
src/types/three.d.ts
vendored
@@ -0,0 +1,17 @@
|
|||||||
|
// src/types/three.d.ts
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { Object3DNode } from '@react-three/fiber';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
// 使用大写开头的类名
|
||||||
|
mesh: Object3DNode<THREE.Mesh, typeof THREE.Mesh>;
|
||||||
|
boxGeometry: Object3DNode<THREE.BoxGeometry, typeof THREE.BoxGeometry>;
|
||||||
|
meshStandardMaterial: Object3DNode<THREE.MeshStandardMaterial, typeof THREE.MeshStandardMaterial>;
|
||||||
|
ambientLight: Object3DNode<THREE.AmbientLight, typeof THREE.AmbientLight>;
|
||||||
|
spotLight: Object3DNode<THREE.SpotLight, typeof THREE.SpotLight>;
|
||||||
|
meshBasicMaterial: Object3DNode<THREE.MeshBasicMaterial, typeof THREE.MeshBasicMaterial>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
// tailwind.config.js
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
// 添加 Minecraft 主题颜色
|
||||||
|
'minecraft-green': '#5ABD3A',
|
||||||
|
'minecraft-dark-green': '#3A8D2D',
|
||||||
|
'minecraft-gray': '#8D8D8D',
|
||||||
|
'minecraft-dark': '#1F1F1F',
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'minecraft': '4px 4px 0px 0px rgba(0,0,0,0.2)',
|
||||||
|
'minecraft-inset': 'inset 3px 3px 0px 0px rgba(0,0,0,0.1)'
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'pixel-pulse': {
|
||||||
|
'0%, 100%': { transform: 'scale(1)' },
|
||||||
|
'50%': { transform: 'scale(1.05)' },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'pixel-pulse': 'pixel-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
@@ -8,11 +8,12 @@
|
|||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "node",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "react",
|
||||||
"plugins": [
|
"plugins": [
|
||||||
{
|
{
|
||||||
"name": "next"
|
"name": "next"
|
||||||
@@ -20,8 +21,8 @@
|
|||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts","src"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user