From 6e40be90aca398d2f09f41843b3ed17463247a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=91=E8=BD=BB=E7=8B=82?= <1677568218@qq.com>
Date: Thu, 22 Dec 2022 14:42:54 +0800
Subject: [PATCH] feat: add toast comp

---
 src/components.d.ts                         |  1 +
 src/components/daisy/DToast/toast.vue       | 30 ++++++++++++++++++
 src/components/daisy/DToast/toastCreator.js | 34 +++++++++++++++++++++
 src/pages/Personalization/index.vue         | 17 ++++++-----
 tailwind.config.cjs                         | 14 ++++++++-
 5 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 src/components/daisy/DToast/toast.vue
 create mode 100644 src/components/daisy/DToast/toastCreator.js

diff --git a/src/components.d.ts b/src/components.d.ts
index b9cb938..fa692ec 100644
--- a/src/components.d.ts
+++ b/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']
   }
 }
diff --git a/src/components/daisy/DToast/toast.vue b/src/components/daisy/DToast/toast.vue
new file mode 100644
index 0000000..fff1b08
--- /dev/null
+++ b/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>
diff --git a/src/components/daisy/DToast/toastCreator.js b/src/components/daisy/DToast/toastCreator.js
new file mode 100644
index 0000000..0baa316
--- /dev/null
+++ b/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
diff --git a/src/pages/Personalization/index.vue b/src/pages/Personalization/index.vue
index 0fcd0e1..3ad44cd 100644
--- a/src/pages/Personalization/index.vue
+++ b/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">
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b81e568..fe5c058 100644
--- a/tailwind.config.cjs
+++ b/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,