From 89740926c53dfd7db781a19e09cdaa7b1780cdf0 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Wed, 11 Dec 2024 14:48:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E7=95=8C=E9=9D=A2=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 430 +++------------------------------
 src/components/ProjectList.vue | 408 +++++++++++++++++++++++++++++++
 2 files changed, 435 insertions(+), 403 deletions(-)
 create mode 100644 src/components/ProjectList.vue

diff --git a/src/App.vue b/src/App.vue
index 33b2986..55da46d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,15 @@
 <script setup>
-import VirtualList from './components/VirtualList.vue'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import ProjectList from './components/ProjectList.vue'
+import { ref } from 'vue'
 
-// 虚拟列表配置
+// 生成模拟数据
+const listData = Array.from({ length: 789 }, (_, i) => ({
+  id: i,
+  name: `project-${i + 1}`,
+  path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
+}))
+
+// 自定义配置
 const listConfig = {
   itemHeight: 50,
   itemPadding: 16,
@@ -10,256 +17,41 @@ const listConfig = {
   scrollDebounceTime: 16,
 }
 
-// 生成模拟数据
-const listData = Array.from({ length: 100 }, (_, i) => ({
-  id: i,
-  name: `project-${i + 1}`,
-  path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
-}))
-
-// 添加当前选中项的状态
-const selectedItem = ref(null)
-
-// 修改选择处理函数
-const handleSelect = (item) => {
-  selectedItem.value = item
-}
-
-// 添加点击处理函数
-const handleClick = (item) => {
-  console.log('Clicked:', item)
-  // 这里可以添加点击特定处理逻辑
-}
-
-// 菜单配置
+// 自定义菜单项
 const menuItems = [
   { id: 'refresh', label: '刷新列表' },
   { id: 'clear', label: '清空选择' },
   { id: 'export', label: '导出数据' },
 ]
 
-// 控制菜单显示状态
-const showMenu = ref(false)
+// 选中项
+const selectedItem = ref(null)
 
-// 添加列表冻结状态
-const listFrozen = ref(false)
-
-// 修改菜单显示状态的处理
-const showContextMenu = (data) => {
-  const { item } = data
-  // 选中该项
-  handleSelect(item)
-  // 显示菜单
-  showMenu.value = true
-  listFrozen.value = true // 冻结列表
+// 事件处理
+const handleSelect = (item) => {
+  console.log('Selected:', item)
 }
 
-// 添加一个状态来控制临时禁用鼠标悬浮
-const temporaryDisableHover = ref(false)
-let hoverDisableTimer = null
-
-// 修改关闭菜单的处理
-const closeMenu = () => {
-  showMenu.value = false
-  listFrozen.value = false
-  selectedMenuIndex.value = -1 // 重置菜单选中项
-  
-  // 临时禁用鼠标悬浮
-  temporaryDisableHover.value = true
-  if (hoverDisableTimer) clearTimeout(hoverDisableTimer)
-  hoverDisableTimer = setTimeout(() => {
-    temporaryDisableHover.value = false
-  }, 300) // 300ms 后恢复鼠标悬浮功能
-}
-
-// 添加当前选中的菜单项索引
-const selectedMenuIndex = ref(-1)
-
-// 修改键盘事件处理函数
-const handleKeyDown = (e) => {
-  if (e.key === 'ArrowRight' && !showMenu.value && selectedItem.value) {
-    e.preventDefault()
-    handleMenuTriggerClick(e)
-  } else if ((e.key === 'ArrowLeft' || e.key === 'Escape') && showMenu.value) {
-    e.preventDefault()
-    closeMenu()
-  } else if (showMenu.value) {
-    switch (e.key) {
-      case 'ArrowUp':
-        e.preventDefault()
-        selectedMenuIndex.value =
-          selectedMenuIndex.value <= 0
-            ? menuItems.length - 1
-            : selectedMenuIndex.value - 1
-        break
-      case 'ArrowDown':
-        e.preventDefault()
-        selectedMenuIndex.value =
-          selectedMenuIndex.value >= menuItems.length - 1
-            ? 0
-            : selectedMenuIndex.value + 1
-        break
-      case 'Enter':
-        e.preventDefault()
-        if (selectedMenuIndex.value >= 0) {
-          handleMenuClick(menuItems[selectedMenuIndex.value])
-          selectedMenuIndex.value = -1 // 重置菜单选中项
-        }
-        break
-    }
-  }
-}
-
-onMounted(() => {
-  // 添加全局击事件来关闭菜单
-  document.addEventListener('click', closeMenu)
-  // 添加键盘事件监听
-  document.addEventListener('keydown', handleKeyDown)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', closeMenu)
-  // 移除键盘事件监听
-  document.removeEventListener('keydown', handleKeyDown)
-  if (toastTimer) {
-    clearTimeout(toastTimer)
-  }
-  if (hoverDisableTimer) {
-    clearTimeout(hoverDisableTimer)
-  }
-})
-
-// 修改菜单击处理
 const handleMenuClick = (item) => {
   console.log('Menu clicked:', item)
-  showMenu.value = false
-  listFrozen.value = false // 解冻列表
 }
-
-// 修改菜单触发器点击处理
-const handleMenuTriggerClick = (e) => {
-  e.stopPropagation()
-  // 切换菜单显示状态
-  if (showMenu.value) {
-    showMenu.value = false
-    listFrozen.value = false // 解冻列表
-  } else {
-    // 如果有选中项，选中第一个可见项
-    if (listData.length > 0) {
-      // 如果已有选中项就保持当前选中，否则选中第一项
-      const itemToSelect = selectedItem.value || listData[0]
-      showContextMenu({ item: itemToSelect })
-    } else {
-      showMenu.value = true
-      listFrozen.value = true // 冻结列表
-    }
-  }
-}
-
-// 添加过渡钩子函数
-const onBeforeLeave = (el) => {
-  // 确保元素在离开过渡开始时可见
-  el.style.display = 'block'
-}
-
-const onAfterLeave = (el) => {
-  // 过渡结束后重置样式
-  el.style.display = ''
-}
-
-// 添加 toast 相关状态
-const toastVisible = ref(false)
-const toastMessage = ref('')
-let toastTimer = null
-
-// 添加 toast 处理函数
-const showToast = (message) => {
-  if (toastTimer) {
-    clearTimeout(toastTimer)
-  }
-  
-  toastMessage.value = message
-  toastVisible.value = true
-  
-  toastTimer = setTimeout(() => {
-    toastVisible.value = false
-  }, 3000)
-}
-
-// 在 onBeforeUnmount 中清理定时器
-onBeforeUnmount(() => {
-  if (toastTimer) {
-    clearTimeout(toastTimer)
-  }
-})
 </script>
 
 <template>
-  <div class="app-container" @contextmenu.prevent>
-    <div class="main-content">
-      <VirtualList
-        :data="listData"
-        :config="listConfig"
-        :frozen="listFrozen"
-        :disable-hover="showMenu || temporaryDisableHover"
-        @select="handleSelect"
-        @click="handleClick"
-        @contextmenu="showContextMenu"
-        @showToast="showToast"
-      />
-    </div>
-    <div class="toolbar">
-      <div class="toolbar-content">
-        <div class="total-count">共 {{ listData.length }} 项</div>
-        <div class="toolbar-spacer"></div>
-        <div
-          class="menu-trigger"
-          :class="{ active: showMenu }"
-          @click="handleMenuTriggerClick"
-        >
-          <svg viewBox="0 0 24 24" width="16" height="16">
-            <circle cx="12" cy="6" r="2" fill="currentColor" />
-            <circle cx="12" cy="12" r="2" fill="currentColor" />
-            <circle cx="12" cy="18" r="2" fill="currentColor" />
-          </svg>
-          <!-- 使用 transition 组件包裹菜单 -->
-          <transition 
-            name="menu"
-            @before-leave="onBeforeLeave"
-            @after-leave="onAfterLeave"
-          >
-            <div v-if="showMenu" class="popup-menu" @click.stop>
-              <div v-if="selectedItem" class="selected-item-info">
-                <div class="selected-item-name">{{ selectedItem.name }}</div>
-                <div class="selected-item-path">{{ selectedItem.path }}</div>
-              </div>
-              <div class="menu-divider"></div>
-              <div
-                v-for="(item, index) in menuItems"
-                :key="item.id"
-                class="menu-item"
-                :class="{ 'menu-item-selected': index === selectedMenuIndex }"
-                @click="handleMenuClick(item)"
-              >
-                {{ item.label }}
-              </div>
-            </div>
-          </transition>
-        </div>
-      </div>
-    </div>
-    <!-- 添加 Toast 组件 -->
-    <transition name="toast">
-      <div v-if="toastVisible" class="toast">
-        {{ toastMessage }}
-      </div>
-    </transition>
-  </div>
+  <ProjectList
+    v-model:selected="selectedItem"
+    :data="listData"
+    :config="listConfig"
+    :menu-items="menuItems"
+    :show-toolbar="true"
+    :toolbar-height="40"
+    @select="handleSelect"
+    @menu-click="handleMenuClick"
+  />
 </template>
 
 <style>
-html,
-body {
+html, body {
   margin: 0;
   padding: 0;
   height: 100%;
@@ -269,171 +61,3 @@ body {
   height: 100%;
 }
 </style>
-
-<style scoped>
-.app-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.main-content {
-  flex: 1;
-  min-height: 0; /* 重要：防止内容溢出 */
-}
-
-.toolbar {
-  height: 40px;
-  border-top: 1px solid #e8e8e8;
-  background-color: #fff;
-  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
-  position: relative;
-  z-index: 1;
-}
-
-.toolbar-content {
-  height: 100%;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-}
-
-.total-count {
-  font-size: 13px;
-  color: #666;
-}
-
-.toolbar-spacer {
-  flex: 1;
-}
-
-.menu-trigger {
-  position: relative;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #666;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.menu-trigger:hover {
-  background-color: #f5f5f5;
-  color: #1a1a1a;
-}
-
-.menu-trigger.active {
-  background-color: #f5f5f5;
-  color: #1a1a1a;
-}
-
-.popup-menu {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 23px;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
-              0 2px 8px rgba(0, 0, 0, 0.04);
-  min-width: 260px;
-  padding: 8px 0;
-  z-index: 1000;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  backdrop-filter: blur(12px);
-  transform-origin: top right;
-}
-
-/* 添加 transition 相关样式 */
-.menu-enter-active,
-.menu-leave-active {
-  transition: all 0.2s ease-out;
-}
-
-.menu-enter-from,
-.menu-leave-to {
-  opacity: 0;
-  transform: scale(0.95);
-}
-
-.menu-enter-to,
-.menu-leave-from {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.menu-divider {
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.06);
-  margin: 6px 0;
-}
-
-.menu-item {
-  padding: 10px 16px;
-  margin: 0 4px;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-}
-
-.menu-item:hover, .menu-item-selected {
-  background-color: rgba(79, 70, 229, 0.06);
-  color: #4f46e5;
-}
-
-.selected-item-info {
-  padding: 12px 16px;
-  margin: 0 4px 4px 4px;
-  border-radius: 8px;
-}
-
-.selected-item-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8px;
-}
-
-.selected-item-path {
-  font-size: 12px;
-  color: #666;
-  word-break: break-all;
-  line-height: 1.5;
-}
-
-/* 添加 Toast 相关样式 */
-.toast {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 12px 24px;
-  border-radius: 8px;
-  font-size: 14px;
-  z-index: 1000;
-  pointer-events: none;
-  max-width: 80%;
-  text-align: center;
-}
-
-.toast-enter-active,
-.toast-leave-active {
-  transition: all 0.3s ease;
-}
-
-.toast-enter-from,
-.toast-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -40%);
-}
-</style>
diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue
new file mode 100644
index 0000000..9b01c6a
--- /dev/null
+++ b/src/components/ProjectList.vue
@@ -0,0 +1,408 @@
+<script setup>
+import VirtualList from './VirtualList.vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  // 列表数据
+  data: {
+    type: Array,
+    required: true
+  },
+  // 虚拟列表配置
+  config: {
+    type: Object,
+    default: () => ({
+      itemHeight: 50,
+      itemPadding: 16,
+      bufferCount: 10,
+      scrollDebounceTime: 16,
+    })
+  },
+  // 菜单项配置
+  menuItems: {
+    type: Array,
+    default: () => [
+      { id: 'refresh', label: '刷新列表' },
+      { id: 'clear', label: '清空选择' },
+      { id: 'export', label: '导出数据' },
+    ]
+  },
+  // 是否显示工具栏
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  // 工具栏高度
+  toolbarHeight: {
+    type: Number,
+    default: 40
+  }
+})
+
+// 定义事件
+const emit = defineEmits([
+  'select',           // 选中项变化
+  'click',           // 点击项目
+  'menu-click',      // 点击菜单项
+  'context-menu',    // 右键菜单
+  'update:selected'  // 支持 v-model:selected
+])
+
+// 状态管理
+const selectedItem = ref(null)
+const showMenu = ref(false)
+const listFrozen = ref(false)
+const temporaryDisableHover = ref(false)
+const selectedMenuIndex = ref(-1)
+const toastVisible = ref(false)
+const toastMessage = ref('')
+
+// 定时器
+let hoverDisableTimer = null
+let toastTimer = null
+
+// 处理函数
+const handleSelect = (item) => {
+  selectedItem.value = item
+  emit('select', item)
+  emit('update:selected', item)
+}
+
+const handleClick = (item) => {
+  emit('click', item)
+}
+
+const showContextMenu = (data) => {
+  const { item } = data
+  handleSelect(item)
+  showMenu.value = true
+  listFrozen.value = true
+  emit('context-menu', data)
+}
+
+const closeMenu = () => {
+  showMenu.value = false
+  listFrozen.value = false
+  selectedMenuIndex.value = -1
+  
+  temporaryDisableHover.value = true
+  if (hoverDisableTimer) clearTimeout(hoverDisableTimer)
+  hoverDisableTimer = setTimeout(() => {
+    temporaryDisableHover.value = false
+  }, 300)
+}
+
+const handleMenuClick = (item) => {
+  emit('menu-click', item)
+  closeMenu()
+}
+
+const handleMenuTriggerClick = (e) => {
+  e.stopPropagation()
+  if (showMenu.value) {
+    closeMenu()
+  } else {
+    if (props.data.length > 0) {
+      const itemToSelect = selectedItem.value || props.data[0]
+      showContextMenu({ item: itemToSelect })
+    } else {
+      showMenu.value = true
+      listFrozen.value = true
+    }
+  }
+}
+
+const handleKeyDown = (e) => {
+  if (e.key === 'ArrowRight' && !showMenu.value && selectedItem.value) {
+    e.preventDefault()
+    handleMenuTriggerClick(e)
+  } else if ((e.key === 'ArrowLeft' || e.key === 'Escape') && showMenu.value) {
+    e.preventDefault()
+    closeMenu()
+  } else if (showMenu.value) {
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault()
+        selectedMenuIndex.value =
+          selectedMenuIndex.value <= 0
+            ? props.menuItems.length - 1
+            : selectedMenuIndex.value - 1
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        selectedMenuIndex.value =
+          selectedMenuIndex.value >= props.menuItems.length - 1
+            ? 0
+            : selectedMenuIndex.value + 1
+        break
+      case 'Enter':
+        e.preventDefault()
+        if (selectedMenuIndex.value >= 0) {
+          handleMenuClick(props.menuItems[selectedMenuIndex.value])
+        }
+        break
+    }
+  }
+}
+
+const showToast = (message) => {
+  if (toastTimer) clearTimeout(toastTimer)
+  toastMessage.value = message
+  toastVisible.value = true
+  toastTimer = setTimeout(() => {
+    toastVisible.value = false
+  }, 3000)
+}
+
+// 生命周期钩子
+onMounted(() => {
+  document.addEventListener('click', closeMenu)
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeMenu)
+  document.removeEventListener('keydown', handleKeyDown)
+  if (toastTimer) clearTimeout(toastTimer)
+  if (hoverDisableTimer) clearTimeout(hoverDisableTimer)
+})
+
+// 过渡钩子
+const onBeforeLeave = (el) => {
+  el.style.display = 'block'
+}
+
+const onAfterLeave = (el) => {
+  el.style.display = ''
+}
+</script>
+
+<template>
+  <div class="project-list-container" @contextmenu.prevent>
+    <div class="main-content">
+      <VirtualList
+        :data="data"
+        :config="config"
+        :frozen="listFrozen"
+        :disable-hover="showMenu || temporaryDisableHover"
+        @select="handleSelect"
+        @click="handleClick"
+        @contextmenu="showContextMenu"
+        @showToast="showToast"
+      />
+    </div>
+    <div v-if="showToolbar" class="toolbar" :style="{ height: `${toolbarHeight}px` }">
+      <div class="toolbar-content">
+        <div class="total-count">共 {{ data.length }} 项</div>
+        <div class="toolbar-spacer"></div>
+        <div
+          class="menu-trigger"
+          :class="{ active: showMenu }"
+          @click="handleMenuTriggerClick"
+        >
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <circle cx="12" cy="6" r="2" fill="currentColor" />
+            <circle cx="12" cy="12" r="2" fill="currentColor" />
+            <circle cx="12" cy="18" r="2" fill="currentColor" />
+          </svg>
+          <transition 
+            name="menu"
+            @before-leave="onBeforeLeave"
+            @after-leave="onAfterLeave"
+          >
+            <div v-if="showMenu" class="popup-menu" @click.stop>
+              <div v-if="selectedItem" class="selected-item-info">
+                <div class="selected-item-name">{{ selectedItem.name }}</div>
+                <div class="selected-item-path">{{ selectedItem.path }}</div>
+              </div>
+              <div class="menu-divider"></div>
+              <div
+                v-for="(item, index) in menuItems"
+                :key="item.id"
+                class="menu-item"
+                :class="{ 'menu-item-selected': index === selectedMenuIndex }"
+                @click="handleMenuClick(item)"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+    <transition name="toast">
+      <div v-if="toastVisible" class="toast">
+        {{ toastMessage }}
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+/* 保持原有样式，但将 .app-container 改为 .project-list-container */
+.project-list-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+  min-height: 0; /* 重要：防止内容溢出 */
+}
+
+.toolbar {
+  height: 40px;
+  border-top: 1px solid #e8e8e8;
+  background-color: #fff;
+  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 1;
+}
+
+.toolbar-content {
+  height: 100%;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+}
+
+.total-count {
+  font-size: 13px;
+  color: #666;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.menu-trigger {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #666;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.menu-trigger:hover {
+  background-color: #f5f5f5;
+  color: #1a1a1a;
+}
+
+.menu-trigger.active {
+  background-color: #f5f5f5;
+  color: #1a1a1a;
+}
+
+.popup-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 23px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
+              0 2px 8px rgba(0, 0, 0, 0.04);
+  min-width: 260px;
+  padding: 8px 0;
+  z-index: 1000;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(12px);
+  transform-origin: top right;
+}
+
+/* 添加 transition 相关样式 */
+.menu-enter-active,
+.menu-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.menu-enter-to,
+.menu-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.06);
+  margin: 6px 0;
+}
+
+.menu-item {
+  padding: 10px 16px;
+  margin: 0 4px;
+  font-size: 13px;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+}
+
+.menu-item:hover, .menu-item-selected {
+  background-color: rgba(79, 70, 229, 0.06);
+  color: #4f46e5;
+}
+
+.selected-item-info {
+  padding: 12px 16px;
+  margin: 0 4px 4px 4px;
+  border-radius: 8px;
+}
+
+.selected-item-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+}
+
+.selected-item-path {
+  font-size: 12px;
+  color: #666;
+  word-break: break-all;
+  line-height: 1.5;
+}
+
+/* 添加 Toast 相关样式 */
+.toast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  z-index: 1000;
+  pointer-events: none;
+  max-width: 80%;
+  text-align: center;
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -40%);
+}
+</style> 
\ No newline at end of file