From 43c0c101654c0b7e56ff8fc1c7b2e6d588a26314 Mon Sep 17 00:00:00 2001
From: cxzlw <wsc_zds@qq.com>
Date: Sun, 1 Dec 2024 18:34:15 +0800
Subject: [PATCH] refactor: extract footer as a component
---
components.d.ts | 1 +
src/App.vue | 4 +++
src/components/FooterBar.vue | 50 +++++++++++++++++++++++++++
src/components/LanguageSwitch.vue | 2 +-
src/views/auth/LoginView.vue | 2 --
src/views/auth/SignUpView.vue | 2 --
src/views/authorize/AuthorizeView.vue | 45 ------------------------
7 files changed, 56 insertions(+), 50 deletions(-)
create mode 100644 src/components/FooterBar.vue
diff --git a/components.d.ts b/components.d.ts
index 823fa1a..4ba00f8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,7 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
+ FooterBar: typeof import('./src/components/FooterBar.vue')['default']
IMdiTranslate: typeof import('~icons/mdi/translate')['default']
LanguageSwitch: typeof import('./src/components/LanguageSwitch.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/App.vue b/src/App.vue
index f6c3a3a..b6e248c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,6 +16,10 @@
<main>
<RouterView />
</main>
+
+ <footer>
+ <FooterBar />
+ </footer>
</template>
<script setup lang="ts">
import { useLocalStorage, useTitle } from "@vueuse/core";
diff --git a/src/components/FooterBar.vue b/src/components/FooterBar.vue
new file mode 100644
index 0000000..004f500
--- /dev/null
+++ b/src/components/FooterBar.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+let { t } = useI18n();
+</script>
+<template>
+ <var-divider>
+ <var-icon name="heart-outline" style="margin: 0 16px; color: pink" />
+ </var-divider>
+ <div class="footer flex items-center justify-center">
+ <span
+ >{{ new Date().getFullYear() }} MtF.im is made with
+ <var-icon name="heart" color="pink"
+ /></span>
+ </div>
+ <div class="footer flex items-center justify-center">
+ <span
+ ><a href="/user-agreement">{{
+ t("footer.user-agreement")
+ }}</a></span
+ >
+ <var-divider vertical />
+ <span
+ ><a href="/privacy-policy">{{
+ t("footer.privacy-policy")
+ }}</a></span
+ >
+ <var-divider vertical />
+ <span
+ ><a href="//mtf.im/about-us">{{ t("footer.about-us") }}</a></span
+ >
+ </div>
+</template>
+<style scoped>
+.footer {
+ color: #333;
+}
+
+.footer a {
+ font-size: 14px;
+ color: #888;
+ text-decoration: none;
+}
+
+.footer span {
+ font-size: 14px;
+ color: #888;
+ text-decoration: none;
+}
+</style>
diff --git a/src/components/LanguageSwitch.vue b/src/components/LanguageSwitch.vue
index e8b6f4a..652944b 100644
--- a/src/components/LanguageSwitch.vue
+++ b/src/components/LanguageSwitch.vue
@@ -11,7 +11,7 @@
</var-menu-select>
</div>
</template>
-<script setup>
+<script setup lang="ts">
import i18n from "../i18n/i18n.ts";
let locale = i18n.global.locale;
</script>
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
index 81fb5e2..d5ace40 100644
--- a/src/views/auth/LoginView.vue
+++ b/src/views/auth/LoginView.vue
@@ -132,8 +132,6 @@ async function login() {
display: flex;
align-items: center;
justify-content: center;
- height: 100vh;
- width: 100vw;
}
.board {
diff --git a/src/views/auth/SignUpView.vue b/src/views/auth/SignUpView.vue
index 82ce058..60ccf1f 100644
--- a/src/views/auth/SignUpView.vue
+++ b/src/views/auth/SignUpView.vue
@@ -147,8 +147,6 @@ async function signup() {
display: flex;
align-items: center;
justify-content: center;
- height: 100vh;
- width: 100vw;
}
.board {
diff --git a/src/views/authorize/AuthorizeView.vue b/src/views/authorize/AuthorizeView.vue
index f04f5ed..6e175ea 100644
--- a/src/views/authorize/AuthorizeView.vue
+++ b/src/views/authorize/AuthorizeView.vue
@@ -206,32 +206,6 @@ var scope_detail = data.scope.split(" ").map(get_scope_detail);
</var-paper>
</div>
</var-space>
- <var-divider>
- <var-icon name="heart-outline" style="margin: 0 16px; color: pink" />
- </var-divider>
- <div class="footer">
- <span
- >{{ new Date().getFullYear() }} MtF.im is made with
- <var-icon name="heart" color="pink"
- /></span>
- </div>
- <div class="footer">
- <span
- ><a href="/user-agreement">{{
- t("footer.user-agreement")
- }}</a></span
- >
- <var-divider vertical />
- <span
- ><a href="/privacy-policy">{{
- t("footer.privacy-policy")
- }}</a></span
- >
- <var-divider vertical />
- <span
- ><a href="//mtf.im/about-us">{{ t("footer.about-us") }}</a></span
- >
- </div>
</template>
<style scoped>
@@ -272,23 +246,4 @@ var scope_detail = data.scope.split(" ").map(get_scope_detail);
background-color: var(--color-danger);
color: white;
}
-
-.footer {
- display: flex;
- justify-content: center;
- align-items: center;
- color: #333;
-}
-
-.footer a {
- font-size: 14px;
- color: #888;
- text-decoration: none;
-}
-
-.footer span {
- font-size: 14px;
- color: #888;
- text-decoration: none;
-}
</style>