Update tauri to 2.0rc

FrontEnd Edited
2024-09-26 16:35:08 +08:00 · 2024-09-26 11:32:50 +08:00
23 changed files with 5268 additions and 768 deletions
--- a/wallitor-core/playerInstance.cpp
+++ b/wallitor-core/playerInstance.cpp
@ -59,13 +59,14 @@ BOOL playerInstance::showWindow(LPCWSTR lpParameter) {
 	PROCESS_INFORMATION pi{ 0 };
 	if (CreateProcess(this->config.ffpath.c_str(), (LPWSTR)lpParameter, 0, 0, 0, CREATE_NO_WINDOW, 0, 0, &si, &pi)) {
 		//Sleep(600);//等待视频播放器启动完成
-		std::this_thread::sleep_for(std::chrono::milliseconds(300));
 		//HWND hProgman = FindWindow(L"Progman", 0);// 找到PI窗口
 		HWND hProgman = findWindowTimeOut(L"Progman",2000);
+		std::this_thread::sleep_for(std::chrono::milliseconds(300));
 		if (hProgman == nullptr) return FALSE;
 		SendMessageTimeout(hProgman, 0x052c, 0, 0, 0, 300, 0);// 给它发特殊消息
 		//this->hFfplay = FindWindowW(L"SDL_app", 0);// 找到视频窗口
 		this->hFfplay = findWindowTimeOut(L"SDL_app", 2000);
+		std::this_thread::sleep_for(std::chrono::milliseconds(300));
 		if (this->hFfplay == nullptr) return FALSE;
 		SetParent(hFfplay, hProgman);// 将视频窗口设苦为PM的子窗口
 		int systemWidth = GetSystemMetrics(0);
--- a/wallitor-gui/package.json
+++ b/wallitor-gui/package.json
@ -13,13 +13,13 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "@tauri-apps/api": "^1.6.0",
+    "@tauri-apps/api": "2.0.0-rc.0",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
-    "@tauri-apps/cli": "^1.6.2",
+    "@tauri-apps/cli": "2.0.0-rc.16",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
--- a/wallitor-gui/pnpm-lock.yaml
+++ b/wallitor-gui/pnpm-lock.yaml
@ -9,8 +9,8 @@ importers:
  .:
    dependencies:
      '@tauri-apps/api':
-        specifier: ^1.6.0
-        version: 1.6.0
+        specifier: 2.0.0-rc.0
+        version: 2.0.0-rc.0
      vue:
        specifier: ^3.4.29
        version: 3.5.8(typescript@5.4.5)
@ -22,8 +22,8 @@ importers:
        specifier: ^1.8.0
        version: 1.10.4
      '@tauri-apps/cli':
-        specifier: ^1.6.2
-        version: 1.6.2
+        specifier: 2.0.0-rc.16
+        version: 2.0.0-rc.16
      '@tsconfig/node20':
        specifier: ^20.1.4
        version: 20.1.4
@ -530,76 +530,76 @@ packages:
  '@rushstack/eslint-patch@1.10.4':
    resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}

-  '@tauri-apps/api@1.6.0':
-    resolution: {integrity: sha512-rqI++FWClU5I2UBp4HXFvl+sBWkdigBkxnpJDQUWttNyG7IZP4FwQGhTNL5EOw0vI8i6eSAJ5frLqO7n7jbJdg==}
-    engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
+  '@tauri-apps/api@2.0.0-rc.0':
+    resolution: {integrity: sha512-v454Qs3REHc3Za59U+/eSmBsdmF+3NE5+76+lFDaitVqN4ZglDHENDaMARYKGJVZuxiSkzyqG0SeG7lLQjVkPA==}
+    engines: {node: '>= 18.18', npm: '>= 6.6.0', yarn: '>= 1.19.1'}

-  '@tauri-apps/cli-darwin-arm64@1.6.2':
-    resolution: {integrity: sha512-6mdRyf9DaLqlZvj8kZB09U3rwY+dOHSGzTZ7+GDg665GJb17f4cb30e8dExj6/aghcsOie9EGpgiURcDUvLNSQ==}
+  '@tauri-apps/cli-darwin-arm64@2.0.0-rc.16':
+    resolution: {integrity: sha512-lISZU4gG0c9PbY7h/j/gW7nJLxZEygNBrYEET6zN8R99Znf5rSO+CfjenaMcJUUj6yTAd8gzdakRpLqNSAWegA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]

-  '@tauri-apps/cli-darwin-x64@1.6.2':
-    resolution: {integrity: sha512-PLxZY5dn38H3R9VRmBN/l0ZDB5JFanCwlK4rmpzDQPPg3tQmbu5vjSCP6TVj5U6aLKsj79kFyULblPr5Dn9+vw==}
+  '@tauri-apps/cli-darwin-x64@2.0.0-rc.16':
+    resolution: {integrity: sha512-D9uxPCxpyYcTSQulJGFX3POAKPOJd8WcWHFH8x6YVM1cIx6EWRXIE1sZnPUOjFr7qCg+bSdYdr8/BFHcZGcApQ==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]

-  '@tauri-apps/cli-linux-arm-gnueabihf@1.6.2':
-    resolution: {integrity: sha512-xnpj4BLeeGOh5I/ewCQlYJZwHH0CBNBN+4q8BNWNQ9MKkjN9ST366RmHRzl2ANNgWwijOPxyce7GiUmvuH8Atw==}
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.0.0-rc.16':
+    resolution: {integrity: sha512-WsVdKm4D1I1XV8I9yRnmOINZRwwWfh6xcLV3m19+B9g6TohK8RkRxWfxvs3TLQlWOLQ6lo8BzS9rzXB+KtjDpg==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [linux]

-  '@tauri-apps/cli-linux-arm64-gnu@1.6.2':
-    resolution: {integrity: sha512-uaiRE0vE2P+tdsCngfKt+7yKr3VZXIq/t3w01DzSdnBgHSp0zmRsRR4AhZt7ibvoEgA8GzBP+eSHJdFNZsTU9w==}
+  '@tauri-apps/cli-linux-arm64-gnu@2.0.0-rc.16':
+    resolution: {integrity: sha512-2jpZDagNs6rrqposHJihHBayttgOl5aB2+bYiVEC6ye+haiFtmYmpdaPOaVIw+YVQs6lepf5PVrisCoU9DmYsg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
    libc: [glibc]

-  '@tauri-apps/cli-linux-arm64-musl@1.6.2':
-    resolution: {integrity: sha512-o9JunVrMrhqTBLrdvEbS64W0bo1dPm0lxX51Mx+6x9SmbDjlEWGgaAHC3iKLK9khd5Yu1uO1e+8TJltAcScvmw==}
+  '@tauri-apps/cli-linux-arm64-musl@2.0.0-rc.16':
+    resolution: {integrity: sha512-SNEDcB+sWOls/B0a+UpUHVa/oegvlXXKYWsTxuXtgWIr5VbWG7rXLZ3fZpLLP3SpRVGTGTnABcyqshFbWSqqKQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
    libc: [musl]

-  '@tauri-apps/cli-linux-x64-gnu@1.6.2':
-    resolution: {integrity: sha512-jL9f+o61DdQmNYKIt2Q3BA8YJ+hyC5+GdNxqDf7j5SoQ85j//YfUWbmp9ZgsPHVBxgSGZVvgGMNvf64Ykp0buQ==}
+  '@tauri-apps/cli-linux-x64-gnu@2.0.0-rc.16':
+    resolution: {integrity: sha512-Zsq29MM1ooeH1+chQBa7ffDFnzAZebBBFdsvs4e05tS1H8gn4oKE+PSMn9p/okzVXykEk9ri2/n7BG1XFeifMA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
    libc: [glibc]

-  '@tauri-apps/cli-linux-x64-musl@1.6.2':
-    resolution: {integrity: sha512-xsa4Pu9YMHKAX0J8pIoXfN/uhvAAAoECZDixDhWw8zi57VZ4QX28ycqolS+NscdD9NAGSgHk45MpBZWdvRtvjQ==}
+  '@tauri-apps/cli-linux-x64-musl@2.0.0-rc.16':
+    resolution: {integrity: sha512-g+pwSuis2YMxhJJ/pJYwp/Nps5CWvlv/5MV5UfDvClkCkeAyzIqVX+HbBLPcs5S0CePUQNeP0j4d4jBWUqZZQg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
    libc: [musl]

-  '@tauri-apps/cli-win32-arm64-msvc@1.6.2':
-    resolution: {integrity: sha512-eJtUOx2UFhJpCCkm5M5+4Co9JbjvgIHTdyS/hTSZfOEdT58CNEGVJXMA39FsSZXYoxYPE+9K7Km6haMozSmlxw==}
+  '@tauri-apps/cli-win32-arm64-msvc@2.0.0-rc.16':
+    resolution: {integrity: sha512-PpPqdMTwJSDAK4KnNjvh77ShSkY+7pih1f6e50EtXar8bjC17e3XcEqFhDNne5mxEVTLYhibs6p1JLPad0ZjRA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]

-  '@tauri-apps/cli-win32-ia32-msvc@1.6.2':
-    resolution: {integrity: sha512-9Jwx3PrhNw3VKOgPISRRXPkvoEAZP+7rFRHXIo49dvlHy2E/o9qpWi1IntE33HWeazP6KhvsCjvXB2Ai4eGooA==}
+  '@tauri-apps/cli-win32-ia32-msvc@2.0.0-rc.16':
+    resolution: {integrity: sha512-io2yIcEcG7YLP+9n13NbilB93SjcB7jIl8GbURC4XZT4/4t9D1PWHpJr5hySVsGRLCz5e8NzwC5RlnenNzmpPQ==}
    engines: {node: '>= 10'}
    cpu: [ia32]
    os: [win32]

-  '@tauri-apps/cli-win32-x64-msvc@1.6.2':
-    resolution: {integrity: sha512-5Z+ZjRFJE8MXghJe1UXvGephY5ZcgVhiTI9yuMi9xgX3CEaAXASatyXllzsvGJ9EDaWMEpa0PHjAzi7LBAWROw==}
+  '@tauri-apps/cli-win32-x64-msvc@2.0.0-rc.16':
+    resolution: {integrity: sha512-Rfkmxe3k+cBVA/kVYt8O25QrQqWKJlH9AiH7Q3C6xBzzG9PCSRMBszCp+JhBF8jhVlwNmOBv6UG+lm85kspwGg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]

-  '@tauri-apps/cli@1.6.2':
-    resolution: {integrity: sha512-zpfZdxhm20s7d/Uejpg/T3a9sqLVe3Ih2ztINfy8v6iLw9Ohowkb9g+agZffYKlEWfOSpmCy69NFyBLj7OZL0A==}
+  '@tauri-apps/cli@2.0.0-rc.16':
+    resolution: {integrity: sha512-wdjZg/M3dcxiqgWG6VRnABpX0dYxRww93t0d1MYoZxFDrnyoUz5kYwFQ0v4J9u0qenEgskjoypvon7V/Nj9qrg==}
    engines: {node: '>= 10'}
    hasBin: true

@ -2893,50 +2893,50 @@ snapshots:

  '@rushstack/eslint-patch@1.10.4': {}

-  '@tauri-apps/api@1.6.0': {}
+  '@tauri-apps/api@2.0.0-rc.0': {}

-  '@tauri-apps/cli-darwin-arm64@1.6.2':
+  '@tauri-apps/cli-darwin-arm64@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-darwin-x64@1.6.2':
+  '@tauri-apps/cli-darwin-x64@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-linux-arm-gnueabihf@1.6.2':
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-linux-arm64-gnu@1.6.2':
+  '@tauri-apps/cli-linux-arm64-gnu@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-linux-arm64-musl@1.6.2':
+  '@tauri-apps/cli-linux-arm64-musl@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-linux-x64-gnu@1.6.2':
+  '@tauri-apps/cli-linux-x64-gnu@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-linux-x64-musl@1.6.2':
+  '@tauri-apps/cli-linux-x64-musl@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-win32-arm64-msvc@1.6.2':
+  '@tauri-apps/cli-win32-arm64-msvc@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-win32-ia32-msvc@1.6.2':
+  '@tauri-apps/cli-win32-ia32-msvc@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli-win32-x64-msvc@1.6.2':
+  '@tauri-apps/cli-win32-x64-msvc@2.0.0-rc.16':
    optional: true

-  '@tauri-apps/cli@1.6.2':
+  '@tauri-apps/cli@2.0.0-rc.16':
    optionalDependencies:
-      '@tauri-apps/cli-darwin-arm64': 1.6.2
-      '@tauri-apps/cli-darwin-x64': 1.6.2
-      '@tauri-apps/cli-linux-arm-gnueabihf': 1.6.2
-      '@tauri-apps/cli-linux-arm64-gnu': 1.6.2
-      '@tauri-apps/cli-linux-arm64-musl': 1.6.2
-      '@tauri-apps/cli-linux-x64-gnu': 1.6.2
-      '@tauri-apps/cli-linux-x64-musl': 1.6.2
-      '@tauri-apps/cli-win32-arm64-msvc': 1.6.2
-      '@tauri-apps/cli-win32-ia32-msvc': 1.6.2
-      '@tauri-apps/cli-win32-x64-msvc': 1.6.2
+      '@tauri-apps/cli-darwin-arm64': 2.0.0-rc.16
+      '@tauri-apps/cli-darwin-x64': 2.0.0-rc.16
+      '@tauri-apps/cli-linux-arm-gnueabihf': 2.0.0-rc.16
+      '@tauri-apps/cli-linux-arm64-gnu': 2.0.0-rc.16
+      '@tauri-apps/cli-linux-arm64-musl': 2.0.0-rc.16
+      '@tauri-apps/cli-linux-x64-gnu': 2.0.0-rc.16
+      '@tauri-apps/cli-linux-x64-musl': 2.0.0-rc.16
+      '@tauri-apps/cli-win32-arm64-msvc': 2.0.0-rc.16
+      '@tauri-apps/cli-win32-ia32-msvc': 2.0.0-rc.16
+      '@tauri-apps/cli-win32-x64-msvc': 2.0.0-rc.16

  '@trysound/sax@0.2.0': {}

--- a/wallitor-gui/src-tauri/Cargo.lock
+++ b/wallitor-gui/src-tauri/Cargo.lock
--- a/wallitor-gui/src-tauri/Cargo.toml
+++ b/wallitor-gui/src-tauri/Cargo.toml
@ -12,14 +12,13 @@ rust-version = "1.60"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

 [build-dependencies]
-tauri-build = { version = "1.5.5", features = [] }
+tauri-build = { version = "2.0.0-rc", features = [] }

 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.8.0", features = [ "window-minimize", "window-maximize", "window-close", "window-show", "window-hide", "window-start-dragging", "window-unminimize", "window-unmaximize"] }
-window-vibrancy = "0.4"
-window-shadows = "0.2.2"
+tauri = { version = "2.0.0-rc", features = [] }
+window-vibrancy = "0.5.2"

 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
--- a/wallitor-gui/src-tauri/capabilities/migrated.json
+++ b/wallitor-gui/src-tauri/capabilities/migrated.json
@ -0,0 +1,20 @@
+{
+  "identifier": "migrated",
+  "description": "permissions that were migrated from v1",
+  "local": true,
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-minimize",
+    "core:window:allow-unminimize",
+    "core:window:allow-show",
+    "core:window:allow-hide",
+    "core:window:allow-close",
+    "core:window:allow-start-dragging"
+  ]
+}
--- a/wallitor-gui/src-tauri/gen/schemas/acl-manifests.json
+++ b/wallitor-gui/src-tauri/gen/schemas/acl-manifests.json
--- a/wallitor-gui/src-tauri/gen/schemas/capabilities.json
+++ b/wallitor-gui/src-tauri/gen/schemas/capabilities.json
@ -0,0 +1 @@
+{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-maximize","core:window:allow-unmaximize","core:window:allow-toggle-maximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-start-dragging"]}}
--- a/wallitor-gui/src-tauri/gen/schemas/desktop-schema.json
+++ b/wallitor-gui/src-tauri/gen/schemas/desktop-schema.json
--- a/wallitor-gui/src-tauri/gen/schemas/windows-schema.json
+++ b/wallitor-gui/src-tauri/gen/schemas/windows-schema.json
--- a/wallitor-gui/src-tauri/src/setup.rs
+++ b/wallitor-gui/src-tauri/src/setup.rs
@ -1,11 +1,10 @@
 use tauri::{App, Manager};
 use window_vibrancy::{self, NSVisualEffectMaterial};
-use window_shadows::set_shadow;


 /// setup
 pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>> {
-    let win = app.get_window("main").unwrap();
+    let win = app.get_webview_window("main").unwrap();
    // 仅在 macOS 下执行
    #[cfg(target_os = "macos")]
    window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI)
@ -14,8 +13,7 @@ pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>
    // 仅在 windows 下执行
    #[cfg(target_os = "windows")]
    if let Err(_) = window_vibrancy::apply_mica(&win, None){
-        window_vibrancy::apply_acrylic(&win, Some((10,10,10,180))).expect("Unsupport Blur Effect!")
+        window_vibrancy::apply_acrylic(&win, Some((10,10,10,210))).expect("Unsupport Blur Effect!")
    }
-    set_shadow(&win, true).unwrap();
    Ok(())
 }
--- a/wallitor-gui/src-tauri/tauri.conf.json
+++ b/wallitor-gui/src-tauri/tauri.conf.json
@ -3,77 +3,62 @@
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
-    "devPath": "http://localhost:5173",
-    "distDir": "../dist"
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:5173"
  },
-  "package": {
-    "productName": "wallitor-gui",
-    "version": "0.1.0"
-  },
-  "tauri": {
-    "allowlist": {
-      "all": false,
-      "window": {
-        "all": false,
-        "close": true,
-        "hide": true,
-        "show": true,
-        "maximize": true,
-        "minimize": true,
-        "unmaximize": true,
-        "unminimize": true,
-        "startDragging": true
-      }
+  "bundle": {
+    "active": true,
+    "category": "DeveloperTool",
+    "copyright": "",
+    "targets": "all",
+    "externalBin": [],
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
+    "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": ""
    },
-    "bundle": {
-      "active": true,
-      "category": "DeveloperTool",
-      "copyright": "",
+    "longDescription": "",
+    "macOS": {
+      "entitlements": null,
+      "exceptionDomain": "",
+      "frameworks": [],
+      "providerShortName": null,
+      "signingIdentity": null
+    },
+    "resources": [],
+    "shortDescription": "",
+    "linux": {
      "deb": {
        "depends": []
-      },
-      "externalBin": [],
-      "icon": [
-        "icons/32x32.png",
-        "icons/128x128.png",
-        "icons/128x128@2x.png",
-        "icons/icon.icns",
-        "icons/icon.ico"
-      ],
-      "identifier": "com.tauri.dev",
-      "longDescription": "",
-      "macOS": {
-        "entitlements": null,
-        "exceptionDomain": "",
-        "frameworks": [],
-        "providerShortName": null,
-        "signingIdentity": null
-      },
-      "resources": [],
-      "shortDescription": "",
-      "targets": "all",
-      "windows": {
-        "certificateThumbprint": null,
-        "digestAlgorithm": "sha256",
-        "timestampUrl": ""
      }
-    },
-    "security": {
-      "csp": null
-    },
-    "updater": {
-      "active": false
-    },
+    }
+  },
+  "productName": "wallitor-gui",
+  "mainBinaryName": "wallitor-gui",
+  "version": "0.1.0",
+  "identifier": "com.tauri.dev",
+  "plugins": {},
+  "app": {
    "windows": [
      {
        "fullscreen": false,
-        "height": 600,
        "resizable": true,
        "title": "wallitor-gui",
        "transparent": true,
-        "width": 800,
+        "width": 950,
+        "height": 750,
        "decorations": false
      }
-    ]
+    ],
+    "security": {
+      "csp": null
+    }
  }
-}
+}
--- a/wallitor-gui/src/App.vue
+++ b/wallitor-gui/src/App.vue
@ -1,88 +1,22 @@
 <script setup lang="ts">
+import TitleBar from './components/TitleBar.vue';
 import { RouterLink, RouterView } from 'vue-router'
-import {invoke} from "@tauri-apps/api"
-import { appWindow } from '@tauri-apps/api/window'
-import SvgIcon from './components/SvgIcon.vue';
-import {ref} from 'vue'
+import { invoke } from "@tauri-apps/api"

-const maximized = ref(false);
+const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
+const html_node = document.getElementsByTagName("html")[0]
+if (isDarkTheme.matches) html_node.classList.add("dark")
+isDarkTheme.addEventListener('change', (event) => {
+  if (event.matches) {
+    html_node.classList.add("dark")
+  } else {
+    html_node.classList.remove("dark")
+  }
+});

-function minimize(){
-  appWindow.minimize()
-}
-
-function toggleMaximize(){
-  appWindow.toggleMaximize();
-  maximized.value = !maximized.value;
-}
-
-function close(){
-  appWindow.close()
-}
 </script>

 <template>
-  <div data-tauri-drag-region class="titlebar">
-  <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
-    <svg-icon name="window-minimize" color="red"></svg-icon>
-  </div>
-  <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
-    <template v-if="maximized">
-      <svg-icon name="window-maximized"></svg-icon>
-    </template>
-    <template v-else>
-      <svg-icon name="window-maximize" width="13px"></svg-icon>
-    </template>
-  </div>
-  <div class="titlebar-button" id="titlebar-close" @click="close">
-    <svg-icon name="window-close"></svg-icon>
-  </div>
-</div>
+  <title-bar mode="win"></title-bar>
  <router-view></router-view>
 </template>
-
-<style>
-html{
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-body{
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-#app{
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-</style>
-<style scoped>
-.titlebar {
-  height: 30px;
-  background: #141414;
-  user-select: none;
-  display: flex;
-  justify-content: flex-end;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-.titlebar-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-}
-.titlebar-button:hover {
-  background: #5bbec3;
-}
-</style>
--- a/wallitor-gui/src/assets/vw.png
+++ b/wallitor-gui/src/assets/vw.png
--- a/wallitor-gui/src/components/ApplyBar.vue
+++ b/wallitor-gui/src/components/ApplyBar.vue
@ -0,0 +1,153 @@
+<template>
+    <div class="apply-bar-mask" v-if="visible_" @click.self="handleClose">
+        <div ref="bg" class="apply-bar-bg" :class="{
+            'apply-bar-left': position == 'left',
+            'apply-bar-right': position == 'right'
+        }">
+            <div class="apply-bar-content">
+                <img :src="config.img">
+                {{ config.name }}
+            </div>
+            <div class="apply-bar-close" @click="handleClose">
+                <svg-icon name="close" color="var(--text-color)"></svg-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineExpose, defineEmits, defineModel, watch, ref, type PropType } from 'vue';
+type Position = "left" | "right";
+interface Config {
+    name: string,
+    img: string
+}
+const props = defineProps({
+    position: {
+        type: String as PropType<Position>,
+        default: "right"
+    },
+
+})
+const visible = defineModel<boolean>();
+const emit = defineEmits(["submit"]);
+const visible_ = ref(false);
+const config = ref<Config>({
+    name: "",
+    img: ""
+})
+const bg = ref<HTMLDivElement | null>(null);
+defineExpose({ open })
+watch(() => visible.value, (val, _) => {
+    if (val) {
+        visible_.value = true;
+    }
+    else {
+        if (bg.value) bg.value.style.animation = `apply-bar-disappear-${props.position} .3s ease-in`;
+        setTimeout(() => { visible_.value = false }, 295);
+    }
+})
+
+function handleClose() {
+    visible.value = false;
+}
+
+function open(conFig: Config) {
+    config.value = conFig;
+    console.log(conFig)
+    visible.value = true;
+}
+</script>
+
+<style>
+@keyframes apply-bar-appear-left {
+    0% {
+        transform: translate(-100%, -50%);
+    }
+
+    100% {
+        transform: translate(0, -50%);
+    }
+}
+
+@keyframes apply-bar-appear-right {
+    0% {
+        transform: translate(100%, -50%);
+    }
+
+    100% {
+        transform: translate(0, -50%);
+    }
+}
+
+@keyframes apply-bar-disappear-left {
+    0% {
+        opacity: 100%;
+        transform: translate(0, -50%);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(-100%, -50%);
+    }
+}
+
+@keyframes apply-bar-disappear-right {
+    0% {
+        opacity: 100%;
+        transform: translate(0, -50%);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(100%, -50%);
+    }
+}
+
+.apply-bar-mask {
+    z-index: 500;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.apply-bar-bg {
+    border: solid var(--bd-color) 1px;
+    border: solid 1px var(--bd-color);
+    backdrop-filter: blur(30px) saturate(180%);
+    box-shadow: var(--shadow-edge-glow), var(--shadow);
+    background-color: var(--bg-color-alpha-darker);
+    border-radius: 8px;
+    transform: translate(0, -50%);
+    top: calc(50% + 15px);
+    position: absolute;
+    width: 50%;
+    height: 85%;
+}
+
+.apply-bar-content {
+    padding: 20px;
+    height: calc(100% - 40px);
+    overflow: auto;
+}
+
+.apply-bar-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 15px;
+    cursor: pointer;
+}
+
+.apply-bar-left {
+    left: 10px;
+    animation: apply-bar-appear-left .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+
+.apply-bar-right {
+    right: 10px;
+    animation: apply-bar-appear-right .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+</style>
--- a/wallitor-gui/src/components/CDialog.vue
+++ b/wallitor-gui/src/components/CDialog.vue
@ -0,0 +1,105 @@
+<template>
+    <div id="mask" v-if="visible_" @click.self="handleClose">
+        <div ref="bg" id="bg">
+            <div id="content">
+                <slot name="content"></slot>
+            </div>
+            <div id="close" @click="handleClose">
+                <el-icon :size="25">
+                    <Close />
+                </el-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick } from 'vue'
+import "@/style/cui.scss"
+
+export default defineComponent({
+    name: "CDiaLog",
+    props: {
+        "visible": {
+            type: Boolean,
+            default: false
+        },
+        width: String,
+        height: String
+    },
+    data() {
+        return {
+            visible_: false
+        }
+    },
+    watch: {
+        visible(val, _) {
+            if (val) {
+                this.visible_ = true;
+                nextTick(() => this.resize())
+            }
+            else {
+                const bg = this.$refs.bg as HTMLElement;
+                if (bg) bg.style.animation = "cui-dialog-disappear .3s ease-in";
+                setTimeout(() => { this.visible_ = false }, 295);
+            }
+        }
+    },
+    methods: {
+        handleClose() {
+            this.$emit("update:visible", false)
+        },
+        resize() {
+            const bg = this.$refs.bg as HTMLElement;
+            if (bg) {
+                bg.style.width = this.width || "500px";
+                bg.style.height = this.height || "300px";
+            }
+        }
+    },
+    mounted() {
+        if (this.visible) nextTick(() => this.resize());
+    },
+})
+</script>
+
+<style lang="scss" scoped>
+#mask {
+    z-index: 500;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    animation: cui-dialog-blur .6s;
+}
+
+#bg {
+    position: absolute;
+    width: 500px;
+    height: 300px;
+    max-width: 80%;
+    border: solid var(--bd-color) 1px;
+    background-color: var(--bg-color-solid);
+    border-radius: 8px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    animation: cui-dialog-appear .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+
+#content {
+    padding: 20px;
+    height: calc(100% - 40px);
+    overflow: auto;
+}
+
+#close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 15px;
+    cursor: pointer;
+}
+</style>
--- a/wallitor-gui/src/components/ItemCard.vue
+++ b/wallitor-gui/src/components/ItemCard.vue
@ -0,0 +1,87 @@
+<template>
+    <div class="item-card">
+        <div class="item-card-main">
+            <img :src="config.img" />
+        </div>
+        <div class="item-card-title">
+            {{ config.name }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import type { PropType } from 'vue'
+
+interface Config {
+    name: string,
+    img: string
+}
+
+const props = defineProps({
+    config: {
+        type: Object as PropType<Config>,
+        required: true
+    }
+})
+</script>
+
+<style>
+:root {
+    --item-card-size: 200px;
+    --item-card-margin: 20px;
+}
+
+.item-card {
+    text-align: center;
+    width: var(--item-card-size);
+    height: var(--item-card-size);
+    margin-right: var(--item-card-margin);
+    margin-bottom: var(--item-card-margin);
+    position: relative;
+    overflow: hidden;
+    transition: .3s;
+    border-radius: 10px;
+    box-shadow: 0 0 1px 6px transparent;
+}
+
+.item-card-main {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.item-card:hover {
+    box-shadow: var(--shadow-edge-glow), var(--shadow);
+    cursor: pointer;
+    transform: scale(1.03);
+    box-shadow: 0 0 2px 5px rgba(177, 177, 177, 0.151);
+}
+
+.item-card:active {
+    transform: scale(0.95);
+}
+
+.item-card:hover .item-card-main {
+    box-shadow: inset 0px -100px 50px -50px rgba(0, 0, 0, 0.7);
+}
+
+.item-card:hover .item-card-title {
+    bottom: 0;
+}
+
+.item-card-main img {
+    width: 100%;
+    height: 100%;
+}
+
+.item-card-title {
+    position: absolute;
+    bottom: -40px;
+    right: 5px;
+    transition: .3s;
+    font-size: 30px;
+    font-weight: 400;
+    color: var(--text-color);
+}
+</style>
--- a/wallitor-gui/src/components/TitleBar.vue
+++ b/wallitor-gui/src/components/TitleBar.vue
@ -0,0 +1,163 @@
+<template>
+  <div data-tauri-drag-region class="titlebar colbox">
+    <template v-if="mode == 'mac'">
+      <div class="titlebar-button-wrapper colbox">
+        <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
+          <svg-icon name="window-minimize" color="red"></svg-icon>
+        </div>
+        <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
+          <template v-if="maximized">
+            <svg-icon name="window-maximized"></svg-icon>
+          </template>
+          <template v-else>
+            <svg-icon name="window-maximize" width="13px"></svg-icon>
+          </template>
+        </div>
+        <div class="titlebar-button" id="titlebar-close" @click="close">
+          <svg-icon name="window-close"></svg-icon>
+        </div>
+      </div>
+    </template>
+    <div class="titlebar-icon-wrapper colbox">
+      <img src="@/assets/vw.png" class="titlebar-icon">
+      <div class="titlebar-icon-title">
+        Wallitor
+      </div>
+    </div>
+    <template v-if="mode == 'win'">
+      <div class="titlebar-button-wrapper colbox">
+        <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
+          <div class="titlebar-button-rect">
+            <svg-icon name="window-minimize" :width="button_size_default" :height="button_size_default"></svg-icon>
+          </div>
+        </div>
+        <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
+          <template v-if="maximized">
+            <div class="titlebar-button-rect">
+              <svg-icon name="window-maximized" :width="button_size_alter" :height="button_size_alter"></svg-icon>
+            </div>
+          </template>
+          <template v-else>
+            <div class="titlebar-button-rect">
+              <svg-icon name="window-maximize" :width="button_size_alter" :height="button_size_alter"></svg-icon>
+            </div>
+          </template>
+        </div>
+        <div class="titlebar-button" id="titlebar-close" @click="close">
+          <div class="titlebar-button-rect">
+            <svg-icon name="window-close" :width="button_size_default" :height="button_size_default"></svg-icon>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue';
+import { ref, defineProps } from 'vue'
+import type { PropType } from 'vue'
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+const appWindow = getCurrentWebviewWindow();
+
+type Mode = "win" | "mac";
+
+const maximized = ref(false);
+const button_size_default = ref("18px");
+const button_size_alter = ref("15px")
+const props = defineProps({
+  mode: {
+    type: String as PropType<Mode>,
+    default: "win"
+  }
+})
+
+function minimize() {
+  console.log(111)
+  appWindow.minimize()
+}
+
+function toggleMaximize() {
+  appWindow.toggleMaximize();
+  maximized.value = !maximized.value;
+}
+
+function close() {
+  appWindow.close()
+}
+</script>
+
+<style>
+.titlebar {
+  position: relative;
+  justify-content: space-between;
+  height: var(--titlebar-height);
+  padding: 5px;
+  color: var(--text-color);
+}
+
+.titlebar-icon-wrapper {
+  height: 100%;
+  width: fit-content;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.titlebar-icon-title {
+  font-weight: 500;
+  font-size: 20px;
+  margin-left: 10px;
+}
+
+.titlebar-icon {
+  height: calc(var(--titlebar-height) - 10px);
+}
+
+.titlebar-button-wrapper {
+  height: var(--titlebar-height);
+  width: fit-content;
+  place-self: center;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--titlebar-height);
+  border: solid 1px var(--bd-color);
+  backdrop-filter: blur(10px) saturate(180%);
+  box-shadow: var(--shadow-edge-glow), var(--shadow);
+  background-color: var(--bg-color-alpha);
+}
+
+.titlebar-button {
+  height: calc(var(--titlebar-height) - 6px);
+  width: calc(var(--titlebar-height) - 6px);
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.titlebar-button-rect {
+  height: 34px;
+  width: 34px;
+  border-radius: 100%;
+  transition: .3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#titlebar-minimize {
+  padding-left: 5px;
+}
+
+#titlebar-close {
+  padding-right: 5px;
+}
+
+#titlebar-minimize .titlebar-button-rect:hover,
+#titlebar-maximize .titlebar-button-rect:hover {
+  background-color: var(--bg-hover-fill);
+}
+
+#titlebar-close .titlebar-button-rect:hover {
+  background-color: var(--bg-hover-fill-close);
+}
+</style>
--- a/wallitor-gui/src/main.ts
+++ b/wallitor-gui/src/main.ts
@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import "virtual:svg-icons-register";
 import globalComponents from '@/components/install'
+import "@/style/global.css"

 const app = createApp(App)

--- a/wallitor-gui/src/style/entry.css
+++ b/wallitor-gui/src/style/entry.css
@ -0,0 +1,19 @@
+.entry-left{
+    transform: translateX(20px);
+    opacity: 0;
+}
+
+.entry-right{
+    transform: translateX(-20px);
+    opacity: 0;
+}
+
+.entry-up{
+    transform: translateY(20px);
+    opacity: 0;
+}
+
+.entry-down{
+    transform: translateY(-20px);
+    opacity: 0;
+}
--- a/wallitor-gui/src/style/global.css
+++ b/wallitor-gui/src/style/global.css
@ -0,0 +1,67 @@
+.colbox{
+    display: flex;
+    flex-direction: row;
+}
+
+.rowbox{
+    display: flex;
+    flex-direction: column;
+}
+
+html {
+    --text-shadow-color: #b3b3b3ae;
+    --bg-color-solid: #fcfcfc;
+    --bg-color-alter: #ffffff;
+    --bg-color: #ffffffae;
+    --text-color: #1c1c1c;
+    --bd-color: #bbbbbbce;
+    --login-button-bg: #9acdff;
+    --login-button-bd: #c8c8c8;
+    --login-button-hover: #7db7f0;
+    --branch-viewing-color: rgb(122, 212, 215);
+    --branch-viewing-hover-color: rgb(102, 177, 180);
+    --delete-box-left-border: #f56c6c;
+    --delete-box-bg: #f56c6c42;
+    --delete-box-title: #511f1f;
+    --delete-box-text: black;
+}
+
+html.dark {
+    --text-shadow-color: #686868af;
+    --bg-color-solid: #191919;
+    --bg-color-alter: #2d2d2d;
+    --bg-color: #2a2a2ace;
+    --text-color: #c0c0c0;
+    --bd-color: #7f7f7f7c;
+    --titlebar-height: 40px;
+    --shadow-edge-glow: inset 1px 1px 1px -.5px rgba(255, 255, 255, .12), inset -1px -1px 1px -.5px rgba(255, 255, 255, .04), inset 0 0 4px rgba(255, 255, 255, .06);
+    --shadow: 0 10px 15px -3px rgb(0 0 0 / .2), 0 4px 6px -4px rgb(0 0 0 / .16);
+    --bg-color-alpha: hsl(230 12% 14% / .68);
+    --bg-color-alpha-darker: hsl(230 12% 14% / .93);
+    --bg-hover-fill: rgb(131 131 145 / 24%);
+    --bg-hover-fill-close: rgba(211, 86, 86, 0.579);
+}
+
+html {
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  #app {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
--- a/wallitor-gui/src/ts/entry.ts
+++ b/wallitor-gui/src/ts/entry.ts
@ -0,0 +1,53 @@
+import "@/style/entry.css"
+
+const sep_time = 200;
+const default_duration = 500;
+
+export function entry(way:string,element:HTMLElement,sep:number=sep_time,callback?:()=>void):void{
+    const childs = element.children;
+    for(let i = 0;i < childs.length;i++){
+        const child = childs[i] as HTMLElement;
+        child.style.transition = "0s";
+        child.classList.add(`entry-${way}`)   
+        setTimeout(() => {
+            child.style.transition = `${default_duration/1000}s`
+            child.classList.remove(`entry-${way}`)
+        }, (i+1)*sep);
+    }
+    if(typeof callback === "function"){
+        setTimeout(callback,childs.length*sep+500)
+    }
+}
+
+export function leave(way:string,element:HTMLElement,sep:number=sep_time,callback?:()=>void):void{
+    const childs = element.children;
+    for(let i = 0;i < childs.length;i++){
+        const child = childs[i] as HTMLElement;
+        setTimeout(() => {
+            child.style.transition = `${default_duration/1000}s`
+            child.classList.add(`entry-${way}`)
+        }, (childs.length - i)*sep);
+    }
+    if(typeof callback === "function"){
+        setTimeout(callback,childs.length*sep+500)
+    }
+}
+
+export function fadeOut(element:HTMLElement,duration:number=default_duration,callback?:()=>void):void{
+    element.style.transition = `${duration/1000}s`
+    element.style.opacity = "0";
+    if(typeof callback === "function"){
+        setTimeout(callback,duration);
+    }
+}
+
+export function fadeIn(element:HTMLElement,duration:number=default_duration,callback?:()=>void):void{
+    element.style.transition = `${duration/1000}s`
+    element.style.opacity = "0";
+    setTimeout(()=>{
+        element.style.opacity = "1";
+        if(typeof callback === "function"){
+            setTimeout(callback,duration);
+        }
+    },0)
+}
--- a/wallitor-gui/src/views/HomeView.vue
+++ b/wallitor-gui/src/views/HomeView.vue
@ -1,10 +1,50 @@
 <script setup lang="ts">
+import ItemCard from '@/components/ItemCard.vue';
+import ApplyBar from '@/components/ApplyBar.vue';
+import { ref, onMounted } from 'vue';
+import { entry } from '@/ts/entry';
+interface Config {
+  name: string,
+  img: string
+}
+const items = ref<Config[]>([{
+  name: "test1",
+  img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+}, {
+  name: "test2",
+  img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+}])
+const apply_bar_visible = ref(false);
+const applyBar = ref<InstanceType<typeof ApplyBar> | null>(null);
+
+onMounted(() => {
+  const main = document.querySelector(".home-main") as HTMLElement;
+  setTimeout(() => {
+    entry("up", main, 20);
+  })
+})
+
+function openCard(config: Config) {
+  if (applyBar.value) applyBar.value.open(config);
+}
 </script>

 <template>
-  <main>
-    <div>
-      111
-    </div>
+  <main class="colbox home-main">
+    <ItemCard v-for="(item, index) in items" :key="index" :config="item" @click="openCard(item)"></ItemCard>
  </main>
+  <ApplyBar v-model="apply_bar_visible" ref="applyBar"></ApplyBar>
 </template>
+
+<style>
+.home-main {
+  width: calc(100% - 40px);
+  height: 100%;
+  overflow-y: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+</style>
Author	SHA1	Message	Date
cast1e	e5882e8532	Update tauri to 2.0rc	2024-09-26 16:35:08 +08:00
cast1e	dadec49e49	FrontEnd Edited	2024-09-26 11:32:50 +08:00
				`@ -0,0 +1 @@`
				`{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-maximize","core:window:allow-unmaximize","core:window:allow-toggle-maximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-start-dragging"]}}`