Skip to content

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

chore: 应用列表样式优化

parent ea9e68b2
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 154 deletions
src/views/personal-space/personal-app/personal-app.vue
View file @ 53009829
<script setup lang="ts"> <script setup lang="ts">
import { computed, 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, More, Star } from '@icon-park/vue-next'
import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue' import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
...@@ -12,7 +12,6 @@ import { ...@@ -12,7 +12,6 @@ import {
fetchRemoveSalePublishApplication, fetchRemoveSalePublishApplication,
} from '@/apis/agent-application.ts' } from '@/apis/agent-application.ts'
import { PersonalAppConfigState } from '@/store/types/personal-app-config.ts' import { PersonalAppConfigState } from '@/store/types/personal-app-config.ts'
import { useScroll } from '@vueuse/core'
import { router } from '@/router/index.ts' import { router } from '@/router/index.ts'
import SaleApplicationsConfigurationModal from './sale-applications-configuration-modal.vue' import SaleApplicationsConfigurationModal from './sale-applications-configuration-modal.vue'
import { defaultPersonalAppConfigState } from '@/store/modules/personal-app-config' import { defaultPersonalAppConfigState } from '@/store/modules/personal-app-config'
...@@ -22,10 +21,6 @@ import applicationEmptyImage from '@/assets/images/application-empty.png' ...@@ -22,10 +21,6 @@ import applicationEmptyImage from '@/assets/images/application-empty.png'
const { t } = useI18n() const { t } = useI18n()
const cardContentWrapRef = useTemplateRef<HTMLDivElement>('cardContentWrapRef') const cardContentWrapRef = useTemplateRef<HTMLDivElement>('cardContentWrapRef')
const smooth = ref(false)
const behavior = computed(() => (smooth.value ? 'smooth' : 'auto'))
const { arrivedState } = useScroll(cardContentWrapRef, { behavior })
const selectedPublishStatusValue = ref('') const selectedPublishStatusValue = ref('')
const isShowSaleApplicationsConfigurationModal = ref(false) const isShowSaleApplicationsConfigurationModal = ref(false)
...@@ -67,10 +62,12 @@ const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_modu ...@@ -67,10 +62,12 @@ const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_modu
const emptyTableImage = ref() const emptyTableImage = ref()
const isAgentAppListBottom = ref(false)
watch( watch(
() => arrivedState.bottom, () => isAgentAppListBottom.value,
() => { () => {
if (arrivedState.bottom) { if (isAgentAppListBottom.value) {
if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) { if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
pagingInfo.value.pageNo += 1 pagingInfo.value.pageNo += 1
agentAppListBottomLoadingMore.value = true agentAppListBottomLoadingMore.value = true
...@@ -186,6 +183,15 @@ function handleSelectAddType() { ...@@ -186,6 +183,15 @@ function handleSelectAddType() {
router.push({ name: 'PersonalAppSetting' }) router.push({ name: 'PersonalAppSetting' })
} }
function handleCardContentScroll(event: { target: { scrollTop: number; clientHeight: number; scrollHeight: number } }) {
if (!cardContentWrapRef.value) return
const scrollTop = event.target.scrollTop
const clientHeight = event.target.clientHeight
const scrollHeight = event.target.scrollHeight
isAgentAppListBottom.value = scrollTop + clientHeight >= scrollHeight
}
function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
console.log('分析', personalApp) console.log('分析', personalApp)
} }
...@@ -219,173 +225,189 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) { ...@@ -219,173 +225,189 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</template> </template>
</NInput> </NInput>
</div> </div>
<div ref="cardContentWrapRef" class="mb-[50px] h-full overflow-y-auto pb-[16px]" style="scrollbar-width: none"> <n-scrollbar style="max-height: 700px" @scroll="handleCardContentScroll">
<div class="flex justify-center"> <div ref="cardContentWrapRef" class="pb-[50px]">
<n-spin v-show="agentAppListLoading" size="large" /> <div class="flex justify-center">
</div> <n-spin v-show="agentAppListLoading" size="large" />
<div v-show="!agentAppListLoading" class="mt-[5px]"> </div>
<n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen"> <div v-show="!agentAppListLoading" class="mt-[5px]">
<n-grid-item <n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen">
v-for="agentAppItem in agentAppList" <n-grid-item
:key="agentAppItem.baseInfo.agentId" v-for="agentAppItem in agentAppList"
class="mb-[20px] mr-[15px]" :key="agentAppItem.baseInfo.agentId"
> class="mb-[20px] mr-[15px]"
<div
class="rounded-[10px]! ml-[5px] max-w-[380px] px-[24px] pb-[19px] pt-[13px] shadow-[0_4px_10px_0px_rgba(103,103,103,.3)]"
> >
<div <div
class="mt-[6px] flex cursor-pointer justify-between" class="rounded-[10px]! ml-[5px] max-w-[380px] px-[24px] pb-[19px] pt-[13px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
@click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
> >
<div class="mb-[19px] mr-[15px] text-[14px]"> <div
<n-popover trigger="hover"> class="mt-[6px] flex cursor-pointer justify-between"
<template #trigger> @click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
<div >
class="popover-trigger h-[23px] w-full max-w-[160px] cursor-pointer truncate font-medium text-[#333333]" <div class="popover-trigger mb-[19px] mr-[15px] text-[14px]">
> <div class="agent-desc h-[23px] w-full max-w-[160px]">
<n-ellipsis style="max-width: 180px" :line-clamp="1">
{{ agentAppItem.baseInfo.agentTitle || '--' }} {{ agentAppItem.baseInfo.agentTitle || '--' }}
</div>
</template> <template #tooltip>
<span>{{ agentAppItem.baseInfo.agentTitle || '--' }}</span> <div style="max-width: 230px">
</n-popover> {{ agentAppItem.baseInfo.agentTitle || '--' }}
<div class="agent-desc my-[18px] h-[44px] w-full max-w-[160px] text-[#999999]"> </div>
<n-ellipsis :line-clamp="2"> </template>
{{ agentAppItem.baseInfo.agentDesc }} </n-ellipsis>
</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>
</template>
</n-ellipsis>
</div>
<n-button
:color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'"
class="h-[27px] w-[71px] rounded-[13px] border-[1px] text-[13px]"
round
ghost
>
{{
agentAppItem.baseInfo.agentPublishStatus === 'draft'
? t('common_module.unpublished')
: t('common_module.published')
}}</n-button
>
</div> </div>
<n-button <div class="h-[99px] w-[101px]">
:color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'" <img :src="agentAppItem.baseInfo.agentAvatar" class="h-[99px] min-w-[101px] rounded-[10px]" />
class="h-[27px] w-[71px] rounded-[13px] border-[1px] text-[13px]"
ghost
round
>
{{
agentAppItem.baseInfo.agentPublishStatus === 'draft'
? t('common_module.unpublished')
: t('common_module.published')
}}</n-button
>
</div>
<div class="h-[99px] w-[101px]">
<img :src="agentAppItem.baseInfo.agentAvatar" class="h-[99px] min-w-[101px] rounded-[10px]" />
</div>
</div>
<div>
<div class="flex justify-between">
<div class="text-[12px] text-[#999999]">
{{ t('personal_space_module.agent_module.agent_list_module.modified_time') }}
{{ formatDateTime(agentAppItem.modifiedTime) }}
</div> </div>
<div class="flex"> </div>
<Star <div>
v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'" <div class="flex justify-between">
theme="two-tone" <div class="text-[12px] text-[#999999]">
size="18" {{ t('personal_space_module.agent_module.agent_list_module.modified_time') }}
:fill="agentAppItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']" {{ formatDateTime(agentAppItem.modifiedTime) }}
:stroke-width="2" </div>
class="cursor-pointer transition-all delay-150 duration-300 ease-in-out" <div class="flex">
@click="handleApplicationsCollect(agentAppItem)" <Star
/>
<n-popover
placement="bottom-end"
trigger="hover"
:show-arrow="false"
class="rounded-[10px]! px-[12px]! cursor-pointer"
>
<template #trigger>
<More
theme="outline"
size="18"
fill="#333"
:stroke-width="2"
class="ml-[12px] cursor-pointer"
/>
</template>
<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]" theme="two-tone"
@click="handleAnalysisPersonalApp(agentAppItem)" size="18"
:fill="agentAppItem.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
:stroke-width="2"
class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
@click="handleApplicationsCollect(agentAppItem)"
/>
<n-popover
placement="bottom-end"
trigger="hover"
:show-arrow="false"
class="rounded-[10px]! px-[12px]! cursor-pointer"
> >
{{ t('common_module.data_table_module.analysis') }} <template #trigger>
</div> <More
<div v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"> theme="outline"
<div v-show="agentAppItem.isSale === 'Y'"> size="18"
<n-popconfirm fill="#333"
:show-icon="false" :stroke-width="2"
class="w-[170px]" class="ml-[12px] cursor-pointer"
:positive-text="t('common_module.confirm_btn_text')" />
:negative-text="t('common_module.cancel_btn_text')" </template>
@positive-click="handleChangeApplicationsSaleStatus(agentAppItem)" <div
> v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
<template #trigger> class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
<div @click="handleAnalysisPersonalApp(agentAppItem)"
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]" >
> {{ t('common_module.data_table_module.analysis') }}
{{ t('common_module.data_table_module.remove_applications') }}
</div>
</template>
{{
t('personal_space_module.agent_module.agent_list_module.remove_applications_dialog_title')
}}
</n-popconfirm>
</div> </div>
<div v-show="agentAppItem.isSale === 'N'"> <div v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'">
<div <div v-show="agentAppItem.isSale === 'Y'">
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]" <n-popconfirm
@click="handleChangeApplicationsSaleStatus(agentAppItem)" :show-icon="false"
> class="w-[170px]"
{{ t('common_module.data_table_module.listing_applications') }} :positive-text="t('common_module.confirm_btn_text')"
:negative-text="t('common_module.cancel_btn_text')"
@positive-click="handleChangeApplicationsSaleStatus(agentAppItem)"
>
<template #trigger>
<div
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
>
{{ t('common_module.data_table_module.remove_applications') }}
</div>
</template>
{{
t(
'personal_space_module.agent_module.agent_list_module.remove_applications_dialog_title',
)
}}
</n-popconfirm>
</div>
<div v-show="agentAppItem.isSale === 'N'">
<div
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
@click="handleChangeApplicationsSaleStatus(agentAppItem)"
>
{{ t('common_module.data_table_module.listing_applications') }}
</div>
</div> </div>
</div> </div>
</div>
<div <div
class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]" class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]"
@click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)" @click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)"
> >
{{ t('common_module.delete') }} {{ t('common_module.delete') }}
</div> </div>
</n-popover> </n-popover>
</div>
</div> </div>
</div> </div>
</div> </div>
</n-grid-item>
<div v-for="number in 4" v-show="agentAppListBottomLoadingMore" :key="number" class="w-[380px]">
<n-skeleton text :repeat="12" />
</div> </div>
</n-grid-item> </n-grid>
<div v-for="number in 4" v-show="agentAppListBottomLoadingMore" :key="number" class="w-[380px]"> <div v-else>
<n-skeleton text :repeat="12" /> <div class="flex h-[650px] w-full items-center justify-center">
</div> <div class="flex flex-col items-center justify-center">
</n-grid> <img :src="emptyTableImage" alt="empty" class="mb-[20px] h-[68px] w-[68px]" />
<div v-else> <p class="mb-[14px] text-[14px] text-[#999999]">
<div class="flex h-[650px] w-full items-center justify-center"> {{ emptyTableText }}
<div class="flex flex-col items-center justify-center"> </p>
<img :src="emptyTableImage" alt="empty" class="mb-[20px] h-[68px] w-[68px]" /> <NButton
<p class="mb-[14px] text-[14px] text-[#999999]"> v-show="
{{ emptyTableText }} emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')
</p> "
<NButton type="primary"
v-show="emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')" :bordered="false"
type="primary" :focusable="false"
:bordered="false" @click="handleSelectAddType"
:focusable="false" >
@click="handleSelectAddType" <span class="text-center text-[14px]">{{ t('common_module.create_agent_btn_text') }}</span>
> </NButton>
<span class="text-center text-[14px]">{{ t('common_module.create_agent_btn_text') }}</span> </div>
</NButton>
</div> </div>
</div> </div>
</div> <div
<div v-show="
v-show="pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0" pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0 && pagingInfo.totalRows > 12
class="mb-[50px] mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]" "
> class="mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div> >
<div class="mb-[8px] w-[80px]"> <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
{{ t('personal_space_module.agent_module.agent_list_module.already_bottom') }} <div class="mb-[8px] w-[80px]">
{{ t('personal_space_module.agent_module.agent_list_module.already_bottom') }}
</div>
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
</div> </div>
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
</div> </div>
</div> </div>
</div> </n-scrollbar>
<SaleApplicationsConfigurationModal <SaleApplicationsConfigurationModal
v-model="isShowSaleApplicationsConfigurationModal" v-model="isShowSaleApplicationsConfigurationModal"
:data="saleApplicationsInfo" :data="saleApplicationsInfo"
......
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