s.esmaeili
f441ca8289
Applies to both user-app and user-app-v2. Logic and structure are shared; each app keeps its own look. Appearance settings - New "تنظیمات ظاهری" page (/settings/appearance), opened from the dashboard and available without login. It offers a light/dark/system theme and a "fast & light" motion switch. - appearanceStore saves the choice to localStorage. A small inline boot script in index.html applies it before first paint so there is no white flash. The "system" option follows OS changes live. - New ToggleSwitch component. Dark mode - Theme LESS tokens now compile to CSS custom properties. Light/dark values come from a generated virtual:palette.css (themeConfig/ appearance.ts, with colors.json + new colors.dark.json). - New LESS alpha() plugin replaces fade() on theme tokens. - New semantic tokens: page, onInk, heroSurface, hairlineStrong, photoMat, photoStage. - The dark palette is layered (page < card < panel < border) so surfaces separate without shadows. - Hard-coded colors were replaced by tokens according to their role. - antd inputs/text get dark overrides; vant uses its own .van-theme-dark. - Light mode looks the same as before. Reduced motion - With html.motion-reduced, transitions are capped at 120ms, keyframe loops stop, and backdrop blurs and permanent will-change are dropped. - Spinners and the toast progress bar (which closes the toast) are exempt via .keep-motion. - Carousel autoplay, the v1 Lottie and the product morph honor the setting. Product detail - Opening a product is now a container-transform morph from the tapped card (ProductMorph). It replaces the bottom Drawer and uses composited transform/opacity only. - The detail view is seeded with the card's data, so it no longer opens blank and jumps. Filters and sheets - Filters are now a full-width bottom sheet. Selections stay a draft until applied, so the result list no longer re-renders while dragging the slider. - DropDown collapse animates grid-template-rows instead of a capped max-height. - v2 IslandSheet is restyled to the v2 design language (API unchanged). Fixes - filtersStore.reset() shallow-copied shared arrays, so clearing the filters never cleared the selected brands.
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
// Adapted from legacy singleProduct.vue's own fetch (GET /product/:id).
|
|
// The new API has no single-product-detail endpoint (only GET
|
|
// /catalog/products, the flat list) — apps/api is out of scope for this port,
|
|
// so this fetches the full list and finds the matching product client-side.
|
|
// Wasteful for a large catalog, but honest: no fabricated endpoint, no silent
|
|
// behavior change.
|
|
//
|
|
// `initial` seeds the page with the ProductSummary the tapped card already
|
|
// holds — the same shape, from the same endpoint — so the detail view renders
|
|
// complete on its first frame instead of mounting blank and jumping when the
|
|
// fetch lands. The fetch still runs, silently, and only replaces the product
|
|
// if the server's copy actually differs (stock moved since the list loaded).
|
|
//
|
|
// The silent refresh waits until the opening morph (ProductMorph.vue, ≤420ms)
|
|
// is over: the response is the whole catalogue, and parsing it — or swapping
|
|
// the product and re-rendering — mid-animation drops frames.
|
|
import { ref } from 'vue'
|
|
import { api, type ProductSummary } from '../api/client'
|
|
|
|
const SEEDED_REFRESH_DELAY_MS = 600
|
|
|
|
export function useProductDetail(id: string, initial?: ProductSummary | null) {
|
|
const loading = ref(false)
|
|
const flag = ref(Boolean(initial))
|
|
const notFound = ref(false)
|
|
const productRef = ref<ProductSummary | null>(initial ?? null)
|
|
|
|
const load = async () => {
|
|
const seeded = productRef.value !== null
|
|
if (seeded) await new Promise((resolve) => setTimeout(resolve, SEEDED_REFRESH_DELAY_MS))
|
|
else loading.value = true
|
|
try {
|
|
const products = await api.listProducts()
|
|
const found = products.find((p) => p.id === id) ?? null
|
|
if (seeded) {
|
|
if (found && JSON.stringify(found) !== JSON.stringify(productRef.value)) productRef.value = found
|
|
} else {
|
|
productRef.value = found
|
|
notFound.value = !found
|
|
}
|
|
flag.value = true
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
return { loading, flag, notFound, productRef, load }
|
|
}
|