Update tauri to 2.0rc

wallitor-gui/src/App.vue

@@ -20,29 +20,3 @@ isDarkTheme.addEventListener('change', (event) => {
   <title-bar mode="win"></title-bar>
   <router-view></router-view>
 </template>
-
-<style>
-html {
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-</style>

wallitor-gui/src/components/ApplyBar.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="apply-bar-mask" v-if="visible_" @click.self="handleClose">
+        <div ref="bg" class="apply-bar-bg" :class="{
+            'apply-bar-left': position == 'left',
+            'apply-bar-right': position == 'right'
+        }">
+            <div class="apply-bar-content">
+                <img :src="config.img">
+                {{ config.name }}
+            </div>
+            <div class="apply-bar-close" @click="handleClose">
+                <svg-icon name="close" color="var(--text-color)"></svg-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineExpose, defineEmits, defineModel, watch, ref, type PropType } from 'vue';
+type Position = "left" | "right";
+interface Config {
+    name: string,
+    img: string
+}
+const props = defineProps({
+    position: {
+        type: String as PropType<Position>,
+        default: "right"
+    },
+
+})
+const visible = defineModel<boolean>();
+const emit = defineEmits(["submit"]);
+const visible_ = ref(false);
+const config = ref<Config>({
+    name: "",
+    img: ""
+})
+const bg = ref<HTMLDivElement | null>(null);
+defineExpose({ open })
+watch(() => visible.value, (val, _) => {
+    if (val) {
+        visible_.value = true;
+    }
+    else {
+        if (bg.value) bg.value.style.animation = `apply-bar-disappear-${props.position} .3s ease-in`;
+        setTimeout(() => { visible_.value = false }, 295);
+    }
+})
+
+function handleClose() {
+    visible.value = false;
+}
+
+function open(conFig: Config) {
+    config.value = conFig;
+    console.log(conFig)
+    visible.value = true;
+}
+</script>
+
+<style>
+@keyframes apply-bar-appear-left {
+    0% {
+        transform: translate(-100%, -50%);
+    }
+
+    100% {
+        transform: translate(0, -50%);
+    }
+}
+
+@keyframes apply-bar-appear-right {
+    0% {
+        transform: translate(100%, -50%);
+    }
+
+    100% {
+        transform: translate(0, -50%);
+    }
+}
+
+@keyframes apply-bar-disappear-left {
+    0% {
+        opacity: 100%;
+        transform: translate(0, -50%);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(-100%, -50%);
+    }
+}
+
+@keyframes apply-bar-disappear-right {
+    0% {
+        opacity: 100%;
+        transform: translate(0, -50%);
+    }
+
+    100% {
+        opacity: 0%;
+        transform: translate(100%, -50%);
+    }
+}
+
+.apply-bar-mask {
+    z-index: 500;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.apply-bar-bg {
+    border: solid var(--bd-color) 1px;
+    border: solid 1px var(--bd-color);
+    backdrop-filter: blur(30px) saturate(180%);
+    box-shadow: var(--shadow-edge-glow), var(--shadow);
+    background-color: var(--bg-color-alpha-darker);
+    border-radius: 8px;
+    transform: translate(0, -50%);
+    top: calc(50% + 15px);
+    position: absolute;
+    width: 50%;
+    height: 85%;
+}
+
+.apply-bar-content {
+    padding: 20px;
+    height: calc(100% - 40px);
+    overflow: auto;
+}
+
+.apply-bar-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 15px;
+    cursor: pointer;
+}
+
+.apply-bar-left {
+    left: 10px;
+    animation: apply-bar-appear-left .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+
+.apply-bar-right {
+    right: 10px;
+    animation: apply-bar-appear-right .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+</style>

wallitor-gui/src/components/CDialog.vue

@@ -0,0 +1,105 @@
+<template>
+    <div id="mask" v-if="visible_" @click.self="handleClose">
+        <div ref="bg" id="bg">
+            <div id="content">
+                <slot name="content"></slot>
+            </div>
+            <div id="close" @click="handleClose">
+                <el-icon :size="25">
+                    <Close />
+                </el-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick } from 'vue'
+import "@/style/cui.scss"
+
+export default defineComponent({
+    name: "CDiaLog",
+    props: {
+        "visible": {
+            type: Boolean,
+            default: false
+        },
+        width: String,
+        height: String
+    },
+    data() {
+        return {
+            visible_: false
+        }
+    },
+    watch: {
+        visible(val, _) {
+            if (val) {
+                this.visible_ = true;
+                nextTick(() => this.resize())
+            }
+            else {
+                const bg = this.$refs.bg as HTMLElement;
+                if (bg) bg.style.animation = "cui-dialog-disappear .3s ease-in";
+                setTimeout(() => { this.visible_ = false }, 295);
+            }
+        }
+    },
+    methods: {
+        handleClose() {
+            this.$emit("update:visible", false)
+        },
+        resize() {
+            const bg = this.$refs.bg as HTMLElement;
+            if (bg) {
+                bg.style.width = this.width || "500px";
+                bg.style.height = this.height || "300px";
+            }
+        }
+    },
+    mounted() {
+        if (this.visible) nextTick(() => this.resize());
+    },
+})
+</script>
+
+<style lang="scss" scoped>
+#mask {
+    z-index: 500;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    animation: cui-dialog-blur .6s;
+}
+
+#bg {
+    position: absolute;
+    width: 500px;
+    height: 300px;
+    max-width: 80%;
+    border: solid var(--bd-color) 1px;
+    background-color: var(--bg-color-solid);
+    border-radius: 8px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    animation: cui-dialog-appear .6s cubic-bezier(0, 0.6, 0.2, 1.0);
+}
+
+#content {
+    padding: 20px;
+    height: calc(100% - 40px);
+    overflow: auto;
+}
+
+#close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 15px;
+    cursor: pointer;
+}
+</style>

