feat: 优化移动端布局

Author: hanxi

frontend/src/components/print/PrintOptions.vue

@@ -8,15 +8,15 @@
     </template>
     <div class="space-y-4">
       <!-- 第一行：颜色 + 方向（紧凑按钮组） -->
-      <div class="grid grid-cols-2 gap-3">
-        <UFormField label="颜色模式">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <UFormField label="颜色模式" :hint="isColor ? undefined : '文档中的彩色内容将以灰阶模式打印输出'">
           <div class="flex rounded-lg border border-muted overflow-hidden">
             <label v-for="item in colorItems" :key="String(item.value)"
               class="flex-1 flex items-center justify-center gap-1.5 py-2 px-2 cursor-pointer text-sm transition"
               :class="isColor === item.value ? 'bg-primary text-white font-medium' : 'hover:bg-elevated'">
               <input type="radio" :value="item.value" :checked="isColor === item.value" class="sr-only" @change="$emit('update:isColor', item.value)" />
               <UIcon :name="item.icon" class="w-3.5 h-3.5 shrink-0" />
-              <span class="truncate text-xs">{{ item.label }}</span>
+              <span class="text-xs whitespace-nowrap">{{ item.label }}</span>
             </label>
           </div>
         </UFormField>
@@ -28,14 +28,14 @@
               :class="orientation === item.value ? 'bg-primary text-white font-medium' : 'hover:bg-elevated'">
               <input type="radio" :value="item.value" :checked="orientation === item.value" class="sr-only" @change="$emit('update:orientation', item.value)" />
               <UIcon :name="item.icon" class="w-3.5 h-3.5 shrink-0" />
-              <span class="truncate text-xs">{{ item.label }}</span>
+              <span class="text-xs whitespace-nowrap">{{ item.label }}</span>
             </label>
           </div>
         </UFormField>
       </div>
 
       <!-- 第二行：双面 + 份数 -->
-      <div class="grid grid-cols-2 gap-3">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
         <UFormField label="双面打印">
           <USelect :model-value="duplex" :items="duplexItems" value-key="value" label-key="label" class="w-full" @update:model-value="$emit('update:duplex', $event)" />
         </UFormField>
@@ -53,7 +53,7 @@
       </div>
 
       <!-- 第三行：纸张大小 + 纸张类型 -->
-      <div class="grid grid-cols-2 gap-3">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
         <UFormField label="纸张大小">
           <USelect :model-value="paperSize" :items="paperSizeItems" value-key="value" label-key="label" class="w-full" @update:model-value="$emit('update:paperSize', $event)" />
         </UFormField>
@@ -63,7 +63,7 @@
       </div>
 
       <!-- 第四行：打印缩放 + 页面范围 -->
-      <div class="grid grid-cols-2 gap-3">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
         <UFormField label="缩放">
           <USelect :model-value="printScaling" :items="scalingItems" value-key="value" label-key="label" class="w-full" @update:model-value="$emit('update:printScaling', $event)" />
         </UFormField>
@@ -168,7 +168,7 @@ const pageRangeError = ref('')
 
 const colorItems = [
   { label: '彩色打印', value: true, icon: 'i-lucide-palette' },
-  { label: '黑白打印', value: false, icon: 'i-lucide-circle' }
+  { label: '黑白打印', value: false, icon: 'i-lucide-contrast' }
 ]
 
 const duplexItems = [