feat: 完整 MVP — 剁手小黑屋反冲动消费 Web App

- 数据层: Prisma 7 + SQLite (better-sqlite3 adapter), Item 模型
- API: POST/GET/PATCH /api/items, 商品 CRUD 与状态流转
- 关押表单: 图片拖拽上传 + Canvas 压缩, Base64 存储
- 首页看守所: 72h 倒计时 Hook, 省钱看板, 冷却/释放卡片交互
- PWA: manifest.ts, apple-icon, viewport 沉浸配置, iOS 引导组件
- 部署: Dockerfile 多阶段构建, docker-compose, Jenkinsfile CI/CD
- 图标: 全套专属像素风锁头+购物车图标 (favicon/96/180/192/512/OG)

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+.next
+.git
+.gitignore
+*.md
+.env*.local
+dev.db
+dev.db-journal

.gitignore

@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/src/generated/prisma
+
+# database
+*.db
+*.db-journal

Dockerfile

@@ -0,0 +1,44 @@
+FROM node:20-alpine AS base
+RUN npm config set registry https://registry.npmmirror.com
+ENV PRISMA_ENGINES_MIRROR=https://registry.npmmirror.com/-/binary/prisma
+
+# --- Dependencies ---
+FROM base AS deps
+RUN apk add --no-cache libc6-compat python3 make g++
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# --- Build ---
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npx prisma generate
+ENV DATABASE_URL="file:./template.db"
+RUN npx prisma db push
+RUN npm run build
+
+# --- Production ---
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/prisma ./prisma
+COPY --from=builder /app/template.db ./template.db
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+RUN mkdir -p /app/data && chown nextjs:nodejs /app/data
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+ENV DATABASE_URL="file:/app/data/prod.db"
+
+CMD ["sh", "-c", "cp -n template.db /app/data/prod.db 2>/dev/null; node server.js"]

Jenkinsfile

@@ -0,0 +1,53 @@
+pipeline {
+    agent any
+
+    environment {
+        APP_NAME = 'impulse-jail'
+    }
+
+    triggers {
+        GenericTrigger(token: 'impulse-jail-deploy')
+    }
+
+    stages {
+        stage('Checkout') {
+            steps {
+                checkout scm
+            }
+        }
+
+        stage('Build Docker Image') {
+            steps {
+                sh "docker build -t ${APP_NAME}:${BUILD_NUMBER} -t ${APP_NAME}:latest ."
+            }
+        }
+
+        stage('Deploy') {
+            steps {
+                sh """
+                    docker stop ${APP_NAME} || true
+                    docker rm ${APP_NAME} || true
+                    mkdir -p /data/${APP_NAME}
+                    chown 1001:1001 /data/${APP_NAME}
+                    docker run -d \
+                        --name ${APP_NAME} \
+                        --network nginx \
+                        -p 3001:3000 \
+                        -v /data/${APP_NAME}:/app/data \
+                        -e DATABASE_URL=file:/app/data/prod.db \
+                        --restart unless-stopped \
+                        ${APP_NAME}:latest
+                """
+            }
+        }
+    }
+
+    post {
+        success {
+            echo "Deployed ${APP_NAME} build #${BUILD_NUMBER} successfully"
+        }
+        failure {
+            echo "Build #${BUILD_NUMBER} failed"
+        }
+    }
+}

README.md

@@ -1,93 +1,36 @@
-# impulse-jail
+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:
 
-## Getting started
-
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
-
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin https://git.kurihada.com/root/impulse-jail.git
-git branch -M main
-git push -uf origin main
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-## Integrate with your tools
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-- [ ] [Set up project integrations](https://git.kurihada.com/root/impulse-jail/-/settings/integrations)
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-## Collaborate with your team
+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.
 
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Set auto-merge](https://docs.gitlab.com/user/project/merge_requests/auto_merge/)
+## Learn More
 
-## Test and Deploy
+To learn more about Next.js, take a look at the following resources:
 
-Use the built-in continuous integration in GitLab.
+- [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.
 
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-***
+## Deploy on Vercel
 
-# Editing this README
+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.
 
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
-
-## Suggestions for a good README
-
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

docker-compose.yml

@@ -0,0 +1,18 @@
+services:
+  app:
+    build: .
+    image: impulse-jail:latest
+    container_name: impulse-jail
+    ports:
+      - "3001:3000"
+    volumes:
+      - /data/impulse-jail:/app/data
+    environment:
+      - DATABASE_URL=file:/app/data/prod.db
+    restart: unless-stopped
+    networks:
+      - nginx
+
+networks:
+  nginx:
+    external: true

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "impulse-jail",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@prisma/adapter-better-sqlite3": "^7.4.1",
+    "@prisma/client": "^7.4.1",
+    "better-sqlite3": "^12.6.2",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "prisma": "^7.4.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

prisma.config.ts

@@ -0,0 +1,14 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env["DATABASE_URL"],
+  },
+});

