Redesign SupplierCard and ProductCard, unify components

- SupplierCard: horizontal layout with logo left, verified badge before name, chips at bottom - ProductCard: add optional sparkline background, trend indicator, and price display - Replace HubProductCard usage with ProductCard in hub detail page - Remove HubProductCard.vue and PriceSparkline.vue (unified into ProductCard)
2026-01-27 10:49:58 +07:00
parent 20e0e73c58
commit 7bd4aa37bd
5 changed files with 134 additions and 203 deletions
--- a/app/components/catalog/HubProductCard.vue
+++ b/app/components/catalog/HubProductCard.vue
@@ -1,112 +0,0 @@
-<template>
-  <Card
-    padding="md"
-    interactive
-    class="cursor-pointer overflow-hidden"
-    :class="{ 'bg-base-200': selected }"
-    @click="$emit('select')"
-  >
-    <div class="relative min-h-14">
-      <!-- Sparkline chart background -->
-      <div v-if="priceHistory.length > 1" class="absolute inset-0 opacity-15">
-        <ClientOnly>
-          <apexchart
-            type="area"
-            height="56"
-            :options="chartOptions"
-            :series="chartSeries"
-          />
-        </ClientOnly>
-      </div>
-
-      <!-- Content -->
-      <div class="relative z-10">
-        <Text weight="semibold" size="sm" class="mb-1">{{ name }}</Text>
-        <div class="flex items-center gap-2">
-          <Text v-if="currentPrice" size="sm" class="text-primary font-bold">
-            {{ formattedPrice }}
-          </Text>
-          <span
-            v-if="trend !== 0"
-            class="text-xs font-medium"
-            :class="trend > 0 ? 'text-success' : 'text-error'"
-          >
-            {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
-          </span>
-        </div>
-      </div>
-    </div>
-  </Card>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-  name: string
-  currentPrice?: number | null
-  currency?: string | null
-  priceHistory?: number[]
-  selected?: boolean
-}>(), {
-  priceHistory: () => [],
-  selected: false
-})
-
-defineEmits<{
-  select: []
-}>()
-
-const formattedPrice = computed(() => {
-  if (!props.currentPrice) return ''
-  const symbol = getCurrencySymbol(props.currency)
-  return `${symbol}${props.currentPrice.toLocaleString()}`
-})
-
-const getCurrencySymbol = (currency?: string | null) => {
-  switch (currency?.toUpperCase()) {
-    case 'USD': return '$'
-    case 'EUR': return '€'
-    case 'RUB': return '₽'
-    case 'CNY': return '¥'
-    default: return '$'
-  }
-}
-
-// Calculate trend from price history
-const trend = computed(() => {
-  if (props.priceHistory.length < 2) return 0
-  const first = props.priceHistory[0]
-  const last = props.priceHistory[props.priceHistory.length - 1]
-  if (!first || first === 0 || !last) return 0
-  return Math.round(((last - first) / first) * 100)
-})
-
-// Chart configuration
-const chartOptions = computed(() => ({
-  chart: {
-    type: 'area',
-    sparkline: { enabled: true },
-    animations: { enabled: false }
-  },
-  stroke: {
-    curve: 'smooth',
-    width: 2
-  },
-  fill: {
-    type: 'gradient',
-    gradient: {
-      shadeIntensity: 1,
-      opacityFrom: 0.4,
-      opacityTo: 0.1
-    }
-  },
-  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
-  tooltip: { enabled: false },
-  xaxis: { labels: { show: false } },
-  yaxis: { labels: { show: false } }
-}))
-
-const chartSeries = computed(() => [{
-  name: 'Price',
-  data: props.priceHistory.length > 0 ? props.priceHistory : [0]
-}])
-</script>
--- a/app/components/catalog/PriceSparkline.vue
+++ b/app/components/catalog/PriceSparkline.vue
@@ -1,61 +0,0 @@
-<template>
-  <div class="w-20 h-10">
-    <Line :data="chartData" :options="chartOptions" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Line } from 'vue-chartjs'
-import {
-  Chart as ChartJS,
-  LineElement,
-  PointElement,
-  LinearScale,
-  CategoryScale,
-  Filler
-} from 'chart.js'
-
-ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler)
-
-const props = defineProps<{
-  data: number[]
-}>()
-
-const isUptrend = computed(() => {
-  if (props.data.length < 2) return true
-  const last = props.data[props.data.length - 1]
-  const first = props.data[0]
-  return (last ?? 0) >= (first ?? 0)
-})
-
-const lineColor = computed(() => isUptrend.value ? '#22c55e' : '#ef4444')
-
-const chartData = computed(() => ({
-  labels: props.data.map((_, i) => i.toString()),
-  datasets: [{
-    data: props.data,
-    borderColor: lineColor.value,
-    backgroundColor: `${lineColor.value}20`,
-    borderWidth: 1.5,
-    fill: true,
-    tension: 0.3,
-    pointRadius: 0
-  }]
-}))
-
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: { display: false },
-    tooltip: { enabled: false }
-  },
-  scales: {
-    x: { display: false },
-    y: { display: false }
-  },
-  elements: {
-    line: { borderCapStyle: 'round' as const }
-  }
-}
-</script>
--- a/app/components/catalog/ProductCard.vue
+++ b/app/components/catalog/ProductCard.vue
@@ -9,17 +9,49 @@
    <Card
      padding="sm"
      :interactive="linkable || selectable"
