增加全局通知弹框

Author: allennaur

src/App.vue

@@ -1,14 +1,18 @@
 <template>
   <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <!-- 添加全局Toast组件 -->
+  <Toast />
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+import Toast from './components/common/Toast.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    HelloWorld,
+    Toast
   }
 }
 </script>

src/components/JsonTool.vue

@@ -130,17 +130,13 @@
       </div>
     </div>
 
-    <!-- 复制成功提示 -->
-    <div class="toast-container" :class="{ 'toast-show': showToast }">
-      <div class="toast-message">
-        <i class="fas fa-check-circle toast-icon"></i>
-        <span>{{ toastMessage }}</span>
-      </div>
-    </div>
+    <!-- 移除局部 Toast 组件 -->
   </div>
 </template>
 
 <script>
+import ToastService from '@/utils/ToastService';
+
 export default {
   name: 'JsonTool',
   data() {
@@ -162,8 +158,6 @@ export default {
       initialWidth: 0,
       containerWidth: 0,
       collapsedLines: new Set(), // 记录被折叠的行
-      showToast: false,
-      toastMessage: '',
       collapsibleRanges: [], // 存储可折叠范围 [开始行, 结束行]
       lineTypes: [], // 存储每行的类型 (object-start, array-start, object-end, array-end, key-value)
       hoveredLine: null, // 当前鼠标悬浮的行
@@ -463,11 +457,11 @@ export default {
       
       navigator.clipboard.writeText(textToCopy)
         .then(() => {
-          this.showToastMessage('复制成功');
+          ToastService.success('复制成功'); // 使用成功类型
         })
         .catch(err => {
           console.error('复制失败:', err);
-          this.showToastMessage('复制失败，请手动复制');
+          ToastService.error('复制失败，请手动复制'); // 使用错误类型
         });
     },
     handleHover() {
@@ -627,13 +621,7 @@ export default {
     
     // 显示自定义提示消息
     showToastMessage(message) {
-      this.toastMessage = message;
-      this.showToast = true;
-      
-      // 3秒后自动隐藏
-      setTimeout(() => {
-        this.showToast = false;
-      }, 3000);
+      ToastService.success(message);
     },
     
     // 检查行是否可折叠
@@ -758,7 +746,7 @@ export default {
       // 处理JSON以显示在右侧
       this.processJson();
       // 提示用户
-      this.showToastMessage('已插入示例JSON数据');
+      ToastService.info('已插入示例JSON数据'); // 使用信息类型
     },
     // 压缩JSON
     compressJson() {

src/components/common/Toast.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="toast-container" :class="positionClass">
+    <transition-group name="toast">
+      <div
+        v-for="toast in visibleToasts"
+        :key="toast.id"
+        class="toast-message"
+        :class="['toast-' + toast.type]"
+      >
+        <i :class="getIconClass(toast.type)" class="toast-icon"></i>
+        <span>{{ toast.message }}</span>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import ToastService from '@/utils/ToastService';
+import { computed } from 'vue';
+
+export default {
+  name: 'Toast',
+  setup() {
+    // 获取当前可见的消息
+    const visibleToasts = computed(() => ToastService.getVisibleToasts());
+    
+    // 根据位置计算CSS类
+    const positionClass = computed(() => {
+      const positions = new Set(visibleToasts.value.map(toast => toast.position || 'top'));
+      return Array.from(positions).map(pos => `position-${pos}`);
+    });
+    
+    // 获取图标类名
+    const getIconClass = (type) => {
+      switch (type) {
+        case 'success': return 'fas fa-check-circle';
+        case 'error': return 'fas fa-times-circle';
+        case 'warning': return 'fas fa-exclamation-triangle';
+        case 'info': return 'fas fa-info-circle';
+        default: return 'fas fa-info-circle';
+      }
+    };
+    
+    return {
+      visibleToasts,
+      positionClass,
+      getIconClass,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  pointer-events: none;
+}
+
+.position-top {
+  top: 20px;
+}
+
+.position-bottom {
+  bottom: 20px;
+}
+
+.toast-message {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 10px 16px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  margin: 8px 0;
+  max-width: 80%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  pointer-events: auto;
+}
+
+.toast-success {
+  background: rgba(38, 166, 91, 0.9);
+}
+
+.toast-error {
+  background: rgba(235, 59, 90, 0.9);
+}
+
+.toast-warning {
+  background: rgba(255, 159, 67, 0.9);
+}
+
+.toast-info {
+  background: rgba(0, 122, 255, 0.9);
+}
+
+.toast-icon {
+  font-size: 16px;
+}
+
+/* 动画效果 */
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+</style>

src/utils/ToastService.js

@@ -0,0 +1,81 @@
+import { reactive } from 'vue';
+
+// 创建一个响应式状态存储 toast 状态
+const state = reactive({
+  queue: [], // 消息队列
+  visibleToasts: [], // 当前可见的消息
+  nextId: 0, // 用于生成唯一ID
+});
+
+// 默认配置
+const defaultOptions = {
+  duration: 3000, // 消息显示时长
+  type: 'info', // 消息类型：info, success, warning, error
+  position: 'top', // 位置：top, bottom
+};
+
+export default {
+  // 向队列添加消息
+  show(message, options = {}) {
+    const id = state.nextId++;
+    const toast = {
+      id,
+      message,
+      ...defaultOptions,
+      ...options,
+      visible: true,
+      createdAt: Date.now(),
+    };
+    
+    // 添加到队列
+    state.queue.push(toast);
+    
+    // 添加到可见列表
+    state.visibleToasts.push(toast);
+    
+    // 设置超时自动关闭
+    setTimeout(() => {
+      this.hide(id);
+    }, toast.duration);
+    
+    return id;
+  },
+  
+  // 隐藏指定ID的消息
+  hide(id) {
+    const index = state.visibleToasts.findIndex(toast => toast.id === id);
+    if (index !== -1) {
+      state.visibleToasts.splice(index, 1);
+    }
+  },
+  
+  // 快捷方法：成功消息
+  success(message, options = {}) {
+    return this.show(message, { ...options, type: 'success' });
+  },
+  
+  // 快捷方法：错误消息
+  error(message, options = {}) {
+    return this.show(message, { ...options, type: 'error' });
+  },
+  
+  // 快捷方法：警告消息
+  warning(message, options = {}) {
+    return this.show(message, { ...options, type: 'warning' });
+  },
+  
+  // 快捷方法：信息消息
+  info(message, options = {}) {
+    return this.show(message, { ...options, type: 'info' });
+  },
+  
+  // 获取当前可见消息列表
+  getVisibleToasts() {
+    return state.visibleToasts;
+  },
+  
+  // 清除所有消息
+  clear() {
+    state.visibleToasts.length = 0;
+  }
+};