优化页面、修复BUG

client/src/components/ui/EmailAutocomplete.vue

@@ -3,17 +3,17 @@
     <input 
       :name="name" 
       type="text" 
-      class="peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
-      :placeholder="placeholder"
+      class="inquiry-input peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
+      :placeholder="inputPlaceholder"
       :value="modelValue"
+      :required="required"
       @input="handleInput"
       @focus="showDropdown = true"
       @blur="handleBlur"
       autocomplete="off"
     >
     <label 
-      class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all peer-focus:-top-4 peer-focus:text-art-accent peer-autofill:-top-4 peer-autofill:text-art-accent pointer-events-none"
-      :class="modelValue ? '-top-4 text-white/50' : ''"
+      class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all pointer-events-none peer-focus:-top-4 peer-focus:text-art-accent peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-white/50 peer-autofill:-top-4 peer-autofill:text-white/50"
     >{{ label }}</label>
 
     <!-- Autocomplete Dropdown -->
@@ -39,10 +39,13 @@ const props = defineProps<{
   label: string
   placeholder?: string
   modelValue: string
+  required?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const inputPlaceholder = computed(() => props.placeholder ?? ' ')
+
 const showDropdown = ref(false)
 const emailSuffixes = ref<string[]>([])
 const containerRef = ref<HTMLElement | null>(null)
@@ -81,3 +84,15 @@ const selectSuggestion = (val: string) => {
   showDropdown.value = false
 }
 </script>
+
+<style scoped>
+.inquiry-input:-webkit-autofill,
+.inquiry-input:-webkit-autofill:hover,
+.inquiry-input:-webkit-autofill:focus,
+.inquiry-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px #080808 inset !important;
+  -webkit-text-fill-color: white !important;
+  caret-color: white;
+  transition: background-color 5000s ease-in-out 0s;
+}
+</style>