FrontEnd Edited
cast1e
parent
3aae49057c
commit
dadec49e49
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,48 +1,28 @@
|
|||
<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{
|
||||
html {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -50,39 +30,19 @@ html{
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
body{
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#app{
|
||||
|
||||
#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,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="item-card-main">
|
||||
|
||||
</div>
|
||||
<div class="item-card-title">
|
||||
{{ config.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
interface Config {
|
||||
name: string,
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object as PropType<Config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<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 { appWindow } from '@tauri-apps/api/window'
|
||||
|
||||
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() {
|
||||
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);
|
||||
border-radius: var(--titlebar-height);
|
||||
border: solid 1px var(--bd-color);
|
||||
width: fit-content;
|
||||
place-self: center;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(20px) 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 "virtual:svg-icons-register";
|
||||
import globalComponents from '@/components/install'
|
||||
import "@/style/global.css"
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
.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-hover-fill: rgb(131 131 145 / 24%);
|
||||
--bg-hover-fill-close: rgba(211, 86, 86, 0.579);
|
||||
}
|
||||
Loading…
Reference in New Issue