feat: 实例分组增强前端（拖拽分组 UI）

移植 Axolotl 的拖拽式实例分组界面到 Starlight，接入阶段1的规范化分组后端：

- 新增 helpers/analytics.ts（trackEvent 遥测桩）
- 补全 helpers/instance-groups.ts（6 个 invoke 包装）
- 新增 composables/useInstanceGroups.ts（分组状态 + 事件监听）
- 升级 composables/useGridGrouping.ts（排序方向 isSortAscending/toggleSortDirection）
- helpers/events.js 补 instance_groups_listener（对接 instance_groups_changed 事件）
- 新增 components/ui/library/DraggableInstanceCard.vue
- 新增 components/ui/library/InstanceGroup.vue（并补 group-drag-handle 修复组拖拽重排）
- 新增 components/ui/modal/InstanceGroupModal.vue
- GridDisplay.vue 替换为 Axolotl 拖拽版（DragDropProvider + vuedraggable）
- 补 en-US/zh-CN i18n 键各 39 条

apps/app-frontend/src/composables/useGridGrouping.ts

@@ -7,15 +7,22 @@ export const UNGROUPED_GROUP_KEY = '__ungrouped__'
 
 export type GridGroupingOption = 'Group' | 'Loader' | 'Game version' | 'None'
 export type GridSortOption =
-	| 'Name'
-	| 'Last played'
-	| 'Date created'
-	| 'Date modified'
-	| 'Game version'
+	'Name' | 'Last played' | 'Date created' | 'Date modified' | 'Game version'
+
+export type GridSortDirection = 'asc' | 'desc'
+
+export const defaultSortDirections: Record<GridSortOption, GridSortDirection> = {
+	Name: 'asc',
+	'Last played': 'desc',
+	'Date created': 'desc',
+	'Date modified': 'desc',
+	'Game version': 'asc',
+}
 
 export interface GridDisplayState {
 	group: GridGroupingOption
 	sortBy: GridSortOption
+	sortDirections: Partial<Record<GridSortOption, GridSortDirection>>
 	collapsedGroups: string[]
 }
 
@@ -38,6 +45,7 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		{
 			group: 'Group',
 			sortBy: 'Name',
+			sortDirections: {},
 			collapsedGroups: [],
 		},
 		localStorage,
@@ -66,7 +74,7 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		state.value.collapsedGroups = [...collapsedSections]
 	}
 
-	function sortInstances(instances: T[], sortBy: GridSortOption): T[] {
+	function sortInstances(instances: T[], sortBy: GridSortOption, ascending: boolean): T[] {
 		const sorted = [...instances]
 		const getGameVersion = options.getGameVersion ?? ((i: T) => i.game_version ?? '')
 		const getLastPlayed = options.getLastPlayed ?? ((i: T) => i.last_played ?? 0)
@@ -83,16 +91,19 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 				)
 				break
 			case 'Last played':
-				sorted.sort((a, b) => dayjs(getLastPlayed(b)).diff(dayjs(getLastPlayed(a))))
+				sorted.sort((a, b) => dayjs(getLastPlayed(a)).diff(dayjs(getLastPlayed(b))))
 				break
 			case 'Date created':
-				sorted.sort((a, b) => dayjs(getDateCreated(b)).diff(dayjs(getDateCreated(a))))
+				sorted.sort((a, b) => dayjs(getDateCreated(a)).diff(dayjs(getDateCreated(b))))
 				break
 			case 'Date modified':
-				sorted.sort((a, b) => dayjs(getDateModified(b)).diff(dayjs(getDateModified(a))))
+				sorted.sort((a, b) => dayjs(getDateModified(a)).diff(dayjs(getDateModified(b))))
 				break
 		}
 
+		if (!ascending) {
+			sorted.reverse()
+		}
 		return sorted
 	}
 
