jono/deep-research-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode

Browse Source
This commit is contained in:
AnotiaWang
2025-02-11 22:11:08 +08:00
parent 501e25d835
commit 066aafa9b2
6 changed files with 108 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app.vue
View File

@ -9,17 +9,23 @@
<script setup lang="ts">
import { zh_cn } from '@nuxt/ui/locale'
// const colorMode = useColorMode()
// TODO
useHead({
title: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具',
meta: [
{ name: 'description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。' },
{
name: 'description',
content:
'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。',
},
{ name: 'keywords', content: 'SiliconCloud, 数据分析, token 用量, API 分析, 控制台工具' },
// Open Graph tags
{ property: 'og:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
{ property: 'og:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。' },
{
property: 'og:description',
content:
'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。',
},
{ property: 'og:type', content: 'website' },
{ property: 'og:image', content: '/images/readme-showcase-total.webp' },
// Twitter Card tags
@ -36,14 +42,4 @@ useHead({
// },
// ],
})
// onMounted(() => {
// watchEffect(() => {
// if (colorMode.value === 'dark') {
// document.documentElement.setAttribute('theme-mode', 'dark')
// } else {
// document.documentElement.removeAttribute('theme-mode')
// }
// })
// })
</script>

8
assets/css/main.css
View File

@ -1,9 +1,9 @@
/* Don't do `@import "tailwindcss"`, do this instead: */
@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme) theme(static);
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);
@import 'tailwindcss/theme' layer(theme) theme(static);
@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/utilities' layer(utilities);
/* Then import "@nuxt/ui": */
@import "@nuxt/ui";
@import '@nuxt/ui';

11
components/ColorModeButton.vue
View File

@ -6,6 +6,7 @@
const preference = computed(() => {
// 默认为自动，会跟随用户的浏览器切换
if (colorMode.preference === 'system') {
if (preferredColor.value === 'no-preference') return 'dark'
return preferredColor.value
}
return colorMode.preference
@ -18,14 +19,6 @@
<template>
<div>
<UButton
:icon="
preference === 'dark'
? 'i-heroicons-sun-20-solid'
: 'i-heroicons-moon-20-solid'
"
color="primary"
@click="toggleColorMode"
/>
<UButton :icon="preference === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'" color="primary" @click="toggleColorMode" />
</div>
</template>

10
nuxt.config.ts
View File

@ -1,9 +1,19 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'@nuxt/ui',
'@nuxtjs/color-mode',
'@vueuse/nuxt',
],
colorMode: {
preference: 'system',
dataValue: 'theme',
classSuffix: '',
storage: 'cookie',
},
css: ['~/assets/css/main.css'],
compatibilityDate: '2024-11-01',
devtools: { enabled: true },

2
package.json
View File

@ -16,6 +16,8 @@
"@iconify-json/lucide": "^1.2.26",
"@mendable/firecrawl-js": "^1.16.0",
"@nuxt/ui": "3.0.0-alpha.12",
"@nuxtjs/color-mode": "^3.5.2",
"@pinia/nuxt": "^0.9.0",
"@tailwindcss/typography": "^0.5.16",
"@tavily/core": "^0.0.3",
"@types/lodash-es": "^4.17.12",

69
pnpm-lock.yaml generated
View File

@ -26,9 +26,15 @@ importers:
'@nuxt/ui':
specifier: 3.0.0-alpha.12
version: 3.0.0-alpha.12(@babel/parser@7.26.8)(axios@1.7.9)(change-case@5.4.4)(db0@0.2.3)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.13(vue@3.5.13(typescript@5.7.3)))(rollup@4.34.6)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.38.1)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
'@nuxtjs/color-mode':
specifier: ^3.5.2
version: 3.5.2(magicast@0.3.5)
'@pinia/nuxt':
specifier: ^0.9.0
version: 0.9.0(magicast@0.3.5)(pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))
'@tailwindcss/typography':
specifier: ^0.5.16
version: 0.5.16(tailwindcss@4.0.5)
version: 0.5.16(tailwindcss@4.0.6)
'@tavily/core':
specifier: ^0.0.3
version: 0.0.3
@ -58,7 +64,7 @@ importers:
version: 6.2.0
tailwindcss:
specifier: ^4.0.5
version: 4.0.5
version: 4.0.6
vue:
specifier: latest
version: 3.5.13(typescript@5.7.3)
@ -701,6 +707,11 @@ packages:
resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
engines: {node: '>= 10.0.0'}
'@pinia/nuxt@0.9.0':
resolution: {integrity: sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==}
peerDependencies:
pinia: ^2.3.0
'@pkgjs/parseargs@0.11.0':
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
@ -892,8 +903,8 @@ packages:
'@swc/helpers@0.5.15':
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
'@tailwindcss/node@4.0.5':
resolution: {integrity: sha512-ffTz4DX1cgr4XPuqjhm32YV6Lyx58R1CxAAnSFTamg6wXwfk3oWdb6exgAbGesPzvUgicTO0gwUdQGSsg4nNog==}
'@tailwindcss/node@4.0.4':
resolution: {integrity: sha512-VLFq80IyoV1hsHPcCm1mmlyPyUT6NlovQLoO2y7PGm84mW94ZrNJ7ax5H6K4M7Aj/fdMfem5IX7Ka+LXWZpDGg==}
'@tailwindcss/oxide-android-arm64@4.0.5':
resolution: {integrity: sha512-kK/ik8aIAKWDIEYDZGUCJcnU1qU5sPoMBlVzPvtsUqiV6cSHcnVRUdkcLwKqTeUowzZtjjRiamELLd9Gb0x5BQ==}
@ -2865,6 +2876,15 @@ packages:
resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
engines: {node: '>=12'}
pinia@2.3.1:
resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
peerDependencies:
typescript: '>=4.4.4'
vue: ^2.7.0 || ^3.5.11
peerDependenciesMeta:
typescript:
optional: true
pkg-types@1.3.1:
resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
@ -3428,8 +3448,11 @@ packages:
tailwindcss@4.0.0:
resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
tailwindcss@4.0.5:
resolution: {integrity: sha512-DZZIKX3tA23LGTjHdnwlJOTxfICD1cPeykLLsYF1RQBI9QsCR3i0szohJfJDVjr6aNRAIio5WVO7FGB77fRHwg==}
tailwindcss@4.0.4:
resolution: {integrity: sha512-/ezDLEkOLf1lXkr9F2iI5BHJbexJpty5zkV2B8bGHCqAdbc9vk85Jgdkq+ZOvNkNPa3yAaqJ8DjRt584Bc84kw==}
tailwindcss@4.0.6:
resolution: {integrity: sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw==}
tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@ -4927,6 +4950,14 @@ snapshots:
'@parcel/watcher-win32-ia32': 2.5.1
'@parcel/watcher-win32-x64': 2.5.1
'@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))':
dependencies:
'@nuxt/kit': 3.15.4(magicast@0.3.5)
pinia: 2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
transitivePeerDependencies:
- magicast
- supports-color
'@pkgjs/parseargs@0.11.0':
optional: true
@ -5081,11 +5112,11 @@ snapshots:
dependencies:
tslib: 2.8.1
'@tailwindcss/node@4.0.5':
'@tailwindcss/node@4.0.4':
dependencies:
enhanced-resolve: 5.18.1
jiti: 2.4.2
tailwindcss: 4.0.5
tailwindcss: 4.0.4
'@tailwindcss/oxide-android-arm64@4.0.5':
optional: true
@ -5137,23 +5168,23 @@ snapshots:
'@tailwindcss/postcss@4.0.0':
dependencies:
'@alloc/quick-lru': 5.2.0
'@tailwindcss/node': 4.0.5
'@tailwindcss/node': 4.0.4
'@tailwindcss/oxide': 4.0.5
lightningcss: 1.29.1
postcss: 8.5.1
tailwindcss: 4.0.0
'@tailwindcss/typography@0.5.16(tailwindcss@4.0.5)':
'@tailwindcss/typography@0.5.16(tailwindcss@4.0.6)':
dependencies:
lodash.castarray: 4.4.0
lodash.isplainobject: 4.0.6
lodash.merge: 4.6.2
postcss-selector-parser: 6.0.10
tailwindcss: 4.0.5
tailwindcss: 4.0.6
'@tailwindcss/vite@4.0.0(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.38.1)(yaml@2.7.0))':
dependencies:
'@tailwindcss/node': 4.0.5
'@tailwindcss/node': 4.0.4
'@tailwindcss/oxide': 4.0.5
lightningcss: 1.29.1
tailwindcss: 4.0.0
@ -7253,6 +7284,16 @@ snapshots:
picomatch@4.0.2: {}
pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
dependencies:
'@vue/devtools-api': 6.6.4
vue: 3.5.13(typescript@5.7.3)
vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
optionalDependencies:
typescript: 5.7.3
transitivePeerDependencies:
- '@vue/composition-api'
pkg-types@1.3.1:
dependencies:
confbox: 0.1.8
@ -7850,7 +7891,9 @@ snapshots:
tailwindcss@4.0.0: {}
tailwindcss@4.0.5: {}
tailwindcss@4.0.4: {}
tailwindcss@4.0.6: {}
tapable@2.2.1: {}