addpage complete

wallitor-gui/package.json

@@ -14,6 +14,8 @@
   },
   "dependencies": {
     "@tauri-apps/api": "2.0.0-rc.0",
+    "@tauri-apps/plugin-dialog": "^2.0.0",
+    "@tauri-apps/plugin-fs": "2.0.0-rc.2",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },

wallitor-gui/pnpm-lock.yaml

@@ -11,6 +11,12 @@ importers:
       '@tauri-apps/api':
         specifier: 2.0.0-rc.0
         version: 2.0.0-rc.0
+      '@tauri-apps/plugin-dialog':
+        specifier: ^2.0.0
+        version: 2.0.0
+      '@tauri-apps/plugin-fs':
+        specifier: 2.0.0-rc.2
+        version: 2.0.0-rc.2
       vue:
         specifier: ^3.4.29
         version: 3.5.8(typescript@5.4.5)
@@ -534,6 +540,12 @@ packages:
     resolution: {integrity: sha512-v454Qs3REHc3Za59U+/eSmBsdmF+3NE5+76+lFDaitVqN4ZglDHENDaMARYKGJVZuxiSkzyqG0SeG7lLQjVkPA==}
     engines: {node: '>= 18.18', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
 
+  '@tauri-apps/api@2.0.0-rc.6':
+    resolution: {integrity: sha512-oENxL0C5WqHNSXWjZEbjnzoBwFFyn8do5S0elOg0ME1cLvWJOAKmqdCnWPpAwtzHQZ+xAzMU0/k8nPpJq4OQYA==}
+
+  '@tauri-apps/api@2.0.2':
+    resolution: {integrity: sha512-3wSwmG+1kr6WrgAFKK5ijkNFPp8TT3FLj3YHUb5EwMO+3FxX4uWlfSWkeeBy+Kc1RsKzugtYLuuya+98Flj+3w==}
+
   '@tauri-apps/cli-darwin-arm64@2.0.0-rc.16':
     resolution: {integrity: sha512-lISZU4gG0c9PbY7h/j/gW7nJLxZEygNBrYEET6zN8R99Znf5rSO+CfjenaMcJUUj6yTAd8gzdakRpLqNSAWegA==}
     engines: {node: '>= 10'}
@@ -603,6 +615,12 @@ packages:
     engines: {node: '>= 10'}
     hasBin: true
 
+  '@tauri-apps/plugin-dialog@2.0.0':
+    resolution: {integrity: sha512-ApNkejXP2jpPBSifznPPcHTXxu9/YaRW+eJ+8+nYwqp0lLUtebFHG4QhxitM43wwReHE81WAV1DQ/b+2VBftOA==}
+
+  '@tauri-apps/plugin-fs@2.0.0-rc.2':
+    resolution: {integrity: sha512-TFjCfso3tN4b5s2EBjqP8N2gYrPh93Ds3VNKj8pCXv4wbvnItyfG0aHO0haUsedBOHQryDwv9vDAdPX6/T0a+g==}
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -2895,6 +2913,10 @@ snapshots:
 
   '@tauri-apps/api@2.0.0-rc.0': {}
 
+  '@tauri-apps/api@2.0.0-rc.6': {}
+
+  '@tauri-apps/api@2.0.2': {}
+
   '@tauri-apps/cli-darwin-arm64@2.0.0-rc.16':
     optional: true
 
@@ -2938,6 +2960,14 @@ snapshots:
       '@tauri-apps/cli-win32-ia32-msvc': 2.0.0-rc.16
       '@tauri-apps/cli-win32-x64-msvc': 2.0.0-rc.16
 
+  '@tauri-apps/plugin-dialog@2.0.0':
+    dependencies:
+      '@tauri-apps/api': 2.0.2
+
+  '@tauri-apps/plugin-fs@2.0.0-rc.2':
+    dependencies:
+      '@tauri-apps/api': 2.0.0-rc.6
+
   '@trysound/sax@0.2.0': {}
 
   '@tsconfig/node20@20.1.4': {}

wallitor-gui/src-tauri/.gitignore

@@ -1,3 +1,7 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas

wallitor-gui/src-tauri/Cargo.toml

@@ -1,27 +1,25 @@
 [package]
-name = "app"
+name = "wallitor-gui"
 version = "0.1.0"
 description = "A Tauri App"
 authors = ["you"]
-license = ""
-repository = ""
-default-run = "app"
 edition = "2021"
-rust-version = "1.60"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
+[lib]
+name = "wallitor_gui_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
 [build-dependencies]
 tauri-build = { version = "2.0.0-rc", features = [] }
 
 [dependencies]
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2.0.0-rc", features = [] }
+tauri-plugin-shell = "2.0.0-rc"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
 window-vibrancy = "0.5.2"
+tauri-plugin-fs = "2.0.0-rc"
+tauri-plugin-dialog = "2.0.0-rc"
 
-[features]
-# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
-# If you use cargo directly instead of tauri's cli you can use this feature flag to switch between tauri's `dev` and `build` modes.
-# DO NOT REMOVE!!
-custom-protocol = [ "tauri/custom-protocol" ]

wallitor-gui/src-tauri/capabilities/default.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": ["core:default", "shell:allow-open", "dialog:allow-open", "dialog:default"]
+}

