chore: move qr params in `a-popover`

1 files changed, 21 insertions, 16 deletions

diff --git a/web/html/modals/qrcode_modal.html b/web/html/modals/qrcode_modal.html
index e5b27841..6498e576 100644
--- a/web/html/modals/qrcode_modal.html
+++ b/web/html/modals/qrcode_modal.html
@@ -1,9 +1,26 @@
 {{define "modals/qrcodeModal"}}
-<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-  :dialog-style="isMobile ? { top: '18px' } : {}" :closable="true" :class="themeSwitcher.currentTheme" :footer="null"
-  width="fit-content">
+<a-modal id="qrcode-modal" v-model="qrModal.visible" :closable="true" :class="themeSwitcher.currentTheme"
+  width="fit-content" :dialog-style="isMobile ? { top: '18px' } : {}" :footer="null">
   <tr-qr-modal class="qr-modal">
-
+    <template #title>
+      <a-space direction="horizontal">
+        <span>[[ qrModal.title ]]</span>
+        <a-popover :overlay-class-name="themeSwitcher.currentTheme" trigger="click" placement="bottom">
+          <template slot="content">
+            <a-space direction="vertical">
+              <template v-for="(row, index) in qrModal.qrcodes">
+                <b>[[ row.remark ]]</b>
+                <a-space direction="horizontal">
+                  <a-switch size="small" :checked="row.useIPv4" @click="toggleIPv4(index)"></a-switch>
+                  <span>{{ i18n "useIPv4ForHost" }}</span>
+                </a-space>
+              </template>
+            </a-space>
+          </template>
+          <a-icon type="setting"></a-icon>
+        </a-popover>
+      </a-space>
+    </template>
     <template v-if="app.subSettings.enable && qrModal.subId">
       <tr-qr-box class="qr-box">
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
@@ -24,18 +41,6 @@
     </template>
     <template v-for="(row, index) in qrModal.qrcodes">
       <tr-qr-box class="qr-box">
-        <div :style="{ display: 'flex', alignItems: 'center', marginBottom: '8px' }">
-          <span>{{ i18n "useIPv4ForHost" }}: </span>
-          <button
-            type="button"
-            role="switch"
-            :aria-checked="row.useIPv4"
-            :class="['ant-switch', 'ant-switch-small', { 'ant-switch-checked': row.useIPv4 }]"
-            @click="toggleIPv4(index)"
-            :style="{ marginLeft: '8px' }">
-            <span class="ant-switch-inner"></span>
-          </button>
-        </div>
         <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
         <tr-qr-bg class="qr-bg">
           <canvas @click="copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>