update api and add comp

Author: NeserCode

src-tauri/tauri.conf.json

@@ -36,7 +36,8 @@
 				"title": "Roco Codex",
 				"width": 500,
 				"height": 600,
-				"decorations": false
+				"decorations": false,
+				"visible": false
 			}
 		],
 		"systemTray": {

src/App.vue

@@ -29,7 +29,7 @@ const slideDirection = useStorage(
 	</div>
 </template>
 
-<style>
+<style lang="postcss">
 html.dark {
 	color-scheme: dark;
 }
@@ -38,6 +38,16 @@ html.dark {
 	src: url("./assets/SourceHanSerifCN-VF.ttf");
 	font-family: "SourceHanSerifCN";
 }
+
+.custom-scrollbar::-webkit-scrollbar {
+	@apply w-2;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+	@apply bg-slate-200 dark:bg-slate-600;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+	@apply bg-slate-400 shadow;
+}
 </style>
 
 <style lang="postcss" scoped>

src/components/SpiritList.vue

@@ -77,7 +77,7 @@ function setupWindowParams(id: string, name: string, hash: string) {
 </script>
 
 <template>
-	<div class="angel-list-main">
+	<div class="angel-list-main custom-scrollbar">
 		<div
 			class="angel-card"
 			v-for="angel in listData"
@@ -139,15 +139,6 @@ function setupWindowParams(id: string, name: string, hash: string) {
 }
 </style>
 <style lang="postcss" scoped>
-.angel-list-main::-webkit-scrollbar {
-	@apply w-2;
-}
-.angel-list-main::-webkit-scrollbar-track {
-	@apply bg-slate-200 dark:bg-slate-600;
-}
-.angel-list-main::-webkit-scrollbar-thumb {
-	@apply bg-slate-400 shadow;
-}
 .angel-list-main {
 	@apply relative w-80 mt-8 h-80 flex flex-col items-center
   overflow-auto snap-y snap-mandatory;

src/components/TopLinks.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Menu from "./native/Menu.vue"
 import { onActivated, ref } from "vue"
 import { RouterLink } from "vue-router"
 import { HomeIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
@@ -21,9 +22,7 @@ onActivated(() => {
 			<QuestionMarkCircleIcon class="icon" />
 			<span>关于</span>
 		</RouterLink>
-		<RouterLink draggable="false" class="link" to="/angel/04bca0fe">
-			<span>Testing</span>
-		</RouterLink>
+		<Menu />
 	</div>
 </template>
 

src/components/native/Menu.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"
+</script>
+
+<template>
+	<div class="navigation-menu">
+		<Menu as="div">
+			<MenuButton>bbut</MenuButton>
+			<transition
+				enter-active-class="transition duration-100 ease-out"
+				enter-from-class="transform scale-95 opacity-0"
+				enter-to-class="transform scale-100 opacity-100"
+				leave-active-class="transition duration-75 ease-in"
+				leave-from-class="transform scale-100 opacity-100"
+				leave-to-class="transform scale-95 opacity-0"
+			>
+				<MenuItems>
+					<MenuItem>1</MenuItem>
+					<MenuItem>2</MenuItem>
+				</MenuItems>
+			</transition>
+		</Menu>
+	</div>
+</template>
+
+<style lang="postcss" scoped></style>

src/components/native/TitleBar.vue

@@ -36,8 +36,8 @@ function minimize() {
 	appWindow.minimize()
 }
 
-function close() {
-	appWindow.close()
+async function close() {
+	await appWindow.close()
 }
 
 function addMoveClass(event: MouseEvent) {

src/composables/useLocal.ts

@@ -0,0 +1,8 @@
+import { nextTick } from "vue"
+import { appWindow } from "@tauri-apps/api/window"
+
+export function nextTickToShow() {
+	nextTick(() => {
+		appWindow.show()
+	})
+}

src/composables/useWindow.ts

@@ -1,4 +1,4 @@
-import { WebviewWindow, WindowOptions } from "@tauri-apps/api/window"
+import { WebviewWindow, WindowOptions, getAll } from "@tauri-apps/api/window"
 
 export class WindowCreator {
 	private label: string = "DefaultLabel"
@@ -10,6 +10,7 @@ export class WindowCreator {
 		fullscreen: false,
 		title: this.label,
 		resizable: false,
+		center: true,
 	}
 	private window: WebviewWindow | null = null
 
@@ -26,9 +27,10 @@ export class WindowCreator {
 			// webview window successfully created
 			console.log("Window Creator Setup Success", label, options)
 		})
-		this.window.once("tauri://error", function (e) {
+		this.window.once("tauri://error", async function (e) {
 			// an error happened creating the webview window
 			console.log("Window Creator Setup Error", e)
+			await WebviewWindow.getByLabel(e.windowLabel)!.setFocus()
 		})
 	}
 }

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from "vue"
 import "./styles.css"
 import router from "./router"
 import App from "./App.vue"
+import { nextTickToShow } from "./composables/useLocal"
 
 import NProgress from "nprogress"
 import "nprogress/nprogress.css" // nprogress样式文件
@@ -25,3 +26,4 @@ router.afterEach(() => {
 })
 
 createApp(App).use(router).mount("#app")
+nextTickToShow()