feat(product-center): implement Figma-designed UI, upload module, and website tests

- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases)
- Add API upload module (multer) with static serving for uploads/public assets
- Add OriginGood.delisted flag and SDS request retry logic
- Add admin ImageUpload component and goods import/upload flows
- Add vitest suite for website components and composables (32 tests)
- Add skills, docs, plans and PRODUCT.md

apps/website/app/components/product/ProductCard.vue

@@ -3,146 +3,44 @@ import { computed } from 'vue';
 import type { Product } from '~/composables/useProductCenter';
 import { sortTagsByGroup } from '~/composables/useProductCenter';
 
-const props = defineProps<{
-  product: Product;
-  showCountry?: boolean;
-}>();
-
-const sortedTags = computed(() => sortTagsByGroup(props.product.tags).slice(0, 4));
-
-function formatPrice(price: string | null): string {
-  if (!price) return '—';
-  const num = Number(price);
-  if (!Number.isFinite(num)) return '—';
-  return `¥${num.toFixed(2)}起`;
-}
+const props = defineProps<{ product: Product; showCountry?: boolean }>();
+const visibleTags = computed(() => sortTagsByGroup(props.product.tags).slice(0, 3));
+const price = computed(() => {
+  const value = Number(props.product.price);
+  return Number.isFinite(value) ? value.toFixed(2) : null;
+});
 </script>
 
 <template>
-  <article class="product-card">
+  <a class="product-card" :href="`https://inkpod.vip/portal/detail/${product.id}`">
     <div class="product-media">
-      <img
-        v-if="product.image"
-        :src="product.image"
-        :alt="product.name"
-        class="product-img"
-        loading="lazy"
-      />
-      <div v-else class="placeholder">
-        <i class="fa-solid fa-image"></i>
-      </div>
+      <img v-if="product.image" :src="product.image" :alt="product.name" loading="lazy" />
+      <i v-else class="fa-regular fa-image" aria-hidden="true"></i>
     </div>
     <div class="product-info">
-      <h3 class="product-title" :title="product.name">{{ product.name }}</h3>
-      <div v-if="sortedTags.length > 0 || showCountry" class="chips">
-        <span
-          v-for="tag in sortedTags"
-          :key="tag.id"
-          class="chip"
-          :style="{ color: tag.fontColor || tag.color || '#ff6a00', background: (tag.color || '#ff6a00') + '4d', borderColor: (tag.color || '#ff6a00') + '99' }"
-        >
-          {{ tag.name }}
-        </span>
-        <span v-if="showCountry" class="chip country-chip">
-          <img
-            v-if="product.country.icon"
-            :src="product.country.icon"
-            :alt="product.country.name"
-            class="country-flag"
-          />
-          {{ product.country.name }}
-        </span>
+      <h3 :title="product.name">{{ product.name }}</h3>
+      <div class="chips">
+        <span v-for="tag in visibleTags" :key="tag.id" class="chip" :style="{ color: tag.fontColor || tag.color || '#21834b', backgroundColor: `${tag.color || '#eaf8ef'}30` }">{{ tag.name }}</span>
+        <span v-if="showCountry" class="chip country">{{ product.country.name }}</span>
       </div>
-      <div class="price">{{ formatPrice(product.price) }}</div>
+      <div class="price"><template v-if="price"><small>￥</small>{{ price }}<small>起</small></template><template v-else>暂无报价</template></div>
     </div>
-  </article>
+  </a>
 </template>
 
 <style scoped>
-.product-card {
-  overflow: hidden;
-  border-radius: 12px;
-  background: #fff;
-  border: 1px solid #eee;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.product-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.06);
-}
-
-.product-media {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  background: linear-gradient(180deg, #f8f8f8, #f0f0f0);
-  overflow: hidden;
-}
-
-.product-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.placeholder {
-  color: #ccc;
-  font-size: 32px;
-}
-
-.product-info {
-  padding: 14px;
-}
-
-.product-title {
-  margin: 0 0 12px;
-  font-size: 19px;
-  line-height: 1.4;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #111;
-}
-
-.chips {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  height: 24px;
-  padding: 0 8px;
-  border-radius: 5px;
-  color: #ff6a00;
-  background: #fff2e8;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
-.country-chip {
-  color: #555;
-  background: #f3f4f6;
-  font-size: 14px;
-}
-
-.country-flag {
-  width: 16px;
-  height: 12px;
-  border-radius: 2px;
-  object-fit: cover;
-  margin-right: 4px;
-}
-
-.price {
-  color: #222;
-  font-size: 20px;
-  font-weight: 700;
+.product-card { display: block; width: 100%; height: 382px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
+.product-media { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f2f2f2; color: #bbb; font-size: 32px; }
+.product-media img { width: 100%; height: 100%; object-fit: cover; }
+.product-info { padding: 7px 12px 9px; }
+.product-info h3 { margin: 0 0 5px; overflow: hidden; color: #000; font-size: 18px; font-weight: 500; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; }
+.chips { display: flex; gap: 6px; height: 21px; margin-bottom: 5px; overflow: hidden; }
+.chip { display: inline-flex; align-items: center; flex: 0 0 auto; height: 21px; padding: 0 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
+.chip.country { color: #535353; background: #ececef; }
+.price { margin-top: 5px; color: #000; font-size: 20px; font-weight: 700; line-height: 28px; }
+.price small { font-size: 16px; font-weight: 500; }
+@media (max-width: 760px) {
+  .product-card { height: auto; min-height: 0; max-width: none; overflow: visible; }
+  .product-info h3 { font-size: 15px; }
 }
 </style>