chore: 应用列表样式优化

src/views/personal-space/personal-app/personal-app.vue

 <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,7 +225,8 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
         </template>
       </NInput>
     </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 ref="cardContentWrapRef" class="pb-[50px]">
         <div class="flex justify-center">
           <n-spin v-show="agentAppListLoading" size="large" />
         </div>
@@ -231,33 +238,40 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
               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)]"
+                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="mt-[6px] flex cursor-pointer justify-between"
                   @click="handleEditPersonalApp(agentAppItem.baseInfo.agentId)"
                 >
-                <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="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 || '--' }}
+
+                        <template #tooltip>
+                          <div style="max-width: 230px">
                             {{ agentAppItem.baseInfo.agentTitle || '--' }}
                           </div>
                         </template>
-                    <span>{{ agentAppItem.baseInfo.agentTitle || '--' }}</span>
-                  </n-popover>
+                      </n-ellipsis>
+                    </div>
+
                     <div class="agent-desc my-[18px] h-[44px] w-full max-w-[160px] text-[#999999]">
-                    <n-ellipsis :line-clamp="2">
+                      <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]"
-                    ghost
                       round
+                      ghost
                     >
                       {{
                         agentAppItem.baseInfo.agentPublishStatus === 'draft'
@@ -325,7 +339,9 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
                                 </div>
                               </template>
                               {{
-                              t('personal_space_module.agent_module.agent_list_module.remove_applications_dialog_title')
+                                t(
+                                  'personal_space_module.agent_module.agent_list_module.remove_applications_dialog_title',
+                                )
                               }}
                             </n-popconfirm>
                           </div>
@@ -363,7 +379,9 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
                   {{ emptyTableText }}
                 </p>
                 <NButton
-                v-show="emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')"
+                  v-show="
+                    emptyTableText === t('personal_space_module.agent_module.agent_list_module.application_empty')
+                  "
                   type="primary"
                   :bordered="false"
                   :focusable="false"
@@ -375,8 +393,10 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
             </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]"
+            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]">
@@ -386,6 +406,8 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
           </div>
         </div>
       </div>
+    </n-scrollbar>
+
     <SaleApplicationsConfigurationModal
       v-model="isShowSaleApplicationsConfigurationModal"
       :data="saleApplicationsInfo"