将最近工单改为单行列表

frontend/src/admin/pages/TicketManage.jsx

@@ -197,7 +197,11 @@ export default function TicketManage() {
             <Divider />
             {loading ? <Box role="status" aria-label="正在加载工单" sx={{ p: 4, textAlign: 'center' }}><CircularProgress size={28} /></Box> : list.length === 0 ? <Box sx={{ p: 4, textAlign: 'center' }}><Typography color="text.secondary">暂无匹配工单</Typography></Box> : (
               <Stack component="ul" className="ticket-list-scroll" aria-label="工单列表" sx={{ listStyle: 'none', m: 0, p: 0 }}>
-                {list.map((ticket) => <Box component="li" key={ticket.id}><Button fullWidth onClick={() => loadDetail(ticket.id)} aria-pressed={String(selectedId) === String(ticket.id)} sx={{ p: 1.5, textAlign: 'left', textTransform: 'none', justifyContent: 'flex-start', borderRadius: 0, borderBottom: '1px solid', borderColor: 'divider', bgcolor: String(selectedId) === String(ticket.id) ? 'action.selected' : 'transparent' }}><Box sx={{ width: '100%', minWidth: 0 }}><Stack className="ticket-list-meta" direction="row" spacing={1} alignItems="center" useFlexGap sx={{ mb: 0.5 }}><Typography className="ticket-list-number" variant="caption" color="text.secondary">{ticket.ticket_no || `#${ticket.id}`}</Typography><StatusChip value={ticket.status} /><PriorityChip value={ticket.priority} /></Stack><Typography variant="body2" fontWeight={600} noWrap>{ticket.subject || ticket.title || '无标题工单'}</Typography><Typography variant="caption" color="text.secondary" noWrap>{ticket.requester_name || ticket.requester_username || '未知用户'} · {fmtTime(ticket.updated_at || ticket.created_at)}</Typography></Box></Button></Box>)}
+                {list.map((ticket) => {
+                  const subject = ticket.subject || ticket.title || '无标题工单';
+                  const requester = `${ticket.requester_name || ticket.requester_username || '未知用户'} · ${fmtTime(ticket.updated_at || ticket.created_at)}`;
+                  return <Box component="li" key={ticket.id}><Button fullWidth onClick={() => loadDetail(ticket.id)} aria-pressed={String(selectedId) === String(ticket.id)} sx={{ p: 1.25, textAlign: 'left', textTransform: 'none', justifyContent: 'flex-start', borderRadius: 0, borderBottom: '1px solid', borderColor: 'divider', bgcolor: String(selectedId) === String(ticket.id) ? 'action.selected' : 'transparent' }}><Box className="ticket-list-row" title={`${ticket.ticket_no || `#${ticket.id}`} · ${subject} · ${requester}`}><Typography className="ticket-list-number" variant="caption" color="text.secondary">{ticket.ticket_no || `#${ticket.id}`}</Typography><Typography className="ticket-list-subject" variant="body2" fontWeight={600}>{subject}</Typography><Typography className="ticket-list-requester" variant="caption" color="text.secondary">{requester}</Typography><StatusChip value={ticket.status} /><PriorityChip value={ticket.priority} /></Box></Button></Box>;
+                })}
               </Stack>
             )}
             <Stack direction="row" alignItems="center" justifyContent="center" spacing={1} sx={{ p: 1.25 }}><IconButton aria-label="上一页" size="small" disabled={page <= 1 || loading} onClick={() => setPage(page - 1)}><NavigateBeforeIcon /></IconButton><Typography variant="caption">第 {page} / {totalPages} 页</Typography><IconButton aria-label="下一页" size="small" disabled={page >= totalPages || loading} onClick={() => setPage(page + 1)}><NavigateNextIcon /></IconButton></Stack>

frontend/src/admin/theme.css

@@ -91,7 +91,7 @@ body {
   flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: auto;
   align-items: stretch;
 }
 
@@ -110,7 +110,39 @@ body {
 .ticket-list-scroll > li > .MuiButton-root {
   display: flex;
   box-sizing: border-box;
-  overflow: visible;
+  overflow: hidden;
+  min-height: 48px;
+}
+
+.ticket-list-row {
+  display: grid;
+  grid-template-columns: max-content minmax(120px, 1.4fr) minmax(120px, 1fr) max-content max-content;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+@media (min-width: 700px) {
+  .ticket-list-row {
+    min-width: 500px;
+  }
+}
+
+.ticket-list-row > .MuiTypography-root,
+.ticket-list-row > .MuiChip-root {
+  min-width: 0;
+}
+
+.ticket-list-row > .MuiTypography-root {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ticket-list-row > .MuiChip-root {
+  flex: 0 0 auto;
 }
 
 .ticket-list-scroll > li > .MuiButton-root > .MuiBox-root {
@@ -122,23 +154,11 @@ body {
   overflow-wrap: anywhere;
 }
 
-.ticket-list-scroll .MuiTypography-noWrap {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  white-space: normal;
-  overflow: hidden;
-}
-
 .ticket-list-scroll .MuiChip-root {
   flex: 0 0 auto;
   max-width: 100%;
 }
 
-.ticket-list-meta {
-  flex-wrap: wrap;
-}
-
 .ticket-list-number {
   min-width: 0;
   overflow-wrap: anywhere;
@@ -231,6 +251,15 @@ body {
     max-height: 350px;
   }
 
+  .ticket-list-row {
+    grid-template-columns: max-content minmax(140px, 1.2fr) minmax(120px, 1fr) max-content max-content;
+    min-width: 560px;
+  }
+
+  .ticket-list-scroll {
+    overflow-x: auto;
+  }
+
   .ticket-detail-pane > .MuiPaper-root {
     min-height: 480px;
   }