🚩 修复暗黑模式 增加自动填充

layouts/default.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import {useApisStore} from "~/stores/api";
-
 const {t} = useI18n()
 const router = useRouter();
 const runtimeConfig = useRuntimeConfig()
@@ -8,7 +6,7 @@ const localePath = useLocalePath()
 const settingsStore = useSettingsStore()
 const styleStore = useStyleStore()
 const clientMounted = ref(false);
-const apisStore = useApisStore()
+
 
 const message = useMessage()
 const handleAction = async (url: any) => {
@@ -29,10 +27,6 @@ const handleAction = async (url: any) => {
 }
 
 
-onMounted(() => {
-  clientMounted.value = true;
-});
-
 const selectOptions = ref([
   {
     label: 'Whois',
@@ -45,23 +39,49 @@ const selectOptions = ref([
     value: 'domain'
   }
 ])
-const {selectedOption} = storeToRefs(settingsStore)
+const {selectedOption, domainSearch} = storeToRefs(settingsStore)
 const handleSelectOptions = (value: any) => {
   settingsStore.setSelectedOption(value);
-  console.log(selectedOption.value)
 }
+
+
+const domainListStore = useDomainListStore();
+// 支持的主流顶级域名列表
+const supportedTLDs = ['com', 'net', 'org', 'io', 'tech', 'co', 'info', 'biz', 'edu', 'gov'];
+
+// 计算属性生成域名选项
+const domainOptions = computed(() => {
+  if (!domainSearch.value) return [];
+
+  // 取用户输入的前缀，假设输入可能包含已有的后缀
+  const prefix = domainSearch.value.split('.')[0];
+
+  // 生成带有主流后缀的域名选项
+  return supportedTLDs.map(suffix => {
+    const value = `${prefix}.${suffix}`;
+    return {label: value, value};
+  });
+});
+const getShow = (value: any) => {
+  // 检查 value 是否以 '.' 结尾
+  return typeof value === 'string' && value.endsWith('.');
+}
+
+onMounted(() => {
+  clientMounted.value = true;
+});
 </script>
 
 <template>
   <div
-      class="w-full text-xs dark:bg-transparent"
+      class="w-full text-xs bg-[#F1F3F4] dark:bg-transparent"
       :class="{ 'h-[90vh]': !styleStore.getIsPage && clientMounted }"
   >
     <div
         class=" max-w-screen-lg mx-auto px-[1em] pb-[10vh] "
         :class="{ 'pt-[25vh]': !styleStore.getIsPage && clientMounted, 'pt-[5vh]': styleStore.getIsPage || !clientMounted }"
     >
-      <nav class=" w-full text-[#464747] h-5 dark:bg-gray-700">
+      <nav class=" w-full text-[#464747] h-5 ">
         <NuxtLink class="mb-3 font-bold text-2xl inline-block text-current no-underline dark:text-white"
                   :to="localePath('/')"
         >
@@ -70,37 +90,43 @@ const handleSelectOptions = (value: any) => {
         </NuxtLink>
       </nav>
       <div class="mt-6">
-        <div class="flex items-center space-x-2 mb-3 dark:text-white"
-        >
-          <!-- 容器div用于水平布局 -->
-          <div class="flex-grow">
-            <NInputGroup>
-              <n-select
-                  :style="{ width: '20%' }"
-                  size="large"
-                  v-model:value="selectedOption"
-                  :options="selectOptions"
-                  @update:value="handleSelectOptions"
-              />
-              <NInput
-                  v-model:value="settingsStore.domainSearch"
-                  @keyup.enter="handleAction(settingsStore.selectedOption)"
-                  type="text"
-                  :placeholder="t('index.placeholder')"
-                  size="large"
-                  clearable
-                  autofocus
-                  class="w-full "/>
-            </NInputGroup>
+        <ClientOnly>
+          <div class="flex items-center space-x-2 mb-3 dark:text-white"
+          >
+            <!-- 容器div用于水平布局 -->
+            <div class="flex-grow">
+              <NInputGroup>
+                <n-select
+                    :style="{ width: '20%' }"
+                    size="large"
+                    v-model:value="selectedOption"
+                    :options="selectOptions"
+                    @update:value="handleSelectOptions"
+                />
+                <NAutoComplete
+                    v-model:value="domainSearch"
+                    @keyup.enter="handleAction(settingsStore.selectedOption)"
+                    :input-props="{ autocomplete: 'off' }"
+                    :options="domainOptions"
+                    :get-show="getShow"
+                    type="text"
+                    :placeholder="t('index.placeholder')"
+                    size="large"
+                    clearable
+                    autofocus
+                    class="w-full ">
+                </NAutoComplete>
+              </NInputGroup>
+            </div>
+            <!-- 使用v-if基于state.domain的值来控制按钮的显示 -->
+            <NButton type="primary"
+                     size="large"
+                     @click="handleAction(settingsStore.selectedOption)"
+                     v-if="settingsStore.domainSearch">
+              {{ t('index.onSubmit') }}
+            </NButton>
           </div>
-          <!-- 使用v-if基于state.domain的值来控制按钮的显示 -->
-          <NButton type="primary"
-                   size="large"
-                   @click="handleAction(settingsStore.selectedOption)"
-                   v-if="settingsStore.domainSearch">
-            {{ t('index.onSubmit') }}
-          </NButton>
-        </div>
+        </ClientOnly>
       </div>
 
       <ClientOnly>