Add Dialog

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"/></svg>

wallitor-gui/src/assets/svgs/keyboard-arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z"/></svg>

wallitor-gui/src/components/AddItem.vue

@@ -0,0 +1,83 @@
+<template>
+    <div ref="bg" class="item-add-bg" :class="{
+        'item-add-show': visible,
+    }">
+        <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">
+                    <template v-if="visible">
+                        <SvgIcon name="keyboard-arrow-down" size="20px"></SvgIcon>
+                    </template>
+                    <template v-else>
+                        <SvgIcon name="add" size="20px"></SvgIcon>
+                    </template>
+                </div>
+                <div class="item-add-header-item item-add-header-title">
+                    <div>添加</div>
+                </div>
+            </header>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineExpose, defineModel, ref } from 'vue';
+import SvgIcon from './SvgIcon.vue';
+const visible = defineModel<boolean>();
+const bg = ref<HTMLDivElement | null>(null);
+defineExpose({ open })
+</script>
+
+<style>
+.item-add-bg {
+    border: solid var(--bd-color) 1px;
+    backdrop-filter: blur(30px) saturate(180%);
+    box-shadow: var(--shadow-edge-glow), var(--shadow);
+    background-color: var(--bg-color-alpha-darker);
+    border-radius: 8px;
+    left: 50%;
+    top: calc(100% - 60px);
+    transform: translate(-50%, 0);
+    position: absolute;
+    width: 85%;
+    height: calc(100% - 60px);
+    transition: .8s cubic-bezier(0.9, 0, 0, 1.1);
+}
+
+.item-add-show {
+    top: 60px;
+}
+
+.item-add-content {
+    padding: 10px;
+    height: calc(100% - 20px);
+    overflow: auto;
+}
+
+.item-add-header-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 5px;
+    background-color: #3b93ff;
+    transition: .3s;
+    align-items: center;
+    justify-content: center;
+}
+
+.item-add-header-icon:hover {
+    background-color: #1e5daa;
+    cursor: pointer;
+}
+
+.item-add-header-item {
+    display: flex;
+    align-items: center;
+    color: var(--text-color);
+}
+
+.item-add-header-title {
+    font-size: 20px;
+    font-weight: 500;
+    margin-left: 10px;
+}
+</style>

wallitor-gui/src/components/ApplyBar.vue

@@ -115,7 +115,6 @@ function open(conFig: Config) {
 
 .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);

wallitor-gui/src/components/SvgIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <svg :style="{ width, height}">
+    <svg :style="{ width: size, height: size }">
         <use :href="prefix + name" :fill="color"></use>
     </svg>
 </template>
@@ -18,13 +18,9 @@ defineProps({
         type: String,
         default: "#ffffff"
     },
-    width: {
+    size: {
         type: String,
         default: "16px"
     },
-    height: {
-        type: String,
-        default: "16px"
-    }
 });
 </script>

wallitor-gui/src/components/TitleBar.vue

@@ -28,24 +28,24 @@
       <div class="titlebar-button-wrapper colbox">
         <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
           <div class="titlebar-button-rect">
-            <svg-icon name="window-minimize" :width="button_size_default" :height="button_size_default"></svg-icon>
+            <svg-icon name="window-minimize" :size="button_size_default"></svg-icon>
           </div>
         </div>
         <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
           <template v-if="maximized">
             <div class="titlebar-button-rect">
-              <svg-icon name="window-maximized" :width="button_size_alter" :height="button_size_alter"></svg-icon>
+              <svg-icon name="window-maximized" :size="button_size_alter"></svg-icon>
             </div>
           </template>
           <template v-else>
             <div class="titlebar-button-rect">
-              <svg-icon name="window-maximize" :width="button_size_alter" :height="button_size_alter"></svg-icon>
+              <svg-icon name="window-maximize" :size="button_size_alter"></svg-icon>
             </div>
           </template>
         </div>
         <div class="titlebar-button" id="titlebar-close" @click="close">
           <div class="titlebar-button-rect">
-            <svg-icon name="window-close" :width="button_size_default" :height="button_size_default"></svg-icon>
+            <svg-icon name="window-close" :size="button_size_default"></svg-icon>
           </div>
         </div>
       </div>
@@ -106,12 +106,12 @@ function close() {
 
 .titlebar-icon-title {
   font-weight: 500;
-  font-size: 20px;
+  font-size: 23px;
   margin-left: 10px;
 }
 
 .titlebar-icon {
-  height: calc(var(--titlebar-height) - 10px);
+  height: var(--titlebar-height);
 }
 
 .titlebar-button-wrapper {

wallitor-gui/src/views/HomeView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ItemCard from '@/components/ItemCard.vue';
 import ApplyBar from '@/components/ApplyBar.vue';
+import AddItem from '@/components/AddItem.vue';
 import { ref, onMounted } from 'vue';
 import { entry } from '@/ts/entry';
 interface Config {
@@ -16,6 +17,7 @@ const items = ref<Config[]>([{
 }])
 const apply_bar_visible = ref(false);
 const applyBar = ref<InstanceType<typeof ApplyBar> | null>(null);
+const item_add_visible = ref(false);
 
 onMounted(() => {
   const main = document.querySelector(".home-main") as HTMLElement;
@@ -34,6 +36,7 @@ function openCard(config: Config) {
     <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>
+  <AddItem v-model="item_add_visible"></AddItem>
 </template>
 
 <style>