chore: Update login page with logo (#89)

Author: cwandev

src/assets/images/logo-dark.svg

@@ -47,5 +47,10 @@
     "password": "Password",
     "pleaseEnterUsername": "Please enter username",
     "pleaseEnterPassword": "Please enter password"
+  },
+  "settings": {
+    "logout": "Sign Out",
+    "currentVersion": "Current version",
+    "comfirmTitle": "Confirm Exit?"
   }
 }

src/assets/images/logo.svg

@@ -47,5 +47,10 @@
     "password": "请输入密码",
     "pleaseEnterUsername": "请输入用户名",
     "pleaseEnterPassword": "请输入密码"
+  },
+  "settings": {
+    "logout": "退出登录",
+    "currentVersion": "当前版本",
+    "comfirmTitle": "确认退出？"
   }
 }

src/locales/en-US.json

@@ -2,17 +2,28 @@
 import { type RouteMap, useRouter } from 'vue-router'
 import { useUserStore } from '@/stores'
 
-import defaultAvatar from '@/assets/images/default-avatar.svg'
+import logo from '~/images/logo.svg'
+import logoDark from '~/images/logo-dark.svg'
 
 const { t } = useI18n()
 const router = useRouter()
 const userStore = useUserStore()
-
 const loading = ref(false)
+
+const dark = ref<boolean>(isDark.value)
+
+watch(
+  () => isDark.value,
+  (newMode) => {
+    dark.value = newMode
+  },
+)
+
 const postData = reactive({
   username: '',
   password: '',
 })
+
 const rules = reactive({
   username: [
     { required: true, message: t('login.pleaseEnterUsername') },
@@ -43,8 +54,9 @@ async function asyncLogin(values: any) {
 <template>
   <div class="m-x-a w-7xl text-center">
     <div class="mb-32 mt-64">
-      <van-image :src="defaultAvatar" round class="h-64 w-64" />
+      <van-image :src="dark ? logoDark : logo" class="h-120 w-120" />
     </div>
+
     <van-form :model="postData" :rules="rules" @submit="asyncLogin">
       <van-cell-group inset>
         <van-field v-model="postData.username" :rules="rules.username" name="username" :placeholder="t('login.username')" left-icon="contact" />

src/locales/zh-CN.json

@@ -4,12 +4,13 @@ import router from '@/router'
 import { useUserStore } from '@/stores'
 import { version } from '~root/package.json'
 
+const { t } = useI18n()
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
 
 function Logout() {
   showConfirmDialog({
-    title: '确认退出？',
+    title: t('settings.comfirmTitle'),
   })
     .then(() => {
       userStore.logout()
@@ -22,11 +23,11 @@ function Logout() {
 <template>
   <div class="text-center">
     <VanCellGroup :inset="true">
-      <van-cell v-if="userInfo.uid" title="退出登录" clickable class="van-text-color" @click="Logout" />
+      <van-cell v-if="userInfo.uid" :title="$t('settings.logout')" clickable class="van-text-color" @click="Logout" />
     </VanCellGroup>
 
     <div class="mt-10 text-gray">
-      当前版本: v{{ version }}
+      {{ $t("settings.currentVersion") }}: v{{ version }}
     </div>
   </div>
 </template>