暂存

jest.config.js

@@ -0,0 +1,13 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  esModuleInterop: true,
+  // 指定ts config文件
+  tsconfig: '<rootDir>/tsconfig.json',
+  // 使用esm而非commonjs
+  useESM: true,
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1"
+  }
+};

src/App.vue

@@ -3,7 +3,7 @@
 
 import {onMounted, ref} from "vue";
 import MacWindow from "./components/window/macWindow.vue";
-import MagnetView from "./components/magnetView.vue";
+import MagnetView from "./components/magnets/magnetView.vue";
 import AppleBar from "@/components/appleBar/appleBar.vue";
 import BarIconBtn from "@/components/appleBar/barIconBtn.vue";
 import SettingView from "@/components/settingView.vue";

src/assets/base.css

@@ -114,14 +114,22 @@
     /*    允许被点击*/
 }
 
+.scroll{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    padding-right: 12px;
+}
 /* 更细的滚动条 */
 .scroll::-webkit-scrollbar {
     position: absolute;
     right: 0;
     top: 0;
-    width: 11px;
-    height: 11px;
+    width: 10px;
+    height: 10px;
     background-color:  rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
 }
 .scroll::-webkit-scrollbar-track {
     display: none;
@@ -195,7 +203,7 @@
 .dialog{
     width: 100%;
     height: 100%;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     display: flex;
@@ -301,4 +309,13 @@
 }
 
 
+.event-mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+
 

src/components/magnets/magnetInfo.ts

@@ -1,7 +1,7 @@
 
 // import {App} from "vue";
 
-import {Magnet, MagnetInfo, MagnetSize, SavedMagnet} from "@/types/magnetType.ts";
+import {Magnet, MagnetInfo, MagnetSize, SavedMagnet, showMagnetInfo} from "@/types/magnetType.ts";
 
 
 
@@ -26,14 +26,36 @@ export const timeMagnetInfo: MagnetInfo =
             height: 6,
         },
     },
-    component: null
+    component: import('@/components/magnets/timeMagnet.vue')
 }
 
-const magnetInfos: MagnetInfo[] =
+
+
+
+export const magnetInfos: MagnetInfo[] =
 [
-    timeMagnetInfo
+    timeMagnetInfo,
+    {...timeMagnetInfo, defaultSize: MagnetSize.small, component: import('@/components/magnets/timeMagnet.vue')},
+    {...timeMagnetInfo, defaultSize: MagnetSize.small, component: import('@/components/magnets/timeMagnet.vue')},
+    {...timeMagnetInfo, defaultSize: MagnetSize.small, component: import('@/components/magnets/timeMagnet.vue')},
+    {...timeMagnetInfo, defaultSize: MagnetSize.small, component: import('@/components/magnets/timeMagnet.vue')},
+    {...timeMagnetInfo, defaultSize: MagnetSize.small, component: import('@/components/magnets/timeMagnet.vue')},
 ]
 
