ol-base-components 1.4.0 → 1.5.1

package/README.md

@@ -19,8 +19,10 @@ npm install ol-base-components
 
 ## 使用说明
 
-在您的 Vue 项目中，您需要在入口文件（通常是 `main.js` 或 `app.js`）中导入并使用该组件库：
+- **基本用法**：通用常规组件，ol-table   ol-search   ol-dialogTemplate
+- **带 Swagger 支持的用法**：适用于需要从 Swagger API 获取数据的场景。通过传入 `swaggerUrl` 和 `successSwaggerCallback`，可以在成功获取 Swagger 数据后初始化 Vue 实例。
 
+### 1. 基本用法
 ```javascript
 // main.js
 import Vue from "vue";
@@ -35,6 +37,29 @@ new Vue({
 }).$mount("#app");
 ```
 
+### 2. 带 Swagger 支持的用法
+```javascript
+// main.js
+import Vue from "vue";
+import App from "./App.vue";
+import OlBaseComponents from "ol-base-components"; // 导入组件库
+
+// 使用组件库
+Vue.use(OlBaseComponents, {
+  swaggerUrl: "http://192.168.xxx.xxx:20019/swagger/v1/swagger.json",
+  successSwaggerCallback: () => {
+    new Vue({
+      el: "#app",
+      router,
+      store,
+      i18n,
+      render: h => h(App)
+    });
+  }
+});
+```
+
+
 ## 组件示例
 
 ### 搜索框组件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "private": false,
   "main": "src/package/index.js",
   "scripts": {

package/src/package/index.js

@@ -104,29 +104,13 @@ function getLoginStatus() {
   return localStorage.getItem(LOGIN_STATUS_KEY) === "true";
 }
 
-export const SwaggerHandler = async (Vue, swaggerUrl) => {
-  const client = await new SwaggerClient(swaggerUrl);
-  console.log("client", client);
-  Vue.prototype.$swagger = { specification: client.spec };
-};
-
-const components = [OlTable, OlSearch, Dialog];
-
-const SWAGGER_DATA_KEY = "swaggerData"; // 存储 Swagger 数据的键
-let isLoggedIn = false; // 用于跟踪用户登录状态
-
-const install = async function (
+export const swaggerInstall = async (
   Vue,
   options = {
     swaggerUrl: "",
     successSwaggerCallback: null,
   }
-) {
-  // 遍历所有组件
-  components.map((item) => {
-    Vue.component(`ol-${item.name}`, item);
-  });
-
+) => {
   // 检查登录状态
   const isLoggedIn = getLoginStatus();
 
@@ -163,6 +147,7 @@ const install = async function (
 
     // 用户未登录或缓存数据不存在，重新请求 Swagger 数据
     try {
+      showLoading();
       const client = await SwaggerClient(options.swaggerUrl);
       const swaggerData = client.spec; // 获取 Swagger 数据
       await storeData(swaggerData); // 缓存数据到 IndexedDB
@@ -173,6 +158,7 @@ const install = async function (
         typeof options.successSwaggerCallback === "function"
       ) {
         options.successSwaggerCallback();
+        hideLoading();
       }
     } catch (error) {
       console.error("获取 Swagger 数据失败:", error);
@@ -181,6 +167,84 @@ const install = async function (
   consoleTooltip();
 };
 
+const components = [OlTable, OlSearch, Dialog];
+
+const SWAGGER_DATA_KEY = "swaggerData"; // 存储 Swagger 数据的键
+let isLoggedIn = false; // 用于跟踪用户登录状态
+
+// 自定义加载指示器
+function showLoading() {
+  // 创建样式
+  const style = document.createElement("style");
+  style.innerHTML = `
+     @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    #loading-spinner {
+      width: 50px; /* 调整大小 */
+      height: 50px; /* 调整大小 */
+      border: 8px solid rgba(255, 255, 255, 0.3);
+      border-top: 8px solid #a8c8e0; /* 与背景色协调的颜色 */
+      border-radius: 50%;
+      animation: spin 1s linear infinite; /* 添加旋转动画 */
+      margin-bottom: 10px; /* 图标和文本之间的间距 */
+    }
+    #loading {
+      background: linear-gradient(135deg, #a8c8e0, #f0f4f8); /* 更柔和的渐变背景 */
+      color: #333; /* 文本颜色 */
+    }
+   `;
+  document.head.appendChild(style);
+
+  // 创建加载指示器
+  const loadingDiv = document.createElement("div");
+  loadingDiv.id = "loading";
+  loadingDiv.style.position = "fixed";
+  loadingDiv.style.top = "0";
+  loadingDiv.style.left = "0";
+  loadingDiv.style.width = "100%";
+  loadingDiv.style.height = "100%";
+  loadingDiv.style.display = "flex"; // 使用 flexbox
+  loadingDiv.style.flexDirection = "column"; // 设置为上下排列
+  loadingDiv.style.justifyContent = "center"; // 垂直居中
+  loadingDiv.style.alignItems = "center"; // 水平居中
+
+  // 创建旋转的加载图标
+  const spinner = document.createElement("div");
+  spinner.id = "loading-spinner";
+  loadingDiv.appendChild(spinner);
+
+  // 添加文本
+  const loadingText = document.createElement("div");
+  loadingText.innerText = "初始化数据中，请耐心等待...";
+  loadingDiv.appendChild(loadingText);
+
+  document.body.appendChild(loadingDiv);
+}
+
+function hideLoading() {
+  const loadingDiv = document.getElementById("loading");
+  if (loadingDiv) {
+    document.body.removeChild(loadingDiv);
+  }
+}
+
+const install = async function (
+  Vue,
+  options = {
+    swaggerUrl: "",
+    successSwaggerCallback: null,
+  }
+) {
+  // 遍历所有组件
+  components.map((item) => {
+    Vue.component(`ol-${item.name}`, item);
+  });
+  swaggerInstall(Vue, options);
+  consoleTooltip();
+};
+
 // 提供一个方法用于用户退出登录时调用
 export const OlLogout = async function () {
   // 重置登录状态