Skip to content

P
poc-fe
Commit 2887b74b authored by shirlyn.guo's avatar shirlyn.guo 🤡
Browse files
Options

chore: 应用列表滚动防抖&样式调整

parent 44ca18b9
Show whitespace changes
Inline Side-by-side
Showing with 36 additions and 48 deletions
src/views/personal-space/personal-app/personal-app.vue
View file @ 2887b74b
<script setup lang="ts"> <script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue' import { ref, useTemplateRef, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Search, More, Star } from '@icon-park/vue-next' import { Search, MoreOne, Star } from '@icon-park/vue-next'
import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue' import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
import { formatDateTime } from '@/utils/date-formatter' import { formatDateTime } from '@/utils/date-formatter'
...@@ -17,6 +17,7 @@ import SaleApplicationsConfigurationModal from './sale-applications-configuratio ...@@ -17,6 +17,7 @@ import SaleApplicationsConfigurationModal from './sale-applications-configuratio
import { defaultPersonalAppConfigState } from '@/store/modules/personal-app-config' import { defaultPersonalAppConfigState } from '@/store/modules/personal-app-config'
import searchEmptyImage from '@/assets/images/search-empty.png' import searchEmptyImage from '@/assets/images/search-empty.png'
import applicationEmptyImage from '@/assets/images/application-empty.png' import applicationEmptyImage from '@/assets/images/application-empty.png'
import { debounce } from 'lodash-es'
const { t } = useI18n() const { t } = useI18n()
...@@ -183,18 +184,20 @@ function handleSelectAddType() { ...@@ -183,18 +184,20 @@ function handleSelectAddType() {
router.push({ name: 'PersonalAppSetting' }) router.push({ name: 'PersonalAppSetting' })
} }
function handleCardContentScroll(event: { target: { scrollTop: number; clientHeight: number; scrollHeight: number } }) { function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
console.log('分析', personalApp)
}
const handleCardContentScrollDebounce = debounce(
(event: { target: { scrollTop: number; clientHeight: number; scrollHeight: number } }) => {
if (!cardContentWrapRef.value) return if (!cardContentWrapRef.value) return
const scrollTop = event.target.scrollTop const scrollTop = event.target.scrollTop
const clientHeight = event.target.clientHeight const clientHeight = event.target.clientHeight
const scrollHeight = event.target.scrollHeight const scrollHeight = event.target.scrollHeight
isAgentAppListBottom.value = scrollTop + clientHeight >= scrollHeight isAgentAppListBottom.value = scrollTop + clientHeight >= scrollHeight
} },
200,
function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { )
console.log('分析', personalApp)
}
</script> </script>
<template> <template>
...@@ -218,14 +221,14 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -218,14 +221,14 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
theme="outline" theme="outline"
size="16" size="16"
fill="#999" fill="#999"
:stroke-width="2" :stroke-width="3"
class="cursor-pointer text-base" class="cursor-pointer text-base"
@click="getApplicationList()" @click="getApplicationList()"
/> />
</template> </template>
</NInput> </NInput>
</div> </div>
<n-scrollbar style="max-height: 700px" @scroll="handleCardContentScroll"> <n-scrollbar style="max-height: 700px" @scroll="handleCardContentScrollDebounce">
<div ref="cardContentWrapRef" class="pb-[50px]"> <div ref="cardContentWrapRef" class="pb-[50px]">
<div class="flex justify-center"> <div class="flex justify-center">
<n-spin v-show="agentAppListLoading" size="large" /> <n-spin v-show="agentAppListLoading" size="large" />
...@@ -238,38 +241,27 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -238,38 +241,27 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
class="mb-[20px] mr-[15px]" class="mb-[20px] mr-[15px]"
> >
<div <div
class="rounded-[10px]! ml-[5px] max-w-[380px] px-[24px] pb-[19px] pt-[13px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]" class="rounded-[10px]! ml-[5px] max-w-[380px] pb-[19px] pl-[24px] pr-[27px] pt-[20px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
> >
<div <div
class="mt-[6px] flex cursor-pointer justify-between" class="flex cursor-pointer justify-between"
@click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)" @click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
> >
<div class="popover-trigger mb-[19px] mr-[15px] text-[14px]"> <div class="popover-trigger mb-[19px] mr-[15px] text-[14px]">
<div class="agent-desc h-[23px] w-full max-w-[160px] font-semibold"> <div class="agent-desc mb-[58px] h-[23px] w-full max-w-[160px] font-semibold">
<n-ellipsis style="max-width: 180px" :line-clamp="1"> <n-ellipsis style="max-width: 180px" :line-clamp="1">
{{ agentAppItem.baseInfo.agentTitle || '--' }} {{ agentAppItem.baseInfo.agentTitle }}
<template #tooltip> <template #tooltip>
<div style="max-width: 230px"> <div style="max-width: 230px">
{{ agentAppItem.baseInfo.agentTitle || '--' }} {{ agentAppItem.baseInfo.agentTitle }}
</div>
</template>
</n-ellipsis>
</div>
<div class="agent-desc my-[18px] h-[44px] w-full max-w-[160px] text-[#999999]">
<n-ellipsis style="max-width: 180px" :line-clamp="2">
{{ agentAppItem.baseInfo.agentDesc }}
<template #tooltip>
<div style="max-width: 230px">
{{ agentAppItem.baseInfo.agentDesc }}
</div> </div>
</template> </template>
</n-ellipsis> </n-ellipsis>
</div> </div>
<n-button <n-button
:color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'" :color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'"
class="h-[27px] w-[71px] rounded-[13px] border-[1px] text-[13px]" class="h-[27px]! w-[71px]! pl-[17px]! pr-[16px]! pt-[7px]! pb-[8px]! text-[13px]! rounded-[13px] border-[1px]"
round round
ghost ghost
> >
...@@ -280,13 +272,13 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -280,13 +272,13 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
}}</n-button }}</n-button
> >
</div> </div>
<div class="h-[99px] w-[101px]"> <div class="h-[68px] w-[68px]">
<img :src="agentAppItem.baseInfo.agentAvatar" class="h-[99px] min-w-[101px] rounded-[10px]" /> <img :src="agentAppItem.baseInfo.agentAvatar" class="h-[68px] rounded-[10px]" />
</div> </div>
</div> </div>
<div> <div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="text-[12px] text-[#999999]"> <div class="text-[12px] leading-[12px] text-[#999999]">
{{ t('personal_space_module.agent_module.agent_list_module.modified_time') }} {{ t('personal_space_module.agent_module.agent_list_module.modified_time') }}
{{ formatDateTime(agentAppItem.modifiedTime) }} {{ formatDateTime(agentAppItem.modifiedTime) }}
</div> </div>
...@@ -296,7 +288,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -296,7 +288,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
theme="two-tone" theme="two-tone"
size="18" size="18"
:fill="agentAppItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']" :fill="agentAppItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
:stroke-width="2" :stroke-width="3"
class="cursor-pointer transition-all delay-150 duration-300 ease-in-out" class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
@click="handleApplicationsCollect(agentAppItem)" @click="handleApplicationsCollect(agentAppItem)"
/> />
...@@ -304,20 +296,14 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -304,20 +296,14 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
placement="bottom-end" placement="bottom-end"
trigger="hover" trigger="hover"
:show-arrow="false" :show-arrow="false"
class="rounded-[10px]! px-[12px]! cursor-pointer" class="rounded-[10px]! py-[1px]! mb-[0px]! shadow-[0_4px_10px_0px_rgba(103,103,103,.15)]! px-[12px]! cursor-pointer"
> >
<template #trigger> <template #trigger>
<More <MoreOne size="16" fill="#333" :stroke-width="3" class="ml-[13px] mt-[1px] cursor-pointer" />
theme="outline"
size="18"
fill="#333"
:stroke-width="2"
class="ml-[12px] cursor-pointer"
/>
</template> </template>
<div <div
v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'" v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]" class="mb-[10px] mt-[8px] h-[24px] w-full rounded-[4px] py-[5px] pl-[5px] text-[14px] leading-[14px] text-[#333333] hover:bg-[#f1f1f1c7]"
@click="handleAnalysisPersonalApp(agentAppItem)" @click="handleAnalysisPersonalApp(agentAppItem)"
> >
{{ t('common_module.data_table_module.analysis') }} {{ t('common_module.data_table_module.analysis') }}
...@@ -333,7 +319,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -333,7 +319,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
> >
<template #trigger> <template #trigger>
<div <div
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]" class="mb-[10px] h-[24px] w-full rounded-[4px] py-[5px] pl-[5px] text-[14px] leading-[14px] text-[#333333] hover:bg-[#f1f1f1c7]"
> >
{{ t('common_module.data_table_module.remove_applications') }} {{ t('common_module.data_table_module.remove_applications') }}
</div> </div>
...@@ -347,7 +333,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -347,7 +333,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</div> </div>
<div v-show="agentAppItem.isSale === 'N'"> <div v-show="agentAppItem.isSale === 'N'">
<div <div
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]" class="mb-[10px] h-[24px] w-full rounded-[4px] py-[5px] pl-[5px] text-[14px] leading-[14px] text-[#333333] hover:bg-[#f1f1f1c7]"
@click="handleChangeApplicationsSaleStatus(agentAppItem)" @click="handleChangeApplicationsSaleStatus(agentAppItem)"
> >
{{ t('common_module.data_table_module.listing_applications') }} {{ t('common_module.data_table_module.listing_applications') }}
...@@ -356,7 +342,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -356,7 +342,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</div> </div>
<div <div
class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]" class="mb-[8px] mt-[8px] h-[24px] w-[72px] rounded-[4px] py-[5px] pl-[8px] text-[14px] leading-[14px] text-[#F25744] hover:bg-[#f1f1f1c7]"
@click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)" @click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)"
> >
{{ t('common_module.delete') }} {{ t('common_module.delete') }}
...@@ -367,9 +353,11 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -367,9 +353,11 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</div> </div>
</div> </div>
</n-grid-item> </n-grid-item>
<div v-for="number in 4" v-show="agentAppListBottomLoadingMore" :key="number" class="w-[380px]"> <n-grid-item v-for="item in 4" :key="item" class="mr-[15px]">
<n-skeleton text :repeat="12" /> <div v-show="agentAppListBottomLoadingMore && pagingInfo.pageNo !== pagingInfo.totalPages">
<n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
</div> </div>
</n-grid-item>
</n-grid> </n-grid>
<div v-else> <div v-else>
<div class="flex h-[650px] w-full items-center justify-center"> <div class="flex h-[650px] w-full items-center justify-center">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment