fix: convert apps/website from submodule to regular directory

2026-07-16 01:42:45 +08:00
parent f12ae12ad3
commit 9595030625
341 changed files with 50808 additions and 1 deletions
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { Product } from '~/composables/useProductCenter';
+
+const props = defineProps<{
+  products: Product[];
+  loading: boolean;
+  showCountry?: boolean;
+}>();
+
+const skeletonCount = 12;
+</script>
+
+<template>
+  <div>
+    <div v-if="loading" class="product-grid">
+      <ProductCardSkeleton
+        v-for="n in skeletonCount"
+        :key="`skeleton-${n}`"
+      />
+    </div>
+
+    <div v-else-if="products.length === 0" class="empty-state">
+      <div class="empty-art">
+        <div class="empty-box"></div>
+        <div class="empty-lid"></div>
+        <div class="empty-spark spark-1"></div>
+        <div class="empty-spark spark-2"></div>
+      </div>
+      <h2>暂无匹配商品</h2>
+      <p>试试清空筛选条件，或切换其他分类看看。</p>
+    </div>
+
+    <div v-else class="product-grid">
+      <ProductCard
+        v-for="product in products"
+        :key="product.id"
+        :product="product"
+        :show-country="showCountry"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 28px;
+}
+
+.empty-state {
+  display: grid;
+  place-items: center;
+  min-height: 480px;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.empty-art {
+  position: relative;
+  width: 220px;
+  height: 176px;
+  margin: 0 auto 28px;
+}
+
+.empty-box {
+  position: absolute;
+  left: 35px;
+  top: 42px;
+  width: 150px;
+  height: 94px;
+  border-radius: 18px;
+  background: #f2f2f2;
+  transform: perspective(400px) rotateX(58deg) rotateZ(-8deg);
+}
+
+.empty-lid {
+  position: absolute;
+  left: 48px;
+  top: 20px;
+  width: 124px;
+  height: 64px;
+  border-radius: 16px;
+  background: #e8e8e8;
+  transform: rotate(-8deg);
+}
+
+.empty-spark {
+  position: absolute;
+  border-radius: 999px;
+  background: #ff6a00;
+}
+
+.spark-1 {
+  left: 21px;
+  top: 52px;
+  width: 12px;
+  height: 12px;
+}
+
+.spark-2 {
+  right: 26px;
+  top: 18px;
+  width: 8px;
+  height: 8px;
+}
+
+.empty-state h2 {
+  margin: 0 0 10px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #111;
+}
+
+.empty-state p {
+  margin: 0;
+  color: #777;
+  font-size: 16px;
+}
+
+@media (max-width: 900px) {
+  .product-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 16px;
+  }
+}
+</style>