file select

wallitor-gui/src-tauri/.gitignore

@@ -5,3 +5,4 @@
 # Generated by Tauri
 # will have schema files for capabilities auto-completion
 /gen/schemas
+resource/

wallitor-gui/src-tauri/Cargo.lock

@@ -483,8 +483,10 @@ checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
 dependencies = [
  "android-tzdata",
  "iana-time-zone",
+ "js-sys",
  "num-traits",
  "serde",
+ "wasm-bindgen",
  "windows-targets 0.52.6",
 ]
 
@@ -4035,6 +4037,7 @@ dependencies = [
 name = "wallitor-gui"
 version = "0.1.0"
 dependencies = [
+ "chrono",
  "serde",
  "serde_json",
  "tauri",

wallitor-gui/src-tauri/Cargo.toml

@@ -22,4 +22,5 @@ serde_json = "1"
 window-vibrancy = "0.5.2"
 tauri-plugin-fs = "2.0.0-rc"
 tauri-plugin-dialog = "2.0.0-rc"
+chrono = "0.4.38"
 

wallitor-gui/src-tauri/resource/021300/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "test1",
-  "info": {
-    "type": "",
-    "description": "test wallpaper 1",
-    "created": 0
-  },
-  "option": {
-    "mute": true
-  }
-}

wallitor-gui/src-tauri/resource/0213921/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "test2",
-  "info": {
-    "type": "",
-    "description": "test wallpaper 2",
-    "created": 0
-  },
-  "option": {
-    "mute": true
-  }
-}

wallitor-gui/src-tauri/src/lib.rs

@@ -2,9 +2,11 @@ mod setup;
 mod reader;
 
 use std::{fs, path};
-use serde_json;
+use serde_json::{self,json};
 use std::path::Path;
 use tauri::ipc::Response;
+use serde::{Deserialize,Serialize};
+use chrono::Local;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -12,7 +14,7 @@ pub fn run() {
     .setup(setup::init)
     .plugin(tauri_plugin_fs::init())
     .plugin(tauri_plugin_dialog::init())
-    .invoke_handler(tauri::generate_handler![read_resource_dir,get_file])
+    .invoke_handler(tauri::generate_handler![read_resource_dir,get_file,new_wallpaper])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }
@@ -38,3 +40,68 @@ async fn get_file(path:String) -> Response{
   }
   tauri::ipc::Response::new(String::from(""))
 }
+
+#[derive(Deserialize)]
+struct AddInfo {
+  name: String,
+  preview: String,
+  media: String,
+  description: String
+}
+
+#[derive(Serialize)]
+struct Info{
+  media_type:String,
+  description:String,
+  created:i64
+}
+
+#[derive(Serialize)]
+struct Opt{
+  mute:bool
+}
+
+#[derive(Serialize)]
+struct Config{
+  name:String,
+  info:Info,
+  option:Opt
+}
+
+
+#[tauri::command]
+async fn new_wallpaper(info:AddInfo) -> String{
+  let base_url = String::from("./resource");
+  let current_time:i64 = Local::now().timestamp();
+  let folder = format!("{}/{}",base_url,current_time);
+  if fs::create_dir_all(Path::new(&folder)).is_err(){
+    return String::from("Error creating folder.");
+  }
+  if let Ok(false) = fs::exists(Path::new(&info.preview)){
+    return String::from("Source Image doesn't exist.");
+  }
+  if fs::copy(Path::new(&info.preview), Path::new(&format!("{}/preview.jpg",folder))).is_err(){
+    return String::from("Error copy image.");
+  }
+  let config =json!( Config{
+    name:info.name,
+    info:Info { media_type: String::from("video"), description: info.description, created: current_time},
+    option:Opt{mute:true}
+  });
+  if fs::write(Path::new(&format!("{}/config.json",folder)), config.to_string()).is_err(){
+    return String::from("Error write config.");
+  }
+  if fs::create_dir(Path::new(&format!("{}/res",folder))).is_err(){
+    return String::from("Error creating res folder.");
+  }
+  let media = Path::new(&info.media);
+  if let Some(filename) = media.file_name().and_then(|f| f.to_str()){
+    if fs::copy(Path::new(&info.media), Path::new(&format!("{}/res/{}",folder,filename))).is_err(){
+      return String::from("Error copy media.");
+    }
+  }
+  else{
+    return String::from("Invalid media path.");
+  }
+  String::from("Success")
+}

wallitor-gui/src/components/AddItem.vue

