From 232b777f6cad5e8372ce8719c3bfe709cf477a54 Mon Sep 17 00:00:00 2001
From: Ethanfly <ethanfly@qq.com>
Date: Mon, 12 Jan 2026 12:46:12 +0800
Subject: [PATCH] Enhance patient index view with responsive design and
 improved styling. Added new CSS for patient table, mobile card layout, and
 optimized elements for better user experience. Updated HTML structure for
 patient information display and action buttons.

---
 resources/views/patients/index.blade.php | 415 ++++++++++++++++++-----
 1 file changed, 323 insertions(+), 92 deletions(-)

diff --git a/resources/views/patients/index.blade.php b/resources/views/patients/index.blade.php
index 4e14953..2517b79 100644
--- a/resources/views/patients/index.blade.php
+++ b/resources/views/patients/index.blade.php
@@ -4,7 +4,204 @@
 
 @section('content')
 <style>
-    /* 移动端卡片列表 */
+    /* 防止横向滚动 */
+    .card {
+        overflow-x: hidden;
+    }
+
+    /* ==================== PC端表格优化 ==================== */
+    .patient-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .patient-table thead {
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    }
+
+    .patient-table th {
+        padding: 14px 12px;
+        text-align: left;
+        font-weight: 600;
+        font-size: 13px;
+        color: var(--color-text-secondary);
+        border-bottom: 2px solid var(--color-border);
+        white-space: nowrap;
+    }
+
+    .patient-table td {
+        padding: 16px 12px;
+        border-bottom: 1px solid var(--color-border-light);
+        vertical-align: middle;
+    }
+
+    .patient-table tbody tr:hover {
+        background: var(--color-bg-hover);
+    }
+
+    .patient-table tbody tr:last-child td {
+        border-bottom: none;
+    }
+
+    /* 患者信息单元格 */
+    .patient-cell {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 140px;
+    }
+
+    .patient-cell-avatar {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 14px;
+        color: white;
+        flex-shrink: 0;
+    }
+
+    .patient-cell-avatar.male {
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    }
+
+    .patient-cell-avatar.female {
+        background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
+    }
+
+    .patient-cell-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .patient-cell-name {
+        font-weight: 600;
+        color: var(--color-text);
+        font-size: 14px;
+    }
+
+    .patient-cell-meta {
+        font-size: 12px;
+        color: var(--color-text-muted);
+    }
+
+    /* 诊断标签 */
+    .diagnosis-cell {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 10px;
+        background: var(--color-primary-light);
+        color: var(--color-primary);
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+    }
+
+    /* 进度条 */
+    .progress-cell {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 100px;
+    }
+
+    .progress-bar-mini {
+        flex: 1;
+        height: 6px;
+        background: var(--color-border);
+        border-radius: 3px;
+        overflow: hidden;
+        min-width: 50px;
+    }
+
+    .progress-bar-mini-fill {
+        height: 100%;
+        background: linear-gradient(90deg, var(--color-success), #34d399);
+        border-radius: 3px;
+    }
+
+    .progress-text {
+        font-size: 13px;
+        color: var(--color-text-secondary);
+        font-weight: 500;
+        white-space: nowrap;
+    }
+
+    /* 电话链接 */
+    .phone-link {
+        color: var(--color-primary);
+        text-decoration: none;
+        font-weight: 500;
+        white-space: nowrap;
+    }
+
+    .phone-link:hover {
+        text-decoration: underline;
+    }
+
+    /* 备注 */
+    .remark-cell {
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--color-warning);
+        font-weight: 500;
+    }
+
+    /* 操作按钮组 */
+    .table-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+    }
+
+    .table-actions .btn-icon {
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        border: 1px solid var(--color-border);
+        background: var(--color-bg-card);
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .table-actions .btn-icon:hover {
+        background: var(--color-bg-hover);
+    }
+
+    .table-actions .btn-icon.success {
+        color: var(--color-success);
+        border-color: var(--color-success);
+    }
+
+    .table-actions .btn-icon.success:hover {
+        background: var(--color-success-light);
+    }
+
+    .table-actions .btn-icon.danger {
+        color: var(--color-danger);
+        border-color: var(--color-danger);
+    }
+
+    .table-actions .btn-icon.danger:hover {
+        background: var(--color-danger-light);
+    }
+
+    .table-actions .btn-icon svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    /* ==================== 移动端卡片优化 ==================== */
     .mobile-patient-list {
         display: none;
     }
@@ -12,33 +209,35 @@
     .mobile-patient-card {
         background: var(--color-bg-card);
         border: 1px solid var(--color-border);
-        border-radius: 12px;
+        border-radius: 16px;
         padding: 16px;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+        overflow: hidden;
     }
 
     .mobile-patient-header {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
     }
 
     .mobile-patient-info {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 14px;
     }
 
     .mobile-patient-avatar {
-        width: 44px;
-        height: 44px;
+        width: 50px;
+        height: 50px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 600;
-        font-size: 16px;
+        font-size: 18px;
         color: white;
         flex-shrink: 0;
     }
@@ -53,13 +252,13 @@
 
     .mobile-patient-name {
         font-weight: 600;
-        font-size: 16px;
+        font-size: 17px;
         color: var(--color-text);
-        margin-bottom: 2px;
+        margin-bottom: 4px;
     }
 
     .mobile-patient-meta {
-        font-size: 13px;
+        font-size: 14px;
         color: var(--color-text-secondary);
     }
 
@@ -67,105 +266,132 @@
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
-        margin-bottom: 12px;
-        padding: 12px;
-        background: var(--color-bg);
-        border-radius: 8px;
+        margin-bottom: 16px;
+        padding: 12px 14px;
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        border-radius: 12px;
+        overflow: hidden;
     }
 
     .mobile-info-item {
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: 4px;
     }
 
     .mobile-info-label {
-        font-size: 11px;
+        font-size: 12px;
         color: var(--color-text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
     }
 
     .mobile-info-value {
-        font-size: 13px;
+        font-size: 14px;
         color: var(--color-text);
         font-weight: 500;
+        word-break: break-all;
+        overflow-wrap: break-word;
     }
 
     .mobile-info-value a {
         color: var(--color-primary);
         text-decoration: none;
+        word-break: break-all;
     }
 
     .mobile-patient-progress {
-        margin-bottom: 12px;
+        margin-bottom: 16px;
     }
 
     .mobile-progress-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
     }
 
     .mobile-progress-label {
-        font-size: 12px;
+        font-size: 13px;
         color: var(--color-text-secondary);
     }
 
     .mobile-progress-value {
-        font-size: 12px;
+        font-size: 13px;
         font-weight: 600;
         color: var(--color-text);
     }
 
     .mobile-progress-bar {
-        height: 6px;
+        height: 8px;
         background: var(--color-border);
-        border-radius: 3px;
+        border-radius: 4px;
         overflow: hidden;
     }
 
     .mobile-progress-fill {
         height: 100%;
         background: linear-gradient(90deg, var(--color-success), #34d399);
-        border-radius: 3px;
+        border-radius: 4px;
         transition: width 0.3s ease;
     }
 
     .mobile-patient-remark {
-        padding: 10px 12px;
-        background: var(--color-warning-light);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 14px;
+        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
         border-left: 3px solid var(--color-warning);
-        border-radius: 6px;
-        margin-bottom: 12px;
-        font-size: 13px;
-        color: var(--color-warning);
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 14px;
+        color: #b45309;
         font-weight: 500;
     }
 
     .mobile-patient-actions {
         display: flex;
-        gap: 10px;
+        gap: 8px;
     }
 
     .mobile-patient-actions .btn {
         flex: 1;
         justify-content: center;
         padding: 10px 12px;
+        font-size: 13px;
+        border-radius: 10px;
+        min-width: 0;
+        white-space: nowrap;
     }
 
     .mobile-patient-actions form {
         flex: 1;
         display: flex;
+        min-width: 0;
     }
 
     .mobile-patient-actions form .btn {
         width: 100%;
     }
 
+    .mobile-action-delete {
+        flex: 0 0 44px !important;
+        width: 44px !important;
+        height: 44px;
+        padding: 0 !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--color-danger) !important;
+        color: var(--color-danger) !important;
+        background: transparent !important;
+    }
+
+    .mobile-action-delete form {
+        flex: 0 0 auto !important;
+    }
+
     /* 移动端显示控制 */