wallitor-gui/src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-maximize","core:window:allow-unmaximize","core:window:allow-toggle-maximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-start-dragging"]}}
+{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["core:default","shell:allow-open","dialog:allow-open","dialog:default"]},"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-maximize","core:window:allow-unmaximize","core:window:allow-toggle-maximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-start-dragging"]}}

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

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

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

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

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

@@ -0,0 +1,40 @@
+mod setup;
+mod reader;
+
+use std::{fs, path};
+use serde_json;
+use std::path::Path;
+use tauri::ipc::Response;
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+  tauri::Builder::default()
+    .setup(setup::init)
+    .plugin(tauri_plugin_fs::init())
+    .plugin(tauri_plugin_dialog::init())
+    .invoke_handler(tauri::generate_handler![read_resource_dir,get_file])
+    .run(tauri::generate_context!())
+    .expect("error while running tauri application");
+}
+
+#[tauri::command]
+async fn read_resource_dir() -> String {
+  let mut file_map = reader::FileMap::new();
+  let path = Path::new("./resource");
+  if let Ok(false) = fs::exists(path){
+    fs::create_dir(path).expect("Can't create dir");
+  }
+  file_map.read_resourse_directory(path).expect("Can't read dir");
+  serde_json::to_string(&file_map).unwrap()
+}
+
+// remember to call `.manage(MyState::default())`
+#[tauri::command]
+async fn get_file(path:String) -> Response{
+  let p = path::Path::new(&path);
+  if let Ok(true) =  fs::exists(p){
+    let data: Vec<u8> = fs::read(p).unwrap();
+    return tauri::ipc::Response::new(data);
+  }
+  tauri::ipc::Response::new(String::from(""))
+}

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

@@ -1,34 +1,6 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-mod setup;
-mod reader;
-
-use std::fs;
-use serde_json;
-use std::path::Path;
-
 fn main() {
-  tauri::Builder::default()
+    wallitor_gui_lib::run()
-    .setup(setup::init)
-    .invoke_handler(tauri::generate_handler![test_command])
-    .invoke_handler(tauri::generate_handler![read_resource_dir])
-    .run(tauri::generate_context!())
-    .expect("error while running tauri application");
-}
-
-
-#[tauri::command]
-async fn test_command() -> String {
-  return String::from("Hello World");
-}
-
-#[tauri::command]
-async fn read_resource_dir() -> String {
-  let file_map = reader::FileMap::new();
-  let path = Path::new("./resource");
-  if let Ok(false) = fs::exists(path){
-    fs::create_dir(path).expect("Can't create dir");
-  }
-  serde_json::to_string(&file_map).unwrap()
 }

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

@@ -1,7 +1,6 @@
 use std::fs;
 use std::path::Path;
 use serde::{ Serialize,Serializer};
