feat: add toast comp

src/components.d.ts

@@ -16,5 +16,6 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Setting: typeof import('./components/Setting.vue')['default']
+    Toast: typeof import('./components/daisy/DToast/toast.vue')['default']
   }
 }

src/components/daisy/DToast/toast.vue

@@ -0,0 +1,30 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: 'success',
+  },
+  duration: {
+    type: Number,
+    default: 1500,
+  },
+})
+</script>
+
+<template>
+  <div class="toast toast-top toast-end">
+    <div class="alert alert-success">
+      <div>
+        <span flex items-center><div :class="$props.type === 'success' ? 'i-carbon:checkmark-outline' : ''" />{{ $props.message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/daisy/DToast/toastCreator.js

@@ -0,0 +1,34 @@
+import { h, render } from 'vue'
+import Toast from './toast.vue'
+
+class ToastCreator {
+  constructor(options) {
+    this.container = document.createElement('div')
+    this.options = options
+  }
+
+  createToast() {
+    const { message, type, duration } = this.options
+    const toast = h(Toast, {
+      message,
+      type,
+      duration,
+    })
+    document.body.insertBefore(this.container, document.body.firstChild)
+    render(toast, this.container)
+    setTimeout(() => {
+      this.destroyToast()
+    }, duration)
+  }
+
+  destroyToast() {
+    if (this.container) {
+      // this.container.classList.add('animate-toastAnimation')
+      render(null, this.container)
+      document.body.removeChild(this.container)
+      this.container = null
+    }
+  }
+}
+
+export default ToastCreator

src/pages/Personalization/index.vue

@@ -1,4 +1,13 @@
 <script setup>
+import ToastCreator from '~/components/daisy/DToast/toastCreator'
+const showToast = () => {
+  const toast = new ToastCreator({
+    message: '截图成功',
+    type: 'success',
+    duration: 1500,
+  })
+  toast.createToast()
+}
 const { t } = useI18n()
 
 const imgType = reactive({
@@ -34,6 +43,7 @@ const getImgLength = async () => {
 }
 const setImg = async () => {
   ImgLength = (await window.pywebview.api.setPersonalizationPrimaryImg(imgTypeStatus.value))[0]
+  showToast()
 }
 const openImgFiles = async () => {
   await window.pywebview.api.openPrimaryImgFiles()
@@ -48,13 +58,6 @@ onBeforeMount(async () => {
 
 <template>
   <div>
-    <div class="toast toast-top toast-end">
-      <div class="alert alert-success">
-        <div>
-          <span flex items-center><div i-carbon:checkmark-outline />已保存</span>
-        </div>
-      </div>
-    </div>
     <div class="hero justify-start">
       <div class="hero-content flex-col items-end !pb-0">
         <div class=" flex">

tailwind.config.cjs

@@ -1,7 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  theme: { extend: {} },
+  theme: {
+    extend: {
+      // keyframes: {
+      //   toastAnimation: {
+      //     from: { opacity: '1' },
+      //     to: { opacity: '0' },
+      //   },
+      // },
+      // animation: {
+      //   toastAnimation: 'toastAnimation 0.5s ease-out',
+      // },
+    },
+  },
   plugins: [require('daisyui')],
   daisyui: {
     styled: true,