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.
111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<!--
|
||
Ported from legacy henza_pwa/src/views/user/src/components/favorits.vue,
|
||
restyled into the redesigned design language (see components/home/* and
|
||
HomeView).
|
||
|
||
Real, not stubbed: favorites are the local favoritesStore (per-device, no
|
||
backend persistence — see favoritesStore.ts from an earlier batch), filtered
|
||
against the real product catalog client-side. No pagination — the whole
|
||
catalog is fetched once (same "small catalog" approach as everywhere else).
|
||
That logic is carried over unchanged; only the chrome and the card change.
|
||
-->
|
||
<template>
|
||
<div class="favs">
|
||
<PageBar title="علاقهمندی" back-to="userPage::hasSubRoute" />
|
||
|
||
<Spinner :spinning="loading" tip="در حال دریافت اطلاعات">
|
||
<container class="favs__body">
|
||
<template v-if="favoriteProducts.length">
|
||
<SectionHead title="ذخیرهشدهها" :subtitle="`${favoriteProducts.length} محصول`" />
|
||
<div class="favs__grid">
|
||
<ProductCard v-for="item in favoriteProducts" :key="item.id" :value="item" />
|
||
</div>
|
||
</template>
|
||
|
||
<section v-else-if="!loading" class="favs__empty">
|
||
<Icon icon="vuesax-linear:heart" size="26" />
|
||
<p>هنوز محصولی را به علاقهمندیها اضافه نکردهاید.</p>
|
||
<button type="button" class="favs__emptyCta" @click="router.push({ name: 'home' })">
|
||
دیدن محصولات
|
||
</button>
|
||
</section>
|
||
</container>
|
||
</Spinner>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { useRouter } 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 { useFavoritesStore } from '../../stores/favoritesStore'
|
||
import { api, type ProductSummary } from '../../api/client'
|
||
|
||
const router = useRouter()
|
||
const favorites = useFavoritesStore()
|
||
const loading = ref(false)
|
||
const allProducts = ref<ProductSummary[]>([])
|
||
|
||
const favoriteProducts = computed(() => allProducts.value.filter((p) => favorites.isFavorite(p.id)))
|
||
|
||
onMounted(async () => {
|
||
loading.value = true
|
||
try {
|
||
allProducts.value = await api.listProducts()
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.favs {
|
||
background: @page;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.favs__body {
|
||
padding-top: 76px;
|
||
padding-bottom: 90px;
|
||
}
|
||
|
||
.favs__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
|
||
.favs__empty {
|
||
margin-top: 8px;
|
||
padding: 38px 20px;
|
||
border: 1px dashed @hairline;
|
||
border-radius: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: @inkFaint;
|
||
}
|
||
.favs__empty p {
|
||
margin: 0;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
.favs__emptyCta {
|
||
margin-top: 4px;
|
||
padding: 9px 18px;
|
||
border: 0;
|
||
cursor: pointer;
|
||
border-radius: 999px;
|
||
font-family: inherit;
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
color: @onInk;
|
||
background: @ink;
|
||
}
|
||
</style>
|