cast1e/wallitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

complete main function

Browse Source
This commit is contained in:
cast1e
2024-10-13 23:36:10 +08:00
parent dc5d53a953
commit 5a0769e91b
20 changed files with 482 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wallitor-gui/src/components/AddItem.vue
+29 -4
View File
@@ -4,7 +4,7 @@
}">
<div class="item-add-content">
<header class="colbox item-add-header">
<div class="colbox item-add-header-icon item-add-header-item" @click="visible = !visible">
<div class="colbox item-add-header-icon item-add-header-item" @click="toggleVisible">
<template v-if="visible">
<SvgIcon name="keyboard-arrow-down" size="20px"></SvgIcon>
</template>
@@ -62,6 +62,10 @@ import { defineExpose, defineModel, ref } from 'vue';
import SvgIcon from './SvgIcon.vue';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
const store = useStore();
const visible = defineModel<boolean>();
const bg = ref<HTMLDivElement | null>(null);
interface AddInfo {
@@ -116,11 +120,32 @@ function selectPreview() {
})
}
function toggleVisible() {
visible.value = !visible.value
}
function handleAdd() {
invoke("new_wallpaper", {
info: addInfo.value
}).then((res) => {
console.log(res);
if (res as string == "Success") {
addInfo.value = {
name: "",
preview: "",
media: "",
description: ""
}
store.commit("getWpList");
toggleVisible();
ElMessage({
type: "success",
message: "新建成功"
})
}
else ElMessage({
type: "error",
message: `新建失败 ${res}`
})
})
}
</script>
@@ -137,7 +162,7 @@ function handleAdd() {
transform: translate(-50%, 0);
position: absolute;
width: 85%;
height: calc(100% - 60px);
height: calc(100% - 55px);
transition: .8s cubic-bezier(0.9, 0, 0, 1.1);
}
@@ -152,7 +177,7 @@ function handleAdd() {
}
.item-add-main {
margin: 5px;
margin: 10px;
height: calc(100% - 45px);
overflow: auto;
}
wallitor-gui/src/components/ApplyBar.vue
+21 -2
View File
@@ -42,7 +42,7 @@
</div>
</div>
</div>
<button class="apply-button">应用</button>
<button class="apply-button" @click="apply">应用</button>
</div>
<div class="apply-bar-close" @click="handleClose">
<svg-icon name="close" color="var(--text-color)"></svg-icon>
@@ -55,6 +55,7 @@
import { defineProps, defineExpose, defineEmits, defineModel, watch, ref, type PropType } from 'vue';
type Position = "left" | "right";
import type { Info, Cell } from '@/ts/types'
import { invoke } from '@tauri-apps/api/core';
const props = defineProps({
position: {
@@ -74,7 +75,8 @@ const cell = ref<Cell>({
info: {
description: "",
created: 0,
type: "Video"
media_type: "Video",
entry_point: ""
},
option: {
mute: true
@@ -103,6 +105,23 @@ function open(conFig: Cell) {
console.log(cell.value)
visible.value = true;
}
import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
function apply() {
const webview = new WebviewWindow('wallitor_video_playback', {
title: "wallitor_video_playback",
url: `/video/?url=${cell.value.path}\\res\\${cell.value.config.info.entry_point}`,
fullscreen: true,
decorations: false
});
webview.once("tauri://created", () => {
invoke("set_wallpaper", {
title: "wallitor_video_playback"
}).then((res) => {
console.log(res)
})
});
}
</script>
<style>
wallitor-gui/src/main.ts
+3
View File
@@ -4,10 +4,13 @@ import router from './router'
import "virtual:svg-icons-register";
import globalComponents from '@/components/install'
import "@/style/global.css"
import {store} from '@/store'
import 'element-plus/theme-chalk/dark/css-vars.css'
const app = createApp(App)
app.use(router);
app.use(globalComponents);
app.use(store)
app.mount('#app')
wallitor-gui/src/store/index.ts
+46
View File
@@ -0,0 +1,46 @@
import { createStore } from 'vuex'
import { invoke } from '@tauri-apps/api/core';
import type {ResourceDir,wpConfig} from '@/ts/types'
function arrayBufferToString(buffer: ArrayBuffer): string {
const decoder = new TextDecoder('utf-8');
return decoder.decode(buffer);
}
export const store = createStore({
state() {
return {
wpList:[]
}
},
mutations: {
getWpList(state){
state.wpList = [];
invoke("read_resource_dir", {}).then((res) => {
const resource = JSON.parse(res as string) as ResourceDir;
for (let id of Object.keys(resource.files)) {
let dir = resource.files[id]
if ("preview.jpg" in dir) {
invoke("get_file", {
path: dir["preview.jpg"]
}).then((res) => {
let binary_data_arr = new Uint8Array(res as number[]);
const blob = new Blob([binary_data_arr], { type: 'image/jpeg' });
const imageUrl = URL.createObjectURL(blob);
invoke("get_file", {
path: `${id}\\config.json`
}).then((cfg) => {
let config: wpConfig = JSON.parse(arrayBufferToString(cfg as ArrayBuffer));
state.wpList.push({
path: id,
img: imageUrl,
config: config
})
})
})
}
}
});
}
}
})
wallitor-gui/src/store/vuex.d.ts
Vendored
+14
View File
@@ -0,0 +1,14 @@
import type { Store } from 'vuex'
import type { Cell } from '@/ts/types'
declare module 'vue' {
// 声明自己的 store state
interface State {
wpList:Cell[]
}
// 为 `this.$store` 提供类型声明
interface ComponentCustomProperties {
$store: Store<State>
}
}
wallitor-gui/src/style/global.css
+2 -2
View File
@@ -38,8 +38,8 @@ html.dark {
--shadow-edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 4px rgba(255, 255, 255, 0.06);
--shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.16);
--bg-color-alpha: hsl(230 12% 14% / 0.68);
--bg-color-alpha-darker: hsl(230 12% 14% / 0.93);
--bg-color-alpha: hsla(240, 1%, 14%, 0.68);
--bg-color-alpha-darker: hsla(0, 0%, 14%, 0.948);
--bg-hover-fill: rgb(131 131 145 / 24%);
--bg-hover-fill-close: rgba(211, 86, 86, 0.579);
}
wallitor-gui/src/ts/types.d.ts
Vendored
+13 -1
View File
@@ -7,7 +7,8 @@ type WallpaperType = 'Video'
export interface Info {
media_type: WallpaperType
description: string
created: number
created: number,
entry_point:string
}
export interface Option {
mute: boolean
@@ -17,3 +18,14 @@ export interface Cell {
path: string
config: wpConfig
}
export interface Resource {
"config.json": string,
[filename: string]: string
}
export interface ResourceDir {
files: {
[resId: string]: Resource
}
}
wallitor-gui/src/views/HomeView.vue
+6 -45
View File
@@ -2,62 +2,23 @@
import ItemCard from '@/components/ItemCard.vue';
import ApplyBar from '@/components/ApplyBar.vue';
import AddItem from '@/components/AddItem.vue';
import { ref, onMounted } from 'vue';
import { ref, onMounted, computed } from 'vue';
import { entry } from '@/ts/entry';
import { invoke } from '@tauri-apps/api/core';
import type { wpConfig, Cell } from '@/ts/types'
import type { Cell } from '@/ts/types'
import { useStore } from 'vuex';
const items = ref<Cell[]>([])
const store = useStore();
const items = computed<Cell[]>(()=>store.state.wpList);
const apply_bar_visible = ref(false);
const applyBar = ref<InstanceType<typeof ApplyBar> | null>(null);
const item_add_visible = ref(false);
interface Resource {
"config.json": string,
[filename: string]: string
}
interface ResourceDir {
files: {
[resId: string]: Resource
}
}
function arrayBufferToString(buffer: ArrayBuffer): string {
const decoder = new TextDecoder('utf-8');
return decoder.decode(buffer);
}
onMounted(() => {
const main = document.querySelector(".home-main") as HTMLElement;
setTimeout(() => {
entry("up", main, 20);
})
invoke("read_resource_dir", {}).then((res) => {
let resource = JSON.parse(res as string) as ResourceDir;
for (let id of Object.keys(resource.files)) {
let dir = resource.files[id]
if ("preview.jpg" in dir) {
invoke("get_file", {
path: dir["preview.jpg"]
}).then((res) => {
let binary_data_arr = new Uint8Array(res as number[]);
const blob = new Blob([binary_data_arr], { type: 'image/jpeg' });
const imageUrl = URL.createObjectURL(blob);
invoke("get_file", {
path: `${id}\\config.json`
}).then((cfg) => {
let config: wpConfig = JSON.parse(arrayBufferToString(cfg as ArrayBuffer));
items.value.push({
path: id,
img: imageUrl,
config: config
})
})
})
}
}
});
store.commit("getWpList");
})
function openCard(config: Cell) {