From 39ef330e03dc3ad0f2679e21d8798e272ba81978 Mon Sep 17 00:00:00 2001 From: 0nikod Date: Thu, 14 May 2026 08:37:51 +0800 Subject: [PATCH] refactor settings management state --- src/components/SettingsModal.vue | 119 +++------------------ src/composables/useCategoryManagement.ts | 60 +++++++++++ src/composables/useMetaPresetManagement.ts | 80 ++++++++++++++ 3 files changed, 156 insertions(+), 103 deletions(-) create mode 100644 src/composables/useCategoryManagement.ts create mode 100644 src/composables/useMetaPresetManagement.ts diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index edc2575..2b371e3 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -4,9 +4,11 @@ import { useI18n } from 'vue-i18n'; import { Icon } from '@iconify/vue'; import { settings } from '../utils/settings'; import TagManager from './TagManager.vue'; -import { categoryService, type CategoryItem } from '../utils/categoryService'; +import { categoryService } from '../utils/categoryService'; import { metaService } from '../utils/metaService'; +import { useCategoryManagement } from '../composables/useCategoryManagement'; import { useDataUpdateActions } from '../composables/useDataUpdateActions'; +import { useMetaPresetManagement } from '../composables/useMetaPresetManagement'; const props = defineProps({ visible: { @@ -41,115 +43,26 @@ const categories = [ const activeCategory = ref('textFormat'); -// Category Management Logic -const newCatName = ref(''); -const newCatColor = ref('#aabbcc'); - -const handleAddCategory = () => { - if (!newCatName.value) return; - - const cats = categoryService.categories.value; - const maxId = cats.length > 0 ? Math.max(...cats.map(c => c.id)) : 5; - let nextId = maxId + 1; - if (nextId < 6) nextId = 6; - - while (cats.some(c => c.id === nextId)) { - nextId++; - } - - const newCat: CategoryItem = { - id: nextId, - name: newCatName.value, - color: newCatColor.value - }; - - const knownDefaultIds = [0, 1, 3, 4, 5, 6, 7]; - const customs = [...cats.filter(c => !knownDefaultIds.includes(c.id)), newCat]; - - categoryService.saveCustomCategories(customs).then(() => { - newCatName.value = ''; - }); -}; - -const handleDeleteCategory = (id: number) => { - if (!confirm(t('common.confirm') || 'Are you sure?')) return; - const cats = categoryService.categories.value; - const knownDefaultIds = [0, 1, 3, 4, 5, 6, 7]; - if (knownDefaultIds.includes(id)) { - alert(t('category.cannotDeleteDefault')); - return; - } - - const customs = cats.filter(c => !knownDefaultIds.includes(c.id) && c.id !== id); - categoryService.saveCustomCategories(customs); -}; - -// Meta Preset Management Logic -const presetName = ref(''); -const presetTags = ref(''); // string, comma separated -const editingPresetId = ref(null); +const { newCatName, newCatColor, fetchCategories, handleAddCategory, handleDeleteCategory } = useCategoryManagement(t); +const { + presetName, + presetTags, + editingPresetId, + fetchPresets, + resetPresetForm, + handleSavePreset, + handleEditPreset, + handleDeletePreset, +} = useMetaPresetManagement(t); watch(activeCategory, (newVal) => { if (newVal === 'categoryManager') { - categoryService.fetchCategories(); + fetchCategories(); } else if (newVal === 'metaManager') { - metaService.fetchPresets(); + fetchPresets(); } }); -const handleSavePreset = () => { - if (!presetName.value || !presetTags.value) { - alert(t('category.nameRequired')); - return; - } - - // Parse tags: comma/newline - const tags = presetTags.value.split(/[,\n]/).map(s => s.trim()).filter(Boolean); - - if (editingPresetId.value) { - // Update existing - const index = metaService.customPresets.value.findIndex(p => p.id === editingPresetId.value); - if (index !== -1) { - metaService.customPresets.value[index] = { - ...metaService.customPresets.value[index], - name: presetName.value, - tags: tags - }; - } - } else { - // Create new - const newPreset = { - id: 'custom_' + Date.now(), - name: presetName.value, - tags: tags - }; - metaService.customPresets.value.push(newPreset); - } - - metaService.saveCustomPresets(metaService.customPresets.value).then(() => { - resetPresetForm(); - }); -}; - -const handleEditPreset = (preset: any) => { - editingPresetId.value = preset.id; - presetName.value = preset.name; - presetTags.value = preset.tags.join(', '); -}; - -const handleDeletePreset = (id: string) => { - if (!confirm(t('common.confirm') || 'Are you sure?')) return; - const newCustoms = metaService.customPresets.value.filter(p => p.id !== id); - metaService.customPresets.value = newCustoms; - metaService.saveCustomPresets(newCustoms); -}; - -const resetPresetForm = () => { - presetName.value = ''; - presetTags.value = ''; - editingPresetId.value = null; -}; - const { updateStatus, isUpdating, isChecking, latestVersion, resetUpdateStatus, handleDataUpdate } = useDataUpdateActions(t); watch(() => props.visible, (newVal) => { diff --git a/src/composables/useCategoryManagement.ts b/src/composables/useCategoryManagement.ts new file mode 100644 index 0000000..fb1667c --- /dev/null +++ b/src/composables/useCategoryManagement.ts @@ -0,0 +1,60 @@ +import { ref } from 'vue'; +import { categoryService, type CategoryItem } from '../utils/categoryService'; + +const DEFAULT_CATEGORY_IDS = [0, 1, 3, 4, 5, 6, 7]; + +type Translate = (key: string) => string; + +export function useCategoryManagement(t: Translate) { + const newCatName = ref(''); + const newCatColor = ref('#aabbcc'); + + const fetchCategories = () => { + return categoryService.fetchCategories(); + }; + + const handleAddCategory = () => { + if (!newCatName.value) return; + + const cats = categoryService.categories.value; + const maxId = cats.length > 0 ? Math.max(...cats.map((category) => category.id)) : 5; + let nextId = Math.max(maxId + 1, 6); + + while (cats.some((category) => category.id === nextId)) { + nextId++; + } + + const newCategory: CategoryItem = { + id: nextId, + name: newCatName.value, + color: newCatColor.value, + }; + + const customs = [...cats.filter((category) => !DEFAULT_CATEGORY_IDS.includes(category.id)), newCategory]; + + void categoryService.saveCustomCategories(customs).then(() => { + newCatName.value = ''; + }); + }; + + const handleDeleteCategory = (id: number) => { + if (!confirm(t('common.confirm') || 'Are you sure?')) return; + + if (DEFAULT_CATEGORY_IDS.includes(id)) { + alert(t('category.cannotDeleteDefault')); + return; + } + + const cats = categoryService.categories.value; + const customs = cats.filter((category) => !DEFAULT_CATEGORY_IDS.includes(category.id) && category.id !== id); + void categoryService.saveCustomCategories(customs); + }; + + return { + newCatName, + newCatColor, + fetchCategories, + handleAddCategory, + handleDeleteCategory, + }; +} diff --git a/src/composables/useMetaPresetManagement.ts b/src/composables/useMetaPresetManagement.ts new file mode 100644 index 0000000..e027023 --- /dev/null +++ b/src/composables/useMetaPresetManagement.ts @@ -0,0 +1,80 @@ +import { ref } from 'vue'; +import { metaService } from '../utils/metaService'; +import type { PresetRecord } from '../api/types'; + +type Translate = (key: string) => string; + +export function useMetaPresetManagement(t: Translate) { + const presetName = ref(''); + const presetTags = ref(''); + const editingPresetId = ref(null); + + const fetchPresets = () => { + return metaService.fetchPresets(); + }; + + const resetPresetForm = () => { + presetName.value = ''; + presetTags.value = ''; + editingPresetId.value = null; + }; + + const handleSavePreset = () => { + if (!presetName.value || !presetTags.value) { + alert(t('category.nameRequired')); + return; + } + + const tags = presetTags.value + .split(/[,\n]/) + .map((tag) => tag.trim()) + .filter(Boolean); + + if (editingPresetId.value) { + const index = metaService.customPresets.value.findIndex((preset) => preset.id === editingPresetId.value); + if (index !== -1) { + metaService.customPresets.value[index] = { + ...metaService.customPresets.value[index], + name: presetName.value, + tags, + }; + } + } else { + const newPreset: PresetRecord = { + id: `custom_${Date.now()}`, + name: presetName.value, + tags, + }; + metaService.customPresets.value.push(newPreset); + } + + void metaService.saveCustomPresets(metaService.customPresets.value).then(() => { + resetPresetForm(); + }); + }; + + const handleEditPreset = (preset: PresetRecord) => { + editingPresetId.value = preset.id; + presetName.value = preset.name; + presetTags.value = preset.tags.join(', '); + }; + + const handleDeletePreset = (id: string) => { + if (!confirm(t('common.confirm') || 'Are you sure?')) return; + + const newCustoms = metaService.customPresets.value.filter((preset) => preset.id !== id); + metaService.customPresets.value = newCustoms; + void metaService.saveCustomPresets(newCustoms); + }; + + return { + presetName, + presetTags, + editingPresetId, + fetchPresets, + resetPresetForm, + handleSavePreset, + handleEditPreset, + handleDeletePreset, + }; +}