@@ -148,11 +159,25 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 	function sortSections(
 		instanceMap: Map<string, T[]>,
 		group: GridGroupingOption,
+		sortBy: GridSortOption,
 	): Map<string, T[]> {
 		if (group !== 'Group' && group !== 'Game version') {
 			return instanceMap
 		}
 
+		if (group === 'Group' && sortBy !== 'Name') {
+			if (instanceMap.has(UNGROUPED_GROUP_KEY) && instanceMap.size > 1) {
+				const ungroupedInstances = instanceMap.get(UNGROUPED_GROUP_KEY)!
+				instanceMap.delete(UNGROUPED_GROUP_KEY)
+				const newMap = new Map<string, T[]>([[UNGROUPED_GROUP_KEY, ungroupedInstances]])
+				for (const [key, instances] of instanceMap) {
+					newMap.set(key, instances)
+				}
+				return newMap
+			}
+			return instanceMap
+		}
+
 		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
 			if (group === 'Group') {
 				if (a[0] === UNGROUPED_GROUP_KEY && b[0] !== UNGROUPED_GROUP_KEY) return -1
@@ -166,12 +191,30 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		return instanceMap
 	}
 
+	const sortDirection = computed<GridSortDirection>(() => {
+		return (
+			state.value.sortDirections[state.value.sortBy] ?? defaultSortDirections[state.value.sortBy]
+		)
+	})
+
+	const isSortAscending = computed(() => sortDirection.value === 'asc')
+
+	const toggleSortDirection = () => {
+		const current = sortDirection.value
+		const next: GridSortDirection = current === 'asc' ? 'desc' : 'asc'
+		state.value.sortDirections = {
+			...state.value.sortDirections,
+			[state.value.sortBy]: next,
+		}
+	}
+
 	const filteredResults = computed(() => {
 		const { group = 'Group', sortBy = 'Name' } = state.value
+		const ascending = isSortAscending.value
 
-		const sorted = sortInstances(instances.value, sortBy)
+		const sorted = sortInstances(instances.value, sortBy, ascending)
 		const grouped = groupInstances(sorted, group)
-		return sortSections(grouped, group)
+		return sortSections(grouped, group, sortBy)
 	})
 
 	return {
@@ -180,6 +223,9 @@ export function useGridGrouping<T extends Record<string, unknown>>(
 		filteredResults,
 		isSectionCollapsed,
 		setSectionCollapsed,
+		sortDirection,
+		isSortAscending,
+		toggleSortDirection,
 		UNGROUPED_GROUP_KEY,
 	}
-}
+}

apps/app-frontend/src/composables/useInstanceGroups.ts

