From 12c5346f75875af138df55a81c8e3db6624e0046 Mon Sep 17 00:00:00 2001
From: chenshoulin <chenshoulin@goldenstand.cn>
Date: Sun, 18 Oct 2026 21:25:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=B8=85=E9=99=A4=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E6=94=B9=E4=B8=BA=E8=B7=9F=E9=9A=8F=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E8=BE=93=E5=85=A5=E6=A1=86=EF=BC=8C=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E7=9F=AE=E4=B8=80=E6=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

输入框是 text-sm py-1.5（34px），而清除按钮是 text-xs py-1（26px），
两者并排时按钮明显矮一截。

改为 self-stretch + inline-flex items-center，高度直接跟着这一行走，
而不是写死内边距 —— 输入框以后调内边距，按钮会自动跟上。

实测 320 / 336 / 390 / 1440 四种宽度、深浅两色共 8 组：
输入框与按钮均为 34px，顶边差 0.0，日期行无横向溢出。
回归测试锁住机制本身（必须 self-stretch、不得写死 py）。
---
 src/components/DatePicker.spec.ts | 13 +++++++++++++
 src/components/DatePicker.vue     |  6 +++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/DatePicker.spec.ts b/src/components/DatePicker.spec.ts
index 54fefe4..8d0ae95 100644
--- a/src/components/DatePicker.spec.ts
+++ b/src/components/DatePicker.spec.ts
@@ -68,6 +68,19 @@ describe('DatePicker', () => {
     expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
   })
 
+  /**
+   * jsdom 不做布局，量不到真实高度，所以这里锁的是「机制」：
+   * 按钮必须靠 self-stretch 跟着整行走，而不是写死 py。
+   * 曾经写死 py-1，比输入框矮 8px；输入框内边距一改还会再次错位。
+   */
+  it('清除按钮靠 self-stretch 对齐输入框高度，不写死内边距', () => {
+    const button = mountPicker('2026-10-20').find('button')
+    expect(button.classes()).toContain('self-stretch')
+    expect(button.classes()).toContain('items-center')
+    expect(button.classes()).not.toContain('py-1')
+    expect(button.classes()).not.toContain('py-1.5')
+  })
+
   it('默认带「截止日期」可访问性标签，可覆盖', () => {
     expect(mountPicker(null).find('input').attributes('aria-label')).toBe('截止日期')
     expect(mountPicker(null, '开始日期').find('input').attributes('aria-label')).toBe('开始日期')
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 7ca1bc5..55ead3c 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -86,10 +86,14 @@ function openPicker(): void {
       </span>
     </div>
 
+    <!--
+      高度靠 self-stretch 跟着这一行走，而不是写死 py：
+      输入框改内边距时按钮会自动跟上，不会再次一高一矮。
+    -->
     <button
       v-if="modelValue"
       type="button"
-      class="shrink-0 rounded-md border border-slate-300 px-2.5 py-1 text-xs text-slate-600 transition hover:bg-slate-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+      class="inline-flex shrink-0 items-center justify-center self-stretch rounded-md border border-slate-300 px-2.5 text-xs text-slate-600 transition hover:bg-slate-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
       @click="emit('update:modelValue', null)"
     >
       清除