v2 refacting

src/components/layout/Layout.vue

@@ -12,12 +12,14 @@
           <MainApp></MainApp>
         </el-main>
         <el-footer>
-          <span>
-            管祥玮的个人网站 ©Copyright 2022-2022
-          </span>
-          <span @click="openSiteQuery">辽ICP备2022003637号-2</span>
-          <div>
-            <el-avatar @click="openGithub" src="https://github.githubassets.com/favicons/favicon.svg" />
+          <div class="footer-left">
+            <span>{{ SITE_NAME }} {{ COPYRIGHT_TEXT }}</span>
+            <span class="separator">|</span>
+            <span class="icp-link" @click="openSiteQuery">{{ ICP_NUMBER }}</span>
+          </div>
+          <div class="footer-right">
+            <el-avatar :size="24" class="github-icon" @click="openGithub"
+              src="https://github.githubassets.com/favicons/favicon.svg" />
           </div>
         </el-footer>
       </el-container>
@@ -30,6 +32,7 @@ import MainApp from '../layout/MainApp.vue'
 import NavBar from "../layout/NavBar.vue"
 import SideBar from "../layout/SideBar.vue"
 import { settingsStore } from "@/store/modules/settings"
+import { SITE_NAME, COPYRIGHT_TEXT, ICP_NUMBER, ICP_QUERY_URL } from "@/const/site"
 
 // -- IMPORT --
 const useSettingsStore = settingsStore()
@@ -62,8 +65,7 @@ const openGithub = () => {
 }
 
 const openSiteQuery = () => {
-  let href = 'https://beian.miit.gov.cn/#/Integrated/index'
-  window.open(href, '_blank')
+  window.open(ICP_QUERY_URL, '_blank')
 }
 
 /**
@@ -81,9 +83,12 @@ iniPage()
 }
 
 .el-main {
+  /* 让 main 区占满 header 与 footer 之间的剩余空间，
+     内容多了 main 内部滚动，footer 永远钉在 layout 底部 */
   padding: 16px;
-  overflow: hidden;
-  height: 100%;
+  flex: 1;
+  min-height: 0;          /* flex item 默认 min-height: auto 会阻止收缩 */
+  overflow-y: auto;
 }
 
 .el-aside {
@@ -93,13 +98,50 @@ iniPage()
 }
 
 .el-footer {
+  /* flex: 0 0 auto 让 footer 保持自身高度（不撑开、不收缩） */
+  flex: 0 0 auto;
   margin-top: 20px;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  border-top: 1px solid rgba(151, 151, 151, 0.2);
+  font-size: 16px;
+  color: #666;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer-right {
+  display: flex;
+  align-items: center;
+}
+
+.separator {
+  color: #ccc;
+}
+
+.icp-link {
+  cursor: pointer;
+  user-select: none;
+}
+
+.icp-link:hover {
+  color: #409eff;
+}
+
+.github-icon {
+  /* 跟 footer 文字 baseline 对齐 */
+  vertical-align: middle;
+  cursor: pointer;
 }
 
 .main_container {
-  /* height: 100%; */
+  height: 100%;
 }
 
 .homeWrap {