fdb2 1.0.7 → 1.0.9

package/src/components/toast/index.ts

@@ -1,44 +1,44 @@
-import { createApp, getCurrentInstance } from 'vue';
-import BootstrapToast from './toast.vue';
-import { setGlobalToast } from '@/utils/toast';
-
-export type ToastType = {
-  show: (message: string, title: string, type: string, duration?: number) => void,
-  success: (msg: string, title?: string, duration?: number) => void,
-  error: (msg: string, title?: string, duration?: number) => void,
-  warning: (msg: string, title?: string, duration?: number) => void,
-  info: (msg: string, title?: string, duration?: number) => void
-};
-
-export default {
-  install(app: any) {
-    // 挂载到DOM
-    const toastMount = document.createElement('div');
-    document.body.appendChild(toastMount);
-    
-    // 创建Toast实例
-    const toastApp = createApp(BootstrapToast);
-    const toastInstance = toastApp.mount(toastMount) as any;
-    
-    const toastMethods = {
-      show: (message: string, title: string, type: string, duration = 3000) => toastInstance.addToast(title, message, type, duration),
-      success: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'success', duration),
-      error: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'danger', duration),
-      warning: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'warning', duration),
-      info: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'info', duration)
-    } as ToastType;
-    
-    // 设置全局toast实例
-    setGlobalToast(toastMethods);
-    
-    // 全局注入
-    app.config.globalProperties.$toast = toastMethods;
-  },
-  getToast() {
-    const instance  = getCurrentInstance();
-    if(!instance ) return null;
-    // @ts-ignore
-    const toast = instance.appContext.config?.globalProperties?.$toast as ToastType;
-    return toast;
-  }
+import { createApp, getCurrentInstance } from 'vue';
+import BootstrapToast from './toast.vue';
+import { setGlobalToast } from '@/utils/toast';
+
+export type ToastType = {
+  show: (message: string, title: string, type: string, duration?: number) => void,
+  success: (msg: string, title?: string, duration?: number) => void,
+  error: (msg: string, title?: string, duration?: number) => void,
+  warning: (msg: string, title?: string, duration?: number) => void,
+  info: (msg: string, title?: string, duration?: number) => void
+};
+
+export default {
+  install(app: any) {
+    // 挂载到DOM
+    const toastMount = document.createElement('div');
+    document.body.appendChild(toastMount);
+    
+    // 创建Toast实例
+    const toastApp = createApp(BootstrapToast);
+    const toastInstance = toastApp.mount(toastMount) as any;
+    
+    const toastMethods = {
+      show: (message: string, title: string, type: string, duration = 3000) => toastInstance.addToast(title, message, type, duration),
+      success: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'success', duration),
+      error: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'danger', duration),
+      warning: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'warning', duration),
+      info: (msg: string, title?: string, duration = 3000) => toastInstance.addToast(title, msg, 'info', duration)
+    } as ToastType;
+    
+    // 设置全局toast实例
+    setGlobalToast(toastMethods);
+    
+    // 全局注入
+    app.config.globalProperties.$toast = toastMethods;
+  },
+  getToast() {
+    const instance  = getCurrentInstance();
+    if(!instance ) return null;
+    // @ts-ignore
+    const toast = instance.appContext.config?.globalProperties?.$toast as ToastType;
+    return toast;
+  }
 };

package/src/components/toast/toast.vue

