102 lines
2.8 KiB
Vue
102 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<n-config-provider :config-provider-props="configProviderProps" class="w-full h-full pos-relative">
|
||
|
|
<div ref="desktopRootDom" class="desktop-root">
|
||
|
|
<div class="desktop-container">
|
||
|
|
<div v-for="icon in iconArr" class="icon-container">{{ icon.icon }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="task-bar"></div>
|
||
|
|
</div>
|
||
|
|
</n-config-provider>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { DesktopProcess } from '@/core/desktop/DesktopProcess.ts'
|
||
|
|
import XSystem from '@/core/XSystem.ts'
|
||
|
|
import { notificationApi } from '@/core/common/naive-ui/discrete-api.ts'
|
||
|
|
import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
|
||
|
|
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
|
||
|
|
import { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
|
||
|
|
import { onMounted } from 'vue'
|
||
|
|
import type { IconType } from '@/core/desktop/types/IconType.ts'
|
||
|
|
import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
|
||
|
|
|
||
|
|
const props = defineProps<{process: DesktopProcess}>()
|
||
|
|
console.log(props.process)
|
||
|
|
|
||
|
|
const iconArr: IconType[] = [
|
||
|
|
{
|
||
|
|
name: '文件管理器',
|
||
|
|
icon: '🗂',
|
||
|
|
path: '/',
|
||
|
|
col: 1,
|
||
|
|
row: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '浏览器',
|
||
|
|
icon: '🌐',
|
||
|
|
path: '/',
|
||
|
|
col: 1,
|
||
|
|
row: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '记事本',
|
||
|
|
icon: '📄',
|
||
|
|
path: '/',
|
||
|
|
col: 1,
|
||
|
|
row: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '音乐播放器',
|
||
|
|
icon: '🎵',
|
||
|
|
path: '/',
|
||
|
|
col: 1,
|
||
|
|
row: 4
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
XSystem.instance.eventManages.addEventListener(DesktopEventEnum.onDesktopRootDomResize, (width, height) => {
|
||
|
|
console.log(width, height)
|
||
|
|
notificationApi.create({ title: '桌面通知', content: `桌面尺寸变化${width}x${height}}`, duration: 2000 })
|
||
|
|
})
|
||
|
|
|
||
|
|
const iconsInit = () => {
|
||
|
|
const icons = document.querySelectorAll<HTMLDivElement>('div.icon-container')
|
||
|
|
const container = document.querySelector<HTMLDivElement>('.desktop-container')!
|
||
|
|
icons.forEach((icon: HTMLDivElement) => {
|
||
|
|
useIconDrag(icon, container)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
const container = document.querySelector<HTMLDivElement>('.desktop-container')!
|
||
|
|
console.log(container.getBoundingClientRect())
|
||
|
|
// iconsInit()
|
||
|
|
const { col, row } = useDesktopInit(container)
|
||
|
|
console.log(col.value, row.value)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
$icon-width: 80px;
|
||
|
|
$icon-height: 110px;
|
||
|
|
|
||
|
|
.desktop-root {
|
||
|
|
@apply w-full h-full flex flex-col;
|
||
|
|
|
||
|
|
.desktop-container {
|
||
|
|
@apply w-full flex-1 grid gap-4 grid-auto-flow-col p-4 pos-relative;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax($icon-width, 1fr));
|
||
|
|
grid-template-rows: repeat(auto-fill, minmax($icon-height, 1fr));
|
||
|
|
|
||
|
|
.icon-container {
|
||
|
|
width: $icon-width;
|
||
|
|
height: $icon-height;
|
||
|
|
@apply flex flex-col items-center justify-center rounded text-white bg-gray-200;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.task-bar {
|
||
|
|
@apply w-full h-[40px] bg-gray-200;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|