-use serde_json;
 use std::collections::HashMap;
 
 enum FileType {
@@ -45,7 +44,7 @@ impl FileMap {
         Ok(files)
     }
     
-    fn read_resourse_directory(&mut self,p:&Path)->std::io::Result<()>{
+    pub fn read_resourse_directory(&mut self,p:&Path)->std::io::Result<()>{
         for entry in fs::read_dir(p)?{
             let dir = entry?;
             let path = dir.path();

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

@@ -1,15 +1,11 @@
 use tauri::{App, Manager};
-use window_vibrancy::{self, NSVisualEffectMaterial};
+#[cfg(target_os = "windows")]
+use window_vibrancy;
 
 
 /// setup
 pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>> {
     let win = app.get_webview_window("main").unwrap();
-    // 仅在 macOS 下执行
-    #[cfg(target_os = "macos")]
-    window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI)
-        .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
-
     // 仅在 windows 下执行
     #[cfg(target_os = "windows")]
     if let Err(_) = window_vibrancy::apply_mica(&win, None){

wallitor-gui/src-tauri/tauri.conf.json

@@ -1,64 +1,37 @@
 {
-  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
-  "build": {
-    "beforeBuildCommand": "npm run build",
-    "beforeDevCommand": "npm run dev",
-    "frontendDist": "../dist",
-    "devUrl": "http://localhost:5173"
-  },
-  "bundle": {
-    "active": true,
-    "category": "DeveloperTool",
-    "copyright": "",
-    "targets": "all",
-    "externalBin": [],
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ],
-    "windows": {
-      "certificateThumbprint": null,
-      "digestAlgorithm": "sha256",
-      "timestampUrl": ""
-    },
-    "longDescription": "",
-    "macOS": {
-      "entitlements": null,
-      "exceptionDomain": "",
-      "frameworks": [],
-      "providerShortName": null,
-      "signingIdentity": null
-    },
-    "resources": [],
-    "shortDescription": "",
-    "linux": {
-      "deb": {
-        "depends": []
-      }
-    }
-  },
   "productName": "wallitor-gui",
-  "mainBinaryName": "wallitor-gui",
   "version": "0.1.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "com.wallitor-gui.app",
-  "plugins": {},
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "devUrl": "http://localhost:5173",
+    "beforeBuildCommand": "pnpm build",
+    "frontendDist": "../dist"
+  },
   "app": {
     "windows": [
       {
-        "fullscreen": false,
-        "resizable": true,
         "title": "wallitor-gui",
+        "width": 800,
+        "height": 600,
         "transparent": true,
-        "width": 950,
-        "height": 750,
         "decorations": false
       }
     ],
     "security": {
       "csp": null
     }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
   }
 }

wallitor-gui/src/components/AddItem.vue

@@ -16,6 +16,41 @@
                     <div>添加</div>
                 </div>
             </header>
+            <main class="item-add-main">
+                <table class="item-add-form">
+                    <tr>
+                        <td class="item-add-form-title">标题</td>
+                        <td><input type="text" v-model="addInfo.name" /></td>
+                    </tr>
+                    <tr>
+                        <td class="item-add-form-title">文件</td>
+                        <td>
+                            <template v-if="image_src">
+                                <img :src="image_src" class="item-add-image">
+                            </template>
+                            <template v-else>
+                                <div class="item-add-preview" @click="selectPreview">
+                                    <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>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="item-add-form-title">描述</td>
+                        <td><textarea class="item-add-description" v-model="addInfo.description"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td><button class="apply-button" @click="handleFileOpen">添加</button></td>
+                    </tr>
+                </table>
+            </main>
         </div>
     </div>
 </template>
@@ -23,9 +58,61 @@
 <script setup lang="ts">
 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';
 const visible = defineModel<boolean>();
 const bg = ref<HTMLDivElement | null>(null);
+interface AddInfo {
+    name: string,
+    preview: string,
+    media: string,
+    description: string
+}
+const addInfo = ref<AddInfo>({
+    name: "",
+    preview: "",
+    media: "",
+    description: ""
+})
+const image_src = ref("");
+const support_ext = [".mp4", ".mkv", ".flv", ".ts"];
+
 defineExpose({ open })
+
+async function handleFileOpen() {
+    const file = await open({
+        multiple: false,
+        directory: false,
+    });
+    return file;
+}
+
+function selectMedia() {
+    handleFileOpen().then((file) => {
+        if (file) {
+            let ext = file.substring(file.lastIndexOf("."));
+            if (support_ext.includes(ext)) {
+                addInfo.value.media = file;
+            }
+        }
+    })
+}
+
+function selectPreview() {
+    handleFileOpen().then((file) => {
+        if (file) {
+            addInfo.value.preview = file;
+            invoke("get_file", {
+                path: file
+            }).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);
+                image_src.value = imageUrl;
+            })
+        }
+    })
+}
 </script>
 
 <style>
