chore: 个人应用&应用广场布局调整

src/views/applications-square/applications-square.vue

@@ -203,15 +203,14 @@ function handleAddAgentApplications() {
             <div class="flex justify-center">
               <n-spin v-show="agentApplicationClassifyIsLoading" size="large" />
             </div>
-            <n-grid
+            <div
               v-show="!agentApplicationClassifyIsLoading && agentApplicationList.length !== 0"
-              cols="l:3 xl:4"
-              responsive="screen"
+              class="grid-content grid grid-cols-4"
             >
-              <n-grid-item
+              <div
                 v-for="agentApplicationItem in agentApplicationList"
                 :key="agentApplicationItem.id"
-                class="mb-[20px] mr-[15px]"
+                class="mb-[15px] mr-[15px]"
               >
                 <div
                   class="rounded-[10px]! max-w-[392px] bg-[#fff] px-[24px] pb-[20px] pt-[20px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
@@ -280,13 +279,13 @@ function handleAddAgentApplications() {
                     </div>
                   </div>
                 </div>
-              </n-grid-item>
-              <n-grid-item v-for="item in 4" :key="item" class="mr-[15px]">
+              </div>
+              <div v-for="item in 4" :key="item" class="mr-[15px]">
                 <div v-show="agentApplicationBottomIsLoading && pagingInfo.pageNo !== pagingInfo.totalPages">
                   <n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
                 </div>
-              </n-grid-item>
-            </n-grid>
+              </div>
+            </div>
             <div v-show="agentApplicationList.length === 0">
               <div class="flex h-[500px] w-full items-center justify-center">
                 <div class="flex flex-col items-center justify-center">
@@ -328,6 +327,10 @@ function handleAddAgentApplications() {
 }
 
 @media (width >= 1371px) and (width <= 1535px) {
+  .grid-content {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .popover-trigger,
   .agent-desc {
     width: 100%;
@@ -336,6 +339,10 @@ function handleAddAgentApplications() {
 }
 
 @media (width <= 1370px) {
+  .grid-content {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .popover-trigger,
   .agent-desc {
     width: 100%;

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

@@ -234,12 +234,8 @@ const handleCardContentScrollDebounce = debounce(
           <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 v-if="agentAppList.length" class="grid-content grid grid-cols-4">
+            <div v-for="agentAppItem in agentAppList" :key="agentAppItem.baseInfo.agentId" class="mb-[20px] mr-[15px]">
               <div
                 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)]"
               >
@@ -352,13 +348,13 @@ const handleCardContentScrollDebounce = debounce(
                   </div>
                 </div>
               </div>
-            </n-grid-item>
-            <n-grid-item v-for="item in 4" :key="item" class="mr-[15px]">
+            </div>
+            <div v-for="item in 4" :key="item" class="mr-[15px]">
               <div v-show="agentAppListBottomLoadingMore && pagingInfo.pageNo !== pagingInfo.totalPages">
                 <n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
               </div>
-            </n-grid-item>
-          </n-grid>
+            </div>
+          </div>
           <div v-else>
             <div class="flex h-[650px] w-full items-center justify-center">
               <div class="flex flex-col items-center justify-center">
@@ -413,7 +409,31 @@ const handleCardContentScrollDebounce = debounce(
   }
 }
 
+@media (width >= 1536px) and (width <= 1670px) {
+  .popover-trigger,
+  .agent-desc {
+    width: 100%;
+    max-width: 120px;
+  }
+}
+
+@media (width >= 1371px) and (width <= 1535px) {
+  .grid-content {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .popover-trigger,
+  .agent-desc {
+    width: 100%;
+    max-width: 160px;
+  }
+}
+
 @media (width <= 1370px) {
+  .grid-content {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .popover-trigger,
   .agent-desc {
     width: 100%;