mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-10 15:40:24 +00:00
[refactor] Improve settings domain organization (#5550)
* refactor: move settingStore to platform/settings Move src/stores/settingStore.ts to src/platform/settings/settingStore.ts to separate platform infrastructure from domain logic following DDD principles. Updates all import references across ~70 files to maintain compatibility. * fix: update remaining settingStore imports after rebase * fix: complete remaining settingStore import updates * fix: update vi.mock paths for settingStore in tests Update all test files to mock the new settingStore location at @/platform/settings/settingStore instead of @/stores/settingStore * fix: resolve remaining settingStore imports and unused imports after rebase * fix: update settingStore mock path in SelectionToolbox test Fix vi.mock path from @/stores/settingStore to @/platform/settings/settingStore to resolve failing Load3D viewer button test. * refactor: complete comprehensive settings migration to platform layer This commit completes the migration of all settings-related code to the platform layer as part of the Domain-Driven Design (DDD) architecture refactoring. - constants/coreSettings.ts → platform/settings/constants/coreSettings.ts - types/settingTypes.ts → platform/settings/types.ts - stores/settingStore.ts → platform/settings/settingStore.ts (already moved) - composables/setting/useSettingUI.ts → platform/settings/composables/useSettingUI.ts - composables/setting/useSettingSearch.ts → platform/settings/composables/useSettingSearch.ts - composables/useLitegraphSettings.ts → platform/settings/composables/useLitegraphSettings.ts - components/dialog/content/SettingDialogContent.vue → platform/settings/components/SettingDialogContent.vue - components/dialog/content/setting/SettingItem.vue → platform/settings/components/SettingItem.vue - components/dialog/content/setting/SettingGroup.vue → platform/settings/components/SettingGroup.vue - components/dialog/content/setting/SettingsPanel.vue → platform/settings/components/SettingsPanel.vue - components/dialog/content/setting/ColorPaletteMessage.vue → platform/settings/components/ColorPaletteMessage.vue - components/dialog/content/setting/ExtensionPanel.vue → platform/settings/components/ExtensionPanel.vue - components/dialog/content/setting/ServerConfigPanel.vue → platform/settings/components/ServerConfigPanel.vue - ~100+ import statements updated across the codebase - Test file imports corrected - Component imports fixed in dialog service and command menubar - Composable imports updated in GraphCanvas.vue ``` src/platform/settings/ ├── components/ # All settings UI components ├── composables/ # Settings-related composables ├── constants/ # Core settings definitions ├── types.ts # Settings type definitions └── settingStore.ts # Central settings state management ``` ✅ TypeScript compilation successful ✅ All tests passing (settings store, search functionality, UI components) ✅ Production build successful ✅ Domain boundaries properly established This migration consolidates all settings functionality into a cohesive platform domain, improving maintainability and following DDD principles for better code organization. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: format and lint after rebase conflict resolution * fix: update remaining import paths to platform settings - Fix browser test import: extensionAPI.spec.ts - Fix script import: collect-i18n-general.ts - Complete settings migration import path updates 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Byrne
204
src/platform/settings/composables/useSettingUI.ts
Normal file
204
src/platform/settings/composables/useSettingUI.ts
Normal file
@@ -0,0 +1,204 @@
|
||||
import {
|
||||
type Component,
|
||||
computed,
|
||||
defineAsyncComponent,
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
|
||||
import {
|
||||
SettingTreeNode,
|
||||
useSettingStore
|
||||
} from '@/platform/settings/settingStore'
|
||||
import type { SettingParams } from '@/platform/settings/types'
|
||||
import { isElectron } from '@/utils/envUtil'
|
||||
import { normalizeI18nKey } from '@/utils/formatUtil'
|
||||
import { buildTree } from '@/utils/treeUtil'
|
||||
|
||||
interface SettingPanelItem {
|
||||
node: SettingTreeNode
|
||||
component: Component
|
||||
}
|
||||
|
||||
export function useSettingUI(
|
||||
defaultPanel?:
|
||||
| 'about'
|
||||
| 'keybinding'
|
||||
| 'extension'
|
||||
| 'server-config'
|
||||
| 'user'
|
||||
| 'credits'
|
||||
) {
|
||||
const { t } = useI18n()
|
||||
const { isLoggedIn } = useCurrentUser()
|
||||
const settingStore = useSettingStore()
|
||||
const activeCategory = ref<SettingTreeNode | null>(null)
|
||||
|
||||
const settingRoot = computed<SettingTreeNode>(() => {
|
||||
const root = buildTree(
|
||||
Object.values(settingStore.settingsById).filter(
|
||||
(setting: SettingParams) => setting.type !== 'hidden'
|
||||
),
|
||||
(setting: SettingParams) => setting.category || setting.id.split('.')
|
||||
)
|
||||
|
||||
const floatingSettings = (root.children ?? []).filter((node) => node.leaf)
|
||||
if (floatingSettings.length) {
|
||||
root.children = (root.children ?? []).filter((node) => !node.leaf)
|
||||
root.children.push({
|
||||
key: 'Other',
|
||||
label: 'Other',
|
||||
leaf: false,
|
||||
children: floatingSettings
|
||||
})
|
||||
}
|
||||
|
||||
return root
|
||||
})
|
||||
|
||||
const settingCategories = computed<SettingTreeNode[]>(
|
||||
() => settingRoot.value.children ?? []
|
||||
)
|
||||
|
||||
// Define panel items
|
||||
const aboutPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'about',
|
||||
label: 'About',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/AboutPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const creditsPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'credits',
|
||||
label: 'Credits',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/CreditsPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const userPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'user',
|
||||
label: 'User',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/UserPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const keybindingPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'keybinding',
|
||||
label: 'Keybinding',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/components/dialog/content/setting/KeybindingPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const extensionPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'extension',
|
||||
label: 'Extension',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/platform/settings/components/ExtensionPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const serverConfigPanel: SettingPanelItem = {
|
||||
node: {
|
||||
key: 'server-config',
|
||||
label: 'Server-Config',
|
||||
children: []
|
||||
},
|
||||
component: defineAsyncComponent(
|
||||
() => import('@/platform/settings/components/ServerConfigPanel.vue')
|
||||
)
|
||||
}
|
||||
|
||||
const panels = computed<SettingPanelItem[]>(() =>
|
||||
[
|
||||
aboutPanel,
|
||||
creditsPanel,
|
||||
userPanel,
|
||||
keybindingPanel,
|
||||
extensionPanel,
|
||||
...(isElectron() ? [serverConfigPanel] : [])
|
||||
].filter((panel) => panel.component)
|
||||
)
|
||||
|
||||
/**
|
||||
* The default category to show when the dialog is opened.
|
||||
*/
|
||||
const defaultCategory = computed<SettingTreeNode>(() => {
|
||||
if (!defaultPanel) return settingCategories.value[0]
|
||||
// Search through all groups in groupedMenuTreeNodes
|
||||
for (const group of groupedMenuTreeNodes.value) {
|
||||
const found = group.children?.find((node) => node.key === defaultPanel)
|
||||
if (found) return found
|
||||
}
|
||||
return settingCategories.value[0]
|
||||
})
|
||||
|
||||
const translateCategory = (node: SettingTreeNode) => ({
|
||||
...node,
|
||||
translatedLabel: t(
|
||||
`settingsCategories.${normalizeI18nKey(node.label)}`,
|
||||
node.label
|
||||
)
|
||||
})
|
||||
|
||||
const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
|
||||
// Account settings - only show credits when user is authenticated
|
||||
{
|
||||
key: 'account',
|
||||
label: 'Account',
|
||||
children: [
|
||||
userPanel.node,
|
||||
...(isLoggedIn.value ? [creditsPanel.node] : [])
|
||||
].map(translateCategory)
|
||||
},
|
||||
// Normal settings stored in the settingStore
|
||||
{
|
||||
key: 'settings',
|
||||
label: 'Application Settings',
|
||||
children: settingCategories.value.map(translateCategory)
|
||||
},
|
||||
// Special settings such as about, keybinding, extension, server-config
|
||||
{
|
||||
key: 'specialSettings',
|
||||
label: 'Special Settings',
|
||||
children: [
|
||||
keybindingPanel.node,
|
||||
extensionPanel.node,
|
||||
aboutPanel.node,
|
||||
...(isElectron() ? [serverConfigPanel.node] : [])
|
||||
].map(translateCategory)
|
||||
}
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
activeCategory.value = defaultCategory.value
|
||||
})
|
||||
|
||||
return {
|
||||
panels,
|
||||
activeCategory,
|
||||
defaultCategory,
|
||||
groupedMenuTreeNodes,
|
||||
settingCategories
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user