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.
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { fileURLToPath, URL } from 'node:url';
|
|
import { defineConfig, loadEnv } from 'vite';
|
|
import vue from '@vitejs/plugin-vue';
|
|
import { VitePWA } from 'vite-plugin-pwa';
|
|
import { $themeLessVars } from './themeConfig/themeConfig';
|
|
import { lessAlphaPlugin, lightHex, palettePlugin } from './themeConfig/appearance';
|
|
|
|
// Ports are defined once in the repo-root .env (USER_APP_V2_PORT / API_PORT)
|
|
// — see that file's comment block.
|
|
const rootDir = fileURLToPath(new URL('../..', import.meta.url));
|
|
const rootEnv = loadEnv('development', rootDir, '');
|
|
const port = Number(rootEnv.USER_APP_V2_PORT ?? 5182);
|
|
const apiPort = Number(rootEnv.API_PORT ?? 3000);
|
|
|
|
export default defineConfig({
|
|
envDir: rootDir,
|
|
plugins: [
|
|
vue(),
|
|
// virtual:palette.css — the light/dark values behind the theme tokens.
|
|
palettePlugin(),
|
|
// Ported from legacy vite.config.ts:18-52. Same injectManifest strategy,
|
|
// same src/sw.ts entry, same manifest values (name/colors/icons/display).
|
|
VitePWA({
|
|
base: '/',
|
|
srcDir: 'src',
|
|
filename: 'sw.ts',
|
|
strategies: 'injectManifest',
|
|
includeAssets: ['favicon.ico'],
|
|
// legacy ran the SW in dev too (mode: "development")
|
|
devOptions: { enabled: true, type: 'module' },
|
|
manifest: {
|
|
name: 'Montzar',
|
|
short_name: 'Montzar',
|
|
description: 'Montzar',
|
|
theme_color: lightHex.primary,
|
|
background_color: lightHex.primary,
|
|
start_url: '/',
|
|
display: 'standalone',
|
|
icons: [
|
|
{ src: 'icon-192.png', sizes: '192x192', type: 'image/png' },
|
|
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
|
|
{ src: 'icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
|
|
],
|
|
},
|
|
}),
|
|
],
|
|
server: {
|
|
host: '0.0.0.0',
|
|
port,
|
|
// Never silently fall back to another port — fail loudly instead so a
|
|
// stuck dev server is obvious rather than moving to a random port.
|
|
strictPort: true,
|
|
proxy: {
|
|
'/api': `http://localhost:${apiPort}`,
|
|
'/uploads': `http://localhost:${apiPort}`,
|
|
},
|
|
},
|
|
css: {
|
|
preprocessorOptions: {
|
|
less: {
|
|
modifyVars: $themeLessVars,
|
|
javascriptEnabled: true,
|
|
// alpha(@token, N%) — fade() for theme tokens; see appearance.ts.
|
|
plugins: [lessAlphaPlugin],
|
|
},
|
|
},
|
|
},
|
|
});
|