chore: sync

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

@@ -0,0 +1,277 @@
+<template>
+  <section class="page-card" v-if="!loading && product">
+    <div class="detail-body">
+      <div class="detail-summary">
+        <h2>{{ product.name }}</h2>
+        <p class="tag">库存：{{ product.quantity }}</p>
+        <p class="product-price">¥ {{ product.price.toFixed(2) }}</p>
+      </div>
+
+      <div class="markdown detail-description" v-html="renderMarkdown(product.description)"></div>
+
+      <div class="detail-gallery" v-if="galleryImages.length">
+        <div class="detail-gallery-main">
+          <button
+            v-if="galleryImages.length > 1"
+            class="gallery-nav prev"
+            type="button"
+            aria-label="上一张"
+            @click="prevImage"
+          >
+            ‹
+          </button>
+          <img
+            class="detail-image"
+            :src="galleryImages[currentImageIndex].url"
+            :alt="galleryImages[currentImageIndex].label"
+          />
+          <button
+            v-if="galleryImages.length > 1"
+            class="gallery-nav next"
+            type="button"
+            aria-label="下一张"
+            @click="nextImage"
+          >
+            ›
+          </button>
+        </div>
+
+        <div class="detail-gallery-meta">
+          <span class="badge">{{ galleryImages[currentImageIndex].label }}</span>
+          <span class="tag">{{ currentImageIndex + 1 }} / {{ galleryImages.length }}</span>
+        </div>
+
+        <div class="detail-thumbs" v-if="galleryImages.length > 1">
+          <button
+            v-for="(image, index) in galleryImages"
+            :key="`${image.url}-${index}`"
+            class="detail-thumb"
+            :class="{ active: index === currentImageIndex }"
+            type="button"
+            @click="currentImageIndex = index"
+          >
+            <img :src="image.url" :alt="image.label" />
+            <span>{{ image.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="detail-actions">
+        <button class="buy-button" @click="buy">立即购买</button>
+        <button class="ghost" @click="goBack">返回商店首页</button>
+      </div>
+    </div>
+  </section>
+
+  <section class="page-card" v-else-if="!loading && !product">
+    <h2>未找到该商品</h2>
+    <p class="tag">请返回商店查看其他商品。</p>
+    <div class="detail-actions">
+      <button class="ghost" @click="goBack">返回商店首页</button>
+    </div>
+  </section>
+
+  <section class="page-card" v-else>
+    <div class="status">加载中...</div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import MarkdownIt from 'markdown-it'
+import { fetchProducts } from '../shared/api'
+
+const route = useRoute()
+const router = useRouter()
+const md = new MarkdownIt()
+const loading = ref(true)
+const product = ref(null)
+const currentImageIndex = ref(0)
+
+const renderMarkdown = (content) => md.render(content || '')
+
+const galleryImages = computed(() => {
+  if (!product.value) {
+    return []
+  }
+
+  const images = []
+  const seen = new Set()
+  const appendImage = (url, label) => {
+    const trimmed = (url || '').trim()
+    if (!trimmed || seen.has(trimmed)) {
+      return
+    }
+    seen.add(trimmed)
+    images.push({ url: trimmed, label })
+  }
+
+  appendImage(product.value.coverUrl, '商品封面')
+
+  const screenshots = Array.isArray(product.value.screenshotUrls)
+    ? product.value.screenshotUrls
+    : []
+
+  screenshots.forEach((url, index) => {
+    appendImage(url, `商品截图 ${index + 1}`)
+  })
+
+  return images
+})
+
+const goBack = () => {
+  router.push('/')
+}
+
+const buy = () => {
+  alert('已加入购买清单（示例）')
+}
+
+const prevImage = () => {
+  if (!galleryImages.value.length) {
+    return
+  }
+  currentImageIndex.value =
+    (currentImageIndex.value - 1 + galleryImages.value.length) % galleryImages.value.length
+}
+
+const nextImage = () => {
+  if (!galleryImages.value.length) {
+    return
+  }
+  currentImageIndex.value = (currentImageIndex.value + 1) % galleryImages.value.length
+}
+
+watch(
+  galleryImages,
+  (images) => {
+    if (!images.length || currentImageIndex.value >= images.length) {
+      currentImageIndex.value = 0
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  try {
+    const list = await fetchProducts()
+    product.value = list.find((item) => item.id === route.params.id) || null
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.detail-body {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.detail-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.detail-description {
+  display: block;
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1.8;
+  -webkit-line-clamp: initial;
+  -webkit-box-orient: initial;
+  overflow: visible;
+}
+
+.detail-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.detail-gallery-main {
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.45);
+}
+
+.gallery-nav {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.88);
+  color: var(--text);
+  font-size: 28px;
+  line-height: 1;
+  transform: translateY(-50%);
+  box-shadow: 0 10px 20px rgba(33, 33, 40, 0.12);
+}
+
+.gallery-nav.prev {
+  left: 16px;
+}
+
+.gallery-nav.next {
+  right: 16px;
+}
+
+.detail-gallery-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.detail-thumbs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+}
+
+.detail-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  text-align: left;
+  background: rgba(255, 255, 255, 0.58);
+  border: 1px solid transparent;
+}
+
+.detail-thumb.active {
+  border-color: var(--accent-2);
+  box-shadow: 0 10px 24px rgba(145, 168, 208, 0.16);
+}
+
+.detail-thumb img {
+  width: 100%;
+  height: 76px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.detail-thumb span {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.status {
+  padding: 24px 0;
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .detail-thumb {
+    padding: 6px;
+  }
+}
+</style>

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>