SearchView: Removed the dynamic collection-tile grid (e.g. "پرفروش‌های این هفته") and the "نتایج / N محصول" section header from the UI. Underlying data/filtering logic untouched.

DashboardView ("میز کار"): Rebuilt from scratch with a new structure, distinct from the old card+grid layout but visually aligned with HomeView (same blurred bar, @ink/@wine palette, staged reveal animation on mount): Single hero card (ink→wine gradient) showing balance, gold/fiat debt, and identity — no quick-action icons inside it anymore. Live gold rate folded into a slim inline row at the bottom instead of a titled section. Iterated shadow/spacing on the hero card per feedback (softer, less clipped). DialogVant / DialogVantOneButton (shared modal components, used in 7+ call sites: Dashboard, Cart, SingleProduct, Register, App): Replaced Vant's default dialog chrome with the app's own rounded-card language — circular icon badge for the illustration, pill-shaped primary/secondary buttons. No call-site markup changed. LoginView: Rebuilt from scratch — full-bleed dark hero (brand + step copy) overlapped by a floating white form sheet, animated crossfade transition between the mobile-number and OTP steps, same staged entrance animation as Home/Dashboard. All auth logic (API check, OTP stub, session login) unchanged.
2026-09-18 12:54:45 +03:30
parent 05fe780c89
commit 53a304b5d5
355 changed files with 22865 additions and 14 deletions
@@ -0,0 +1,100 @@
+<!--
+  Ported from legacy henza_pwa/src/views/search/collection/index.vue, restyled
+  into the redesigned design language (see components/home/* and HomeView).
+
+  Filters the one flat product list client-side by collection id (route
+  param) — no server-side ciny_id query param exists; consistent with the
+  rest of this port's "small catalog, client-side filtering" approach. That
+  logic is carried over unchanged.
+
+  The view no longer owns a Drawer: ProductCard opens the product detail
+  itself, the same way it does on every other catalogue screen, so the
+  detail behaviour is identical everywhere instead of re-implemented here.
+-->
+<template>
+  <div class="coll">
+    <PageBar :title="collectionTitle" back-to="search" />
+
+    <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
+      <container class="coll__body">
+        <SectionHead title="محصولات این مجموعه" subtitle="برای دیدن جزئیات، روی محصول ضربه بزنید" />
+
+        <div v-if="collectionProducts.length" class="coll__grid">
+          <ProductCard v-for="item in collectionProducts" :key="item.id" :value="item" />
+        </div>
+
+        <section v-else-if="!loadingPage" class="coll__empty">
+          <Icon icon="vuesax-linear:box" size="26" />
+          <p>در این مجموعه محصولی ثبت نشده است.</p>
+        </section>
+      </container>
+    </Spinner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import Icon from '../../components/icon/Icon.vue'
+import PageBar from '../../components/ui/PageBar.vue'
+import Spinner from '../../components/Spinner.vue'
+import SectionHead from '../../components/home/SectionHead.vue'
+import ProductCard from '../../components/product/ProductCard.vue'
+import { api, type ProductSummary } from '../../api/client'
+
+const route = useRoute()
+
+const loadingPage = ref(false)
+const allProducts = ref<ProductSummary[]>([])
+
+// legacy passed the collection's title through as ?page=<title>; kept, with a
+// neutral fallback so the bar is never blank on a direct link.
+const collectionTitle = computed(() => (route.query.page as string) || 'مجموعه')
+
+const collectionProducts = computed(() =>
+  allProducts.value.filter((p) => p.collections.some((c) => c.collectionId === route.params.id)),
+)
+
+onMounted(async () => {
+  loadingPage.value = true
+  try {
+    allProducts.value = await api.listProducts()
+  } finally {
+    loadingPage.value = false
+  }
+})
+</script>
+
+<style scoped lang="less">
+.coll {
+  background: @canvas;
+  min-height: 100vh;
+}
+
+.coll__body {
+  padding-top: 76px;
+  padding-bottom: 90px;
+}
+
+.coll__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.coll__empty {
+  margin-top: 8px;
+  padding: 34px 20px;
+  border: 1px dashed @hairline;
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: @inkFaint;
+}
+.coll__empty p {
+  margin: 0;
+  font-size: 12.5px;
+}
+</style>
@@ -0,0 +1,372 @@
+<!--
+  Ported from legacy henza_pwa/src/views/search/searchPage.vue, restyled into
+  the redesigned design language (see components/home/* and HomeView).
+
+  All filtering still happens client-side against the one flat product list
+  (no server-side query params exist for any of this — consistent with
+  NewestView's own "single fetch" adaptation from an earlier batch). The
+  filter logic, the Filters sheet, the category chips and the collection
+  tiles are all carried over unchanged; only the chrome and the cards change.
+
+  The collection tiles keep their original destination (/collection/:id with
+  the title in ?page=), and are shown above the results exactly as the legacy
+  ProductList did on this route.
+-->
+<template>
+  <div class="search">
+    <PageBar :title="showFilter ? 'فیلترها' : 'جستجو'" :back="showFilter" @click.capture="onBarClick">
+      <template #below>
+        <div class="search__barExtra">
+          <SearchInput @search="search" place-holder="جستجوی دسته بندی، محصولات و ..." />
+
+          <div v-if="!showFilter" class="search__chips no-scrollbar">
+            <button
+              type="button"
+              class="search__chip search__chip--filter"
+              :class="{ 'is-on': filterKeys.length > 0 }"
+              @click="showFilters"
+            >
+              <Icon icon="vuesax-linear:filter" size="15" />
+              {{ filterKeys.length > 0 ? `${filterKeys.length} فیلتر` : 'فیلتر' }}
+            </button>
+
+            <button
+              type="button"
+              class="search__chip"
+              :class="{ 'is-on': !filters.query.cats }"
+              @click="setCats(undefined)"
+            >
+              همه
+            </button>
+            <button
+              v-for="item in availableCategories"
+              :key="item.id"
+              type="button"
+              class="search__chip"
+              :class="{ 'is-on': filters.query.cats && filters.query.cats[0] === item.id }"
+              @click="setCats(item.id)"
+            >
+              {{ item.title }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </PageBar>
+
+    <Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
+      <Filters
+        v-model:filterKeys="filterKeys"
+        v-show="showFilter"
+        v-model="filters.query"
+        :products="allProducts"
+        @change="hideFilters"
+      />
+
+      <PullRefresh v-show="!showFilter" v-model="refreshing" @refresh="onRefresh">
+        <template #pulling><Loading size="18" /></template>
+        <template #loosing><Loading size="18" /></template>
+        <template #loading><Loading size="18" /></template>
+        <template #success><span /></template>
+      <container class="search__body">
+        <div v-if="filteredProducts.length" class="search__grid">
+          <ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
+        </div>
+
+        <!-- The catalogue is fetched in one request (no server-side paging
+             exists), but rendering all of it at once mounts hundreds of cards
+             and images on a phone. Render a window and grow it as the user
+             reaches the end — the same incremental behaviour the previous
+             ScrollFetchSearch-based list had. -->
+        <div v-if="hasMore" ref="sentinel" class="search__more">
+          <Spinner :spinning="true" :indicator="true" :fixed="false" tip="" cls="my-[10px]" />
+        </div>
+
+        <!-- Keyed off the result count, NOT chained to the sentinel above it.
+             As a `v-else-if` on `hasMore` this rendered whenever the window had
+             caught up with the list — i.e. at the end of every fully-rendered
+             result set — so "nothing found" sat under a screen full of
+             products. -->
+        <section v-if="!filteredProducts.length && !loadingPage" class="search__empty">
+          <Icon icon="vuesax-linear:search-normal-1" size="26" />
+          <p>محصولی با این مشخصات پیدا نشد.</p>
+        </section>
+      </container>
+      </PullRefresh>
+    </Spinner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { PullRefresh } from 'vant'
+import Icon from '../../components/icon/Icon.vue'
+import PageBar from '../../components/ui/PageBar.vue'
+import Spinner from '../../components/Spinner.vue'
+import SearchInput from '../../components/search/SearchInput.vue'
+import Filters from '../../components/search/Filters.vue'
+import SectionHead from '../../components/home/SectionHead.vue'
+import ProductCard from '../../components/product/ProductCard.vue'
+import { useFiltersStore } from '../../stores/filtersStore'
+import { useNavStore } from '../../stores/navStore'
+import { api, type ProductSummary } from '../../api/client'
+
+const filters = useFiltersStore()
+const nav = useNavStore()
+
+const loadingPage = ref(false)
+const refreshing = ref(false)
+const allProducts = ref<ProductSummary[]>([])
+const showFilter = ref(false)
+const filterKeys = ref<string[]>([])
+
+const availableCategories = computed(() => {
+  const seen = new Map<string, { id: string; title: string }>()
+  for (const p of allProducts.value) {
+    if (p.category) seen.set(p.category.id, p.category)
+  }
+  return [...seen.values()]
+})
+
+const availableCollections = computed(() => {
+  const seen = new Map<string, { id: string; title: string }>()
+  for (const p of allProducts.value) {
+    for (const c of p.collections) seen.set(c.collection.id, { id: c.collection.id, title: c.collection.title })
+  }
+  return [...seen.values()]
+})
+
+const filteredProducts = computed(() => {
+  let list = allProducts.value
+  const q = filters.query
+  if (q.text) list = list.filter((p) => p.title.includes(q.text!))
+  if (q.cats && q.cats.length > 0) list = list.filter((p) => p.category && q.cats!.includes(p.category.id))
+  if (q.brands.length > 0) list = list.filter((p) => p.brand && q.brands.includes(p.brand.id))
+  if (q.limit_gram.length === 2) {
+    list = list.filter((p) =>
+      p.variants.some(
+        (v) => parseFloat(v.rashWeightGrams) >= q.limit_gram[0] && parseFloat(v.rashWeightGrams) <= q.limit_gram[1],
+      ),
+    )
+  }
+  return list
+})
+
+// ── Incremental rendering ────────────────────────────────────────────────
+// The whole catalogue arrives in one request (no server-side paging exists),
+// so the filtering above is instant — but mounting every matching card at once
+// means hundreds of cards and images on a phone. Render a window instead and
+// grow it when the sentinel at the end scrolls into view.
+const PAGE_SIZE = 20
+const visibleCount = ref(PAGE_SIZE)
+const visibleProducts = computed(() => filteredProducts.value.slice(0, visibleCount.value))
+const hasMore = computed(() => visibleCount.value < filteredProducts.value.length)
+
+const sentinel = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | undefined
+
+function mountObserver() {
+  observer?.disconnect()
+  if (!sentinel.value) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((e) => e.isIntersecting) && hasMore.value) {
+        visibleCount.value += PAGE_SIZE
+      }
+    },
+    { rootMargin: '400px' },
+  )
+  observer.observe(sentinel.value)
+}
+
+// Any change to the filters restarts the window from the top.
+watch(filteredProducts, () => {
+  visibleCount.value = PAGE_SIZE
+})
+
+// The sentinel is v-if'd, so re-attach whenever it appears or is replaced.
+watch(sentinel, mountObserver)
+
+onBeforeUnmount(() => observer?.disconnect())
+
+async function loadProducts() {
+  loadingPage.value = true
+  try {
+    allProducts.value = await api.listProducts()
+  } finally {
+    loadingPage.value = false
+  }
+}
+
+async function onRefresh() {
+  await loadProducts()
+  refreshing.value = false
+}
+
+function search(value: string | undefined) {
+  filters.query.text = value
+}
+function setCats(id: string | undefined) {
+  filters.query.cats = id ? [id] : undefined
+}
+function showFilters() {
+  showFilter.value = true
+  nav.setNavVisibility(false)
+}
+function hideFilters(event?: { resetFilters: boolean }) {
+  showFilter.value = false
+  nav.setNavVisibility(true)
+  if (event?.resetFilters) {
+    filters.reset()
+    filterKeys.value = []
+  }
+}
+
+// While the filter sheet is open the bar's back button closes the sheet
+// rather than leaving the route, matching the legacy "بازگشت" affordance.
+function onBarClick(e: MouseEvent) {
+  if (!showFilter.value) return
+  const btn = (e.target as HTMLElement)?.closest('button')
+  if (btn) {
+    e.stopPropagation()
+    hideFilters()
+  }
+}
+
+onMounted(loadProducts)
+</script>
+
+<style scoped lang="less">
+.search {
+  background: @canvas;
+  min-height: 100vh;
+}
+
+.search__barExtra {
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 0 16px 0;
+}
+
+.search__chips {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  margin: 12px 0px 10px -16px;
+  // `padding` alone on an RTL flex scroller can get its edge padding
+  // collapsed by the browser once content overflows — explicit spacer
+  // elements hold the same 16px gap reliably at both scroll extremes.
+  scroll-snap-type: x proximity;
+}
+
+.search__chips::before,
+.search__chips::after {
+  content: '';
+  flex: 0 0 16px;
+}
+
+// The mock's filter row: tall outlined pills, the active one filled solid
+// @ink. Roomier than the previous chips so they read as the page's primary
+// navigation rather than as dense metadata.
+.search__chip {
+  scroll-snap-align: start;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 18px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: @inkSoft;
+  background: @canvas;
+  border: 1px solid @hairline;
+  transition: all 0.2s ease;
+}
+
+.search__chip.is-on {
+  color: #fff;
+  background: @ink;
+  border-color: @ink;
+}
+
+.search__chip--filter.is-on {
+  background: @wine;
+  border-color: @wine;
+}
+
+.search__chip:active {
+  transform: scale(0.97);
+}
+
+// Clears the fixed bar: its own row, plus the search field and the chip row
+// the `below` slot adds. Grew with them — the field is 48px and the chips 40px
+// now, where they were 44 and ~32.
+.search__body {
+  padding-top: 176px;
+  padding-bottom: 90px;
+}
+
+.search__body > *:first-child {
+  margin-top: 16px;
+}
+
+.search__collections {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+  margin-bottom: 22px;
+}
+
+.search__collection {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 13px 10px;
+  border-radius: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: @inkSoft;
+  background: @hairlineSoft;
+  border: 1px solid @hairline;
+  transition: all 0.2s ease;
+}
+
+.search__collection:active {
+  transform: scale(0.98);
+}
+
+.search__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.search__more {
+  display: flex;
+  justify-content: center;
+  padding: 18px 0 4px;
+}
+
+.search__empty {
+  margin-top: 8px;
+  padding: 34px 20px;
+  border: 1px dashed @hairline;
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: @inkFaint;
+}
+.search__empty p {
+  margin: 0;
+  font-size: 12.5px;
+}
+</style>