@@ -51,9 +138,19 @@ defineExpose({ open })
 .item-add-content {
     padding: 10px;
     height: calc(100% - 20px);
+    overflow: hidden;
+}
+
+.item-add-main {
+    margin: 5px;
+    height: calc(100% - 45px);
     overflow: auto;
 }
 
+.item-add-main::-webkit-scrollbar {
+    display: none;
+}
+
 .item-add-header-icon {
     width: 40px;
     height: 40px;
@@ -76,8 +173,66 @@ defineExpose({ open })
 }
 
 .item-add-header-title {
-    font-size: 20px;
+    font-size: 22px;
-    font-weight: 500;
+    font-weight: 600;
     margin-left: 10px;
 }
+
+.item-add-main {
+    color: var(--text-color);
+}
+
+.item-add-preview {
+    background: linear-gradient(135deg, #0000000A 0%, #FFFFFF0A 100%);
+    border-radius: 5px;
+    width: 400px;
+    height: 200px;
+    margin-bottom: 10px;
+    box-shadow: var(--shadow-edge-glow);
+    position: relative;
+    cursor: pointer;
+    transition: .5s;
+}
+
+.item-add-preview:hover {
+    background: var(--bg-color-alpha-darker);
+}
+
+.item-add-preview:active {
+    transform: scale(0.95);
+}
+
+.item-add-image {
+    background: linear-gradient(135deg, transparent 0%, #FFFFFF10 100%);
+    border-radius: 5px;
+    width: 400px;
+    margin-bottom: 10px;
+    box-shadow: var(--shadow-edge-glow);
+}
+
+.item-add-form {
+    margin-top: 5px;
+}
+
+.item-add-form td {
+    vertical-align: top;
+    padding: 5px;
+}
+
+.item-add-description {
+    width: 300px;
+    height: 150px;
+}
+
+.item-add-form-title {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.item-add-preview-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
 </style>

wallitor-gui/src/components/ApplyBar.vue

@@ -4,9 +4,45 @@
             'apply-bar-left': position == 'left',
             'apply-bar-right': position == 'right'
         }">
-            <div class="apply-bar-content">
+            <div class="apply-bar-content rowbox">
-                <img :src="config.img">
+                <img :src="cell.img" class="apply-bar-img">
-                {{ config.name }}
+                <div class="apply-bar-title">{{ cell.config.name }}</div>
+                <div class="apply-bar-info colbox" style="align-items: center;">
+                    <div class="apply-bar-info-tag">
+                        类型
+                    </div>
+                    <div class="apply-bar-info-main">
+                        {{ cell.config.info.type }}
+                    </div>
+                </div>
+                <div class="apply-bar-info rowbox">
+                    <div class="apply-bar-info-tag">
+                        描述
+                    </div>
+                    <div class="apply-bar-info-main">
+                        {{ cell.config.info.description }}
+                    </div>
+                </div>
+                <div class="apply-bar-info colbox" style="align-items: center;">
+                    <div class="apply-bar-info-tag">
+                        创建时间
+                    </div>
+                    <div class="apply-bar-info-main">
+                        {{ (new Date(cell.config.info.created)).toLocaleString() }}
+                    </div>
+                </div>
+                <div class="apply-bar-info rowbox">
+                    <div class="apply-bar-info-tag">
+                        设置
+                    </div>
+                    <div class="apply-bar-info-main">
+                        <div class="apply-bar-settings colbox">
+                            <div>静音</div>
+                            <div><input type="checkbox" v-model="cell.config.option.mute" /></div>
+                        </div>
+                    </div>
+                </div>
+                <button class="apply-button">应用</button>
             </div>
             <div class="apply-bar-close" @click="handleClose">
                 <svg-icon name="close" color="var(--text-color)"></svg-icon>
@@ -18,10 +54,8 @@
 <script setup lang="ts">
 import { defineProps, defineExpose, defineEmits, defineModel, watch, ref, type PropType } from 'vue';
 type Position = "left" | "right";
-interface Config {
+import type { Info, Cell } from '@/ts/types'
-    name: string,
+
-    img: string
-}
 const props = defineProps({
     position: {
         type: String as PropType<Position>,
@@ -32,10 +66,22 @@ const props = defineProps({
 const visible = defineModel<boolean>();
 const emit = defineEmits(["submit"]);
 const visible_ = ref(false);
-const config = ref<Config>({
+const cell = ref<Cell>({
+    img: "",
+    path: "",
+    config: {
         name: "",
-    img: ""
+        info: {
+            description: "",
+            created: 0,
+            type: "Video"
+        },
+        option: {
+            mute: true
+        }
+    }
 })
+const info_items = ref<(keyof Info)[]>(["type", "description", "created"]);
 const bg = ref<HTMLDivElement | null>(null);
 defineExpose({ open })
 watch(() => visible.value, (val, _) => {
@@ -52,9 +98,9 @@ function handleClose() {
     visible.value = false;
 }
 
-function open(conFig: Config) {
+function open(conFig: Cell) {
-    config.value = conFig;
+    cell.value = conFig;
-    console.log(conFig)
+    console.log(cell.value)
     visible.value = true;
 }
 </script>
@@ -127,9 +173,16 @@ function open(conFig: Config) {
 }
 
 .apply-bar-content {
-    padding: 20px;
+    padding: 20px 15% 0 15%;
     height: calc(100% - 40px);
+    width: 70%;
     overflow: auto;
+    color: var(--text-color);
+}
+
+.apply-bar-img {
+    width: 100%;
+    border-radius: 7px;
 }
 
 .apply-bar-close {
@@ -149,4 +202,28 @@ function open(conFig: Config) {
     right: 10px;
     animation: apply-bar-appear-right .6s cubic-bezier(0, 0.6, 0.2, 1.0);
 }
+
+.apply-bar-title {
+    font-size: 35px;
+    font-weight: 700;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.apply-bar-info-tag {
+    border-radius: 2px;
+    border: 1px solid var(--bd-color);
+    width: fit-content;
+    padding: 4px;
+    margin-top: 7px;
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 200;
+    margin-right: 5px;
+}
+
+.apply-bar-info-main {
+    font-size: 15px;
+    font-weight: 500;
+}
 </style>

wallitor-gui/src/components/ItemCard.vue

@@ -1,10 +1,12 @@
 <template>
-    <div class="item-card">
+    <div class="item-card" :style="{
-        <div class="item-card-main">
+        backgroundImage: `url(${cell.img})`
+    }">
+        <!-- <div class="item-card-main">
             <img :src="config.img" />
-        </div>
+        </div> -->
         <div class="item-card-title">
-            {{ config.name }}
+            {{ cell.config.name }}
         </div>
     </div>
 </template>
@@ -12,15 +14,11 @@
 <script setup lang="ts">
 import { defineProps } from 'vue'
 import type { PropType } from 'vue'
-
+import type { Cell } from '@/ts/types'
-interface Config {
-    name: string,
-    img: string
-}
 
 const props = defineProps({
-    config: {
+    cell: {
-        type: Object as PropType<Config>,
+        type: Object as PropType<Cell>,
         required: true
     }
 })
@@ -43,6 +41,8 @@ const props = defineProps({
     transition: .3s;
     border-radius: 10px;
     box-shadow: 0 0 1px 6px transparent;
+    background-size: cover;
+    background-position: center;
 }
 
 .item-card-main {

wallitor-gui/src/components/TitleBar.vue

@@ -73,7 +73,6 @@ const props = defineProps({
 })
 
 function minimize() {
-  console.log(111)
   appWindow.minimize()
 }
 

wallitor-gui/src/style/global.css

@@ -15,6 +15,7 @@ html {
   --bg-color: #ffffffae;
   --text-color: #1c1c1c;
   --bd-color: #bbbbbbce;
+  --text-active: #7cbeff;
   --login-button-bg: #9acdff;
   --login-button-bd: #c8c8c8;
   --login-button-hover: #7db7f0;
@@ -34,10 +35,11 @@ html.dark {
   --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-edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
-    --shadow: 0 10px 15px -3px rgb(0 0 0 / .2), 0 4px 6px -4px rgb(0 0 0 / .16);
+    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 4px rgba(255, 255, 255, 0.06);
-    --bg-color-alpha: hsl(230 12% 14% / .68);
+  --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.16);
-    --bg-color-alpha-darker: hsl(230 12% 14% / .93);
+  --bg-color-alpha: hsl(230 12% 14% / 0.68);
+  --bg-color-alpha-darker: hsl(230 12% 14% / 0.93);
   --bg-hover-fill: rgb(131 131 145 / 24%);
   --bg-hover-fill-close: rgba(211, 86, 86, 0.579);
 }
@@ -57,6 +59,15 @@ html {
   margin: 0;
   padding: 0;
   overflow: hidden;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
 }
 
 #app {
@@ -65,3 +76,67 @@ html {
   position: relative;
   overflow: hidden;
 }
+
+input[type='text'] {
+  border: none;
+  outline: none;
+  background-color: var(--bg-color-alter);
+  border-bottom: 2px solid var(--bd-color);
+  border-radius: 3px;
+  color: var(--text-color);
+  font-size: 15px;
+  padding: 6px;
+  transition: 0.3s;
+}
+
+input[type='text']:focus {
+  background-color: var(--bg-color-solid);
+  border-bottom: 2px solid var(--text-active);
+}
+
+textarea {
+  outline: none;
+  border: 1px solid var(--bd-color);
+  border-radius: 3px;
+  color: var(--text-color);
+  font-size: 15px;
+  padding: 5px;
+  transition: 0.3s;
+  background-color: var(--bg-color-alter);
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+}
+
+textarea:focus {
+  background-color: var(--bg-color-solid);
+  border: 1px solid var(--text-active);
+}
+
+.apply-button {
+  align-self: flex-end;
+  outline: none;
+  border: solid 1px var(--bd-color);
+  border-radius: 2px;
+  width: 75px;
+  height: 30px;
+  background-color: var(--bg-color-alpha-darker);
+  color: var(--text-color);
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.apply-button:hover {
+  background-color: var(--bg-color-alter);
+}
+
+.apply-button:active {
+  background-color: var(--bg-color-solid);
+  transform: scale(0.95);
+}

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

@@ -0,0 +1,19 @@
+export interface wpConfig {
+  name: string
+  info: Info
+  option: Option
+}
+type WallpaperType = 'Video'
+export interface Info {
+  type: WallpaperType
+  description: string
+  created: number
+}
+export interface Option {
+  mute: boolean
+}
+export interface Cell {
+  img: string
+  path: string
+  config: wpConfig
+}

wallitor-gui/src/views/HomeView.vue

@@ -5,37 +5,70 @@ import AddItem from '@/components/AddItem.vue';
 import { ref, onMounted } from 'vue';
 import { entry } from '@/ts/entry';
 import { invoke } from '@tauri-apps/api/core';
-interface Config {
+import type { wpConfig, Cell } from '@/ts/types'
-  name: string,
+
-  img: string
+const items = ref<Cell[]>([])
-}
-const items = ref<Config[]>([{
-  name: "test1",
-  img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
-}, {
-  name: "test2",
-  img: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
-}])
 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) => console.log(res));
+  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
+            })
+          })
+        })
+      }
+    }
+  });
 })
 
-function openCard(config: Config) {
+function openCard(config: Cell) {
+  console.log(applyBar.value)
   if (applyBar.value) applyBar.value.open(config);
 }
 </script>
 
 <template>
   <main class="colbox home-main">
-    <ItemCard v-for="(item, index) in items" :key="index" :config="item" @click="openCard(item)"></ItemCard>
+    <ItemCard v-for="(item, index) in items" :key="index" :cell="item" @click="openCard(item)"></ItemCard>
   </main>
   <ApplyBar v-model="apply_bar_visible" ref="applyBar"></ApplyBar>
   <AddItem v-model="item_add_visible"></AddItem>