prisma/migrations/20260225093801_init/migration.sql

@@ -0,0 +1,10 @@
+-- CreateTable
+CREATE TABLE "Item" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "price" REAL NOT NULL,
+    "link" TEXT NOT NULL,
+    "image" TEXT NOT NULL,
+    "status" TEXT NOT NULL DEFAULT 'cooling',
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "sqlite"

prisma/schema.prisma

@@ -0,0 +1,18 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../src/generated/prisma"
+}
+
+datasource db {
+  provider = "sqlite"
+}
+
+model Item {
+  id        String   @id @default(uuid())
+  name      String
+  price     Float
+  link      String
+  image     String
+  status    String   @default("cooling")
+  createdAt DateTime @default(now())
+}

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/add/page.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useState, useRef, type ChangeEvent, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { Upload, ShieldAlert, ArrowLeft, Loader2 } from "lucide-react";
+
+const MAX_IMAGE_WIDTH = 800;
+const MAX_IMAGE_HEIGHT = 800;
+const IMAGE_QUALITY = 0.7;
+
+function compressImage(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        let { width, height } = img;
+
+        if (width > MAX_IMAGE_WIDTH || height > MAX_IMAGE_HEIGHT) {
+          const ratio = Math.min(
+            MAX_IMAGE_WIDTH / width,
+            MAX_IMAGE_HEIGHT / height
+          );
+          width = Math.round(width * ratio);
+          height = Math.round(height * ratio);
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d")!;
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL("image/jpeg", IMAGE_QUALITY));
+      };
+      img.onerror = reject;
+      img.src = e.target?.result as string;
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export default function AddItemPage() {
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [name, setName] = useState("");
+  const [price, setPrice] = useState("");
+  const [link, setLink] = useState("");
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [imageBase64, setImageBase64] = useState<string>("");
+  const [submitting, setSubmitting] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+
+  async function handleImageFile(file: File) {
+    if (!file.type.startsWith("image/")) return;
+    const compressed = await compressImage(file);
+    setImageBase64(compressed);
+    setImagePreview(compressed);
+  }
+
+  function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) handleImageFile(file);
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) handleImageFile(file);
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!name || !price || !link || !imageBase64) return;
+
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/items", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+          price: parseFloat(price),
+          link,
+          image: imageBase64,
+        }),
+      });
+      if (res.ok) {
+        router.push("/");
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+      <div className="mx-auto max-w-lg px-4 py-8">
+        <button
+          onClick={() => router.push("/")}
+          className="mb-6 flex items-center gap-1.5 text-sm text-zinc-500 transition hover:text-zinc-300"
+        >
+          <ArrowLeft size={16} />
+          返回看守所
+        </button>
+
+        <div className="mb-8 flex items-center gap-3">
+          <ShieldAlert className="text-red-500" size={28} />
+          <h1 className="text-2xl font-bold tracking-tight">关押新商品</h1>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* 商品名称 */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-zinc-400">
+              商品名称
+            </label>
+            <input
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="例：机械键盘 / AirPods Max"
+              className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-2.5 text-zinc-100 placeholder:text-zinc-600 focus:border-red-500/50 focus:outline-none focus:ring-1 focus:ring-red-500/30"
+            />
+          </div>
+
+          {/* 价格 */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-zinc-400">
+              价格（元）
+            </label>
+            <input
+              type="number"
+              required
+              min="0"
+              step="0.01"
+              value={price}
+              onChange={(e) => setPrice(e.target.value)}
+              placeholder="0.00"
+              className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-2.5 text-zinc-100 placeholder:text-zinc-600 focus:border-red-500/50 focus:outline-none focus:ring-1 focus:ring-red-500/30"
+            />
+          </div>
+
+          {/* 购买链接 */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-zinc-400">
+              购买链接
+            </label>
+            <input
+              type="url"
+              required
+              value={link}
+              onChange={(e) => setLink(e.target.value)}
+              placeholder="https://..."
+              className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-2.5 text-zinc-100 placeholder:text-zinc-600 focus:border-red-500/50 focus:outline-none focus:ring-1 focus:ring-red-500/30"
+            />
+          </div>
+
+          {/* 图片上传 */}
+          <div>
+            <label className="mb-1.5 block text-sm font-medium text-zinc-400">
+              商品图片
+            </label>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleFileChange}
+              className="hidden"
+            />
+            <div
+              onClick={() => fileInputRef.current?.click()}
+              onDragOver={(e) => {
+                e.preventDefault();
+                setDragOver(true);
+              }}
+              onDragLeave={() => setDragOver(false)}
+              onDrop={handleDrop}
+              className={`flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed transition ${
+                dragOver
+                  ? "border-red-500 bg-red-500/5"
+                  : "border-zinc-700 bg-zinc-900 hover:border-zinc-600"
+              } ${imagePreview ? "p-2" : "p-8"}`}
+            >
+              {imagePreview ? (
+                <img
+                  src={imagePreview}
+                  alt="预览"
+                  className="max-h-48 rounded object-contain"
+                />
+              ) : (
+                <>
+                  <Upload className="mb-2 text-zinc-600" size={32} />
+                  <p className="text-sm text-zinc-500">
+                    点击或拖拽上传商品图片
+                  </p>
+                  <p className="mt-1 text-xs text-zinc-600">
+                    图片将自动压缩至 800px 以内
+                  </p>
+                </>
+              )}
+            </div>
+            {imagePreview && (
+              <button
+                type="button"
+                onClick={() => {
+                  setImagePreview(null);
+                  setImageBase64("");
+                }}
+                className="mt-2 text-xs text-zinc-500 hover:text-red-400"
+              >
+                移除图片，重新上传
+              </button>
+            )}
+          </div>
+
+          {/* 提交 */}
+          <button
+            type="submit"
+            disabled={submitting || !name || !price || !link || !imageBase64}
+            className="flex w-full items-center justify-center gap-2 rounded-lg bg-red-600 py-3 font-semibold text-white transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {submitting ? (
+              <Loader2 className="animate-spin" size={18} />
+            ) : (
+              <ShieldAlert size={18} />
+            )}
+            {submitting ? "正在关押中…" : "确认关入小黑屋"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

src/app/api/items/[id]/route.ts

@@ -0,0 +1,22 @@
+import { prisma } from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const body = await request.json();
+  const { status } = body;
+
+  if (!status || !["saved", "bought"].includes(status)) {
+    return NextResponse.json({ error: "无效的状态值" }, { status: 400 });
+  }
+
+  const item = await prisma.item.update({
+    where: { id },
+    data: { status },
+  });
+
+  return NextResponse.json(item);
+}

