Compare commits
2 Commits
3aae49057c
...
e5882e8532
| Author | SHA1 | Date |
|---|---|---|
cast1e
|
e5882e8532 | |
|
cast1e
|
dadec49e49 |
|
|
@ -59,13 +59,14 @@ BOOL playerInstance::showWindow(LPCWSTR lpParameter) {
|
||||||
PROCESS_INFORMATION pi{ 0 };
|
PROCESS_INFORMATION pi{ 0 };
|
||||||
if (CreateProcess(this->config.ffpath.c_str(), (LPWSTR)lpParameter, 0, 0, 0, CREATE_NO_WINDOW, 0, 0, &si, &pi)) {
|
if (CreateProcess(this->config.ffpath.c_str(), (LPWSTR)lpParameter, 0, 0, 0, CREATE_NO_WINDOW, 0, 0, &si, &pi)) {
|
||||||
//Sleep(600);//等待视频播放器启动完成
|
//Sleep(600);//等待视频播放器启动完成
|
||||||
std::this_thread::sleep_for(std::chrono::milliseconds(300));
|
|
||||||
//HWND hProgman = FindWindow(L"Progman", 0);// 找到PI窗口
|
//HWND hProgman = FindWindow(L"Progman", 0);// 找到PI窗口
|
||||||
HWND hProgman = findWindowTimeOut(L"Progman",2000);
|
HWND hProgman = findWindowTimeOut(L"Progman",2000);
|
||||||
|
std::this_thread::sleep_for(std::chrono::milliseconds(300));
|
||||||
if (hProgman == nullptr) return FALSE;
|
if (hProgman == nullptr) return FALSE;
|
||||||
SendMessageTimeout(hProgman, 0x052c, 0, 0, 0, 300, 0);// 给它发特殊消息
|
SendMessageTimeout(hProgman, 0x052c, 0, 0, 0, 300, 0);// 给它发特殊消息
|
||||||
//this->hFfplay = FindWindowW(L"SDL_app", 0);// 找到视频窗口
|
//this->hFfplay = FindWindowW(L"SDL_app", 0);// 找到视频窗口
|
||||||
this->hFfplay = findWindowTimeOut(L"SDL_app", 2000);
|
this->hFfplay = findWindowTimeOut(L"SDL_app", 2000);
|
||||||
|
std::this_thread::sleep_for(std::chrono::milliseconds(300));
|
||||||
if (this->hFfplay == nullptr) return FALSE;
|
if (this->hFfplay == nullptr) return FALSE;
|
||||||
SetParent(hFfplay, hProgman);// 将视频窗口设苦为PM的子窗口
|
SetParent(hFfplay, hProgman);// 将视频窗口设苦为PM的子窗口
|
||||||
int systemWidth = GetSystemMetrics(0);
|
int systemWidth = GetSystemMetrics(0);
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,13 @@
|
||||||
"format": "prettier --write src/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tauri-apps/api": "^1.6.0",
|
"@tauri-apps/api": "2.0.0-rc.0",
|
||||||
"vue": "^3.4.29",
|
"vue": "^3.4.29",
|
||||||
"vue-router": "^4.3.3"
|
"vue-router": "^4.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rushstack/eslint-patch": "^1.8.0",
|
"@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",
|
"@tsconfig/node20": "^20.1.4",
|
||||||
"@types/node": "^20.14.5",
|
"@types/node": "^20.14.5",
|
||||||
"@vitejs/plugin-vue": "^5.0.5",
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@ importers:
|
||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@tauri-apps/api':
|
'@tauri-apps/api':
|
||||||
specifier: ^1.6.0
|
specifier: 2.0.0-rc.0
|
||||||
version: 1.6.0
|
version: 2.0.0-rc.0
|
||||||
vue:
|
vue:
|
||||||
specifier: ^3.4.29
|
specifier: ^3.4.29
|
||||||
version: 3.5.8(typescript@5.4.5)
|
version: 3.5.8(typescript@5.4.5)
|
||||||
|
|
@ -22,8 +22,8 @@ importers:
|
||||||
specifier: ^1.8.0
|
specifier: ^1.8.0
|
||||||
version: 1.10.4
|
version: 1.10.4
|
||||||
'@tauri-apps/cli':
|
'@tauri-apps/cli':
|
||||||
specifier: ^1.6.2
|
specifier: 2.0.0-rc.16
|
||||||
version: 1.6.2
|
version: 2.0.0-rc.16
|
||||||
'@tsconfig/node20':
|
'@tsconfig/node20':
|
||||||
specifier: ^20.1.4
|
specifier: ^20.1.4
|
||||||
version: 20.1.4
|
version: 20.1.4
|
||||||
|
|
@ -530,76 +530,76 @@ packages:
|
||||||
'@rushstack/eslint-patch@1.10.4':
|
'@rushstack/eslint-patch@1.10.4':
|
||||||
resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
|
resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
|
||||||
|
|
||||||
'@tauri-apps/api@1.6.0':
|
'@tauri-apps/api@2.0.0-rc.0':
|
||||||
resolution: {integrity: sha512-rqI++FWClU5I2UBp4HXFvl+sBWkdigBkxnpJDQUWttNyG7IZP4FwQGhTNL5EOw0vI8i6eSAJ5frLqO7n7jbJdg==}
|
resolution: {integrity: sha512-v454Qs3REHc3Za59U+/eSmBsdmF+3NE5+76+lFDaitVqN4ZglDHENDaMARYKGJVZuxiSkzyqG0SeG7lLQjVkPA==}
|
||||||
engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
|
engines: {node: '>= 18.18', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
|
||||||
|
|
||||||
'@tauri-apps/cli-darwin-arm64@1.6.2':
|
'@tauri-apps/cli-darwin-arm64@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-6mdRyf9DaLqlZvj8kZB09U3rwY+dOHSGzTZ7+GDg665GJb17f4cb30e8dExj6/aghcsOie9EGpgiURcDUvLNSQ==}
|
resolution: {integrity: sha512-lISZU4gG0c9PbY7h/j/gW7nJLxZEygNBrYEET6zN8R99Znf5rSO+CfjenaMcJUUj6yTAd8gzdakRpLqNSAWegA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
|
|
||||||
'@tauri-apps/cli-darwin-x64@1.6.2':
|
'@tauri-apps/cli-darwin-x64@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-PLxZY5dn38H3R9VRmBN/l0ZDB5JFanCwlK4rmpzDQPPg3tQmbu5vjSCP6TVj5U6aLKsj79kFyULblPr5Dn9+vw==}
|
resolution: {integrity: sha512-D9uxPCxpyYcTSQulJGFX3POAKPOJd8WcWHFH8x6YVM1cIx6EWRXIE1sZnPUOjFr7qCg+bSdYdr8/BFHcZGcApQ==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-arm-gnueabihf@1.6.2':
|
'@tauri-apps/cli-linux-arm-gnueabihf@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-xnpj4BLeeGOh5I/ewCQlYJZwHH0CBNBN+4q8BNWNQ9MKkjN9ST366RmHRzl2ANNgWwijOPxyce7GiUmvuH8Atw==}
|
resolution: {integrity: sha512-WsVdKm4D1I1XV8I9yRnmOINZRwwWfh6xcLV3m19+B9g6TohK8RkRxWfxvs3TLQlWOLQ6lo8BzS9rzXB+KtjDpg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-arm64-gnu@1.6.2':
|
'@tauri-apps/cli-linux-arm64-gnu@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-uaiRE0vE2P+tdsCngfKt+7yKr3VZXIq/t3w01DzSdnBgHSp0zmRsRR4AhZt7ibvoEgA8GzBP+eSHJdFNZsTU9w==}
|
resolution: {integrity: sha512-2jpZDagNs6rrqposHJihHBayttgOl5aB2+bYiVEC6ye+haiFtmYmpdaPOaVIw+YVQs6lepf5PVrisCoU9DmYsg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
libc: [glibc]
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-arm64-musl@1.6.2':
|
'@tauri-apps/cli-linux-arm64-musl@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-o9JunVrMrhqTBLrdvEbS64W0bo1dPm0lxX51Mx+6x9SmbDjlEWGgaAHC3iKLK9khd5Yu1uO1e+8TJltAcScvmw==}
|
resolution: {integrity: sha512-SNEDcB+sWOls/B0a+UpUHVa/oegvlXXKYWsTxuXtgWIr5VbWG7rXLZ3fZpLLP3SpRVGTGTnABcyqshFbWSqqKQ==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
libc: [musl]
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-x64-gnu@1.6.2':
|
'@tauri-apps/cli-linux-x64-gnu@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-jL9f+o61DdQmNYKIt2Q3BA8YJ+hyC5+GdNxqDf7j5SoQ85j//YfUWbmp9ZgsPHVBxgSGZVvgGMNvf64Ykp0buQ==}
|
resolution: {integrity: sha512-Zsq29MM1ooeH1+chQBa7ffDFnzAZebBBFdsvs4e05tS1H8gn4oKE+PSMn9p/okzVXykEk9ri2/n7BG1XFeifMA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
libc: [glibc]
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-x64-musl@1.6.2':
|
'@tauri-apps/cli-linux-x64-musl@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-xsa4Pu9YMHKAX0J8pIoXfN/uhvAAAoECZDixDhWw8zi57VZ4QX28ycqolS+NscdD9NAGSgHk45MpBZWdvRtvjQ==}
|
resolution: {integrity: sha512-g+pwSuis2YMxhJJ/pJYwp/Nps5CWvlv/5MV5UfDvClkCkeAyzIqVX+HbBLPcs5S0CePUQNeP0j4d4jBWUqZZQg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
libc: [musl]
|
||||||
|
|
||||||
'@tauri-apps/cli-win32-arm64-msvc@1.6.2':
|
'@tauri-apps/cli-win32-arm64-msvc@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-eJtUOx2UFhJpCCkm5M5+4Co9JbjvgIHTdyS/hTSZfOEdT58CNEGVJXMA39FsSZXYoxYPE+9K7Km6haMozSmlxw==}
|
resolution: {integrity: sha512-PpPqdMTwJSDAK4KnNjvh77ShSkY+7pih1f6e50EtXar8bjC17e3XcEqFhDNne5mxEVTLYhibs6p1JLPad0ZjRA==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
'@tauri-apps/cli-win32-ia32-msvc@1.6.2':
|
'@tauri-apps/cli-win32-ia32-msvc@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-9Jwx3PrhNw3VKOgPISRRXPkvoEAZP+7rFRHXIo49dvlHy2E/o9qpWi1IntE33HWeazP6KhvsCjvXB2Ai4eGooA==}
|
resolution: {integrity: sha512-io2yIcEcG7YLP+9n13NbilB93SjcB7jIl8GbURC4XZT4/4t9D1PWHpJr5hySVsGRLCz5e8NzwC5RlnenNzmpPQ==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [ia32]
|
cpu: [ia32]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
'@tauri-apps/cli-win32-x64-msvc@1.6.2':
|
'@tauri-apps/cli-win32-x64-msvc@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-5Z+ZjRFJE8MXghJe1UXvGephY5ZcgVhiTI9yuMi9xgX3CEaAXASatyXllzsvGJ9EDaWMEpa0PHjAzi7LBAWROw==}
|
resolution: {integrity: sha512-Rfkmxe3k+cBVA/kVYt8O25QrQqWKJlH9AiH7Q3C6xBzzG9PCSRMBszCp+JhBF8jhVlwNmOBv6UG+lm85kspwGg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
'@tauri-apps/cli@1.6.2':
|
'@tauri-apps/cli@2.0.0-rc.16':
|
||||||
resolution: {integrity: sha512-zpfZdxhm20s7d/Uejpg/T3a9sqLVe3Ih2ztINfy8v6iLw9Ohowkb9g+agZffYKlEWfOSpmCy69NFyBLj7OZL0A==}
|
resolution: {integrity: sha512-wdjZg/M3dcxiqgWG6VRnABpX0dYxRww93t0d1MYoZxFDrnyoUz5kYwFQ0v4J9u0qenEgskjoypvon7V/Nj9qrg==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
|
||||||
|
|
@ -2893,50 +2893,50 @@ snapshots:
|
||||||
|
|
||||||
'@rushstack/eslint-patch@1.10.4': {}
|
'@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
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-darwin-x64@1.6.2':
|
'@tauri-apps/cli-darwin-x64@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-arm-gnueabihf@1.6.2':
|
'@tauri-apps/cli-linux-arm-gnueabihf@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-arm64-gnu@1.6.2':
|
'@tauri-apps/cli-linux-arm64-gnu@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-arm64-musl@1.6.2':
|
'@tauri-apps/cli-linux-arm64-musl@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-x64-gnu@1.6.2':
|
'@tauri-apps/cli-linux-x64-gnu@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-linux-x64-musl@1.6.2':
|
'@tauri-apps/cli-linux-x64-musl@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-win32-arm64-msvc@1.6.2':
|
'@tauri-apps/cli-win32-arm64-msvc@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-win32-ia32-msvc@1.6.2':
|
'@tauri-apps/cli-win32-ia32-msvc@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli-win32-x64-msvc@1.6.2':
|
'@tauri-apps/cli-win32-x64-msvc@2.0.0-rc.16':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
'@tauri-apps/cli@1.6.2':
|
'@tauri-apps/cli@2.0.0-rc.16':
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
'@tauri-apps/cli-darwin-arm64': 1.6.2
|
'@tauri-apps/cli-darwin-arm64': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-darwin-x64': 1.6.2
|
'@tauri-apps/cli-darwin-x64': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-linux-arm-gnueabihf': 1.6.2
|
'@tauri-apps/cli-linux-arm-gnueabihf': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-linux-arm64-gnu': 1.6.2
|
'@tauri-apps/cli-linux-arm64-gnu': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-linux-arm64-musl': 1.6.2
|
'@tauri-apps/cli-linux-arm64-musl': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-linux-x64-gnu': 1.6.2
|
'@tauri-apps/cli-linux-x64-gnu': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-linux-x64-musl': 1.6.2
|
'@tauri-apps/cli-linux-x64-musl': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-win32-arm64-msvc': 1.6.2
|
'@tauri-apps/cli-win32-arm64-msvc': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-win32-ia32-msvc': 1.6.2
|
'@tauri-apps/cli-win32-ia32-msvc': 2.0.0-rc.16
|
||||||
'@tauri-apps/cli-win32-x64-msvc': 1.6.2
|
'@tauri-apps/cli-win32-x64-msvc': 2.0.0-rc.16
|
||||||
|
|
||||||
'@trysound/sax@0.2.0': {}
|
'@trysound/sax@0.2.0': {}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -12,14 +12,13 @@ rust-version = "1.60"
|
||||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
[build-dependencies]
|
[build-dependencies]
|
||||||
tauri-build = { version = "1.5.5", features = [] }
|
tauri-build = { version = "2.0.0-rc", features = [] }
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
serde_json = "1.0"
|
serde_json = "1.0"
|
||||||
serde = { version = "1.0", features = ["derive"] }
|
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"] }
|
tauri = { version = "2.0.0-rc", features = [] }
|
||||||
window-vibrancy = "0.4"
|
window-vibrancy = "0.5.2"
|
||||||
window-shadows = "0.2.2"
|
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
|
# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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"]}}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,11 +1,10 @@
|
||||||
use tauri::{App, Manager};
|
use tauri::{App, Manager};
|
||||||
use window_vibrancy::{self, NSVisualEffectMaterial};
|
use window_vibrancy::{self, NSVisualEffectMaterial};
|
||||||
use window_shadows::set_shadow;
|
|
||||||
|
|
||||||
|
|
||||||
/// setup
|
/// setup
|
||||||
pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>> {
|
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 下执行
|
// 仅在 macOS 下执行
|
||||||
#[cfg(target_os = "macos")]
|
#[cfg(target_os = "macos")]
|
||||||
window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI)
|
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 下执行
|
// 仅在 windows 下执行
|
||||||
#[cfg(target_os = "windows")]
|
#[cfg(target_os = "windows")]
|
||||||
if let Err(_) = window_vibrancy::apply_mica(&win, None){
|
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(())
|
Ok(())
|
||||||
}
|
}
|
||||||
|
|
@ -3,77 +3,62 @@
|
||||||
"build": {
|
"build": {
|
||||||
"beforeBuildCommand": "npm run build",
|
"beforeBuildCommand": "npm run build",
|
||||||
"beforeDevCommand": "npm run dev",
|
"beforeDevCommand": "npm run dev",
|
||||||
"devPath": "http://localhost:5173",
|
"frontendDist": "../dist",
|
||||||
"distDir": "../dist"
|
"devUrl": "http://localhost:5173"
|
||||||
},
|
},
|
||||||
"package": {
|
"bundle": {
|
||||||
"productName": "wallitor-gui",
|
"active": true,
|
||||||
"version": "0.1.0"
|
"category": "DeveloperTool",
|
||||||
},
|
"copyright": "",
|
||||||
"tauri": {
|
"targets": "all",
|
||||||
"allowlist": {
|
"externalBin": [],
|
||||||
"all": false,
|
"icon": [
|
||||||
"window": {
|
"icons/32x32.png",
|
||||||
"all": false,
|
"icons/128x128.png",
|
||||||
"close": true,
|
"icons/128x128@2x.png",
|
||||||
"hide": true,
|
"icons/icon.icns",
|
||||||
"show": true,
|
"icons/icon.ico"
|
||||||
"maximize": true,
|
],
|
||||||
"minimize": true,
|
"windows": {
|
||||||
"unmaximize": true,
|
"certificateThumbprint": null,
|
||||||
"unminimize": true,
|
"digestAlgorithm": "sha256",
|
||||||
"startDragging": true
|
"timestampUrl": ""
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"bundle": {
|
"longDescription": "",
|
||||||
"active": true,
|
"macOS": {
|
||||||
"category": "DeveloperTool",
|
"entitlements": null,
|
||||||
"copyright": "",
|
"exceptionDomain": "",
|
||||||
|
"frameworks": [],
|
||||||
|
"providerShortName": null,
|
||||||
|
"signingIdentity": null
|
||||||
|
},
|
||||||
|
"resources": [],
|
||||||
|
"shortDescription": "",
|
||||||
|
"linux": {
|
||||||
"deb": {
|
"deb": {
|
||||||
"depends": []
|
"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
|
"productName": "wallitor-gui",
|
||||||
},
|
"mainBinaryName": "wallitor-gui",
|
||||||
"updater": {
|
"version": "0.1.0",
|
||||||
"active": false
|
"identifier": "com.tauri.dev",
|
||||||
},
|
"plugins": {},
|
||||||
|
"app": {
|
||||||
"windows": [
|
"windows": [
|
||||||
{
|
{
|
||||||
"fullscreen": false,
|
"fullscreen": false,
|
||||||
"height": 600,
|
|
||||||
"resizable": true,
|
"resizable": true,
|
||||||
"title": "wallitor-gui",
|
"title": "wallitor-gui",
|
||||||
"transparent": true,
|
"transparent": true,
|
||||||
"width": 800,
|
"width": 950,
|
||||||
|
"height": 750,
|
||||||
"decorations": false
|
"decorations": false
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
"security": {
|
||||||
|
"csp": null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,88 +1,22 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import TitleBar from './components/TitleBar.vue';
|
||||||
import { RouterLink, RouterView } from 'vue-router'
|
import { RouterLink, RouterView } from 'vue-router'
|
||||||
import {invoke} from "@tauri-apps/api"
|
import { invoke } from "@tauri-apps/api"
|
||||||
import { appWindow } from '@tauri-apps/api/window'
|
|
||||||
import SvgIcon from './components/SvgIcon.vue';
|
|
||||||
import {ref} from 'vue'
|
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div data-tauri-drag-region class="titlebar">
|
<title-bar mode="win"></title-bar>
|
||||||
<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>
|
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</template>
|
</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>
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -3,6 +3,7 @@ import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import "virtual:svg-icons-register";
|
import "virtual:svg-icons-register";
|
||||||
import globalComponents from '@/components/install'
|
import globalComponents from '@/components/install'
|
||||||
|
import "@/style/global.css"
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,50 @@
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main class="colbox home-main">
|
||||||
<div>
|
<ItemCard v-for="(item, index) in items" :key="index" :config="item" @click="openCard(item)"></ItemCard>
|
||||||
111
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
<ApplyBar v-model="apply_bar_visible" ref="applyBar"></ApplyBar>
|
||||||
</template>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue