giime 1.0.2-snapshot.2 → 1.0.2

package/lib/utils/src/vue/appLoading.js

@@ -0,0 +1,248 @@
+'use strict';
+
+const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const createAppLoadingStyle = ({ primary, success }) => `
+    /* First-screen loading: injected by Vite and replaced when Vue mounts #app. */
+    #app-loading {
+      --app-loading-primary: ${primary};
+      --app-loading-success: ${success};
+
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: grid;
+      place-items: center;
+      background:
+        radial-gradient(circle at 50% 42%, rgba(33, 126, 253, 0.08), transparent 34%),
+        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
+      color: #526276;
+      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
+    }
+
+    #app-loading .app-loading__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 18px;
+    }
+
+    #app-loading .app-loading__spinner {
+      position: relative;
+      width: 72px;
+      height: 64px;
+    }
+
+    #app-loading .app-loading__spinner::before,
+    #app-loading .app-loading__spinner::after {
+      position: absolute;
+      content: '';
+    }
+
+    #app-loading .app-loading__spinner::before {
+      top: 17px;
+      left: 21px;
+      width: 30px;
+      height: 30px;
+      border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;
+      background: linear-gradient(135deg, var(--app-loading-primary), var(--app-loading-success));
+      box-shadow: 0 10px 24px rgba(33, 126, 253, 0.22);
+      animation: app-loading-blob 1.8s ease-in-out infinite;
+    }
+
+    #app-loading .app-loading__spinner::after {
+      right: 16px;
+      bottom: 2px;
+      left: 16px;
+      height: 8px;
+      border-radius: 50%;
+      background: rgba(33, 126, 253, 0.1);
+      filter: blur(2px);
+      animation: app-loading-shadow 1.8s ease-in-out infinite;
+    }
+
+    #app-loading .app-loading__bubble {
+      position: absolute;
+      top: 27px;
+      left: 31px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--app-loading-primary);
+      box-shadow: 0 0 16px rgba(33, 126, 253, 0.28);
+      animation: app-loading-bubble-one 1.8s ease-in-out infinite;
+    }
+
+    #app-loading .app-loading__bubble--second {
+      width: 8px;
+      height: 8px;
+      background: var(--app-loading-success);
+      box-shadow: 0 0 16px rgba(26, 213, 152, 0.3);
+      animation-name: app-loading-bubble-two;
+      animation-delay: -0.2s;
+    }
+
+    #app-loading .app-loading__bubble--third {
+      width: 6px;
+      height: 6px;
+      background: rgba(33, 126, 253, 0.72);
+      box-shadow: 0 0 14px rgba(33, 126, 253, 0.22);
+      animation-name: app-loading-bubble-three;
+      animation-delay: -0.38s;
+    }
+
+    #app-loading .app-loading__text {
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.08em;
+    }
+
+    #app-loading .app-loading__bar {
+      width: 120px;
+      height: 2px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: rgba(33, 126, 253, 0.1);
+    }
+
+    #app-loading .app-loading__bar i {
+      display: block;
+      width: 44%;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--app-loading-primary), var(--app-loading-success));
+      animation: app-loading-slide 1.2s ease-in-out infinite;
+    }
+
+    @keyframes app-loading-slide {
+      0% {
+        transform: translateX(-120%);
+      }
+
+      100% {
+        transform: translateX(280%);
+      }
+    }
+
+    @keyframes app-loading-blob {
+
+      0%,
+      100% {
+        border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;
+        transform: translateY(0) scale(0.96);
+      }
+
+      50% {
+        border-radius: 58% 42% 44% 56% / 42% 58% 46% 54%;
+        transform: translateY(-4px) scale(1.06);
+      }
+    }
+
+    @keyframes app-loading-shadow {
+
+      0%,
+      100% {
+        opacity: 0.68;
+        transform: scaleX(0.9);
+      }
+
+      50% {
+        opacity: 0.36;
+        transform: scaleX(1.18);
+      }
+    }
+
+    @keyframes app-loading-bubble-one {
+
+      0%,
+      100% {
+        transform: translate3d(0, -28px, 0) scale(0.82);
+      }
+
+      33% {
+        transform: translate3d(25px, 10px, 0) scale(1);
+      }
+
+      66% {
+        transform: translate3d(-25px, 10px, 0) scale(0.9);
+      }
+    }
+
+    @keyframes app-loading-bubble-two {
+
+      0%,
+      100% {
+        transform: translate3d(24px, 10px, 0) scale(0.9);
+      }
+
+      33% {
+        transform: translate3d(-24px, 10px, 0) scale(0.82);
+      }
+
+      66% {
+        transform: translate3d(0, -26px, 0) scale(1);
+      }
+    }
+
+    @keyframes app-loading-bubble-three {
+
+      0%,
+      100% {
+        transform: translate3d(-22px, 11px, 0) scale(0.78);
+      }
+
+      33% {
+        transform: translate3d(0, -24px, 0) scale(0.92);
+      }
+
+      66% {
+        transform: translate3d(22px, 11px, 0) scale(0.82);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      #app-loading .app-loading__spinner::before,
+      #app-loading .app-loading__spinner::after,
+      #app-loading .app-loading__bubble,
+      #app-loading .app-loading__bar i {
+        animation: none;
+      }
+    }
+`;
+const createAppLoadingHtml = ({ text }) => `    <div id="app-loading">
+      <div class="app-loading__content">
+        <div class="app-loading__spinner">
+          <span class="app-loading__bubble"></span>
+          <span class="app-loading__bubble app-loading__bubble--second"></span>
+          <span class="app-loading__bubble app-loading__bubble--third"></span>
+        </div>
+        <div class="app-loading__text">${escapeHtml(text)}</div>
+        <div class="app-loading__bar"><i></i></div>
+      </div>
+    </div>`;
+const createAppLoadingPlugin = (options = {}) => {
+  const resolvedOptions = {
+    target: options.target ?? "#app",
+    text: options.text ?? "\u52A0\u8F7D\u4E2D",
+    primary: options.primary ?? "#217efd",
+    success: options.success ?? "#1ad598"
+  };
+  const targetId = resolvedOptions.target.replace(/^#/, "");
+  const targetRE = new RegExp(`<div\\s+id=["']${escapeRegExp(targetId)}["']\\s*>\\s*</div>`);
+  return {
+    name: "giime:app-loading",
+    enforce: "pre",
+    transformIndexHtml(html) {
+      if (html.includes('id="app-loading"')) {
+        return html;
+      }
+      return html.replace("</head>", `  <style>${createAppLoadingStyle(resolvedOptions)}  </style>
+</head>`).replace(targetRE, `<div id="${targetId}">
+${createAppLoadingHtml(resolvedOptions)}
+  </div>`);
+    }
+  };
+};
+
+exports.createAppLoadingPlugin = createAppLoadingPlugin;
+//# sourceMappingURL=appLoading.js.map

package/lib/utils/src/vue/appLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appLoading.js","sources":["../../../../../../packages/utils/src/vue/appLoading.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\n/**\n * 应用初始化 loading 的 Vite 插件配置。\n */\nexport interface AppLoadingPluginOptions {\n  /**\n   * 需要注入 loading 的应用容器选择器。\n   *\n   * 默认匹配 Vite/Vue 项目常见的 `<div id=\"app\"></div>`。\n   */\n  target?: string;\n  /**\n   * loading 下方展示的文案。\n   *\n   * 默认值为“加载中”。\n   */\n  text?: string;\n  /**\n   * loading 主色，用于中心图形、气泡和进度条。\n   */\n  primary?: string;\n  /**\n   * loading 辅助色，用于渐变和第二颗气泡。\n   */\n  success?: string;\n}\n\n// 文案会被直接写入 index.html，先转义避免破坏 HTML 结构。\nconst escapeHtml = (value: string) =>\n  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;');\n\n// target 会参与正则匹配，需转义特殊字符。\nconst escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\n// 保持样式内联，确保 HTML 到达浏览器后可以立即显示首屏 loading。\nconst createAppLoadingStyle = ({ primary, success }: Required<AppLoadingPluginOptions>) => `\n    /* First-screen loading: injected by Vite and replaced when Vue mounts #app. */\n    #app-loading {\n      --app-loading-primary: ${primary};\n      --app-loading-success: ${success};\n\n      position: fixed;\n      inset: 0;\n      z-index: 9999;\n      display: grid;\n      place-items: center;\n      background:\n        radial-gradient(circle at 50% 42%, rgba(33, 126, 253, 0.08), transparent 34%),\n        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);\n      color: #526276;\n      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;\n    }\n\n    #app-loading .app-loading__content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 18px;\n    }\n\n    #app-loading .app-loading__spinner {\n      position: relative;\n      width: 72px;\n      height: 64px;\n    }\n\n    #app-loading .app-loading__spinner::before,\n    #app-loading .app-loading__spinner::after {\n      position: absolute;\n      content: '';\n    }\n\n    #app-loading .app-loading__spinner::before {\n      top: 17px;\n      left: 21px;\n      width: 30px;\n      height: 30px;\n      border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;\n      background: linear-gradient(135deg, var(--app-loading-primary), var(--app-loading-success));\n      box-shadow: 0 10px 24px rgba(33, 126, 253, 0.22);\n      animation: app-loading-blob 1.8s ease-in-out infinite;\n    }\n\n    #app-loading .app-loading__spinner::after {\n      right: 16px;\n      bottom: 2px;\n      left: 16px;\n      height: 8px;\n      border-radius: 50%;\n      background: rgba(33, 126, 253, 0.1);\n      filter: blur(2px);\n      animation: app-loading-shadow 1.8s ease-in-out infinite;\n    }\n\n    #app-loading .app-loading__bubble {\n      position: absolute;\n      top: 27px;\n      left: 31px;\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: var(--app-loading-primary);\n      box-shadow: 0 0 16px rgba(33, 126, 253, 0.28);\n      animation: app-loading-bubble-one 1.8s ease-in-out infinite;\n    }\n\n    #app-loading .app-loading__bubble--second {\n      width: 8px;\n      height: 8px;\n      background: var(--app-loading-success);\n      box-shadow: 0 0 16px rgba(26, 213, 152, 0.3);\n      animation-name: app-loading-bubble-two;\n      animation-delay: -0.2s;\n    }\n\n    #app-loading .app-loading__bubble--third {\n      width: 6px;\n      height: 6px;\n      background: rgba(33, 126, 253, 0.72);\n      box-shadow: 0 0 14px rgba(33, 126, 253, 0.22);\n      animation-name: app-loading-bubble-three;\n      animation-delay: -0.38s;\n    }\n\n    #app-loading .app-loading__text {\n      font-size: 14px;\n      font-weight: 500;\n      letter-spacing: 0.08em;\n    }\n\n    #app-loading .app-loading__bar {\n      width: 120px;\n      height: 2px;\n      overflow: hidden;\n      border-radius: 999px;\n      background: rgba(33, 126, 253, 0.1);\n    }\n\n    #app-loading .app-loading__bar i {\n      display: block;\n      width: 44%;\n      height: 100%;\n      border-radius: inherit;\n      background: linear-gradient(90deg, var(--app-loading-primary), var(--app-loading-success));\n      animation: app-loading-slide 1.2s ease-in-out infinite;\n    }\n\n    @keyframes app-loading-slide {\n      0% {\n        transform: translateX(-120%);\n      }\n\n      100% {\n        transform: translateX(280%);\n      }\n    }\n\n    @keyframes app-loading-blob {\n\n      0%,\n      100% {\n        border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%;\n        transform: translateY(0) scale(0.96);\n      }\n\n      50% {\n        border-radius: 58% 42% 44% 56% / 42% 58% 46% 54%;\n        transform: translateY(-4px) scale(1.06);\n      }\n    }\n\n    @keyframes app-loading-shadow {\n\n      0%,\n      100% {\n        opacity: 0.68;\n        transform: scaleX(0.9);\n      }\n\n      50% {\n        opacity: 0.36;\n        transform: scaleX(1.18);\n      }\n    }\n\n    @keyframes app-loading-bubble-one {\n\n      0%,\n      100% {\n        transform: translate3d(0, -28px, 0) scale(0.82);\n      }\n\n      33% {\n        transform: translate3d(25px, 10px, 0) scale(1);\n      }\n\n      66% {\n        transform: translate3d(-25px, 10px, 0) scale(0.9);\n      }\n    }\n\n    @keyframes app-loading-bubble-two {\n\n      0%,\n      100% {\n        transform: translate3d(24px, 10px, 0) scale(0.9);\n      }\n\n      33% {\n        transform: translate3d(-24px, 10px, 0) scale(0.82);\n      }\n\n      66% {\n        transform: translate3d(0, -26px, 0) scale(1);\n      }\n    }\n\n    @keyframes app-loading-bubble-three {\n\n      0%,\n      100% {\n        transform: translate3d(-22px, 11px, 0) scale(0.78);\n      }\n\n      33% {\n        transform: translate3d(0, -24px, 0) scale(0.92);\n      }\n\n      66% {\n        transform: translate3d(22px, 11px, 0) scale(0.82);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      #app-loading .app-loading__spinner::before,\n      #app-loading .app-loading__spinner::after,\n      #app-loading .app-loading__bubble,\n      #app-loading .app-loading__bar i {\n        animation: none;\n      }\n    }\n`;\n\n// 注入到应用容器内部，Vue 挂载同一容器时会自然清空并替换。\nconst createAppLoadingHtml = ({ text }: Required<AppLoadingPluginOptions>) => `    <div id=\"app-loading\">\n      <div class=\"app-loading__content\">\n        <div class=\"app-loading__spinner\">\n          <span class=\"app-loading__bubble\"></span>\n          <span class=\"app-loading__bubble app-loading__bubble--second\"></span>\n          <span class=\"app-loading__bubble app-loading__bubble--third\"></span>\n        </div>\n        <div class=\"app-loading__text\">${escapeHtml(text)}</div>\n        <div class=\"app-loading__bar\"><i></i></div>\n      </div>\n    </div>`;\n\n/**\n * 创建应用初始化阶段的首屏 loading 插件。\n *\n * 插件会在 Vite 处理 index.html 时，将 loading 的样式和 DOM 注入到目标容器中；\n * Vue 挂载到同一个容器后会自动替换这段 loading，适合覆盖 JS 加载、路由懒加载等首屏空窗期。\n */\nexport const createAppLoadingPlugin = (options: AppLoadingPluginOptions = {}): Plugin => {\n  const resolvedOptions: Required<AppLoadingPluginOptions> = {\n    target: options.target ?? '#app',\n    text: options.text ?? '加载中',\n    primary: options.primary ?? '#217efd',\n    success: options.success ?? '#1ad598',\n  };\n  const targetId = resolvedOptions.target.replace(/^#/, '');\n  const targetRE = new RegExp(`<div\\\\s+id=[\"']${escapeRegExp(targetId)}[\"']\\\\s*>\\\\s*</div>`);\n\n  return {\n    name: 'giime:app-loading',\n    enforce: 'pre',\n    transformIndexHtml(html) {\n      if (html.includes('id=\"app-loading\"')) {\n        return html;\n      }\n\n      return html\n        .replace('</head>', `  <style>${createAppLoadingStyle(resolvedOptions)}  </style>\\n</head>`)\n        .replace(targetRE, `<div id=\"${targetId}\">\\n${createAppLoadingHtml(resolvedOptions)}\\n  </div>`);\n    },\n  };\n};\n"],"names":[],"mappings":"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"}

package/lib/utils/src/vue/index.d.ts

@@ -2,3 +2,4 @@ export * from './install';
 export * from './resolver';
 export * from './typescript';
 export * from './router';
+export * from './appLoading';

package/lib/utils/src/vue/index.js

@@ -4,6 +4,7 @@ var install = require('./install.js');
 var resolver = require('./resolver.js');
 require('./typescript.js');
 var router = require('./router.js');
+var appLoading = require('./appLoading.js');
 
 
 
@@ -16,4 +17,5 @@ exports.bypass = resolver.bypass;
 exports.kebabCase = resolver.kebabCase;
 exports.getRouteParams = router.getRouteParams;
 exports.getRouteQuery = router.getRouteQuery;
+exports.createAppLoadingPlugin = appLoading.createAppLoadingPlugin;
 //# sourceMappingURL=index.js.map

package/lib/utils/src/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giime",
-  "version": "1.0.2-snapshot.2",
+  "version": "1.0.2",
   "description": "A Component Library for Vue 3",
   "keywords": [
     "giime",