add

2025-11-12 17:24:55 +08:00
parent 8159f03e8c
commit 6dd4a9a41a
16 changed files with 0 additions and 0 deletions
--- a/frontend/asset-assistant-system/assets/js/components/loading.js
+++ b/frontend/asset-assistant-system/assets/js/components/loading.js
@@ -0,0 +1,94 @@
+/**
+ * 全局加载动画组件
+ */
+window.Loading = {
+  /**
+   * 初始化加载容器
+   */
+  init() {
+    let container = $('#loading-container');
+    if (!container.length) {
+      container = $('<div id="loading-container" class="loading-container"></div>');
+      const loadingHtml = `
+        <div class="loading-mask"></div>
+        <div class="loading-spinner">
+          <div class="spinner"></div>
+          <div class="loading-text">加载中...</div>
+        </div>
+      `;
+      container.html(loadingHtml);
+      $('body').append(container);
+    }
+    return container;
+  },
+
+  /**
+   * 显示加载动画
+   * @param {string} text - 加载提示文本
+   */
+  show(text = '加载中...') {
+    const container = this.init();
+    container.find('.loading-text').text(text);
+    container.css('display', 'flex');
+  },
+
+  /**
+   * 隐藏加载动画
+   */
+  hide() {
+    const container = $('#loading-container');
+    if (container.length) {
+      container.css('display', 'none');
+    }
+  }
+};
+
+// 添加加载动画样式
+$('head').append(`
+  <style>
+    .loading-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 99999;
+    }
+    .loading-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(2px);
+    }
+    .loading-spinner {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      z-index: 1;
+    }
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid rgba(30, 136, 229, 0.3);
+      border-top: 4px solid var(--primary-color);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 12px;
+    }
+    .loading-text {
+      color: var(--text-primary);
+      font-size: 16px;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+`);