81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<template>
|
|
<n-config-provider
|
|
:config-provider-props="configProviderProps"
|
|
class="w-full h-full pos-relative"
|
|
>
|
|
<div class="desktop-root" @contextmenu="onContextMenu">
|
|
<div class="desktop-bg">
|
|
<div class="desktop-icons-container"
|
|
:style="gridStyle">
|
|
<AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
|
|
:iconInfo="appIcon" :gridTemplate="gridTemplate"
|
|
@dblclick="runApp(appIcon)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="task-bar">
|
|
<div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">测试</div>
|
|
</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 { useDesktopInit } from '@/core/desktop/ui/hooks/useDesktopInit.ts'
|
|
import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
|
|
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
|
|
import { eventManager } from '@/core/events/EventManager.ts'
|
|
|
|
const props = defineProps<{ process: DesktopProcess }>()
|
|
|
|
const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-icons-container')
|
|
|
|
eventManager.addEventListener('onDesktopRootDomResize',
|
|
(width, height) => {
|
|
console.log(width, height)
|
|
notificationApi.create({
|
|
title: '桌面通知',
|
|
content: `桌面尺寸变化${width}x${height}}`,
|
|
duration: 2000,
|
|
})
|
|
},
|
|
)
|
|
|
|
const onContextMenu = (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
const runApp = (appIcon: IDesktopAppIcon) => {
|
|
XSystem.instance.run(appIcon.name)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$taskBarHeight: 40px;
|
|
.desktop-root {
|
|
@apply w-full h-full flex flex-col;
|
|
|
|
.desktop-bg {
|
|
@apply w-full h-full flex-1 p-2 pos-relative;
|
|
background-image: url("imgs/desktop-bg-2.jpeg");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
height: calc(100% - #{$taskBarHeight});
|
|
}
|
|
|
|
.desktop-icons-container {
|
|
@apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
|
|
}
|
|
|
|
.task-bar {
|
|
@apply w-full bg-gray-200 flex justify-center items-center;
|
|
height: $taskBarHeight;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
</style>
|