💄 窗口置顶btn

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

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="share-box" title="分享">
+    <div class="share-btn" @click="shareContent()">
+      <v-icon> mdi-share-variant</v-icon>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// utils
+import TGLogger from "../../utils/TGLogger.js";
+import { generateShareImg } from "../../utils/TGShare.js";
+
+interface TShareBtnProps {
+  modelValue: HTMLElement;
+  title: string;
+  loading: boolean;
+}
+
+type TShareBtnEmits = (e: "update:loading", value: boolean) => void;
+
+const props = defineProps<TShareBtnProps>();
+const emit = defineEmits<TShareBtnEmits>();
+
+async function shareContent(): Promise<void> {
+  await TGLogger.Info("[TShareBtn][shareContent] 开始生成分享图片");
+  emit("update:loading", true);
+  props.modelValue.querySelectorAll("details").forEach((item) => {
+    if (item.open) {
+      item.setAttribute("details-open", "");
+    } else {
+      item.open = true;
+    }
+  });
+  await generateShareImg(props.title, props.modelValue);
+  props.modelValue.querySelectorAll("details").forEach((item) => {
+    if (item.hasAttribute("details-open")) {
+      item.removeAttribute("details-open");
+    } else {
+      item.open = false;
+    }
+  });
+  emit("update:loading", false);
+  await TGLogger.Info("[TShareBtn][shareContent] 生成分享图片完成");
+}
+</script>
+<style lang="css" scoped>
+.share-box {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  border: 2px solid var(--common-shadow-8);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.share-box:hover {
+  opacity: 0.8;
+}
+
+.share-btn {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding-right: 3px;
+  margin: 5px;
+}
+</style>