Просмотр исходного кода

feat(schedule): style schedule list icons and modal buttons

- Rename getStatusBgClass/getStatusIconClass to getScheduleIconBgClass/
  getScheduleIconClass and base them on shiftType (blue for month_plan,
  red for emergency).
- Wrap uni-list-item in a <view> with hover-class="scale-down" for tap feedback.
- Change modal buttons from rounded-lg to rounded-xl and add hover-class
  feedback via scoped CSS.
- Unify modal field spacing from mb-3 to mb-4 and increase textarea
  min-height to 80px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xuyunhui 1 неделя назад
Родитель
Сommit
ebe764c431
1 измененных файлов с 33 добавлено и 36 удалено
  1. 33 36
      src/components/dispatch/ScheduleView.vue

+ 33 - 36
src/components/dispatch/ScheduleView.vue

@@ -91,24 +91,31 @@
         <EmptyState message="该日无排班" />
       </view>
 
-      <uni-list v-else border>
-        <uni-list-item
+      <view v-else>
+        <view
           v-for="schedule in daySchedules"
           :key="schedule.scheduleId"
-          :title="schedule.teamName || '未命名班组'"
-          :note="(schedule.staffIds || '未分配人员') + ' | ' + (schedule.vehicleIds || '未分配车辆')"
-          :right-text="getStatusText(schedule.status)"
-          show-arrow
-          clickable
+          class="bg-white rounded-xl shadow-sm mb-3"
+          hover-class="scale-down"
+          :hover-start-time="0"
+          :hover-stay-time="150"
           @click="viewSchedule(schedule)"
         >
-          <template #header>
-            <view class="w-10 h-10 rounded-xl flex items-center justify-center mr-3" :class="getStatusBgClass(schedule.status)">
-              <text class="uni-icons text-lg" :class="getStatusIconClass(schedule.status)"></text>
-            </view>
-          </template>
-        </uni-list-item>
-      </uni-list>
+          <uni-list-item
+            :title="schedule.teamName || '未命名班组'"
+            :note="(schedule.staffIds || '未分配人员') + ' | ' + (schedule.vehicleIds || '未分配车辆')"
+            :right-text="getStatusText(schedule.status)"
+            show-arrow
+            clickable
+          >
+            <template #header>
+              <view class="w-10 h-10 rounded-xl flex items-center justify-center mr-3" :class="getScheduleIconBgClass(schedule.shiftType)">
+                <text class="uni-icons text-lg" :class="getScheduleIconClass(schedule.shiftType)"></text>
+              </view>
+            </template>
+          </uni-list-item>
+        </view>
+      </view>
     </view>
     <!-- 新增排班底部弹窗 -->
     <view v-if="showModal" class="fixed inset-0 z-50 flex flex-col justify-end" style="padding-bottom: var(--window-bottom, 0);">
@@ -119,7 +126,7 @@
           <text class="uni-icons uniui-close text-gray-400 p-2" @click="closeModal"></text>
         </view>
 
-        <view class="mb-3">
+        <view class="mb-4">
           <text class="text-sm text-gray-600 block mb-1">选择班组</text>
           <picker mode="selector" :range="teamOptions" range-key="label" :value="teamIndex" @change="(e: any) => { const idx = e.detail.value; form.teamId = teamOptions[idx].value; onTeamChange(form.teamId) }">
             <view class="border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800">
@@ -128,7 +135,7 @@
           </picker>
         </view>
 
-        <view class="mb-3">
+        <view class="mb-4">
           <text class="text-sm text-gray-600 block mb-1">工作日期</text>
           <picker mode="date" :value="form.workDate" @change="(e: any) => form.workDate = e.detail.value">
             <view class="border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800">
@@ -137,7 +144,7 @@
           </picker>
         </view>
 
-        <view class="mb-3">
+        <view class="mb-4">
           <text class="text-sm text-gray-600 block mb-1">排班类型</text>
           <view class="flex rounded-lg border border-gray-200 overflow-hidden">
             <view
@@ -153,7 +160,7 @@
           </view>
         </view>
 
-        <view class="mb-3">
+        <view class="mb-4">
           <text class="text-sm text-gray-600 block mb-1">选择车辆</text>
           <view class="flex flex-wrap gap-2">
             <view
@@ -168,19 +175,19 @@
           </view>
         </view>
 
-        <view class="mb-3">
+        <view class="mb-4">
           <text class="text-sm text-gray-600 block mb-1">备注(可选)</text>
           <textarea
             v-model="form.remark"
             class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
-            style="min-height: 40px;"
+            style="min-height: 80px;"
             placeholder="请输入备注信息..."
           />
         </view>
 
         <view class="flex gap-3 mt-4">
-          <button class="flex-1 py-2 bg-white text-gray-600 rounded-lg border border-gray-200 text-sm" @click="closeModal">取消</button>
-          <button class="flex-1 py-2 bg-primary text-white rounded-lg text-sm" @click="submitSchedule">{{ isDetail ? '保存' : '确认' }}</button>
+          <button class="flex-1 py-3 bg-white text-gray-600 rounded-xl border border-gray-200 text-sm transition-colors" hover-class="bg-gray-50" :hover-start-time="0" :hover-stay-time="150" @click="closeModal">取消</button>
+          <button class="flex-1 py-3 bg-primary text-white rounded-xl text-sm transition-colors" hover-class="bg-blue-600" :hover-start-time="0" :hover-stay-time="150" @click="submitSchedule">{{ isDetail ? '保存' : '确认' }}</button>
         </view>
       </view>
     </view>
@@ -337,22 +344,12 @@ function getStatusText(status: string) {
   return map[status] || status
 }
 
-function getStatusBgClass(status: string) {
-  const map: Record<string, string> = {
-    scheduled: 'bg-blue-50',
-    completed: 'bg-green-50',
-    cancelled: 'bg-red-50',
-  }
-  return map[status] || 'bg-gray-50'
+function getScheduleIconBgClass(shiftType: string) {
+  return shiftType === 'emergency' ? 'bg-red-50' : 'bg-blue-50'
 }
 
-function getStatusIconClass(status: string) {
-  const map: Record<string, string> = {
-    scheduled: 'uniui-calendar-filled text-blue-500',
-    completed: 'uniui-checkmarkempty text-green-500',
-    cancelled: 'uniui-close text-red-500',
-  }
-  return map[status] || 'uniui-calendar text-gray-400'
+function getScheduleIconClass(shiftType: string) {
+  return shiftType === 'emergency' ? 'uniui-calendar-filled text-red-500' : 'uniui-calendar-filled text-blue-500'
 }
 
 function toggleVehicle(vehicleId: number) {