AI摘要：本文解析了名为“惊喜一餐”的Vue主页项目代码。该页面结构清晰，包含头部、推荐、特色功能和底部链接区域。头部展示标题和副标题，推荐区域使用el-card组件展示餐厅和菜品，并提供刷新功能。特色功能区列举了星级美馔、尊享预订和品鉴评价三个功能。底部提供MAX主页链接。脚本部分使用Vue实现随机推荐、刷新和页面跳转等功能，并对页面样式进行了详细设置。

Powered by 返回门户.

基于Vue的餐饮与用户管理功能代码分析

一、餐饮推荐功能

<template>
  <div class="home-container">
    <div class="background-gradient"></div>
    <div class="overlay"></div>
    <div class="content-wrapper">
      <div class="header-section">
        <h1 class="title">惊喜一餐-zhn</h1>
        <div class="divider">
          <span class="line"></span>
          <span class="dot"></span>
          <span class="line"></span>
        </div>
        <p class="subtitle">臻选星级美馔 · 品鉴非凡味境</p>
      </div>
      <div class="recommendation-section">
        <h2 class="section-title">今日推荐</h2>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="restaurant-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>精选餐厅</span>
                  <el-button text @click="refreshRestaurant">换一个</el-button>
                </div>
              </template>
              <el-image 
                :src="randomRestaurant.image" 
                fit="cover" 
                class="restaurant-image"
                @click="goToRestaurant(randomRestaurant.id)"
              />
              <div class="restaurant-info">
                <h3>{{ randomRestaurant.name }}</h3>
                <el-rate v-model="randomRestaurant.rating" disabled show-score />
                <p class="description">{{ randomRestaurant.description }}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="dish-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>特色美食</span>
                  <el-button text @click="refreshDish">换一个</el-button>
                </div>
              </template>
              <el-image 
                :src="randomDish.image" 
                fit="cover" 
                class="dish-image"
                @click="goToDish(randomDish.id)"
              />
              <div class="dish-info">
                <h3>{{ randomDish.name }}</h3>
                <p class="restaurant-name">{{ randomDish.restaurantName }}</p>
                <el-rate v-model="randomDish.rating" disabled show-score />
                <p class="description">{{ randomDish.description }}</p>
                <div class="price">¥{{ randomDish.price }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const randomRestaurant = ref({})
const randomDish = ref({})
const topRestaurants = ref([
  {
    id: 1,
    name: '星光食府',
    rating: 4.9,
    image: '/Restaurant/Restaurant1.png',
    description: '米其林三星餐厅，以创新法式料理闻名'
  },
  // 其他餐厅数据
]);
const allDishes = [
  {
    id: 1,
    name: '松露和牛饭',
    restaurantName: '星光食府',
    rating: 4.9,
    price: 688,
    image: '/foods/food1.jpg',
    description: '精选A5和牛配以黑松露，口感细腻，香气四溢'
  },
  // 其他菜品数据
];
const selectRandomRestaurant = () => {
  const randomIndex = Math.floor(Math.random() * topRestaurants.value.length)
  randomRestaurant.value = topRestaurants.value[randomIndex]
};
const selectRandomDish = () => {
  const randomIndex = Math.floor(Math.random() * allDishes.length)
  randomDish.value = allDishes[randomIndex]
};
const refreshRestaurant = () => {
  selectRandomRestaurant();
};
const refreshDish = () => {
  selectRandomDish();
};
const goToRestaurant = (id) => {
  router.push(`/restaurant/${id}`);
};
const goToDish = (id) => {
  router.push(`/dish/${id}`);
};
onMounted(() => {
  selectRandomRestaurant();
  selectRandomDish();
});
</script>

二、餐厅管理功能

<template>
  <div class="restaurant-list">
    <el-button type="primary" @click="dialogVisible = true" class="add-btn">
      添加餐厅
    </el-button>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" v-for="restaurant in restaurants" :key="restaurant.id">
        <el-card class="restaurant-card" shadow="hover">
          <div class="restaurant-info">
            <h3>{{ restaurant.name }}</h3>
            <div class="rating-row">
              <el-rate v-model="restaurant.rating" disabled></el-rate>
              <span class="rating-value">{{ restaurant.rating }}分</span>
            </div>
            <div class="tags">
              <el-tag size="small" type="success">{{ restaurant.category }}</el-tag>
              <el-tag size="small" type="warning">米其林推荐</el-tag>
            </div>
            <p class="description">{{ restaurant.description }}</p>
            <div class="price-range">
              <span>人均：¥{{ restaurant.averagePrice }}</span>
            </div>
            <div class="operation-buttons">
              <el-button type="primary" @click="viewDetails(restaurant.id)">查看详情</el-button>
              <el-button type="warning" @click="handleEdit(restaurant)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(restaurant.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog 
      :title="editingRestaurant? '编辑餐厅' : '添加餐厅'" 
      v-model="dialogVisible"
      width="500px"
    >
      <el-form :model="restaurantForm" label-width="100px">
        <el-form-item label="餐厅名称">
          <el-input v-model="restaurantForm.name"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="restaurantForm.category"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="restaurantForm.address"></el-input>
        </el-form-item>
        <el-form-item label="人均价格">
          <el-input-number v-model="restaurantForm.averagePrice"></el-input-number>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="restaurantForm.description"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const restaurants = ref([
  {
    id: 1,
    name: '美味轩',
    category: '川菜',
    address: '上海市长宁区某某路123号',
    rating: 4.5,
    description: '正宗川菜，麻辣鲜香',
    averagePrice: 128,
    isRecommended: true
  },
  // 其他餐厅数据
]);
const dialogVisible = ref(false);
const editingRestaurant = ref(null);
const restaurantForm = ref({
  name: '',
  category: '',
  address: '',
  averagePrice: 0,
  description: ''
});
const viewDetails = (id) => {
  router.push({ name: 'RestaurantDetails', params: { id } });
};
const addRestaurant = (newRestaurant) => {
  const id = restaurants.value.length > 0 
   ? Math.max(...restaurants.value.map(r => r.id)) + 1 
    : 1;
  restaurants.value.push({
    id,
    rating: 5,
    isRecommended: false,
   ...newRestaurant
  });
  ElMessage.success('添加餐厅成功');
};
const deleteRestaurant = (id) => {
  const index = restaurants.value.findIndex(r => r.id === id);
  if (index > -1) {
    restaurants.value.splice(index, 1);
    // 保存到localStorage
    saveToStorage();
    ElMessage.success('删除餐厅成功');
  }
};
const updateRestaurant = (id, updatedData) => {
  const index = restaurants.value.findIndex(r => r.id === id);
  if (index > -1) {
    restaurants.value[index] = {
     ...restaurants.value[index],
     ...updatedData
    };
    ElMessage.success('更新餐厅信息成功');
  }
};
const handleEdit = (restaurant) => {
  editingRestaurant.value = restaurant;
  restaurantForm.value = {...restaurant };
  dialogVisible.value = true;
};
const handleDelete = (id) => {
  ElMessageBox.confirm('确定要删除该餐厅吗？', '提示', {
    type: 'warning'
  }).then(() => {
    deleteRestaurant(id);
  });
};
const handleSubmit = () => {
  if (editingRestaurant.value) {
    updateRestaurant(editingRestaurant.value.id, restaurantForm.value);
  } else {
    addRestaurant(restaurantForm.value);
  }
  dialogVisible.value = false;
  editingRestaurant.value = null;
  restaurantForm.value = {
    name: '',
    category: '',
    address: '',
    averagePrice: 0,
    description: ''
  };
};
// 保存数据到localStorage
const saveToStorage = () => {
  localStorage.setItem('restaurants', JSON.stringify(restaurants.value));
};
// 从localStorage加载数据
const loadFromStorage = () => {
  const stored = localStorage.getItem('restaurants');
  if (stored) {
    restaurants.value = JSON.parse(stored);
  }
};
</script>

三、用户管理功能

<template>
  <el-container class="user-management">
    <el-header>
      <h2>用户管理</h2>
      <el-button type="primary" @click="showCreateUserDialog">
        创建用户
      </el-button>
    </el-header>
    <el-main>
      <!-- 用户列表 -->
      <el-card class="user-list">
        <template #header>
          <div class="card-header">
            <span>用户列表</span>
            <el-input
              v-model="searchQuery"
              placeholder="搜索用户..."
              class="search-input"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </template>
        <el-table :data="filteredUsers" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column prop="role" label="角色" width="100">
            <template #default="{ row }">
              <el-tag :type="row.role === 'admin'? 'danger' : 'success'">
                {{ row.role }
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active'? 'success' : 'info'">
                {{ row.status === 'active'? '活跃' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastLogin" label="最后登录" width="180" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button-group>
                <el-button type="primary" size="small" @click="showUserDetails(row)">
                  详情
                </el-button>
                <el-button type="warning" size="small" @click="editUser(row)">
                  编辑
                </el-button>
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="toggleUserStatus(row)"
                >
                  {{ row.status === 'active'? '禁用' : '启用' }}
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 用户活动日志 -->
      <el-card class="activity-log mt-20">
        <template #header>
          <div class="card-header">
            <span>活动日志</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="activity in recentActivities"
            :key="activity.id"
            :timestamp="activity.time"
            :type="activity.type"
          >
            <div class="activity-content">
              <span class="username">{{ activity.username }}</span>
              <span class="action">{{ activity.action }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
    <!-- 创建/编辑用户对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="500px"
    >
      <el-form :model="userForm" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="userForm.role">
            <el-option label="普通用户" value="user" />
            <el-option label="管理员" value="admin" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUserSubmit">确定</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>
<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 搜索
const searchQuery = ref('');
// 用户数据
const users = ref([
  {
    id: 1,
    username: 'admin',
    email: 'admin@example.com',
    role: 'admin',
    status: 'active',
    lastLogin: '2024-03-25 10:30:00'
  },
  // 其他用户数据
]);
// 活动日志
const recentActivities = ref([
  {
    id: 1,
    username: 'admin',
    action: '创建了新用户user3',
    time: '2024-03-25 10:30:00',
    type: 'success'
  },
  // 其他活动日志数据
]);
// 过滤用户列表
const filteredUsers = computed(() => {
  if (!searchQuery.value) return users.value;
  const query = searchQuery.value.toLowerCase();
  return users.value.filter(user => 
    user.username.toLowerCase().includes(query) ||
    user.email.toLowerCase().includes(query)
  );
});
// 对话框相关
const dialogVisible = ref(false);
const dialogTitle = ref('');
const userForm = ref({
  username: '',
  email: '',
  role: 'user'
});
const editingUserId = ref(null);
// 方法
const showCreateUserDialog = () => {
  dialogTitle.value = '

上面就是Coze生成的效果图了，有点那啥，一言难尽，还是不太会用