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">
import { computed, ref, useTemplateRef, watch } from 'vue'
import { ref, useTemplateRef, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { Search, More, Star } from '@icon-park/vue-next'
import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
......@@ -12,7 +12,6 @@ import {
fetchRemoveSalePublishApplication,
} from '@/apis/agent-application.ts'
import { PersonalAppConfigState } from '@/store/types/personal-app-config.ts'
import { useScroll } from '@vueuse/core'
import { router } from '@/router/index.ts'
import SaleApplicationsConfigurationModal from './sale-applications-configuration-modal.vue'
import { defaultPersonalAppConfigState } from '@/store/modules/personal-app-config'
......@@ -22,10 +21,6 @@ import applicationEmptyImage from '@/assets/images/application-empty.png'
const { t } = useI18n()
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 isShowSaleApplicationsConfigurationModal = ref(false)
......@@ -67,10 +62,12 @@ const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_modu
const emptyTableImage = ref()
const isAgentAppListBottom = ref(false)
watch(
() => arrivedState.bottom,
() => isAgentAppListBottom.value,
() => {
if (arrivedState.bottom) {
if (isAgentAppListBottom.value) {
if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
pagingInfo.value.pageNo += 1
agentAppListBottomLoadingMore.value = true
......@@ -186,6 +183,15 @@ function handleSelectAddType() {
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) {
console.log('分析', personalApp)
}
......@@ -219,173 +225,189 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
</template>
</NInput>
</div>
<div ref="cardContentWrapRef" class="mb-[50px] h-full overflow-y-auto pb-[16px]" style="scrollbar-width: none">
<div class="flex justify-center">
<n-spin v-show="agentAppListLoading" size="large" />
</div>
<div v-show="!agentAppListLoading" class="mt-[5px]">
<n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen">
<n-grid-item
v-for="agentAppItem in agentAppList"
: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)]"
<n-scrollbar style="max-height: 700px" @scroll="handleCardContentScroll">
<div ref="cardContentWrapRef" class="pb-[50px]">
<div class="flex justify-center">
<n-spin v-show="agentAppListLoading" size="large" />
</div>
<div v-show="!agentAppListLoading" class="mt-[5px]">
<n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen">
<n-grid-item
v-for="agentAppItem in agentAppList"
:key="agentAppItem.baseInfo.agentId"
class="mb-[20px] mr-[15px]"
>
<div
class="mt-[6px] flex cursor-pointer justify-between"
@click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
class="rounded-[10px]! ml-[5px] max-w-[380px] px-[24px] pb-[19px] pt-[13px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
>
<div class="mb-[19px] mr-[15px] text-[14px]">
<n-popover trigger="hover">
<template #trigger>
<div
class="popover-trigger h-[23px] w-full max-w-[160px] cursor-pointer truncate font-medium text-[#333333]"
>
<div
class="mt-[6px] flex cursor-pointer justify-between"
@click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
>
<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 || '--' }}
</div>
</template>
<span>{{ agentAppItem.baseInfo.agentTitle || '--' }}</span>
</n-popover>
<div class="agent-desc my-[18px] h-[44px] w-full max-w-[160px] text-[#999999]">
<n-ellipsis :line-clamp="2">
{{ agentAppItem.baseInfo.agentDesc }}
</n-ellipsis>
<template #tooltip>
<div style="max-width: 230px">
{{ 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>
</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>
<n-button
:color="agentAppItem.baseInfo.agentPublishStatus === 'draft' ? '#CCCCCC' : '#000DFF'"
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 class="h-[99px] w-[101px]">
<img :src="agentAppItem.baseInfo.agentAvatar" class="h-[99px] min-w-[101px] rounded-[10px]" />
</div>
<div class="flex">
<Star
v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
theme="two-tone"
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"
>
<template #trigger>
<More
theme="outline"
size="18"
fill="#333"
:stroke-width="2"
class="ml-[12px] cursor-pointer"
/>
</template>
<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 class="flex">
<Star
v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'"
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
@click="handleAnalysisPersonalApp(agentAppItem)"
theme="two-tone"
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') }}
</div>
<div v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'">
<div v-show="agentAppItem.isSale === 'Y'">
<n-popconfirm
:show-icon="false"
class="w-[170px]"
: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>
<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'"
class="mb-[10px] w-full rounded-[5px] py-[4px] pl-[5px] text-[14px] text-[#333333] hover:bg-[#f1f1f1]"
@click="handleAnalysisPersonalApp(agentAppItem)"
>
{{ t('common_module.data_table_module.analysis') }}
</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 v-show="agentAppItem.baseInfo.agentPublishStatus !== 'draft'">
<div v-show="agentAppItem.isSale === 'Y'">
<n-popconfirm
:show-icon="false"
class="w-[170px]"
: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
class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]"
@click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)"
>
{{ t('common_module.delete') }}
</div>
</n-popover>
<div
class="w-[96px] rounded-[5px] py-[4px] pl-[8px] text-[14px] text-[#F25744] hover:bg-[#f1f1f1]"
@click="handleDeletePersonalApp(agentAppItem.baseInfo.agentId)"
>
{{ t('common_module.delete') }}
</div>
</n-popover>
</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>
</n-grid-item>
<div v-for="number in 4" v-show="agentAppListBottomLoadingMore" :key="number" class="w-[380px]">
<n-skeleton text :repeat="12" />
</div>
</n-grid>
<div v-else>
<div class="flex h-[650px] w-full items-center justify-center">
<div class="flex flex-col items-center justify-center">
<img :src="emptyTableImage" alt="empty" class="mb-[20px] h-[68px] w-[68px]" />
<p class="mb-[14px] text-[14px] text-[#999999]">
{{ emptyTableText }}
</p>
<NButton
v-show="emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')"
type="primary"
:bordered="false"
:focusable="false"
@click="handleSelectAddType"
>
<span class="text-center text-[14px]">{{ t('common_module.create_agent_btn_text') }}</span>
</NButton>
</n-grid>
<div v-else>
<div class="flex h-[650px] w-full items-center justify-center">
<div class="flex flex-col items-center justify-center">
<img :src="emptyTableImage" alt="empty" class="mb-[20px] h-[68px] w-[68px]" />
<p class="mb-[14px] text-[14px] text-[#999999]">
{{ emptyTableText }}
</p>
<NButton
v-show="
emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')
"
type="primary"
:bordered="false"
:focusable="false"
@click="handleSelectAddType"
>
<span class="text-center text-[14px]">{{ t('common_module.create_agent_btn_text') }}</span>
</NButton>
</div>
</div>
</div>
</div>
<div
v-show="pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0"
class="mb-[50px] 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]">
{{ t('personal_space_module.agent_module.agent_list_module.already_bottom') }}
<div
v-show="
pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0 && pagingInfo.totalRows > 12
"
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]">
{{ 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 class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
</div>
</div>
</div>
</n-scrollbar>
<SaleApplicationsConfigurationModal
v-model="isShowSaleApplicationsConfigurationModal"
: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