保存一下

2025-08-21 16:57:42 +08:00
parent 7225419bff
commit 6c4d6fb298
5 changed files with 108 additions and 54 deletions
--- a/src/core/desktop/types/IGridTemplateParams.ts
+++ b/src/core/desktop/types/IGridTemplateParams.ts
@@ -0,0 +1,21 @@
+/**
+ * 桌面网格模板参数
+ */
+export interface IGridTemplateParams {
+  /** 单元格预设宽度 */
+  cellExpectWidth: number
+  /** 单元格预设高度 */
+  cellExpectHeight: number
+  /** 单元格实际宽度 */
+  cellRealWidth: number
+  /** 单元格实际高度 */
+  cellRealHeight: number
+  /** 列间距 */
+  gapX: number
+  /** 行间距 */
+  gapY: number
+  /** 总列数 */
+  colCount: number
+  /** 总行数 */
+  rowCount: number
+}
--- a/src/core/desktop/ui/DesktopComponent.vue
+++ b/src/core/desktop/ui/DesktopComponent.vue
@@ -4,9 +4,10 @@
    class="w-full h-full pos-relative"
  >
    <div ref="desktopRootDom" class="desktop-root">
-      <div class="desktop-container">
-        <div v-for="icon in appIconsRef" class="icon-container"
-             :style="`grid-row: ${icon.row}/${icon.row + 1};grid-column: ${icon.col}/${icon.col + 1}};`">{{ icon.name }}</div>
+      <div class="desktop-container"
+           :style="gridStyle">
+        <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
+                 :icon="appIcon" :gridTemplate="gridTemplate" />
      </div>
      <div class="task-bar"></div>
    </div>
@@ -22,42 +23,12 @@ import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
 import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
+import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'

 const props = defineProps<{ process: DesktopProcess }>()
 // console.log(props.process)

-const { colCount, rowCount, appIconsRef } = useDesktopInit('.desktop-container')
-
-const iconArr: IDesktopAppIcon[] = [
-  {
-    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,
-  },
-]
+const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-container')

 XSystem.instance.eventManages.addEventListener(
  DesktopEventEnum.onDesktopRootDomResize,
@@ -81,20 +52,15 @@ const iconsInit = () => {
 </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));
+    @apply w-full flex-1 grid grid-auto-flow-col pos-relative;

    .icon-container {
-      width: $icon-width;
-      height: $icon-height;
+      width: 100%;
+      height: 100%;
      @apply flex flex-col items-center justify-center rounded  bg-gray-200;
    }
  }
--- a/src/core/desktop/ui/components/AppIcon.vue
+++ b/src/core/desktop/ui/components/AppIcon.vue
@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="icon-container"
+    :style="`grid-column: ${icon.col}/${icon.col + 1};grid-row: ${icon.row}/${icon.row + 1};`"
+    draggable="true"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+  >
+    {{ icon.name }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
+import type { IGridTemplateParams } from '@/core/desktop/types/IGridTemplateParams.ts'
+
+const { icon, gridTemplate } = defineProps<{ icon: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()
+
+const onDragStart = (e: DragEvent) => {}
+
+const onDragEnd = (e: DragEvent) => {
+  const el = e.target as HTMLElement | null
+  if (!el) return
+  // 获取容器边界
+  const rect = el.parentElement!.getBoundingClientRect()
+
+  // 鼠标相对容器左上角坐标
+  const mouseX = e.clientX - rect.left
+  const mouseY = e.clientY - rect.top
+
+  // 计算鼠标所在单元格坐标（向上取整，从1开始）
+  const gridX = Math.ceil(mouseX / gridTemplate.cellRealWidth)
+  const gridY = Math.ceil(mouseY / gridTemplate.cellRealHeight)
+  console.log(gridX, gridY)
+  icon.col = gridX
+  icon.row = gridY
+}
+</script>
+
+<style scoped lang="scss">
+.icon-container {
+  width: 100%;
+  height: 100%;
+  @apply flex flex-col items-center justify-center rounded  bg-gray-200;
+}
+</style>
--- a/src/core/desktop/ui/useDesktopInit.ts
+++ b/src/core/desktop/ui/useDesktopInit.ts
@@ -1,6 +1,7 @@
 import XSystem from '@/core/XSystem.ts'
 import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 import {
+  computed,
  nextTick,
  onMounted,
  onUnmounted,
@@ -12,13 +13,18 @@ import {
 } from 'vue'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useDraggable } from '@vueuse/core'
+import type { IGridTemplateParams } from '@/core/desktop/types/IGridTemplateParams.ts'

 export function useDesktopInit(containerStr: string) {
  let container:HTMLElement
-  const gridTemplate = reactive({
-    cellWidth: 90,
-    cellHeight: 110,
-    gap: 10,
+  // 初始值
+  const gridTemplate = reactive<IGridTemplateParams>({
+    cellExpectWidth: 90,
+    cellExpectHeight: 110,
+    cellRealWidth: 90,
+    cellRealHeight: 110,
+    gapX: 4,
+    gapY: 4,
    colCount: 1,
    rowCount: 1
  })
@@ -26,17 +32,28 @@ export function useDesktopInit(containerStr: string) {
  const ro = new ResizeObserver(entries => {
    const entry= entries[0]
    const containerRect = entry.contentRect
-    gridTemplate.colCount = Math.floor(containerRect.width / gridTemplate.cellWidth);
-    gridTemplate.rowCount = Math.floor(containerRect.height / (gridTemplate.cellHeight));
-    console.log('resize', gridTemplate)
+    gridTemplate.colCount = Math.floor((containerRect.width + gridTemplate.gapX) / (gridTemplate.cellExpectWidth + gridTemplate.gapX));
+    gridTemplate.rowCount = Math.floor((containerRect.height + gridTemplate.gapY) / (gridTemplate.cellExpectHeight + gridTemplate.gapY));
+
+    const w = containerRect.width - (gridTemplate.gapX * (gridTemplate.colCount - 1))
+    const h = containerRect.height - (gridTemplate.gapY * (gridTemplate.rowCount - 1))
+    gridTemplate.cellRealWidth = Number((w / gridTemplate.colCount).toFixed(2))
+    gridTemplate.cellRealHeight = Number((h / gridTemplate.rowCount).toFixed(2))
  })

+  const gridStyle = computed(() => ({
+    gridTemplateColumns: `repeat(${gridTemplate.colCount}, minmax(${gridTemplate.cellExpectWidth}px, 1fr))`,
+    gridTemplateRows: `repeat(${gridTemplate.rowCount}, minmax(${gridTemplate.cellExpectHeight}px, 1fr))`,
+    gap: `${gridTemplate.gapX}px ${gridTemplate.gapY}px`
+  }))
+
  onMounted(() => {
    container = document.querySelector(containerStr)!
    ro.observe(container)
  })
  onUnmounted(() => {
    ro.unobserve(container)
+    ro.disconnect()
  })

  // 有桌面图标的app
@@ -62,11 +79,11 @@ export function useDesktopInit(containerStr: string) {
      appIcon.col = x
      appIcon.row = y
    })
-    console.log(appIconsRef)
  })

  return {
-    ...toRefs(gridTemplate),
-    appIconsRef
+    gridTemplate,
+    appIconsRef,
+    gridStyle
  }
 }