@@ -1,58 +1,58 @@
-<template>
-    <div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
-      <div 
-        :class="`toast show bg-${toast.type==='error'?'danger': toast.type}-subtle ${toast.removed? 'fade-out': ''}`"
-        role="alert"
-        v-for="(toast, index) in toasts"
-        :key="index"
-      >
-        <div class="toast-header" v-if="toast.title">
-          <strong class="me-auto">{{ toast.title }}</strong>
-          <button 
-            type="button" 
-            class="btn-close" 
-            @click="removeToast(index)"
-          ></button>
-        </div>
-        <div class="toast-body">{{ toast.message }}</div>
-      </div>
-    </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import { reactive } from 'vue';
-  
-  const toasts = reactive<Array<any>>([]);
-  const addToast = (title: string, message: string, type: string = 'success', duration = 3000) => {
-    const toast = { title, message, type, removed: false };
-    toasts.push(toast);
-    setTimeout(() => removeToast(toast), duration);
-  };
-  const removeToast = (toast: any) => {
-    const index = toasts.indexOf(toast);
-    if(index < 0) return;
-    toasts[index].removed = true;
-    //console.log('remove toast', toast);
-    setTimeout(()=>{
-      toasts.splice(index, 1);
-    }, 1000);
-  };
-  
-  // 暴露方法供全局调用
-  defineExpose({ addToast });
-  </script>
-  
-  <style scoped>
-  /* 覆盖Bootstrap默认样式 */
-  .toast-container {
-    z-index: 1100;
-  }
-
-  .fade-out {
-    animation: fadeOut 1s forwards;
-  }
-  @keyframes fadeOut {
-    0% { opacity: 1; transform: translateY(0); }
-    100% { opacity: 0;  transform: translateY(-120%);}
-  }
+<template>
+    <div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
+      <div 
+        :class="`toast show bg-${toast.type==='error'?'danger': toast.type}-subtle ${toast.removed? 'fade-out': ''}`"
+        role="alert"
+        v-for="(toast, index) in toasts"
+        :key="index"
+      >
+        <div class="toast-header" v-if="toast.title">
+          <strong class="me-auto">{{ toast.title }}</strong>
+          <button 
+            type="button" 
+            class="btn-close" 
+            @click="removeToast(index)"
+          ></button>
+        </div>
+        <div class="toast-body">{{ toast.message }}</div>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { reactive } from 'vue';
+  
+  const toasts = reactive<Array<any>>([]);
+  const addToast = (title: string, message: string, type: string = 'success', duration = 3000) => {
+    const toast = { title, message, type, removed: false };
+    toasts.push(toast);
+    setTimeout(() => removeToast(toast), duration);
+  };
+  const removeToast = (toast: any) => {
+    const index = toasts.indexOf(toast);
+    if(index < 0) return;
+    toasts[index].removed = true;
+    //console.log('remove toast', toast);
+    setTimeout(()=>{
+      toasts.splice(index, 1);
+    }, 1000);
+  };
+  
+  // 暴露方法供全局调用
+  defineExpose({ addToast });
+  </script>
+  
+  <style scoped>
+  /* 覆盖Bootstrap默认样式 */
+  .toast-container {
+    z-index: 1100;
+  }
+
+  .fade-out {
+    animation: fadeOut 1s forwards;
+  }
+  @keyframes fadeOut {
+    0% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0;  transform: translateY(-120%);}
+  }
   </style>

package/src/components/user/name.vue

