💄 窗口置顶btn

https://github.com/tauri-apps/tauri/issues/11078

src-tauri/capabilities/SubWindow.json

@@ -31,6 +31,7 @@
     "core:window:allow-set-focus",
     "core:window:allow-set-fullscreen",
     "core:window:allow-show",
+    "core:window:allow-set-always-on-top",
     "core:window:default",
     {
       "identifier": "fs:allow-exists",

src-tauri/gen/schemas/capabilities.json

@@ -102,6 +102,7 @@
       "core:window:allow-set-focus",
       "core:window:allow-set-fullscreen",
       "core:window:allow-show",
+      "core:window:allow-set-always-on-top",
       "core:window:default",
       { "identifier": "fs:allow-exists", "allow": [{ "path": "**" }] },
       { "identifier": "fs:allow-mkdir", "allow": [{ "path": "**" }] },

src/components/app/t-pinWin.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="tpw-box" data-html2canvas-ignore>
+    <div class="tpw-btn" @click="switchPin()" :title="isPined ? '取消置顶' : '窗口置顶'">
+      <v-icon :color="isPined ? 'yellow' : 'inherit'">
+        {{ isPined ? "mdi-pin-off" : "mdi-pin" }}
+      </v-icon>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { onMounted, ref } from "vue";
+
+import showSnackbar from "../func/snackbar.js";
+
+const isPined = ref<boolean>(false);
+
+onMounted(async () => {
+  // 因为无法获取窗口是否置顶，这边手动取消置顶
+  // 详见：https://github.com/tauri-apps/tauri/issues/11078
+  await getCurrentWindow().setAlwaysOnTop(false);
+});
+
+async function switchPin(): Promise<void> {
+  isPined.value = !isPined.value;
+  await getCurrentWindow().setAlwaysOnTop(isPined.value);
+  const text = isPined.value ? "已将窗口置顶！" : "已经取消窗口置顶!";
+  showSnackbar({ text: text, color: "success" });
+}
+</script>
+<style lang="css" scoped>
+.tpw-box {
+  position: fixed;
+  top: 70px;
+  left: 20px;
+  border: 2px solid var(--common-shadow-8);
+  border-radius: 50%;
+  cursor: pointer;
+
+  :hover {
+    opacity: 0.8;
+  }
+}
+
+.tpw-btn {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  rotate: 30deg;
+}
+</style>

src/components/app/t-shareBtn.vue

@@ -63,7 +63,7 @@ async function shareContent(): Promise<void> {
   height: 24px;
   align-items: center;
   justify-content: center;
-  padding-right: 2px;
+  padding-right: 3px;
   margin: 5px;
 }
 </style>

src/components/post/tb-collect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tbc-box" data-html2canvas-ignore>
     <div class="tbc-btn" @click="switchCollect()" :title="isCollected ? '取消收藏' : '收藏'">
-      <v-icon size="large" :color="isCollected ? 'yellow' : 'inherit'">
+      <v-icon :color="isCollected ? 'yellow' : 'inherit'">
         {{ isCollected ? "mdi-star" : "mdi-star-outline" }}
       </v-icon>
     </div>
@@ -57,7 +57,7 @@ watch(
   () => props.data,
   async (val) => {
     if (val === undefined) return;
-    if (isCollected.value === false) return;
+    if (!isCollected.value) return;
     const res = await TSUserCollection.updatePostInfo(props.modelValue.toString(), val);
     await event.emit("refreshCollect");
     if (!res) {
@@ -76,7 +76,7 @@ watch(
 );
 
 async function switchCollect(): Promise<void> {
-  if (isCollected.value === false) {
+  if (!isCollected.value) {
     if (props.data === undefined) {
       showSnackbar({
         text: "未获取到帖子信息",
@@ -119,10 +119,10 @@ async function switchCollect(): Promise<void> {
   border: 2px solid var(--common-shadow-8);
   border-radius: 50%;
   cursor: pointer;
-}
 
-.tbc-box:hover {
-  opacity: 0.8;
+  :hover {
+    opacity: 0.8;
+  }
 }
 
 .tbc-btn {
@@ -131,7 +131,6 @@ async function switchCollect(): Promise<void> {
   height: 24px;
   align-items: center;
   justify-content: center;
-  padding-right: 2px;
   margin: 5px;
 }
 

src/views/t-anno.vue

@@ -1,5 +1,6 @@
 <template>
   <TSwitchTheme />
+  <TPinWin />
   <TShareBtn
     v-show="!loadingEmpty"
     v-model="annoRef"
@@ -26,8 +27,9 @@ import { ref, onMounted, watch, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
 
 import TaParser from "../components/anno/ta-parser.vue";
+import TPinWin from "../components/app/t-pinWin.vue";
+import TShareBtn from "../components/app/t-shareBtn.vue";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import TShareBtn from "../components/main/t-shareBtn.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
 import { useAppStore } from "../store/modules/app.js";
 import TGLogger from "../utils/TGLogger.js";

src/views/t-post.vue

@@ -1,5 +1,6 @@
 <template>
   <TSwitchTheme />
+  <TPinWin />
   <TbCollect :model-value="postId" :data="postData" />
   <TShareBtn
     v-show="!loadingEmpty"
@@ -88,8 +89,9 @@ import { webviewWindow } from "@tauri-apps/api";
 import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
+import TPinWin from "../components/app/t-pinWin.vue";
+import TShareBtn from "../components/app/t-shareBtn.vue";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import TShareBtn from "../components/main/t-shareBtn.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
 import TbCollect from "../components/post/tb-collect.vue";
 import TpAvatar from "../components/post/tp-avatar.vue";