fix ui.

src/shared/components/Beian.vue

@@ -0,0 +1,40 @@
+<template>
+  <n-space v-if="!hiddenICP" justify="center" class="beian">
+    <n-button text @click="goICP">浙ICP备2023044109号</n-button>
+    <div>
+      <img src="/备案图标.png" alt="备案图标" />
+      <n-button text @click="goPublicSecurity">
+        浙公网安备33100402331786
+      </n-button>
+    </div>
+  </n-space>
+</template>
+<script lang="ts" setup>
+const route = useRoute()
+const hiddenICP = computed(() =>
+  ["problem", "contest problem"].includes(<string>route.name),
+)
+
+function goICP() {
+  window.open("https://beian.miit.gov.cn", "_blank")
+}
+
+function goPublicSecurity() {
+  window.open(
+    "https://beian.mps.gov.cn/#/query/webSearch?code=33100402331786",
+    "_blank",
+  )
+}
+</script>
+<style scoped>
+.beian {
+  margin-bottom: 12px;
+}
+
+.beian img {
+  width: 14px;
+  height: 14px;
+  transform: translateY(2px);
+  margin-right: 4px;
+}
+</style>

src/shared/layout/default.vue

@@ -2,22 +2,7 @@
 import Login from "../components/Login.vue"
 import Signup from "../components/Signup.vue"
 import Header from "../components/Header.vue"
-
+import Beian from "../components/Beian.vue"
-function goICP() {
-  window.open("https://beian.miit.gov.cn", "_balnk")
-}
-
-function goPublicSecurity() {
-  window.open(
-    "https://beian.mps.gov.cn/#/query/webSearch?code=33100402331786",
-    "_balnk",
-  )
-}
-
-const route = useRoute()
-const hiddenICP = computed(() =>
-  ["problem", "contest problem"].includes(<string>route.name),
-)
 </script>
 
 <template>
@@ -30,15 +15,7 @@ const hiddenICP = computed(() =>
     </n-layout-content>
     <Login />
     <Signup />
-    <n-space v-if="!hiddenICP" justify="center" class="beian">
+    <Beian />
-      <n-button text @click="goICP">浙ICP备2023044109号</n-button>
-      <div>
-        <img class="psIcon" src="/备案图标.png" alt="备案图标" />
-        <n-button text @click="goPublicSecurity">
-          浙公网安备33100402331786
-        </n-button>
-      </div>
-    </n-space>
   </n-layout>
 </template>
 
@@ -46,19 +23,4 @@ const hiddenICP = computed(() =>
 .header {
   padding: 8px;
 }
-
-.beian {
-  margin-bottom: 12px;
-}
-
-.beian > a {
-  text-decoration: none;
-}
-
-.psIcon {
-  width: 14px;
-  height: 14px;
-  transform: translateY(2px);
-  margin-right: 2px;
-}
 </style>