+
+export function getShowMagnetInfo() : showMagnetInfo[]{
+    return magnetInfos.map(magnetInfo=>{
+        let size = magnetInfo.sizes[magnetInfo.defaultSize]
+        if (!size) {
+            throw new Error(`magnetInfo default size not found: ${magnetInfo.type} ${magnetInfo.defaultSize} magnet must have size`)
+        }
+        return {
+            ...magnetInfo,
+            size: size
+        }
+    })
+}
+
 /**
  * 初始化时间磁贴组件
  * @param component

src/components/magnets/magnetTable.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import { computeStyle, getShowMagnetInfo} from "@/components/magnets/magnetInfo.ts";
+import {TransitionRoot} from "@headlessui/vue";
+
+
+const magnetTable = ref()
+const showMagnetInfos = getShowMagnetInfo()
+
+console.log(showMagnetInfos)
+
+
+
+// a, a , b, b
+// c, d, b, b
+
+let isSelect = ref(false)
+let setIsSelect = (flag: boolean) => {
+  isSelect.value = flag
+}
+</script>
+
+<template>
+  <div class="magnet-table" :ref="magnetTable">
+    <div class="scroll">
+      <div class="magnets-show">
+        <div class="magnet-item-box"
+             v-for="(showMagnetInfo, index) in showMagnetInfos"
+             :style="computeStyle(showMagnetInfo.size.width, showMagnetInfo.size.height, 0, 0)"
+             :key="`magnet-${index}`"
+        >
+          <component
+              :is="showMagnetInfo.component"
+              :size="showMagnetInfo.defaultSize"
+          ></component>
+          <div class="event-mask"></div>
+
+        </div>
+      </div>
+    </div>
+
+
+<!--    侧边栏 -->
+    <TransitionRoot
+        class="site"
+        :show="isSelect"
+        enter="transition ease-in-out duration-700 transform"
+        enterFrom="translate-y-full"
+        enterTo="translate-y-0"
+        leave="transition ease-in-out duration-700 transform"
+        leaveFrom="translate-y-0"
+        leaveTo="translate-y-full"
+    >
+      <div className="site-content-bottom">
+        测试
+        <button class="close-btn" @click="setIsSelect(false)">
+          X
+        </button>
+      </div>
+    </TransitionRoot >
+  </div>
+</template>
+
+<style scoped>
+.magnet-table{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.magnets-show{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+}
+.magnet-item-box{
+  position: relative;
+  margin-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid lightskyblue;
+}
+</style>

src/components/magnetView.vue → src/components/magnets/magnetView.vue

@@ -11,6 +11,7 @@ import {CollisionDirection, CollisionResult, detectCollisionDirection, Drag, Rec
 import IconSvg from "@/components/public/icon/iconSvg.vue";
 import {fetchMagnetList} from "@/apis/magnetControl.ts";
 import {ErrorCode, ResponseData} from "@/types/apiTypes.ts";
+import MagnetTable from "@/components/magnets/magnetTable.vue";
 
 const timeMagnetInfo = initTimeMagnetInfo(TimeMagnet)
 
@@ -297,7 +298,7 @@ function setIsSite(value: boolean = false) {
 
     <TransitionRoot
         :show="isOpen"
-        as="template"
+        as="span"
         enter="transition duration-300 ease-out"
         enter-from="opacity-0"
         enter-to="opacity-100"
@@ -305,7 +306,7 @@ function setIsSite(value: boolean = false) {
         leave-from="opacity-100"
         leave-to="opacity-0"
     >
-    <Dialog class="dialog" >
+    <Dialog class="dialog">
       <DialogPanel class="dialog-content">
         <DialogTitle class="dialog-title">
           <span>新增磁贴</span>
@@ -315,27 +316,9 @@ function setIsSite(value: boolean = false) {
         </DialogTitle>
         <div class="dialog-show">
 <!--          磁贴组件选择列表-->
-          <TransitionRoot
-              class="site"
-              :show="isSite"
-              enter="transition ease-in-out duration-700 transform"
-              enterFrom="translate-y-full"
-              enterTo="translate-y-0"
-              leave="transition ease-in-out duration-700 transform"
-              leaveFrom="translate-y-0"
-              leaveTo="translate-y-full"
-          >
-            <div className="site-content-bottom">
-              测试
-              <button class="close-btn" @click="setIsSite(false)">
-                X
-              </button>
-            </div>
-          </TransitionRoot >
-          <button @click="setIsSite(true)">开启侧边栏</button>
-          <button @click="setIsOpen(false)">Cancel</button>
+          <magnet-table></magnet-table>
         </div>
-
+        <button @click="setIsOpen(false)">Deactivate</button>
       </DialogPanel>
     </Dialog>
   </TransitionRoot>

src/components/window/macWindow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ComponentInternalInstance, getCurrentInstance, onBeforeMount, onMounted, Ref, ref, UnwrapRef} from "vue";
+import {ComponentInternalInstance, getCurrentInstance, onMounted, Ref, ref, UnwrapRef} from "vue";
 import { IpcAction, windowAction} from "../../tools/IpcCmd.ts";
 
 import "@/assets/base.css"
@@ -24,6 +24,10 @@ const switchFullHandle = () => {
   isFull.value = !isFull.value
 
 }
+
+// 给body挂载大小属性
+
+
 const btnClickHandel = (action: IpcAction) => {
   proxy?.$winHandle(action)
 }
@@ -52,9 +56,9 @@ onMounted(()=>{
       proxy?.$winHandle(windowAction.enableIgnoreMouse);
     }
   });
-
 })
 
+
 </script>
 
 <template>
@@ -71,21 +75,21 @@ onMounted(()=>{
 
         <div class="control-box">
           <slot name="top"></slot>
-          <div :class="`no-drag showTopTip btn ding ${isDing?'ding-is':''}`"  @click="switchDingHandle">
+          <div id="win-btn-ding" :class="`no-drag showTopTip btn ding ${isDing?'ding-is':''}`"  @click="switchDingHandle">
             <span class="showTip">{{isDing?"取消置顶":"置顶"}}</span>
           </div>
-          <div class="no-drag showTopTip btn min" @click="btnClickHandel(windowAction.min)">
+          <div id="win-btn-min"  class="no-drag showTopTip btn min" @click="btnClickHandel(windowAction.min)">
             <span class="showTip">最小化</span>
           </div>
-          <div :class="`no-drag showTopTip btn full ${isFull?'full-is':''}`"  @click="switchFullHandle">
+          <div id="win-btn-full"  :class="`no-drag showTopTip btn full ${isFull?'full-is':''}`"  @click="switchFullHandle">
             <span class="showTip">{{isFull?'取消全屏':'全屏'}}</span>
           </div>
-          <div class="no-drag showTopTip btn close"  @click="btnClickHandel(windowAction.close)">
+          <div id="win-btn-close"  class="no-drag showTopTip btn close"  @click="btnClickHandel(windowAction.close)">
             <span class="showTip">关闭窗口</span>
           </div>
         </div>
       </div>
-      <div class="window-content">
+      <div class="window-content" id="headlessui-dialog">
         <slot></slot>
       </div>
     </div>
@@ -93,14 +97,27 @@ onMounted(()=>{
 </template>
 
 <style>
-
+body{
+  margin: 0;
+  padding: 5px;
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
 .min_window{
-  width: calc( 100% - 30px);
-  height:  calc( 100% - 30px);
-  margin: 15px;
+  width: calc( 100% - 10px);
+  height:  calc( 100% - 10px);
   box-sizing: border-box;
   border: 1px solid transparent;
 }
+
+#headlessui-portal-root{
+  position: absolute;
+  top: 35px;
+  left: 0;
+  width: calc(100% - 10px);
+  height: calc(100% - 35px);
+}
 .max_window{
   width: 100%;
   height: 100%;
@@ -117,4 +134,5 @@ onMounted(()=>{
   overflow: hidden;
 }
 
+
 </style>

src/types/magnetType.ts

@@ -74,6 +74,10 @@ export interface MagnetInfo  {
     component: any
 }
 
+export interface showMagnetInfo extends MagnetInfo{
+    size: size
+}
+
 
 export interface MagnetEmit<T>{
     event: string,

src/util/pageHandle.ts

@@ -1,20 +1,20 @@
 import {App} from "vue";
 
-import {ipcRenderer} from "electron";
+// import {ipcRenderer} from "electron";
 import {actionMap, IpcAction, windowAction} from "../tools/IpcCmd.ts";
 import {registerWindowData} from "../types/appConfig.ts";
 import baseApi from "@/apis/baseApi.ts";
 
 // 判断是否为 webMode
 
-// const ipcRenderer = {
-//     on: (code: string, _: Function)=>{
-//         console.log(code)
-//     },
-//     send: (code: string, data: any)=>{
-//         console.log(code, data)
-//     },
-// };
+const ipcRenderer = {
+    on: (code: string, _: Function)=>{
+        console.log(code)
+    },
+    send: (code: string, data: any)=>{
+        console.log(code, data)
+    },
+};
 
 function winHandle(ipc: Electron.IpcRenderer, windowName: string, action: IpcAction): boolean{
     let sendCode = action.code;