增加和平小店商品分类展示

frontend/src/components/layout/LeftSidebar.vue

@@ -5,6 +5,7 @@ import { useActivity } from '@/composables/useActivity'
 import ProductSearch from '@/components/product/ProductSearch.vue'
 import ProductList from '@/components/product/ProductList.vue'
 import ProductCard from '@/components/product/ProductCard.vue'
+import XiaodianTabs from '@/components/product/XiaodianTabs.vue'
 
 defineProps<{
   version: string
@@ -67,6 +68,8 @@ const onSwitchActivity = async (e: Event) => {
 
       <ProductSearch />
 
+      <XiaodianTabs v-if="isXiaodian" />
+
       <ProductCard />
 
       <div class="product-meta" :class="{ good: productInfo && !productInfo.stale, warn: productInfo?.stale }">

frontend/src/components/product/ProductList.vue

@@ -4,7 +4,7 @@ import { ref, computed, watch } from 'vue'
 import { useProducts } from '@/composables/useProducts'
 import { useActivity } from '@/composables/useActivity'
 
-const { filteredProducts, selectedProductId, selectProduct, searchQuery } = useProducts()
+const { filteredProducts, selectedProductId, selectProduct, searchQuery, xiaodianTab } = useProducts()
 const { currentActivity } = useActivity()
 const isXiaodian = computed(() => currentActivity.value?.id === 'xiaodian')
 const priceLabel = computed(() => isXiaodian.value ? '点券' : '积分')
@@ -25,6 +25,10 @@ const virtualizer = useVirtualizer(
 const handleSelect = (commodityId: string, commodityName: string) => {
   selectProduct(commodityId, commodityName)
 }
+
+watch(xiaodianTab, () => {
+  virtualizer.value.scrollToOffset(0)
+})
 </script>
 
 <template>

frontend/src/components/product/XiaodianTabs.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useProducts, type XiaodianTab } from '@/composables/useProducts'
+
+const { xiaodianTab, setXiaodianTab } = useProducts()
+
+const tabs: Array<{ id: XiaodianTab, label: string }> = [
+  { id: 'all', label: '全部商品' },
+  { id: 'discount', label: '特惠专区' },
+  { id: 'hot', label: '热门抢购' }
+]
+</script>
+
+<template>
+  <div class="xiaodian-tabs" role="tablist" aria-label="和平小店商品分类">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="xiaodian-tab"
+      :class="{ active: xiaodianTab === tab.id }"
+      type="button"
+      role="tab"
+      :aria-selected="xiaodianTab === tab.id"
+      @click="setXiaodianTab(tab.id)"
+    >{{ tab.label }}</button>
+  </div>
+</template>
+
+<style scoped>
+.xiaodian-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 3px;
+  gap: 2px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--field);
+}
+
+.xiaodian-tab {
+  min-width: 0;
+  height: 28px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.xiaodian-tab:hover {
+  color: var(--text-strong);
+  background: var(--surface-2);
+}
+
+.xiaodian-tab.active {
+  color: var(--accent);
+  background: var(--accent-soft);
+  font-weight: 600;
+}
+</style>