|
65 | 65 | </div> |
66 | 66 | </div> |
67 | 67 |
|
68 | | - <div class="flex gap-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity translate-y-0 md:translate-y-2 group-hover:translate-y-0"> |
| 68 | + <!-- Desktop Buttons --> |
| 69 | + <div class="hidden md:flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity translate-y-2 group-hover:translate-y-0"> |
69 | 70 | <button |
70 | 71 | v-if="ticket.type === 'train'" |
71 | 72 | @click.stop="handleViewPaper" |
|
81 | 82 | <Trash2 class="w-4 h-4" /> |
82 | 83 | </button> |
83 | 84 | </div> |
| 85 | + |
| 86 | + <!-- Mobile Dropdown --> |
| 87 | + <div class="md:hidden" @click.stop> |
| 88 | + <el-dropdown trigger="click" @command="handleCommand"> |
| 89 | + <button class="p-2 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 bg-slate-50 dark:bg-slate-700 rounded-md"> |
| 90 | + <MoreHorizontal class="w-5 h-5" /> |
| 91 | + </button> |
| 92 | + <template #dropdown> |
| 93 | + <el-dropdown-menu> |
| 94 | + <el-dropdown-item v-if="ticket.type === 'train'" command="viewPaper"> |
| 95 | + <div class="flex items-center gap-2"> |
| 96 | + <TicketIcon class="w-4 h-4" /> |
| 97 | + <span>查看仿真车票</span> |
| 98 | + </div> |
| 99 | + </el-dropdown-item> |
| 100 | + <el-dropdown-item command="edit"> |
| 101 | + <div class="flex items-center gap-2"> |
| 102 | + <Pencil class="w-4 h-4" /> |
| 103 | + <span>编辑</span> |
| 104 | + </div> |
| 105 | + </el-dropdown-item> |
| 106 | + <el-dropdown-item command="delete"> |
| 107 | + <div class="flex items-center gap-2 text-red-500"> |
| 108 | + <Trash2 class="w-4 h-4" /> |
| 109 | + <span>删除</span> |
| 110 | + </div> |
| 111 | + </el-dropdown-item> |
| 112 | + </el-dropdown-menu> |
| 113 | + </template> |
| 114 | + </el-dropdown> |
| 115 | + </div> |
84 | 116 | </div> |
85 | 117 | </div> |
86 | 118 | <div v-if="ticket.comments" class="bg-slate-50 dark:bg-slate-700/30 px-5 py-2 text-xs text-slate-500 dark:text-slate-400 border-t border-slate-200 dark:border-slate-700"> |
|
91 | 123 |
|
92 | 124 | <script setup> |
93 | 125 | import { computed } from 'vue'; |
94 | | -import { MoveRight, Clock, Route, Pencil, Trash2, Check, Plane, Ticket as TicketIcon } from 'lucide-vue-next'; |
| 126 | +import { MoveRight, Clock, Route, Pencil, Trash2, Check, Plane, Ticket as TicketIcon, MoreHorizontal } from 'lucide-vue-next'; |
95 | 127 |
|
96 | 128 | const props = defineProps({ |
97 | 129 | // 车票数据 |
@@ -150,6 +182,21 @@ const handleDelete = () => { |
150 | 182 | const handleViewPaper = () => { |
151 | 183 | emit('view-paper', props.ticket); |
152 | 184 | }; |
| 185 | +
|
| 186 | +// 处理下拉菜单命令 |
| 187 | +const handleCommand = (command) => { |
| 188 | + switch (command) { |
| 189 | + case 'viewPaper': |
| 190 | + handleViewPaper(); |
| 191 | + break; |
| 192 | + case 'edit': |
| 193 | + handleEdit(); |
| 194 | + break; |
| 195 | + case 'delete': |
| 196 | + handleDelete(); |
| 197 | + break; |
| 198 | + } |
| 199 | +}; |
153 | 200 | </script> |
154 | 201 |
|
155 | 202 | <style scoped> |
|
0 commit comments