From af34ac8c00cc9d1b35e751c7875f40ac99e10552 Mon Sep 17 00:00:00 2001
From: log1997 <2694233102@qq.com>
Date: Mon, 8 Dec 2025 15:37:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E5=8F=8A=E8=A1=A8=E5=8D=95=E9=A1=B9=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8E=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style.css                                |  5 +++++
 src/views/Config/Global/FaceConfig/index.vue | 20 ++++++++++--------
 src/views/Config/Prize/PrizeConfig.vue       | 22 ++++++++++----------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/style.css b/src/style.css
index 7075fde..fbd9ee1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,6 +4,11 @@
     themes: all;
 }
 
+@utility w-option-xs {
+    max-width: calc(var(--container-xs) - 90px);
+}
+
+
 /* @plugin "@tailwindcss/typography" */
 
 body,
diff --git a/src/views/Config/Global/FaceConfig/index.vue b/src/views/Config/Global/FaceConfig/index.vue
index 2376301..3692cb2 100644
--- a/src/views/Config/Global/FaceConfig/index.vue
+++ b/src/views/Config/Global/FaceConfig/index.vue
@@ -301,40 +301,42 @@ onMounted(() => {
           </label>
           <select
             v-model="backgroundImageValue" data-choose-theme
-            class="w-full max-w-xs border-solid select border-1"
+            class="box-border w-full max-w-xs truncate border-solid select border-1"
           >
-            <option disabled selected>
+            <option disabled selected class="w-full truncate">
               {{ t('table.backgroundImage') }}
             </option>
             <option
               v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
               :value="item"
+              :title="item.name"
+              class="box-border w-full truncate"
             >
-              {{ item.name }}
+              <span class="truncate w-option-xs">{{ item.name }}</span>
             </option>
           </select>
           <span class="label">请先前往图片管理上传图片</span>
         </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">
+        <div class="grid w-full grid-cols-2 gap-4">
+          <div class="flex flex-col items-center max-w-xs gap-1 form-control">
             <label class="label">
               <span class="label-text">{{ t('table.cardColor') }}</span>
             </label>
             <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
           </div>
-          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+          <div class="flex flex-col items-center max-w-xs 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">
+          <div class="flex flex-col items-center max-w-xs gap-1 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">
+          <div class="flex flex-col items-center max-w-xs gap-1 form-control">
             <label class="label">
               <span class="label-text">{{ t('table.highlightColor') }}</span>
             </label>
@@ -377,7 +379,7 @@ onMounted(() => {
           其他设置
         </legend>
 
-        <div class="flex items-center justify-between w-full max-w-xs mb-3 gap-2 form-control">
+        <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
           </div>
diff --git a/src/views/Config/Prize/PrizeConfig.vue b/src/views/Config/Prize/PrizeConfig.vue
index fde2b20..6670063 100644
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -176,11 +176,11 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
       class="p-0 m-0"
     >
       <div
-        v-for="item in prizeList" :key="item.id" class="flex gap-10 items-center justify-center py-5"
+        v-for="item in prizeList" :key="item.id" class="flex items-center justify-center gap-10 py-5"
         :class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
       >
-        <label class="handle max-w-xs form-control flex items-center justify-center px-2">
-          <Grip class="handle cursor-move w-10 h-10" />
+        <label class="flex items-center justify-center max-w-xs px-2 handle form-control">
+          <Grip class="w-10 h-10 cursor-move handle" />
         </label>
         <label class="w-1/2 max-w-xs form-control">
           <div class="label">
@@ -191,7 +191,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             class="w-full max-w-xs input-sm input input-bordered"
           >
         </label>
-        <label class="w-1/2 max-w-xs flex items-center gap-2 form-control">
+        <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.fullParticipation') }}</span>
           </div>
@@ -200,7 +200,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             @change="item.isAll = !item.isAll"
           >
         </label>
-        <label class="w-1/2 max-w-xs  form-control">
+        <label class="w-1/2 max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.numberParticipants') }}</span>
           </div>
@@ -212,7 +212,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
           </div>
         </label>
-        <label class="w-1/2 max-w-xs flex items-center gap-2 form-control">
+        <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.isDone') }}</span>
           </div>
@@ -225,15 +225,15 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
           <div class="label">
             <span class="label-text">{{ t('table.image') }}</span>
           </div>
-          <select v-model="item.picture" class="select select-warning select-sm truncate">
+          <select v-model="item.picture" class="truncate select select-warning select-sm">
             <option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }">❌</option>
             <option disabled selected>{{ t('table.selectPicture') }}</option>
-            <option v-for="picItem in localImageList" :key="picItem.id" class="w-full max-w-full" :value="picItem">
-              <span class="w-full max-w-[200px] truncate" :title="picItem.name">{{ picItem.name }}</span>
+            <option v-for="picItem in localImageList" :key="picItem.id" :title="picItem.name" class="w-full max-w-full" :value="picItem">
+              <span class="truncate w-option-xs">{{ picItem.name }}</span>
             </option>
           </select>
         </label>
-        <label v-if="item.separateCount" class="w-full max-w-xs  form-control">
+        <label v-if="item.separateCount" class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.onceNumber') }}</span>
           </div>
@@ -261,7 +261,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
           </div>
         </label>
-        <label class="w-full max-w-xs  form-control">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.operation') }}</span>
           </div>