From 745e36f83827d6d94fc563fe14cf3fbec1a9c91c Mon Sep 17 00:00:00 2001
From: Dream Hunter <dreamhunter2333@gmail.com>
Date: Sat, 18 May 2024 14:46:24 +0800
Subject: [PATCH] feat: UI changes (#247)

---
 CHANGELOG.md                            |  3 ++-
 frontend/src/views/index/AddressBar.vue | 22 ++++++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index caca11a9..3fbdad0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,8 @@
 
 - `telegram bot`  白名单配置
 - `ENABLE_WEBHOOK` 添加 webhook
-- admin 页面使用双层 tab
+- UI: admin 页面使用双层 tab
+- UI: 登录后可直接主页切换地址
 
 ## v0.4.2
 
diff --git a/frontend/src/views/index/AddressBar.vue b/frontend/src/views/index/AddressBar.vue
index bf0c3baf..344fb4cd 100644
--- a/frontend/src/views/index/AddressBar.vue
+++ b/frontend/src/views/index/AddressBar.vue
@@ -1,27 +1,28 @@
 <script setup>
 import useClipboard from 'vue-clipboard3'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { Copy, User } from '@vicons/fa'
+import { Copy, User, ExchangeAlt } from '@vicons/fa'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Login from '../common/Login.vue'
+import AddressManagement from '../user/AddressManagement.vue'
 
 const { toClipboard } = useClipboard()
 const message = useMessage()
 const router = useRouter()
 
 const {
-    jwt, localeCache, settings, showAddressCredential, openSettings
+    jwt, localeCache, settings, showAddressCredential, userJwt
 } = useGlobalState()
 
 const { t } = useI18n({
     locale: localeCache.value || 'zh',
     messages: {
         en: {
-            yourAddress: 'Your email address is',
+            changeAddress: 'Change Address',
             ok: 'OK',
             copy: 'Copy',
             copied: 'Copied',
@@ -31,7 +32,7 @@ const { t } = useI18n({
             userLogin: 'User Login',
         },
         zh: {
-            yourAddress: '你的邮箱地址是',
+            changeAddress: '更换地址',
             ok: '确定',
             copy: '复制',
             copied: '已复制',
@@ -43,6 +44,8 @@ const { t } = useI18n({
     }
 });
 
+const showChangeAddress = ref(false)
+
 const copy = async () => {
     try {
         await toClipboard(settings.value.address)
@@ -65,7 +68,11 @@ onMounted(async () => {
         <div v-else-if="settings.address">
             <n-alert type="info" :show-icon="false">
                 <span>
-                    <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
+                    <b>{{ settings.address }}</b>
+                    <n-button v-if="userJwt" style="margin-left: 10px" @click="showChangeAddress = true" size="small"
+                        tertiary type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('changeAddress') }}
+                    </n-button>
                     <n-button style="margin-left: 10px" @click="copy" size="small" tertiary type="primary">
                         <n-icon :component="Copy" /> {{ t('copy') }}
                     </n-button>
@@ -87,6 +94,9 @@ onMounted(async () => {
                 </n-button>
             </n-card>
         </div>
+        <n-modal v-model:show="showChangeAddress" preset="card" :title="t('changeAddress')">
+            <AddressManagement />
+        </n-modal>
         <n-modal v-model:show="showAddressCredential" preset="dialog" :title="t('addressCredential')">
             <span>
                 <p>{{ t("addressCredentialTip") }}</p>