🎛️ 优化日期选择器视觉

src/components/common/NativeDateSelect.vue

@@ -1,34 +1,33 @@
 <template>
-  <div class="grid w-full grid-cols-3 gap-2 sm:w-auto">
+  <div class="native-date-strip" :aria-label="ariaLabel">
     <select
       :value="parts.year"
-      class="h-12 min-w-0 rounded-[30px] border px-3 text-sm"
-      :class="fieldClass"
+      class="native-date-part native-date-year"
       :aria-label="`${ariaLabel}年`"
       @change="updatePart('year', ($event.target as HTMLSelectElement).value)"
     >
-      <option v-for="year in years" :key="year" :value="year">{{ year }}年</option>
+      <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
     </select>
+    <span class="native-date-separator">/</span>
     <select
       :value="parts.month"
-      class="h-12 min-w-0 rounded-[30px] border px-3 text-sm"
-      :class="fieldClass"
+      class="native-date-part native-date-month"
       :aria-label="`${ariaLabel}月`"
       @change="updatePart('month', ($event.target as HTMLSelectElement).value)"
     >
       <option v-for="month in months" :key="month" :value="month">
-        {{ month.toString().padStart(2, '0') }}月
+        {{ month.toString().padStart(2, '0') }}
       </option>
     </select>
+    <span class="native-date-separator">/</span>
     <select
       :value="parts.day"
-      class="h-12 min-w-0 rounded-[30px] border px-3 text-sm"
-      :class="fieldClass"
+      class="native-date-part native-date-day"
       :aria-label="`${ariaLabel}日`"
       @change="updatePart('day', ($event.target as HTMLSelectElement).value)"
     >
       <option v-for="day in days" :key="day" :value="day">
-        {{ day.toString().padStart(2, '0') }}日
+        {{ day.toString().padStart(2, '0') }}
       </option>
     </select>
   </div>
@@ -95,3 +94,101 @@ const updatePart = (part: DatePart, value: string) => {
   emit('change')
 }
 </script>
+
+<style scoped>
+.native-date-strip {
+  display: inline-flex;
+  width: 100%;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.15rem;
+  border: 1px solid transparent;
+  border-radius: 30px;
+  background: rgba(237, 244, 245, 0.52);
+  color: #2d4650;
+  font-variant-numeric: tabular-nums;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.native-date-strip:hover,
+.native-date-strip:focus-within {
+  border-color: rgba(143, 178, 191, 0.7);
+  background: rgba(226, 236, 238, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 10px 24px rgba(126, 149, 154, 0.16);
+}
+
+.native-date-strip:focus-within {
+  transform: translateY(-1px);
+}
+
+.native-date-part {
+  height: 2.65rem;
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1;
+  outline: none;
+}
+
+.native-date-part:focus-visible {
+  border-radius: 999px;
+  box-shadow: 0 0 0 2px rgba(143, 178, 191, 0.58);
+}
+
+.native-date-year {
+  width: 4.4rem;
+}
+
+.native-date-month,
+.native-date-day {
+  width: 2.65rem;
+}
+
+.native-date-separator {
+  color: #789096;
+  font-size: 0.95rem;
+  opacity: 0.78;
+  pointer-events: none;
+}
+
+.dark .native-date-strip {
+  background: rgba(38, 57, 65, 0.62);
+  color: #d8e3e5;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.dark .native-date-strip:hover,
+.dark .native-date-strip:focus-within {
+  border-color: rgba(113, 153, 168, 0.72);
+  background: rgba(45, 71, 81, 0.76);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 10px 24px rgba(4, 10, 14, 0.28);
+}
+
+.dark .native-date-separator {
+  color: #aabdc2;
+}
+
+@media (min-width: 640px) {
+  .native-date-strip {
+    width: max-content;
+    min-width: 12rem;
+    padding-inline: 0.75rem;
+  }
+}
+</style>