+      class="relative overflow-hidden"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
-      <Stack gap="2">
-        <Text size="base" weight="semibold">{{ product.name }}</Text>
-        <Text v-if="product.offersCount" tone="muted" size="sm">
-          {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }}
+      <!-- Sparkline background -->
+      <div v-if="priceHistory && priceHistory.length > 1" class="absolute inset-0 opacity-15">
+        <ClientOnly>
+          <apexchart
+            type="area"
+            height="100%"
+            :options="chartOptions"
+            :series="chartSeries"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- Content -->
+      <div class="relative z-10">
+        <div class="flex items-center justify-between gap-2 mb-1">
+          <Text size="base" weight="semibold" class="truncate">{{ product.name }}</Text>
+          <span
+            v-if="trend !== 0"
+            class="text-xs font-medium shrink-0"
+            :class="trend > 0 ? 'text-success' : 'text-error'"
+          >
+            {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
+          </span>
+        </div>
+
+        <div class="flex items-center justify-between gap-2">
+          <Text v-if="product.offersCount" tone="muted" size="sm">
+            {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }}
+          </Text>
+          <Text v-if="currentPrice" size="sm" class="text-primary font-bold shrink-0">
+            {{ formattedPrice }}
+          </Text>
+        </div>
+
+        <Text v-if="product.description && !compact" tone="muted" size="sm" class="mt-1">
+          {{ product.description }}
        </Text>
-        <Text v-if="product.description && !compact" tone="muted" size="sm">{{ product.description }}</Text>
-      </Stack>
+      </div>
    </Card>
  </component>
 </template>
@@ -34,12 +66,17 @@ interface Product {
  offersCount?: number | null
 }

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  product: Product
  selectable?: boolean
  isSelected?: boolean
  compact?: boolean
