fix: 修复Footer在无内容时下移至页面外的问题

截止上一个 commit (582fcf8)，当 View 的文档流中只存在 u-banner 时，inner-container 的高度会增加
24px，这也使得 Footer 组件会因此会下移至页面底部外 24px 处。具体渲染机制暂时不明，但此情况导
致 View 中只存在 LoadAnim 组件的加载时期和加载完成后页脚位置不一致。

由于页面只有一个 LoadAnim 组件时一般不会在文档流中写入有效的文字内容，因此通过增加一个透明
且有内容的占位 div 即可解决问题。同时为了避免出现设计上的问题，将 Footer 的字号和内外 container
的边距做了统一，防止出现意外。同时为 main 纵向内容溢出处理方式改为 scroll 而非 auto，防止内容溢
出时跑到 main 之外。

Signed-off-by: crrashh1542 <[email protected]>

src/components/Footer.vue

@@ -18,6 +18,7 @@ defineOptions({ name: 'MainFooter' })
     border-top: 1px solid @wu-color-border;
     padding: 1em 36px;
     width: calc(100% - 72px);
+    font-size: 16px;
     p { margin: 0; }
 }
 </style>

src/components/Wrapper.vue

@@ -151,19 +151,18 @@ main {
     background-color: @wu-color-main;
     border-radius: @wu-layout-radius 0 0 0;
     text-align: left;
-    overflow: auto;
     box-shadow: 0px 0px 8px #00000011;
     scroll-behavior: smooth;
+    overflow-y: scroll;
     // 设置 flex 是为了能让 footer 始终置于页面底部
     flex-direction: column;
-    justify-content: space-between;
     .container-outer {
-        min-height: calc(100% - 72px);
-        padding: 24px 0 0;
+        min-height: calc(100% - 80px);
+        padding: 24px 0 56px; // 下边距 56px 为 Footer 组件高度
         .container-inner {
             padding: 0 36px;
             width: calc(100% - 72px);
-            min-height: calc(100% - 36px);
+            min-height: calc(100% - 1px);
         }
     }
 }

src/components/widgets/LoadAnim.vue

@@ -28,10 +28,12 @@ if (mode !== 'filled'){ mode = '' }
             数据正在玩命加载中 ᕕ( ᐛ )ᕗ
         </div>
     </div>
-
-    <!-- <div class="tip">
 
-    </div> -->
+    <!--
+        若mode为filled，则需要其内有内容支撑，否则整个外部flex的高度会多出24px
+        导致Footer组件被挤到页面底部之外，出现排版错误。
+    -->
+    <div class="placeholder" v-if="mode == 'filled'">placeholder</div>
 </template>
 
 <style lang="less">
@@ -142,4 +144,7 @@ if (mode !== 'filled'){ mode = '' }
         margin-top: 1em;
     }
 }
+.placeholder {
+    opacity: 0;
+}
 </style>