toast for link sharing

package.json

@@ -14,12 +14,14 @@
   },
   "dependencies": {
     "axios": "^1.6.3",
+    "bootstrap": "^5.3.2",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
+    "@types/bootstrap": "^5.2.10",
     "@types/node": "^18.19.4",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

src/App.vue

@@ -3,7 +3,9 @@ import { ref } from 'vue'
 import type { RouterView } from 'vue-router'
 
 import PortalHeader from '@/components/PortalHeader.vue'
+import CustomToast from '@/components/CustomToast.vue'
 
+import { toasts, removeToast } from '@/utils/toast'
 import type { CanvasList, Footer } from '@/utils/types'
 
 const canvas = ref<CanvasList>({
@@ -40,4 +42,5 @@ const footer = ref<Footer>({
     <PortalHeader />
     <RouterView :footer="footer" :canvas="canvas" />
   </div>
+  <CustomToast :toasts="toasts" @remove-toast="removeToast" />
 </template>

src/components/CustomToast.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onUpdated } from 'vue'
+import { Toast } from 'bootstrap'
+
+import { isMobile } from '@/utils/device'
+import type { ToastItem } from '@/utils/toast'
+
+const props = defineProps<{
+  toasts: ToastItem[]
+}>()
+
+onUpdated(() => {
+  props.toasts
+    .filter((obj) => !obj.shown)
+    .forEach((item: ToastItem) => {
+      var toast_element = document.getElementById(item.id)!
+      var toast = new Toast(toast_element)
+      toast.show()
+      item.shown = true
+    })
+})
+</script>
+
+<template>
+  <div
+    ref="container"
+    :style="{
+      'z-index': 999,
+      'max-width': '350px',
+      width: '100%',
+      margin: '0 auto',
+      position: 'fixed',
+      padding: '1rem',
+      bottom: 0,
+      left: isMobile() ? '50%' : '0',
+      transform: isMobile() ? 'translateX(-50%)' : 'none'
+    }"
+  >
+    <div
+      v-for="item in toasts"
+      :key="item.id"
+      :id="item.id"
+      class="toast fade opacity-90"
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      data-bs-delay="2000"
+      @[`hidden.bs.toast`]="$emit('remove-toast', item.id)"
+    >
+      <div
+        class="toast show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-bs-autohide="false"
+        data-bs-toggle="toast"
+      >
+        <div class="toast-header">
+          <strong class="me-auto">{{ item.title }}</strong>
+          <button
+            type="button"
+            class="ms-2 btn-close"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="toast-body" v-if="item.detail">{{ item.detail }}</div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/ResultItem.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { showToast } from '@/utils/toast'
 import type { SearchResult } from '@/utils/types'
 
-defineProps<{
+const props = defineProps<{
   result: SearchResult
   expanded: boolean
 }>()
@@ -10,9 +11,9 @@ const copyUrl = async () => {
   try {
     const url = new URL(window.location.href)
     await navigator.clipboard.writeText(url.href)
-    alert('已复制链接到剪贴板')
+    showToast('已复制链接到剪贴板', props.result.title)
   } catch (err) {
-    alert('复制失败')
+    showToast('复制失败')
   }
 }
 </script>

src/utils/toast.ts

@@ -0,0 +1,32 @@
+import { ref } from 'vue'
+
+export type ToastItem = {
+  id: string
+  title: string
+  detail?: string
+  shown: boolean
+}
+
+export const toasts = ref<ToastItem[]>([])
+
+const TOASTS_MAX = 5
+const toast_id = ref(0)
+
+export function showToast(title: string, detail?: string) {
+  if (toasts.value.length === TOASTS_MAX) {
+    toasts.value.shift()
+  }
+  toasts.value.push({
+    id: toast_id.value.toString(),
+    title: title,
+    detail: detail,
+    shown: false
+  } as ToastItem)
+  toast_id.value++
+}
+
+export function removeToast(id: string) {
+  toasts.value = toasts.value.filter((obj) => {
+    return obj.id != id
+  })
+}