From ab50451b77a4d687625881d2a0f49201e14e1190 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 16 Dec 2024 14:28:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/TemplateSkeleton.vue            | 70 +++++++++++++++++++
 .../src/views/template-market/index.vue       | 52 ++++++++------
 2 files changed, 99 insertions(+), 23 deletions(-)
 create mode 100644 core/core-frontend/src/views/template-market/component/TemplateSkeleton.vue

diff --git a/core/core-frontend/src/views/template-market/component/TemplateSkeleton.vue b/core/core-frontend/src/views/template-market/component/TemplateSkeleton.vue
new file mode 100644
index 0000000000..5426e3f3f5
--- /dev/null
+++ b/core/core-frontend/src/views/template-market/component/TemplateSkeleton.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-col
+    v-for="templateItem in arr"
+    :key="templateItem"
+    style="float: left; width: 25%; padding: 8px 8px 0; text-align: center; flex: 0"
+  >
+    <div class="testcase-template_skeleton">
+      <div class="template-img_skeleton" :style="classBackground" />
+      <el-row class="bottom-area_skeleton">
+        <div class="area-skeleton_inner"></div>
+      </el-row>
+    </div>
+  </el-col>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  width: {
+    type: Number
+  }
+})
+const classBackground = computed(() => {
+  return {
+    width: props.width + 'px',
+    height: props.width * 0.58 + 'px'
+  }
+})
+const arr = Array(40)
+  .fill(0)
+  .map((_, index) => index)
+</script>
+
+<style scoped lang="less">
+.testcase-template_skeleton {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  border: 1px solid rgba(222, 224, 227, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  width: 100%;
+  background: #fff;
+  overflow: hidden;
+  &:hover {
+    box-shadow: 0px 6px 24px 0px #1f232914;
+  }
+}
+
+.template-img_skeleton {
+  background: #eff0f199;
+  margin: 4px 4px 0 4px;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px 4px 0 0;
+}
+
+.bottom-area_skeleton {
+  height: 38px;
+  padding: 12px;
+  border-top: 1px solid rgba(222, 224, 227, 1);
+  .area-skeleton_inner {
+    background-color: #eff0f1;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index a27421b889..11e97d151d 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -116,30 +116,14 @@
           id="template-show-area"
           class="template-right"
         >
-          <el-row v-show="state.marketActiveTab !== t('work_branch.recommend')">
-            <category-template-v2
-              :search-text="state.searchText"
-              :label="state.marketActiveTab"
-              :full-template-show-list="state.currentMarketTemplateShowList"
-              :template-span="state.templateSpan"
-              :base-url="state.baseUrl"
-              :template-cur-width="state.templateCurWidth"
-              :cur-position="state.curPosition"
-              :create-auth="createAuth"
-              @templateApply="templateApply"
-              @templatePreview="templatePreview"
-            />
-          </el-row>
-          <el-row v-show="state.marketActiveTab === t('work_branch.recommend')">
-            <el-row
-              style="display: inline; width: 100%; margin-bottom: 16px"
-              v-for="(categoryItem, index) in categoriesComputed"
-              :key="index"
-            >
+          <el-row v-if="state.marketActiveTab === null"
+            ><TemplateSkeleton :width="state.templateCurWidth"
+          /></el-row>
+          <template v-else>
+            <el-row v-show="state.marketActiveTab !== t('work_branch.recommend')">
               <category-template-v2
-                v-if="categoryItem.label !== t('work_branch.recent')"
                 :search-text="state.searchText"
-                :label="categoryItem.label"
+                :label="state.marketActiveTab"
                 :full-template-show-list="state.currentMarketTemplateShowList"
                 :template-span="state.templateSpan"
                 :base-url="state.baseUrl"
@@ -150,7 +134,28 @@
                 @templatePreview="templatePreview"
               />
             </el-row>
-          </el-row>
+            <el-row v-show="state.marketActiveTab === t('work_branch.recommend')">
+              <el-row
+                style="display: inline; width: 100%; margin-bottom: 16px"
+                v-for="(categoryItem, index) in categoriesComputed"
+                :key="index"
+              >
+                <category-template-v2
+                  v-if="categoryItem.label !== t('work_branch.recent')"
+                  :search-text="state.searchText"
+                  :label="categoryItem.label"
+                  :full-template-show-list="state.currentMarketTemplateShowList"
+                  :template-span="state.templateSpan"
+                  :base-url="state.baseUrl"
+                  :template-cur-width="state.templateCurWidth"
+                  :cur-position="state.curPosition"
+                  :create-auth="createAuth"
+                  @templateApply="templateApply"
+                  @templatePreview="templatePreview"
+                />
+              </el-row>
+            </el-row>
+          </template>
         </div>
         <el-row v-show="state.networkStatus && !state.hasResult" class="template-empty">
           <div style="text-align: center">
@@ -183,6 +188,7 @@ import { useCache } from '@/hooks/web/useCache'
 import MarketPreviewV2 from '@/views/template-market/component/MarketPreviewV2.vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import CategoryTemplateV2 from '@/views/template-market/component/CategoryTemplateV2.vue'
+import TemplateSkeleton from '@/views/template-market/component/TemplateSkeleton.vue'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { XpackComponent } from '@/components/plugin'
 import { useEmitt } from '@/hooks/web/useEmitt'