[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Camera, MapPin, Phone, Users, Calendar, Gift, Settings, ImageIcon, UserCheck } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" // 用户端首页 - 佛系风格 function UserHomePage() { return (

{/* 顶部导航 - 佛系配色 */}

静心照相馆

{/* 轮播图区域 - 佛系渐变 */}

静心·慢生活

用镜头记录内心的宁静

{/* 套餐介绍 - 文字形式 */}

套餐介绍

{[ { name: "套餐一", originalPrice: "1999", salePrice: "199", description: "肖像一套", includes: ["提供两套服装", "提供两套妆造", "赠送两张精修电子底片"], }, { name: "套餐二", originalPrice: "2999", salePrice: "299", description: "情侣写真套装", includes: ["提供三套服装", "提供三套妆造", "赠送五张精修电子底片", "含外景拍摄"], }, { name: "套餐三", originalPrice: "3999", salePrice: "399", description: "全家福套装", includes: ["提供四套服装", "提供全家妆造", "赠送十张精修电子底片", "含室内外景拍摄"], }, ].map((item, index) => (

{item.name}

{item.description}

原价 ¥{item.originalPrice}

售卡 ¥{item.salePrice}

{item.includes.map((include, idx) => (

{include}

))}

{/* 团队介绍 */}

专业团队

{[ { name: "静心老师", role: "首席摄影师", exp: "8年经验" }, { name: "雅韵老师", role: "资深化妆师", exp: "6年经验" }, { name: "慧心老师", role: "后期总监", exp: "5年经验" }, ].map((member, index) => (

{member.name}

{member.role}

{member.exp}

))}

{/* 联系信息 */}

联系我们

北京市朝阳区禅意街88号静心大厦3楼

400-888-6666

{/* 底部导航 */}

首页

相册

我的

) } // 用户端相册页面 - 佛系风格 function UserAlbumPage() { const [selectedCategory, setSelectedCategory] = useState("全部") const categories = ["全部", "个人写真", "情侣照", "全家福", "婚纱照", "儿童照"] return (

{/* 顶部导航 */}

作品相册

{/* 分类标签 */}

{categories.map((category) => ( ))}

{/* 相册网格 */}

{Array.from({ length: 12 }).map((_, index) => (

))}

{/* 底部导航 */}

首页

相册

我的

) } // 用户端个人中心 - 简化版 function UserProfilePage() { return (

{/* 顶部用户信息 */}

张小美

手机号：138****8888

{/* 积分卡片 */}

我的积分

1,280

可抵扣 ¥12.8

{/* 功能菜单 - 简化版 */}

我的预约

2 {">"}

{/* 底部导航 */}

首页

相册

我的

) } // 管理员端预约管理 function AdminAppointmentPage() { const [selectedTab, setSelectedTab] = useState("all") return (

{/* 顶部导航 */}

预约管理

管理员

{/* 预约状态标签 */}

{[ { key: "all", label: "全部", count: 15 }, { key: "pending", label: "待确认", count: 3 }, { key: "confirmed", label: "已确认", count: 8 }, { key: "completed", label: "已完成", count: 4 }, ].map((tab) => ( ))}

{/* 预约列表 */}

{[ { id: "APT001", customer: "张小美", phone: "138****8888", service: "套餐一 - 肖像一套", date: "2024-01-15 14:00", status: "pending", amount: "¥199", }, { id: "APT002", customer: "李先生", phone: "139****9999", service: "套餐二 - 情侣写真套装", date: "2024-01-16 10:00", status: "confirmed", amount: "¥299", }, { id: "APT003", customer: "王女士", phone: "137****7777", service: "套餐三 - 全家福套装", date: "2024-01-14 16:00", status: "completed", amount: "¥399", }, ].map((appointment) => (

{appointment.customer}

{appointment.phone}

{appointment.status === "pending" ? "待确认" : appointment.status === "confirmed" ? "已确认" : "已完成"}

服务项目： {appointment.service}

预约时间： {appointment.date}

预约金额： {appointment.amount}

{appointment.status === "pending" && (

)} ))}

{/* 底部导航 */}

预约

首页管理

相册管理

) } // 管理员端首页管理 - 更新套餐管理 function AdminHomeManagePage() { return (

{/* 顶部导航 */}

首页管理

管理员

{/* 管理功能列表 */}

{/* 轮播图管理 */}

轮播图管理

{Array.from({ length: 3 }).map((_, index) => (

))}

{/* 套餐管理 - 文字形式 */}

套餐管理

{[ { name: "套餐一", originalPrice: "1999", salePrice: "199", description: "肖像一套", includes: "提供两套服装、提供两套妆造、赠送两张精修电子底片", status: "上架", }, { name: "套餐二", originalPrice: "2999", salePrice: "299", description: "情侣写真套装", includes: "提供三套服装、提供三套妆造、赠送五张精修电子底片、含外景拍摄", status: "上架", }, { name: "套餐三", originalPrice: "3999", salePrice: "399", description: "全家福套装", includes: "提供四套服装、提供全家妆造、赠送十张精修电子底片、含室内外景拍摄", status: "下架", }, ].map((item, index) => (

{item.name} ({item.description})

{item.status}

原价 ¥{item.originalPrice} 售卡 ¥{item.salePrice}

{item.includes}

))}

{/* 团队管理 */}

团队管理

{[ { name: "静心老师", role: "首席摄影师" }, { name: "雅韵老师", role: "资深化妆师" }, { name: "慧心老师", role: "后期总监" }, ].map((member, index) => (

{member.name}

{member.role}

))}

{/* 联系信息管理 */}

联系信息

北京市朝阳区禅意街88号静心大厦3楼

400-888-6666

{/* 底部导航 */}

预约

首页管理

相册管理

) } // 管理员端相册管理 - 佛系风格 function AdminAlbumManagePage() { const [selectedCategory, setSelectedCategory] = useState("全部") const categories = ["全部", "个人写真", "情侣照", "全家福", "婚纱照", "儿童照"] return (

{/* 顶部导航 */}

相册管理

管理员

{/* 分类管理 */}

分类管理

{categories.map((category) => ( ))}

{/* 图片管理网格 */}

{Array.from({ length: 12 }).map((_, index) => (

{/* 操作按钮 */}

{/* 状态标识 */}

已发布

))}

{/* 批量操作栏 */}

全选

{/* 底部导航 */}

预约

首页管理

相册管理

) } // 主应用组件 export default function PhotoStudioMiniProgram() { const [currentPage, setCurrentPage] = useState("user-home") const [userType, setUserType] = useState<"user" | "admin">("user") const renderPage = () => { switch (currentPage) { case "user-home": return case "user-album": return case "user-profile": return case "admin-appointment": return case "admin-home": return case "admin-album": return default: return } } return (

{/* 页面切换器 */}

静心照相馆小程序

{userType === "user" ? ( <> ) : ( <> )}

{/* 页面内容 */} {renderPage()}

) }