wallitor-gui/src/components/ItemCard.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="item-card">
         <div class="item-card-main">
-
+            <img :src="config.img" />
         </div>
         <div class="item-card-title">
             {{ config.name }}
@@ -10,11 +10,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { defineProps } from 'vue'
 import type { PropType } from 'vue'
 
 interface Config {
     name: string,
+    img: string
 }
 
 const props = defineProps({
@@ -23,4 +24,64 @@ const props = defineProps({
         required: true
     }
 })
-</script>
+</script>
+
+<style>
+:root {
+    --item-card-size: 200px;
+    --item-card-margin: 20px;
+}
+
+.item-card {
+    text-align: center;
+    width: var(--item-card-size);
+    height: var(--item-card-size);
+    margin-right: var(--item-card-margin);
+    margin-bottom: var(--item-card-margin);
+    position: relative;
+    overflow: hidden;
+    transition: .3s;
+    border-radius: 10px;
+    box-shadow: 0 0 1px 6px transparent;
+}
+
+.item-card-main {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.item-card:hover {
+    box-shadow: var(--shadow-edge-glow), var(--shadow);
+    cursor: pointer;
+    transform: scale(1.03);
+    box-shadow: 0 0 2px 5px rgba(177, 177, 177, 0.151);
+}
+
+.item-card:active {
+    transform: scale(0.95);
+}
+
+.item-card:hover .item-card-main {
+    box-shadow: inset 0px -100px 50px -50px rgba(0, 0, 0, 0.7);
+}
+
+.item-card:hover .item-card-title {
+    bottom: 0;
+}
+
+.item-card-main img {
+    width: 100%;
+    height: 100%;
+}
+
+.item-card-title {
+    position: absolute;
+    bottom: -40px;
+    right: 5px;
+    transition: .3s;
+    font-size: 30px;
+    font-weight: 400;
+    color: var(--text-color);
+}
+</style>

wallitor-gui/src/components/TitleBar.vue

@@ -57,7 +57,8 @@
 import SvgIcon from '@/components/SvgIcon.vue';
 import { ref, defineProps } from 'vue'
 import type { PropType } from 'vue'
-import { appWindow } from '@tauri-apps/api/window'
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+const appWindow = getCurrentWebviewWindow();
 
 type Mode = "win" | "mac";
 
@@ -72,6 +73,7 @@ const props = defineProps({
 })
 
 function minimize() {
+  console.log(111)
   appWindow.minimize()
 }
 
@@ -114,13 +116,13 @@ function close() {
 
 .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%);
+  border-radius: var(--titlebar-height);
+  border: solid 1px var(--bd-color);
+  backdrop-filter: blur(10px) saturate(180%);
   box-shadow: var(--shadow-edge-glow), var(--shadow);
   background-color: var(--bg-color-alpha);
 }

wallitor-gui/src/style/entry.css

@@ -0,0 +1,19 @@
+.entry-left{
+    transform: translateX(20px);
+    opacity: 0;
+}
+
+.entry-right{
+    transform: translateX(-20px);
+    opacity: 0;
+}
+
+.entry-up{
+    transform: translateY(20px);
+    opacity: 0;
+}
+
+.entry-down{
+    transform: translateY(-20px);
+    opacity: 0;
+}

wallitor-gui/src/style/global.css

@@ -37,6 +37,31 @@ html.dark {
     --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-color-alpha-darker: hsl(230 12% 14% / .93);
     --bg-hover-fill: rgb(131 131 145 / 24%);
     --bg-hover-fill-close: rgba(211, 86, 86, 0.579);
-}
+}
+
+html {
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  #app {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }

wallitor-gui/src/ts/entry.ts

@@ -0,0 +1,53 @@
+import "@/style/entry.css"
+
+const sep_time = 200;
+const default_duration = 500;
+
+export function entry(way:string,element:HTMLElement,sep:number=sep_time,callback?:()=>void):void{
+    const childs = element.children;
+    for(let i = 0;i < childs.length;i++){
+        const child = childs[i] as HTMLElement;
+        child.style.transition = "0s";
+        child.classList.add(`entry-${way}`)   
+        setTimeout(() => {
+            child.style.transition = `${default_duration/1000}s`
+            child.classList.remove(`entry-${way}`)
+        }, (i+1)*sep);
+    }
+    if(typeof callback === "function"){
+        setTimeout(callback,childs.length*sep+500)
+    }
+}
+
+export function leave(way:string,element:HTMLElement,sep:number=sep_time,callback?:()=>void):void{
+    const childs = element.children;
+    for(let i = 0;i < childs.length;i++){
+        const child = childs[i] as HTMLElement;
+        setTimeout(() => {
+            child.style.transition = `${default_duration/1000}s`
+            child.classList.add(`entry-${way}`)
+        }, (childs.length - i)*sep);
+    }
+    if(typeof callback === "function"){
+        setTimeout(callback,childs.length*sep+500)
+    }
+}
+
+export function fadeOut(element:HTMLElement,duration:number=default_duration,callback?:()=>void):void{
+    element.style.transition = `${duration/1000}s`
+    element.style.opacity = "0";
+    if(typeof callback === "function"){
+        setTimeout(callback,duration);
+    }
+}
+
+export function fadeIn(element:HTMLElement,duration:number=default_duration,callback?:()=>void):void{
+    element.style.transition = `${duration/1000}s`
+    element.style.opacity = "0";
+    setTimeout(()=>{
+        element.style.opacity = "1";
+        if(typeof callback === "function"){
+            setTimeout(callback,duration);
+        }
+    },0)
+}

wallitor-gui/src/views/HomeView.vue

@@ -1,10 +1,50 @@
 <script setup lang="ts">
+import ItemCard from '@/components/ItemCard.vue';
+import ApplyBar from '@/components/ApplyBar.vue';
+import { ref, onMounted } from 'vue';
+import { entry } from '@/ts/entry';
+interface Config {
+  name: string,
+  img: string
+}
+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);
+
+onMounted(() => {
+  const main = document.querySelector(".home-main") as HTMLElement;
+  setTimeout(() => {
+    entry("up", main, 20);
+  })
+})
+
+function openCard(config: Config) {
+  if (applyBar.value) applyBar.value.open(config);
+}
 </script>
 
 <template>
-  <main>
-    <div>
-      111
-    </div>
+  <main class="colbox home-main">
+    <ItemCard v-for="(item, index) in items" :key="index" :config="item" @click="openCard(item)"></ItemCard>
   </main>
+  <ApplyBar v-model="apply_bar_visible" ref="applyBar"></ApplyBar>
 </template>
+
+<style>
+.home-main {
+  width: calc(100% - 40px);
+  height: 100%;
+  overflow-y: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+</style>