feat: 沙箱开发功能 (#1723)

webfe/package_vue/src/App.vue

@@ -21,6 +21,7 @@
       :class="{
         'plugin-min-width': isPlugin,
         'full-screen-height-cls': isDefaultBackgroundColor,
+        'sandbox-page': sandboxPage,
       }"
     >
       <router-view />
@@ -71,6 +72,9 @@ export default {
     isDefaultBackgroundColor() {
       return this.$route.meta?.isDefaultBackgroundColor;
     },
+    sandboxPage() {
+      return this.$route.meta?.sandboxPage;
+    },
     paasVersion() {
       return window.BK_PAAS_VERSION;
     },
@@ -139,6 +143,10 @@ export default {
   background: #fafbfd;
 }
 
+.sandbox-page {
+  height: 100%;
+}
+
 .notice {
   position: fixed;
   left: 0px;

webfe/package_vue/src/components/loader/index.vue

@@ -1,13 +1,13 @@
 <template lang="html">
   <div
-    :class="[{ 'paas-loading-content': isLoaderShow, 'loading': localLoading, 'fadeout': !localLoading }]"
+    :class="[{ 'paas-loading-content': isLoaderShow, loading: localLoading, fadeout: !localLoading }]"
     :style="styleObject"
   >
     <div
       :class="[
         'loading-placeholder',
-        { 'hide': !isLoaderShow },
-        { 'transition': !isTransition },
+        { hide: !isLoaderShow },
+        { transition: !isTransition },
         { 'customize-width': isCustomizeWidth },
       ]"
       :style="{ 'background-color': backgroundColor }"
@@ -26,7 +26,8 @@
   </div>
 </template>
 
-<script>import ByUserLoading from './loading/by-user';
+<script>
+import ByUserLoading from './loading/by-user';
 import LogLoading from './loading/log';
 import ProcessLoading from './loading/process';
 import IndexLoading from './loading/index';
@@ -90,6 +91,7 @@ import ProcessServiceLoading from './loading/process-service.vue';
 import PluinVersionListLoading from './loading/pluin-version-list.vue';
 import PersistentStorageLoading from './loading/persistent-storage.vue';
 import VisibleRangeLoading from './loading/visible-range.vue';
+import SandboxLoading from './loading/sandbox.vue';
 export default {
   components: {
     ByUserLoading,
@@ -156,6 +158,7 @@ export default {
     PluinVersionListLoading,
     PersistentStorageLoading,
     VisibleRangeLoading,
+    SandboxLoading,
   },
   props: {
     isLoading: {
@@ -303,82 +306,80 @@ export default {
 </script>
 
 <style lang="scss">
-  .paas-loading-content {
-    position: relative;
-    overflow: hidden;
+.paas-loading-content {
+  position: relative;
+  overflow: hidden;
 
-    &.loading {
-      * {
-        opacity: 0 !important;
-      }
+  &.loading {
+    * {
+      opacity: 0 !important;
     }
+  }
 
-    &.fadeout {
-      .loading-placeholder {
-        opacity: 0 !important;
-      }
+  &.fadeout {
+    .loading-placeholder {
+      opacity: 0 !important;
     }
+  }
 
-    .loading-placeholder {
-      opacity: 1 !important;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 100;
-      transition: opacity ease 0.5s;
-      padding: 0 24px;
-      margin-top: 14px;
+  .loading-placeholder {
+    opacity: 1 !important;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    transition: opacity ease 0.5s;
+    padding: 0 24px;
+    margin-top: 14px;
 
-      &.hide {
-        z-index: -1;
-      }
+    &.hide {
+      z-index: -1;
+    }
 
-      &.transition {
-        transition: none;
-      }
+    &.transition {
+      transition: none;
+    }
 
-      svg {
-        width: 1180px;
-      }
+    svg {
+      width: 1180px;
+    }
 
-      * {
-        opacity: 1 !important;
-      }
+    * {
+      opacity: 1 !important;
     }
   }
+}
 
 @media (min-width: 1280px) {
-    .paas-loading-content .loading-placeholder {
-        width: auto;
-        svg {
-          width: 100%;
-        }
-        &.customize-width {
-          svg {
-            width: calc(100% - 48px);
-          }
-        }
+  .paas-loading-content .loading-placeholder {
+    width: auto;
+    svg {
+      width: 100%;
+    }
+    &.customize-width {
+      svg {
+        width: calc(100% - 48px);
+      }
     }
+  }
 }
 @media screen and (min-width: 1680px) {
-
 }
 @media screen and (min-width: 1920px) {
-
 }
 @media screen and (min-width: 2450px) {
-    .paas-loading-content .loading-placeholder {
-      width: auto;
-      svg {
-        width: 100%;
-      }
+  .paas-loading-content .loading-placeholder {
+    width: auto;
+    svg {
+      width: 100%;
     }
-}
-  .hide {
-    display: none;
   }
+}
+.hide {
+  display: none;
+}
 </style>

webfe/package_vue/src/components/loader/loading/sandbox.vue

@@ -0,0 +1,57 @@
+<template>
+  <content-loader
+    :width="baseWidth"
+    :height="500"
+    :speed="loadingConf.speed"
+    :primaryColor="loadingConf.primaryColor"
+    :secondaryColor="loadingConf.secondaryColor"
+  >
+    <rect
+      x="0"
+      y="0"
+      rx="1"
+      ry="1"
+      :width="baseWidth"
+      height="32"
+    />
+    <rect
+      x="0"
+      y="48"
+      rx="1"
+      ry="1"
+      :width="baseWidth - 330"
+      height="600"
+    />
+    <rect
+      :x="baseWidth - 300"
+      y="48"
+      rx="1"
+      ry="1"
+      :width="350"
+      height="600"
+    />
+  </content-loader>
+</template>
+<script>
+import { ContentLoader } from 'vue-content-loader';
+export default {
+  components: {
+    ContentLoader,
+  },
+  props: {
+    baseWidth: {
+      type: Number,
+      default: 1180,
+    },
+    contentWidth: {
+      type: Number,
+      default: 1180,
+    },
+  },
+  computed: {
+    loadingConf() {
+      return this.$store.state.loadingConf;
+    },
+  },
+};
+</script>

webfe/package_vue/src/components/paas-header.vue

@@ -76,7 +76,8 @@
                   @click="switchLanguage(item.id)"
                   :key="item.id"
                 >
-                  <i :class="['bk-icon', 'lang-icon', item.icon]" />{{ item.text }}
+                  <i :class="['bk-icon', 'lang-icon', item.icon]" />
+                  {{ item.text }}
                 </li>
               </ul>
             </template>
@@ -364,7 +365,7 @@ export default {
     userFeature: {
       handler(val) {
         if (!val.ALLOW_PLUGIN_CENTER) {
-          this.headerStaticInfo.list.nav = this.headerStaticInfo.list.nav.filter(e => e.text !== this.$t('插件开发'));
+          this.headerStaticInfo.list.nav = this.headerStaticInfo.list.nav.filter((e) => e.text !== this.$t('插件开发'));
         }
       },
       deep: true,
@@ -433,14 +434,14 @@ export default {
       if (this.$route.name === 'index' || this.$route.name === 'home') {
         noteIndex = 0;
       }
-      if (this.$route.path.indexOf('/developer-center/app') !== -1) {
+      if (this.$route.path.indexOf('/developer-center/app') !== -1 || this.$route.path.indexOf('/sandbox') !== -1) {
         noteIndex = 1;
       }
       if (this.$route.path.indexOf('/plugin-center') !== -1) {
         noteIndex = 2;
       }
       if (this.$route.path.indexOf('/developer-center/service') !== -1) {
-        noteIndex = this.displayNavList.findIndex(v => v.text === this.$t('服务')) || 3;
+        noteIndex = this.displayNavList.findIndex((v) => v.text === this.$t('服务')) || 3;
       }
       if (noteIndex !== -1) {
         this.backgroundHidden = false;
@@ -450,37 +451,44 @@ export default {
       }
     },
     logout() {
-      window.location = `${window.GLOBAL_CONFIG.LOGIN_SERVICE_URL}/?is_from_logout=1&c_url=${encodeURIComponent(window.location.href)}`;
+      window.location = `${window.GLOBAL_CONFIG.LOGIN_SERVICE_URL}/?is_from_logout=1&c_url=${encodeURIComponent(
+        window.location.href
+      )}`;
     },
     async switchLanguage(language) {
       const data = new URLSearchParams();
       data.append('language', language);
-      this.$http.post(`${BACKEND_URL}/i18n/setlang/`, data, {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-      }).then((res) => {
-        this.$i18n.locale = language;
-        this.$store.commit('updateLocalLanguage', language);
-        // 设置cookies持续化
-        if (window.BK_COMPONENT_API_URL) {
-          ajaxRequest({
-            url: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fe_update_user_language/`,
-            jsonp: `callback${uuid()}`,
-            data: Object.assign({ language }),
-            success: () => {
+      this.$http
+        .post(`${BACKEND_URL}/i18n/setlang/`, data, {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+        })
+        .then(
+          (res) => {
+            this.$i18n.locale = language;
+            this.$store.commit('updateLocalLanguage', language);
+            // 设置cookies持续化
+            if (window.BK_COMPONENT_API_URL) {
+              ajaxRequest({
+                url: `${window.BK_COMPONENT_API_URL}/api/c/compapi/v2/usermanage/fe_update_user_language/`,
+                jsonp: `callback${uuid()}`,
+                data: Object.assign({ language }),
+                success: () => {
+                  this.$router.go(0);
+                },
+              });
+            } else {
               this.$router.go(0);
-            },
-          });
-        } else {
-          this.$router.go(0);
-        }
-      }, (e) => {
-        this.$paasMessage({
-          theme: 'error',
-          message: e.detail || e.message || this.$t('接口异常'),
-        });
-      });
+            }
+          },
+          (e) => {
+            this.$paasMessage({
+              theme: 'error',
+              message: e.detail || e.message || this.$t('接口异常'),
+            });
+          }
+        );
     },
     handlerLogVersion() {
       this.showLogVersion = true;
@@ -532,7 +540,7 @@ export default {
       });
       // 应用开关过滤插件开发
       if (!this.userFeature.ALLOW_PLUGIN_CENTER) {
-        return navList.filter(e => e.name !== 'pluginDevelopment');
+        return navList.filter((e) => e.name !== 'pluginDevelopment');
       }
       return navList;
     },