refactor: 优化 PageHeader 组件在移动端下的展示

src/components/PageHeader/index.vue

@@ -9,6 +9,8 @@ defineProps({
     default: '',
   },
 })
+
+const slots = useSlots()
 </script>
 
 <template>
@@ -23,7 +25,7 @@ defineProps({
         </slot>
       </div>
     </div>
-    <div class="sub">
+    <div v-if="slots.default" class="sub">
       <slot />
     </div>
   </div>
@@ -65,4 +67,15 @@ defineProps({
     flex: none;
   }
 }
+
+[data-mode="mobile"] {
+  .header {
+    flex-direction: column;
+
+    .main {
+      margin-right: auto;
+      margin-bottom: 20px;
+    }
+  }
+}
 </style>

src/views/index.vue

@@ -60,7 +60,7 @@ const oneStepAdminInfo = ref({
           <div>注：在作者就职的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
         </div>
       </template>
-      <el-button-group style="margin-right: 10px;">
+      <el-button-group>
         <el-button type="success" size="large" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">
           开发文档
         </el-button>