Files
vue-desktop/src/ui/desktop-container/useDynamicAppIcons.ts
2025-10-18 19:12:18 +08:00

135 lines
3.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { computed, watch } from 'vue'
import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
import { appRegistry } from '@/apps'
/**
* 动态应用图标管理
* 合并内置应用和外置应用生成图标列表
*/
export function useDynamicAppIcons() {
// 生成所有可用的应用图标
const generateAppIcons = (): IDesktopAppIcon[] => {
const icons: IDesktopAppIcon[] = []
let position = 1
// 添加内置应用
const builtInApps = appRegistry.getAllApps()
for (const app of builtInApps) {
const x = ((position - 1) % 4) + 1 // 每行4个图标
const y = Math.floor((position - 1) / 4) + 1
icons.push({
name: app.manifest.name,
icon: app.manifest.icon,
path: app.manifest.id,
x,
y
})
position++
}
// 添加外置应用
// const externalApps = []
// for (const app of externalApps) {
// const x = ((position - 1) % 4) + 1
// const y = Math.floor((position - 1) / 4) + 1
//
// icons.push({
// name: app.manifest.name,
// icon: app.manifest.icon || '📱', // 默认图标
// path: app.manifest.id,
// x,
// y
// })
// position++
// }
// 添加系统状态应用
icons.push({
name: '系统状态',
icon: '⚙️',
path: 'system-status',
x: ((position - 1) % 4) + 1,
y: Math.floor((position - 1) / 4) + 1
})
return icons
}
// 计算应用图标(响应式)
const appIcons = computed(() => {
return generateAppIcons()
})
// 从本地存储加载位置信息
const loadIconPositions = (): Record<string, { x: number, y: number }> => {
try {
const saved = localStorage.getItem('desktopAppIconPositions')
return saved ? JSON.parse(saved) : {}
} catch (error) {
console.warn('加载图标位置信息失败:', error)
return {}
}
}
// 保存位置信息到本地存储
const saveIconPositions = (icons: IDesktopAppIcon[]) => {
try {
const positions = icons.reduce((acc, icon) => {
acc[icon.path] = { x: icon.x, y: icon.y }
return acc
}, {} as Record<string, { x: number, y: number }>)
localStorage.setItem('desktopAppIconPositions', JSON.stringify(positions))
} catch (error) {
console.warn('保存图标位置信息失败:', error)
}
}
// 应用保存的位置信息
const applyIconPositions = (icons: IDesktopAppIcon[]): IDesktopAppIcon[] => {
const savedPositions = loadIconPositions()
return icons.map(icon => {
const savedPos = savedPositions[icon.path]
if (savedPos) {
return { ...icon, x: savedPos.x, y: savedPos.y }
}
return icon
})
}
// 获取带位置信息的应用图标
const getAppIconsWithPositions = (): IDesktopAppIcon[] => {
const icons = appIcons.value
return applyIconPositions(icons)
}
// 刷新应用列表(仅在需要时手动调用)
const refreshApps = async () => {
try {
// 只有在系统服务已启动的情况下才刷新
} catch (error) {
console.error('[DynamicAppIcons] 刷新应用列表失败:', error)
}
}
return {
appIcons,
getAppIconsWithPositions,
saveIconPositions,
refreshApps
}
}
// 获取应用ID映射
export function getAppIdFromIcon(iconInfo: IDesktopAppIcon): string {
// 特殊处理系统应用
if (iconInfo.path === 'system-status') {
return 'system-status'
}
// 对于其他应用path就是appId
return iconInfo.path
}