v6

src/stores/settings.ts

@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { api } from 'boot/axios'
+import { useI18n } from 'vue-i18n'
+
+interface AppSettings {
+  fontSize?: number
+  locale?: string
+}
+
+const defaultFontSize = 16
+const minFontSize = 12
+const maxFontSize = 20
+const fontSizeStep = 2
+
+export const useSettingsStore = defineStore('settings', () => {
+  const { locale: i18nLocale } = useI18n()
+  const settings = ref<AppSettings>({ 
+    fontSize: defaultFontSize,
+    locale: i18nLocale.value // Инициализация из i18n
+  })
+  
+  // State
+  const isInit = ref(false)
+
+  // Getters
+  const currentFontSize = computed(() => settings.value.fontSize ?? defaultFontSize)
+  const canIncrease = computed(() => currentFontSize.value < maxFontSize)
+  const canDecrease = computed(() => currentFontSize.value > minFontSize)
+
+  // Helpers
+  const clampFontSize = (size: number) => 
+    Math.max(minFontSize, Math.min(size, maxFontSize))
+
+  const updateCssVariable = () => {
+    document.documentElement.style.setProperty(
+      '--dynamic-font-size', 
+      `${currentFontSize.value}px`
+    )
+  }
+
+  const applyLocale = () => {
+    if (settings.value.locale && i18nLocale) {
+      i18nLocale.value = settings.value.locale
+    }
+  }
+
+  const saveSettings = async () => {
+    await api.put('/custome/settings', settings.value)
+  }
+
+  // Actions
+  const init = async () => {
+    if (isInit.value) return
+    
+    try {
+      const { data } = await api.get<AppSettings>('/customer/settings')
+      settings.value = {
+        ...settings.value,
+        ...data
+      }
+      
+      updateCssVariable()
+      applyLocale()
+    } finally {
+      isInit.value = true
+    }
+  }
+
+  const updateSettings = async (newSettings: Partial<AppSettings>) => {
+    settings.value = { ...settings.value, ...newSettings }
+    updateCssVariable()
+    applyLocale()
+    await saveSettings()
+  }
+
+  const updateLocale = async (newLocale: string) => {
+    settings.value.locale = newLocale
+    applyLocale()
+    await saveSettings()
+  }
+
+  const increaseFontSize = async () => {
+    const newSize = clampFontSize(currentFontSize.value + fontSizeStep)
+    await updateSettings({ fontSize: newSize })
+  }
+
+  const decreaseFontSize = async () => {
+    const newSize = clampFontSize(currentFontSize.value - fontSizeStep)
+    await updateSettings({ fontSize: newSize })
+  }
+
+  return {
+    settings,
+    isInit,
+    currentFontSize,
+    canIncrease,
+    canDecrease,
+    init,
+    increaseFontSize,
+    decreaseFontSize,
+    updateSettings,
+    updateLocale
+  }
+})