From b1eba3facc2198e0fee185908e00e8078760726a Mon Sep 17 00:00:00 2001
From: linmianxun <634841751@qq.com>
Date: Mon, 14 Sep 2026 21:24:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=8D=95=E7=AD=9B=E9=80=89=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E6=8E=A7=E4=BB=B6=E5=AF=B9=E9=BD=90=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=EF=BC=9A=E5=8F=AF=E8=A7=81=E6=96=87=E6=A1=88=E3=80=81=E7=82=B9?=
 =?UTF-8?q?=E9=80=89=E5=8D=B3=E5=BC=B9=E6=97=A5=E5=8E=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../views/inquiry/styles/admin-fidelity.css   | 83 +++++++++++++++----
 .../src/views/inquiry/workOrder/index.vue     | 55 +++++++++++-
 2 files changed, 120 insertions(+), 18 deletions(-)

diff --git a/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css b/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css
index b8a8e28..099cf96 100644
--- a/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css
+++ b/inquiry-backend/src/views/inquiry/styles/admin-fidelity.css
@@ -284,41 +284,94 @@ body {
   box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
 }
 
+/* 日期范围：与 select 同高同边框；文案可见，原生 date 透明铺满，点文字即弹日历 */
 .toolbar-date-range {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   height: 38px;
   box-sizing: border-box;
-  padding: 0 8px;
+  padding: 0 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #ffffff;
   flex-shrink: 0;
-  max-width: 220px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.toolbar-date-range input[type="date"] {
-  width: 92px;
-  min-width: 0;
-  max-width: 92px;
+.toolbar-date-range:hover {
+  border-color: #98a2b3;
+}
+
+.toolbar-date-range:focus-within {
+  border-color: #155eef;
+  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12);
+}
+
+.toolbar-date-icon {
+  color: #98a2b3;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.toolbar-date-part {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 84px;
   height: 28px;
-  border: none;
-  background: transparent;
-  padding: 0;
-  font-size: 10px;
-  font-weight: 600;
+  padding: 0 2px;
+  cursor: pointer;
+}
+
+.toolbar-date-label {
+  font-size: 11px;
+  font-weight: 700;
   color: #344054;
-  outline: none;
+  white-space: nowrap;
+  line-height: 1;
+  pointer-events: none;
+  user-select: none;
+}
+
+.toolbar-date-label.is-placeholder {
+  color: #98a2b3;
+  font-weight: 600;
+}
+
+.toolbar-date-native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+  font-size: 16px;
+  background: transparent;
+}
+
+/* WebKit：把日历图标热区拉满整格，点文字区域也能出 picker */
+.toolbar-date-native::-webkit-calendar-picker-indicator {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
   cursor: pointer;
 }
 
 .toolbar-date-sep {
-  font-size: 10px;
-  font-weight: 700;
+  font-size: 11px;
+  font-weight: 600;
   color: #98a2b3;
   flex-shrink: 0;
   line-height: 1;
+  user-select: none;
 }
 
 .toolbar .toolbar-actions .btn {
diff --git a/inquiry-backend/src/views/inquiry/workOrder/index.vue b/inquiry-backend/src/views/inquiry/workOrder/index.vue
index 4786e52..074dd7c 100644
--- a/inquiry-backend/src/views/inquiry/workOrder/index.vue
+++ b/inquiry-backend/src/views/inquiry/workOrder/index.vue
@@ -67,6 +67,30 @@ const closeOpen = ref(false);
 const current = ref<TicketRow | null>(null);
 const closeReason = ref("");
 
+/** 创建时间起止：原生 date 叠在文案上，点文字也能弹出日历 */
+const dateFromRef = ref<HTMLInputElement | null>(null);
+const dateToRef = ref<HTMLInputElement | null>(null);
+
+/**
+ * 打开系统日期面板。
+ * 点「开始/结束日期」文案时调用；优先 HTMLInputElement.showPicker。
+ * 不在此处再 el.click()，避免与 input 的 click 互相重入。
+ * WebKit 另靠 CSS 把 calendar-picker-indicator 铺满热区兜底。
+ */
+function openDatePicker(which: "from" | "to") {
+  const el = which === "from" ? dateFromRef.value : dateToRef.value;
+  if (!el) return;
+  try {
+    if (typeof (el as HTMLInputElement & { showPicker?: () => void }).showPicker === "function") {
+      (el as HTMLInputElement & { showPicker: () => void }).showPicker();
+    } else {
+      el.focus();
+    }
+  } catch {
+    el.focus();
+  }
+}
+
 function dash(v: any) {
   const s = (v ?? "").toString().trim();
   return s ? s : "-";
@@ -414,9 +438,34 @@ function refresh() {
           <option value="多段联运">多段联运</option>
         </select>
         <div class="toolbar-date-range" title="按创建时间筛选">
-          <input v-model="filters.dateFrom" type="date" aria-label="创建时间起" />
-          <span class="toolbar-date-sep">–</span>
-          <input v-model="filters.dateTo" type="date" aria-label="创建时间止" />
+          <ProtoIcon name="calendar" :size="14" class="toolbar-date-icon" />
+          <div class="toolbar-date-part" @click="openDatePicker('from')">
+            <span class="toolbar-date-label" :class="{ 'is-placeholder': !filters.dateFrom }">
+              {{ filters.dateFrom || "开始日期" }}
+            </span>
+            <input
+              ref="dateFromRef"
+              v-model="filters.dateFrom"
+              type="date"
+              class="toolbar-date-native"
+              aria-label="创建时间起"
+              @click.stop="openDatePicker('from')"
+            />
+          </div>
+          <span class="toolbar-date-sep">至</span>
+          <div class="toolbar-date-part" @click="openDatePicker('to')">
+            <span class="toolbar-date-label" :class="{ 'is-placeholder': !filters.dateTo }">
+              {{ filters.dateTo || "结束日期" }}
+            </span>
+            <input
+              ref="dateToRef"
+              v-model="filters.dateTo"
+              type="date"
+              class="toolbar-date-native"
+              aria-label="创建时间止"
+              @click.stop="openDatePicker('to')"
+            />
+          </div>
         </div>
       </div>