tmp: 暂存-

src/App.vue

@@ -1,30 +1,46 @@
 <script setup lang="ts">
 // import HelloWorld from './components/HelloWorld.vue'
 
-import {onMounted, ref} from "vue";
+import {ComponentInternalInstance, getCurrentInstance, nextTick, onMounted, ref} from "vue";
 import MacWindow from "./components/window/macWindow.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";
 import {NavItem} from "@/components/appleBar/appleBar.ts";
+import message from "@/components/public/kui/message";
+import ImageControl from "@/components/image/imageControl.vue";
+import {ApplicationInfo} from "@/types/application.ts";
+import AppList from "@/components/window/app-list.vue";
+import AppWindow from "@/components/window/app-window.vue";
+import {windowAction} from "@/tools/IpcCmd.ts";
+import {runningApplications, testApplications} from "@/util/AppManag.ts";
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
 onMounted(() => {
 
 });
 
 let transitionName = ref("slide-right");
-const settingPageKey = 'setting';
 const activeIndex = ref(0);
+const settingPageKey = 'setting';
 const homePageKey = 'home';
+const imagePageKey = 'image';
+const musicPageKey = 'music';
 let navItems:NavItem[] = [
-
   {
-    id: 1,
-    name: '首页',
-    actionCode: homePageKey,
-    description: '返回首页',
-    icon: 'home',
+    id: 3,
+    name: '影音中心',
+    actionCode: musicPageKey,
+    description: '影音中心',
+    icon: 'music',
+  },
+  {
+    id: 3,
+    name: '照片管理',
+    actionCode: imagePageKey,
+    description: '图库工具',
+    icon: 'photo',
   },
   {
     id: 2,
@@ -35,10 +51,69 @@ let navItems:NavItem[] = [
   },
 ]
 
+const runningApplications = refrue;
+
+
 
 const title = ref("fc-ele");
 const pageKey = ref(homePageKey);
 const editMode = ref(false);
+const isFull = ref(false);
+const isDing = ref(false);
+const isBarHidden = ref(false);
+
+const AppContent = ref<HTMLElement | null>(null);
+const parentWidth = ref(0);
+const parentHeight = ref(0);
+
+function getParentSize() {
+  nextTick(()=>{
+
+    const el = AppContent.value;
+    if(!el){
+      return console.error('windowRef is null !!!!!!!!!! ');
+    }
+    let parent = el.parentElement;
+    if(!parent)
+    {
+      parent = document.body;
+    }
+    parentWidth.value = parent.clientWidth;
+    parentHeight.value = parent.clientHeight;
+    message.log(`parentWidth: ${parentWidth.value} H: ${parentHeight.value}`);
+  })
+
+}
+onMounted(() => {
+  getParentSize();
+  // document.addEventListener('resize', getParentSize);
+})
+
+const dingHandle = () => {
+  proxy?.$winHandle(isDing.value? windowAction.unDing : windowAction.ding)
+  isDing.value = !isDing.value
+}
+const minHandle = () => {
+  proxy?.$winHandle(windowAction.min)
+}
+const maxHandle = async () => {
+
+  let res = await proxy?.$winHandle(isFull.value? windowAction.unMax : windowAction.max)
+  if(res){
+    message.log('maxHandle success');
+  }else{
+    message.log('maxHandle fail');
+  }
+  isFull.value = !isFull.value
+  // todo 添加事件监听对应的事件
+
+  setTimeout(()=>{
+    getParentSize()
+  })
+}
+const closeHandle = () => {
+  proxy?.$winHandle(windowAction.close)
+}
 function editModeChange() {
   editMode.value = !editMode.value;
   if(!editMode.value){
@@ -47,10 +122,10 @@ function editModeChange() {
 }
 
 const navAction = (actionCode:string) => {
-  if(editMode){
+  if(editMode.value){
     return console.log('is edit mode')
   }
-  console.log(`action: ${actionCode}`);
+  // message.info(`navAction: ${actionCode}`);
   // 寻找actionCode对应的 index
   let index = navItems.findIndex((item) => item.actionCode === actionCode);
   if (index === -1) {
@@ -68,42 +143,105 @@ const navAction = (actionCode:string) => {
     case settingPageKey:
       title.value = navItems[index].name;
       break;
+    case musicPageKey:
+      title.value = navItems[index].name;
+      title.value = "音乐中心"
+      break;
+    case imagePageKey:
+      title.value = navItems[index].name;
+      title.value = "图库工具"
+      break;
     default:
       pageKey.value = homePageKey;
       title.value = 'fc-ele';
       break;
   }
-  console.log(`pageKey: ${pageKey.value}`);
+  // message.log(`pageKey: ${pageKey.value}`);
+}
+
+
+// 打开应用中心
+const isOpenApplicationCenter = ref(false);
+function openApplicationCenter() {
+  message.log('打开应用中心');
+  if(isOpenApplicationCenter.value){
+    return closeApplicationCenter();
+  }
+  isOpenApplicationCenter.value = true;
+  // 设置全局监听事件, 不是当前dom则关闭
+}
+function closeApplicationCenter() {
+  message.log('关闭应用中心');
+  isOpenApplicationCenter.value = false;
 }
 
+function closeAppHandle(){
+  console.log('close app');
+}
 </script>
 
 <template>
-  <mac-window :title="title" :icon="'home'">
+  <mac-window
+      :title="title"
+      :icon="'home'"
+      :is-ding="isDing"
+      :is-full="isFull"
+      @close="closeHandle"
+      @min="minHandle"
+      @max="maxHandle"
+      @ding="dingHandle"
+  >
 
     <div class="image-bg">
       <img src="./assets/images/bg.jpg" alt="">
     </div>
-    <Transition :name="transitionName">
-      <div class="full" v-if="pageKey === homePageKey">
-        <div class="app-content">
-          <magnet-view
-              :edit-mode="editMode"
-              @edit-mode-change="editModeChange"
-          />
+
+    <div class="full" id="kui-root" ref="AppContent">
+      <Transition :name="transitionName">
+        <div class="full" v-if="pageKey === homePageKey">
+          <div class="app-content">
+            <magnet-view
+                :edit-mode="editMode"
+                @edit-mode-change="editModeChange"
+            />
+            <app-window
+                :min-height="480"
+                :min-width="640"
+                :parent-width="parentWidth"
+                :parent-height="parentHeight"
+                @close="closeAppHandle"
+            >
+              app
+            </app-window>
+          </div>
         </div>
-      </div>
-      <setting-view v-else-if="pageKey === settingPageKey"></setting-view>
-    </Transition>
 
-    <div class="app-bar">
+
+        <image-control v-else-if="pageKey === imagePageKey"></image-control>
+        <setting-view v-else-if="pageKey === settingPageKey"></setting-view>
+      </Transition>
+    </div>
+
+    <div :class="`app-bar ${isBarHidden?'app-bar-hidden':''}`">
       <apple-bar
           :nav-items="navItems"
           :active="pageKey"
           :hide-time="3000"
+          :prevent-hide="isOpenApplicationCenter"
+          @input="(isHidden) => {isBarHidden = isHidden}"
           @action="navAction"
       >
+        <template #left>
+          <bar-icon-btn
+              icon-name="window"
+              :active="editMode"
+              @click.native="openApplicationCenter"
+          >
+          </bar-icon-btn>
+        </template>
+
         <bar-icon-btn
+            v-if="pageKey === homePageKey"
             icon-name="edit"
             :active="editMode"
             @click.native="editModeChange"
@@ -112,6 +250,13 @@ const navAction = (actionCode:string) => {
       </apple-bar>
     </div>
 
+    <div class="event-mask"
+         v-if="isOpenApplicationCenter"
+         @click="closeApplicationCenter">
+    </div>
+    <div class="start-window" v-show="isOpenApplicationCenter">
+      <app-list :app-list="testApplications"></app-list>
+    </div>
   </mac-window>
 </template>
 
@@ -133,6 +278,12 @@ const navAction = (actionCode:string) => {
   bottom: 0;
   z-index: 1000;
 }
+.app-bar-hidden{
+  width: auto;
+  height: 30px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
 
 @media screen and (max-width: 768px) {
   .app-content {
@@ -144,4 +295,22 @@ const navAction = (actionCode:string) => {
   }
 }
 
+.start-window{
+  width: 70%;
+  height: 70%;
+  position: absolute;
+  bottom: 80px;
+  left: 5%;
+}
+.start-window::before{
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-background-mute);
+  border-radius: 3px;
+  box-shadow: 0 0 3px #000;
+  opacity: 0.9;
+}
+
 </style>

src/assets/base.css

@@ -86,6 +86,7 @@
     opacity: 0;
     transition: all 0.3s;
     z-index: 1000;
+    pointer-events: none;
 }
 .showTopTip:hover .showTip{
     top: 30px;
@@ -401,3 +402,5 @@
 
 
 
+
+

src/assets/public.css

@@ -0,0 +1,6 @@
+.page-view{
+    background-color: var(--color-background-mute);
+    width: 100%;
+    height: 100%;
+    position: relative;
+}

src/assets/svg/image.svg

@@ -0,0 +1 @@
+<svg t="1721377773052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4255" width="200" height="200"><path d="M416 266.538667m-96 0a96 96 0 1 0 192 0 96 96 0 1 0-192 0Z" p-id="4256"></path><path d="M721.749333 371.626667A43.818667 43.818667 0 0 0 682.666667 348.074667a42.965333 42.965333 0 0 0-38.058667 25.002666l-66.474667 146.517334a10.624 10.624 0 0 1-18.005333 2.261333l-34.986667-43.690667a42.666667 42.666667 0 0 0-34.688-16.042666 42.965333 42.965333 0 0 0-33.578666 18.176L323.84 670.293333a21.333333 21.333333 0 0 0 17.493333 33.706667h512a21.333333 21.333333 0 0 0 18.133334-10.112 21.333333 21.333333 0 0 0 0.938666-20.736z" p-id="4257"></path><path d="M938.666667 0H234.666667a85.333333 85.333333 0 0 0-85.333334 85.333333v704a85.333333 85.333333 0 0 0 85.333334 85.333334H938.666667a85.333333 85.333333 0 0 0 85.333333-85.333334V85.333333a85.333333 85.333333 0 0 0-85.333333-85.333333z m-6.186667 783.104a21.333333 21.333333 0 0 1-15.104 6.229333H256a21.333333 21.333333 0 0 1-21.333333-21.333333V106.666667A21.333333 21.333333 0 0 1 256 85.333333h661.333333a21.333333 21.333333 0 0 1 21.333334 21.333334V768a21.333333 21.333333 0 0 1-6.186667 14.976z" p-id="4258"></path><path d="M832 938.666667h-725.333333a21.333333 21.333333 0 0 1-21.333334-21.333334v-725.333333a42.666667 42.666667 0 0 0-85.333333 0V938.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h746.666667a42.666667 42.666667 0 0 0 0-85.333333z" p-id="4259"></path></svg>

src/assets/svg/music.svg

@@ -0,0 +1 @@
+<svg t="1723531913666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5380" width="200" height="200"><path d="M938.666667 308.736V768h-1.322667A170.666667 170.666667 0 1 1 853.333333 641.493333V356.224l-448 84.48V789.333333h-1.322666A170.666667 170.666667 0 1 1 320 662.826667V150.528l618.666667-116.650667v274.858667zM234.666667 896a85.333333 85.333333 0 1 0 0-170.666667 85.333333 85.333333 0 0 0 0 170.666667z m533.333333-21.333333a85.333333 85.333333 0 1 0 0-170.666667 85.333333 85.333333 0 0 0 0 170.666667zM405.333333 221.269333v132.608l448-84.48V136.789333l-448 84.48z" p-id="5381"></path></svg>

src/assets/svg/search.svg

@@ -0,0 +1 @@
+<svg t="1723540979865" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7340" width="200" height="200"><path d="M1013.852766 1011.332492a42.225028 42.225028 0 0 1-59.70619 0L702.316509 759.502424a428.900723 428.900723 0 1 1 133.958901-196.00858 41.718328 41.718328 0 0 1-4.919216 14.166497c-1.330088 3.61024-2.385714 7.347155-3.800252 10.91517l-2.385714-2.385714a42.225028 42.225028 0 0 1-72.690386-29.13527l-0.380025-3.905815a41.950565 41.950565 0 0 1 11.379645-28.670794l-3.926928-3.905815a336.976836 336.976836 0 1 0-88.123633 150.764463 6.333754 6.333754 0 0 0 0.612262-0.928951l61.120729 1.055626 145.254096 145.232984 0.274463-0.274463 135.12009 135.12009a42.225028 42.225028 0 0 1 0.042225 59.79064z" p-id="7341"></path></svg>

src/assets/svg/window.svg

@@ -0,0 +1 @@
+<svg t="1723532998112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6372" width="200" height="200"><path d="M523.8 191.4v288.9h382V128.1zM523.8 833.6l382 62.2v-352h-382zM120.1 480.2H443V201.9l-322.9 53.5zM120.1 770.6L443 823.2V543.8H120.1z" p-id="6373"></path></svg>

src/components/appleBar/appleBar.vue

@@ -8,6 +8,10 @@ let hideTimer:NodeJS.Timeout;
 
 let isHidden = ref(true);
 
+const emits = defineEmits<{
+  (e: 'input', isHidden: boolean): void
+  (e: 'action', actionCode: string): void
+}>()
 
 
 let props = defineProps({
@@ -28,6 +32,11 @@ let props = defineProps({
   active: {
     type: String,
     default: ''
+  },
+  // 阻止隐藏
+  preventHide: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -39,15 +48,13 @@ onMounted(() => {
 
 
 
-const emits = defineEmits<{
-  (e: 'action', actionCode: string): void
-}>()
-
 /**
  * 用户交互时，重置隐藏计时器
  */
 function barActiveHandle(): void{
   isHidden.value = false;
+  // console.log('barActiveHandle', props.preventHide)
+  emits('input', isHidden.value);
   if(hideTimer){
     clearTimeout(hideTimer);
   }
@@ -60,7 +67,10 @@ function startHideTimer(){
     clearTimeout(hideTimer);
   }
   hideTimer = setTimeout(() => {
-    isHidden.value = true;
+    if(!props.preventHide){
+      isHidden.value = true;
+      emits('input', isHidden.value);
+    }
   }, props.hideTime);
 }
 
@@ -73,12 +83,15 @@ function actionHandle(actionCode: string): void{
 
 <template>
   <div class="appleBarBox" :class="isHidden?'hidden':''">
-    <div class="appleBar" @mouseenter="barActiveHandle" @mouseleave="startHideTimer">
+    <div class="appleBar"
+         @mouseenter="barActiveHandle"
+         @mouseover="barActiveHandle"
+         @mouseleave="startHideTimer">
       <div class="bgMask"></div>
       <div class="appleItemGroup">
         <slot name="left"></slot>
       </div>
-      <div class="appleItemGroup">
+      <div class="appleItemGroup appleBarMoreGroup">
         <bar-icon-btn
             v-for="item in props.navItems"
             :key="item.id"
@@ -99,7 +112,7 @@ function actionHandle(actionCode: string): void{
 
 <style scoped>
 .appleBarBox{
-  width: 55%;
+  width: 90%;
   height: 100%;
   display: flex;
   flex-direction: row;
@@ -133,16 +146,16 @@ function actionHandle(actionCode: string): void{
   width: auto;
   height: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
   position: relative;
 }
-
-
+.appleBarMoreGroup{
+  flex: 1;
+}
 
 .hidden .appleBar{
-  width: 10%;
-  height: 10px;
+  width: 180px;
+  height: 12px;
   border-radius: 5px;
   opacity: 0.4;
   margin-bottom: 5px;

src/components/image/imageControl.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="page-view">
+  music
+</div>
+</template>
+
+<style scoped>
+@import "@/assets/public.css";
+</style>

src/components/settingView.vue

@@ -3,16 +3,11 @@
 </script>
 
 <template>
-  <div class="settingView">
+<div class="page-view">
 
-  </div>
+</div>
 </template>
 
 <style scoped>
-.settingView {
-  background-color: var(--color-background-mute);
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+@import "@/assets/public.css";
 </style>

src/components/window/app-list.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import {ApplicationInfo} from "@/types/application.ts";
+import {computed, PropType, ref} from "vue";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+
+const props = defineProps({
+  appList: {
+    type: Array as PropType<ApplicationInfo[]>,
+    default: ():ApplicationInfo[] => []
+  }
+})
+
+const searchKey = ref("")
+
+const showAppList = computed(() => {
+  if (searchKey.value === "") return props.appList
+  return props.appList.filter(item => {
+    return item.en.includes(searchKey.value) ||
+    item.name.includes(searchKey.value) ||
+    item.pinyin.includes(searchKey.value)
+  })
+})
+
+const emits = defineEmits<{
+  (e: "open", id: string): void
+}>()
+
+function openApp(id: string) {
+  // emit
+  emits("open", id)
+}
+
+</script>
+
+<template>
+<div class="full">
+  <div class="list-content">
+    <div class="app-list-item"
+         v-for="item in showAppList"
+         :key="item.id"
+         @click="openApp(item.id)"
+    >
+      <div class="list-item-icon">
+        <icon-svg :icon-name="item.icon" />
+      </div>
+      <div class="list-item-name">
+        {{item.name}}
+      </div>
+    </div>
+  </div>
+  <div class="list-search">
+    <input type="text" v-model="searchKey" placeholder="搜索应用" />
+    <IconSvg icon-name="search" svg-class="icon-search" />
+  </div>
+</div>
+</template>
+
+<style scoped>
+.full{
+  position: relative;
+}
+.list-content{
+  width: 100%;
+  height: calc(100% - 40px);
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding: 5px;
+  overflow-y: auto;
+}
+.list-search{
+  width: 50%;
+  height: 40px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.app-list-item{
+  width: 80px;
+  height: 100px;
+  cursor: pointer;
+  margin: 0 10px;
+}
+.app-list-item:hover{
+  color: #1b88de;
+}
+.list-item-icon{
+  width: 80px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2.5em;
+}
+.list-item-name{
+  width: 100%;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.1em;
+}
+.list-search input{
+  display: inline-block;
+  width: 100%;
+  height: 30px;
+  border: none;
+  outline: none;
+  background-color: var(--color-background-mute);
+  padding: 0 5px 0 35px;
+  border-radius: 5px;
+  position: relative;
+  box-shadow: 0 0 3px #9b9b9b;
+}
+
+.list-search input::placeholder{
+}
+.list-search input:focus{
+  background-color: var(--color-background-soft);
+  border: 1px solid var(--color-background);
+  color: var(--color-text-show);
+}
+.list-search .icon-search{
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  fill: var(--color-text-money);
+  position: absolute;
+  /* top: -1px; */
+  left: 5px;
+  font-size: 0.8em;
+  color: #1a1a1a;
+}
+</style>

src/components/window/app-window.vue

@@ -0,0 +1,380 @@
+<script setup lang="ts" >
+import {computed, ref, watch} from "vue";
+import VueDrag, {MoveInfo} from "@/components/public/vueDrag.vue";
+import MacWindow from "@/components/window/macWindow.vue";
+
+const props = defineProps({
+  minWidth: {
+    type: Number,
+    default: 700
+  },
+  minHeight: {
+    type: Number,
+    default: 360
+  },
+  parentWidth: {
+    type: Number,
+    default: 700
+  },
+  parentHeight: {
+    type: Number,
+    default: 700
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  appName: {
+    type: String,
+    default: 'test'
+  },
+
+})
+
+const isFull = ref(false)
+const width = ref(props.minWidth)
+const height = ref(props.minHeight)
+const left = ref(100)
+const top = ref(100)
+
+const style = computed(() => {
+  return {
+    width: width.value + 'px',
+    height: height.value + 'px',
+    left: left.value + 'px',
+    top: top.value + 'px',
+    zIndex: props.index
+  }
+})
+
+// 窗口大小调整 鼠标按下 触发事件
+const resizeItems =  [ 'lt', 'rt', 'lb', 'rb', 't', 'r', 'b', 'l']
+
+const windowRef = ref<HTMLElement>()
+const allowResize = ref(true)
+const emits = defineEmits<{
+  (e: 'ding'): void,
+  (e: 'min'): void,
+  (e: 'max'): void,
+  (e: 'close'): void,
+}>()
+
+let startLeft = left.value;
+let startTop = top.value;
+let startWidth = width.value;
+let startHeight = height.value;
+let startMoveInfo: MoveInfo = {
+  x: 0,
+  y: 0,
+  left: 0,
+  top: 0,
+}
+function resizeStart(moveInfo: MoveInfo) {
+  console.log(moveInfo)
+  startLeft = left.value;
+  startTop = top.value;
+  startWidth = width.value;
+  startHeight = height.value;
+  startMoveInfo = moveInfo
+}
+function resizeHandle(item: string, moveInfo: MoveInfo) {
+  // 计算与开始的位置的差值
+  let diffX = 0;
+  let diffY = 0;
+  let nextTop = startTop;
+  let nextLeft = startLeft;
+  let nextHeight = startHeight;
+  let nextWidth = startWidth;
+  switch (item) {
+    case 'b':
+      diffY = moveInfo.y - startMoveInfo.y;
+      break;
+    case 't':
+      diffY = startMoveInfo.y - moveInfo.y;
+      nextTop = startTop - diffY;
+      // 如果top 小于0 则不增加 top
+      break;
+    case 'l':
+      diffX = startMoveInfo.x - moveInfo.x;
+      nextLeft = startLeft - diffX;
+      break;
+    case 'r':
+      diffX = moveInfo.x - startMoveInfo.x;
+      break;
+    case 'lt':
+      diffX = startMoveInfo.x - moveInfo.x;
+      diffY = startMoveInfo.y - moveInfo.y;
+      nextTop = startTop - diffY;
+      nextLeft = startLeft - diffX;
+      break;
+    case 'rt':
+      diffX = moveInfo.x - startMoveInfo.x;
+      diffY = startMoveInfo.y - moveInfo.y;
+      nextTop = startTop - diffY;
+      break;
+    case 'lb':
+      diffX = startMoveInfo.x - moveInfo.x;
+      diffY = moveInfo.y - startMoveInfo.y;
+      nextLeft = startLeft - diffX;
+      break;
+    case 'rb':
+      diffX = moveInfo.x - startMoveInfo.x;
+      diffY = moveInfo.y - startMoveInfo.y;
+      break;
+
+  }
+
+    // 拉至窗口边缘调节
+    nextWidth = diffX + startWidth;
+    if (props.minWidth < nextWidth && ( nextLeft > 0 || (startLeft <= 1 && startWidth < nextWidth) )) {
+      nextLeft = Math.max(1, nextLeft);
+      left.value = nextLeft;
+      nextWidth = Math.min(props.parentWidth - nextLeft - 2, nextWidth)
+      width.value = nextWidth;
+    }
+
+    nextHeight = diffY + startHeight;
+    if (props.minHeight < nextHeight && ( nextTop > 0 || (startTop <= 1 && startHeight < nextHeight) )){
+      nextTop = Math.max(1, nextTop);
+      top.value = nextTop;
+      nextHeight = Math.min(props.parentHeight - nextTop - 2, nextHeight)
+      height.value = nextHeight;
+    }
+
+}
+
+
+function moveStart(moveInfo: MoveInfo) {
+  console.log(moveInfo)
+  startLeft = left.value;
+  startTop = top.value;
+}
+function moveHandle(moveInfo: MoveInfo) {
+  console.log(moveInfo)
+  let nextLeft = moveInfo.left + startLeft;
+  let nextTop = moveInfo.top + startTop;
+  if (nextLeft < 0 - width.value + 200) {
+    nextLeft = 0 - width.value + 200;
+  }else if(nextLeft > props.parentWidth - 200){
+    nextLeft = props.parentWidth - 200;
+  }
+  left.value = nextLeft;
+  if(nextTop < 0){
+    nextTop = 0;
+  }else if(nextTop > props.parentHeight - 35){
+    nextTop = props.parentHeight - 35;
+  }
+  top.value = nextTop;
+}
+
+let positionInfo = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0
+}
+function savePositionAndSize() {
+  positionInfo = {
+    left: left.value,
+    top: top.value,
+    width: width.value,
+    height: height.value
+  }
+}
+function restorePositionAndSize() {
+  left.value = positionInfo.left;
+  top.value = positionInfo.top;
+  width.value = positionInfo.width;
+  height.value = positionInfo.height;
+}
+function minHandle() {
+  savePositionAndSize();
+  emits('min')
+}
+function maxWindow(changeSave: boolean = false) {
+  if(changeSave){
+    savePositionAndSize()
+  }
+  allowResize.value = false;
+  left.value = 0
+  top.value = 0
+  width.value = props.parentWidth
+  height.value = props.parentHeight
+  isFull.value = true;
+}
+
+function maxHandle() {
+    isFull.value = !isFull.value;
+    if(isFull.value)
+    {
+      maxWindow(true)
+    }else{
+      restorePositionAndSize()
+      allowResize.value = true;
+    }
+}
+
+function closeHandle() {
+  emits('close')
+}
+
+
+// watch 事件
+watch(()=>props.parentWidth, (_newValue, _oldValue)=>{
+  console.log('parentWidth', _newValue, _oldValue)
+  if(isFull.value)
+  {
+    maxWindow()
+  }
+})
+</script>
+
+<template>
+<!-- windows 窗口组件, 可以调节窗口大小, 被拖拽, 最小化, 最大化, 关闭 -->
+<div class="app-window-box"
+     :style="style"
+     ref="windowRef"
+>
+<!-- 大小调整拖拽框, 8个方向 -->
+  <div class="app-drag-box" v-show="allowResize">
+    <vue-drag
+        v-for="item in resizeItems"
+        :class="item"
+        :key="`drag-${item}`"
+        :open-drag="true"
+        :move-hide="true"
+        :x-move-dom="false"
+        :y-move-dom="false"
+        :x-limit="false"
+        :y-limit="false"
+        :is-center="true"
+        @move-start="resizeStart"
+        @move="(moveInfo: MoveInfo)=>{resizeHandle(item, moveInfo)}" >
+    </vue-drag>
+  </div>
+  <div class="app-window-show">
+    <mac-window
+        title="test"
+        icon="home"
+        :is-full="isFull"
+        :disable-margin="true"
+        :ding-show="false"
+        @min="minHandle"
+        @max="maxHandle"
+        @close="closeHandle"
+    >
+      <template #top>
+        <vue-drag
+            class="app-window-title"
+            :open-drag="true"
+            :move-hide="false"
+            :x-move-dom="false"
+            :y-move-dom="false"
+            :x-limit="false"
+            :y-limit="false"
+            @move-start="moveStart"
+            @move="moveHandle"
+        >
+          {{ appName }}
+        </vue-drag>
+      </template>
+      <slot>
+      </slot>
+    </mac-window>
+
+  </div>
+
+
+<!--  方框 -->
+</div>
+</template>
+
+<style scoped>
+.app-window-box{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.app-window-show{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.app-window-box .app-drag-box{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.app-full{
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+.app-drag-box > *{
+  position: absolute;
+}
+.lt,.rt,.lb,.rb{
+  width: 20px;
+  height: 20px;
+}
+.lt{
+  left: -5px;
+  top: -5px;
+  cursor: nw-resize;
+}
+.rt{
+  right: -5px;
+  top: -5px;
+  cursor: ne-resize;
+}
+.lb{
+  left: -5px;
+  bottom: -5px;
+  cursor: sw-resize;
+}
+.rb{
+  right: -5px;
+  bottom: -5px;
+  cursor: se-resize;
+}
+.t,.b{
+  width: calc(100% - 20px);
+  height: 5px;
+  left: 10px;
+  cursor: ns-resize;
+}
+.r, .l{
+  width: 5px;
+  height: calc(100% - 20px);
+  top: 10px;
+  cursor: e-resize;
+}
+.t{
+  top: -3px;
+}
+.b{
+  bottom: -3px;
+}
+.r{
+  right: -3px;
+}
+.l{
+  left: -3px;
+}
+
+.app-window-title{
+  width: 100%;
+  height: 30px;
+  padding: 0 5px;
+}
+
+</style>

src/components/window/macWindow.vue

@@ -1,100 +1,106 @@
 <script setup lang="ts">
-import {ComponentInternalInstance, getCurrentInstance, onMounted, Ref, ref, UnwrapRef} from "vue";
-import { IpcAction, windowAction} from "../../tools/IpcCmd.ts";
 
 import "@/assets/base.css"
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
-defineProps<{
-  title: string,
-  icon: string,
+defineProps({
+  title: {
+    type: String,
+    default: "标题"
+  },
+  icon: {
+    type: String,
+    default: "icon-app"
+  },
+  isDing: {
+    type: Boolean,
+    default: false
+  },
+  isFull: {
+    type: Boolean,
+    default: false
+  },
+  dingShow: {
+    type: Boolean,
+    default: true
+  },
+  maxShow: {
+    type: Boolean,
+    default: true
+  },
+  // 取消外边距
+  disableMargin: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits<{
+  (e: 'ding'): void,
+  (e: 'min'): void,
+  (e: 'max'): void,
+  (e: 'close'): void,
 }>()
-const isDing: Ref<UnwrapRef<boolean>> = ref(false)
-const isFull: Ref<UnwrapRef<boolean>> = ref(false)
 
 // 定义函数
 const switchDingHandle = () => {
   console.log("置顶切换")
-  proxy?.$winHandle(isDing.value? windowAction.unDing : windowAction.ding)
-  isDing.value = !isDing.value
+  emits('ding')
 }
 const switchFullHandle = () => {
   console.log("全屏切换")
-  proxy?.$winHandle(isFull.value? windowAction.unMax : windowAction.max)
-  isFull.value = !isFull.value
-
+  emits('max')
 }
 
-// 给body挂载大小属性
-
-
-const btnClickHandel = (action: IpcAction) => {
-  proxy?.$winHandle(action)
+const minimizeHandle = () => {
+  console.log("最小化")
+  emits('min')
+  // proxy?.$winHandle(windowAction.min)
 }
 
-const mainWindow = ref<HTMLDivElement >()
-const dragBar = ref<HTMLDivElement >()
-onMounted(()=>{
-  const el = mainWindow.value as HTMLElement
-  const drag = dragBar.value as HTMLElement
-  if(!el || !drag){
-    console.log("窗口dom未找到")
-    return
-  }
-  el.addEventListener('mouseenter', () => {
-    console.log("鼠标进入窗口")
-    proxy?.$winHandle(windowAction.disableIgnoreMouse);
-  });
-  el.addEventListener('mouseleave', (evt: MouseEvent) => {
-    // 判断触发的dom
-    // tips 判断鼠标是否真的移出了指定的dom窗口, 在内部有元素设置了drag属性的情况下, 鼠标会被视作离开窗口
-    // 1. 获取元素的区域位置,
-    let { left, top, width, height } = el.getBoundingClientRect();
-
-    if (evt.pageX < left || evt.pageX > left + width || evt.pageY < top || evt.pageY > top + height) {
-      console.log("鼠标离开窗口")
-      proxy?.$winHandle(windowAction.enableIgnoreMouse);
-    }
-  });
-
-
+const closeHandle = () => {
+  console.log("关闭")
+  emits('close')
+}
+// 给body挂载大小属性
 
-  // body 添加鼠标监听事件
 
-})
 
 
 </script>
 
 <template>
-  <div :class="[isFull? 'max_window': 'min_window']" ref="mainWindow">
+  <div :class="[isFull || disableMargin? 'max_window': 'min_window']" ref="mainWindow">
     <div class="window" >
       <div class="top-bar">
-        <div class="drag top-title" ref="dragBar">
-          <slot name="top">
-            <icon-svg  :icon-name="icon"/>
-            <span class="ml-1.5 ">{{title}}</span>
-          </slot>
-
-        </div>
+        <slot name="top">
+          <div class="drag top-title" >
+              <icon-svg  :icon-name="icon"/>
+              <span class="ml-1.5 ">{{title}}</span>
+          </div>
+        </slot>
 
         <div class="control-box">
-          <slot name="top"></slot>
-          <div id="win-btn-ding" :class="`no-drag showTopTip btn ding ${isDing?'ding-is':''}`"  @click="switchDingHandle">
+          <div id="win-btn-ding"
+               v-if="dingShow"
+               :class="`no-drag showTopTip btn ding ${isDing?'ding-is':''}`"
+               @click="switchDingHandle">
             <span class="showTip">{{isDing?"取消置顶":"置顶"}}</span>
           </div>
-          <div id="win-btn-min"  class="no-drag showTopTip btn min" @click="btnClickHandel(windowAction.min)">
+          <div id="win-btn-min"  class="no-drag showTopTip btn min" @click="minimizeHandle">
             <span class="showTip">最小化</span>
           </div>
-          <div id="win-btn-full"  :class="`no-drag showTopTip btn full ${isFull?'full-is':''}`"  @click="switchFullHandle">
-            <span class="showTip">{{isFull?'取消全屏':'全屏'}}</span>
+          <div id="win-btn-full"
+               v-if="maxShow"
+               :class="`no-drag showTopTip btn full ${isFull?'full-is':''}`"
+               @click="switchFullHandle">
+            <span class="showTip">{{isFull?'还原':'最大化'}}</span>
           </div>
-          <div id="win-btn-close"  class="no-drag showTopTip btn close"  @click="btnClickHandel(windowAction.close)">
+          <div id="win-btn-close"  class="no-drag showTopTip btn close"  @click="closeHandle">
             <span class="showTip">关闭窗口</span>
           </div>
         </div>
       </div>
-      <div class="window-content" id="kui-root">
+      <div class="window-content" >
         <slot></slot>
       </div>
     </div>
@@ -102,31 +108,22 @@ onMounted(()=>{
 </template>
 
 <style>
-body{
-  margin: 0;
-  padding: 5px;
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-}
+
 .min_window{
   width: calc( 100% - 10px);
   height:  calc( 100% - 10px);
   box-sizing: border-box;
   border: 1px solid transparent;
+  margin-left: 5px;
+  margin-top: 5px;
 }
 
-#headlessui-portal-root{
-  position: absolute;
-  top: 35px;
-  left: 0;
-  width: calc(100% - 10px);
-  height: calc(100% - 35px);
-}
+
 .max_window{
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  margin: 0;
 }
 
 .window{

src/main/tools/doWindowAction.ts

@@ -100,9 +100,10 @@ export function minWin(sign: string) {
 
 /**
  * 最大化窗口或者恢复窗口
+ * @param ipcEvent
  * @param {String} sign 窗口标记
  *
-*/
+ */
 export function maxWin(sign: string): Promise<boolean> {
     return new Promise((resolve, reject) => {
         let winObj = AppControl.findWin(sign);

src/main/tools/hookInit.ts

@@ -2,7 +2,7 @@ import {IpcAction, actionMap} from "../../tools/IpcCmd.ts";
 import hook, {HookFn} from "../../util/hook.ts";
 import {
     closeWin,
-    connectedWin, disableIgnoreMouse, enableIgnoreMouse,
+    connectedWin,
     hideWin,
     maxWin,
     minWin,
@@ -50,7 +50,5 @@ export function initHook(){
     hookBind(actionMap.hide, hideWin);
     hookBind(actionMap.show, showWin);
     hookBind(actionMap.exitApp, appControl.exit);
-    hookBind(actionMap.enableIgnoreMouse, enableIgnoreMouse);
-    hookBind(actionMap.disableIgnoreMouse, disableIgnoreMouse);
     hookBind(actionMap.apiControl, ipcRouter)
 }

src/main/tools/ipcInit.ts

@@ -8,7 +8,7 @@ let logger = Logger.logger('ipcInit', 'info');
 function bindAction(action: IpcAction, bindReplay: boolean = false) {
     let code = bindReplay?action.resCode:action.code;
     logger.info(`绑定ipc事件:${code}-${action.title}`);
-    ipcMain.on(code, async (_, arg) => {
+    ipcMain.on(code, async (_ipcEvent: Electron.IpcMainEvent, arg) => {
         // console.log(event);
         logger.info(`${code}-${action.title},参数:${JSON.stringify(arg)}`);
         let [err,res] = await handle(
@@ -18,6 +18,7 @@ function bindAction(action: IpcAction, bindReplay: boolean = false) {
             logger.error(err);
         }
         logger.debug(`${code}-${action.title},返回:${res}`);
+        _ipcEvent.reply(code, res);
     });
 }
 
@@ -46,8 +47,6 @@ export function initIpc() {
     bindAction(windowAction.restore);
     bindAction(windowAction.openSetting);
     bindAction(actionMap.exitApp);
-    bindAction(windowAction.enableIgnoreMouse);
-    bindAction(windowAction.disableIgnoreMouse);
     bindAction(actionMap.apiControl);
 }
 

src/types/BaseTypes.ts

@@ -1,5 +1,5 @@
 // 弹窗类型 type: success, error, info, warning
-import {AppContext} from "vue";
+import {App, AppContext} from "vue";
 
 export enum NotifyType {
     success = 'success',
@@ -39,4 +39,13 @@ export interface MessageFn extends messageFn {
     warn: messageFn;
     warning: messageFn;
     loading: messageFn;
+    install: (app: App)=>void;
+}
+
+
+export enum ToolTipPosition {
+    top = 'top',
+    bottom = 'bottom',
+    left = 'left',
+    right = 'right',
 }

src/types/application.ts

@@ -0,0 +1,20 @@
+export interface ApplicationInfo {
+    name: string;
+    pinyin: string;
+    en: string;
+    icon: string;
+    key: string;
+//     是否允许多开
+    allowMulti: boolean;
+    minHeight: number;
+    minWidth: number;
+}
+
+export interface RunApplicationInfo {
+    id: string;
+    key: string;
+    show: boolean;
+    full: boolean;
+    index: number;
+    name: string;
+}

src/types/exVueType.ts

@@ -5,6 +5,6 @@ declare module '@vue/runtime-core' {
     // 扩展全局变量的接口内容，需要扩展ComponentCustomProperties这个接口，不要乱改成别的
 
     interface ComponentCustomProperties {
-        $winHandle: (action: IpcAction) => void,
+        $winHandle: (action: IpcAction) => Promise<boolean>,
     }
 }

src/util/AppManag.ts

@@ -0,0 +1,75 @@
+import {ApplicationInfo, RunApplicationInfo} from "@/types/application.ts";
+
+export let testApplications:ApplicationInfo[] = [
+    {
+        key: 'music',
+        name: '音乐',
+        pinyin: 'yinyue',
+        en: 'music',
+        icon: 'music',
+        allowMulti: false,
+        minHeight: 600,
+        minWidth: 800,
+    },
+    {
+        key: 'setting',
+        name: '软件设置',
+        pinyin: 'shezhi',
+        en: 'setting',
+        icon: 'setting',
+        allowMulti: false,
+        minHeight: 600,
+        minWidth: 800,
+    },
+]
+
+// 已经启动的app 列表
+export let runningApplications:RunApplicationInfo[] = []
+
+
+function genAppId(key: string, num: number = 0): string {
+    let appId = `${key}-${num}`
+    let app = runningApplications.find(item => item.id === appId)
+    if (app) {
+        return genAppId(key, num + 1)
+    }
+    return appId
+}
+function runApp(appInfo: ApplicationInfo): RunApplicationInfo {
+
+    let appId = genAppId(appInfo.key + runningApplications.length)
+    let app:RunApplicationInfo = {
+        id: appId,
+        key: appInfo.key,
+        show: true,
+        full: false,
+        index: 0,
+        name: appInfo.name,
+    }
+    return app
+}
+
+
+export function openApp(appInfo: ApplicationInfo) {
+    let app = null;
+    if (appInfo.allowMulti) {
+        // 允许多开
+        app = runApp(appInfo)
+        runningApplications.push(app)
+    } else {
+        // 不允许多开
+        app = runningApplications.find(item => item.id)
+    }
+    if(!app){
+        app = runApp(appInfo)
+        runningApplications.push(app)
+    }
+}
+
+export function closeApp(app: RunApplicationInfo) {
+    let appIndex = runningApplications.findIndex(item => item.id === app.id)
+    if (appIndex === -1) {
+       return console.error('app not found')
+    }
+    runningApplications.splice(appIndex, 1)
+}

src/util/pageHandle.ts

@@ -17,30 +17,39 @@ import {NotifyData, ResponseData} from "@/types/apiTypes.ts";
 //     },
 // };
 
-function winHandle(ipc: Electron.IpcRenderer, windowName: string, action: IpcAction): boolean{
-    let sendCode = action.code;
-    try {
-        ipc.send(sendCode, windowName);
-        return true;
-    }catch (e){
-        return false;
-    }
+function winHandle(ipc: Electron.IpcRenderer, windowName: string, action: IpcAction): Promise<boolean>{
+    return new Promise((resolve, _)=>{
+        let sendCode = action.code;
+        try {
+            ipc.send(sendCode, windowName);
+            ipc.on(sendCode, (_, res)=>{
+                resolve(res);
+            })
+        }catch (e){
+            console.error(e)
+            resolve(false)
+        }
+    })
 }
 
-function registerWinHandle(ipc: Electron.IpcRenderer, windowName: string): (action: IpcAction)=> boolean
+function registerWinHandle(ipc: Electron.IpcRenderer, windowName: string): (action: IpcAction) => Promise<any>
 {
     windowName = windowName.toString();
     return winHandle.bind(null, ipc, windowName);
 }
 
 
-function tryBindWindow(ipc: Electron.IpcRenderer, type: string): (action: IpcAction)=>void
+function tryBindWindow(ipc: Electron.IpcRenderer, type: string): (action: IpcAction)=>Promise<boolean>
 {
-    return (_: IpcAction): boolean =>{
-        console.log(`未绑定窗口, 等待绑定`);
-        ipc.send(windowAction.bindSignId.code, type)
-        return false;
+
+    return (_action): Promise<boolean> =>{
+        return new Promise((resolve, _)=>{
+            console.log(`未绑定窗口, 等待绑定`);
+            ipc.send(windowAction.bindSignId.code, type)
+            resolve(true)
+        })
     }
+
 }
 
 

src/util/v-move.ts

@@ -0,0 +1 @@
+// vue指令, 用于触发特定元素触发拖拽事件