feat(user-apps): appearance settings (dark mode + reduced motion), product morph, filter sheet
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.
This commit is contained in:
s.esmaeili
@@ -0,0 +1,120 @@
|
||||
// Appearance preferences: colour theme and reduced motion.
|
||||
//
|
||||
// Persisted in one localStorage key (the cartStore pattern). The same key is
|
||||
// read by the tiny boot script in index.html, which applies the classes before
|
||||
// the first paint — so a dark-mode user never sees a white flash while the
|
||||
// bundle loads. This store re-applies them once the app is up and keeps them
|
||||
// in sync from then on.
|
||||
//
|
||||
// What the classes on <html> drive:
|
||||
// theme-dark the dark palette (virtual:palette.css, see
|
||||
// themeConfig/appearance.ts) + color-scheme: dark
|
||||
// van-theme-dark vant 4's own dark CSS variables
|
||||
// motion-reduced the "fast & light" motion rules in style.less, plus the
|
||||
// JS-driven motion that reads isReducedMotion (ProductMorph,
|
||||
// carousel autoplay)
|
||||
//
|
||||
// Kept identical in user-app and user-app-v2.
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export type ThemeChoice = 'system' | 'light' | 'dark'
|
||||
|
||||
interface Stored {
|
||||
theme: ThemeChoice
|
||||
reduceMotion: boolean
|
||||
}
|
||||
|
||||
export const APPEARANCE_STORAGE_KEY = 'gold-bank:appearance'
|
||||
|
||||
const darkQuery = () => (typeof matchMedia !== 'undefined' ? matchMedia('(prefers-color-scheme: dark)') : null)
|
||||
const motionQuery = () => (typeof matchMedia !== 'undefined' ? matchMedia('(prefers-reduced-motion: reduce)') : null)
|
||||
|
||||
function load(): Stored {
|
||||
// First run: theme follows the system; motion follows the OS's own
|
||||
// "reduce motion" accessibility setting.
|
||||
const fallback: Stored = { theme: 'system', reduceMotion: !!motionQuery()?.matches }
|
||||
try {
|
||||
const raw = localStorage.getItem(APPEARANCE_STORAGE_KEY)
|
||||
if (!raw) return fallback
|
||||
const parsed = JSON.parse(raw) as Partial<Stored>
|
||||
return {
|
||||
theme: parsed.theme === 'light' || parsed.theme === 'dark' || parsed.theme === 'system' ? parsed.theme : fallback.theme,
|
||||
reduceMotion: typeof parsed.reduceMotion === 'boolean' ? parsed.reduceMotion : fallback.reduceMotion,
|
||||
}
|
||||
} catch {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
|
||||
function persist(value: Stored) {
|
||||
try {
|
||||
localStorage.setItem(APPEARANCE_STORAGE_KEY, JSON.stringify(value))
|
||||
} catch {
|
||||
// Private mode / storage full: the choice still applies for this session.
|
||||
}
|
||||
}
|
||||
|
||||
// Status-bar / browser chrome colour. Light keeps whatever index.html ships
|
||||
// (the brand colour, unchanged); dark uses the dark canvas.
|
||||
const DARK_THEME_COLOR = '#15171A'
|
||||
let lightThemeColor: string | null = null
|
||||
|
||||
export const useAppearanceStore = defineStore('appearance', {
|
||||
state: () => ({
|
||||
...load(),
|
||||
systemDark: !!darkQuery()?.matches,
|
||||
}),
|
||||
getters: {
|
||||
resolvedTheme: (s): 'light' | 'dark' => (s.theme === 'system' ? (s.systemDark ? 'dark' : 'light') : s.theme),
|
||||
isReducedMotion: (s) => s.reduceMotion,
|
||||
},
|
||||
actions: {
|
||||
init() {
|
||||
const q = darkQuery()
|
||||
q?.addEventListener?.('change', (e) => {
|
||||
this.systemDark = e.matches
|
||||
if (this.theme === 'system') this.apply()
|
||||
})
|
||||
this.apply(false)
|
||||
},
|
||||
setTheme(theme: ThemeChoice) {
|
||||
if (theme === this.theme) return
|
||||
this.theme = theme
|
||||
this.save()
|
||||
this.apply()
|
||||
},
|
||||
setReduceMotion(on: boolean) {
|
||||
if (on === this.reduceMotion) return
|
||||
this.reduceMotion = on
|
||||
this.save()
|
||||
this.apply(false)
|
||||
},
|
||||
save() {
|
||||
persist({ theme: this.theme, reduceMotion: this.reduceMotion })
|
||||
},
|
||||
/**
|
||||
* Writes the classes onto <html>. `quiet` (default) suppresses every CSS
|
||||
* transition for the frame the palette flips in: otherwise each element
|
||||
* with a colour transition would animate from the old theme to the new
|
||||
* one at once — hundreds of simultaneous transitions, a visible stutter.
|
||||
*/
|
||||
apply(quiet = true) {
|
||||
const root = document.documentElement
|
||||
const dark = this.resolvedTheme === 'dark'
|
||||
if (quiet) root.classList.add('theme-switching')
|
||||
root.classList.toggle('theme-dark', dark)
|
||||
root.classList.toggle('van-theme-dark', dark)
|
||||
root.classList.toggle('motion-reduced', this.reduceMotion)
|
||||
const meta = document.querySelector('meta[name="theme-color"]')
|
||||
if (meta) {
|
||||
lightThemeColor ??= meta.getAttribute('data-light') ?? meta.getAttribute('content')
|
||||
meta.setAttribute('content', dark ? DARK_THEME_COLOR : lightThemeColor ?? '')
|
||||
}
|
||||
if (quiet) {
|
||||
// Two frames: one for the new colours to be computed with transitions
|
||||
// off, one for them to be painted, then transitions come back.
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove('theme-switching')))
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -18,7 +18,12 @@ export interface FiltersQuery {
|
||||
page: number
|
||||
}
|
||||
|
||||
const defaultQuery: FiltersQuery = {
|
||||
// A factory, not a shared object. FIXED: this used to be one const that both
|
||||
// the initial state and reset() spread-copied — a shallow copy, so every
|
||||
// query shared the SAME arrays. Filters.vue pushed brand ids into
|
||||
// `query.brands` in place, which wrote them into the default itself, and from
|
||||
// then on reset() "restored" the selected brands instead of clearing them.
|
||||
const defaultQuery = (): FiltersQuery => ({
|
||||
colors: [],
|
||||
brands: [],
|
||||
ciny_id: [],
|
||||
@@ -28,13 +33,13 @@ const defaultQuery: FiltersQuery = {
|
||||
text: undefined,
|
||||
cats: undefined,
|
||||
page: 0,
|
||||
}
|
||||
})
|
||||
|
||||
export const useFiltersStore = defineStore('filters', {
|
||||
state: () => ({ query: { ...defaultQuery } as FiltersQuery }),
|
||||
state: () => ({ query: defaultQuery() }),
|
||||
actions: {
|
||||
reset() {
|
||||
this.query = { ...defaultQuery }
|
||||
this.query = defaultQuery()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user