master
cast1e 2024-09-26 07:32:31 +08:00
parent e8a3653499
commit 3aae49057c
17 changed files with 1991 additions and 21 deletions

View File

@ -32,6 +32,7 @@
"prettier": "^3.2.5",
"typescript": "~5.4.0",
"vite": "^5.3.1",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-devtools": "^7.3.1",
"vue-tsc": "^2.0.21"
}

File diff suppressed because it is too large Load Diff

View File

@ -76,6 +76,7 @@ dependencies = [
"serde_json",
"tauri",
"tauri-build",
"window-shadows",
"window-vibrancy",
]
@ -3413,6 +3414,18 @@ version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
[[package]]
name = "window-shadows"
version = "0.2.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "67ff424735b1ac21293b0492b069394b0a189c8a463fb015a16dea7c2e221c08"
dependencies = [
"cocoa 0.25.0",
"objc",
"raw-window-handle",
"windows-sys 0.48.0",
]
[[package]]
name = "window-vibrancy"
version = "0.4.3"

View File

@ -17,8 +17,9 @@ tauri-build = { version = "1.5.5", features = [] }
[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.8.0", features = [] }
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"
[features]
# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

View File

@ -4,7 +4,8 @@
mod setup;
fn main() {
tauri::Builder::default().setup(setup::init)
tauri::Builder::default()
.setup(setup::init)
.invoke_handler(tauri::generate_handler![test_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");

View File

@ -1,10 +1,11 @@
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();
// 仅在 macOS 下执行
#[cfg(target_os = "macos")]
window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI)
@ -12,7 +13,9 @@ pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>
// 仅在 windows 下执行
#[cfg(target_os = "windows")]
window_vibrancy::apply_acrylic(&win, Some((18, 18, 18, 125)))
.expect("Unsupported platform! 'apply_blur' is only supported on Windows");
if let Err(_) = window_vibrancy::apply_mica(&win, None){
window_vibrancy::apply_acrylic(&win, Some((10,10,10,180))).expect("Unsupport Blur Effect!")
}
set_shadow(&win, true).unwrap();
Ok(())
}

View File

@ -12,7 +12,18 @@
},
"tauri": {
"allowlist": {
"all": false
"all": false,
"window": {
"all": false,
"close": true,
"hide": true,
"show": true,
"maximize": true,
"minimize": true,
"unmaximize": true,
"unminimize": true,
"startDragging": true
}
},
"bundle": {
"active": true,
@ -59,8 +70,9 @@
"height": 600,
"resizable": true,
"title": "wallitor-gui",
"transparent": true,
"width": 800,
"transparent": true
"decorations": false
}
]
}

View File

@ -1,19 +1,88 @@
<script setup lang="ts">
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'
const maximized = ref(false);
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>
<router-view></router-view>
</template>
<style>
html{
background: transparent;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body{
background: transparent;
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>

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727275506845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8495" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" p-id="8496"></path></svg>

After

Width:  |  Height:  |  Size: 710 B

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727275608799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15290" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="15291"></path></svg>

After

Width:  |  Height:  |  Size: 529 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16 20v-9H4v9zm2-5v-2h2V4H8v5H6V4q0-.825.588-1.412T8 2h12q.825 0 1.413.588T22 4v9q0 .825-.587 1.413T20 15zM4 22q-.825 0-1.412-.587T2 20v-9q0-.825.588-1.412T4 9h12q.825 0 1.413.588T18 11v9q0 .825-.587 1.413T16 22zm6-6.5"/></svg>

After

Width:  |  Height:  |  Size: 341 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 14H4v-4h16"/></svg>

After

Width:  |  Height:  |  Size: 137 B

View File

@ -0,0 +1,30 @@
<template>
<svg :style="{ width, height}">
<use :href="prefix + name" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
defineProps({
prefix: {
type: String,
default: "#icon-"
},
name: {
type:String,
required:true
},
color: {
type: String,
default: "#ffffff"
},
width: {
type: String,
default: "16px"
},
height: {
type: String,
default: "16px"
}
});
</script>

View File

@ -0,0 +1,14 @@
import SvgIcon from "./SvgIcon.vue";
import type {App,Component} from 'vue'
const global_components:{[key:string]:Component} = {
SvgIcon
}
export default {
install(app:App){
Object.keys(global_components).forEach((key)=>{
app.component(key,global_components[key]);
})
}
}

View File

@ -1,11 +1,12 @@
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import "virtual:svg-icons-register";
import globalComponents from '@/components/install'
const app = createApp(App)
app.use(router)
app.use(router);
app.use(globalComponents);
app.mount('#app')

View File

@ -1,15 +1,7 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
1
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>

View File

@ -3,6 +3,8 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
// https://vitejs.dev/config/
export default defineConfig({
@ -15,6 +17,12 @@ export default defineConfig({
plugins: [
vue(),
vueDevTools(),
createSvgIconsPlugin({
iconDirs: [
path.resolve(__dirname, "src/assets/svgs"),
],
symbolId: "icon-[name]"
})
],
resolve: {
alias: {