style: adjust the style and layout of multiple components and optimize responsive design

src/layout/index.vue

@@ -57,9 +57,11 @@ watch(
     <MobileLeftAside v-if="isSmallScreen" />
 
     <div
-      class="relative flex h-full w-full flex-col border-naive-border transition-[background-color,border-color,rounded,transform] max-sm:bg-naive-card/50"
+      class="relative flex h-full w-full flex-col max-sm:bg-naive-card/50"
       :class="{
-        'rounded-xl border': isSmallScreen && layoutTranslateOffset,
+        'border-naive-border transition-[background-color,border-color,rounded,transform]':
+          isSmallScreen,
+        'rounded-xl border pb-2': isSmallScreen && layoutTranslateOffset,
       }"
       :style="
         isSmallScreen &&
@@ -74,9 +76,8 @@ watch(
         <AsideLayout v-if="!isSmallScreen" />
         <div class="flex flex-1 flex-col overflow-hidden">
           <CollapseTransition
-            :display="
-              !isSmallScreen && !isEmpty(tabsStore.tabs) && preferencesStore.preferences.showTabs
-            "
+            v-if="!isSmallScreen"
+            :display="!isEmpty(tabsStore.tabs) && preferencesStore.preferences.showTabs"
             direction="horizontal"
             :render-content="false"
             container-class="shrink-0 items-baseline"
@@ -98,7 +99,8 @@ watch(
             </template>
           </EmptyPlaceholder>
           <CollapseTransition
-            :display="!isSmallScreen && preferencesStore.preferences.showFooter"
+            v-if="!isSmallScreen"
+            :display="preferencesStore.preferences.showFooter"
             direction="horizontal"
             :render-content="false"
             container-class="shrink-0 items-baseline"

src/views/about/index.vue

@@ -187,7 +187,7 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-4">
+  <ContentWrapper content-class="flex flex-col gap-y-2">
     <NCard
       :title="`关于 ${APP_NAME}`"
       :size="isMediumScreen ? 'small' : undefined"

src/views/dashboard/index.vue

@@ -1119,8 +1119,8 @@ watch([isDark, color], () => {
 })
 </script>
 <template>
-  <ContentWrapper content-class="flex flex-col gap-y-4">
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+  <ContentWrapper content-class="flex flex-col gap-y-4 max-sm:gap-y-2">
+    <div class="grid grid-cols-1 gap-4 max-sm:gap-2 md:grid-cols-2 lg:grid-cols-4">
       <div
         v-for="item in cardList"
         :key="item.title"
@@ -1166,7 +1166,7 @@ watch([isDark, color], () => {
       </div>
     </div>
 
-    <div class="grid grid-cols-1 gap-4 overflow-hidden lg:grid-cols-12">
+    <div class="grid grid-cols-1 gap-4 overflow-hidden max-sm:gap-2 lg:grid-cols-12">
       <div class="col-span-1 lg:col-span-8">
         <div
           class="rounded bg-naive-card px-5 pt-5 pb-4.5 shadow-xs transition-[background-color]"
@@ -1194,7 +1194,7 @@ watch([isDark, color], () => {
         </div>
       </div>
     </div>
-    <div class="grid grid-cols-1 gap-4 overflow-hidden lg:grid-cols-12">
+    <div class="grid grid-cols-1 gap-4 overflow-hidden max-sm:gap-2 lg:grid-cols-12">
       <div class="col-span-1 lg:col-span-5">
         <div
           class="rounded bg-naive-card px-5 pt-5 pb-3 shadow-xs transition-[background-color]"

src/views/data-show/data-table/index.vue

@@ -441,7 +441,7 @@ getDataList()
 <template>
   <ContentWrapper
     content-class="flex flex-col gap-y-2"
-    :scrollable="false"
+    :scrollable="isLargeScreen"
   >
     <NAlert
       type="info"
@@ -542,7 +542,7 @@ getDataList()
           ref="dataTableRef"
           v-model:checked-row-keys="checkedRowKeys"
           :remote="true"
-          flex-height
+          :flex-height="!isLargeScreen"
           :scroll-x="enableScrollX ? 1800 : 0"
           :columns="columns"
           :data="dataList"