chunzhi/whois
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🚩 完善日夜模式

Browse Source
This commit is contained in:
7836246
2024-03-26 11:20:29 +08:00
parent de0ec3536a
commit 9df9436c56
5 changed files with 55 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/History.vue
+47 -44
View File
@@ -10,10 +10,10 @@ const {t} = useI18n()
<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"
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" />
<Icon name="ic:baseline-history" class=" text-lg dark:text-white"/>
</div>
</div>
@@ -26,57 +26,60 @@ const {t} = useI18n()
<NDrawerContent
:title="t('history.title')"
class="w-full min-h-screen bg-gray-100 overflow-y-auto"
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 bg-gray-100 py-1 px-3 rounded-full">
{{ t('history.tips', { length: styleStore.getHistory.length }) }}
<span
class="text-sm text-gray-500 py-1 px-3 rounded-full dark:text-white dark:bg-[#000000FF]">
{{ t('history.tips', {length: styleStore.getHistory.length}) }}
</span>
</h1>
<div class="bg-white shadow-md rounded-lg">
<div class=" shadow-md rounded-lg ">
<!-- 条件渲染，如果有历史记录则显示表格，否则显示提示 -->
<div v-if="styleStore.getHistory.length">
<!-- 表格头部和内容 -->
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 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 bg-gray-100 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 bg-gray-100 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 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
{{ t('history.actions') }}
</th>
</tr>
</thead>
<tbody>
<!-- 这里将使用循环来动态展示查询历史 -->
<tr v-for="item in styleStore.getHistory" :key="item.id" class="border-b border-gray-200">
<td class="px-5 py-5 text-sm bg-white">
<NuxtLink :to="item.path">{{ item.domain }}</NuxtLink>
</td>
<td class="px-5 py-5 text-sm bg-white">
{{ item.type }}
</td>
<td class="px-5 py-5 text-sm bg-white">
{{ item.date }}
</td>
<td class="px-5 py-5 text-sm bg-white">
<NButton
@click="styleStore.deleteHistory(item.id)"
<!-- 表格头部和内容 -->
<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 styleStore.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="styleStore.deleteHistory(item.id)"
>{{t('common.actions.delete')}}</NButton>
</td>
</tr>
</tbody>
</table>
>{{ 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>