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:
@@ -5,6 +5,7 @@ import App from './App.vue';
|
||||
import { router } from './router';
|
||||
import { setUnauthorizedHandler } from './api/client';
|
||||
import { useSessionStore } from './stores/session';
|
||||
import { useAppearanceStore } from './stores/appearanceStore';
|
||||
import Container from './components/ui/Container.vue';
|
||||
// TODO: temporary placeholder — swap Vector.svg back in (or a proper loading
|
||||
// mark) once one exists; montzar-logo.png is the brand logo, borrowed here
|
||||
@@ -14,6 +15,9 @@ import Vector from './assets/img/montzar-logo.png';
|
||||
// Global styles, ported from legacy henza_pwa/src/main.ts — same import order
|
||||
// (ant-design-vue's own theme first, then our Less overrides on top). Legacy
|
||||
// imported 'vant/lib/index.css' twice (a dead duplicate) — imported once here.
|
||||
// The light/dark values behind the theme tokens — first, so every stylesheet
|
||||
// below resolves var(--c-…) against it. See themeConfig/appearance.ts.
|
||||
import 'virtual:palette.css';
|
||||
import './assets/styles/tailwind.css';
|
||||
import 'ant-design-vue/dist/antd.less';
|
||||
import './assets/styles/style.less';
|
||||
@@ -22,6 +26,9 @@ import 'vant/lib/index.css';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createPinia());
|
||||
// Theme + reduced motion. index.html already applied the saved classes before
|
||||
// first paint; this keeps them in sync (and follows the OS while on "system").
|
||||
useAppearanceStore().init();
|
||||
app.use(router);
|
||||
|
||||
// A 401 from the API means the customer token is gone or expired. Clear the
|
||||
|
||||
Reference in New Issue
Block a user