-}>()
+  priceHistory?: number[]
+  currentPrice?: number | null
+  currency?: string | null
+}>(), {
+  priceHistory: () => []
+})

 defineEmits<{
  (e: 'select'): void
@@ -49,4 +86,60 @@ const localePath = useLocalePath()
 const { t } = useI18n()

 const linkable = computed(() => !props.selectable && !!props.product.uuid)
+
+// Price formatting
+const formattedPrice = computed(() => {
+  if (!props.currentPrice) return ''
+  const symbol = getCurrencySymbol(props.currency)
+  return `${symbol}${props.currentPrice.toLocaleString()}`
+})
+
+const getCurrencySymbol = (currency?: string | null) => {
+  switch (currency?.toUpperCase()) {
+    case 'USD': return '$'
+    case 'EUR': return '€'
+    case 'RUB': return '₽'
+    case 'CNY': return '¥'
+    default: return '$'
+  }
+}
+
+// Calculate trend from price history
+const trend = computed(() => {
+  if (!props.priceHistory || props.priceHistory.length < 2) return 0
+  const first = props.priceHistory[0]
+  const last = props.priceHistory[props.priceHistory.length - 1]
+  if (!first || first === 0 || !last) return 0
+  return Math.round(((last - first) / first) * 100)
+})
+
+// Chart configuration
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'area',
+    sparkline: { enabled: true },
+    animations: { enabled: false }
+  },
+  stroke: {
+    curve: 'smooth',
+    width: 2
+  },
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.4,
+      opacityTo: 0.1
+    }
+  },
+  colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
+  tooltip: { enabled: false },
+  xaxis: { labels: { show: false } },
+  yaxis: { labels: { show: false } }
+}))
+
+const chartSeries = computed(() => [{
+  name: 'Price',
+  data: props.priceHistory && props.priceHistory.length > 0 ? props.priceHistory : [0]
+}])
 </script>
--- a/app/components/catalog/SupplierCard.vue
+++ b/app/components/catalog/SupplierCard.vue
@@ -9,35 +9,45 @@
    <Card
      padding="small"
      :interactive="linkable || selectable"
-      class="relative"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
-      <!-- Verified badge top-right -->
-      <span v-if="supplier.isVerified" class="absolute -top-2 -right-2 badge badge-neutral badge-sm">
-        {{ t('catalogSupplier.badges.verified') }}
-      </span>
-      <div class="flex flex-col gap-1">
-        <!-- Logo -->
-        <div v-if="supplier.logo" class="w-12 h-12 mb-1">
-          <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
+      <div class="flex flex-col gap-3">
+        <!-- Top row: Logo + Info -->
+        <div class="flex gap-3 items-start">
+          <!-- Logo -->
+          <div v-if="supplier.logo" class="w-12 h-12 shrink-0">
+            <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
+          </div>
+          <div v-else class="w-12 h-12 shrink-0 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg">
+            {{ supplier.name?.charAt(0) }}
+          </div>
+
+          <!-- Info -->
+          <div class="min-w-0 flex-1">
+            <!-- Name with verified badge -->
+            <div class="flex items-center gap-1.5">
+              <span v-if="supplier.isVerified" class="text-primary text-sm">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
+                  <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+                </svg>
+              </span>
+              <Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
+            </div>
+            <!-- Country -->
+            <Text tone="muted" size="sm">
+              {{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
+            </Text>
+          </div>
        </div>
-        <div v-else class="w-12 h-12 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg mb-1">
-          {{ supplier.name?.charAt(0) }}
-        </div>
-        <!-- Title -->
-        <Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
-        <!-- Badges -->
+
+        <!-- Bottom row: Badges/Chips -->
        <div class="flex flex-wrap gap-1">
-          <span class="badge badge-neutral badge-dash text-xs">
+          <span v-if="reliabilityLabel" class="badge badge-neutral badge-sm">
            {{ reliabilityLabel }}
          </span>
        </div>
-        <!-- Country below -->
-        <Text tone="muted" size="sm">
-          {{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
-        </Text>
      </div>
    </Card>
  </component>
--- a/app/pages/catalog/hubs/[id]/index.vue
+++ b/app/pages/catalog/hubs/[id]/index.vue
@@ -26,9 +26,10 @@
    </template>

    <template #card="{ item }">
-      <HubProductCard
-        :name="item.name"
+      <ProductCard
+        :product="item"
        :price-history="getMockPriceHistory(item.uuid)"
+        selectable
        @select="goToProduct(item.uuid)"
      />
    </template>