-    @media (max-width: 768px) {
+    @media (max-width: 900px) {
         .table-container {
             display: none !important;
         }
@@ -233,96 +459,101 @@
             </div>
         </div>
     @else
-        <!-- 桌面端表格 -->
+        <!-- PC端表格 -->
         <div class="table-container">
-            <table>
+            <table class="patient-table">
                 <thead>
                     <tr>
-                        <th>姓名</th>
-                        <th>性别</th>
-                        <th>年龄</th>
-                        <th>出院诊断</th>
+                        <th>患者信息</th>
+                        <th>诊断</th>
                         <th>转诊日期</th>
                         <th>随访进度</th>
                         <th>状态</th>
                         <th>联系方式</th>
                         <th>备注</th>
-                        <th>操作</th>
+                        <th style="text-align: right;">操作</th>
                     </tr>
                 </thead>
                 <tbody>
                     @foreach($patients as $patient)
+                        @php
+                            $total = count($patient->getFollowUpSchedule());
+                            $completed = $patient->follow_up_count;
+                            $status = $patient->getFollowUpStatus();
+                        @endphp
                         <tr>
                             <td>
-                                <strong>{{ $patient->name }}</strong>
-                            </td>
-                            <td>{{ $patient->gender }}</td>
-                            <td>{{ $patient->age }}岁</td>
-                            <td>{{ $patient->getDiagnosisType() }}</td>
-                            <td>{{ $patient->discharge_date->format('Y-m-d') }}</td>
-                            <td>
-                                @php
-                                    $total = count($patient->getFollowUpSchedule());
-                                    $completed = $patient->follow_up_count;
-                                @endphp
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <div style="width: 60px; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden;">
-                                        <div style="width: {{ ($completed / $total) * 100 }}%; height: 100%; background: var(--color-success); border-radius: 3px;"></div>
+                                <div class="patient-cell">
+                                    <div class="patient-cell-avatar {{ $patient->gender == '女' ? 'female' : 'male' }}">
+                                        {{ mb_substr($patient->name, 0, 1) }}
+                                    </div>
+                                    <div class="patient-cell-info">
+                                        <span class="patient-cell-name">{{ $patient->name }}</span>
+                                        <span class="patient-cell-meta">{{ $patient->gender }} · {{ $patient->age }}岁</span>
                                     </div>
-                                    <span style="font-size: 13px; color: var(--color-text-secondary);">{{ $completed }}/{{ $total }}</span>
                                 </div>
                             </td>
                             <td>
-                                @php
-                                    $status = $patient->getFollowUpStatus();
-                                    $nextDate = $patient->getNextFollowUpDate();
-                                @endphp
+                                <span class="diagnosis-cell">{{ $patient->getDiagnosisType() }}</span>
+                            </td>
+                            <td>{{ $patient->discharge_date->format('Y-m-d') }}</td>
+                            <td>
+                                <div class="progress-cell">
+                                    <div class="progress-bar-mini">
+                                        <div class="progress-bar-mini-fill" style="width: {{ ($completed / $total) * 100 }}%"></div>
+                                    </div>
+                                    <span class="progress-text">{{ $completed }}/{{ $total }}</span>
+                                </div>
+                            </td>
+                            <td>
                                 @if($patient->isCompleted())
                                     <span class="badge badge-success">已完成</span>
                                 @elseif(str_contains($status, '过期'))
                                     <span class="badge badge-danger">{{ $status }}</span>
                                 @elseif(str_contains($status, '今日'))
                                     <span class="badge badge-warning">{{ $status }}</span>
-                                @elseif(str_contains($status, '即将'))
-                                    <span class="badge badge-info">{{ $status }}</span>
                                 @else
                                     <span class="badge badge-info">{{ $status }}</span>
                                 @endif
                             </td>
                             <td>
                                 @if($patient->phone)
-                                    <a href="tel:{{ $patient->phone }}" style="color: var(--color-primary); text-decoration: none;">
-                                        {{ $patient->phone }}
-                                    </a>
+                                    <a href="tel:{{ $patient->phone }}" class="phone-link">{{ $patient->phone }}</a>
                                 @else
                                     <span style="color: var(--color-text-muted);">-</span>
                                 @endif
                             </td>
                             <td>
                                 @if($patient->remark)
-                                    <span style="color: var(--color-warning); font-weight: 500;">{{ $patient->remark }}</span>
+                                    <span class="remark-cell" title="{{ $patient->remark }}">{{ $patient->remark }}</span>
                                 @else
                                     <span style="color: var(--color-text-muted);">-</span>
                                 @endif
                             </td>
                             <td>
-                                <div class="action-buttons">
+                                <div class="table-actions">
+                                    @if($patient->phone)
+                                        <a href="tel:{{ $patient->phone }}" class="btn-icon" title="拨打电话">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+                                            </svg>
+                                        </a>
+                                    @endif
                                     @if(!$patient->isCompleted())
                                         <form action="{{ route('patients.follow-up', $patient) }}" method="POST" style="display: inline;">
                                             @csrf
-                                            <button type="submit" class="btn btn-outline btn-sm" onclick="return confirm('确认标记 {{ $patient->name }} 完成第{{ $patient->getNextFollowUpNumber() }}次随访？')">
-                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                                            <button type="submit" class="btn-icon success" title="标记已随访" onclick="return confirm('确认标记 {{ $patient->name }} 完成第{{ $patient->getNextFollowUpNumber() }}次随访？')">
+                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                     <polyline points="20 6 9 17 4 12"/>
                                                 </svg>
-                                                随访
                                             </button>
                                         </form>
                                     @endif
                                     <form action="{{ route('patients.destroy', $patient) }}" method="POST" style="display: inline;">
                                         @csrf
                                         @method('DELETE')
-                                        <button type="submit" class="btn btn-outline btn-sm" style="color: var(--color-danger);" onclick="return confirm('确认删除患者 {{ $patient->name }}？此操作不可恢复。')">
-                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                                        <button type="submit" class="btn-icon danger" title="删除" onclick="return confirm('确认删除患者 {{ $patient->name }}？')">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                 <polyline points="3 6 5 6 21 6"/>
                                                 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                             </svg>
@@ -352,7 +583,7 @@
                             </div>
                             <div>
                                 <div class="mobile-patient-name">{{ $patient->name }}</div>
-                                <div class="mobile-patient-meta">{{ $patient->gender }} · {{ $patient->age }}岁</div>
+                                <div class="mobile-patient-meta">{{ $patient->gender }} · {{ $patient->age }}岁 · {{ $patient->getDiagnosisType() }}</div>
                             </div>
                         </div>
                         @if($patient->isCompleted())
@@ -367,10 +598,6 @@
                     </div>
 
                     <div class="mobile-patient-body">
-                        <div class="mobile-info-item">
-                            <span class="mobile-info-label">诊断</span>
-                            <span class="mobile-info-value">{{ $patient->getDiagnosisType() }}</span>
-                        </div>
                         <div class="mobile-info-item">
                             <span class="mobile-info-label">转诊日期</span>
                             <span class="mobile-info-value">{{ $patient->discharge_date->format('Y-m-d') }}</span>
@@ -385,7 +612,7 @@
                                 @endif
                             </span>
                         </div>
-                        <div class="mobile-info-item">
+                        <div class="mobile-info-item" style="grid-column: span 2;">
                             <span class="mobile-info-label">地址</span>
                             <span class="mobile-info-value">{{ $patient->address ?: '-' }}</span>
                         </div>
@@ -393,14 +620,15 @@
 
                     @if($patient->remark)
                         <div class="mobile-patient-remark">
-                            📝 {{ $patient->remark }}
+                            <span>📝</span>
+                            <span>{{ $patient->remark }}</span>
                         </div>
                     @endif
 
                     <div class="mobile-patient-progress">
                         <div class="mobile-progress-header">
                             <span class="mobile-progress-label">随访进度</span>
-                            <span class="mobile-progress-value">{{ $completed }}/{{ $total }}</span>
+                            <span class="mobile-progress-value">{{ $completed }}/{{ $total }} 次</span>
                         </div>
                         <div class="mobile-progress-bar">
                             <div class="mobile-progress-fill" style="width: {{ ($completed / $total) * 100 }}%"></div>
@@ -409,29 +637,35 @@
 
                     <div class="mobile-patient-actions">
                         @if($patient->phone)
-                            <a href="tel:{{ $patient->phone }}" class="btn btn-outline btn-sm">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                            <a href="tel:{{ $patient->phone }}" class="btn btn-outline">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                     <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                                 </svg>
-                                拨打电话
+                                电话
                             </a>
+                        @else
+                            <div></div>
                         @endif
+                        
                         @if(!$patient->isCompleted())
                             <form action="{{ route('patients.follow-up', $patient) }}" method="POST">
                                 @csrf
-                                <button type="submit" class="btn btn-primary btn-sm" onclick="return confirm('确认标记 {{ $patient->name }} 完成第{{ $patient->getNextFollowUpNumber() }}次随访？')">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                                <button type="submit" class="btn btn-primary" onclick="return confirm('确认标记 {{ $patient->name }} 完成第{{ $patient->getNextFollowUpNumber() }}次随访？')">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                         <polyline points="20 6 9 17 4 12"/>
                                     </svg>
                                     已随访
                                 </button>
                             </form>
+                        @else
+                            <div></div>
                         @endif
+                        
                         <form action="{{ route('patients.destroy', $patient) }}" method="POST">
                             @csrf
                             @method('DELETE')
-                            <button type="submit" class="btn btn-outline btn-sm" style="color: var(--color-danger); border-color: var(--color-danger);" onclick="return confirm('确认删除患者 {{ $patient->name }}？')">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                            <button type="submit" class="btn btn-outline mobile-action-delete" onclick="return confirm('确认删除患者 {{ $patient->name }}？')">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                     <polyline points="3 6 5 6 21 6"/>
                                     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                 </svg>
@@ -449,7 +683,6 @@
                     显示 {{ $patients->firstItem() }} - {{ $patients->lastItem() }} 条，共 {{ $patients->total() }} 条
                 </div>
                 <div class="pagination-links">
-                    {{-- 上一页 --}}
                     @if($patients->onFirstPage())
                         <span class="pagination-btn disabled">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
@@ -464,7 +697,6 @@
                         </a>
                     @endif
 
-                    {{-- 页码 --}}
                     @foreach($patients->getUrlRange(1, $patients->lastPage()) as $page => $url)
                         @if($page == $patients->currentPage())
                             <span class="pagination-btn active">{{ $page }}</span>
@@ -473,7 +705,6 @@
                         @endif
                     @endforeach
 
-                    {{-- 下一页 --}}
                     @if($patients->hasMorePages())
                         <a href="{{ $patients->nextPageUrl() }}" class="pagination-btn">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">