fdb2 1.0.0

package/src/components/dataGrid/pagination.vue

@@ -0,0 +1,106 @@
+<template>
+    <!-- 分页组件 -->
+    <nav aria-label="Page navigation" class="px-3">
+        <ul class="pagination">
+            <li class="page-item" :class="{ disabled: currentPage === 1 }">
+                <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
+            </li>
+            
+            <!-- 生成页码列表 -->
+            <li v-for="page in visiblePages" 
+                :key="page" 
+                class="page-item" 
+                :class="{ disabled: page==='...', active: currentPage===page }">
+                <a class="page-link" 
+                    href="#" 
+                    @click.prevent="goToPage(page)"
+                    :tabindex="page==='...'? -1 : 0">
+                    {{ page }}
+                </a>
+            </li>
+            
+            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
+                <a class="page-link" href="#" @click.prevent="nextPage">下一页</a>
+            </li>
+        </ul>
+    </nav>
+</template>
+    
+<script setup lang="ts">
+import { computed } from 'vue';
+    
+const props = defineProps({
+    // 总页数
+    totalPages: {
+        type: Number,
+        default: 1
+    },
+    currentPage: {
+        type: Number,
+        default: 1,
+    },
+});
+
+const emits = defineEmits(['pageChanged']);
+
+// 可见的页码列表（包括省略号）
+const visiblePages = computed(() => {
+    const pages = [] as Array<any>;
+    const maxVisiblePages = 5; // 最大可见页码数（不包括省略号）
+    const current = props.currentPage;
+    
+    // 总页数较少时，显示所有页码
+    if (props.totalPages <= maxVisiblePages) {
+        for (let i = 1; i <= props.totalPages; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    
+    // 总页数较多时，智能显示部分页码
+    if (current <= 3) {
+        // 当前页在前3页，显示前5页
+        pages.push(1, 2, 3, 4, 5);
+        pages.push('...');
+        pages.push(props.totalPages);
+    } else if (current >= props.totalPages - 2) {
+        // 当前页在后3页，显示后5页
+        pages.push(1);
+        pages.push('...');
+        pages.push(props.totalPages - 4, props.totalPages - 3, props.totalPages - 2, props.totalPages - 1, props.totalPages);
+    } else {
+        // 当前页在中间，显示当前页及其前后2页
+        pages.push(1);
+        pages.push('...');
+        pages.push(current - 2, current - 1, current, current + 1, current + 2);
+        pages.push('...');
+        pages.push(props.totalPages);
+    }
+    return pages;
+});
+
+// 上一页
+const prevPage = () => {
+    if (props.currentPage > 1) {
+        emits('pageChanged', props.currentPage - 1);
+    }
+};
+
+// 下一页
+const nextPage = () => {
+    if (props.currentPage < props.totalPages) {
+        emits('pageChanged', props.currentPage + 1);
+    }
+};
+
+// 跳转到指定页
+const goToPage = (page: number|string) => {
+    if (typeof page === 'number' && page >= 1 && page <= props.totalPages) {
+        emits('pageChanged', page);
+    }
+};
+</script>
+    
+<style scoped>
+    
+</style>  

package/src/components/loading/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="loading-overlay" v-if="isLoading">
+      <div class="loading-spinner">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+        <p v-if="message" class="m-3 text-primary">{{ message }}</p>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  
+  const props = defineProps({
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    message: {
+      type: String,
+      default: '加载中...'
+    }
+  })
+  </script>
+  
+  <style scoped>
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1050;
+  }
+  
+  .loading-spinner {
+    text-align: center;
+  }
+  </style>  

package/src/components/modal/index.ts

@@ -0,0 +1,181 @@
+import { createApp, getCurrentInstance, nextTick } from 'vue';
+import BootstrapModal from './index.vue';
+
+export type ModalType = {
+  show: () => void,
+  hide: () => void,
+  open: () => void,
+  close: () => void,
+};
+
+// modal方法类型定义
+const modalMethods = {
+  alert: {} as (options: ModalOptions | string) => Promise<boolean>,
+  confirm: {} as (options: ModalOptions | string) => Promise<boolean>,
+  success: {} as (content: string) => Promise<boolean>,
+  error: {} as (content: string, details?: any) => Promise<boolean>,
+  warning: {} as (content: string) => Promise<boolean>,
+  info: {} as (content: string) => Promise<boolean>,
+  showModal: {} as (options: ModalOptions) => Promise<boolean>
+};
+
+export type ModalTypeWithMethods = ModalType & typeof modalMethods;
+
+export type ModalOptions = {
+  title?: string;
+  content?: string;
+  type?: 'success' | 'error' | 'warning' | 'info';
+  confirmText?: string;
+  cancelText?: string;
+  showCancel?: boolean;
+  details?: any;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+};
+
+// 全局modal实例
+let globalModalInstance: any = null;
+let modalInstance: ModalTypeWithMethods;
+
+export default {
+  install(app: any) {
+    // 挂载到DOM
+    const mount = document.createElement('div');
+    document.body.appendChild(mount);
+    
+    // 创建实例
+    const modalApp = createApp(BootstrapModal);
+    globalModalInstance = modalApp.mount(mount) as any;
+    
+    // 添加事件监听，确保模态框完全隐藏后重置 isModalActive
+    if (globalModalInstance && globalModalInstance.$el) {
+      const modalElement = globalModalInstance.$el;
+      modalElement.addEventListener('hidden.bs.modal', () => {
+        isModalActive = false;
+        console.log('Modal hidden, isModalActive reset to false');
+        
+        // 处理待显示的modal
+        if (pendingModalOptions) {
+          const pending = pendingModalOptions;
+          pendingModalOptions = null;
+          showModal(pending);
+        }
+      });
+    }
+    
+    // 全局注入
+    app.config.globalProperties.$modal = modalInstance = {
+      show: () => globalModalInstance.show(),
+      hide: () => globalModalInstance.hide(),
+      open: () => globalModalInstance.show(),
+      close: () => globalModalInstance.hide(),
+      // 新增方法
+      alert(options: ModalOptions | string) {
+        const opts = typeof options === 'string' 
+          ? { content: options, type: 'info' as const, showCancel: false }
+          : { ...options, showCancel: false };
+        return showModal(opts);
+      },
+      confirm(options: ModalOptions | string) {
+        const opts = typeof options === 'string'
+          ? { content: options, type: 'warning' as const }
+          : { ...options, showCancel: true };
+        return showModal(opts);
+      },
+      success(content: string) {
+        return this.alert({ content, type: 'success' as const, confirmText: '确定' });
+      },
+      error(content: string, details?: any) {
+        return this.alert({ content, type: 'error' as const, confirmText: '确定', details });
+      },
+      warning(content: string) {
+        return this.alert({ content, type: 'warning' as const, confirmText: '确定' });
+      },
+      info(content: string) {
+        return this.alert({ content, type: 'info' as const, confirmText: '确定' });
+      },
+    } as ModalTypeWithMethods;
+  },
+  get() {
+    const instance  = getCurrentInstance();
+    if(!instance ) return null;
+    // @ts-ignore
+    const modal = instance.appContext.config?.globalProperties?.$modal as ModalTypeWithMethods;
+    return modal;
+  }
+};
+
+export const getModalInstance = (): ModalTypeWithMethods => {
+  return modalInstance;
+}
+
+// 全局modal状态管理
+let isModalActive = false;
+let pendingModalOptions: ModalOptions | null = null;
+
+// 导出便捷函数供非Vue环境使用
+export const showModal = (options: ModalOptions) => {
+  if (!globalModalInstance) return Promise.resolve(false);
+
+  return new Promise<boolean>((resolve) => {
+    const finalOptions = {
+      title: '提示',
+      confirmText: '确定',
+      cancelText: '取消',
+      showCancel: false,
+      type: 'info',
+      ...options,
+      onConfirm: () => {
+        options.onConfirm?.();
+        globalModalInstance.hide();
+        nextTick(() => {
+          resolve(true);
+        });
+      },
+      onCancel: () => {
+        options.onCancel?.();
+        globalModalInstance.hide();
+        nextTick(() => {
+          resolve(false);
+        });
+      }
+    };
+
+    // 如果当前有modal正在显示，将新的请求加入队列
+    if (isModalActive) {
+      console.log('Modal busy, queuing new modal');
+      pendingModalOptions = options;
+      return;
+    }
+
+    // 显示新的modal
+    const showModalInstance = () => {
+      globalModalInstance.setOptions?.(finalOptions);
+      isModalActive = true;
+      
+      // 使用Promise链确保正确的执行顺序
+      return globalModalInstance.show?.() || Promise.resolve();
+    };
+
+    showModalInstance();
+  });
+};
+
+export const showAlert = (content: string, type: 'success' | 'error' | 'warning' | 'info' = 'info', details?: any) => {
+  return showModal({
+    content,
+    type,
+    showCancel: false,
+    details
+  });
+};
+
+export const showConfirm = (content: string, options?: Omit<ModalOptions, 'content' | 'showCancel'>) => {
+  return showModal({
+    title: '确认',
+    content,
+    type: 'warning',
+    showCancel: true,
+    ...options
+  });
+};