From f39cceda18678079834afe84b6b2305b0d355802 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <haozi@loli.email>
Date: Thu, 15 May 2025 03:39:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=962FA=E6=A8=A1=E6=80=81?=
 =?UTF-8?q?=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/setting/SettingUser.vue |  2 +-
 web/src/views/setting/TwoFaModal.vue  | 41 ++++++++++++++++-----------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/web/src/views/setting/SettingUser.vue b/web/src/views/setting/SettingUser.vue
index d363c3c4..4d6e3d37 100644
--- a/web/src/views/setting/SettingUser.vue
+++ b/web/src/views/setting/SettingUser.vue
@@ -91,7 +91,7 @@ const columns: any = [
           },
           {
             default: () => $gettext('Access Tokens'),
-            icon: renderIcon('material-symbols:edit-outline', { size: 14 })
+            icon: renderIcon('material-symbols:vpn-key-outline', { size: 14 })
           }
         ),
         h(
diff --git a/web/src/views/setting/TwoFaModal.vue b/web/src/views/setting/TwoFaModal.vue
index 891b4888..61a992a2 100644
--- a/web/src/views/setting/TwoFaModal.vue
+++ b/web/src/views/setting/TwoFaModal.vue
@@ -51,23 +51,30 @@ watch(
     @close="show = false"
   >
     <n-flex vertical>
-      <n-flex :wrap="false" justify="start" align="flex-start" :size="20">
-        <n-image :src="qrCode" :alt="$gettext('QR Code')" width="200" height="200" />
-        <n-flex vertical :size="12">
-          <n-text style="max-width: 400px">
-            {{ $gettext('Scan the QR code with your 2FA app and enter the code below') }}
-          </n-text>
-          <n-text style="max-width: 400px">
-            {{
-              $gettext('If you cannot scan the QR code, please enter the URL below in your 2FA app')
-            }}
-          </n-text>
-          <n-text style="max-width: 400px; word-break: break-all">
-            <a :href="model.url" target="_blank">{{ model.url }}</a>
-          </n-text>
-        </n-flex>
-      </n-flex>
-
+      <n-grid :cols="8" item-responsive responsive="screen">
+        <n-gi span="0 l:1"></n-gi>
+        <n-gi span="8 l:3">
+          <n-image :src="qrCode" :alt="$gettext('QR Code')" />
+        </n-gi>
+        <n-gi span="8 l:3">
+          <n-flex vertical>
+            <n-text>
+              {{ $gettext('Scan the QR code with your 2FA app and enter the code below') }}
+            </n-text>
+            <n-text>
+              {{
+                $gettext(
+                  'If you cannot scan the QR code, please enter the URL below in your 2FA app'
+                )
+              }}
+            </n-text>
+            <n-text>
+              <a :href="model.url" target="_blank">{{ model.url }}</a>
+            </n-text>
+          </n-flex>
+        </n-gi>
+        <n-gi span="0 l:1"> </n-gi>>
+      </n-grid>
       <n-form>
         <n-form-item path="code" :label="$gettext('Code')">
           <n-input