chore: sync

mengyastore-frontend/src/modules/store/StorePage.vue

@@ -0,0 +1,108 @@
+<template>
+  <section class="page-card">
+    <div class="hero">
+      <div>
+        <h2>所有商品</h2>
+      </div>
+    </div>
+
+    <div v-if="loading" class="status">加载中...</div>
+    <div v-else>
+      <div class="grid">
+        <router-link
+          v-for="item in pagedProducts"
+          :key="item.id"
+          :to="`/product/${item.id}`"
+          class="product-link"
+        >
+          <article class="product-card">
+            <img :src="item.coverUrl" :alt="item.name" />
+            <div class="product-meta">
+              <h3>{{ item.name }}</h3>
+              <span class="product-price">¥ {{ item.price.toFixed(2) }}</span>
+            </div>
+            <div class="tag">库存：{{ item.quantity }}</div>
+            <div class="markdown" v-html="renderMarkdown(item.description)"></div>
+          </article>
+        </router-link>
+      </div>
+
+      <div class="pagination" v-if="totalPages > 1">
+        <button class="ghost" :disabled="page === 1" @click="page--">上一页</button>
+        <span class="tag">第 {{ page }} / {{ totalPages }} 页</span>
+        <button class="ghost" :disabled="page === totalPages" @click="page++">下一页</button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import MarkdownIt from 'markdown-it'
+import { fetchProducts } from '../shared/api'
+
+const products = ref([])
+const loading = ref(true)
+const md = new MarkdownIt()
+const page = ref(1)
+const perPage = ref(20)
+
+const renderMarkdown = (content) => md.render(content || '')
+
+const updatePerPage = () => {
+  perPage.value = window.innerWidth <= 900 ? 6 : 20
+  page.value = 1
+}
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(products.value.length / perPage.value))
+)
+
+const pagedProducts = computed(() => {
+  const start = (page.value - 1) * perPage.value
+  return products.value.slice(start, start + perPage.value)
+})
+
+onMounted(async () => {
+  updatePerPage()
+  window.addEventListener('resize', updatePerPage)
+  try {
+    products.value = await fetchProducts()
+  } finally {
+    loading.value = false
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updatePerPage)
+})
+</script>
+
+<style scoped>
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.product-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  height: 100%;
+}
+
+.status {
+  padding: 24px 0;
+  color: var(--muted);
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 22px;
+}
+</style>