🚩 完善日夜模式
This commit is contained in:
7836246
parent
de0ec3536a
commit
9df9436c56
1
app.vue
1
app.vue
@ -23,6 +23,7 @@ import {naiveThemeOverrides} from "~/settings/settings";
|
|||||||
|
|
||||||
const colorMode = useColorMode()
|
const colorMode = useColorMode()
|
||||||
const themeOverrides = naiveThemeOverrides
|
const themeOverrides = naiveThemeOverrides
|
||||||
|
|
||||||
const theme = computed(() => {
|
const theme = computed(() => {
|
||||||
return colorMode.value === 'system' ? (colorMode.value ? lightTheme : darkTheme) : colorMode.value === 'light' ? lightTheme : darkTheme
|
return colorMode.value === 'system' ? (colorMode.value ? lightTheme : darkTheme) : colorMode.value === 'light' ? lightTheme : darkTheme
|
||||||
})
|
})
|
||||||
|
|||||||
3
assets/css/main.css
Normal file
3
assets/css/main.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
@ -10,10 +10,10 @@ const {t} = useI18n()
|
|||||||
<div>
|
<div>
|
||||||
<div title="Change Color">
|
<div title="Change Color">
|
||||||
<div
|
<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"
|
@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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -26,57 +26,60 @@ const {t} = useI18n()
|
|||||||
|
|
||||||
<NDrawerContent
|
<NDrawerContent
|
||||||
:title="t('history.title')"
|
: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
|
closable
|
||||||
>
|
>
|
||||||
<div class="max-w-6xl mx-auto">
|
<div class="max-w-6xl mx-auto">
|
||||||
<h1 class="text-2xl font-bold text-gray-800 mb-5 flex items-center justify-between">
|
<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">
|
<span
|
||||||
{{ t('history.tips', { length: styleStore.getHistory.length }) }}
|
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>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="bg-white shadow-md rounded-lg">
|
<div class=" shadow-md rounded-lg ">
|
||||||
<!-- 条件渲染，如果有历史记录则显示表格，否则显示提示 -->
|
<!-- 条件渲染，如果有历史记录则显示表格，否则显示提示 -->
|
||||||
<div v-if="styleStore.getHistory.length">
|
<div v-if="styleStore.getHistory.length">
|
||||||
<!-- 表格头部和内容 -->
|
<!-- 表格头部和内容 -->
|
||||||
<table class="min-w-full leading-normal">
|
<table class="min-w-full leading-normal ">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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">
|
<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') }}
|
{{ t('history.domain') }}
|
||||||
</th>
|
</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">
|
<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') }}
|
{{ t('history.type') }}
|
||||||
</th>
|
</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">
|
<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') }}
|
{{ t('history.time') }}
|
||||||
</th>
|
</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">
|
<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') }}
|
{{ t('history.actions') }}
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<!-- 这里将使用循环来动态展示查询历史 -->
|
<!-- 这里将使用循环来动态展示查询历史 -->
|
||||||
<tr v-for="item in styleStore.getHistory" :key="item.id" class="border-b border-gray-200">
|
<tr v-for="item in styleStore.getHistory" :key="item.id"
|
||||||
<td class="px-5 py-5 text-sm bg-white">
|
class="border-b border-gray-200 dark:text-white dark:bg-[#000000FF]">
|
||||||
<NuxtLink :to="item.path">{{ item.domain }}</NuxtLink>
|
<td class="px-5 py-5 text-sm ">
|
||||||
</td>
|
<NuxtLink :to="item.path">{{ item.domain }}</NuxtLink>
|
||||||
<td class="px-5 py-5 text-sm bg-white">
|
</td>
|
||||||
{{ item.type }}
|
<td class="px-5 py-5 text-sm ">
|
||||||
</td>
|
{{ item.type }}
|
||||||
<td class="px-5 py-5 text-sm bg-white">
|
</td>
|
||||||
{{ item.date }}
|
<td class="px-5 py-5 text-sm ">
|
||||||
</td>
|
{{ item.date }}
|
||||||
<td class="px-5 py-5 text-sm bg-white">
|
</td>
|
||||||
<NButton
|
<td class="px-5 py-5 text-sm ">
|
||||||
@click="styleStore.deleteHistory(item.id)"
|
<NButton
|
||||||
|
@click="styleStore.deleteHistory(item.id)"
|
||||||
|
|
||||||
>{{t('common.actions.delete')}}</NButton>
|
>{{ t('common.actions.delete') }}
|
||||||
</td>
|
</NButton>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="text-center py-5">
|
<div v-else class="text-center py-5">
|
||||||
<p class="text-gray-500">{{ t('history.empty') }}</p>
|
<p class="text-gray-500">{{ t('history.empty') }}</p>
|
||||||
|
|||||||
@ -19,6 +19,9 @@ export default defineNuxtConfig({
|
|||||||
features: {
|
features: {
|
||||||
inlineStyles: true,
|
inlineStyles: true,
|
||||||
},
|
},
|
||||||
|
css: [
|
||||||
|
'~/assets/css/main.css',
|
||||||
|
],
|
||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
public: {
|
public: {
|
||||||
Domain: process.env.WebSiteDomain || 'Nuxt Whois',
|
Domain: process.env.WebSiteDomain || 'Nuxt Whois',
|
||||||
@ -53,9 +56,7 @@ export default defineNuxtConfig({
|
|||||||
headlessui: {
|
headlessui: {
|
||||||
prefix: 'Headless'
|
prefix: 'Headless'
|
||||||
},
|
},
|
||||||
naiveui: {
|
naiveui: {},
|
||||||
colorModePreference: "light",
|
|
||||||
},
|
|
||||||
colorMode: {
|
colorMode: {
|
||||||
classSuffix: '',
|
classSuffix: '',
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
export default defineNuxtPlugin((nuxtApp) => {
|
|
||||||
const colorMode = useColorMode()
|
|
||||||
|
|
||||||
// 页面加载完毕,如果是暗色模式则重新加载,见: https://github.com/tusen-ai/naive-ui/issues/3765#issuecomment-1283356344
|
|
||||||
nuxtApp.hook('page:finish', () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
colorMode.value = 'light'
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
colorMode.value = colorMode.preference
|
|
||||||
}, 0)
|
|
||||||
}, 0)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
Loading…
x
Reference in New Issue
Block a user