chore: 应用布局优化

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

@@ -52,7 +52,7 @@ const publishStatusOptions = [
 
 const pagingInfo = ref<PaginationInfo>({
   pageNo: 1,
-  pageSize: 12,
+  pageSize: 16,
   totalPages: 0,
   totalRows: 0,
 })
@@ -196,7 +196,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
 </script>
 
 <template>
-  <div class="h-full">
+  <div class="h-full min-w-[900px]">
     <div class="mb-[13px] flex justify-between">
       <n-space vertical class="w-[118px]">
         <n-select
@@ -224,25 +224,28 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
       </NInput>
     </div>
 
-    <div ref="cardContentWrapRef" class="h-full max-h-[650px] overflow-y-auto pb-[16px]" style="scrollbar-width: none">
+    <div ref="cardContentWrapRef" class="h-full w-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">
-        <div v-if="agentAppList.length" class="flex flex-wrap justify-start">
-          <div v-for="item in agentAppList" :key="item.baseInfo.agentId" class="mb-[18px] mr-[15px]">
-            <n-card class="rounded-[10px]! w-[381px] shadow-[0_4px_10px_0px_rgba(103,103,103,.3)]">
-              <div class="mt-[6px] flex cursor-pointer" @click="handleEditPersonalApp(item.baseInfo.agentId)">
-                <div class="mr-[22px] text-[14px]">
+        <n-grid v-if="agentAppList.length" cols="l:3 xl:4" responsive="screen">
+          <n-grid-item v-for="item in agentAppList" :key="item.baseInfo.agentId" class="mb-[20px] mr-[15px]">
+            <n-card class="rounded-[10px]! max-w-[380px] shadow-[0_4px_10px_0px_rgba(103,103,103,.3)]">
+              <div
+                class="mt-[6px] flex cursor-pointer justify-between"
+                @click="handleEditPersonalApp(item.baseInfo.agentId)"
+              >
+                <div class="mr-[20px] text-[14px]">
                   <n-popover trigger="hover">
                     <template #trigger>
-                      <div class="h-[23px] w-[205px] cursor-pointer truncate font-medium text-[#333333]">
+                      <div class="h-[23px] max-w-[140px] cursor-pointer truncate font-medium text-[#333333]">
                         {{ item.baseInfo.agentTitle || '--' }}
                       </div>
                     </template>
                     <span>{{ item.baseInfo.agentTitle || '--' }}</span>
                   </n-popover>
-                  <div class="my-[18px] h-[44px] w-[196px] text-[#999999]">
+                  <div class="my-[18px] h-[44px] max-w-[180px] text-[#999999]">
                     <n-ellipsis :line-clamp="2">
                       {{ item.baseInfo.agentDesc }}
                     </n-ellipsis>
@@ -260,11 +263,13 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
                     }}</n-button
                   >
                 </div>
-                <div><img :src="item.baseInfo.agentAvatar" width="101" height="99" /></div>
+                <div class="h-[99px] w-[101px]">
+                  <img :src="item.baseInfo.agentAvatar" class="h-[99px] min-w-[101px]" />
+                </div>
               </div>
               <template #footer>
-                <div class="flex h-[25px] justify-between">
-                  <div class="line-height-[25px] text-[14px] text-[#999999]">
+                <div class="flex justify-between">
+                  <div class="text-[12px] text-[#999999]">
                     {{ t('personal_space_module.agent_module.agent_list_module.modified_time') }}
                     {{ formatDateTime(item.modifiedTime) }}
                   </div>
@@ -272,7 +277,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
                     <Star
                       v-show="item.baseInfo.agentPublishStatus !== 'draft'"
                       theme="two-tone"
-                      size="24"
+                      size="18"
                       :fill="item.isCollect === 'Y' ? ['#ffc06d', '#ffc06d'] : ['#333', '#fff']"
                       :stroke-width="2"
                       class="cursor-pointer transition-all delay-150 duration-300 ease-in-out"
@@ -287,7 +292,7 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
                       <template #trigger>
                         <More
                           theme="outline"
-                          size="24"
+                          size="18"
                           fill="#333"
                           :stroke-width="2"
                           class="ml-[12px] cursor-pointer"
@@ -342,11 +347,11 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
                 </div>
               </template>
             </n-card>
-          </div>
+          </n-grid-item>
           <div v-for="item in 4" v-show="agentAppListBottomLoadingMore" :key="item" class="w-[380px]">
             <n-skeleton text :repeat="12" />
           </div>
-        </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">
@@ -385,3 +390,21 @@ function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
     />
   </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.n-card) {
+  > .n-card__content {
+    &:first-child {
+      padding-top: 13px !important;
+      padding-bottom: 19px !important;
+    }
+  }
+
+  > .n-card__footer {
+    &:first-child {
+      padding-top: 13px !important;
+      padding-bottom: 19px !important;
+    }
+  }
+}
+</style>