bak

src/components/DocumentSettings.vue

@@ -5,6 +5,7 @@ import { useSceneStore } from '@/stores/scene'
 import { useTheme } from '@/composables/useTheme'
 import type { Theme } from '@/composables/useTheme'
 import { Modal } from '@/components/ui'
+import { t } from '@/i18n'
 
 defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
@@ -15,9 +16,9 @@ const { theme, setTheme } = useTheme()
 type TabId = 'document' | 'timeline' | 'theme'
 
 const tabs: { id: TabId; label: string; icon: typeof PhFrameCorners }[] = [
-  { id: 'document', label: 'Document', icon: PhFrameCorners },
-  { id: 'timeline', label: 'Timeline', icon: PhClock },
-  { id: 'theme', label: 'UI Theme', icon: PhPalette },
+  { id: 'document', label: t('settings.tab.document'), icon: PhFrameCorners },
+  { id: 'timeline', label: t('settings.tab.timeline'), icon: PhClock },
+  { id: 'theme', label: t('settings.tab.theme'), icon: PhPalette },
 ]
 
 const activeTab = ref<TabId>('document')
@@ -71,7 +72,7 @@ function applyTheme(t: Theme) {
 <template>
   <Modal
     :model-value="modelValue"
-    title="Settings"
+    :title="t('settings.title')"
     size="lg"
     @update:model-value="emit('update:modelValue', $event)"
   >
@@ -91,14 +92,14 @@ function applyTheme(t: Theme) {
 
             <div class="content">
               <section v-if="activeTab === 'document'">
-                <h3>Canvas</h3>
+                <h3>{{ t('settings.canvas') }}</h3>
                 <div class="row">
                   <label>
-                    Width
+                    {{ t('settings.width') }}
                     <input type="number" min="1" step="1" v-model.number="width" />
                   </label>
                   <label>
-                    Height
+                    {{ t('settings.height') }}
                     <input type="number" min="1" step="1" v-model.number="height" />
                   </label>
                 </div>
@@ -114,7 +115,7 @@ function applyTheme(t: Theme) {
                   </button>
                 </div>
                 <label class="stacked">
-                  Background
+                  {{ t('settings.background') }}
                   <div class="color-row">
                     <input
                       type="color"
@@ -128,24 +129,24 @@ function applyTheme(t: Theme) {
               </section>
 
               <section v-else-if="activeTab === 'timeline'">
-                <h3>Timeline</h3>
+                <h3>{{ t('settings.tab.timeline') }}</h3>
                 <div class="row">
                   <label>
-                    Duration (s)
+                    {{ t('settings.duration') }}
                     <input type="number" min="0.1" step="0.1" v-model.number="duration" />
                   </label>
                   <label>
-                    FPS
+                    {{ t('settings.fps') }}
                     <input type="number" min="1" step="1" v-model.number="fps" />
                   </label>
                 </div>
                 <p class="hint">
-                  Die Timeline-Länge setzt die Ruler-Skala. Playback stoppt am letzten gesetzten Keyframe.
+                  {{ t('settings.timelineHint') }}
                 </p>
               </section>
 
               <section v-else-if="activeTab === 'theme'">
-                <h3>UI Theme</h3>
+                <h3>{{ t('settings.tab.theme') }}</h3>
                 <div class="theme-grid">
                   <button
                     class="theme-card"
@@ -158,7 +159,7 @@ function applyTheme(t: Theme) {
                     </div>
                     <div class="theme-label">
                       <PhMoon :size="14" />
-                      <span>Dark</span>
+                      <span>{{ t('settings.themeDark') }}</span>
                     </div>
                   </button>
                   <button
@@ -172,16 +173,16 @@ function applyTheme(t: Theme) {
                     </div>
                     <div class="theme-label">
                       <PhSun :size="14" />
-                      <span>Light</span>
+                      <span>{{ t('settings.themeLight') }}</span>
                     </div>
                   </button>
                 </div>
-                <p class="hint">Gespeichert im Browser, beim nächsten Öffnen wiederverwendet.</p>
+                <p class="hint">{{ t('settings.themeHint') }}</p>
               </section>
       </div>
     </div>
     <template #footer>
-      <button class="primary" @click="close">Fertig</button>
+      <button class="primary" @click="close">{{ t('settings.done') }}</button>
     </template>
   </Modal>
 </template>