diff --git a/resources/views/business/pages/courier-payables/payable-cloud-warehouse-vehicle-fee.blade.php b/resources/views/business/pages/courier-payables/payable-cloud-warehouse-vehicle-fee.blade.php
index c4ecf1f3..400a3699 100644
--- a/resources/views/business/pages/courier-payables/payable-cloud-warehouse-vehicle-fee.blade.php
+++ b/resources/views/business/pages/courier-payables/payable-cloud-warehouse-vehicle-fee.blade.php
@@ -40,6 +40,9 @@
         .ding-payable-table th,.ding-payable-table td { padding:.55rem .65rem; border-right:1px solid var(--vip-border,#D8D2C7); border-bottom:1px solid var(--vip-border,#D8D2C7); white-space:nowrap; vertical-align:top; }
         .ding-payable-table th { position:sticky; top:0; z-index:1; background:var(--vip-content-accent-soft,#F7F0DE); text-align:left; font-weight:700; }
         .ding-payable-table tr:hover td { background:#fcfaf4; }
+        .ding-payable-table tbody tr.is-clickable { cursor:pointer; }
+        .ding-payable-table tbody tr.is-active td { background:var(--vip-content-accent-soft,#F7F0DE); border-bottom-color:#e4d7ba; }
+        .ding-payable-table tbody tr.is-active td:first-child { box-shadow:inset 3px 0 0 var(--vip-content-accent-dark,#856632); }
         .ding-payable-table .num { text-align:right; font-variant-numeric:tabular-nums; }
         .ding-payable-detail { max-width:26rem; white-space:normal; }
         .ding-payable-attachment { color:var(--vip-content-accent-dark,#856632); }
@@ -104,7 +107,7 @@
                     @php($fields = $row['fields'] ?? [])
                     @php($approvalNumber = trim((string) ($workflow['businessId'] ?? '')) ?: (string) ($row['process_instance_id'] ?? '-'))
                     @php($originator = trim((string) ($workflow['originatorUserName'] ?? '')) ?: trim((string) ($workflow['originatorUserId'] ?? '-')))
-                    <tr>
+                    <tr class="is-clickable" data-ding-payable-row>
                         <td>{{ $approvalNumber }}</td>
                         <td>{{ $workflow['title'] ?? '-' }}</td>
                         <td>{{ $statusLabel($workflow) }}</td>
@@ -149,3 +152,31 @@
             </span>
         </div>
 </div>
+
+<script>
+(() => {
+    const table = document.querySelector('.ding-payable-table');
+
+    if (!table) {
+        return;
+    }
+
+    const activate = (row) => {
+        table.querySelectorAll('tbody tr.is-active').forEach((item) => item.classList.remove('is-active'));
+        row.classList.add('is-active');
+    };
+
+    document.addEventListener('click', (event) => {
+        if (!(event.target instanceof Element) || event.target.closest('a, button, input, label, select')) {
+            return;
+        }
+
+        const row = event.target.closest('tr[data-ding-payable-row]');
+
+        if (row && table.contains(row)) {
+            event.preventDefault();
+            activate(row);
+        }
+    });
+})();
+</script>
diff --git a/tests/Feature/Business/DingPayableWorkflowPageTest.php b/tests/Feature/Business/DingPayableWorkflowPageTest.php
index 87c950d4..4e14b268 100644
--- a/tests/Feature/Business/DingPayableWorkflowPageTest.php
+++ b/tests/Feature/Business/DingPayableWorkflowPageTest.php
@@ -66,6 +66,9 @@ class DingPayableWorkflowPageTest extends FeatureTestCase
             ->assertSee('process_instance_id=PROC-TEST-001', false)
             ->assertSee('file_id=123456', false)
             ->assertSee('ding-payable-attachment"', false)
+            ->assertSee('data-ding-payable-row', false)
+            ->assertSee('is-clickable', false)
+            ->assertSee('is-active', false)
             ->assertSee('镜像状态：succeeded');
     }