first commit

2024-11-26 12:45:06 +08:00 · 2024-11-26 12:45:06 +08:00 · 03c76dae5c
commit 03c76dae5c
25 changed files with 6194 additions and 0 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# DB
+shorturl.db
--- a/README.md
+++ b/README.md
@ -0,0 +1,36 @@
+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).
+
+## 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.
--- a/app/api/shorten/route.ts
+++ b/app/api/shorten/route.ts
@ -0,0 +1,24 @@
+import { NextResponse } from 'next/server';
+import { createShortUrl } from '@/lib/db';
+
+export async function POST(request: Request) {
+  const { url, expiresIn } = await request.json();
+  
+  if (!url) {
+    return NextResponse.json({ error: 'URL is required' }, { status: 400 });
+  }
+
+  if (!expiresIn || typeof expiresIn !== 'number') {
+    return NextResponse.json({ error: 'Valid expiration time is required' }, { status: 400 });
+  }
+
+  try {
+    const shortCode = createShortUrl(url, expiresIn);
+    const shortUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/s/${shortCode}`;
+    return NextResponse.json({ shortUrl });
+  } catch (error) {
+    console.error('Error creating short URL:', error);
+    return NextResponse.json({ error: 'Failed to create short URL' }, { status: 500 });
+  }
+}
+
--- a/app/api/url/[shortCode]/route.ts
+++ b/app/api/url/[shortCode]/route.ts
@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import { getLongUrl, getUrlStats } from '@/lib/db';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { shortCode: string } }
+) {
+  const { longUrl, expired } = getLongUrl(params.shortCode);
+  const stats = getUrlStats(params.shortCode);
+
+  if (longUrl) {
+    return NextResponse.json({ longUrl, expired, stats });
+  } else {
+    return NextResponse.json({ longUrl: null, expired, stats: null }, { status: 404 });
+  }
+}
+
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/fonts/GeistMonoVF.woff
+++ b/app/fonts/GeistMonoVF.woff
--- a/app/fonts/GeistVF.woff
+++ b/app/fonts/GeistVF.woff
--- a/app/globals.css
+++ b/app/globals.css
@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -0,0 +1,22 @@
+import ShortUrlForm from '@/components/ShortUrlForm'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-r from-cyan-500 to-blue-500 p-4">
+      <div className="w-full max-w-md">
+        <h1 className="mb-8 text-center text-4xl font-bold text-white">URL Shortener</h1>
+        <ShortUrlForm />
+        <div className="mt-8 text-center text-sm text-white">
+          <p>Short links now include visit tracking and expiration!</p>
+          <p className="mt-2">
+            Report abusive content to:{' '}
+            <a href="mailto:report@example.com" className="underline">
+              report@example.com
+            </a>
+          </p>
+        </div>
+      </div>
+    </main>
+  )
+}
+
--- a/app/s/[shortCode]/page.tsx
+++ b/app/s/[shortCode]/page.tsx
@ -0,0 +1,135 @@
+import { getLongUrl, getUrlStats } from '@/lib/db'
+import Redirect from '@/components/Redirect'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Clock, Link, BarChart2, AlertTriangle } from 'lucide-react'
+
+export default async function RedirectPage({ params }: { params: { shortCode: string } }) {
+  const { longUrl, expired } = getLongUrl(params.shortCode)
+  const stats = getUrlStats(params.shortCode)
+
+  if (longUrl && stats) {
+    return (
+      <>
+        <Redirect url={longUrl} />
+        <LandingPage
+          longUrl={longUrl}
+          shortCode={params.shortCode}
+          visits={stats.visits}
+          expiresAt={stats.expiresAt}
+        />
+      </>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl text-center text-red-600">
+            {expired ? 'Link Expired' : 'Link Not Found'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-center text-gray-600 mb-6">
+            {expired
+              ? 'Sorry, this short link has expired.'
+              : 'The requested short link does not exist.'}
+          </p>
+          <div className="text-center">
+            <a
+              href="/"
+              className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 transform hover:scale-105"
+            >
+              Create a New Short Link
+            </a>
+          </div>
+        </CardContent>
+        <CardFooter className="justify-center">
+          <p className="text-sm text-gray-500">
+            Report abusive content:{' '}
+            <a href="mailto:report@example.com" className="text-blue-500 hover:underline">
+              report@example.com
+            </a>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+function LandingPage({ longUrl, shortCode, visits, expiresAt }: {
+  longUrl: string
+  shortCode: string
+  visits: number
+  expiresAt: string | null
+}) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold text-center text-blue-800">
+            You are being redirected
+          </CardTitle>
+          <CardDescription className="text-center text-gray-600">
+            You will be redirected to your destination in 5 seconds.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Progress value={100} className="w-full h-2 bg-blue-200" />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="flex items-center space-x-2">
+              <Link className="text-blue-600" />
+              <p className="text-sm text-gray-600">
+                Short URL: <span className="font-medium">{`${process.env.NEXT_PUBLIC_BASE_URL}/s/${shortCode}`}</span>
+              </p>
+            </div>
+            <div className="flex items-center space-x-2">
+              <BarChart2 className="text-green-600" />
+              <p className="text-sm text-gray-600">
+                Visits: <span className="font-medium">{visits}</span>
+              </p>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Link className="text-purple-600" />
+              <p className="text-sm text-gray-600">
+                Destination: <span className="font-medium">{longUrl}</span>
+              </p>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Clock className="text-orange-600" />
+              <p className="text-sm text-gray-600">
+                Expires at: <span className="font-medium">{expiresAt ? new Date(expiresAt).toLocaleString() : 'Never'}</span>
+              </p>
+            </div>
+          </div>
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div className="flex items-center space-x-2 mb-2">
+              <AlertTriangle className="text-yellow-600" />
+              <h2 className="font-bold text-yellow-800">Disclaimer</h2>
+            </div>
+            <p className="text-sm text-yellow-800">
+              This link will take you to an external website. We are not responsible for the content
+              of external sites. Please proceed with caution.
+            </p>
+          </div>
+          <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+            <h2 className="font-bold text-gray-800 mb-2">Advertisement</h2>
+            <p className="text-sm text-gray-600">
+              This could be your ad! Contact us for advertising opportunities.
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="justify-center">
+          <p className="text-sm text-gray-500">
+            Report abusive content:{' '}
+            <a href="mailto:report@example.com" className="text-blue-500 hover:underline">
+              report@example.com
+            </a>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/components/Redirect.tsx
+++ b/components/Redirect.tsx
@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Progress } from "@/components/ui/progress"
+
+export default function Redirect({ url }: { url: string }) {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((oldProgress) => {
+        if (oldProgress === 100) {
+          clearInterval(timer)
+          window.location.href = url
+          return 100
+        }
+        const diff = 100 / 50 // 50 steps for 5 seconds
+        return Math.min(oldProgress + diff, 100)
+      })
+    }, 100)
+
+    return () => clearInterval(timer)
+  }, [url])
+
+  return (
+    <Progress value={progress} className="w-full h-2 bg-blue-200 fixed top-0 left-0 z-50" />
+  )
+}
+
--- a/components/ShortUrlForm.tsx
+++ b/components/ShortUrlForm.tsx
@ -0,0 +1,106 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function ShortUrlForm() {
+  const [longUrl, setLongUrl] = useState('')
+  const [shortUrl, setShortUrl] = useState('')
+  const [expiresIn, setExpiresIn] = useState('3600') // 默认1小时
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const generateShortUrl = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const response = await fetch('/api/shorten', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ url: longUrl, expiresIn: parseInt(expiresIn) }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to create short URL')
+      }
+
+      const data = await response.json()
+      setShortUrl(data.shortUrl)
+    } catch (err) {
+      setError('An error occurred while creating the short URL')
+      console.error(err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6">
+      <form onSubmit={generateShortUrl} className="space-y-4">
+        <div>
+          <label htmlFor="longUrl" className="block text-sm font-medium text-gray-700">
+            Enter your long URL
+          </label>
+          <input
+            type="url"
+            id="longUrl"
+            value={longUrl}
+            onChange={(e) => setLongUrl(e.target.value)}
+            required
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            placeholder="https://example.com/very/long/url"
+          />
+        </div>
+        <div>
+          <label htmlFor="expiresIn" className="block text-sm font-medium text-gray-700">
+            Link expiration time
+          </label>
+          <select
+            id="expiresIn"
+            value={expiresIn}
+            onChange={(e) => setExpiresIn(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          >
+            <option value="3600">1 hour</option>
+            <option value="86400">1 day</option>
+            <option value="604800">1 week</option>
+            <option value="2592000">1 month</option>
+            <option value="31536000">1 year</option>
+            <option value="0">Never (permanent)</option>
+          </select>
+        </div>
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 disabled:bg-blue-300"
+        >
+          {isLoading ? 'Creating...' : 'Shorten URL'}
+        </button>
+      </form>
+      {error && (
+        <div className="mt-4 p-2 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+      {shortUrl && (
+        <div className="mt-6">
+          <h2 className="text-lg font-semibold text-gray-700">Your shortened URL:</h2>
+          <div className="mt-2 p-4 bg-gray-100 rounded-md">
+            <a
+              href={shortUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline break-all"
+            >
+              {shortUrl}
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@ -0,0 +1,80 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
+
--- a/lib/db.ts
+++ b/lib/db.ts
@ -0,0 +1,70 @@
+import Database from 'better-sqlite3';
+import { nanoid } from 'nanoid';
+
+const db = new Database('shorturl.db');
+
+// 创建表（如果不存在）
+db.exec(`
+  CREATE TABLE IF NOT EXISTS urls (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    short_code TEXT UNIQUE,
+    long_url TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    visits INTEGER DEFAULT 0,
+    expires_at DATETIME
+  )
+`);
+
+// 定义接口
+
+interface UrlResult {
+  long_url: string;
+  expires_at: string | null;
+}
+
+interface UrlStats {
+  visits: number;
+  expires_at: string | null;
+}
+
+// 创建短链接
+export function createShortUrl(longUrl: string, expiresIn: number): string {
+  const shortCode = nanoid(6);
+  const expiresAt = expiresIn === 0 ? null : new Date(Date.now() + expiresIn * 1000).toISOString();
+  const stmt = db.prepare('INSERT INTO urls (short_code, long_url, expires_at) VALUES (?, ?, ?)');
+  stmt.run(shortCode, longUrl, expiresAt);
+  return shortCode;
+}
+
+// 获取长链接
+export function getLongUrl(shortCode: string): { longUrl: string | null, expired: boolean } {
+  const stmt = db.prepare('SELECT long_url, expires_at FROM urls WHERE short_code = ?');
+  const result: UrlResult | undefined = stmt.get(shortCode) as UrlResult | undefined;
+  
+  if (!result) {
+    return { longUrl: null, expired: false };
+  }
+
+  if (result.expires_at === null) {
+    db.prepare('UPDATE urls SET visits = visits + 1 WHERE short_code = ?').run(shortCode);
+    return { longUrl: result.long_url, expired: false };
+  }
+
+  const now = new Date();
+  const expiresAt = new Date(result.expires_at);
+  
+  if (expiresAt < now) {
+    return { longUrl: null, expired: true };
+  }
+
+  db.prepare('UPDATE urls SET visits = visits + 1 WHERE short_code = ?').run(shortCode);
+  
+  return { longUrl: result.long_url, expired: false };
+}
+
+// 获取链接统计信息
+export function getUrlStats(shortCode: string): { visits: number, expiresAt: string | null } | null {
+  const stmt = db.prepare('SELECT visits, expires_at FROM urls WHERE short_code = ?');
+  const result: UrlStats | undefined = stmt.get(shortCode) as UrlStats | undefined;
+  return result ? { visits: result.visits, expiresAt: result.expires_at } : null;
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,35 @@
+{
+  "name": "short-url",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-progress": "^1.1.0",
+    "better-sqlite3": "^11.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.461.0",
+    "nanoid": "^5.0.8",
+    "next": "14.2.16",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.16",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,63 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    darkMode: ["class"],
+    content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./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)'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}