fix(ui): 优化图片列表下拉选择器及表单项的样式与布局

src/style.css

@@ -4,6 +4,11 @@
     themes: all;
 }
 
+@utility w-option-xs {
+    max-width: calc(var(--container-xs) - 90px);
+}
+
+
 /* @plugin "@tailwindcss/typography" */
 
 body,

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="grid w-full grid-cols-2 gap-4">
-          <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.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>

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">
+        <label class="flex items-center justify-center max-w-xs px-2 handle form-control">
-          <Grip class="handle cursor-move w-10 h-10" />
+          <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>
@@ -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,11 +225,11 @@ 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">
+            <option v-for="picItem in localImageList" :key="picItem.id" :title="picItem.name" class="w-full max-w-full" :value="picItem">
-              <span class="w-full max-w-[200px] truncate" :title="picItem.name">{{ picItem.name }}</span>
+              <span class="truncate w-option-xs">{{ picItem.name }}</span>
             </option>
           </select>
         </label>