src/app/api/items/route.ts

@@ -0,0 +1,24 @@
+import { prisma } from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const items = await prisma.item.findMany({
+    orderBy: { createdAt: "desc" },
+  });
+  return NextResponse.json(items);
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const { name, price, link, image } = body;
+
+  if (!name || price == null || !link || !image) {
+    return NextResponse.json({ error: "缺少必填字段" }, { status: 400 });
+  }
+
+  const item = await prisma.item.create({
+    data: { name, price: Number(price), link, image },
+  });
+
+  return NextResponse.json(item, { status: 201 });
+}

src/app/globals.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+
+@theme inline {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  font-family: var(--font-sans), system-ui, sans-serif;
+}

src/app/layout.tsx

@@ -0,0 +1,53 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import PwaInstallGuide from "@/components/PwaInstallGuide";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+};
+
+export const metadata: Metadata = {
+  title: "剁手小黑屋 | ImpulseJail",
+  description: "反冲动消费工具——把想买的商品关进小黑屋冷却 72 小时",
+  appleWebApp: {
+    capable: true,
+    title: "小黑屋",
+    statusBarStyle: "black-translucent",
+  },
+  formatDetection: {
+    telephone: false,
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+        <PwaInstallGuide />
+      </body>
+    </html>
+  );
+}

src/app/manifest.ts

