feat(config): 重构界面配置项布局与样式

将原有的线性表单布局调整为分组的 fieldset 布局，提升视觉层次和可维护性。
新增文本设置、布局设置、主题设置、图案设置和其他设置等分类区域。
优化部分输入控件的结构和样式类名，增强用户体验和代码可读性。

package.json

@@ -59,6 +59,7 @@
         "@vitest/ui": "^3.2.4",
         "@vue/test-utils": "^2.4.6",
         "autoprefixer": "^10.4.20",
+        "baseline-browser-mapping": "^2.8.32",
         "daisyui": "^5.1.13",
         "eslint": "^9.15.0",
         "eslint-plugin-vue": "^10.4.0",

pnpm-lock.yaml

@@ -132,6 +132,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
+      baseline-browser-mapping:
+        specifier: ^2.8.32
+        version: 2.8.32
       daisyui:
         specifier: ^5.1.13
         version: 5.1.13
@@ -1366,42 +1369,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -1472,67 +1469,56 @@ packages:
     resolution: {integrity: sha512-aL6hRwu0k7MTUESgkg7QHY6CoqPgr6gdQXRJI1/VbFlUMwsSzPGSR7sG5d+MCbYnJmJwThc2ol3nixj1fvI/zQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.0':
     resolution: {integrity: sha512-BTs0M5s1EJejgIBJhCeiFo7GZZ2IXWkFGcyZhxX4+8usnIo5Mti57108vjXFIQmmJaRyDwmV59Tw64Ap1dkwMw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.0':
     resolution: {integrity: sha512-uj672IVOU9m08DBGvoPKPi/J8jlVgjh12C9GmjjBxCTQc3XtVmRkRKyeHSmIKQpvJ7fIm1EJieBUcnGSzDVFyw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.0':
     resolution: {integrity: sha512-/+IVbeDMDCtB/HP/wiWsSzduD10SEGzIZX2945KSgZRNi4TSkjHqRJtNTVtVb8IRwhJ65ssI56krlLik+zFWkw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.0':
     resolution: {integrity: sha512-U1vVzvSWtSMWKKrGoROPBXMh3Vwn93TA9V35PldokHGqiUbF6erSzox/5qrSMKp6SzakvyjcPiVF8yB1xKr9Pg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.0':
     resolution: {integrity: sha512-X/4WfuBAdQRH8cK3DYl8zC00XEE6aM472W+QCycpQJeLWVnHfkv7RyBFVaTqNUMsTgIX8ihMjCvFF9OUgeABzw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.0':
     resolution: {integrity: sha512-xIRYc58HfWDBZoLmWfWXg2Sq8VCa2iJ32B7mqfWnkx5mekekl0tMe7FHpY8I72RXEcUkaWawRvl3qA55og+cwQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.0':
     resolution: {integrity: sha512-mbsoUey05WJIOz8U1WzNdf+6UMYGwE3fZZnQqsM22FZ3wh1N887HT6jAOjXs6CNEK3Ntu2OBsyQDXfIjouI4dw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.0':
     resolution: {integrity: sha512-qP6aP970bucEi5KKKR4AuPFd8aTx9EF6BvutvYxmZuWLJHmnq4LvBfp0U+yFDMGwJ+AIJEH5sIP+SNypauMWzg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.0':
     resolution: {integrity: sha512-nmSVN+F2i1yKZ7rJNKO3G7ZzmxJgoQBQZ/6c4MuS553Grmr7WqR7LLDcYG53Z2m9409z3JLt4sCOhLdbKQ3HmA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.0':
     resolution: {integrity: sha512-2d0qRo33G6TfQVjaMR71P+yJVGODrt5V6+T0BDYH4EMfGgdC/2HWDVjSSFw888GSzAZUwuska3+zxNUCDco6rQ==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.0':
     resolution: {integrity: sha512-A1JalX4MOaFAAyGgpO7XP5khquv/7xKzLIyLmhNrbiCxWpMlnsTYr8dnsWM7sEeotNmxvSOEL7F65j0HXFcFsw==}
@@ -1610,28 +1596,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
     resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
     resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.13':
     resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.13':
     resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
@@ -2284,8 +2266,8 @@ packages:
     resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
     engines: {node: '>=0.10.0'}
 
-  baseline-browser-mapping@2.8.6:
+  baseline-browser-mapping@2.8.32:
-    resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
+    resolution: {integrity: sha512-OPz5aBThlyLFgxyhdwf/s2+8ab3OvT7AdTNvKHBwpXomIYeXqpUUuT8LrdtxZSsWJ4R4CU1un4XGh5Ez3nlTpw==}
     hasBin: true
 
   bidi-js@1.0.3:
@@ -3753,28 +3735,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
@@ -7829,7 +7807,7 @@ snapshots:
       mixin-deep: 1.3.2
       pascalcase: 0.1.1
 
-  baseline-browser-mapping@2.8.6: {}
+  baseline-browser-mapping@2.8.32: {}
 
   bidi-js@1.0.3:
     dependencies:
@@ -7892,7 +7870,7 @@ snapshots:
 
   browserslist@4.26.2:
     dependencies:
-      baseline-browser-mapping: 2.8.6
+      baseline-browser-mapping: 2.8.32
       caniuse-lite: 1.0.30001743
       electron-to-chromium: 1.5.222
       node-releases: 2.0.21

src/views/Config/Global/FaceConfig.vue

@@ -1,15 +1,15 @@
 <script setup lang='ts'>
-import { daisyuiThemes } from '@/constant/theme'
+import { storeToRefs } from 'pinia'
 
+import { onMounted, ref, watch } from 'vue'
+import { ColorPicker } from 'vue3-colorpicker'
+import { useI18n } from 'vue-i18n'
+import { z as zod } from 'zod'
+import { daisyuiThemes } from '@/constant/theme'
 import i18n, { languageList } from '@/locales/i18n'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
 import { isHex, isRgbOrRgba } from '@/utils/color'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
-import { ColorPicker } from 'vue3-colorpicker'
-import { useI18n } from 'vue-i18n'
-import zod from 'zod'
 import PatternSetting from './components/PatternSetting.vue'
 import 'vue3-colorpicker/style.css'
 
@@ -194,41 +194,22 @@ onMounted(() => {
         {{ t('button.resetAllData') }}
       </button>
     </div>
-    <label class="flex flex-row items-center w-full gap-24 form-control">
+    <div class="flex flex-wrap w-full gap-6">
-      <div class="">
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          文本设置
+        </legend>
+
+        <label class="label">
           <div class="label">
             <span class="label-text">{{ t('table.title') }}</span>
           </div>
+        </label>
         <input
           v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
           class="w-full max-w-xs input input-bordered"
         >
-      </div>
+
-    </label>
-    <label class="flex flex-row items-center w-full gap-24 form-control">
-      <div class="">
-        <div class="label">
-          <span class="label-text">{{ t('table.columnNumber') }}</span>
-        </div>
-        <input
-          v-model="formData.rowCount" type="number" placeholder="Type here"
-          class="w-full max-w-xs input input-bordered"
-        >
-        <div class="help">
-          <span v-if="formErr.rowCount" class="text-sm text-red-400 help-text">
-            {{ formErr.rowCount }}
-          </span>
-        </div>
-      </div>
-      <div>
-        <div class="tooltip" :data-tip="t('tooltip.resetLayout')">
-          <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
-            <span>{{ t('button.setLayout') }}</span>
-            <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
-          </button>
-        </div>
-      </div>
-    </label>
         <label class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.language') }}</span>
@@ -238,49 +219,46 @@ onMounted(() => {
             <option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
           </select>
         </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.theme') }}</span>
-      </div>
-      <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
-        <option disabled selected>{{ t('table.theme') }}</option>
-        <option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.backgroundImage') }}</span>
-      </div>
-      <select
-        v-model="backgroundImageValue" data-choose-theme
-        class="w-full max-w-xs border-solid select border-1"
-      >
-        <option disabled selected>{{ t('table.backgroundImage') }}</option>
-        <option
-          v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
-          :value="item"
-        >{{ item.name }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.cardColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
-    </label>
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.winnerColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
-    </label>
 
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
-        <span class="label-text">{{ t('table.textColor') }}</span>
+            <span class="label-text">{{ t('table.textSize') }}</span>
           </div>
-      <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
+          <input
+            v-model="textSizeValue" type="number" placeholder="Type here"
+            class="w-full max-w-xs input input-bordered"
+          >
         </label>
+      </fieldset>
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          布局设置
+        </legend>
+        <label class="flex flex-row items-center form-control">
+          <div class="">
+            <div class="label">
+              <span class="label-text">{{ t('table.columnNumber') }}</span>
+              <div class="help">
+                <span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
+                  {{ formErr.rowCount }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </label>
+        <div class="join">
+          <input
+            v-model="formData.rowCount" type="number" placeholder="Type here"
+            class="w-full input input-bordered join-item"
+          >
+          <div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
+            <button class="btn btn-neutral w-[120px] join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
+              <span>{{ t('button.setLayout') }}</span>
+              <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
+            </button>
+          </div>
+        </div>
+
         <label class="flex flex-row w-full max-w-xs gap-10 form-control">
           <div>
             <div class="label">
@@ -301,26 +279,80 @@ onMounted(() => {
             >
           </div>
         </label>
-    <label class="w-full max-w-xs form-control">
+      </fieldset>
-      <div class="label">
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
-        <span class="label-text">{{ t('table.textSize') }}</span>
+        <legend class="fieldset-legend">
+          主题设置
+        </legend>
+
+        <div class="w-full max-w-xs form-control">
+          <label class="label">
+            <span class="label-text">{{ t('table.theme') }}</span>
+          </label>
+          <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
+            <option disabled selected>
+              {{ t('table.theme') }}
+            </option>
+            <option v-for="(item, index) in themeList" :key="index" :value="item">
+              {{ item }}
+            </option>
+          </select>
         </div>
-      <input
+        <div class="w-full max-w-xs form-control">
-        v-model="textSizeValue" type="number" placeholder="Type here"
+          <label class="label">
-        class="w-full max-w-xs input input-bordered"
+            <span class="label-text">{{ t('table.backgroundImage') }}</span>
+          </label>
+          <select
+            v-model="backgroundImageValue" data-choose-theme
+            class="w-full max-w-xs border-solid select border-1"
           >
+            <option disabled selected>
+              {{ t('table.backgroundImage') }}
+            </option>
+            <option
+              v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
+              :value="item"
+            >
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
+        <div class="grid grid-cols-2 gap-4 w-full">
+          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+            <label class="label">
+              <span class="label-text">{{ t('table.cardColor') }}</span>
             </label>
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
+            <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
-      <div class="label">
+          </div>
+          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+            <label class="label">
+              <span class="label-text">{{ t('table.winnerColor') }}</span>
+            </label>
+            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
+          </div>
+          <div class="flex flex-col max-w-xs gap-1 items-center form-control">
+            <label class="label">
+              <span class="label-text">{{ t('table.textColor') }}</span>
+            </label>
+            <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
+          </div>
+          <div class="flex flex-col max-w-xs gap-1 form-control items-center">
+            <label class="label">
               <span class="label-text">{{ t('table.highlightColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
             </label>
-    <label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
+            <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
-      <div>
-        <div class="label">
-          <span class="label-text">{{ t('table.patternSetting') }}</span>
           </div>
+        </div>
+      </fieldset>
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          图案设置
+        </legend>
+        <div class="items-center gap-24 mb-0 form-control">
+          <div>
+            <label class="label">
+              <span class="label-text">{{ t('table.patternSetting') }}</span>
+            </label>
             <div class="h-auto">
               <PatternSetting
                 :row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
@@ -328,7 +360,6 @@ onMounted(() => {
               />
             </div>
           </div>
-    </label>
           <div class="flex w-full gap-3 m-0">
             <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
               <span>{{ t('button.clearPattern') }}</span>
@@ -339,8 +370,15 @@ onMounted(() => {
               </button>
             </div>
           </div>
+        </div>
+      </fieldset>
 
-    <label class="w-full max-w-xs flex items-center gap-2 form-control">
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          其他设置
+        </legend>
+
+        <div class="flex items-center justify-between w-full max-w-xs mb-3 gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
           </div>
@@ -348,9 +386,8 @@ onMounted(() => {
             type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border-1"
             @change="isShowPrizeListValue = !isShowPrizeListValue"
           >
-    </label>
+        </div>
-
+        <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
-    <label class="w-full max-w-xs flex items-center gap-2 mb-10 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.avatarDisplay') }}</span>
           </div>
@@ -358,7 +395,9 @@ onMounted(() => {
             type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border-1"
             @change="isShowAvatarValue = !isShowAvatarValue"
           >
-    </label>
+        </div>
+      </fieldset>
+    </div>
   </div>
 </template>