From 8a06b2bcc2fd580f085a30c97614c00c1650bbb9 Mon Sep 17 00:00:00 2001
From: shanshi <3316401569@qq.com>
Date: Fri, 6 Nov 2026 10:49:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B4=A2=E5=8A=A1?=
 =?UTF-8?q?=E5=8F=B0=E8=B4=A6=E6=97=A5=E6=9C=9F=E7=AD=9B=E9=80=89=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E9=80=89=E6=8B=A9=20(#923)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/financial-ledger/ledger.blade.php   | 40 +++++++++++++++----
 .../FinanceLedgerHeaderControlsTest.php       | 28 +++++++++++++
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/resources/views/business/pages/financial-ledger/ledger.blade.php b/resources/views/business/pages/financial-ledger/ledger.blade.php
index 78b5c87f..1d2d02da 100644
--- a/resources/views/business/pages/financial-ledger/ledger.blade.php
+++ b/resources/views/business/pages/financial-ledger/ledger.blade.php
@@ -221,6 +221,13 @@
         .ledger-field label { color:var(--vip-content-muted, #595959); font-size:.7rem; font-weight:600; }
         .ledger-field input, .ledger-field select { height:2.15rem; padding:0 .6rem; border:1px solid var(--vip-border, #D8D2C7); border-radius:.45rem; background:#fff; color:var(--vip-content-ink, #171717); font:inherit; }
         .ledger-field input:focus, .ledger-field select:focus { border-color:var(--vip-content-accent-dark, #856632); outline:none; box-shadow:0 0 0 3px rgba(133,102,50,.16); }
+        .ledger-date-control { display:flex; align-items:stretch; min-width:0; }
+        .ledger-date-control input { flex:1 1 auto; width:auto; min-width:0; border-radius:.45rem 0 0 .45rem; cursor:pointer; }
+        .ledger-date-control input:focus { position:relative; z-index:1; }
+        .ledger-date-control__button { display:inline-grid; flex:none; place-items:center; width:2.15rem; height:2.15rem; padding:0; border:1px solid var(--vip-content-accent-dark, #856632); border-left:0; border-radius:0 .45rem .45rem 0; background:var(--vip-content-accent-soft, #F7F0DE); color:var(--vip-content-accent-dark, #856632); cursor:pointer; }
+        .ledger-date-control__button:hover { background:#efe4c8; }
+        .ledger-date-control__button:focus-visible { position:relative; z-index:2; outline:none; box-shadow:0 0 0 3px rgba(133,102,50,.18); }
+        .ledger-date-control__button .material-icons-outlined { font-size:1rem; }
         .ledger-field--account-filter { min-width:16rem; }
         .ledger-filter-combobox { position:relative; display:flex; align-items:center; width:100%; }
         .ledger-filter-combobox input { width:100%; padding-right:2.25rem; }
@@ -1004,8 +1011,8 @@
     <section class="ledger-panel" id="ledger-panel-flows" role="tabpanel" data-ledger-panel="flows" @if ($activeTab !== 'flows') hidden @endif>
         <form class="ledger-toolbar" method="GET" action="{{ $tabUrl('flows') }}">
             <input type="hidden" name="tab" value="flows">
-            <div class="ledger-field"><label for="flows-from">日期起</label><input id="flows-from" type="date" name="flows_from" value="{{ $flowPeriod['from'] ?? '' }}"></div>
-            <div class="ledger-field"><label for="flows-to">日期止</label><input id="flows-to" type="date" name="flows_to" value="{{ $flowPeriod['to'] ?? '' }}"></div>
+            <div class="ledger-field"><label for="flows-from">日期起</label><div class="ledger-date-control" data-ledger-date-control><input id="flows-from" type="date" name="flows_from" value="{{ $flowPeriod['from'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择每日流水开始日期" title="选择开始日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
+            <div class="ledger-field"><label for="flows-to">日期止</label><div class="ledger-date-control" data-ledger-date-control><input id="flows-to" type="date" name="flows_to" value="{{ $flowPeriod['to'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择每日流水结束日期" title="选择结束日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
             <div class="ledger-field"><label for="flows-company">公司</label><input id="flows-company" name="flows_company" value="{{ request('flows_company') }}" placeholder="公司名称"></div>
             <div class="ledger-field"><label for="flows-account">账户简称</label><input id="flows-account" name="flows_account" list="ledger-account-list" value="{{ request('flows_account') }}" placeholder="输入或选择"></div>
             <div class="ledger-actions"><button class="ledger-btn primary" type="submit"><span class="material-icons-outlined">search</span>查询</button><a class="ledger-btn" href="{{ $tabUrl('flows') }}"><span class="material-icons-outlined">refresh</span>重置</a></div>
@@ -1067,8 +1074,8 @@
                 </div>
             </div>
             <div class="ledger-field"><label for="txns-source">来源</label><select id="txns-source" name="txns_source"><option value="">全部</option>@foreach ($sourceLabels as $key => $label)<option value="{{ $key }}" @selected(request('txns_source') === $key)>{{ $label }}</option>@endforeach</select></div>
-            <div class="ledger-field"><label for="txns-from">日期起</label><input id="txns-from" type="date" name="txns_from" value="{{ $transactionPeriod['from'] ?? '' }}"></div>
-            <div class="ledger-field"><label for="txns-to">日期止</label><input id="txns-to" type="date" name="txns_to" value="{{ $transactionPeriod['to'] ?? '' }}"></div>
+            <div class="ledger-field"><label for="txns-from">日期起</label><div class="ledger-date-control" data-ledger-date-control><input id="txns-from" type="date" name="txns_from" value="{{ $transactionPeriod['from'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择动账明细开始日期" title="选择开始日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
+            <div class="ledger-field"><label for="txns-to">日期止</label><div class="ledger-date-control" data-ledger-date-control><input id="txns-to" type="date" name="txns_to" value="{{ $transactionPeriod['to'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择动账明细结束日期" title="选择结束日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
             <div class="ledger-actions"><button class="ledger-btn primary" type="submit"><span class="material-icons-outlined">search</span>查询</button><a class="ledger-btn" href="{{ $transactionViewResetUrl }}"><span class="material-icons-outlined">refresh</span>重置</a></div>
         </form>
         <div class="ledger-summary" data-ledger-transaction-summary><div class="ledger-summary__item"><span>明细笔数</span><b data-ledger-transaction-summary-count>{{ number_format((int) ($ledgerTransactionSummary['count'] ?? 0)) }}</b></div><div class="ledger-summary__item"><span>收入合计</span><b data-ledger-transaction-summary-income>{{ $money($ledgerTransactionSummary['income'] ?? 0) }}</b></div><div class="ledger-summary__item"><span>支出合计</span><b data-ledger-transaction-summary-expense>{{ $money($ledgerTransactionSummary['expense'] ?? 0) }}</b></div><div class="ledger-summary__item"><span>净额</span><b data-ledger-transaction-summary-net>{{ $money(($ledgerTransactionSummary['income'] ?? 0) - ($ledgerTransactionSummary['expense'] ?? 0)) }}</b></div></div>
@@ -1208,8 +1215,8 @@
         </div>
         <form class="ledger-toolbar" method="GET" action="{{ $tabUrl('mapping') }}">
             <input type="hidden" name="tab" value="mapping">
-            <div class="ledger-field"><label for="mapping-from">日期起</label><input id="mapping-from" type="date" name="mapping_from" value="{{ $mappingPeriod['from'] ?? '' }}"></div>
-            <div class="ledger-field"><label for="mapping-to">日期止</label><input id="mapping-to" type="date" name="mapping_to" value="{{ $mappingPeriod['to'] ?? '' }}"></div>
+            <div class="ledger-field"><label for="mapping-from">日期起</label><div class="ledger-date-control" data-ledger-date-control><input id="mapping-from" type="date" name="mapping_from" value="{{ $mappingPeriod['from'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择账户映射开始日期" title="选择开始日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
+            <div class="ledger-field"><label for="mapping-to">日期止</label><div class="ledger-date-control" data-ledger-date-control><input id="mapping-to" type="date" name="mapping_to" value="{{ $mappingPeriod['to'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择账户映射结束日期" title="选择结束日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
             <div class="ledger-field"><label for="mapping-source">来源</label><select id="mapping-source" name="mapping_source"><option value="">全部</option>@foreach (($mapping['sources'] ?? []) as $source)<option value="{{ $source }}" @selected(request('mapping_source') === $source)>{{ $sourceLabels[$source] ?? $source }}</option>@endforeach</select></div>
             <div class="ledger-field" style="min-width:15rem"><label for="mapping-q">原始值/账户简称</label><input id="mapping-q" name="mapping_q" value="{{ request('mapping_q') }}" placeholder="搜索"></div>
             <div class="ledger-field" style="min-width:auto"><label>&nbsp;</label><label style="display:flex;align-items:center;gap:.4rem;height:2.15rem"><input type="checkbox" name="mapping_unmapped" value="1" @checked(request()->boolean('mapping_unmapped'))> 只看未映射</label></div>
@@ -1260,8 +1267,8 @@
     <section class="ledger-panel" id="ledger-panel-sources" role="tabpanel" data-ledger-panel="sources" @if ($activeTab !== 'sources') hidden @endif>
         <form class="ledger-toolbar" method="GET" action="{{ $tabUrl('sources') }}">
             <input type="hidden" name="tab" value="sources">
-            <div class="ledger-field"><label for="sources-from">日期起</label><input id="sources-from" type="date" name="sources_from" value="{{ $sourcePeriod['from'] ?? '' }}"></div>
-            <div class="ledger-field"><label for="sources-to">日期止</label><input id="sources-to" type="date" name="sources_to" value="{{ $sourcePeriod['to'] ?? '' }}"></div>
+            <div class="ledger-field"><label for="sources-from">日期起</label><div class="ledger-date-control" data-ledger-date-control><input id="sources-from" type="date" name="sources_from" value="{{ $sourcePeriod['from'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择数据来源开始日期" title="选择开始日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
+            <div class="ledger-field"><label for="sources-to">日期止</label><div class="ledger-date-control" data-ledger-date-control><input id="sources-to" type="date" name="sources_to" value="{{ $sourcePeriod['to'] ?? '' }}" data-ledger-date-input><button class="ledger-date-control__button" type="button" aria-label="选择数据来源结束日期" title="选择结束日期" data-ledger-date-picker><span class="material-icons-outlined" aria-hidden="true">calendar_today</span></button></div></div>
             <div class="ledger-actions"><button class="ledger-btn primary" type="submit"><span class="material-icons-outlined">search</span>查询</button><a class="ledger-btn" href="{{ $tabUrl('sources') }}"><span class="material-icons-outlined">refresh</span>重置</a></div>
         </form>
         <div class="ledger-note" style="line-height:1.8">
@@ -1622,6 +1629,23 @@
         }
     };
 
+    const openLedgerDatePicker = (input) => {
+        if (!input) return;
+        input.focus({ preventScroll: true });
+        if (typeof input.showPicker === 'function') {
+            try {
+                input.showPicker();
+            } catch (error) { /* 已打开时不重复触发 */ }
+        }
+    };
+    page.querySelectorAll('[data-ledger-date-control]').forEach((control) => {
+        const input = control.querySelector('[data-ledger-date-input]');
+        const button = control.querySelector('[data-ledger-date-picker]');
+        if (!input || !button) return;
+        input.addEventListener('click', () => openLedgerDatePicker(input));
+        button.addEventListener('click', () => openLedgerDatePicker(input));
+    });
+
     const manualTransactionTrigger = page.querySelector('[data-ledger-manual-trigger]');
     const manualTransactionDraft = page.querySelector('[data-ledger-manual-draft]');
     const manualTransactionForm = page.querySelector('[data-ledger-manual-form]');
diff --git a/tests/Feature/Business/FinanceLedgerHeaderControlsTest.php b/tests/Feature/Business/FinanceLedgerHeaderControlsTest.php
index 816329f9..8b464f6b 100644
--- a/tests/Feature/Business/FinanceLedgerHeaderControlsTest.php
+++ b/tests/Feature/Business/FinanceLedgerHeaderControlsTest.php
@@ -155,6 +155,34 @@ class FinanceLedgerHeaderControlsTest extends FeatureTestCase
         }
     }
 
+    public function test_financial_ledger_date_filters_have_calendar_buttons(): void
+    {
+        $html = $this->loginAs()->get($this->pageUrl())->assertOk()->getContent();
+
+        $this->assertSame(8, preg_match_all('/<button\b[^>]*data-ledger-date-picker/', $html));
+        foreach ([
+            'flows-from',
+            'flows-to',
+            'txns-from',
+            'txns-to',
+            'mapping-from',
+            'mapping-to',
+            'sources-from',
+            'sources-to',
+        ] as $inputId) {
+            $this->assertSame(
+                1,
+                preg_match(
+                    '/<div class="ledger-date-control" data-ledger-date-control><input id="'
+                    . preg_quote($inputId, '/')
+                    . '"[^>]*data-ledger-date-input><button[^>]*data-ledger-date-picker>/',
+                    $html,
+                ),
+                $inputId . ' 应提供可点击的日历按钮',
+            );
+        }
+    }
+
     public function test_shop_ledger_header_labels_and_column_order(): void
     {
         $html = $this->loginAs()->get($this->pageUrl())->assertOk()->getContent();