@@ -18,37 +18,39 @@
             </header>
             <main class="item-add-main">
                 <table class="item-add-form">
-                    <tr>
+                    <tbody>
-                        <td class="item-add-form-title">标题</td>
+                        <tr>
-                        <td><input type="text" v-model="addInfo.name" /></td>
+                            <td class="item-add-form-title">标题</td>
-                    </tr>
+                            <td><input type="text" v-model="addInfo.name" /></td>
-                    <tr>
+                        </tr>
-                        <td class="item-add-form-title">文件</td>
+                        <tr>
-                        <td>
+                            <td class="item-add-form-title">文件</td>
-                            <template v-if="image_src">
+                            <td>
-                                <img :src="image_src" class="item-add-image">
+                                <template v-if="image_src">
-                            </template>
+                                    <img :src="image_src" class="item-add-image" @click="selectPreview">
-                            <template v-else>
+                                </template>
-                                <div class="item-add-preview" @click="selectPreview">
+                                <template v-else>
-                                    <div class="item-add-preview-text">
+                                    <div class="item-add-preview" @click="selectPreview">
-                                        <SvgIcon name="add" size="20px"></SvgIcon>点击添加封面
+                                        <div class="item-add-preview-text">
+                                            <SvgIcon name="add" size="20px"></SvgIcon>点击添加封面
+                                        </div>
                                     </div>
+                                </template>
+                                <div class="colbox">
+                                    <button class="apply-button" @click="selectMedia">选择</button>
+                                    <div>{{ addInfo.media }}</div>
                                 </div>
-                            </template>
+                            </td>
-                            <div class="colbox">
+                        </tr>
-                                <button class="apply-button" @click="selectMedia">选择</button>
+                        <tr>
-                                <div>{{ addInfo.media }}</div>
+                            <td class="item-add-form-title">描述</td>
-                            </div>
+                            <td><textarea class="item-add-description" v-model="addInfo.description"></textarea></td>
-                        </td>
+                        </tr>
-                    </tr>
+                        <tr>
-                    <tr>
+                            <td></td>
-                        <td class="item-add-form-title">描述</td>
+                            <td><button class="apply-button" @click="handleAdd">添加</button></td>
-                        <td><textarea class="item-add-description" v-model="addInfo.description"></textarea></td>
+                        </tr>
-                    </tr>
+                    </tbody>
-                    <tr>
-                        <td></td>
-                        <td><button class="apply-button" @click="handleFileOpen">添加</button></td>
-                    </tr>
                 </table>
             </main>
         </div>
@@ -113,6 +115,14 @@ function selectPreview() {
         }
     })
 }
+
+function handleAdd() {
+    invoke("new_wallpaper", {
+        info: addInfo.value
+    }).then((res) => {
+        console.log(res);
+    })
+}
 </script>
 
 <style>
@@ -208,6 +218,11 @@ function selectPreview() {
     width: 400px;
     margin-bottom: 10px;
     box-shadow: var(--shadow-edge-glow);
+    cursor: pointer;
+}
+
+.item-add-image:active {
+    transform: scale(0.95);
 }
 
 .item-add-form {

wallitor-gui/src/components/ApplyBar.vue

@@ -12,7 +12,7 @@
                         类型
                     </div>
                     <div class="apply-bar-info-main">
-                        {{ cell.config.info.type }}
+                        {{ cell.config.info.media_type }}
                     </div>
                 </div>
                 <div class="apply-bar-info rowbox">
@@ -28,7 +28,7 @@
                         创建时间
                     </div>
                     <div class="apply-bar-info-main">
-                        {{ (new Date(cell.config.info.created)).toLocaleString() }}
+                        {{ (new Date(cell.config.info.created * 1000)).toLocaleString() }}
                     </div>
                 </div>
                 <div class="apply-bar-info rowbox">
@@ -81,7 +81,7 @@ const cell = ref<Cell>({
         }
     }
 })
-const info_items = ref<(keyof Info)[]>(["type", "description", "created"]);
+const info_items = ref<(keyof Info)[]>(["media_type", "description", "created"]);
 const bg = ref<HTMLDivElement | null>(null);
 defineExpose({ open })
 watch(() => visible.value, (val, _) => {

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

@@ -5,7 +5,7 @@ export interface wpConfig {
 }
 type WallpaperType = 'Video'
 export interface Info {
-  type: WallpaperType
+  media_type: WallpaperType
   description: string
   created: number
 }