add window target mode switch

Author: NeserCode

src/App.vue

@@ -3,14 +3,21 @@ import TitleBar from "./components/native/TitleBar.vue"
 import Dialog from "./components/Dialog.vue"
 import TopLinks from "./components/TopLinks.vue"
 
-import { ref } from "vue"
+import { ref, onMounted } from "vue"
 import { useStorage } from "@vueuse/core"
+import { nextTickToShow } from "./composables/useLocal"
 
 const isOpenModelDialog = ref(false)
 const slideDirection = useStorage(
 	"roco-navigation-transition-direction",
 	"slideleft"
 )
+
+onMounted(() => {
+	setTimeout(() => {
+		nextTickToShow()
+	}, 0)
+})
 </script>
 
 <template>
@@ -50,9 +57,13 @@ html.dark {
 }
 </style>
 
-<style lang="postcss" scoped>
+<style lang="postcss">
 .slideleft-enter-active,
 .slideleft-leave-active,
+.slideup-enter-active,
+.slideup-leave-active,
+.slidedown-enter-active,
+.slidedown-leave-active,
 .slideright-enter-active,
 .slideright-leave-active {
 	@apply transition-all;
@@ -66,6 +77,18 @@ html.dark {
 .slideright-leave-to {
 	@apply -translate-x-4 opacity-0;
 }
+.slideup-enter-from {
+	@apply translate-y-0 opacity-0;
+}
+.slideup-leave-to {
+	@apply translate-y-2 opacity-0;
+}
+.slidedown-enter-from {
+	@apply translate-y-0 opacity-0;
+}
+.slidedown-leave-to {
+	@apply -translate-y-2 opacity-0;
+}
 </style>
 
 <style scoped lang="postcss">

src/components/FeatureFilter.vue

@@ -52,7 +52,9 @@ watch(checkedOption, (value) => {
 
 <template>
 	<Popover as="div" v-slot="{ open, close }">
-		<PopoverButton class="transition-all shadow-lg outline-none">
+		<PopoverButton
+			class="transition-all rounded shadow-lg outline-none focus:ring-2 ring-green-300 dark:ring-green-500"
+		>
 			<div class="btn-context">
 				<img
 					v-if="checkedOption !== ''"

src/components/SpiritList.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Ref, ref, toRefs, watch } from "vue"
+import { useRouter } from "vue-router"
 import { useApi } from "../composables/useApi"
 import { computedAsync, useStorage } from "@vueuse/core"
 
@@ -63,6 +64,8 @@ function getAngelIconSrc(iconSrc: string) {
 	return `${iconStaticURL}${iconSrc}`
 }
 
+const $router = useRouter()
+const alwaysTargetNewWindow = useStorage("roco-new-window-target", false)
 const angelPageTitle = useStorage("roco-angel-page-title", "一只迪莫小可爱")
 const AngelWindow: Ref<WindowCreator | null> = ref(null)
 
@@ -72,7 +75,16 @@ function setupWindowParams(id: string, name: string, hash: string) {
 		url: `/#/angel/${hash}`,
 		title: angelPageTitle.value,
 	})
-	AngelWindow.value.setup()
+
+	goAngelView(hash)
+}
+function goAngelView(hash: string) {
+	if (alwaysTargetNewWindow.value) AngelWindow.value!.setup()
+	else
+		$router.push({
+			name: "Angel",
+			params: { hash },
+		})
 }
 </script>
 

src/components/TopLinks.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { BookOpenIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
 import Menu from "./native/Menu.vue"
+import GoBack from "./native/GoBack.vue"
 import { computed } from "vue"
 import { RouterLink, useRoute } from "vue-router"
 import { useStorage } from "@vueuse/core"
@@ -19,25 +20,26 @@ const categoryNameMap = new Map([
 	["skills", "技能"],
 	["items", "物品"],
 ])
-
 function getMatchCategroyName() {
 	return categoryNameMap.get(category.value)
 }
 </script>
 
 <template>
-	<div id="top-links" v-show="hasActivedLink">
-		<Menu class="links-menu" />
-
-		<RouterLink draggable="false" class="link" to="/">
-			<BookOpenIcon class="icon" />
-			<span class="text">{{ getMatchCategroyName() }}</span>
-		</RouterLink>
-		<RouterLink draggable="false" class="link" to="/about">
-			<QuestionMarkCircleIcon class="icon" />
-			<span class="text">关于</span>
-		</RouterLink>
-	</div>
+	<Transition name="slideup" mode="in-out" appear>
+		<div id="top-links" v-show="hasActivedLink">
+			<Menu class="links-menu" />
+			<GoBack />
+			<RouterLink draggable="false" class="link" to="/">
+				<BookOpenIcon class="icon" />
+				<span class="text">{{ getMatchCategroyName() }}</span>
+			</RouterLink>
+			<RouterLink draggable="false" class="link" to="/about">
+				<QuestionMarkCircleIcon class="icon" />
+				<span class="text">关于</span>
+			</RouterLink>
+		</div>
+	</Transition>
 </template>
 
 <style lang="postcss" scoped>

src/components/native/GoBack.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { ArrowLeftIcon } from "@heroicons/vue/20/solid"
+import { useStorage, useThrottleFn } from "@vueuse/core"
+import { useRouter } from "vue-router"
+
+const alwaysTargetNewWindow = useStorage("roco-new-window-target", false)
+
+const $router = useRouter()
+const goPrevHistory = useThrottleFn(() => {
+	$router.back()
+}, 100)
+</script>
+
+<template>
+	<Transition name="slideright" mode="out-in" appear :duration="800">
+		<button
+			v-if="!alwaysTargetNewWindow"
+			class="navigation-return"
+			@click="goPrevHistory"
+		>
+			<ArrowLeftIcon class="icon" />
+		</button>
+	</Transition>
+</template>
+
+<style lang="postcss" scoped>
+.navigation-return {
+	@apply fixed left-16 inline-flex justify-center items-center py-1.5 px-2
+	bg-slate-200 dark:bg-slate-600 text-slate-500 dark:text-slate-300
+	focus:ring-2 ring-green-400 dark:ring-green-500
+	rounded transition-all outline-none shadow-md
+	z-10;
+}
+.navigation-return .icon {
+	@apply w-4 h-4;
+}
+</style>

src/components/native/Menu.vue

@@ -3,6 +3,8 @@ import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"
 import {
 	EllipsisHorizontalIcon,
 	ArrowsRightLeftIcon,
+	ArrowTopRightOnSquareIcon,
+	HomeModernIcon,
 } from "@heroicons/vue/20/solid"
 import { useStorage } from "@vueuse/core"
 
@@ -13,6 +15,11 @@ function isMatchCategoryOption(key: string): boolean {
 function turnToCategory(key: "angels" | "skills" | "items") {
 	category.value = key
 }
+
+const alwaysTargetNewWindow = useStorage("roco-new-window-target", false)
+function toggleTargetMode() {
+	alwaysTargetNewWindow.value = !alwaysTargetNewWindow.value
+}
 </script>
 
 <template>
@@ -86,16 +93,27 @@ function turnToCategory(key: "angels" | "skills" | "items") {
 							>
 						</MenuItem>
 					</div>
-					<MenuItem as="div" class="menu-item" v-slot="{ disabled, active }">
-						<ArrowsRightLeftIcon class="icon" />
+					<MenuItem
+						as="div"
+						class="menu-item"
+						v-slot="{ disabled, active }"
+						@click="toggleTargetMode()"
+					>
+						<ArrowTopRightOnSquareIcon
+							v-show="!alwaysTargetNewWindow"
+							class="icon"
+						/>
+						<HomeModernIcon v-show="alwaysTargetNewWindow" class="icon" />
 						<span
 							:class="[
 								'text',
 								disabled ? 'disabled' : null,
 								active ? 'active' : null,
 							]"
 							title="切换浏览模式"
-							>总是打开新页面</span
+							>{{
+								alwaysTargetNewWindow ? "总在当前页面" : "总是打开新页面"
+							}}</span
 						>
 					</MenuItem>
 				</MenuItems>
@@ -111,7 +129,7 @@ function turnToCategory(key: "angels" | "skills" | "items") {
 
 .menu-button {
 	@apply py-1 px-1.5
-	bg-slate-200 dark:bg-slate-600
+	bg-slate-200 dark:bg-slate-600 text-slate-500 dark:text-slate-300
 	focus:ring-2 ring-green-400 dark:ring-green-500
 	rounded transition-all outline-none shadow-md;
 }

src/composables/useLocal.ts

@@ -2,7 +2,8 @@ import { nextTick } from "vue"
 import { appWindow } from "@tauri-apps/api/window"
 
 export function nextTickToShow() {
-	nextTick(() => {
-		appWindow.show()
+	nextTick(async () => {
+		await appWindow.show()
+		await appWindow.setFocus()
 	})
 }

src/composables/useWindow.ts

@@ -1,4 +1,4 @@
-import { WebviewWindow, WindowOptions, getAll } from "@tauri-apps/api/window"
+import { WebviewWindow, WindowOptions } from "@tauri-apps/api/window"
 
 export class WindowCreator {
 	private label: string = "DefaultLabel"
@@ -10,12 +10,15 @@ export class WindowCreator {
 		fullscreen: false,
 		title: this.label,
 		resizable: false,
+		visible: false,
 		center: true,
 	}
 	private window: WebviewWindow | null = null
+	public uri: string = ""
 
 	constructor(label: string, options: WindowOptions) {
 		this.label = label
+		this.uri = options.url ?? ""
 		this.options = Object.assign(this.options, options)
 	}
 
@@ -25,7 +28,7 @@ export class WindowCreator {
 		this.window = new WebviewWindow(label, options)
 		this.window.once("tauri://created", function () {
 			// webview window successfully created
-			console.log("Window Creator Setup Success", label, options)
+			console.log("Window Creator Setup Success", label)
 		})
 		this.window.once("tauri://error", async function (e) {
 			// an error happened creating the webview window

src/main.ts

@@ -2,7 +2,6 @@ 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样式文件
@@ -26,4 +25,3 @@ router.afterEach(() => {
 })
 
 createApp(App).use(router).mount("#app")
-nextTickToShow()

src/views/Angel.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import GoBack from "../components/native/GoBack.vue"
 import { CubeTransparentIcon } from "@heroicons/vue/20/solid"
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue"
 
@@ -46,6 +47,7 @@ function log() {
 <template>
 	<div @click="log" v-if="!isLoadingData">
 		<span class="names">
+			<GoBack class="go-back" />
 			<span class="features">
 				<img
 					class="icon"
@@ -252,6 +254,9 @@ function log() {
 .features .icon {
 	@apply w-6 h-6 inline-block mx-1;
 }
+.go-back {
+	@apply left-8;
+}
 
 .details {
 	@apply w-full inline-flex justify-center items-center px-4
@@ -285,7 +290,7 @@ function log() {
 
 .info-main,
 .skill-main {
-	@apply max-h-40 flex flex-wrap justify-start
+	@apply max-h-48 flex flex-wrap justify-center
 	overflow-auto;
 }
 .info-item,