feat: 磁贴管理

1. 磁贴删除功能
2. 新增磁贴组件时左右拖动切换

src/assets/base.css

@@ -293,6 +293,17 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
+}
+.tabs-w .vue-drag{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .tabs-w .item{
     flex-shrink: 0;
@@ -324,7 +335,9 @@
     height: calc(100% - 30px);
     padding: 0 5px;
     display: flex;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
 }
 .tabs-w .tabs-list .item{
     width: 100%;

src/common/db/magnetDb.ts

@@ -89,7 +89,8 @@ export  function addMagnet(magnet: SavedMagnet) {
 }
 
 // 删除数据
-export  function deleteMagnet(magnetId: string) {
+export  function db_deleteMagnet(magnetId: string) {
+    console.log(`删除磁贴: ${magnetId}`)
     return db?.delete().from('magnets').where('id', magnetId)
 }
 

src/components/magnets/magnetTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import {nextTick, onMounted, ref} from "vue";
 import {
   computeStyle,
   getComponent,
@@ -11,6 +11,8 @@ import {Tab, TabGroup, TabList, TabPanel, TabPanels, TransitionRoot} from "@head
 import {AddMagnetInfo, MagnetSize, ShowMagnetInfo} from "@/types/magnetType.ts";
 
 import TimeManger from "@/components/magnets/timeMagnet.vue"
+import VueDrag, {MoveInfo} from "@/components/public/vueDrag.vue";
+import {Drag} from "@/util/domDrag.ts";
 
 initComponents()
 function initComponents() {
@@ -59,8 +61,56 @@ function addMagnetHandle(){
   // 传递选择事件给父组件
 }
 
+const sideWidth = ref(0)
+let moveTimer: null | NodeJS.Timeout = null;
+let moveWait = 500;
+function moveInitHandle(drag: Drag)
+{
+  // 获取父元素的最大可用宽度
+  console.log(`moveInitHandle ---`)
+  sideWidth.value = drag.parent.width
+}
+
+
+function moveHandle( _moveInfo: MoveInfo) {
+  // 判断鼠标在元素的左半边还是右半边. 移动至边缘35%时触发
+  if (moveTimer) {
+    clearTimeout(moveTimer)
+    moveTimer = null;
+  }
+  moveTimer = setTimeout(()=>{
+    moveTimer = null;
+    let nextSelectTab = selectedTab.value;
+    let sizeKeys = Object.keys(selectMagnetInfo.value.sizes)
+    if (Math.abs(_moveInfo.left) > sideWidth.value * 0.10) {
+      // 移动至边缘35%时触发
+      console.log(`moveHandle --- 触发`)
+      // 移动至边缘35%时触发
+      if(_moveInfo.left < 0){
+        console.log(`左移`)
+        nextSelectTab++;
+      }else{
+        console.log(`右移`)
+        nextSelectTab--;
+      }
+      nextSelectTab = Math.min(Math.max(nextSelectTab, 0), sizeKeys.length - 1)
+      changeTab(nextSelectTab)
+    }
+    // 移动至边缘35%时触发
+  }, moveWait)
+
+}
 
 
+
+const isDrag = ref(false)
+onMounted(()=>{
+  isDrag.value = false
+  nextTick(()=>{
+    isDrag.value = true
+  })
+})
+
 </script>
 
 <template>
@@ -109,20 +159,31 @@ function addMagnetHandle(){
                   @change="changeTab"
                   as="div"
         >
+
+
           <TabPanels class="tabs-list">
             <TabPanel v-for="(size, key) in selectMagnetInfo.sizes"
                       :key="`com-${size?.title}-${key}`"
                       class="item"
                       as="div"
             >
-              <component
-                  :is="getComponent(selectMagnetInfo.type)"
-                  :size="key"
-              ></component>
-              <div class="drop">
-
-              </div>
+              <vue-drag
+                  class="vue-drag"
+                  :open-drag="isDrag"
+                  :move-hide="true"
+                  :y-move-dom="false"
+                  :x-limit="false"
+                  :is-center="true"
+                  @init="moveInitHandle"
+                  @move="moveHandle"
+              >
+                <component
+                    :is="getComponent(selectMagnetInfo.type)"
+                    :size="key"
+                ></component>
+              </vue-drag>
             </TabPanel>
+
           </TabPanels>
           <TabList class="tabs-control">
             <Tab v-for="(size, _key, i) in selectMagnetInfo.sizes"

src/components/magnets/magnetView.vue

@@ -13,7 +13,7 @@ import {
 import {Calendar} from "@/util/time.ts";
 import {CollisionDirection, CollisionResult, detectCollisionDirection, Drag, Rect} from "@/util/domDrag.ts";
 import IconSvg from "@/components/public/icon/iconSvg.vue";
-import {changeMagnets, fetchMagnetList} from "@/apis/magnetControl.ts";
+import {changeMagnets, deleteMagnet, fetchMagnetList} from "@/apis/magnetControl.ts";
 import {ErrorCode, ResponseData} from "@/types/apiTypes.ts";
 import MagnetTable from "@/components/magnets/magnetTable.vue";
 import KuiDialog from "@/components/public/kui-dialog.vue";
@@ -27,7 +27,7 @@ function initComponents() {
 }
 
 
-const magnetItems = reactive([]) as Magnet[]
+let magnetItems = reactive([]) as Magnet[]
 const magnetEl = ref();
 let maxWidth = 10;
 
@@ -242,8 +242,23 @@ function saveMagnet(){
 
 }
 
-function deleteMagnet(magnet: Magnet) {
+
+async function deleteMagnetHandle(magnet: Magnet) {
   console.log(`移除磁贴 ${magnet.id}`)
+  let result: ResponseData<boolean> = await deleteMagnet(magnet.id);
+  if( result.code !== ErrorCode.success){
+    console.log(result.msg)
+    return
+  }
+  // 移除元素
+  let idx = magnetItems.findIndex(item => item.id === magnet.id)
+  if (idx < 0)
+  {
+    console.log(`no match magnet ${magnet.id}`)
+    return
+  }
+  magnetItems.splice(idx, 1)
+  // magnetItems.
 }
 
 
@@ -322,7 +337,6 @@ async function saveMagnets(){
        :open-drag="myEditMode"
        :move-hide="true"
        :y-limit="false"
-       :hide-move="true"
        @init="moveInitHandle"
        @move-start="(_moveInfo)=>{moveStartHandle(magnet)}"
        @move="(moveInfo)=>{moveHandle(magnet, moveInfo)}"
@@ -337,7 +351,7 @@ async function saveMagnets(){
         <div class="magnet-mask" v-show="editMode"></div>
       </div>
 
-      <div class="magnet-remove apple-btn" v-show="editMode" @click.stop="deleteMagnet(magnet)" @mousedown.stop="deleteMagnet(magnet)">
+      <div class="magnet-remove apple-btn" v-show="editMode" @click.stop="deleteMagnetHandle(magnet)" @mousedown.stop="deleteMagnetHandle(magnet)">
         <icon-svg icon-name="remove"></icon-svg>
       </div>
 
@@ -455,10 +469,13 @@ async function saveMagnets(){
   opacity: 0.7;
 }
 .edit-control {
-  position: absolute;
+  position: sticky;
   top: 15px;
   right: 10px;
   display: flex;
+  width: auto;
+  height: 40px;
+  align-items: center;
 }
 
 

src/components/window/macWindow.vue

@@ -57,20 +57,10 @@ onMounted(()=>{
     }
   });
 
-  drag.addEventListener('mousedown', (evt: MouseEvent) => {
-    console.log("鼠标按下")
-    console.log(  evt)
-  }, {
-    capture: true,
-    passive: true
-  })
+
 
   // body 添加鼠标监听事件
-  document.body.addEventListener('mousedown', (evt: MouseEvent) => {
-    console.log("body 鼠标按下")
-    console.log(  evt)
-  }, {
-  })
+
 })
 
 

src/main/control/api_router.ts

@@ -1,6 +1,6 @@
 import {ApiType, ErrorCode, RequestData, ResponseData} from "@/types/apiTypes.ts";
 import {Magnet_Actions} from "@/apis/ApiAction.ts";
-import {c_fetchMagnetList, c_magnet_batch_update} from "@/main/control/magnet/magnet.ts";
+import {c_fetchMagnetList, c_magnet_batch_update, c_magnet_delete} from "@/main/control/magnet/magnet.ts";
 
 export async function apiRouter(requestData: RequestData){
     // 生成callId
@@ -14,6 +14,8 @@ export async function apiRouter(requestData: RequestData){
             responseData = await c_magnet_batch_update(requestData);
             break;
         case Magnet_Actions.magnet_delete:
+            responseData = await c_magnet_delete(requestData);
+            break;
         default:
             responseData = {
                 type: ApiType.res,

src/main/control/magnet/magnet.ts

@@ -1,4 +1,4 @@
-import {addMagnet, changeMagnets, getMagnetList} from "@/common/db/magnetDb.ts";
+import {addMagnet, changeMagnets, db_deleteMagnet, getMagnetList} from "@/common/db/magnetDb.ts";
 import {ApiType, ErrorCode, RequestData, ResponseData} from "@/types/apiTypes.ts";
 import {ChangeSaveMagnet, SavedMagnet} from "@/types/magnetType.ts";
 import {handle} from "@/util/promiseHandle.ts";
@@ -82,3 +82,44 @@ export async function c_magnet_batch_update(requestData: RequestData){
     }
     return responseData;
 }
+
+
+export async function c_magnet_delete(requestData: RequestData){
+    let responseData: ResponseData<any>
+    let data = requestData.data as {magnetId: string};
+    if (!data.magnetId) {
+        responseData = {
+            type: ApiType.res,
+            code: ErrorCode.params,
+            callId: requestData.callId,
+            action: requestData.action,
+            msg: '磁贴id为空',
+            data: null
+        }
+        return responseData;
+    }
+    let [err, _result] = await handle(db_deleteMagnet(data.magnetId));
+    if (err) {
+        err = err as Error;
+        logger.error(`[删除数据失败] ${err.message}`)
+        responseData = {
+            type: ApiType.res,
+            code: ErrorCode.db,
+            callId: requestData.callId,
+            action: requestData.action,
+            msg: err.message,
+            data: null
+        }
+        return responseData;
+    }
+    responseData = {
+        type: ApiType.res,
+        code: ErrorCode.success,
+        callId: requestData.callId,
+        action: requestData.action,
+        msg: '',
+        data: true,
+    }
+    return responseData;
+
+}

src/main/tools/ipcInit.ts

@@ -10,7 +10,7 @@ function bindAction(action: IpcAction, bindReplay: boolean = false) {
     logger.info(`绑定ipc事件:${code}-${action.title}`);
     ipcMain.on(code, async (_, arg) => {
         // console.log(event);
-        logger.info(`${code}-${action.title},参数:${arg}`);
+        logger.info(`${code}-${action.title},参数:${JSON.stringify(arg)}`);
         let [err,res] = await handle(
             hook.runHook(code, arg)
         );