feat: load and store window position and size

src-tauri/src/main.rs

@@ -30,7 +30,9 @@ fn main() {
                       load_local_image,
                       new_sender::create_sender_window,
                       new_view::create_new_danmaku_view,
-                      new_view::set_click_through
+                      new_view::set_click_through,
+                      new_view::get_viewer_pos_and_size,
+                      new_view::set_viewer_pos_and_size
                     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");

src-tauri/src/new_sender.rs

@@ -14,7 +14,7 @@ pub fn create_sender_window(app_handle: tauri::AppHandle<Wry>) {
       .unwrap();
 
     viewer
-      .set_min_size(std::option::Option::Some(tauri::LogicalSize::new(300, 40)))
+      .set_min_size(std::option::Option::Some(tauri::LogicalSize::new(200, 40)))
       .expect("Failed to set min size!");
 
     viewer

src-tauri/src/new_view.rs

@@ -14,7 +14,7 @@ pub fn create_new_danmaku_view(app_handle: tauri::AppHandle<Wry>) {
       .unwrap();
 
     viewer
-      .set_min_size(std::option::Option::Some(tauri::LogicalSize::new(300, 200)))
+      .set_min_size(std::option::Option::Some(tauri::LogicalSize::new(200, 200)))
       .expect("Failed to set min size!");
 
     viewer
@@ -41,3 +41,39 @@ pub fn set_click_through(app_handle: tauri::AppHandle<Wry>, enable: bool) -> Res
 
   Ok(enable)
 }
+
+#[derive(Copy, Clone, serde::Serialize, serde::Deserialize)]
+pub struct PosProps {
+  width: u32,
+  height: u32,
+  x: i32,
+  y: i32
+}
+
+#[tauri::command]
+pub fn get_viewer_pos_and_size(app_handle: tauri::AppHandle<Wry>) -> Result<PosProps, String> {
+  let option_window = app_handle.get_window("danmakuWidget");
+  if let Some(viewer) = option_window {
+    let size = viewer.inner_size().unwrap();
+    let pos = viewer.inner_position().unwrap();
+    let ret = PosProps { width: size.width, height: size.height, x: pos.x, y: pos.y };
+
+    return Ok(ret);
+  }
+
+  Err("Failed to get danmaku window!".into())
+}
+
+#[tauri::command]
+pub fn set_viewer_pos_and_size(app_handle: tauri::AppHandle<Wry>, conf: PosProps) -> Result<bool, String> {
+  let option_window = app_handle.get_window("danmakuWidget");
+  let PosProps {width, height, x, y} = conf;
+  if let Some(viewer) = option_window {
+    viewer.set_size(tauri::PhysicalSize { width, height }).unwrap();
+    viewer.set_position(tauri::PhysicalPosition { x, y }).unwrap();
+
+    return Ok(true);
+  }
+
+  Err("Failed to get danmaku window!".into())
+}

src/composables/load_pos.ts

@@ -0,0 +1,11 @@
+import { invoke } from '@tauri-apps/api/tauri'
+import type { PositionConfig } from '~/stores/position'
+
+async function loadPos(conf: PositionConfig) {
+  const res = await invoke('set_viewer_pos_and_size', { conf })
+  return res
+}
+
+export {
+  loadPos,
+}

src/pages/index.vue

@@ -2,20 +2,23 @@
 import { WebviewWindow } from '@tauri-apps/api/window'
 // import { emit } from '@tauri-apps/api/event'
 import { invoke } from '@tauri-apps/api/tauri'
-import { useStorage } from '@vueuse/core'
+import { useStorage, useThrottleFn } from '@vueuse/core'
 import { inject, ref } from 'vue'
 import UMdInput from '~/components/ui/UMdInput.vue'
 import UCheckBox from '~/components/ui/UCheckBox.vue'
 import { shortToLong } from '~/composables/shortIdToLong'
 import { useStore } from '~/stores/store'
 import { eventEmitter } from '~/composables/eventEmitter'
+import { usePosition } from '~/stores/position'
+import { loadPos } from '~/composables/load_pos'
 
 const roomId = useStorage('roomId', '')
 
 let webview: WebviewWindow | null = null
 const msgRef = inject('msgRef') as any
 const store = useStore()
 const isLoadingRoomId = ref(false)
+const pos = usePosition()
 
 async function createWebview() {
   if (roomId.value.trim() === '') {
@@ -134,6 +137,27 @@ const pinWidget = () => {
   if (danmakuWidget)
     danmakuWidget.setAlwaysOnTop(pinned.value)
 }
+
+const storePosition = useThrottleFn(() => {
+  pos.storeConfig()
+    .then(() => {
+      msgRef.value.pushMsg('保存成功', { type: 'success' })
+    })
+    .catch((err) => {
+      msgRef.value.pushMsg(`保存失败, ${err.message}`, { type: 'error' })
+    })
+})
+
+const loadPosition = useThrottleFn(() => {
+  const conf = pos.getConfig()
+  loadPos(conf)
+    .then(() => {
+      msgRef.value.pushMsg('加载成功', { type: 'success' })
+    })
+    .catch((err) => {
+      msgRef.value.pushMsg(`加载失败, ${err.message}`, { type: 'error' })
+    })
+})
 </script>
 
 <template>
@@ -198,6 +222,18 @@ const pinWidget = () => {
             </div>
             <span>打开/关闭弹幕发送浮窗</span>
           </div>
+          <div inline-flex items-center leading-relaxed select-none space-x-1>
+            <div text-lg flex items-center>
+              <div icon-btn i-ri-save-line ml-1 />
+            </div>
+            <div>
+              <button text-btn :disabled="!store.linked" @click="storePosition">
+                保存
+              </button>/<button :disabled="!store.linked" text-btn @click="loadPosition">
+                加载
+              </button>窗口大小和位置
+            </div>
+          </div>
         </div>
         <div flex-1 />
       </div>

src/stores/position.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import { invoke } from '@tauri-apps/api/tauri'
+
+export interface PositionConfig {
+  width: number
+  height: number
+  x: number
+  y: number
+}
+
+export const usePosition = defineStore('position', {
+  state: () => ({
+    width: 400,
+    height: 600,
+    x: 0,
+    y: 0,
+  }),
+  getters: {
+    getConfig() {
+      return () => {
+        const localConfigString = localStorage.getItem('position')
+        if (!localConfigString)
+          return { width: 400, height: 600, x: 0, y: 0 }
+        const localConfig = JSON.parse(localConfigString) as PositionConfig
+        return localConfig
+      }
+    },
+  },
+  actions: {
+    async storeConfig() {
+      const conf = await invoke('get_viewer_pos_and_size') as PositionConfig
+      this.width = conf.width
+      this.height = conf.height
+      this.x = conf.x
+      this.y = conf.y
+      localStorage.setItem('position', JSON.stringify(conf))
+    },
+  },
+})

unocss.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
     ['btn', 'inline-block px-4 py-1 bg-#646cff bg-opacity-80 disabled:opacity-20 disabled:bg-zinc-500 hover:bg-opacity-100 font-500 transition-all text-white'],
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-#646cff !outline-none disabled:(cursor-not-allowed op-50 hover:text-zinc)'],
     ['text-active', 'text-#646cff dark:text-#646cff opacity-100'],
+    ['text-btn', 'cursor-pointer select-none opacity-75 transition duration-200 hover:op-100 hover:text-#646cff !outline-none disabled:(cursor-not-allowed op-50 hover:text-zinc)'],
     ['m-input', 'border border-zinc-300 dark:border-zinc-600 !outline-none px-2 py-1 bg-transparent leading-normal'],
     ['wsn', 'whitespace-nowrap'],
   ],