settings

wallitor-gui/src-tauri/src/handler/wallpaper.rs

@@ -1,9 +1,8 @@
-use std::path::Path;
-use std::fs;
 use chrono::Local;
 use serde::{Deserialize, Serialize};
 use serde_json::{self, json};
-
+use std::fs;
+use std::path::Path;
 
 #[derive(Deserialize)]
 pub struct AddInfo {
@@ -13,7 +12,7 @@ pub struct AddInfo {
     description: String,
 }
 
-#[derive(Serialize,Deserialize)]
+#[derive(Serialize, Deserialize)]
 struct Info {
     media_type: String,
     description: String,
@@ -21,12 +20,12 @@ struct Info {
     entry_point: String,
 }
 
-#[derive(Serialize,Deserialize)]
+#[derive(Serialize, Deserialize)]
 struct Opt {
     mute: bool,
 }
 
-#[derive(Serialize,Deserialize)]
+#[derive(Serialize, Deserialize)]
 pub struct Config {
     name: String,
     info: Info,
@@ -102,9 +101,64 @@ pub struct EditInfo {
     name: String,
     preview: String,
     description: String,
+    mute: bool,
+}
+
+fn delete_preview(target_dir: &String) -> bool {
+    if let Ok(entries) = fs::read_dir(target_dir) {
+        for entry in entries {
+            if let Ok(entry) = entry {
+                let path = entry.path();
+                if let Some(file_name) = path.file_stem().and_then(|s| s.to_str()) {
+                    if file_name == "preview" {
+                        if fs::remove_file(path).is_err() {
+                            return false;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return true;
+}
+
+fn copy_preview(source_file: &String, target_dir: &String) -> bool {
+    let preview_path = Path::new(source_file);
+    if let Ok(true) = fs::exists(preview_path) {
+        if delete_preview(target_dir) {
+            if let Some(ext) = preview_path.extension().and_then(|f| f.to_str()) {
+                if fs::copy(
+                    preview_path,
+                    Path::new(&format!("{}/preview.{}", target_dir, ext)),
+                )
+                .is_ok()
+                {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
 }
 
 #[tauri::command]
-pub async fn edit_wallpaper(title: String) -> bool {
+pub async fn edit_wallpaper(info: EditInfo) -> bool {
-    true
+    let folder_path = Path::new(&info.path);
-}
+    if let Ok(true) = fs::exists(folder_path) {
+        let config_path_str = format!("{}/config.json", info.path);
+        let config_path = Path::new(&config_path_str);
+        if let Ok(file) = fs::read(config_path) {
+            let mut config: Config = serde_json::from_slice(&file).unwrap();
+            config.info.description = info.description;
+            config.name = info.name;
+            config.option.mute = info.mute;
+            if let Ok(()) = fs::write(config_path, json!(config).to_string()) {
+                if !info.preview.is_empty() {
+                    return copy_preview(&info.preview, &info.path);
+                }
+                return true;
+            }
+        }
+    }
+    false
+}

wallitor-gui/src/assets/svgs/direction-left.svg

@@ -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="1729046702329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3377" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M874.666667 480H224L514.133333 170.666667c12.8-12.8 10.666667-34.133333-2.133333-44.8s-32-10.666667-44.8 2.133333l-341.333333 362.666667c-2.133333 2.133333-4.266667 6.4-6.4 8.533333-2.133333 4.266667-2.133333 6.4-2.133334 10.666667s0 8.533333 2.133334 10.666666c2.133333 4.266667 4.266667 6.4 6.4 8.533334l341.333333 362.666666c6.4 6.4 14.933333 10.666667 23.466667 10.666667 8.533333 0 14.933333-2.133333 21.333333-8.533333 12.8-12.8 12.8-32 2.133333-44.8L224 544H874.666667c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" fill="#666666" p-id="3378" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #4d5356;"></path></svg>

wallitor-gui/src/assets/svgs/edit.svg

@@ -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="1729046722817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3526" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M853.333333 501.333333c-17.066667 0-32 14.933333-32 32v320c0 6.4-4.266667 10.666667-10.666666 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V213.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h320c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v640c0 40.533333 34.133333 74.666667 74.666667 74.666667h640c40.533333 0 74.666667-34.133333 74.666666-74.666667V533.333333c0-17.066667-14.933333-32-32-32z" fill="#666666" p-id="3527" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #4d5356;"></path><path d="M405.333333 484.266667l-32 125.866666c-2.133333 10.666667 0 23.466667 8.533334 29.866667 6.4 6.4 14.933333 8.533333 23.466666 8.533333h8.533334l125.866666-32c6.4-2.133333 10.666667-4.266667 14.933334-8.533333l300.8-300.8c38.4-38.4 38.4-102.4 0-140.8-38.4-38.4-102.4-38.4-140.8 0L413.866667 469.333333c-4.266667 4.266667-6.4 8.533333-8.533334 14.933334z m59.733334 23.466666L761.6 213.333333c12.8-12.8 36.266667-12.8 49.066667 0 12.8 12.8 12.8 36.266667 0 49.066667L516.266667 558.933333l-66.133334 17.066667 14.933334-68.266667z" fill="#666666" p-id="3528" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #4d5356;"></path></svg>

wallitor-gui/src/components/ApplyBar.vue

@@ -67,7 +67,7 @@ const props = defineProps({
 })
 const store = useStore();
 const visible = defineModel<boolean>();
-const emit = defineEmits(["submit"]);
+defineEmits(["submit"]);
 const visible_ = ref(false);
 const cell = ref<Cell>({
     img: "",
@@ -107,9 +107,9 @@ function open(conFig: Cell) {
 }
 
 function apply() {
-    store.commit("apply_wallpaper",{
+    store.commit("apply_wallpaper", {
-        url:`/video/?url=${cell.value.path}\\res\\${cell.value.config.info.entry_point}&mute=${cell.value.config.option.mute}`,
+        url: `/video/?url=${cell.value.path}\\res\\${cell.value.config.info.entry_point}&mute=${cell.value.config.option.mute}`,
-        title:"wallitor_video_playback"
+        title: "wallitor_video_playback"
     })
     appWindow.minimize();
 }

wallitor-gui/src/components/EditItem.vue

@@ -13,9 +13,16 @@
                             <template v-if="image_src">
                                 <img :src="image_src" class="item-edit-image" @click="selectPreview">
                             </template>
-                            <template v-else>
+                            <template v-else-if="data.preview">
                                 <img :src="data.preview" class="item-edit-image" @click="selectPreview">
                             </template>
+                            <template v-else>
+                                <div class="item-edit-preview" @click="selectPreview">
+                                    <div class="item-edit-preview-text">
+                                        <SvgIcon name="add" size="20px"></SvgIcon>点击添加封面
+                                    </div>
+                                </div>
+                            </template>
                         </td>
                     </tr>
                     <tr>
@@ -23,6 +30,12 @@
                         <td><textarea class="item-edit-description" v-model="data.description"></textarea>
                         </td>
                     </tr>
+                    <tr>
+                        <td class="item-edit-form-title">静音</td>
+                        <td>
+                            <div><input type="checkbox" v-model="data.mute" /></div>
+                        </td>
+                    </tr>
                     <tr>
                         <td></td>
                         <td><button class="apply-button" @click="handleEdit" ref="applyButton">添加</button></td>
@@ -105,8 +118,9 @@ function handleEdit() {
             invoke("edit_wallpaper", {
                 info: info
             }).then((res) => {
+                console.log(info);
                 if (applyButton.value) applyButton.value.disabled = false;
-                if (res as string == "Success") {
+                if (res as boolean) {
                     store.commit("getWpList");
                     emit("submit");
                     ElMessage({

wallitor-gui/src/components/TitleBar.vue

@@ -26,7 +26,7 @@
     </div>
     <template v-if="mode == 'win'">
       <div class="titlebar-button-wrapper colbox">
-        <div class="titlebar-button" id="titlebar-settings" @click="minimize">
+        <div class="titlebar-button" id="titlebar-settings" @click="openSettings">
           <div class="titlebar-button-rect">
             <svg-icon name="setting" :size="button_size_default"></svg-icon>
           </div>
@@ -63,7 +63,9 @@ import SvgIcon from '@/components/SvgIcon.vue';
 import { ref, defineProps } from 'vue'
 import type { PropType } from 'vue'
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { useRouter } from 'vue-router';
 const appWindow = getCurrentWebviewWindow();
+const router = useRouter();
 
 type Mode = "win" | "mac";
 
@@ -89,6 +91,10 @@ function toggleMaximize() {
 function close() {
   appWindow.hide();
 }
+
+function openSettings() {
+  router.push("settings");
+}
 </script>
 
 <style>

wallitor-gui/src/router/index.ts

@@ -10,12 +10,9 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/about',
+      path: '/settings',
-      name: 'about',
+      name: 'settings',
-      // route level code-splitting
+      component: () => import('../views/SettingsView.vue')
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
     }
   ]
 })

wallitor-gui/src/ts/types.d.ts

@@ -42,4 +42,5 @@ interface EditInfo {
   name: string
   preview: string
   description: string
+  mute: boolean
 }

wallitor-gui/src/views/HomeView.vue

@@ -51,6 +51,7 @@ const edit_data = ref<EditInfo>({
   name: "",
   preview: "",
   description: "",
+  mute: true
 });
 
 onMounted(() => {
@@ -93,7 +94,8 @@ function edit_wallpaper(data: Cell) {
     path: data.path,
     name: data.config.name,
     preview: data.img,
-    description: data.config.info.description
+    description: data.config.info.description,
+    mute: data.config.option.mute
   }
 }
 

wallitor-gui/src/views/SettingsView.vue

@@ -0,0 +1,28 @@
+<template>
+    <div @click="back_home">
+        <SvgIcon name="direction-left"></SvgIcon>
+        返回
+    </div>
+    <el-form label-position="right">
+        <el-form-item label="标题栏样式">
+            <el-switch></el-switch>
+        </el-form-item>
+        <el-form-item label="开机自启">
+            <el-switch></el-switch>
+        </el-form-item>
+        <el-form-item label="最大化自动暂停">
+            <el-switch></el-switch>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { ElForm, ElFormItem, ElSwitch, ElOption } from 'element-plus';
+import { useRouter } from 'vue-router';
+import SvgIcon from '@/components/SvgIcon.vue';
+const router = useRouter();
+
+function back_home() {
+    router.push("/")
+}
+</script>