@@ -0,0 +1,25 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "剁手小黑屋",
+    short_name: "小黑屋",
+    description: "反冲动消费，72小时冷静期",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#000000",
+    theme_color: "#000000",
+    icons: [
+      {
+        src: "/icon-192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/icon-512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  };
+}

src/app/page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import {
+  ShieldAlert,
+  Plus,
+  Lock,
+  PartyPopper,
+  ShoppingCart,
+  Timer,
+  Ban,
+  Inbox,
+} from "lucide-react";
+import { useCountdown } from "@/hooks/useCountdown";
+
+interface Item {
+  id: string;
+  name: string;
+  price: number;
+  link: string;
+  image: string;
+  status: string;
+  createdAt: string;
+}
+
+function ItemCard({
+  item,
+  onStatusChange,
+}: {
+  item: Item;
+  onStatusChange: () => void;
+}) {
+  const { display, isExpired } = useCountdown(item.createdAt);
+  const [updating, setUpdating] = useState(false);
+
+  async function updateStatus(status: "saved" | "bought") {
+    setUpdating(true);
+    try {
+      await fetch(`/api/items/${item.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status }),
+      });
+
+      if (status === "bought") {
+        window.open(item.link, "_blank");
+      }
+
+      onStatusChange();
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900/80 transition hover:border-zinc-700">
+      <div className="flex gap-4 p-4">
+        {/* 商品图片 */}
+        <div className="h-24 w-24 shrink-0 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-800">
+          <img
+            src={item.image}
+            alt={item.name}
+            className="h-full w-full object-cover"
+          />
+        </div>
+
+        {/* 商品信息 */}
+        <div className="flex min-w-0 flex-1 flex-col justify-between">
+          <div>
+            <h3 className="truncate font-semibold text-zinc-100">
+              {item.name}
+            </h3>
+            <p className="mt-0.5 text-lg font-bold text-red-400">
+              ¥{item.price.toLocaleString("zh-CN", { minimumFractionDigits: 2 })}
+            </p>
+          </div>
+
+          {/* 倒计时 */}
+          <div className="flex items-center gap-1.5">
+            <Timer size={14} className="text-zinc-500" />
+            {isExpired ? (
+              <span className="text-sm font-medium text-emerald-400">
+                冷却完毕
+              </span>
+            ) : (
+              <span className="font-mono text-sm font-bold text-red-500">
+                ⏳ {display}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 操作按钮区 */}
+      <div className="border-t border-zinc-800 px-4 py-3">
+        {isExpired ? (
+          <div className="flex gap-2">
+            <button
+              onClick={() => updateStatus("saved")}
+              disabled={updating}
+              className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-emerald-600 py-2 text-sm font-semibold text-white transition hover:bg-emerald-700 disabled:opacity-50"
+            >
+              <PartyPopper size={15} />
+              不想买了，省钱！
+            </button>
+            <button
+              onClick={() => updateStatus("bought")}
+              disabled={updating}
+              className="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-zinc-700 py-2 text-sm font-medium text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-300 disabled:opacity-50"
+            >
+              <ShoppingCart size={15} />
+              还是想买
+            </button>
+          </div>
+        ) : (
+          <button
+            disabled
+            className="flex w-full items-center justify-center gap-1.5 rounded-lg bg-zinc-800 py-2 text-sm font-medium text-zinc-500"
+          >
+            <Lock size={14} />
+            冷却中，不可购买
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function HomePage() {
+  const [items, setItems] = useState<Item[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchItems = useCallback(async () => {
+    const res = await fetch("/api/items");
+    const data: Item[] = await res.json();
+    setItems(data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchItems();
+  }, [fetchItems]);
+
+  const coolingItems = items.filter((i) => i.status === "cooling");
+  const savedTotal = items
+    .filter((i) => i.status === "saved")
+    .reduce((sum, i) => sum + i.price, 0);
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+      <div className="mx-auto max-w-lg px-4 py-8">
+        {/* Header */}
+        <div className="mb-6 flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <ShieldAlert className="text-red-500" size={28} />
+            <h1 className="text-xl font-bold tracking-tight">剁手小黑屋</h1>
+          </div>
+          <Link
+            href="/add"
+            className="flex items-center gap-1.5 rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-700"
+          >
+            <Plus size={16} />
+            关押
+          </Link>
+        </div>
+
+        {/* 省钱看板 */}
+        <div className="mb-6 rounded-xl border border-emerald-500/20 bg-emerald-950/30 p-4">
+          <div className="flex items-center gap-2 text-sm text-emerald-400/70">
+            <Ban size={16} />
+            历史成功拦截冲动消费
+          </div>
+          <p className="mt-1 text-3xl font-bold text-emerald-400">
+            ¥{savedTotal.toLocaleString("zh-CN", { minimumFractionDigits: 2 })}
+          </p>
+        </div>
+
+        {/* 在押商品列表 */}
+        <div className="mb-4 flex items-center gap-2 text-sm font-medium text-zinc-400">
+          <Lock size={14} />
+          在押商品（{coolingItems.length}）
+        </div>
+
+        {loading ? (
+          <div className="flex justify-center py-16">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-700 border-t-red-500" />
+          </div>
+        ) : coolingItems.length === 0 ? (
+          <div className="flex flex-col items-center py-16 text-zinc-600">
+            <Inbox size={48} className="mb-3" />
+            <p className="text-sm">小黑屋空空如也</p>
+            <p className="mt-1 text-xs">看来你最近很理性！</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {coolingItems.map((item) => (
+              <ItemCard
+                key={item.id}
+                item={item}
+                onStatusChange={fetchItems}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/PwaInstallGuide.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { X, Share } from "lucide-react";
+
+const DISMISS_KEY = "pwa-guide-dismissed-at";
+const SUPPRESS_DAYS = 7;
+
+function isDismissed(): boolean {
+  try {
+    const raw = localStorage.getItem(DISMISS_KEY);
+    if (!raw) return false;
+    const dismissedAt = Number(raw);
+    return Date.now() - dismissedAt < SUPPRESS_DAYS * 24 * 60 * 60 * 1000;
+  } catch {
+    return false;
+  }
+}
+
+function dismiss() {
+  try {
+    localStorage.setItem(DISMISS_KEY, String(Date.now()));
+  } catch {}
+}
+
+export default function PwaInstallGuide() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+    const isStandalone =
+      ("standalone" in navigator && (navigator as never)["standalone"]) ||
+      window.matchMedia("(display-mode: standalone)").matches;
+
+    if (isIos && !isStandalone && !isDismissed()) {
+      setVisible(true);
+    }
+  }, []);
+
+  function handleClose() {
+    dismiss();
+    setVisible(false);
+  }
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+          className="fixed inset-x-0 bottom-0 z-50 px-4 pb-6"
+        >
+          <div className="relative mx-auto max-w-lg rounded-2xl border border-zinc-800 bg-zinc-900/95 p-4 shadow-2xl shadow-black/60 backdrop-blur-md">
+            <button
+              onClick={handleClose}
+              className="absolute right-3 top-3 rounded-full p-1 text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+              aria-label="关闭"
+            >
+              <X size={16} />
+            </button>
+
+            <p className="pr-6 text-sm leading-relaxed text-zinc-300">
+              💡 想要最佳体验？点击底部
+              <span className="mx-1 inline-flex translate-y-0.5">
+                <Share size={14} className="text-blue-400" />
+              </span>
+              选择
+              <span className="font-semibold text-zinc-100">
+                「添加到主屏幕」
+              </span>
+              ，即可作为独立 App 沉浸使用。
+            </p>
+
+            {/* 底部小三角指示 Safari 分享按钮位置 */}
+            <div className="mt-3 flex justify-center">
+              <motion.div
+                animate={{ y: [0, 4, 0] }}
+                transition={{ repeat: Infinity, duration: 1.5 }}
+                className="text-zinc-600"
+              >
+                <svg
+                  width="20"
+                  height="10"
+                  viewBox="0 0 20 10"
+                  fill="currentColor"
+                >
+                  <polygon points="10,10 0,0 20,0" />
+                </svg>
+              </motion.div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/hooks/useCountdown.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+const COOLING_HOURS = 72;
+const COOLING_MS = COOLING_HOURS * 60 * 60 * 1000;
+
+export interface CountdownResult {
+  hours: number;
+  minutes: number;
+  seconds: number;
+  isExpired: boolean;
+  display: string;
+}
+
+export function useCountdown(createdAt: string): CountdownResult {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const created = new Date(createdAt).getTime();
+  const deadline = created + COOLING_MS;
+  const remaining = Math.max(0, deadline - now);
+
+  const totalSeconds = Math.floor(remaining / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  const display = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+
+  return {
+    hours,
+    minutes,
+    seconds,
+    isExpired: remaining === 0,
+    display,
+  };
+}

src/lib/prisma.ts

@@ -0,0 +1,14 @@
+import { PrismaClient } from "@/generated/prisma/client";
+import { PrismaBetterSqlite3 } from "@prisma/adapter-better-sqlite3";
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+function createClient() {
+  const url = process.env.DATABASE_URL ?? "file:./dev.db";
+  const adapter = new PrismaBetterSqlite3({ url });
+  return new PrismaClient({ adapter });
+}
+
+export const prisma = globalForPrisma.prisma || createClient();
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}