add

frontend/src/views/Home.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="page">
+    <el-container>
+      <el-header class="header">
+        <div class="logo">植愈线上花店</div>
+        <div>
+          <el-button type="text" @click="$router.push('/orders')">我的订单</el-button>
+          <el-button type="text" @click="$router.push('/profile')">个人中心</el-button>
+          <el-button type="text" @click="$router.push('/admin')">后台管理</el-button>
+          <el-button type="primary" @click="$router.push('/login')">登录</el-button>
+        </div>
+      </el-header>
+      <el-main>
+        <el-card>
+          <div class="filters">
+            <el-select v-model="categoryId" clearable placeholder="全部分类" @change="loadProducts">
+              <el-option
+                v-for="item in categories"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+            <el-input v-model="keyword" placeholder="搜索花束" class="search" @keyup.enter.native="filterProducts" />
+            <el-button type="primary" @click="filterProducts">搜索</el-button>
+          </div>
+        </el-card>
+        <el-row :gutter="16" class="product-list">
+          <el-col v-for="item in filteredProducts" :key="item.id" :span="6">
+            <el-card :body-style="{ padding: '12px' }" class="product-card" @click.native="goDetail(item.id)">
+              <img :src="item.coverUrl || placeholder" class="product-cover" />
+              <div class="product-name">{{ item.name }}</div>
+              <div class="product-price">￥{{ item.price }}</div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { listProducts, listCategories } from '../api/product';
+
+export default {
+  data() {
+    return {
+      products: [],
+      filteredProducts: [],
+      categories: [],
+      categoryId: null,
+      keyword: '',
+      placeholder: 'https://via.placeholder.com/300x200?text=Flower'
+    };
+  },
+  created() {
+    this.loadCategories();
+    this.loadProducts();
+  },
+  methods: {
+    loadCategories() {
+      listCategories().then((res) => {
+        this.categories = res.data.data || [];
+      });
+    },
+    loadProducts() {
+      listProducts({ categoryId: this.categoryId }).then((res) => {
+        this.products = res.data.data || [];
+        this.filteredProducts = this.products;
+      });
+    },
+    filterProducts() {
+      const key = this.keyword.trim();
+      if (!key) {
+        this.filteredProducts = this.products;
+        return;
+      }
+      this.filteredProducts = this.products.filter((item) => item.name.includes(key));
+    },
+    goDetail(id) {
+      this.$router.push(`/product/${id}`);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+}
+.header {
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+}
+.filters {
+  display: flex;
+  align-items: center;
+}
+.search {
+  margin: 0 12px;
+  width: 240px;
+}
+.product-list {
+  margin-top: 16px;
+}
+.product-card {
+  cursor: pointer;
+}
+.product-cover {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.product-name {
+  margin-top: 8px;
+  font-weight: 600;
+}
+.product-price {
+  color: #f56c6c;
+  margin-top: 4px;
+}
+</style>