update

wallitor-gui/src/App.vue

@@ -1,19 +1,88 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
 import {invoke} from "@tauri-apps/api"
+import { appWindow } from '@tauri-apps/api/window'
+import SvgIcon from './components/SvgIcon.vue';
+import {ref} from 'vue'
+
+const maximized = ref(false);
+
+function minimize(){
+  appWindow.minimize()
+}
+
+function toggleMaximize(){
+  appWindow.toggleMaximize();
+  maximized.value = !maximized.value;
+}
+
+function close(){
+  appWindow.close()
+}
 </script>
 
 <template>
+  <div data-tauri-drag-region class="titlebar">
+  <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
+    <svg-icon name="window-minimize" color="red"></svg-icon>
+  </div>
+  <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
+    <template v-if="maximized">
+      <svg-icon name="window-maximized"></svg-icon>
+    </template>
+    <template v-else>
+      <svg-icon name="window-maximize" width="13px"></svg-icon>
+    </template>
+  </div>
+  <div class="titlebar-button" id="titlebar-close" @click="close">
+    <svg-icon name="window-close"></svg-icon>
+  </div>
+</div>
   <router-view></router-view>
 </template>
 
 <style>
 html{
   background: transparent;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
 }
 body{
-  background: transparent;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+#app{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
 }
 </style>
 <style scoped>
+.titlebar {
+  height: 30px;
+  background: #141414;
+  user-select: none;
+  display: flex;
+  justify-content: flex-end;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.titlebar-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+}
+.titlebar-button:hover {
+  background: #5bbec3;
+}
 </style>

wallitor-gui/src/assets/svgs/window-close.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="1727275506845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8495" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" p-id="8496"></path></svg>

wallitor-gui/src/assets/svgs/window-maximize.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="1727275608799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15290" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="15291"></path></svg>

wallitor-gui/src/assets/svgs/window-maximized.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16 20v-9H4v9zm2-5v-2h2V4H8v5H6V4q0-.825.588-1.412T8 2h12q.825 0 1.413.588T22 4v9q0 .825-.587 1.413T20 15zM4 22q-.825 0-1.412-.587T2 20v-9q0-.825.588-1.412T4 9h12q.825 0 1.413.588T18 11v9q0 .825-.587 1.413T16 22zm6-6.5"/></svg>

wallitor-gui/src/assets/svgs/window-minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 14H4v-4h16"/></svg>

wallitor-gui/src/components/SvgIcon.vue

@@ -0,0 +1,30 @@
+<template>
+    <svg :style="{ width, height}">
+        <use :href="prefix + name" :fill="color"></use>
+    </svg>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    prefix: {
+        type: String,
+        default: "#icon-"
+    },
+    name: {
+        type:String,
+        required:true
+    },
+    color: {
+        type: String,
+        default: "#ffffff"
+    },
+    width: {
+        type: String,
+        default: "16px"
+    },
+    height: {
+        type: String,
+        default: "16px"
+    }
+});
+</script>

wallitor-gui/src/components/install.ts

@@ -0,0 +1,14 @@
+import SvgIcon from "./SvgIcon.vue";
+import type {App,Component} from 'vue'
+
+const global_components:{[key:string]:Component} = {
+    SvgIcon
+}
+
+export default {
+    install(app:App){
+       Object.keys(global_components).forEach((key)=>{
+        app.component(key,global_components[key]);
+       })
+    }
+}

wallitor-gui/src/main.ts

@@ -1,11 +1,12 @@
-import './assets/main.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import "virtual:svg-icons-register";
+import globalComponents from '@/components/install'
 
 const app = createApp(App)
 
-app.use(router)
+app.use(router);
+app.use(globalComponents);
 
 app.mount('#app')

wallitor-gui/src/views/AboutView.vue

@@ -1,15 +1,7 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+  1
 </template>
 
 <style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
+
 </style>