s.esmaeili/hedena_gold
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: paginate customer orders and polish the dashboard hero

Browse Source 
Add paged orders API and infinite scroll, short order numbers, and align the guest invite card with the logged-in hero shell.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
s.esmaeili
2026-10-17 13:11:42 +03:30
co-authored by Cursor
parent f550172567
commit afb068c643
89 changed files with 4518 additions and 1325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user-app/src/views/CartView.vue
+8 -9
View File
@@ -32,11 +32,7 @@
<Spinner :spinning="cartData.loadingPage" tip="درحال دریافت اطلاعات">
<container class="cart__body">
<!-- Step 1: the basket -->
<PullRefresh v-if="cartData.step === 1" 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>
<AppPullRefresh v-if="cartData.step === 1" v-model="refreshing" @refresh="onRefresh">
<template v-if="cart.items.length">
<div class="cart__items" :class="{ 'is-revealed': revealed }">
<CartItem
@@ -62,7 +58,7 @@
دیدن محصولات
</button>
</section>
</PullRefresh>
</AppPullRefresh>
<!-- Step 2: submitted -->
<section v-else class="cart__done">
@@ -145,7 +141,7 @@
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Drawer, Form, FormItem, Textarea } from 'ant-design-vue'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../components/ui/AppPullRefresh.vue'
import dialogEmpty4 from '../assets/img/empty/dialogEmpty4.svg'
import loginDialogImage from '../assets/img/empty/dialogEmpty1.svg'
import Icon from '../components/icon/Icon.vue'
@@ -235,8 +231,11 @@ const submitOrder = async () => {
}
async function onRefresh() {
await cart.init(true)
refreshing.value = false
try {
await cart.init(true)
} finally {
refreshing.value = false
}
}
onMounted(async () => {
apps/user-app/src/views/HomeView.vue
+20 -20
View File
@@ -35,12 +35,8 @@
</div>
</header>
<PullRefresh 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="home__body" :class="{ 'is-revealed': revealed }">
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="home__body" :class="{ 'is-revealed': revealed }">
<RateStrip :quote="goldPrice" class="home__rate reveal" :style="revealDelay(0)" />
<ShowcaseSlider
@@ -111,7 +107,7 @@
</div>
</div>
</container>
</PullRefresh>
</AppPullRefresh>
</div>
</template>
@@ -119,7 +115,7 @@
import { brand } from '../brand'
import { computed, onActivated, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../components/ui/AppPullRefresh.vue'
import Icon from '../components/icon/Icon.vue'
import { openProduct as openProductMorph } from '../composables/useProductMorph'
import RateStrip from '../components/home/RateStrip.vue'
@@ -133,7 +129,7 @@ import type { HomeCategory } from '../stores/configStore'
import { useCartStore } from '../stores/cartStore'
import { useFiltersStore } from '../stores/filtersStore'
import { useReveal } from '../composables/useReveal'
import type { AdminSlide, GoldPriceQuote, ProductSummary } from '../api/client'
import { api, type AdminSlide, type GoldPriceQuote, type ProductSummary } from '../api/client'
import { useCachedReads } from '../api/cachedReads'
import { useCatalogStore } from '../stores/catalogStore'
import { KEYS } from '../stores/queryCache'
@@ -195,15 +191,14 @@ function goNewest() {
// cached until pull-to-refresh asks the server again.
async function loadData(force = false) {
const [catalogResult, catsResult, priceResult, slidesResult] = await Promise.allSettled([
// The home rails read `catalog.products`, so the catalogue is loaded
// explicitly. It used to come in as a side effect of `memory.init()`, which
// now reads the small facets endpoint instead of the whole catalogue — so
// without this call the home screen would render empty rails.
//
// Still the unpaged list: the rails slice it locally («جدیدترین», per
// category). Moving them onto paged reads is step 4 of
// docs/CATALOG-PAGINATION-PLAN.md.
catalog.load(force),
// STUB-03: rails need a small newest page. Pull-to-refresh must drop the
// cached catalogue first (same rule as before paging) or the screen keeps
// showing the previous slice while gold/slides refresh.
(async () => {
if (force) catalog.invalidate()
const page = await api.listProductsPaged({ page: 1, limit: 13, sort: 'newest' })
catalog.replace(page.rows)
})(),
memory.init(force),
reads.goldPrice({ force }),
reads.homeSlider({ force }),
@@ -218,8 +213,13 @@ async function loadData(force = false) {
}
async function onRefresh() {
await loadData(true)
refreshing.value = false
try {
await loadData(true)
} finally {
// Always release Vant's PullRefresh, even when a request fails — otherwise
// the spinner sticks until a full reload (same bug Dashboard already fixed).
refreshing.value = false
}
}
onMounted(async () => {
apps/user-app/src/views/NewestView.vue
+7 -27
View File
@@ -1,12 +1,9 @@
<!--
Ported from legacy henza_pwa/src/views/newest.vue, restyled into the
redesigned design language (see components/home/* and HomeView).
See useProducts.ts for the pagination-simplification note.
Data wiring is untouched: the same useProducts() composable, the same
pull-to-fetch pagination, and the same ScrollFetchSearch infinite scroll.
Only the chrome and the card change — AppHeader -> PageBar, and the
Tailwind-utility product rows -> the shared ProductCard grid.
STUB-03 step 4: ScrollFetchSearch @fetch asks the server for the next page
(sort=newest). UI chrome unchanged.
-->
<template>
<div class="newest">
@@ -24,7 +21,7 @@
<SectionHead title="تازه‌ها" subtitle="آخرین افزوده‌های مجموعه" />
<div v-if="productsData.productList.length" class="newest__grid">
<ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
<ProductCard v-for="item in productsData.productList" :key="item.id" :value="item" />
</div>
</container>
</ScrollFetchSearch>
@@ -33,7 +30,7 @@
</template>
<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue'
import { onBeforeMount, ref } from 'vue'
import PageBar from '../components/ui/PageBar.vue'
import Spinner from '../components/Spinner.vue'
import SectionHead from '../components/home/SectionHead.vue'
@@ -41,35 +38,18 @@ import ProductCard from '../components/product/ProductCard.vue'
import ScrollFetchSearch from '../components/ui/ScrollFetchSearch.vue'
import { useProducts } from '../composables/useProducts'
const { productsData, getProducts } = useProducts()
const { productsData, getProducts, hasMore } = useProducts()
const loadingPage = ref(false)
const loadingPull = ref(false)
// ── Incremental rendering ────────────────────────────────────────────────
// useProducts() accumulates the fetched list, and this port fetches the whole
// (small) catalogue rather than truly paging the server. Mounting every card
// at once puts hundreds of images on screen, so render a window and grow it
// each time ScrollFetchSearch reports the user reached the end — which is the
// same @fetch signal that used to drive pagination.
const PAGE_SIZE = 20
const visibleCount = ref(PAGE_SIZE)
const visibleProducts = computed(() => productsData.productList.slice(0, visibleCount.value))
onBeforeMount(async () => {
await getProducts(loadingPage, false)
})
const pull = async () => {
// Reveal more of what is already loaded first; only go back to the server
// once the whole fetched list is on screen. Reaching the end is how this
// page asks for new products: the cached catalogue is refreshed.
if (visibleCount.value < productsData.productList.length) {
visibleCount.value += PAGE_SIZE
return
}
if (loadingPull.value) return
await getProducts(loadingPull, false, true)
if (loadingPull.value || !hasMore.value) return
await getProducts(loadingPull, true)
}
</script>
apps/user-app/src/views/expert/ChildOrdersView.vue
+8 -9
View File
@@ -36,11 +36,7 @@
</PageBar>
<Spinner :spinning="loading && !rows.length" tip="درحال دریافت اطلاعات">
<PullRefresh 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>
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="cho__body">
<template v-if="rows.length">
<div class="cho__list">
@@ -99,7 +95,7 @@
<!-- Sentinel for the infinite scroll, as the reference used (:216). -->
<div ref="sentinel" class="cho__sentinel" />
</container>
</PullRefresh>
</AppPullRefresh>
</Spinner>
<Drawer
@@ -146,7 +142,7 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Drawer } from 'ant-design-vue'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
@@ -209,8 +205,11 @@ async function readSearch(value: string | undefined) {
}
async function onRefresh() {
await reload()
refreshing.value = false
try {
await reload()
} finally {
refreshing.value = false
}
}
function openDetail(item: ExpertChildOrder) {
apps/user-app/src/views/expert/CustomerChoiceView.vue
+8 -9
View File
@@ -40,11 +40,7 @@
</PageBar>
<Spinner :spinning="loading && !rows.length" tip="درحال دریافت اطلاعات">
<PullRefresh 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>
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="cch__body">
<div v-if="rows.length" class="cch__list">
<article
@@ -88,7 +84,7 @@
<button type="button" class="cch__retry" @click="load">تلاش دوباره</button>
</section>
</container>
</PullRefresh>
</AppPullRefresh>
</Spinner>
<Drawer
@@ -143,7 +139,7 @@
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Drawer } from 'ant-design-vue'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
@@ -196,8 +192,11 @@ async function readSearch(value: string | undefined) {
}
async function onRefresh() {
await load()
refreshing.value = false
try {
await load()
} finally {
refreshing.value = false
}
}
function openDetail(item: ExpertCustomer) {
apps/user-app/src/views/report/ReportView.vue
+8 -9
View File
@@ -52,11 +52,7 @@
</PageBar>
<Spinner :spinning="loading && !rows.length && !details.length" tip="درحال دریافت اطلاعات">
<PullRefresh 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>
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="rep__body">
<!-- ── کلیات حساب ─────────────────────────────────────────── -->
<template v-if="activeKey === '1'">
@@ -124,7 +120,7 @@
<div v-if="loading && (rows.length || details.length)" class="rep__more">در حال دریافت…</div>
<div ref="sentinel" class="rep__sentinel" />
</container>
</PullRefresh>
</AppPullRefresh>
</Spinner>
<Drawer
@@ -151,7 +147,7 @@
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Drawer } from 'ant-design-vue'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
@@ -243,8 +239,11 @@ async function changeTab(key: '1' | '2') {
}
async function onRefresh() {
await reload()
refreshing.value = false
try {
await reload()
} finally {
refreshing.value = false
}
}
/** The «جزئیات» link — the reference opened the same card in a modal. */
apps/user-app/src/views/search/CollectionView.vue
+45 -27
View File
@@ -1,15 +1,9 @@
<!--
Ported from legacy henza_pwa/src/views/search/collection/index.vue, restyled
into the redesigned design language (see components/home/* and HomeView).
into the redesigned design language.
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.
STUB-03 step 4: products for this collection come from
GET /catalog/products?collectionId=&page=&limit= — not a full-catalogue scan.
-->
<template>
<div class="coll">
@@ -19,11 +13,15 @@
<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 v-if="rows.length" class="coll__grid">
<ProductCard v-for="item in rows" :key="item.id" :value="item" />
</div>
<section v-else-if="!loadingPage" class="coll__empty">
<div v-if="hasMore || loadingMore" ref="sentinel" class="coll__more">
<Spinner :spinning="true" :indicator="true" :fixed="false" tip="" cls="my-[10px]" />
</div>
<section v-else-if="!loadingPage && !rows.length" class="coll__empty">
<Icon icon="vuesax-linear:box" size="26" />
<p>در این مجموعه محصولی ثبت نشده است.</p>
</section>
@@ -33,37 +31,51 @@
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } 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 { useCatalogStore } from '../../stores/catalogStore'
import { usePagedProducts } from '../../composables/usePagedProducts'
const route = useRoute()
const catalog = useCatalogStore()
const { rows, loading, loadingMore, hasMore, resetAndLoad, loadMore } = usePagedProducts()
const loadingPage = ref(false)
const allProducts = computed(() => catalog.products)
// 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 loadingPage = computed(() => loading.value && rows.value.length === 0)
const collectionTitle = computed(() => (route.query.page as string) || 'مجموعه')
const collectionId = computed(() => String(route.params.id ?? ''))
const collectionProducts = computed(() =>
allProducts.value.filter((p) => p.collections.some((c) => c.collectionId === route.params.id)),
)
const sentinel = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | undefined
function query() {
return { collectionId: collectionId.value, sort: 'newest' as const }
}
function mountObserver() {
observer?.disconnect()
if (!sentinel.value) return
observer = new IntersectionObserver(
(entries) => {
if (entries.some((e) => e.isIntersecting) && hasMore.value) {
void loadMore(query())
}
},
{ rootMargin: '400px' },
)
observer.observe(sentinel.value)
}
watch(sentinel, mountObserver)
onBeforeUnmount(() => observer?.disconnect())
onMounted(async () => {
loadingPage.value = !catalog.loaded
try {
await catalog.load()
await resetAndLoad(query())
} catch (e) {
console.log(e)
} finally {
loadingPage.value = false
}
})
</script>
@@ -85,6 +97,12 @@ onMounted(async () => {
gap: 11px;
}
.coll__more {
display: flex;
justify-content: center;
padding: 18px 0 4px;
}
.coll__empty {
margin-top: 8px;
padding: 34px 20px;
apps/user-app/src/views/search/SearchView.vue
+84 -114
View File
@@ -2,15 +2,9 @@
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.
STUB-03 step 4: filtering and paging are server-side (GET /catalog/products
with page/limit/search/…). Facets drive the chip row and the Filters sheet.
UI chrome is unchanged — only the data path moved.
-->
<template>
<div class="search">
@@ -61,13 +55,9 @@
indicator, over the results already on screen.
-->
<div>
<PullRefresh 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="loadingPage && !allProducts.length" class="search__skeleton" aria-hidden="true">
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="search__body">
<div v-if="loadingPage" class="search__skeleton" aria-hidden="true">
<div class="search__skHead">
<span class="skeleton search__skLine search__skLine--title" />
<span class="skeleton search__skLine search__skLine--sub" />
@@ -97,49 +87,39 @@
</div>
<SectionHead
v-if="filteredProducts.length"
v-if="rows.length"
title="نتایج"
:subtitle="`${filteredProducts.length} محصول`"
:subtitle="`${total} محصول`"
/>
<div v-if="filteredProducts.length" class="search__grid">
<ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
<div v-if="rows.length" class="search__grid">
<ProductCard v-for="item in rows" :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">
<div v-if="hasMore || loadingMore" ref="sentinel" class="search__more">
<Spinner :spinning="true" :indicator="true" :fixed="false" tip="" cls="my-[10px]" />
</div>
<!-- Its own condition, not a v-else of the sentinel above: chained to
it, the box also showed under the results whenever they all fit
in the first window. Same fix as user-app-v2. -->
<section v-if="!filteredProducts.length && !loadingPage" class="search__empty">
<section v-if="!rows.length && !loadingPage" class="search__empty">
<Icon icon="vuesax-linear:search-normal-1" size="26" />
<p>محصولی با این مشخصات پیدا نشد.</p>
</section>
</container>
</PullRefresh>
</AppPullRefresh>
</div>
<!-- A bottom sheet over a see-through backdrop (teleported to <body>);
see Filters.vue. The result list stays in place underneath. -->
<Filters
v-model:show="showFilter"
v-model:filterKeys="filterKeys"
v-model="filters.query"
:products="allProducts"
:facets="facets"
/>
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
@@ -147,106 +127,58 @@ 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 { api, type CatalogFacets, type ProductQuery } from '../../api/client'
import { useFiltersStore } from '../../stores/filtersStore'
import { useCatalogStore } from '../../stores/catalogStore'
import { usePagedProducts } from '../../composables/usePagedProducts'
const filters = useFiltersStore()
const catalog = useCatalogStore()
const { rows, total, loading, loadingMore, hasMore, resetAndLoad, loadMore } = usePagedProducts()
// Starts true on a cold start: the first render happens before onMounted kicks
// off the fetch, and with false the "nothing found" box flashed up for a frame
// before the loading state replaced it. With the catalogue cached it renders at once.
const loadingPage = ref(!catalog.loaded)
// Two rows of the two-column grid — enough to fill the screen under the bar.
const loadingPage = computed(() => loading.value && rows.value.length === 0)
const SKELETON_CARDS = 6
const refreshing = ref(false)
const allProducts = computed(() => catalog.products)
const showFilter = ref(false)
const filterKeys = ref<string[]>([])
const facets = ref<CatalogFacets | null>(null)
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 availableCategories = computed(() => facets.value?.categories ?? [])
const availableCollections = computed(() => facets.value?.collections ?? [])
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
function toServerQuery(): ProductQuery {
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))
const out: ProductQuery = { sort: 'newest' }
if (q.text?.trim()) out.search = q.text.trim()
if (q.cats?.[0]) out.categoryId = q.cats[0]
if (q.brands.length) out.brandId = q.brands.join(',')
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],
),
)
out.minGram = q.limit_gram[0]
out.maxGram = 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)
return out
}
// 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(force = false) {
loadingPage.value = !catalog.loaded
async function loadFacets() {
try {
await catalog.load(force)
facets.value = await api.getCatalogFacets()
} catch (e) {
console.log(e)
}
}
async function reload(opts: { preserveRows?: boolean } = {}) {
try {
await resetAndLoad(toServerQuery(), opts)
} catch (e) {
console.log(e)
} finally {
loadingPage.value = false
}
}
async function onRefresh() {
await loadProducts(true)
refreshing.value = false
try {
await Promise.all([loadFacets(), reload({ preserveRows: true })])
} finally {
refreshing.value = false
}
}
function search(value: string | undefined) {
@@ -259,7 +191,45 @@ function showFilters() {
showFilter.value = true
}
onMounted(() => loadProducts())
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) {
void loadMore(toServerQuery())
}
},
{ rootMargin: '400px' },
)
observer.observe(sentinel.value)
}
watch(sentinel, mountObserver)
onBeforeUnmount(() => observer?.disconnect())
// Debounce text; category / brand / gram apply immediately.
let textTimer: ReturnType<typeof setTimeout> | undefined
watch(
() => filters.query.text,
() => {
clearTimeout(textTimer)
textTimer = setTimeout(() => void reload(), 300)
},
)
watch(
() => [filters.query.cats, filters.query.brands, filters.query.limit_gram] as const,
() => void reload(),
{ deep: true },
)
onMounted(async () => {
await loadFacets()
await reload()
})
</script>
<style scoped lang="less">
apps/user-app/src/views/user/DashboardView.vue
+45 -14
View File
@@ -48,14 +48,11 @@
</div>
</header>
<PullRefresh 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="dash__body" :class="{ 'is-revealed': revealed }">
<!-- Signed in: real position from GET /customers/:id -->
<template v-if="customer">
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="dash__body" :class="{ 'is-revealed': revealed }">
<!-- Signed in: real position from GET /customer/me. Auth is the token —
never treat a slow/failed profile fetch as a guest session. -->
<template v-if="session.isLoggedIn && customer">
<section class="dash__balance reveal" :style="revealDelay(0)">
<div class="dash__balanceHead">
<div>
@@ -82,6 +79,30 @@
</section>
</template>
<section
v-else-if="session.isLoggedIn"
class="dash__invite reveal"
:style="revealDelay(0)"
>
<div class="dash__inviteIcon" aria-hidden="true">
<Icon icon="vuesax-linear:security-user" size="20" />
</div>
<div class="dash__inviteCopy">
<h3>حساب شما</h3>
<p>
{{ profileError ? 'موجودی الان در دسترس نیست. دوباره تلاش کنید.' : 'در حال دریافت موجودی…' }}
</p>
</div>
<button
v-if="profileError"
type="button"
class="dash__inviteCta"
@click="loadDashboard"
>
تلاش دوباره
</button>
</section>
<!-- Signed out: a quiet invitation, no fabricated numbers -->
<section v-else class="dash__invite reveal" :style="revealDelay(0)">
<div class="dash__inviteIcon" aria-hidden="true">
@@ -122,7 +143,7 @@
<RateStrip :quote="goldPrice" />
</section>
</container>
</PullRefresh>
</AppPullRefresh>
<DialogVant :timeOut="-1" v-model:show="data.notify" :closeOnClickOverlay="true">
<template v-slot:img>
@@ -157,7 +178,7 @@
import { brand } from '../../brand'
import { computed, onActivated, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import SectionHead from '../../components/home/SectionHead.vue'
import RateStrip from '../../components/home/RateStrip.vue'
@@ -176,6 +197,7 @@ const session = useSessionStore()
const reads = useCachedReads()
const customer = ref<CustomerDetail | null>(reads.peek<CustomerDetail>(KEYS.profile) ?? null)
const profileError = ref(false)
const goldPrice = ref<GoldPriceQuote | null>(reads.peek<GoldPriceQuote>(KEYS.goldPrice) ?? null)
const refreshing = ref(false)
@@ -268,6 +290,7 @@ async function loadDashboard() {
// the exception uncaught, so onRefresh's refreshing.value = false never
// ran and PullRefresh stayed stuck in its loading state — a working pull
// gesture never dismissed it again until a full page reload.
profileError.value = false
const [me, price] = await Promise.allSettled([
// The balance on this tab is the one figure read fresh on every visit;
// the cached copy only fills the screen until it arrives.
@@ -279,14 +302,22 @@ async function loadDashboard() {
// to control, so it is gone.
reads.goldPrice({ force: true }),
])
if (me.status === 'fulfilled') customer.value = me.value
else console.log(me.reason)
if (me.status === 'fulfilled') {
customer.value = me.value
profileError.value = false
} else {
profileError.value = session.isLoggedIn && !customer.value
console.log(me.reason)
}
goldPrice.value = price.status === 'fulfilled' ? price.value : null
}
async function onRefresh() {
await loadDashboard()
refreshing.value = false
try {
await loadDashboard()
} finally {
refreshing.value = false
}
}
let activatedOnce = false
apps/user-app/src/views/user/OrdersView.vue
+513 -127
View File
@@ -8,10 +8,9 @@
utils/orderStatus.ts) rather than legacy's own inconsistent tab labels.
They are chips now instead of ant Tabs, which lets them scroll
horizontally like every other filter rail in the redesign.
- Fetches real order history via the already-existing GET
/customers/:id/orders endpoint, filtered client-side by chip (that
endpoint has no server-side status filter — small enough dataset that
client-side filtering is reasonable, and apps/api stays untouched).
- Fetches paginated order history via GET /customer/me/orders (page /
status / q). Infinite-scroll like ReportView; filters run server-side
so a status chip never misses rows on later pages.
- Search matches against `orderNumber` (our real user-facing identifier)
instead of legacy's numeric `id`.
@@ -47,25 +46,30 @@
</template>
</PageBar>
<Spinner :spinning="loading" tip="درحال دریافت اطلاعات">
<PullRefresh 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="ord__body">
<template v-if="filteredOrders.length">
<Spinner :spinning="loading && !orders.length" tip="درحال دریافت اطلاعات">
<AppPullRefresh v-model="refreshing" @refresh="onRefresh">
<container class="ord__body">
<template v-if="orders.length">
<div class="ord__list">
<OrderCard v-for="item in filteredOrders" :key="item.id" :value="item" @view="openDetail" />
<OrderCard v-for="item in orders" :key="item.id" :value="item" @view="openDetail" />
</div>
</template>
<section v-else-if="!loading" class="ord__empty">
<section v-else-if="!loading && !failed" class="ord__empty">
<Icon icon="vuesax-linear:box" size="26" />
<p>سفارشی با این مشخصات پیدا نشد.</p>
</section>
<section v-if="failed" class="ord__empty">
<Icon icon="vuesax-linear:danger" size="26" />
<p>دریافت سفارش‌ها با خطا روبه‌رو شد.</p>
<button type="button" class="ord__retry" @click="reload">تلاش دوباره</button>
</section>
<div v-if="loading && orders.length" class="ord__more">در حال دریافت…</div>
<div ref="sentinel" class="ord__sentinel" />
</container>
</PullRefresh>
</AppPullRefresh>
</Spinner>
<Drawer
@@ -79,39 +83,31 @@
>
<div class="detail">
<header class="detail__bar">
<button type="button" class="detail__close" aria-label="بستن" @click="viewData.model = false">
<button type="button" class="detail__close" aria-label="بستن" @click="closeDetail">
<Icon icon="vuesax-linear:arrow-right-1" size="20" />
</button>
<h2 class="detail__title">جزئیات سفارش</h2>
<span class="detail__spacer" aria-hidden="true" />
<button
type="button"
class="detail__trail"
aria-label="تاریخچه وضعیت"
@click="timelineOpen = true"
>
<Icon icon="vuesax-linear:clock-1" size="18" />
</button>
</header>
<div class="detail__scroll">
<!-- Progress -->
<section class="detail__block">
<div class="detail__steps">
<div
v-for="(step, index) in ORDER_STEPS"
:key="step"
class="detail__step"
:class="{ 'is-done': index <= currentStep, 'is-active': index === currentStep }"
>
<span class="detail__stepDot">{{ index + 1 }}</span>
<span class="detail__stepTitle">{{ step }}</span>
</div>
</div>
</section>
<!-- Headline facts -->
<!-- Headline facts — order path lives in the timeline sheet (header clock). -->
<section class="detail__block">
<div class="detail__headline">
<div>
<div class="detail__idBlock">
<div class="detail__eyebrow">شماره سفارش</div>
<div class="detail__number">{{ viewData.item.orderNumber }}</div>
</div>
<span
class="detail__status"
:style="{ background: modalColor?.background, color: modalColor?.font }"
:style="{ background: modalColor.background, color: modalColor.font }"
>
{{ modalStatusLabel }}
</span>
@@ -143,13 +139,83 @@
</div>
</div>
</Drawer>
<!-- Status history as an island action sheet (same pattern as cart note). -->
<Drawer
v-model:visible="timelineOpen"
placement="bottom"
:closable="false"
:zIndex="1100"
height="70%"
class="rtl"
:bodyStyle="{ padding: 0 }"
>
<div class="tlSheet">
<span class="tlSheet__grip" aria-hidden="true" />
<header class="tlSheet__banner">
<span class="tlSheet__chip">وضعیت</span>
<span class="tlSheet__dash" aria-hidden="true" />
<span
v-if="viewData.item"
class="tlSheet__badge"
:style="{
background: modalColor.background,
color: modalColor.font,
}"
>
<Icon icon="vuesax-linear:tick-circle" size="14" />
{{ modalStatusLabel }}
</span>
</header>
<ol v-if="timelinePath.length" class="tlSheet__rail">
<li
v-for="(node, index) in timelinePath"
:key="node.status"
class="tlSheet__node"
:class="[`is-${node.state}`]"
>
<div class="tlSheet__axis" aria-hidden="true">
<span
v-if="node.state === 'current'"
class="tlSheet__halo"
:style="{ color: orderStatusColor(node.status).font }"
/>
<span class="tlSheet__marker" :style="markerStyle(node)">
<Icon :icon="orderStatusIcon(node.status)" size="16" />
</span>
<span
v-if="index < timelinePath.length - 1"
class="tlSheet__stem"
:style="node.state === 'pending' ? undefined : stemStyle(node.status)"
/>
</div>
<div class="tlSheet__main">
<div class="tlSheet__row">
<div class="tlSheet__copy">
<div class="tlSheet__status">{{ orderStatusLabel(node.status) }}</div>
<p class="tlSheet__blurb">{{ orderStatusBlurb(node.status) }}</p>
</div>
<time v-if="node.at" class="tlSheet__when" :datetime="node.at">
{{ jtimelineWhen(node.at) }}
</time>
<span v-else class="tlSheet__when is-wait">در انتظار</span>
</div>
</div>
</li>
</ol>
<p v-else class="tlSheet__empty">مسیری برای این سفارش ثبت نشده است.</p>
</div>
</Drawer>
</div>
</template>
<script setup lang="ts">
import { computed, onActivated, onMounted, reactive, ref } from 'vue'
import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { Drawer } from 'ant-design-vue'
import { Loading, PullRefresh } from 'vant'
import AppPullRefresh from '../../components/ui/AppPullRefresh.vue'
import Icon from '../../components/icon/Icon.vue'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
@@ -157,19 +223,26 @@ import SearchInput from '../../components/search/SearchInput.vue'
import OrderCard from '../../components/product/OrderCard.vue'
import OrderItemCard from '../../components/product/OrderItemCard.vue'
import {
ORDER_STATUS_COLORS,
ORDER_PIPELINE,
ORDER_STATUS_LABELS,
ORDER_STEPS,
orderStepIndex,
orderStatusBlurb,
orderStatusColor,
orderStatusIcon,
orderStatusLabel,
} from '../../utils/orderStatus'
import { jdate } from '../../utils/filters'
import { jdate, jtimelineWhen } from '../../utils/filters'
import { useSessionStore } from '../../stores/session'
import type { OrderDetail } from '../../api/client'
import { useCachedReads } from '../../api/cachedReads'
import { KEYS } from '../../stores/queryCache'
import { api, type OrderDetail } from '../../api/client'
import { useQueryCache, KEYS } from '../../stores/queryCache'
type TimelineNode = {
status: string
at: string | null
state: 'done' | 'current' | 'pending'
}
const session = useSessionStore()
const reads = useCachedReads()
const cache = useQueryCache()
const tabs = [
{ title: 'همه', key: 'ALL' },
@@ -184,83 +257,179 @@ const tabs = [
]
const activeTab = ref('ALL')
const orders = ref<OrderDetail[]>([])
const page = ref(1)
const hasMore = ref(true)
const loading = ref(false)
const refreshing = ref(false)
const allOrders = ref<OrderDetail[]>(reads.peek<OrderDetail[]>(KEYS.orders) ?? [])
const failed = ref(false)
const searchTerm = ref<string | undefined>(undefined)
const filteredOrders = computed(() => {
let list = allOrders.value
if (activeTab.value !== 'ALL') list = list.filter((o) => o.status === activeTab.value)
if (searchTerm.value) list = list.filter((o) => o.orderNumber.includes(searchTerm.value!))
return list
})
const sentinel = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null
/** Bumped on every filter/reload so an in-flight page response is dropped. */
let fetchSeq = 0
function readSearch(value: string | undefined) {
searchTerm.value = value
}
async function loadOrders(force = false) {
async function fetchPage() {
if (!session.isLoggedIn) {
allOrders.value = []
orders.value = []
hasMore.value = false
return
}
loading.value = reads.peek(KEYS.orders) === undefined
if (loading.value || !hasMore.value) return
const my = fetchSeq
loading.value = true
failed.value = false
try {
allOrders.value = await reads.myOrders({ force })
const data = await api.getMyOrders({
page: page.value,
status: activeTab.value,
q: searchTerm.value,
})
if (my !== fetchSeq) return
const batch = data.result ?? []
orders.value = page.value === 1 ? batch : [...orders.value, ...batch]
if (batch.length < (data.limit ?? 20)) hasMore.value = false
else page.value += 1
} catch (e) {
if (my !== fetchSeq) return
failed.value = true
hasMore.value = false
console.log(e)
} finally {
loading.value = false
if (my === fetchSeq) loading.value = false
}
}
function resetList() {
orders.value = []
page.value = 1
hasMore.value = true
failed.value = false
}
async function reload() {
fetchSeq += 1
loading.value = false
resetList()
await fetchPage()
}
const viewData = reactive<{ model: boolean; item: OrderDetail | null }>({ model: false, item: null })
const timelineOpen = ref(false)
const modalStatusLabel = computed(() =>
viewData.item ? ORDER_STATUS_LABELS[viewData.item.status] ?? viewData.item.status : '',
viewData.item ? orderStatusLabel(viewData.item.status) : '',
)
const modalColor = computed(() => (viewData.item ? ORDER_STATUS_COLORS[viewData.item.status] : undefined))
const currentStep = computed(() => (viewData.item ? orderStepIndex(viewData.item.status) : 0))
const modalColor = computed(() =>
viewData.item ? orderStatusColor(viewData.item.status) : orderStatusColor('PLACED'),
)
/** Pending stays grey. Reached steps colour the icon/border only — fill stays opaque so the halo never shows through. */
function markerStyle(node: TimelineNode) {
if (node.state === 'pending') return undefined
const c = orderStatusColor(node.status)
return { color: c.font, borderColor: c.font }
}
function stemStyle(status: string) {
return { background: orderStatusColor(status).font }
}
/**
* Full order path for the timeline sheet (replaces the old detail stepper).
* Past steps are dated from statusEvents; future ones stay «در انتظار».
*/
const timelinePath = computed((): TimelineNode[] => {
const item = viewData.item
if (!item) return []
const times = new Map<string, string>()
for (const ev of item.statusEvents ?? []) {
if (!times.has(ev.toStatus)) times.set(ev.toStatus, ev.createdAt)
}
if (!times.has(item.status)) times.set(item.status, item.createdAt)
if (item.status === 'SUSPENDED') {
return [
{ status: 'SUSPENDED', at: times.get('SUSPENDED') ?? item.createdAt, state: 'current' },
...ORDER_PIPELINE.map((status) => ({ status, at: null, state: 'pending' as const })),
]
}
if (item.status === 'CANCELLED') {
const prior = ORDER_PIPELINE.filter((status) => times.has(status)).map((status) => ({
status,
at: times.get(status) ?? null,
state: 'done' as const,
}))
return [
...prior,
{ status: 'CANCELLED', at: times.get('CANCELLED') ?? item.createdAt, state: 'current' },
]
}
const idx = (ORDER_PIPELINE as readonly string[]).indexOf(item.status)
const currentIdx = idx >= 0 ? idx : 0
return ORDER_PIPELINE.map((status, i) => ({
status,
at: times.get(status) ?? (i === currentIdx ? item.createdAt : null),
state: i < currentIdx ? 'done' : i === currentIdx ? 'current' : 'pending',
}))
})
function openDetail(item: OrderDetail) {
viewData.item = item
viewData.model = true
timelineOpen.value = false
}
function closeDetail() {
timelineOpen.value = false
viewData.model = false
}
async function onRefresh() {
await loadOrders(true)
refreshing.value = false
try {
cache.invalidate(KEYS.orders)
await reload()
} finally {
refreshing.value = false
}
}
watch([activeTab, searchTerm], () => {
void reload()
})
/**
* Owner ruling 2026-10-12: fetch what the screen needs each time it is opened,
* rather than caching it with a lifetime — «هربار با رفتن به اون صفحه اون
* مقادیر مورد نیاز رو درخواست بزنه، هم سربار برای سرور نداره، هم درخواست الکی
* نمیخوره، هم دیتاها به‌روز میمونه».
*
* `force` matters because an order's status changes on the ADMIN side — nothing
* in this app invalidates the cache when that happens, so without it a list
* fetched once was shown unchanged for the rest of the session.
* Owner ruling 2026-10-12: fetch what the screen needs each time it is opened.
* Status changes on the ADMIN side, so each visit reloads from page 1.
*
* `onActivated` as well as `onMounted`: this view is in MasterLayout's
* keep-alive list, so it is mounted once and every later visit only activates
* it. With `onMounted` alone the second visit made no request at all.
*
* The cached copy still renders instantly (`peek` above) and `loading` only
* shows a spinner when there is nothing to show, so the refresh is invisible.
*
* `activatedOnce` guards the first visit, where Vue runs both hooks — the same
* shape DashboardView uses. Without it the two calls would overlap; the cache
* would collapse them into one request anyway, but not firing twice is clearer
* than relying on that.
* keep-alive list. `activatedOnce` guards the first visit where Vue runs both.
*/
onMounted(() => loadOrders(true))
onMounted(async () => {
await reload()
await nextTick()
if (typeof IntersectionObserver !== 'undefined') {
observer = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) void fetchPage()
})
if (sentinel.value) observer.observe(sentinel.value)
}
})
let activatedOnce = false
onActivated(() => {
if (activatedOnce) void loadOrders(true)
if (activatedOnce) void reload()
activatedOnce = true
})
onBeforeUnmount(() => observer?.disconnect())
</script>
<style scoped lang="less">
@@ -291,7 +460,7 @@ onActivated(() => {
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 600;
font-weight: 500;
white-space: nowrap;
color: @inkSoft;
background: @canvas;
@@ -337,6 +506,25 @@ onActivated(() => {
font-size: 12.5px;
}
.ord__retry {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid @hairline;
background: @canvas;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.ord__more,
.ord__sentinel {
padding: 12px 0;
text-align: center;
font-size: 12px;
color: @inkMuted;
}
/* ── Detail drawer ─────────────────────────────────────────────────── */
.detail {
height: 100vh;
@@ -359,8 +547,8 @@ onActivated(() => {
.detail__title {
margin: 0;
font-size: 14px;
font-weight: 800;
font-size: 13px;
font-weight: 500;
color: @ink;
}
@@ -376,10 +564,20 @@ onActivated(() => {
background: @hairlineSoft;
}
.detail__spacer {
display: block;
.detail__trail {
width: 38px;
height: 38px;
border: 0;
cursor: pointer;
border-radius: 12px;
display: grid;
place-items: center;
color: @ink;
background: @hairlineSoft;
}
.detail__trail:active {
transform: scale(0.96);
}
.detail__scroll {
@@ -395,63 +593,243 @@ onActivated(() => {
.detail__blockTitle {
margin: 0 0 11px;
font-size: 13px;
font-weight: 800;
font-size: 12.5px;
font-weight: 500;
color: @ink;
}
.detail__steps {
display: flex;
gap: 4px;
overflow-x: auto;
padding-bottom: 4px;
.tlSheet {
padding: 4px 18px 22px;
max-height: 100%;
overflow-y: auto;
}
.detail__step {
flex: 1 0 74px;
.tlSheet__grip {
display: block;
width: 38px;
height: 4px;
margin: 2px auto 10px;
border-radius: 4px;
background: @hairline;
}
.tlSheet__banner {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.tlSheet__chip {
flex: 0 0 auto;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid @hairline;
background: @canvas;
box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
font-size: 11px;
font-weight: 500;
color: @inkSoft;
}
.tlSheet__dash {
flex: 1 1 auto;
height: 0;
border-top: 1.5px dashed @hairline;
min-width: 16px;
}
.tlSheet__badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.tlSheet__rail {
list-style: none;
margin: 0;
padding: 0 2px;
}
.tlSheet__node {
display: flex;
gap: 12px;
align-items: stretch;
min-height: 64px;
}
.tlSheet__axis {
flex: 0 0 40px;
width: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
text-align: center;
position: relative;
}
.detail__stepDot {
width: 28px;
height: 28px;
/* Soft shadow-like halo — sits behind the opaque marker disc. */
.tlSheet__halo {
position: absolute;
top: 0;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.tlSheet__halo::before {
content: '';
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(
circle,
color-mix(in srgb, currentColor 32%, transparent) 0%,
color-mix(in srgb, currentColor 12%, transparent) 38%,
transparent 70%
);
filter: blur(1.5px);
opacity: 0;
animation: tlSheetHalo 4.8s ease-in-out infinite;
}
@keyframes tlSheetHalo {
0%,
100% {
opacity: 0;
}
50% {
opacity: 0.7;
}
}
@media (prefers-reduced-motion: reduce) {
.tlSheet__halo::before {
animation: none;
opacity: 0.35;
}
}
.tlSheet__marker {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid currentColor;
background: @canvas;
display: grid;
place-items: center;
font-size: 11.5px;
font-weight: 700;
color: @inkFaint;
background: @hairlineSoft;
border: 1px solid @hairline;
position: relative;
z-index: 1;
}
.detail__step.is-done .detail__stepDot {
color: #fff;
background: @primary;
border-color: @primary;
.tlSheet__node.is-pending .tlSheet__marker {
/* Tailwind gray-400 — clearer than hairline for inactive dashed rings */
color: #9ca3af;
background: @canvas;
border-color: #9ca3af;
border-style: dashed;
}
.detail__step.is-active .detail__stepDot {
color: #fff;
background: @wine;
border-color: @wine;
.tlSheet__node.is-done .tlSheet__marker,
.tlSheet__node.is-current .tlSheet__marker {
background: @canvas;
}
.detail__stepTitle {
font-size: 10px;
line-height: 1.5;
.tlSheet__node.is-pending .tlSheet__status,
.tlSheet__node.is-pending .tlSheet__blurb,
.tlSheet__node.is-pending .tlSheet__when {
color: @inkFaint;
}
.detail__step.is-done .detail__stepTitle {
color: @inkSoft;
font-weight: 600;
.tlSheet__stem {
flex: 1 1 auto;
width: 1.5px;
margin: 4px 0;
background: @hairline;
min-height: 16px;
}
.tlSheet__node.is-pending .tlSheet__stem {
background: @hairlineSoft;
background-image: repeating-linear-gradient(
180deg,
@hairline 0 4px,
transparent 4px 8px
);
width: 2px;
}
.tlSheet__main {
flex: 1;
min-width: 0;
padding-top: 4px;
padding-bottom: 18px;
}
.tlSheet__node:last-child .tlSheet__main {
padding-bottom: 4px;
}
.tlSheet__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.tlSheet__copy {
min-width: 0;
flex: 1;
}
.tlSheet__status {
font-size: 13px;
font-weight: 500;
color: @ink;
line-height: 1.35;
}
.tlSheet__blurb {
margin: 3px 0 0;
font-size: 11.5px;
font-weight: 500;
line-height: 1.45;
color: @inkFaint;
}
.tlSheet__when {
flex: 0 0 auto;
padding-top: 2px;
font-size: 11px;
font-weight: 500;
color: @inkFaint;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tlSheet__when.is-wait {
font-weight: 500;
opacity: 0.85;
}
.tlSheet__empty {
margin: 4px 0 0;
padding: 20px 12px;
font-size: 12px;
color: @inkFaint;
text-align: center;
border: 1px dashed @hairline;
border-radius: 14px;
}
.detail__headline {
@@ -462,24 +840,32 @@ onActivated(() => {
padding-bottom: 14px;
}
.detail__idBlock {
min-width: 0;
flex: 1;
}
.detail__eyebrow {
font-size: 11px;
color: @inkFaint;
}
.detail__number {
padding-top: 4px;
font-size: 18px;
font-weight: 800;
color: @ink;
padding-top: 3px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: @inkSoft;
word-break: break-all;
}
.detail__status {
flex: 0 0 auto;
align-self: flex-start;
padding: 5px 12px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
font-weight: 500;
white-space: nowrap;
}
@@ -512,7 +898,7 @@ onActivated(() => {
.detail__spec dd {
margin: 0;
font-size: 12.5px;
font-weight: 700;
font-weight: 500;
color: @ink;
}