🎨 增加 Go 后端

2024-04-07 11:08:05 +08:00
parent 04c82ab25d
commit 61275be2bf
165 changed files with 7043 additions and 3599 deletions
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const localePath = useLocalePath()
+const router = useRouter();
+</script>
+
+<template>
+        <div
+            class="cursor-pointer flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+            @click="router.push(localePath('/settings/api'))"
+        >
+          <Icon name="i-eos-icons:api-outlined" class=" text-lg dark:text-white" />
+        </div>
+</template>
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps({
+  full: {
+    type: Boolean,
+    default: false,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
+    <transition name="fade-slide" mode="out-in" appear>
+      <main :class="{ 'flex-1': full }" class="m-12"><slot /></main>
+    </transition>
+    <slot v-if="$slots.footer" name="footer" />
+    <CommonTheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+    <n-back-top :bottom="20" />
+  </main>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps({
+  text: String
+})
+</script>
+
+<template>
+  <!-- 公告部分 -->
+  <div class="bg-gray-200 p-3 rounded-md mb-5 dark:bg-[#000000FF]">
+    <div class="flex items-center">
+      <i aria-hidden="true" class="icon fas fa-bullhorn mr-3"></i>
+    </div>
+    <div class="flex-grow">
+      <div class="text-sm text-gray-800 dark:text-white">
+        {{ text }}
+        <slot name="text"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+const colorMode = useColorMode()
+const availableColor = ref([
+  {
+    id: 1,
+    name: 'system',
+    icon: 'ph:laptop-duotone',
+  },
+  {
+    id: 2,
+    name: 'dark',
+    icon: 'ph:moon-stars-duotone',
+  },
+  {
+    id: 3,
+    name: 'light',
+    icon: 'ph:sun-dim-duotone',
+  },
+])
+</script>
+
+<template>
+  <div>
+    <HeadlessListbox
+        v-model="$colorMode.preference"
+        as="div"
+        class="relative flex items-center"
+    >
+      <HeadlessListboxLabel class="sr-only">
+        Theme
+      </HeadlessListboxLabel>
+      <HeadlessListboxButton type="button" title="Change Color">
+        <div
+            class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+        >
+          <Icon name="ph:palette-duotone" class=" text-lg dark:text-white"/>
+        </div>
+      </HeadlessListboxButton>
+      <HeadlessListboxOptions
+          class="absolute top-full right-0 z-[999] mt-2 w-40 overflow-hidden rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
+      >
+        <HeadlessListboxOption
+            v-for="color in availableColor"
+            :key="color.id"
+            :value="color.name"
+            class="flex w-full cursor-pointer items-center justify-between py-2 px-3"
+            :class="{
+            'text-white-500 bg-gray-200 dark:bg-gray-500/50':
+              colorMode.preference === color.name,
+            'hover:bg-gray-200 dark:hover:bg-gray-700/30':
+              colorMode.preference !== color.name,
+          }"
+        >
+          <span class="truncate">
+            {{ color.name }}
+          </span>
+          <span class="flex items-center justify-center text-sm">
+            <Icon :name="color.icon" class="text-base"/>
+          </span>
+        </HeadlessListboxOption>
+      </HeadlessListboxOptions>
+    </HeadlessListbox>
+  </div>
+</template>
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['action'])
+
+const handleClick = () => {
+  const urlParam = 'dns' // 这里是你想传递给handleAction方法的参数
+  emit('action', urlParam)
+}
+</script>
+
+<template>
+  <div>
+    <div title="Change Color">
+      <div
+          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+          @click="handleClick"
+      >
+        <Icon name="eos-icons:dns" class=" text-lg dark:text-white" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+const isOpen = ref(false)
+const {t} = useI18n()
+
+</script>
+
+<template>
+  <div>
+    <div title="Change Color">
+      <div
+          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+          @click="isOpen = true"
+      >
+        <Icon name="mdi:about-circle-outline" class=" text-lg dark:text-white"/>
+      </div>
+    </div>
+    <NDrawer
+        v-model:show="isOpen"
+        placement="left"
+        :default-width="502"
+        resizable
+    >
+      <NDrawerContent
+          :title="t('index.support')"
+          closable
+      >
+        <div class="flex flex-wrap mt-2 ">
+          <!--      <span-->
+          <!--          v-for="item in SupportedTLDs"-->
+          <!--          :key="item"-->
+          <!--          class="m-1 px-2 py-1 text-sm font-semibold text-gray-800 bg-gray-200 rounded hover:bg-gray-300"-->
+          <!--      >-->
+          <!--        {{ item }}-->
+          <!--      </span>-->
+        </div>
+      </NDrawerContent>
+    </NDrawer>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+const {t} = useI18n()
+</script>
+<template>
+  <footer class="text-gray-800 h-[10vh] bg-[#F1F3F4] dark:text-white  dark:bg-[#000000FF]">
+    <div class="max-w-5xl mx-auto py-4 px-4 flex justify-between items-center">
+      <div class="text-sm">
+        {{ t('footer.text') }}
+      </div>
+      <div class="flex items-center space-x-4">
+        <NuxtLink :to="localePath('/api.html')" class="hover:underline">{{ t('footer.api') }}</NuxtLink>
+        <NuxtLink to="https://github.com/7836246/Nuxt-Whois" class="hover:underline">
+          <Icon name="ant-design:github-outlined" class="h-6 w-6"/>
+        </NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+</style>
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+const isOpen = ref(false)
+const settingsStore = useSettingsStore()
+const {t} = useI18n()
+
+</script>
+
+<template>
+  <div>
+    <div title="Change Color">
+      <div
+          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg dark:bg-gray-700"
+          @click="isOpen = true"
+      >
+        <Icon name="ic:baseline-history" class=" text-lg dark:text-white"/>
+      </div>
+    </div>
+
+    <NDrawer
+        v-model:show="isOpen"
+        placement="right"
+        :default-width="602"
+        resizable
+    >
+
+      <NDrawerContent
+          :title="t('history.title')"
+          class="w-full min-h-screen overflow-y-auto  dark:text-white  dark:bg-[#000000FF]"
+          closable
+      >
+        <div class="max-w-6xl mx-auto">
+          <h1 class="text-2xl font-bold text-gray-800 mb-5 flex items-center justify-between">
+            <span
+                class="text-sm text-gray-500 py-1 px-3 rounded-full  dark:text-white  dark:bg-[#000000FF]">
+             {{ t('history.tips', {length: settingsStore.getHistory.length}) }}
+            </span>
+          </h1>
+          <div class=" shadow-md rounded-lg ">
+            <!-- 条件渲染，如果有历史记录则显示表格，否则显示提示 -->
+            <div v-if="settingsStore.getHistory.length">
+              <!-- 表格头部和内容 -->
+              <table class="min-w-full leading-normal ">
+                <thead>
+                <tr>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.domain') }}
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.type') }}
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.time') }}
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.actions') }}
+                  </th>
+                </tr>
+                </thead>
+                <tbody>
+                <!-- 这里将使用循环来动态展示查询历史 -->
+                <tr v-for="item in settingsStore.getHistory" :key="item.id"
+                    class="border-b border-gray-200  dark:text-white  dark:bg-[#000000FF]">
+                  <td class="px-5 py-5 text-sm  ">
+                    <NuxtLink :to="item.path">{{ item.domain }}</NuxtLink>
+                  </td>
+                  <td class="px-5 py-5 text-sm ">
+                    {{ item.type }}
+                  </td>
+                  <td class="px-5 py-5 text-sm ">
+                    {{ item.date }}
+                  </td>
+                  <td class="px-5 py-5 text-sm ">
+                    <NButton
+                        @click="settingsStore.deleteHistory(item.id)"
+
+                    >{{ t('common.actions.delete') }}
+                    </NButton>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+            <div v-else class="text-center py-5">
+              <p class="text-gray-500">{{ t('history.empty') }}</p>
+            </div>
+          </div>
+        </div>
+      </NDrawerContent>
+    </NDrawer>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+
+const switchLocalePath = useSwitchLocalePath()
+
+const { locale } = useI18n()
+
+const local = computed(() => {
+  return locale.value
+})
+
+const availableLocales = [
+  { iso: 'en', name: 'English', flag: 'twemoji:flag-us-outlying-islands' },
+  { iso: 'zh', name: '中文简体', flag: 'emojione-v1:flag-for-china' },
+  { iso: 'tw', name: '中文繁体', flag: 'flag:tw-4x3' },
+  // 添加更多语言...
+]
+</script>
+
+<template>
+  <div>
+    <HeadlessListbox
+        v-model="local"
+        as="div"
+        class="relative flex items-center"
+    >
+      <HeadlessListboxLabel class="sr-only">
+        Change Language
+      </HeadlessListboxLabel>
+      <HeadlessListboxButton type="button" title="Change Language">
+        <div
+            class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+        >
+          <Icon name="i-ph:translate-bold" class=" text-lg dark:text-white" size="20" />
+        </div>
+      </HeadlessListboxButton>
+      <HeadlessListboxOptions
+          class="absolute top-full right-0 z-[999] mt-2 w-40 overflow-hidden rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
+      >
+        <NuxtLink
+            v-for="lang in availableLocales"
+            :key="lang.iso"
+            :to="switchLocalePath(lang.iso)"
+            class="flex w-full cursor-pointer items-center justify-between py-2 px-3"
+            :class="{
+            'text-white-500 bg-gray-200 dark:bg-gray-500/50':
+              local === lang.iso,
+            'hover:bg-gray-200 dark:hover:bg-gray-700/30':
+              local !== lang.iso,
+          }"
+        >
+          <span class="truncate">
+            {{ lang.name }}
+          </span>
+          <span class="flex items-center justify-center text-sm">
+             <Icon :name="lang.flag" class="text-base" size="20" />
+          </span>
+        </NuxtLink>
+      </HeadlessListboxOptions>
+    </HeadlessListbox>
+  </div>
+</template>
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// import { MeModal } from '@/components'
+const [modalRef] = useModal()
+</script>
+
+<template>
+  123
+  <div>
+    <n-tooltip trigger="hover" placement="left">
+      <template #trigger>
+        <IconSettings size="32"  @click="modalRef.open()" filled class="cursor-pointer text-32 color-primary" />
+      </template>
+      布局设置
+    </n-tooltip>
+    <MeModal
+        ref="modalRef"
+        title="布局设置"
+        :show-footer="false"
+        width="600px"
+        :modal-style="{ opacity: 0.85 }"
+    >
+      <n-space justify="space-between">
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('simple')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="60" />
+            </div>
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'simple' ? 'primary' : ''"
+              ghost
+          >
+            简约
+          </n-button>
+        </div>
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('normal')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="10" />
+              <n-skeleton class="mt-4" :width="80" :height="46" />
+            </div>
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'normal' ? 'primary' : ''"
+              ghost
+          >
+            通用
+          </n-button>
+        </div>
+
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('full')">
+          <div class="flex">
+            <n-skeleton :width="20" :height="60" />
+            <div class="ml-4">
+              <n-skeleton :width="80" :height="6" />
+              <n-skeleton class="mt-4" :width="80" :height="4" />
+              <n-skeleton class="mt-4" :width="80" :height="42" />
+            </div>
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'full' ? 'primary' : ''"
+              ghost
+          >
+            全面
+          </n-button>
+        </div>
+        <div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('empty')">
+          <div class="flex">
+            <n-skeleton :width="104" :height="60" />
+          </div>
+          <n-button
+              class="mt-12"
+              size="small"
+              :type="appStore.layout === 'empty' ? 'primary' : ''"
+              ghost
+          >
+            空白
+          </n-button>
+        </div>
+      </n-space>
+      <p class="mt-16 opacity-50">
+        注: 此设置仅对未设置layout或者设置成跟随系统的页面有效，菜单设置的layout优先级最高
+      </p>
+    </MeModal>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import {useSettingsStore} from "~/stores/settings";
+
+const availableTimeZones = ref([
+  { id: 1, name: 'currentWindow' },
+  { id: 2, name: 'newWindow' },
+]);
+const {t} = useI18n()
+const settingsStore = useSettingsStore()
+</script>
+
+<template>
+  <div>
+    <HeadlessListbox
+        v-model="settingsStore.linkOpenType"
+        as="div"
+        class="relative flex items-center"
+    >
+      <HeadlessListboxLabel class="sr-only">
+        Theme
+      </HeadlessListboxLabel>
+      <HeadlessListboxButton type="button" title="Change Color">
+        <div
+            class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+        >
+          <Icon name="material-symbols:link" class=" text-lg dark:text-white" />
+        </div>
+      </HeadlessListboxButton>
+      <HeadlessListboxOptions
+          class="absolute top-full right-0 z-[999] mt-2 w-40 max-h-60 overflow-y-auto rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
+      >
+        <HeadlessListboxOption
+            v-for="item in availableTimeZones"
+            :key="item.id"
+            :value="item.name"
+            class="flex w-full cursor-pointer items-center justify-between py-2 px-3 hover:bg-gray-100 dark:hover:bg-gray-600"
+            :class="{
+            'text-white-500 bg-gray-200 dark:bg-gray-500/50':
+              settingsStore.linkOpenType === item.name,
+            'hover:bg-gray-200 dark:hover:bg-gray-700/30':
+              settingsStore.linkOpenType !== item.name,
+          }"
+        >
+    <span class="truncate">
+      {{ t(`settings.${item.name}`) }}
+    </span>
+          <span class="flex items-center justify-center text-sm">
+    </span>
+        </HeadlessListboxOption>
+      </HeadlessListboxOptions>
+    </HeadlessListbox>
+  </div>
+</template>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+const router = useRouter();
+</script>
+
+<template>
+  <div>
+  <div title="Change Color">
+    <div
+        class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+        @click="router.push(localePath('/settings'))"
+    >
+      <Icon name="uil:setting" class=" text-lg dark:text-white" />
+    </div>
+  </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <footer class="f-c-c text-14 text-gray-500">
+    <p>
+      Copyright © 2023
+      <a
+          href="https://github.com/zclzone"
+          target="__blank"
+          class="transition"
+          hover="decoration-underline color-primary"
+      >
+        Ronnie Zhang(大脸怪)
+      </a>
+    </p>
+  </footer>
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+
+const availableTimeZones = ref([
+  {id: 1, name: 'UTC-12', displayName: 'International Date Line West'},
+  {id: 2, name: 'UTC-11', displayName: 'Coordinated Universal Time-11'},
+  {id: 3, name: 'UTC-10', displayName: 'Hawaii'},
+  {id: 4, name: 'UTC-9', displayName: 'Alaska'},
+  {id: 5, name: 'UTC-8', displayName: 'Pacific Time (US & Canada)'},
+  {id: 6, name: 'UTC-7', displayName: 'Mountain Time (US & Canada)'},
+  {id: 7, name: 'UTC-6', displayName: 'Central Time (US & Canada), Mexico City'},
+  {id: 8, name: 'UTC-5', displayName: 'Eastern Time (US & Canada), Bogota, Lima'},
+  {id: 9, name: 'UTC-4', displayName: 'Atlantic Time (Canada), Caracas, La Paz'},
+  {id: 10, name: 'UTC-3', displayName: 'Buenos Aires, Georgetown'},
+  {id: 11, name: 'UTC-2', displayName: 'Coordinated Universal Time-02'},
+  {id: 12, name: 'UTC-1', displayName: 'Azores'},
+  {id: 13, name: 'UTC', displayName: 'Coordinated Universal Time'},
+  {id: 14, name: 'UTC+1', displayName: 'Brussels, Copenhagen, Madrid, Paris'},
+  {id: 15, name: 'UTC+2', displayName: 'Athens, Bucharest, Istanbul'},
+  {id: 16, name: 'UTC+3', displayName: 'Moscow, St. Petersburg, Nairobi'},
+  {id: 17, name: 'UTC+3:30', displayName: 'Tehran'},
+  {id: 18, name: 'UTC+4', displayName: 'Abu Dhabi, Muscat'},
+  {id: 19, name: 'UTC+4:30', displayName: 'Kabul'},
+  {id: 20, name: 'UTC+5', displayName: 'Islamabad, Karachi, Tashkent'},
+  {id: 21, name: 'UTC+5:30', displayName: 'Chennai, Kolkata, Mumbai, New Delhi'},
+  {id: 22, name: 'UTC+5:45', displayName: 'Kathmandu'},
+  {id: 23, name: 'UTC+6', displayName: 'Astana, Dhaka'},
+  {id: 24, name: 'UTC+6:30', displayName: 'Yangon (Rangoon)'},
+  {id: 25, name: 'UTC+7', displayName: 'Bangkok, Hanoi, Jakarta'},
+  {id: 26, name: 'UTC+8', displayName: 'Beijing, Hong Kong, Singapore, Taipei'},
+  {id: 27, name: 'UTC+9', displayName: 'Osaka, Sapporo, Tokyo'},
+  {id: 28, name: 'UTC+9:30', displayName: 'Adelaide, Darwin'},
+  {id: 29, name: 'UTC+10', displayName: 'Brisbane, Canberra, Melbourne, Sydney'},
+  {id: 30, name: 'UTC+11', displayName: 'Solomon Is., New Caledonia'},
+  {id: 31, name: 'UTC+12', displayName: 'Auckland, Wellington'},
+  {id: 32, name: 'UTC+13', displayName: 'Nuku alofa'}
+]);
+
+const settingsStore = useSettingsStore()
+</script>
+
+<template>
+  <div>
+    <HeadlessListbox
+        v-model="settingsStore.timeZones"
+        as="div"
+        class="relative flex items-center"
+    >
+      <HeadlessListboxLabel class="sr-only">
+        Theme
+      </HeadlessListboxLabel>
+      <HeadlessListboxButton type="button" title="Change Color">
+        <div
+            class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+        >
+          <Icon name="ri:time-zone-line" class=" text-lg dark:text-white"/>
+        </div>
+      </HeadlessListboxButton>
+      <HeadlessListboxOptions
+          class="absolute top-full right-0 z-[999] mt-2 w-40 max-h-60 overflow-y-auto rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
+      >
+        <HeadlessListboxOption
+            v-for="item in availableTimeZones"
+            :key="item.id"
+            :value="item.name"
+            class="flex w-full cursor-pointer items-center justify-between py-2 px-3 hover:bg-gray-100 dark:hover:bg-gray-600"
+            :class="{
+            'text-white-500 bg-gray-200 dark:bg-gray-500/50':
+              settingsStore.timeZones === item.name,
+            'hover:bg-gray-200 dark:hover:bg-gray-700/30':
+              settingsStore.timeZones !== item.name,
+          }"
+        >
+    <span class="truncate">
+      {{ item.name }}
+    </span>
+          <span class="flex items-center justify-center text-sm">
+    </span>
+        </HeadlessListboxOption>
+      </HeadlessListboxOptions>
+    </HeadlessListbox>
+  </div>
+</template>