[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Trash2, Edit, Plus, Upload } from "lucide-react" interface Category { id: string name: string } interface Dish { id: string name: string price: number categoryId: string } export default function MenuEditor() { const [selectedCategory, setSelectedCategory] = useState("") const [categories, setCategories] = useState([ { id: "1", name: "主菜" }, { id: "2", name: "汤品" }, { id: "3", name: "甜品" }, ]) const [dishes, setDishes] = useState([ { id: "10013", name: "百事可乐", price: 24.0, categoryId: "1" }, { id: "10012", name: "GOFRE CHOCOLATE", price: 3.0, categoryId: "1" }, { id: "10011", name: "GAZPACHO ALVALLE", price: 0.0, categoryId: "2" }, { id: "10010", name: "SALMOREJO ALVALLE", price: 0.0, categoryId: "2" }, ]) const [menuInfo, setMenuInfo] = useState({ name: "", name2: "", type: "", description: "", description2: "", backgroundImage: null as File | null, }) const [effectiveInfo, setEffectiveInfo] = useState({ enabled: false, startTime: "", endTime: "", weekdays: { monday: false, tuesday: false, wednesday: false, thursday: false, friday: false, saturday: false, sunday: false, }, effectiveDate: "", }) const filteredDishes = selectedCategory ? dishes.filter((dish) => dish.categoryId === selectedCategory) : dishes const handleDeleteCategory = (id: string) => { setCategories(categories.filter((cat) => cat.id !== id)) } const handleDeleteDish = (id: string) => { setDishes(dishes.filter((dish) => dish.id !== id)) } const handleAddCategory = () => { const newCategory: Category = { id: Date.now().toString(), name: "新分类", } setCategories([...categories, newCategory]) } const handleAddDish = () => { const newDish: Dish = { id: Date.now().toString(), name: "新菜品", price: 0, categoryId: selectedCategory || categories[0]?.id || "", } setDishes([...dishes, newDish]) } return (

菜单编辑

{/* 菜单信息 */} 菜单信息

名称 setMenuInfo({ ...menuInfo, name: e.target.value })} />

名称2 setMenuInfo({ ...menuInfo, name2: e.target.value })} />

类型

背景图片

setMenuInfo({ ...menuInfo, backgroundImage: e.target.files?.[0] || null })} />

{/* 生效信息 */} 生效信息

setEffectiveInfo({ ...effectiveInfo, enabled: checked as boolean })} /> 启用

开始时间 setEffectiveInfo({ ...effectiveInfo, startTime: e.target.value })} />

结束时间 setEffectiveInfo({ ...effectiveInfo, endTime: e.target.value })} />

每周生效

{[ { key: "monday", label: "一" }, { key: "tuesday", label: "二" }, { key: "wednesday", label: "三" }, { key: "thursday", label: "四" }, { key: "friday", label: "五" }, { key: "saturday", label: "六" }, { key: "sunday", label: "日" }, ].map(({ key, label }) => (

setEffectiveInfo({ ...effectiveInfo, weekdays: { ...effectiveInfo.weekdays, [key]: checked as boolean }, }) } /> {label}

))}

{/* 关联菜品 */} 关联菜品

大人菜品

小孩菜品

{/* 左侧分类列表 */} 分类列表

名称操作 {categories.map((category) => ( setSelectedCategory(category.id)} > {category.name}

))}

{/* 右侧菜品列表 */} 菜品列表

名称 ID 价格操作 {filteredDishes.map((dish) => ( {dish.name} {dish.id} ¥{dish.price.toFixed(2)} ))}

) }