+
+ )
+}
+
+export default EmptyState
+
diff --git a/src/src/app/src/components/Common/Input.tsx b/src/src/app/src/components/Common/Input.tsx
new file mode 100644
index 0000000..d8ec633
--- /dev/null
+++ b/src/src/app/src/components/Common/Input.tsx
@@ -0,0 +1,57 @@
+import { ReactNode } from 'react'
+
+interface InputProps {
+ label?: string
+ type?: string
+ value: string
+ onChange: (value: string) => void
+ placeholder?: string
+ icon?: ReactNode
+ error?: string
+ required?: boolean
+ disabled?: boolean
+}
+
+const Input = ({
+ label,
+ type = 'text',
+ value,
+ onChange,
+ placeholder,
+ icon,
+ error,
+ required,
+ disabled,
+}: InputProps) => {
+ return (
+ {icon}
+ {title}
+{description}
+ {actionText && onAction && ( + + )} +
+ {label && (
+
+ )}
+
+ )
+}
+
+export default Input
+
diff --git a/src/src/app/src/components/Common/MealCard.tsx b/src/src/app/src/components/Common/MealCard.tsx
new file mode 100644
index 0000000..ff0778e
--- /dev/null
+++ b/src/src/app/src/components/Common/MealCard.tsx
@@ -0,0 +1,99 @@
+import { Heart, MapPin, Star } from 'lucide-react'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface MealCardProps {
+ id: string
+ name: string
+ image: string
+ price: number
+ location: string
+ rating: number
+ calories: number
+ protein: number
+ isFavorite?: boolean
+ matchRate?: number
+ onToggleFavorite?: () => void
+ onMarkEaten?: () => void
+}
+
+const MealCard = ({
+ id,
+ name,
+ image,
+ price,
+ location,
+ rating,
+ calories,
+ protein,
+ isFavorite = false,
+ matchRate,
+ onToggleFavorite,
+ onMarkEaten,
+}: MealCardProps) => {
+ const [favorite, setFavorite] = useState
+ {icon && (
+
+ {error &&
+ {icon}
+
+ )}
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ disabled={disabled}
+ className={`w-full px-4 py-3 ${icon ? 'pl-11' : ''} border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all ${
+ error ? 'border-red-500' : 'border-gray-300'
+ } ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`}
+ />
+ {error}
} +
+ {/* 图片区域 */}
+
+ )
+}
+
+export default MealCard
+
diff --git a/src/src/app/src/components/Layout/AdminLayout.tsx b/src/src/app/src/components/Layout/AdminLayout.tsx
new file mode 100644
index 0000000..a2ba5da
--- /dev/null
+++ b/src/src/app/src/components/Layout/AdminLayout.tsx
@@ -0,0 +1,200 @@
+import { useNavigate, Outlet, useLocation } from 'react-router-dom'
+import {
+ LayoutDashboard, Users, UtensilsCrossed,
+ LogOut, Menu, X
+} from 'lucide-react'
+import { useState } from 'react'
+
+export default function AdminLayout() {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const [sidebarOpen, setSidebarOpen] = useState(false)
+
+ const handleLogout = () => {
+ if (confirm('确定要退出管理员后台吗？')) {
+ localStorage.removeItem('isAdmin')
+ localStorage.removeItem('token')
+ // 使用window.location.href进行完全刷新和跳转，确保直接返回管理员登录界面
+ window.location.href = '/admin/login'
+ }
+ }
+
+ const menuItems = [
+ {
+ icon: LayoutDashboard,
+ label: '仪表板',
+ path: '/admin/dashboard',
+ description: '系统概览与统计'
+ },
+ {
+ icon: UtensilsCrossed,
+ label: '菜品管理',
+ path: '/admin/dishes',
+ description: '管理所有菜品'
+ },
+ {
+ icon: Users,
+ label: '用户管理',
+ path: '/admin/users',
+ description: '管理用户账号'
+ },
+ ]
+
+ const isActive = (path: string) => location.pathname === path
+
+ return (
+
+ 
+ {matchRate && (
+
+
+ {/* 信息区域 */}
+
+ {matchRate}% 匹配
+
+ )}
+
+
+
+ {name}
+ +
+
+
+
+
+
+ {/* 营养信息 */}
+
+
+ ¥{price}
+
+ 热量: {calories}千卡
+ 蛋白质: {protein}g
+
+
+ {/* 侧边栏 - 桌面版 */}
+
+
+ {/* 移动端侧边栏遮罩 */}
+ {sidebarOpen && (
+
+ ,
+)
+
diff --git a/src/src/app/src/pages/AddDish.tsx b/src/src/app/src/pages/AddDish.tsx
new file mode 100644
index 0000000..8cdccda
--- /dev/null
+++ b/src/src/app/src/pages/AddDish.tsx
@@ -0,0 +1,478 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ChevronLeft, Upload, Plus, X } from 'lucide-react'
+import { uploadDish } from '../api/userDishes'
+
+export default function AddDishPage() {
+ const navigate = useNavigate()
+ const [loading, setLoading] = useState(false)
+
+ // 表单数据
+ const [formData, setFormData] = useState({
+ name: '',
+ description: '',
+ category: '',
+ price: '',
+ window_number: '',
+ image_url: '',
+ calories: '',
+ protein: '',
+ fat: '',
+ carbs: '',
+ spicy_level: '0',
+ tags: '',
+ })
+
+ const [ingredients, setIngredients] = useState([])
+ const [newIngredient, setNewIngredient] = useState('')
+ const [allergens, setAllergens] = useState([])
+ const [newAllergen, setNewAllergen] = useState('')
+
+ // 更新表单字段
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target
+ setFormData(prev => ({ ...prev, [name]: value }))
+ }
+
+ // 添加原料
+ const addIngredient = () => {
+ if (newIngredient.trim()) {
+ setIngredients([...ingredients, newIngredient.trim()])
+ setNewIngredient('')
+ }
+ }
+
+ // 删除原料
+ const removeIngredient = (index: number) => {
+ setIngredients(ingredients.filter((_, i) => i !== index))
+ }
+
+ // 添加过敏原
+ const addAllergen = () => {
+ if (newAllergen.trim()) {
+ setAllergens([...allergens, newAllergen.trim()])
+ setNewAllergen('')
+ }
+ }
+
+ // 删除过敏原
+ const removeAllergen = (index: number) => {
+ setAllergens(allergens.filter((_, i) => i !== index))
+ }
+
+ // 提交表单
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+
+ if (!formData.name.trim()) {
+ alert('请输入菜品名称')
+ return
+ }
+
+ try {
+ setLoading(true)
+
+ const dishData = {
+ name: formData.name.trim(),
+ description: formData.description.trim() || undefined,
+ category: formData.category.trim() || undefined,
+ price: formData.price ? parseFloat(formData.price) : undefined,
+ window_number: formData.window_number.trim() || undefined,
+ image_url: formData.image_url.trim() || undefined,
+ calories: formData.calories ? parseInt(formData.calories) : undefined,
+ protein: formData.protein ? parseFloat(formData.protein) : undefined,
+ fat: formData.fat ? parseFloat(formData.fat) : undefined,
+ carbs: formData.carbs ? parseFloat(formData.carbs) : undefined,
+ spicy_level: parseInt(formData.spicy_level),
+ ingredients: ingredients.length > 0 ? ingredients : undefined,
+ allergens: allergens.length > 0 ? allergens : undefined,
+ }
+
+ const response = await uploadDish(dishData)
+
+ if (response.success) {
+ alert('菜品已提交，等待管理员审核！')
+ navigate('/profile')
+ } else {
+ alert('提交失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('提交菜品失败:', error)
+ alert('提交失败，请稍后重试')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+ (null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ // 检查管理员权限
+ if (localStorage.getItem('isAdmin') !== 'true') {
+ navigate('/admin/login')
+ return
+ }
+
+ loadData()
+ }, [navigate])
+
+ const loadData = async () => {
+ try {
+ setLoading(true)
+
+ // 加载统计信息
+ const statsResponse = await getDashboardStats()
+ if (statsResponse.success) {
+ setStats(statsResponse.data)
+ }
+ } catch (error) {
+ console.error('加载数据失败:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ if (loading) {
+ return (
+ = {
+ '1': '减脂',
+ '2': '增肌',
+ '3': '高蛋白',
+ '4': '低碳水',
+ '5': '低脂肪',
+ '6': '低热量',
+ '7': '均衡营养',
+ '8': '维生素丰富',
+ '9': '膳食纤维',
+ '10': '健身推荐'
+}
+
+interface Dish {
+ id: number
+ name: string
+ price: number
+ original_price: number
+ image: string
+ rating: number
+ sales_count: number
+ category_id: number
+ canteen_id: number
+ canteen_name: string
+ status: string
+ approval_status: string
+ created_at: string
+}
+
+export default function AdminDishesPage() {
+ const navigate = useNavigate()
+ const [dishes, setDishes] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [keyword, setKeyword] = useState('')
+ const [page, setPage] = useState(1)
+ const [total, setTotal] = useState(0)
+ const [showEditModal, setShowEditModal] = useState(false)
+ const [showAddModal, setShowAddModal] = useState(false)
+ const [currentDish, setCurrentDish] = useState(null)
+ const [editForm, setEditForm] = useState({
+ name: '',
+ price: '',
+ original_price: '',
+ status: 'available'
+ })
+ const [addForm, setAddForm] = useState({
+ name: '',
+ description: '',
+ price: '',
+ category_id: null,
+ canteen_id: null,
+ image: '',
+ calories: null,
+ protein: null,
+ fat: null,
+ carbs: null,
+ tags: '',
+ status: 'available'
+ })
+ const [addLoading, setAddLoading] = useState(false)
+
+ const limit = 20
+
+ useEffect(() => {
+ loadDishes()
+ }, [page, keyword, navigate])
+
+ const loadDishes = async () => {
+ try {
+ setLoading(true)
+ const response = await getAllDishes({
+ page,
+ limit,
+ keyword
+ })
+ // 确保从response.data.dishes中获取菜品数组
+ const dishesData = response?.data?.dishes || []
+ setDishes(Array.isArray(dishesData) ? dishesData : [])
+ setTotal(response?.data?.total || 0)
+ } catch (error) {
+ console.error('加载菜品失败:', error)
+ // 出错时确保dishes是一个空数组
+ setDishes([])
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleSearch = () => {
+ setPage(1)
+ loadDishes()
+ }
+
+ const handleEdit = (dish: Dish) => {
+ setCurrentDish(dish)
+ setEditForm({
+ name: dish.name,
+ price: dish.price.toString(),
+ original_price: dish.original_price?.toString() || '',
+ status: dish.status
+ })
+ setShowEditModal(true)
+ }
+
+ const handleSaveEdit = async () => {
+ if (!currentDish) return
+
+ try {
+ await updateDish(currentDish.id, {
+ name: editForm.name,
+ price: Number(editForm.price),
+ original_price: editForm.original_price ? Number(editForm.original_price) : null,
+ status: editForm.status
+ })
+ setShowEditModal(false)
+ loadDishes()
+ } catch (error) {
+ console.error('更新菜品失败:', error)
+ }
+ }
+
+ const handleDelete = async (dish: Dish) => {
+ if (window.confirm(`确定要删除菜品「${dish.name}」吗？`)) {
+ try {
+ await deleteDish(dish.id)
+ loadDishes()
+ } catch (error) {
+ console.error('删除菜品失败:', error)
+ }
+ }
+ }
+
+ const handleAddFormChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target
+ setAddForm(prev => ({
+ ...prev,
+ [name]: name === 'tags' ? value : value === '' ? null : value
+ }))
+ }
+
+ const handleCreateDish = async () => {
+ setAddLoading(true)
+ try {
+ // 表单验证
+ if (!addForm.name || !addForm.price || !addForm.category_id) {
+ alert('菜品名称、价格和分类ID为必填项')
+ return
+ }
+
+ if (isNaN(parseFloat(addForm.price)) || parseFloat(addForm.price) < 0) {
+ alert('请输入有效的价格')
+ return
+ }
+
+ if (isNaN(parseInt(addForm.category_id)) || parseInt(addForm.category_id) < 0) {
+ alert('请输入有效的分类ID')
+ return
+ }
+
+ if (addForm.canteen_id && (isNaN(parseInt(addForm.canteen_id)) || parseInt(addForm.canteen_id) < 0)) {
+ alert('请输入有效的食堂ID')
+ return
+ }
+
+ // 将表单数据转换为正确的类型
+ const dishData = {
+ name: addForm.name.trim(),
+ description: addForm.description?.trim() || null,
+ price: parseFloat(addForm.price),
+ category_id: parseInt(addForm.category_id),
+ canteen_id: addForm.canteen_id ? parseInt(addForm.canteen_id) : null,
+ image: addForm.image?.trim() || null,
+ calories: addForm.calories ? parseInt(addForm.calories) : null,
+ protein: addForm.protein ? parseFloat(addForm.protein) : null,
+ fat: addForm.fat ? parseFloat(addForm.fat) : null,
+ carbs: addForm.carbs ? parseFloat(addForm.carbs) : null,
+ tags: addForm.tags?.trim() || null,
+ status: addForm.status || 'available'
+ }
+
+ console.log('提交的菜品数据:', dishData)
+ await createDish(dishData)
+ alert('菜品添加成功')
+ setShowAddModal(false)
+ loadDishes()
+ // 重置表单
+ setAddForm({
+ name: '',
+ description: '',
+ price: '',
+ category_id: null,
+ canteen_id: null,
+ image: '',
+ calories: null,
+ protein: null,
+ fat: null,
+ carbs: null,
+ tags: '',
+ status: 'available'
+ })
+ } catch (error: any) {
+ console.error('创建菜品失败:', error)
+ // 显示更友好的错误消息
+ alert(`添加菜品失败: ${error.message || '请稍后重试'}`)
+ } finally {
+ setAddLoading(false)
+ }
+ }
+
+ const totalPages = Math.ceil(total / limit)
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(true)
+ const [filter, setFilter] = useState<'pending' | 'approved' | 'rejected'>('pending')
+ const [showDetailModal, setShowDetailModal] = useState(false)
+ const [currentDish, setCurrentDish] = useState(null)
+
+ useEffect(() => {
+ // 检查管理员权限
+ if (localStorage.getItem('isAdmin') !== 'true') {
+ navigate('/admin/login')
+ return
+ }
+ loadDishes()
+ }, [filter, navigate])
+
+ const loadDishes = async () => {
+ try {
+ setLoading(true)
+ const response = await getPendingDishes(filter)
+
+ if (response.success) {
+ setDishes(response.data)
+ } else {
+ alert('加载待审核菜品失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('加载待审核菜品失败:', error)
+ alert('加载待审核菜品失败，请重试')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleApprove = async (dish: PendingDish) => {
+ if (!confirm(`确定要通过菜品"${dish.name}"吗？`)) {
+ return
+ }
+
+ try {
+ const response = await approveDish(dish.id)
+
+ if (response.success) {
+ alert('审核通过！菜品已添加到数据库')
+ loadDishes()
+ } else {
+ alert('操作失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('审核失败:', error)
+ alert('操作失败，请重试')
+ }
+ }
+
+ const handleReject = async (dish: PendingDish) => {
+ const reason = prompt('请输入拒绝原因：', '不符合菜品上传规范')
+ if (!reason) {
+ return
+ }
+
+ try {
+ const response = await rejectDish(dish.id, reason)
+
+ if (response.success) {
+ alert('已拒绝该菜品')
+ loadDishes()
+ } else {
+ alert('操作失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('拒绝失败:', error)
+ alert('操作失败，请重试')
+ }
+ }
+
+ const handleViewDetail = (dish: PendingDish) => {
+ setCurrentDish(dish)
+ setShowDetailModal(true)
+ }
+
+ const parseJsonField = (field: string) => {
+ try {
+ return JSON.parse(field)
+ } catch {
+ return []
+ }
+ }
+
+ const spicyLevelText = ['不辣', '微辣', '中辣', '重辣', '特辣']
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(true)
+ const [keyword, setKeyword] = useState('')
+ const [page, setPage] = useState(1)
+ const [total, setTotal] = useState(0)
+ const [showEditModal, setShowEditModal] = useState(false)
+ const [showPasswordModal, setShowPasswordModal] = useState(false)
+ const [currentUser, setCurrentUser] = useState(null)
+ const [editForm, setEditForm] = useState({
+ name: '',
+ phone: '',
+ email: '',
+ role: 'user'
+ })
+ const [newPassword, setNewPassword] = useState('')
+
+ const limit = 20
+
+ useEffect(() => {
+ // 检查管理员权限
+ if (localStorage.getItem('isAdmin') !== 'true') {
+ navigate('/admin/login')
+ return
+ }
+ loadUsers()
+ }, [page, keyword, navigate])
+
+ const loadUsers = async () => {
+ try {
+ setLoading(true)
+ const response = await getUsers({ page, limit, keyword })
+
+ // 兼容不同的数据格式响应
+ if (response.data && response.data.users) {
+ // 格式1: { success: boolean, data: { users: [], total: number } }
+ setUsers(Array.isArray(response.data.users) ? response.data.users : [])
+ setTotal(response.data.total || 0)
+ } else if (Array.isArray(response.data)) {
+ // 格式2: { data: [], total: number }
+ setUsers(response.data)
+ setTotal(response.total || 0)
+ } else {
+ // 默认处理
+ const usersData = response?.users || response?.data || []
+ setUsers(Array.isArray(usersData) ? usersData : [])
+ setTotal(response?.total || 0)
+ }
+ } catch (error) {
+ console.error('加载用户列表失败:', error)
+ alert('加载用户列表失败，请重试')
+ // 出错时确保users是一个空数组
+ setUsers([])
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleSearch = () => {
+ setPage(1)
+ loadUsers()
+ }
+
+ const handleEdit = (user: User) => {
+ setCurrentUser(user)
+ setEditForm({
+ name: user.name,
+ phone: user.phone,
+ email: user.email || '',
+ role: user.role
+ })
+ setShowEditModal(true)
+ }
+
+ const handleSaveEdit = async () => {
+ if (!currentUser) return
+
+ try {
+ const response = await updateUser(currentUser.id, editForm)
+
+ if (response.success) {
+ alert('更新成功！')
+ setShowEditModal(false)
+ loadUsers()
+ } else {
+ alert('更新失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('更新失败:', error)
+ alert('更新失败，请重试')
+ }
+ }
+
+ const handleResetPassword = (user: User) => {
+ setCurrentUser(user)
+ setNewPassword('')
+ setShowPasswordModal(true)
+ }
+
+ const handleSavePassword = async () => {
+ if (!currentUser) return
+ if (!newPassword || newPassword.length < 6) {
+ alert('密码长度至少为6位')
+ return
+ }
+
+ try {
+ const response = await resetUserPassword(currentUser.id, newPassword)
+
+ if (response.success) {
+ alert('密码重置成功！')
+ setShowPasswordModal(false)
+ setNewPassword('')
+ } else {
+ alert('密码重置失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('密码重置失败:', error)
+ alert('密码重置失败，请重试')
+ }
+ }
+
+ const totalPages = Math.ceil(total / limit)
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ loadFavorites()
+ }, [])
+
+ const loadFavorites = async () => {
+ try {
+ setLoading(true)
+ const response = await getFavorites()
+
+ if (response.success) {
+ setFavorites(response.data)
+ } else {
+ console.error('加载收藏失败:', response.message)
+ }
+ } catch (error) {
+ console.error('加载收藏失败:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleRemoveFavorite = async (dishId: number) => {
+ if (!confirm('确定要取消收藏吗？')) {
+ return
+ }
+
+ try {
+ const response = await removeFavorite(dishId)
+
+ if (response.success) {
+ // 从列表中移除
+ setFavorites(favorites.filter(item => item.id !== dishId))
+ } else {
+ alert('取消收藏失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('取消收藏失败:', error)
+ alert('取消收藏失败，请重试')
+ }
+ }
+
+ const handleDishClick = (dishId: number) => {
+ navigate(`/meal/${dishId}`)
+ }
+
+ return (
+ (false)
+ const [loading, setLoading] = useState(true)
+
+ interface Meal {
+ id: string
+ name: string
+ image: string
+ price: number
+ location: string
+ rating: number
+ calories: number
+ protein: number
+ isFavorite?: boolean
+ matchRate?: number
+ }
+
+ const [meals, setMeals] = useState([])
+ const [greeting, setGreeting] = useState('')
+ const [userName, setUserName] = useState('用户')
+ const [activeCategory, setActiveCategory] = useState('推荐')
+
+ interface NutritionData {
+ caloriesConsumed: number
+ caloriesGoal: number
+ proteinConsumed: number
+ proteinGoal: number
+ }
+
+ const [nutritionData, setNutritionData] = useState({
+ caloriesConsumed: 0,
+ caloriesGoal: 2000,
+ proteinConsumed: 0,
+ proteinGoal: 80
+ })
+
+ // 上传菜品相关状态
+ const [showUploadModal, setShowUploadModal] = useState(false)
+ const [uploading, setUploading] = useState(false)
+
+ interface Canteen {
+ id: string
+ name: string
+ }
+
+ const [canteens, setCanteens] = useState([])
+ const [uploadForm, setUploadForm] = useState({
+ name: '',
+ description: '',
+ category: '',
+ price: '',
+ canteen_id: '',
+ window_number: '',
+ image_url: '',
+ calories: '',
+ protein: '',
+ fat: '',
+ carbs: '',
+ ingredients: '',
+ spicy_level: '0'
+ })
+
+ useEffect(() => {
+ console.log('✅ Home 组件已挂载')
+ const hour = new Date().getHours()
+ if (hour < 11) setGreeting('早上好')
+ else if (hour < 14) setGreeting('中午好')
+ else if (hour < 18) setGreeting('下午好')
+ else setGreeting('晚上好')
+
+ // 加载用户信息和推荐菜品
+ loadData()
+ }, [])
+
+ const loadData = async () => {
+ try {
+ setLoading(true)
+
+ // 获取用户信息
+ const userResponse = await getCurrentUser()
+ if (userResponse.success && userResponse.data) {
+ setUserName(userResponse.data.name || userResponse.data.username || '用户')
+ }
+
+ // 获取推荐菜品
+ const dishesResponse = await getRecommendedDishes(10)
+ if (dishesResponse.success && dishesResponse.data) {
+ const formattedMeals = dishesResponse.data.map((dish: any) => ({
+ id: dish.id,
+ name: dish.name,
+ image: dish.image || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500',
+ price: dish.price,
+ location: dish.canteen_name || '食堂',
+ rating: dish.rating || 5.0,
+ calories: dish.calories || 0,
+ protein: dish.protein || 0,
+ matchRate: dish.match_rate || 85
+ }))
+ setMeals(formattedMeals)
+ }
+
+ // 获取食堂列表
+ const canteensResponse = await getCanteens()
+ if (canteensResponse.success && canteensResponse.data) {
+ setCanteens(canteensResponse.data)
+ }
+
+ // 获取今日营养摄入数据
+ const nutritionResponse = await getTodayNutrition()
+ if (nutritionResponse.success && nutritionResponse.data) {
+ setNutritionData({
+ caloriesConsumed: nutritionResponse.data.current.calories || 0,
+ caloriesGoal: nutritionResponse.data.target.calories || 2000,
+ proteinConsumed: nutritionResponse.data.current.protein || 0,
+ proteinGoal: nutritionResponse.data.target.protein || 80
+ })
+ }
+
+ } catch (error) {
+ console.error('加载数据失败:', error)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleRefresh = async (categoryOverride?: string, useRandom: boolean = false) => {
+ console.log('🔄 handleRefresh 被调用', '分类参数:', categoryOverride || activeCategory, '随机:', useRandom)
+ setRefreshing(true)
+ try {
+ // 使用传入的分类参数，如果没有则使用当前激活的分类
+ const currentCategory = categoryOverride !== undefined ? categoryOverride : activeCategory
+ console.log('📡 开始请求推荐菜品...', '分类:', currentCategory, '随机:', useRandom)
+
+ // 将分类名称转换为后端category字段
+ const categoryMap: Record = {
+ '推荐': '',
+ '减脂': '减脂',
+ '增肌': '增肌',
+ '清淡': '清淡',
+ '川菜': '川菜',
+ '西餐': '西餐'
+ }
+ const category = currentCategory === '推荐' ? undefined : categoryMap[currentCategory]
+
+ const response = await getRecommendedDishes(10, category, useRandom)
+ console.log('📡 推荐菜品响应:', response)
+ if (response.success && response.data) {
+ const formattedMeals = response.data.map((dish: any) => ({
+ id: dish.id,
+ name: dish.name,
+ image: dish.image || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500',
+ price: dish.price,
+ location: dish.canteen_name || '食堂',
+ rating: dish.rating || 5.0,
+ calories: dish.calories || 0,
+ protein: dish.protein || 0,
+ matchRate: dish.match_rate || 85
+ }))
+ setMeals(formattedMeals)
+ console.log('✅ 菜品列表已更新，数量:', formattedMeals.length)
+ }
+ } catch (error) {
+ console.error('❌ 刷新失败:', error)
+ } finally {
+ setRefreshing(false)
+ console.log('✅ 刷新完成')
+ }
+ }
+
+ const handleCategoryChange = (category: string) => {
+ console.log('🔍 点击分类:', category)
+ console.log('🔍 当前分类:', activeCategory)
+
+ // 先检查是否需要切换
+ if (category !== activeCategory) {
+ console.log('🔍 分类已切换，刷新菜品列表...')
+ // 更新选中状态
+ setActiveCategory(category)
+ // 立即用新分类刷新菜品列表（不等待状态更新）
+ handleRefresh(category)
+ } else {
+ console.log('⚠️ 点击的是当前已选中的分类，不刷新列表')
+ }
+ }
+
+ const handleUploadDish = async () => {
+ if (!uploadForm.name.trim()) {
+ alert('请输入菜品名称')
+ return
+ }
+
+ // 验证营养值范围
+ const protein = uploadForm.protein ? parseFloat(uploadForm.protein) : 0
+ const fat = uploadForm.fat ? parseFloat(uploadForm.fat) : 0
+ const carbs = uploadForm.carbs ? parseFloat(uploadForm.carbs) : 0
+ const calories = uploadForm.calories ? parseInt(uploadForm.calories) : 0
+
+ if (protein > 999.99) {
+ alert('蛋白质值不能超过 999.99g')
+ return
+ }
+ if (fat > 999.99) {
+ alert('脂肪值不能超过 999.99g')
+ return
+ }
+ if (carbs > 999.99) {
+ alert('碳水化合物值不能超过 999.99g')
+ return
+ }
+ if (calories > 999999) {
+ alert('热量值不能超过 999999 卡')
+ return
+ }
+
+ try {
+ setUploading(true)
+ const dishData: UserDishData = {
+ name: uploadForm.name,
+ description: uploadForm.description || undefined,
+ category: uploadForm.category || undefined,
+ price: uploadForm.price ? parseFloat(uploadForm.price) : undefined,
+ canteen_id: uploadForm.canteen_id ? parseInt(uploadForm.canteen_id) : undefined,
+ window_number: uploadForm.window_number || undefined,
+ image_url: uploadForm.image_url || undefined,
+ calories: calories > 0 ? calories : undefined,
+ protein: protein > 0 ? protein : undefined,
+ fat: fat > 0 ? fat : undefined,
+ carbs: carbs > 0 ? carbs : undefined,
+ ingredients: uploadForm.ingredients || undefined,
+ spicy_level: parseInt(uploadForm.spicy_level)
+ }
+
+ const response = await uploadDish(dishData)
+
+ if (response.success) {
+ alert('✅ 菜品添加成功！已自动发布到菜单中')
+ setShowUploadModal(false)
+ setUploadForm({
+ name: '',
+ description: '',
+ category: '',
+ price: '',
+ canteen_id: '',
+ window_number: '',
+ image_url: '',
+ calories: '',
+ protein: '',
+ fat: '',
+ carbs: '',
+ ingredients: '',
+ spicy_level: '0'
+ })
+ } else {
+ alert('提交失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('上传菜品失败:', error)
+ alert('提交失败，请重试')
+ } finally {
+ setUploading(false)
+ }
+ }
+
+ const { caloriesConsumed, caloriesGoal, proteinConsumed, proteinGoal } = nutritionData
+
+ return (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ {/* 移动端侧边栏 */}
+
+
+ {/* 主内容区 */}
+
+ )
+}
+
diff --git a/src/src/app/src/components/Layout/MainLayout.tsx b/src/src/app/src/components/Layout/MainLayout.tsx
new file mode 100644
index 0000000..c22c310
--- /dev/null
+++ b/src/src/app/src/components/Layout/MainLayout.tsx
@@ -0,0 +1,57 @@
+import { Outlet, useLocation, Link } from 'react-router-dom'
+import { Home, Book, FileText, User, ClipboardList } from 'lucide-react'
+import { LucideIcon } from 'lucide-react'
+
+interface MainLayoutProps {
+ onLogout: () => void
+}
+
+interface NavItem {
+ path: string
+ icon: LucideIcon
+ label: string
+}
+
+const MainLayout = ({ onLogout }: MainLayoutProps) => {
+ const location = useLocation()
+
+ const navItems: NavItem[] = [
+ { path: '/home', icon: Home, label: '首页' },
+ { path: '/personal-file', icon: ClipboardList, label: '个人档案' },
+ { path: '/report', icon: FileText, label: '报告' },
+ ]
+
+ const isActive = (path: string) => location.pathname === path
+
+ return (
+
+ {/* 顶部导航栏 - 移动端 */}
+
+
+
+
+ {/* 页面内容 */}
+
+
+
+
+
+ {/* 占位 */}
+
+ {/* 手机容器 - 严格9:20比例 (9/20 = 0.45, 所以宽度×20/9=高度) */}
+
+ )
+}
+
+export default MainLayout
+
diff --git a/src/src/app/src/index.css b/src/src/app/src/index.css
new file mode 100644
index 0000000..f87ef19
--- /dev/null
+++ b/src/src/app/src/index.css
@@ -0,0 +1,75 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background: #f5f5f5;
+ overflow-x: hidden;
+}
+
+#root {
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+ width: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+/* 动画 */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: .5;
+ }
+}
+
+.animate-fade-in-up {
+ animation: fadeInUp 0.6s ease-out;
+}
+
+.animate-pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
diff --git a/src/src/app/src/main.tsx b/src/src/app/src/main.tsx
new file mode 100644
index 0000000..6eedccb
--- /dev/null
+++ b/src/src/app/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ {/* 主内容区域 - 可滚动 */}
+
+
+
+
+ {/* 底部导航栏 - 固定在手机容器内底部（5个导航项） */}
+
+
+ {/* 顶部导航栏 */}
+
+ )
+}
+
diff --git a/src/src/app/src/pages/AdminDashboard.tsx b/src/src/app/src/pages/AdminDashboard.tsx
new file mode 100644
index 0000000..23008ca
--- /dev/null
+++ b/src/src/app/src/pages/AdminDashboard.tsx
@@ -0,0 +1,138 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+ LayoutDashboard, Users, UtensilsCrossed,
+ TrendingUp
+} from 'lucide-react'
+import { getDashboardStats } from '../api/admin'
+
+interface Stats {
+ userCount: number
+ dishCount: number
+ todayNewUsers: number
+}
+
+export default function AdminDashboard() {
+ const navigate = useNavigate()
+ const [stats, setStats] = useState
+
+
+
+
+
+ {/* 表单 */}
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ 加载中...
+
+
+ )
+}
+
diff --git a/src/src/app/src/pages/AdminDishes.tsx b/src/src/app/src/pages/AdminDishes.tsx
new file mode 100644
index 0000000..4f0690a
--- /dev/null
+++ b/src/src/app/src/pages/AdminDishes.tsx
@@ -0,0 +1,749 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+ UtensilsCrossed, Search, Edit,
+ Trash2, X, Plus
+} from 'lucide-react'
+import { getAllDishes, updateDish, deleteDish, createDish } from '../api/admin'
+
+// 数字标签映射规则
+const tagMap: Record
+ {/* 页面标题 */}
+
+
+
+ {/* 统计卡片 */}
+
+
+ 管理员仪表板
+欢迎回来，查看系统运行概况
+
+
+
+ {/* 快捷操作 */}
+
+
+
+
+
+
+
+ 用户总数
++ {stats?.userCount || 0} +
+
+
+
+
+
+
+
+ 菜品总数
++ {stats?.dishCount || 0} +
+
+
+
+
+
+
+ 今日新增用户
++ {stats?.todayNewUsers || 0} +
+
+
+ 快捷操作
+
+
+
+
+
+
+
+ )
+}
+
diff --git a/src/src/app/src/pages/AdminLogin.tsx b/src/src/app/src/pages/AdminLogin.tsx
new file mode 100644
index 0000000..a3cea92
--- /dev/null
+++ b/src/src/app/src/pages/AdminLogin.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Shield } from 'lucide-react'
+import { login } from '../api/auth'
+
+export default function AdminLoginPage() {
+ const navigate = useNavigate()
+ const [username, setUsername] = useState('')
+ const [password, setPassword] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+
+ if (!username || !password) {
+ alert('请输入用户名和密码')
+ return
+ }
+
+ try {
+ setLoading(true)
+ const response = await login(username, password)
+
+ if (response.success && response.data?.user?.role === 'admin') {
+ // 保存管理员token
+ localStorage.setItem('isAdmin', 'true')
+ alert('登录成功！')
+ navigate('/admin/dashboard')
+ } else if (response.success) {
+ alert('此账号不是管理员账号')
+ } else {
+ alert('登录失败：' + response.message)
+ }
+ } catch (error) {
+ console.error('登录失败:', error)
+ alert('登录失败，请重试')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+ {/* 页面标题 */}
+
+
+ {/* 添加菜品模态框 */}
+ {showAddModal && (
+
+
+
+ {/* 搜索和添加按钮 */}
+
+
+ 菜品管理
+管理数据库中的所有菜品
+
+
+
+ {/* 统计信息 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 菜品列表 */}
+ 共找到 {total} 个菜品
+
+
+
+
+
+ {loading ? (
+ 菜品列表
+
+
+
+ ) : !Array.isArray(dishes) || dishes.length === 0 ? (
+ 加载中...
+
+ {keyword ? '未找到匹配的菜品' : '暂无菜品'}
+
+ ) : (
+
+ {dishes.map((dish) => (
+
+ )}
+
+ {/* 分页 */}
+ {totalPages > 1 && (
+
+
+ ))}
+
+ {/* 菜品图片 */}
+
+
+ 
{
+ const target = e.target as HTMLImageElement
+ target.src = 'https://picsum.photos/100'
+ }}
+ />
+
+
+ {/* 菜品信息 */}
+
+
+
+
+
+
+
+ {/* 操作按钮 */}
+ {dish.name}
+ + {/* 价格信息 */} +
+ ¥{Number(dish.price).toFixed(2)}
+ {dish.original_price && Number(dish.original_price) > Number(dish.price) && (
+ ¥{Number(dish.original_price).toFixed(2)}
+ )}
+
+
+ {/* 评分和食堂信息 */}
+
+ ⭐ {dish.rating ? Number(dish.rating).toFixed(1) : '5.0'}
+ {dish.canteen_name && 📍 {dish.canteen_name}}
+
+
+ {/* 状态标签 */}
+
+
+ {dish.status === 'available' ? '在售' : '售罄'}
+
+
+
+
+
+
+
+
+ )}
+ + 第 {page} / {totalPages} 页，共 {total} 条 +
+
+
+
+
+
+
+ )}
+
+ {/* 编辑菜品模态框 */}
+ {showEditModal && currentDish && (
+
+
+
+
+ 添加菜品
+ +
+ {/* 基本信息 */}
+
+
+
+
+ {/* 营养信息 */}
+ 基本信息
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 请输入数字添加标签：1(减脂)、2(增肌)、3(高蛋白)、4(低碳水)、5(低脂肪)、6(低热量)、7(均衡营养)、8(维生素丰富)、9(膳食纤维)、10(健身推荐)
+
+
+ {/* 数字标签选择 */}
+ {Object.entries(tagMap).map(([num, tag]) => {
+ // 获取当前已选的数字标签
+ const currentNumTags = addForm.tags?.split(',').filter(t => tagMap[t]) || [];
+ const isSelected = currentNumTags.includes(num);
+
+ return (
+
+ );
+ })}
+
+ {
+ // 只允许输入数字和逗号
+ const value = e.target.value.replace(/[^0-9,]/g, '');
+ // 确保数字在1-10范围内
+ const validNums = value.split(',').filter(num =>
+ num && parseInt(num) >= 1 && parseInt(num) <= 10
+ ).join(',');
+ setAddForm(prev => ({
+ ...prev,
+ tags: validNums
+ }));
+ }}
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ placeholder="输入数字1-10，多个数字用逗号分隔"
+ />
+ {/* 显示当前选择的标签对应的中文名称 */}
+ {addForm.tags && (
+
+ 已选标签：
+ {addForm.tags.split(',').map(num => tagMap[num]).filter(Boolean).join('、')}
+
+ )}
+
+
+
+
+
+
+
+ {/* 操作按钮 */}
+ 营养信息
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ 编辑菜品
+ +
+
+
+
+
+ setEditForm({ ...editForm, name: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+
+
+
+ setEditForm({ ...editForm, price: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+ setEditForm({ ...editForm, original_price: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
diff --git a/src/src/app/src/pages/AdminPendingDishes.tsx b/src/src/app/src/pages/AdminPendingDishes.tsx
new file mode 100644
index 0000000..aa4fdb6
--- /dev/null
+++ b/src/src/app/src/pages/AdminPendingDishes.tsx
@@ -0,0 +1,481 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+ FileCheck, AlertCircle, CheckCircle, XCircle, Eye, X
+} from 'lucide-react'
+import { getPendingDishes, approveDish, rejectDish } from '../api/admin'
+
+interface PendingDish {
+ id: number
+ user_id: number
+ name: string
+ description: string
+ category: string
+ price: number
+ window_number: string
+ image_url: string
+ calories: number
+ protein: number
+ fat: number
+ carbs: number
+ ingredients: string
+ allergens: string
+ spicy_level: number
+ status: string
+ reject_reason: string
+ created_at: string
+ username: string
+ user_name: string
+}
+
+export default function AdminPendingDishesPage() {
+ const navigate = useNavigate()
+ const [dishes, setDishes] = useState
+
+
+ {/* Logo */}
+
+
+
+
+ {/* 表单 */}
+
+
+ {/* 返回普通登录 */}
+
+
+
+ 管理员登录
+请使用管理员账号登录
+
+
+ )
+}
+
diff --git a/src/src/app/src/pages/AdminUsers.tsx b/src/src/app/src/pages/AdminUsers.tsx
new file mode 100644
index 0000000..35077d8
--- /dev/null
+++ b/src/src/app/src/pages/AdminUsers.tsx
@@ -0,0 +1,400 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+ Users, Search, Edit, Lock, Shield
+} from 'lucide-react'
+import { getUsers, updateUser, resetUserPassword } from '../api/admin'
+
+interface User {
+ id: number
+ username: string
+ name: string
+ phone: string
+ email: string
+ role: string
+ created_at: string
+ favorites_count: number
+ uploaded_dishes_count: number
+}
+
+export default function AdminUsersPage() {
+ const navigate = useNavigate()
+ const [users, setUsers] = useState
+ {/* 页面标题 */}
+
+
+ {/* 详情模态框 */}
+ {showDetailModal && currentDish && (
+
+
+ {/* 筛选器 */}
+
+
+ 待审核菜品
+审核用户上传的菜品信息
+
+
+
+ {/* 统计卡片 */}
+
+
+
+
+
+
+
+
+ {/* 菜品列表 */}
+
+
+
+ {loading ? (
+
+
+
+
+ ) : dishes.length === 0 ? (
+ 加载中...
+
+
+ ) : (
+ dishes.map((dish) => (
+ + {filter === 'pending' && '暂无待审核菜品'} + {filter === 'approved' && '暂无已通过的菜品'} + {filter === 'rejected' && '暂无已拒绝的菜品'} +
+
+
+ ))
+ )}
+
+
+
+ {/* 菜品图片 */}
+
+
+ 
{
+ e.currentTarget.src = 'https://picsum.photos/150'
+ }}
+ />
+
+
+ {/* 菜品信息 */}
+
+
+
+
+
+
+
+
+ {/* 状态标签 */}
+
+ {dish.status === 'pending' && '待审核'}
+ {dish.status === 'approved' && '已通过'}
+ {dish.status === 'rejected' && '已拒绝'}
+
+ {dish.name}
++ {dish.description || '暂无描述'} +
+
+
+
+ {/* 营养信息 */}
+ {(dish.calories || dish.protein || dish.fat || dish.carbs) && (
+ 👤 上传者: {dish.user_name || dish.username}
+ 🏷️ 分类: {dish.category || '未分类'}
+ {dish.price && 💰 价格: ¥{Number(dish.price).toFixed(2)}
}
+ {dish.window_number && 🪟 窗口: {dish.window_number}
}
+ {dish.spicy_level !== undefined && (
+ 🌶️ 辣度: {spicyLevelText[dish.spicy_level] || '未知'}
+ )}
+
+ {dish.calories && 🔥 {dish.calories}卡}
+ {dish.protein && 蛋白 {dish.protein}g}
+ {dish.fat && 脂肪 {dish.fat}g}
+ {dish.carbs && 碳水 {dish.carbs}g}
+
+ )}
+
+ {/* 拒绝原因 */}
+ {dish.status === 'rejected' && dish.reject_reason && (
+
+
+ )}
+
+ + 拒绝原因： + {dish.reject_reason} +
+
+
+ + 提交于 {new Date(dish.created_at).toLocaleString('zh-CN')} +
+ + {/* 操作按钮 */} +
+
+
+ {dish.status === 'pending' && (
+ <>
+
+
+
+ )}
+
+
+
+ )}
+
+
+
+
+
+ 菜品详情
+ +
+ {/* 菜品图片 */}
+ {currentDish.image_url && (
+
+
+ 
{
+ e.currentTarget.src = 'https://picsum.photos/400'
+ }}
+ />
+
+ )}
+
+ {/* 基本信息 */}
+
+
+
+ {/* 详细信息 */}
+ {currentDish.name}
+{currentDish.description || '暂无描述'}
+
+
+
+ {/* 营养信息 */}
+ {(currentDish.calories || currentDish.protein || currentDish.fat || currentDish.carbs) && (
+
+
+ 上传者
+{currentDish.user_name || currentDish.username}
+
+
+ {currentDish.price && (
+ 分类
+{currentDish.category || '未分类'}
+
+
+ )}
+ {currentDish.window_number && (
+ 价格
+¥{Number(currentDish.price).toFixed(2)}
+
+
+ )}
+ 窗口号
+{currentDish.window_number}
+
+
+ 辣度
+{spicyLevelText[currentDish.spicy_level] || '未知'}
+
+
+ 提交时间
++ {new Date(currentDish.created_at).toLocaleString('zh-CN')} +
+
+
+ )}
+
+ {/* 原料成分 */}
+ {currentDish.ingredients && parseJsonField(currentDish.ingredients).length > 0 && (
+ 营养信息
+
+ {currentDish.calories && (
+
+
+
+ )}
+ {currentDish.protein && (
+ 热量
+{currentDish.calories} 卡
+
+
+ )}
+ {currentDish.fat && (
+ 蛋白质
+{currentDish.protein} 克
+
+
+ )}
+ {currentDish.carbs && (
+ 脂肪
+{currentDish.fat} 克
+
+
+ )}
+ 碳水化合物
+{currentDish.carbs} 克
+
+
+ )}
+
+ {/* 过敏原 */}
+ {currentDish.allergens && parseJsonField(currentDish.allergens).length > 0 && (
+ 原料成分
+
+ {parseJsonField(currentDish.ingredients).map((ingredient: string, index: number) => (
+
+ {ingredient}
+
+ ))}
+
+
+
+ )}
+
+ {/* 操作按钮 */}
+ {currentDish.status === 'pending' && (
+ 过敏原信息
+
+ {parseJsonField(currentDish.allergens).map((allergen: string, index: number) => (
+
+ ⚠️ {allergen}
+
+ ))}
+
+
+
+
+
+ )}
+
+
+ )
+}
+
diff --git a/src/src/app/src/pages/Favorites.tsx b/src/src/app/src/pages/Favorites.tsx
new file mode 100644
index 0000000..0e563e2
--- /dev/null
+++ b/src/src/app/src/pages/Favorites.tsx
@@ -0,0 +1,200 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Heart, Trash2, ChevronLeft } from 'lucide-react'
+import { getFavorites, removeFavorite } from '../api/favorites'
+
+interface FavoriteDish {
+ favorite_id: number
+ favorited_at: string
+ id: number
+ name: string
+ price: number
+ image: string
+ rating: number
+ sales_count: number
+ canteen_name: string
+ calories: number
+ protein: number
+ fat: number
+ carbs: number
+}
+
+export default function FavoritesPage() {
+ const navigate = useNavigate()
+ const [favorites, setFavorites] = useState
+ {/* 页面标题 */}
+
+
+ {/* 编辑用户模态框 */}
+ {showEditModal && currentUser && (
+
+
+ {/* 搜索栏 */}
+
+
+ 用户管理
+管理系统中的所有用户账号
+
+
+
+ {/* 统计信息 */}
+
+
+
+
+
+
+
+
+ {/* 用户列表 */}
+
+
+
+
+ 用户总数
+{total}
+
+
+
+
+
+ {loading ? (
+ 用户列表
+
+
+
+ ) : users.length === 0 ? (
+ 加载中...
+
+ {keyword ? '未找到匹配的用户' : '暂无用户'}
+
+ ) : (
+
+ {users.map((user) => (
+
+ )}
+
+ {/* 分页 */}
+ {totalPages > 1 && (
+
+
+ ))}
+
+
+
+
+
+ {/* 操作按钮 */}
+
+
+ {user.name}
+ {user.role === 'admin' && ( + +@{user.username}
+
+ 📱 {user.phone}
+ {user.email && 📧 {user.email}}
+
+
+ 收藏: {user.favorites_count}
+ 上传: {user.uploaded_dishes_count}
+ 注册: {new Date(user.created_at).toLocaleDateString('zh-CN')}
+
+
+
+
+
+
+
+ )}
+ + 第 {page} / {totalPages} 页，共 {total} 条 +
+
+
+
+
+
+
+ )}
+
+ {/* 重置密码模态框 */}
+ {showPasswordModal && currentUser && (
+
+
+ 编辑用户
+ +
+
+
+
+
+ setEditForm({ ...editForm, name: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+ setEditForm({ ...editForm, phone: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+ setEditForm({ ...editForm, email: e.target.value })}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ 重置密码
+ +
+
+
+ + 为用户 {currentUser.name} 重置密码 +
+ setNewPassword(e.target.value)} + placeholder="请输入新密码（至少6位）" + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+
+
+
+
+ {/* 顶部导航栏 */}
+
+ )
+}
diff --git a/src/src/app/src/pages/Home.tsx b/src/src/app/src/pages/Home.tsx
new file mode 100644
index 0000000..542e649
--- /dev/null
+++ b/src/src/app/src/pages/Home.tsx
@@ -0,0 +1,662 @@
+import { useState, useEffect } from 'react'
+import { Search, Bell, Sparkles, RefreshCw, Plus, Upload, X } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import MealCard from '../components/Common/MealCard'
+import { getRecommendedDishes, getCurrentUser } from '../api'
+import { uploadDish, UserDishData } from '../api/userDishes'
+import { getCanteens } from '../api/canteens'
+import { getTodayNutrition } from '../api/health'
+
+const HomePage = () => {
+ const navigate = useNavigate()
+ const [refreshing, setRefreshing] = useState
+
+
+
+
+
+ {/* 主内容区 */}
+
+
+
+ {loading ? (
+
+
+ {/* 统计信息 */}
+ {!loading && favorites.length > 0 && (
+
+
+
+ ) : favorites.length === 0 ? (
+ 加载中...
+
+
+ ) : (
+ 还没有收藏任何菜品
+ +
+ {favorites.map((dish) => (
+
+ )}
+
+
+ ))}
+
+ {/* 菜品图片 */}
+
+
+ {/* 收藏时间 */}
+ handleDishClick(dish.id)}
+ className="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden cursor-pointer"
+ >
+
+
+
+ {/* 菜品信息 */}
+
+
+ handleDishClick(dish.id)} + className="font-bold text-base mb-1 cursor-pointer hover:text-primary truncate" + > + {dish.name} +
+ +
+ ⭐ {dish.rating ? Number(dish.rating).toFixed(1) : '5.0'}
+ •
+ 已售 {dish.sales_count || 0}
+ {dish.canteen_name && (
+ <>
+ •
+ {dish.canteen_name}
+
+ )}
+
+
+ {/* 营养信息 */}
+ {dish.calories && (
+
+ {dish.calories}卡
+ {dish.protein && 蛋白 {dish.protein}g}
+
+ )}
+
+ {/* 价格和操作 */}
+
+
+
+
+ ¥{dish.price ? Number(dish.price).toFixed(2) : '0.00'}
+
+
+
+
+
+ 收藏于 {new Date(dish.favorited_at).toLocaleString('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ })}
+
+
+
+ )}
+
+ 共收藏 {favorites.length} 个菜品
+
+
+ {/* 顶部栏 */}
+
+
+
+ {/* 智能推荐区域 */}
+
+
+
+ {/* 今日营养摘要 */}
+
+
+ {greeting}，{userName}
+今天吃什么？
+
+
+
+
+
+
+
+
+
+ {/* 热量进度 */}
+
+
+
+ {/* 蛋白质进度 */}
+
+ 热量
+ {caloriesConsumed}/{caloriesGoal}
+
+
+
+
+ 还需 {caloriesGoal - caloriesConsumed} 千卡
+
+
+
+ 蛋白质
+ {proteinConsumed}/{proteinGoal}g
+
+
+
+
+ 还需 {proteinGoal - proteinConsumed}g
+
+ {/* 调试信息 - 显示当前选中的分类 */}
+
+
+ {/* 浮动上传按钮 */}
+
+
+ {/* 上传菜品模态框 */}
+ {showUploadModal && (
+
+ 当前分类: {activeCategory}
+
+
+ {/* 快捷筛选标签 */}
+
+ {['推荐', '减脂', '增肌', '清淡', '川菜', '西餐'].map((tag) => {
+ const isActive = tag === activeCategory
+ console.log(`🎨 按钮 "${tag}": ${isActive ? '激活' : '未激活'}`)
+ return (
+
+ )
+ })}
+
+
+ {/* 标题和刷新按钮 */}
+
+
+
+ {/* 推荐理由 */}
+
+
+
+ 为你推荐
+基于你的口味和营养目标
+
+
+
+ {/* 餐品列表 */}
+ + 💡 推荐理由： + 根据您的减脂目标和清淡口味偏好，为您精选高蛋白低脂餐品 +
+
+ {meals.map((meal) => (
+
+
+ {/* 食堂动态 */}
+
+
+ + 📢 + 食堂动态 +
+
+
+
+ 第一食堂 · 10分钟前
+
+ 今日特价：宫保鸡丁套餐 限量50份
+
+ 第二食堂 · 30分钟前
+
+ 新品上架：香煎三文鱼 营养美味
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📝 提示
+您上传的菜品将提交给管理员审核，审核通过后会显示在菜品列表中。
+
+
+ setUploadForm({ ...uploadForm, name: e.target.value })}
+ placeholder="例如：红烧肉套餐"
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+ />
+
+
+
+
+