@@ -0,0 +1,182 @@
+import { computed, type Ref, ref, watch } from 'vue'
+
+import { instance_groups_listener } from '@/helpers/events'
+import {
+	create_group,
+	delete_group,
+	type InstanceGroupDefinition,
+	type InstanceGroupMembershipUpdate,
+	list_groups,
+	MAX_INSTANCE_GROUP_NAME_LENGTH,
+	rename_group,
+	set_group_memberships,
+	set_group_order,
+} from '@/helpers/instance-groups'
+
+export const FAVORITES_GROUP_ID = 'group:favorites'
+
+export const UNGROUPED_GROUP_ID = 'group:none'
+
+export { MAX_INSTANCE_GROUP_NAME_LENGTH }
+
+export { type InstanceGroupDefinition, type InstanceGroupMembershipUpdate }
+
+export interface InstanceGroupWithMembership {
+	key: string
+	name: string
+	instances: string[]
+}
+
+export function useInstanceGroups(instances: Ref<{ id: string; groups: string[] }[]>) {
+	const libraryGroups = ref<InstanceGroupDefinition[]>([])
+	const libraryGroupsLoaded = ref(false)
+
+	async function fetchGroups() {
+		libraryGroups.value = await list_groups()
+		libraryGroupsLoaded.value = true
+	}
+
+	fetchGroups()
+
+	instance_groups_listener(() => {
+		fetchGroups()
+	})
+
+	const orderedLibraryGroupIds = ref<string[]>([])
+
+	watch(
+		libraryGroups,
+		(groups) => {
+			orderedLibraryGroupIds.value = groups.map((g) => g.id)
+		},
+		{ immediate: true },
+	)
+
+	const instanceGroups = computed(() => {
+		if (!libraryGroupsLoaded.value) {
+			return []
+		}
+
+		const instanceGroupMap = new Map<string, string[]>()
+
+		for (const instance of instances.value) {
+			const groups = instance.groups ?? []
+			for (const groupId of groups) {
+				if (!instanceGroupMap.has(groupId)) {
+					instanceGroupMap.set(groupId, [])
+				}
+				instanceGroupMap.get(groupId)!.push(instance.id)
+			}
+		}
+
+		const allGroupIds = new Set<string>()
+		const groupMap = new Map<string, string[]>()
+
+		for (const groupId of orderedLibraryGroupIds.value) {
+			allGroupIds.add(groupId)
+			groupMap.set(groupId, instanceGroupMap.get(groupId) ?? [])
+		}
+
+		const ungroupedIds: string[] = []
+		for (const instance of instances.value) {
+			const instanceGroups = instance.groups ?? []
+			const isInAnyGroup = instanceGroups.some((g) => allGroupIds.has(g))
+			if (!isInAnyGroup) {
+				ungroupedIds.push(instance.id)
+			}
+		}
+
+		if (ungroupedIds.length > 0) {
+			groupMap.set(UNGROUPED_GROUP_ID, ungroupedIds)
+		}
+
+		return [...groupMap.entries()].map(([key, instances]) => ({
+			key,
+			name:
+				key === UNGROUPED_GROUP_ID
+					? 'Ungrouped'
+					: (libraryGroups.value.find((g) => g.id === key)?.name ?? key),
+			instances,
+		}))
+	})
+
+	const creatingGroup = ref(false)
+	const reorderingGroups = ref(false)
+
+	async function createNewGroup(name: string): Promise<string | null> {
+		creatingGroup.value = true
+		try {
+			const group = await create_group(name)
+			libraryGroups.value = [...libraryGroups.value, group]
+			orderedLibraryGroupIds.value = [...orderedLibraryGroupIds.value, group.id]
+			return group.id
+		} finally {
+			creatingGroup.value = false
+		}
+	}
+
+	async function renameGroupById(id: string, newName: string): Promise<boolean> {
+		if (id === FAVORITES_GROUP_ID) return false
+		const result = await rename_group(id, newName)
+		const idx = libraryGroups.value.findIndex((g) => g.id === id)
+		if (idx !== -1) {
+			libraryGroups.value = [
+				...libraryGroups.value.slice(0, idx),
+				result,
+				...libraryGroups.value.slice(idx + 1),
+			]
+		}
+		return true
+	}
+
+	async function deleteGroupById(id: string): Promise<boolean> {
+		if (id === FAVORITES_GROUP_ID) return false
+		await delete_group(id)
+		libraryGroups.value = libraryGroups.value.filter((g) => g.id !== id)
+		orderedLibraryGroupIds.value = orderedLibraryGroupIds.value.filter((gid) => gid !== id)
+		return true
+	}
+
+	async function reorderGroups(groupIds: string[]): Promise<boolean> {
+		reorderingGroups.value = true
+		try {
+			await set_group_order(groupIds)
+			// Favorites is rendered separately from draggable sections. Keep it in
+			// the local order after a drag even though the backend accepts only the
+			// reorderable group ids; otherwise it appears again as an ordinary
+			// section until the next full group refresh.
+			orderedLibraryGroupIds.value = [
+				FAVORITES_GROUP_ID,
+				...groupIds.filter((id) => id !== FAVORITES_GROUP_ID),
+			]
+			return true
+		} finally {
+			reorderingGroups.value = false
+		}
+	}
+
+	async function setMemberships(updates: InstanceGroupMembershipUpdate[]): Promise<boolean> {
+		await set_group_memberships(updates)
+		return true
+	}
+
+	function groupNameById(id: string): string | undefined {
+		if (id === UNGROUPED_GROUP_ID) return 'Ungrouped'
+		return libraryGroups.value.find((g) => g.id === id)?.name
+	}
+
+	return {
+		libraryGroups,
+		libraryGroupsLoaded,
+		orderedLibraryGroupIds,
+		instanceGroups,
+		creatingGroup,
+		reorderingGroups,
+		createGroup: createNewGroup,
+		renameGroupById,
+		deleteGroupById,
+		reorderGroups,
+		setMemberships,
+		groupNameById,
+	}
+}