优化订单交接和结账界面

frontend/src/features/orders/components/OrderHandoffTimeline.vue

@@ -34,65 +34,100 @@ const props = withDefaults(
       <h2>交接记录</h2>
       <span>商品编号 {{ props.listingCode }}</span>
     </div>
-    <el-empty v-if="props.records.length === 0" description="暂无交接记录" />
-    <el-timeline v-else>
-      <el-timeline-item
-        v-for="record in props.records"
-        :key="record.id"
-        :timestamp="formatDateTime(record.created_at)"
-        placement="top"
-      >
-        <div class="timeline-content">
-          <div class="timeline-title">{{ formatHandoffRecordType(record.type) }}</div>
-          <div class="timeline-body">{{ record.content }}</div>
+    <div class="timeline-card">
+      <div v-if="props.records.length === 0" class="empty-log">暂无交接记录</div>
+      <div v-else class="compact-timeline">
+        <div v-for="record in props.records" :key="record.id" class="timeline-row">
+          <span class="timeline-dot"></span>
+          <span class="timeline-time">{{ formatDateTime(record.created_at) }}</span>
+          <strong class="timeline-title">{{ formatHandoffRecordType(record.type) }}</strong>
+          <p class="timeline-body">{{ record.content }}</p>
         </div>
-      </el-timeline-item>
-    </el-timeline>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .timeline-section {
-  margin-bottom: 32px;
+  margin-bottom: 20px;
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 .section-header h2 {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: #1f2937;
   margin: 0;
 }
 
-.timeline-section :deep(.el-timeline) {
-  padding: 24px;
+.timeline-card {
+  padding: 12px;
   background: #ffffff;
   border: 1px solid #e5e7eb;
-  border-radius: 12px;
+  border-radius: 8px;
 }
 
-.timeline-content {
+.empty-log {
+  padding: 14px;
+  color: #8a94a6;
+  font-size: 13px;
+  text-align: center;
+}
+
+.compact-timeline {
   display: grid;
   gap: 8px;
 }
 
+.timeline-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 150px 92px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 10px 12px 10px 22px;
+  border: 1px solid #eef1f5;
+  border-radius: 6px;
+  background: #fbfcfe;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: 10px;
+  top: 15px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #ff6a00;
+}
+
+.timeline-time {
+  color: #8a94a6;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .timeline-title {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 600;
   color: #1f2937;
+  line-height: 1.5;
 }
 
 .timeline-body {
-  font-size: 14px;
+  margin: 0;
+  font-size: 13px;
   color: #64748b;
-  line-height: 1.6;
+  line-height: 1.55;
   white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .card-section {