From 54c08d6ade133ba9a89d1b3153579aea67761fe7 Mon Sep 17 00:00:00 2001
From: chenshoulin <chenshoulin@goldenstand.cn>
Date: Sun, 18 Oct 2026 18:19:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=97=A5=E6=9C=9F=E5=8D=A0=E4=BD=8D?=
 =?UTF-8?q?=E9=81=AE=E6=8C=A1=E6=94=B9=E7=94=A8=E6=99=AE=E9=80=9A=20CSS=20?=
 =?UTF-8?q?=E8=A7=84=E5=88=99=EF=BC=8C=E4=B8=8D=E5=86=8D=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=20Tailwind=20=E4=BB=BB=E6=84=8F=E5=8F=98=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上一版用 `[&:not(:focus)::-webkit-datetime-edit]:text-transparent` 遮挡
浏览器自带的格式提示，但实际渲染里出现「选择日期」与「yyyy / mm / 日」
重叠——遮罩没生效。

排查过程：
- 该规则在 dev 与 build 产物里都存在，dev 环境下 Chrome 与 Edge 均正常
- 用不含项目 CSS 的最小页面做隔离测试：Edge 的基线确实显示
  「yyyy / mm / 日」（与反馈截图一致），且三种写法在 Edge 下都有效
- 结论：问题不在规则本身，而在这条规则依赖 Tailwind 扫描器从模板
  字符串里提取类名，在 HMR / 增量构建时可能漏掉，属于不可靠的写法

修复：改在 style.css 里写普通 CSS，类名 date-field--blank。
- 刻意放在 @layer 之外：utilities 层优先级高于 components 层，
  放进层里会被 text-slate-700 这类工具类盖掉
- 同时覆盖输入框自身与各分段伪元素，避免不同 Chromium 版本
  着色位置不一致
- 仍保持「只在未聚焦时遮挡」，否则编辑时看不见正在输入的数字

验证：构建产物含全部 6 条规则；用 preview 起生产构建，Chrome 与 Edge
下字段均只显示「选择日期」。单元测试 485 个、E2E 25 个通过。
---
 src/components/DatePicker.spec.ts | 12 ++++--------
 src/components/DatePicker.vue     |  6 +-----
 src/style.css                     | 21 +++++++++++++++++++++
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/DatePicker.spec.ts b/src/components/DatePicker.spec.ts
index cee6677..e438acd 100644
--- a/src/components/DatePicker.spec.ts
+++ b/src/components/DatePicker.spec.ts
@@ -68,16 +68,12 @@ describe('DatePicker 空值占位', () => {
     expect(mountPicker('2026-10-20').text()).not.toContain('选择日期')
   })
 
-  it('空值时遮住浏览器自带的格式提示（yyyy/mm/日）', () => {
-    const classes = mountPicker(null).find('input').classes().join(' ')
-    expect(classes).toContain('::-webkit-datetime-edit')
-    // 只在未聚焦时透明，否则聚焦后看不见正在编辑的数字
-    expect(classes).toContain(':not(:focus)')
+  it('空值时给输入框加上遮罩类（遮住 yyyy/mm/日）', () => {
+    expect(mountPicker(null).find('input').classes()).toContain('date-field--blank')
   })
 
-  it('有值时不做任何遮挡', () => {
-    const classes = mountPicker('2026-10-20').find('input').classes().join(' ')
-    expect(classes).not.toContain('::-webkit-datetime-edit')
+  it('有值时不加遮罩类', () => {
+    expect(mountPicker('2026-10-20').find('input').classes()).not.toContain('date-field--blank')
   })
 
   it('占位层不拦截鼠标事件（点击仍能唤起原生选择器）', () => {
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index fbff563..09cce2d 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -33,11 +33,7 @@ function hideNativePlaceholder(): boolean {
       <input
         type="date"
         class="peer w-full rounded-md border border-slate-300 px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:focus:border-sky-600"
-        :class="
-          hideNativePlaceholder()
-            ? '[&:not(:focus)::-webkit-datetime-edit]:text-transparent'
-            : ''
-        "
+        :class="{ 'date-field--blank': hideNativePlaceholder() }"
         :value="modelValue ?? ''"
         :aria-label="label ?? '截止日期'"
         @change="onChange"
diff --git a/src/style.css b/src/style.css
index 131910d..0a631ae 100644
--- a/src/style.css
+++ b/src/style.css
@@ -71,3 +71,24 @@
     scrollbar-color: var(--color-slate-700) transparent;
   }
 }
+
+/*
+ * 空值的日期输入框：遮住浏览器自带的格式提示。
+ * Edge 会按页面 lang 拼出「yyyy / mm / 日」这种半英半中的提示，
+ * 既与界面语言不统一，又容易被误读成已经有内容。
+ *
+ * 只在未聚焦时遮挡 —— 否则聚焦编辑时连正在输入的数字都看不见。
+ * 同时覆盖输入框本身与各分段伪元素，避免不同 Chromium 版本着色位置不一致。
+ *
+ * 刻意写在 @layer 之外：Tailwind 的 utilities 层优先级高于 components 层，
+ * 若放进层里会被 text-slate-700 之类的工具类盖掉。也不写成 Tailwind 任意变体，
+ * 因为那依赖扫描器从模板字符串里提取类名，HMR 或增量构建时容易漏。
+ */
+.date-field--blank:not(:focus),
+.date-field--blank:not(:focus)::-webkit-datetime-edit,
+.date-field--blank:not(:focus)::-webkit-datetime-edit-text,
+.date-field--blank:not(:focus)::-webkit-datetime-edit-year-field,
+.date-field--blank:not(:focus)::-webkit-datetime-edit-month-field,
+.date-field--blank:not(:focus)::-webkit-datetime-edit-day-field {
+  color: transparent;
+}