修改图标

src/assets/icons/mini.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747388804698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M726.4 555.9H297.6c-24.2 0-43.9-19.6-43.9-43.9 0-24.2 19.6-43.9 43.9-43.9h428.9c24.2 0 43.9 19.6 43.9 43.9-0.1 24.2-19.7 43.9-44 43.9z"></path></svg>

src/components/layout.vue

@@ -1,10 +1,19 @@
 <template>
-  <n-layout>
-    <n-layout-header data-tauri-drag-region>
-      <div class="head">
+  <n-layout class="layout">
+    <n-layout-header>
+      <div
+        class="layout-head"
+        data-tauri-drag-region
+      >
         <Icon
-          name="icon"
+          name="mini"
           size="20"
+          @click="appWindow.minimize()"
+        />
+        <Icon
+          name="close"
+          size="16"
+          @click="appWindow.close()"
         />
       </div>
     </n-layout-header>
@@ -33,9 +42,11 @@
 </template>
 
 <script setup lang='ts'>
+import { Window } from '@tauri-apps/api/window'
 import { h, ref } from 'vue'
 import Icon from './icon.vue'
 
+const appWindow = new Window('main')
 const selectedKey = ref('')
 const menuOptions = ref([
   {
@@ -49,4 +60,24 @@ const menuOptions = ref([
   }
 ])
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.layout {
+  overflow: hidden;
+  border-radius: 8px;
+
+  &-head {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 3px 10px;
+    cursor: move;
+
+    &>svg {
+      cursor: pointer;
+      &:hover{
+        color: red;
+      }
+    }
+  }
+}
+</style>