refactor: refacotr preference

packages/business/common-ui/src/preferences/blocks/general/animation.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceAnimation',
+});
+const pageProgress = defineModel<boolean>('pageProgress', {
+  // 默认值
+  default: false,
+});
+
+const pageTransition = defineModel<string>('pageTransition');
+const pageTransitionEnable = defineModel<boolean>('pageTransitionEnable');
+
+const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
+
+function handleClick(value: string) {
+  pageTransition.value = value;
+}
+</script>
+
+<template>
+  <SwitchItem v-model="pageProgress">
+    {{ $t('preference.page-progress') }}
+  </SwitchItem>
+  <SwitchItem v-model="pageTransitionEnable">
+    {{ $t('preference.page-transition') }}
+  </SwitchItem>
+  <div
+    v-if="pageTransitionEnable"
+    class="mb-2 mt-3 flex justify-between gap-3 px-2"
+  >
+    <div
+      v-for="item in transitionPreset"
+      :key="item"
+      class="outline-box p-2"
+      :class="{
+        'outline-box-active': pageTransition === item,
+      }"
+      @click="handleClick(item)"
+    >
+      <div class="bg-accent h-10 w-12 rounded-md" :class="`${item}-slow`"></div>
+    </div>
+  </div>
+</template>

packages/business/common-ui/src/preferences/blocks/general/general.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
+
+import { $t } from '@vben/locales';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceGeneralConfig',
+});
+
+const locale = defineModel<string>('locale');
+const dynamicTitle = defineModel<boolean>('dynamicTitle');
+const shortcutKeys = defineModel<boolean>('shortcutKeys');
+
+const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
+  label: item.text,
+  value: item.key,
+}));
+</script>
+
+<template>
+  <SelectItem v-model="locale" :items="localeItems">
+    {{ $t('preference.language') }}
+  </SelectItem>
+  <SwitchItem v-model="dynamicTitle">
+    {{ $t('preference.dynamic-title') }}
+  </SwitchItem>
+  <SwitchItem v-model="shortcutKeys">
+    {{ $t('preference.shortcut-key') }}
+  </SwitchItem>
+</template>