public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-14 21:12:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(工作台): 骨架屏加载效果

Browse Source
This commit is contained in:
dataeaseShu
2024-12-16 14:28:21 +08:00
committed by ulleo
parent 5bc800cb60
commit ab50451b77
2 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
core/core-frontend/src/views/template-market/component/TemplateSkeleton.vue Normal file
View File

@@ -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>

52
core/core-frontend/src/views/template-market/index.vue
View File

@@ -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'