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 {

src/components/login/login.vue

@@ -18,10 +18,15 @@
       </div>
     </el-card>
     <div class="footer">
-      <span>
-        管祥玮的个人网站 ©Copyright 2022-2022
-      </span>
-      <span @click="openSiteQuery">辽ICP备2022003637号-2</span>
+      <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>
     </div>
   </div>
 </template>
@@ -29,6 +34,7 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
+import { SITE_NAME, COPYRIGHT_TEXT, ICP_NUMBER, ICP_QUERY_URL } from '@/const/site'
 
 const handleOidcLogin = () => {
   const issuer = import.meta.env.VITE_OIDC_ISSUER
@@ -49,8 +55,11 @@ const handleOidcLogin = () => {
 }
 
 const openSiteQuery = () => {
-  let href = 'https://beian.miit.gov.cn/#/Integrated/index'
-  window.open(href, '_blank')
+  window.open(ICP_QUERY_URL, '_blank')
+}
+
+const openGithub = () => {
+  window.open('https://github.com/simple321vip', '_blank')
 }
 
 const style = reactive({} as any)
@@ -67,6 +76,9 @@ style.width = window.innerWidth * 0.7 + 'px'
 }
 
 .ttt {
+  /* flex column + min-height 100vh：footer 永远在视口底部，
+     内容少时 footer 贴底，内容多时 footer 在内容之后但不漂 */
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
 }
@@ -79,4 +91,49 @@ style.width = window.innerWidth * 0.7 + 'px'
   background: url('../../assets/have_a_nice_day.jpeg') center top no-repeat;
   background-size: cover;
 }
+
+.box-card {
+  /* 中间内容区撑开剩余空间 */
+  flex: 1;
+}
+
+.footer {
+  flex: 0 0 auto;
+  display: flex;
+  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 {
+  vertical-align: middle;
+  cursor: pointer;
+}
 </style>