@@ -1,104 +1,104 @@
-<template>
-    <span v-if="loading" class="text-muted">
-      <i class="bi bi-hourglass-split"></i> 加载中...
-    </span>
-    <span v-else-if="error" class="text-danger">
-      <i class="bi bi-exclamation-circle"></i> 加载失败
-    </span>
-    <span v-else-if="userInfo" class="user-info" :title="userInfo.id">
-      <span class="user-name">{{ userInfo.name }}</span>
-      <span class="user-phone ms-2 text-secondary" v-if="userInfo.mobile">({{ formatPhone(userInfo.mobile) }})</span>
-    </span>
-    <span v-else class="text-secondary">未知用户</span>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, watch, onMounted } from 'vue';
-  import * as userServer from '@/service/account'; // 假设用户服务路径
-  
-  // 接收父组件传入的用户ID
-  const props = defineProps<{
-    userId?: number | null
-  }>();
-  
-  // 组件内部状态
-  const userInfo = ref<any>(null);
-  const loading = ref(false);
-  const error = ref(false);
-  
-  // 缓存已查询过的用户信息，避免重复请求
-  const userCache = new Map<number, any>();
-  
-  // 格式化手机号（13800138000 -> 138****8000）
-  const formatPhone = (phone: string) => {
-    // if (phone.length === 11) {
-    //   return `${phone.slice(0, 3)}****${phone.slice(7)}`;
-    // }
-    return phone;
-  };
-  
-  // 根据用户ID获取用户信息
-  const fetchUserInfo = async (userId: number | null | undefined) => {
-    // 如果没有用户ID，直接清空显示
-    if (!userId || userId <= 0) {
-      userInfo.value = null;
-      return;
-    }
-  
-    // 检查缓存，如果有直接使用
-    if (userCache.has(userId)) {
-      userInfo.value = userCache.get(userId) || null;
-      return;
-    }
-  
-    // 发起请求获取用户信息
-    loading.value = true;
-    error.value = false;
-    
-    try {
-      const res = await userServer.getUserDetail(userId);
-      if (res.ret === 0 && res.data) {
-        const user = res.data;
-        userInfo.value = user;
-        userCache.set(userId, user); // 存入缓存
-      } else {
-        throw new Error(res.msg || '获取用户信息失败');
-      }
-    } catch (err) {
-      console.error('获取用户信息失败:', err);
-      error.value = true;
-      userInfo.value = null;
-    } finally {
-      loading.value = false;
-    }
-  };
-  
-  // 当用户ID变化时重新获取信息
-  watch(
-    () => props.userId,
-    (newUserId) => {
-      fetchUserInfo(newUserId);
-    },
-    { immediate: true } // 组件初始化时立即执行
-  );
-  
-  // 组件挂载时执行一次
-  onMounted(() => {
-    fetchUserInfo(props.userId);
-  });
-  </script>
-  
-  <style scoped>
-  .user-name {
-    color: var(--bs-primary);
-  }
-  
-  .user-name:hover {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-  
-  .user-phone {
-    font-size: 0.875rem;
-  }
+<template>
+    <span v-if="loading" class="text-muted">
+      <i class="bi bi-hourglass-split"></i> 加载中...
+    </span>
+    <span v-else-if="error" class="text-danger">
+      <i class="bi bi-exclamation-circle"></i> 加载失败
+    </span>
+    <span v-else-if="userInfo" class="user-info" :title="userInfo.id">
+      <span class="user-name">{{ userInfo.name }}</span>
+      <span class="user-phone ms-2 text-secondary" v-if="userInfo.mobile">({{ formatPhone(userInfo.mobile) }})</span>
+    </span>
+    <span v-else class="text-secondary">未知用户</span>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, watch, onMounted } from 'vue';
+  import * as userServer from '@/service/account'; // 假设用户服务路径
+  
+  // 接收父组件传入的用户ID
+  const props = defineProps<{
+    userId?: number | null
+  }>();
+  
+  // 组件内部状态
+  const userInfo = ref<any>(null);
+  const loading = ref(false);
+  const error = ref(false);
+  
+  // 缓存已查询过的用户信息，避免重复请求
+  const userCache = new Map<number, any>();
+  
+  // 格式化手机号（13800138000 -> 138****8000）
+  const formatPhone = (phone: string) => {
+    // if (phone.length === 11) {
+    //   return `${phone.slice(0, 3)}****${phone.slice(7)}`;
+    // }
+    return phone;
+  };
+  
+  // 根据用户ID获取用户信息
+  const fetchUserInfo = async (userId: number | null | undefined) => {
+    // 如果没有用户ID，直接清空显示
+    if (!userId || userId <= 0) {
+      userInfo.value = null;
+      return;
+    }
+  
+    // 检查缓存，如果有直接使用
+    if (userCache.has(userId)) {
+      userInfo.value = userCache.get(userId) || null;
+      return;
+    }
+  
+    // 发起请求获取用户信息
+    loading.value = true;
+    error.value = false;
+    
+    try {
+      const res = await userServer.getUserDetail(userId);
+      if (res.ret === 0 && res.data) {
+        const user = res.data;
+        userInfo.value = user;
+        userCache.set(userId, user); // 存入缓存
+      } else {
+        throw new Error(res.msg || '获取用户信息失败');
+      }
+    } catch (err) {
+      console.error('获取用户信息失败:', err);
+      error.value = true;
+      userInfo.value = null;
+    } finally {
+      loading.value = false;
+    }
+  };
+  
+  // 当用户ID变化时重新获取信息
+  watch(
+    () => props.userId,
+    (newUserId) => {
+      fetchUserInfo(newUserId);
+    },
+    { immediate: true } // 组件初始化时立即执行
+  );
+  
+  // 组件挂载时执行一次
+  onMounted(() => {
+    fetchUserInfo(props.userId);
+  });
+  </script>
+  
+  <style scoped>
+  .user-name {
+    color: var(--bs-primary);
+  }
+  
+  .user-name:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  
+  .user-phone {
+    font-size: 0.875rem;
+  }
   </style>