duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance dark mode support across various components

Browse Source 
- Updated styles in AccountSetting, SystemConfig, Version, and other components to improve dark mode visibility.
- Added dark mode classes for text and background colors to ensure better contrast and readability.
- Modified CSS variables in dark.css for consistent theming.
- Improved accessibility by ensuring all text elements are legible in dark mode.
This commit is contained in:
duanshuwen
2026-04-15 21:17:08 +08:00
parent 43801ba51b
commit 364db041eb
62 changed files with 650 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/scripts/index.vue
View File

@@ -1,17 +1,17 @@
<template>
<layout>
<div class="bg-white box-border w-full h-full flex rounded-[16px] overflow-hidden">
<div class="bg-white dark:bg-[#1b1b1d] box-border w-full h-full flex rounded-[16px] overflow-hidden">
<div class="w-full flex flex-col h-full p-10 pt-12">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
<div>
<h1
class="text-5xl md:text-6xl font-serif text-[#171717] mb-3 font-normal tracking-tight"
class="text-5xl md:text-6xl font-serif text-[#171717] dark:text-[#f3f4f6] mb-3 font-normal tracking-tight"
style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif"
>
{{ t('script.title') }}
</h1>
<p class="text-[17px] text-[#171717]/70 font-medium">
<p class="text-[17px] text-[#171717]/70 dark:text-[#9ca3af] font-medium">
{{ t('script.subtitle') }}
</p>
</div>
@@ -19,33 +19,33 @@
</div>
<!-- Sub Navigation and Actions -->
<div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 pb-4 mb-4 shrink-0 gap-4">
<div class="flex flex-col md:flex-row md:items-center justify-between border-b border-black/10 dark:border-gray-700 pb-4 mb-4 shrink-0 gap-4">
<div class="flex items-center flex-wrap gap-4 text-[14px]">
<div class="relative group flex items-center bg-black/5 rounded-full px-3 py-1.5 focus-within:bg-black/10 transition-colors border border-transparent focus-within:border-black/10 mr-2">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866]" />
<div class="relative group flex items-center bg-black/5 dark:bg-white/5 rounded-full px-3 py-1.5 focus-within:bg-black/10 dark:focus-within:bg-white/10 transition-colors border border-transparent focus-within:border-black/10 dark:focus-within:border-white/10 mr-2">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-400" />
<input
:placeholder="t('script.search', 'Search scripts...')"
v-model="searchQuery"
class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 text-[13px] text-[#171717]"
class="ml-2 bg-transparent outline-none w-28 md:w-40 font-normal placeholder:text-[#171717]/50 dark:placeholder:text-gray-500 text-[13px] text-[#171717] dark:text-[#f3f4f6]"
/>
<button
v-if="searchQuery"
type="button"
@click="searchQuery = ''"
class="text-[#171717]/50 hover:text-[#171717] shrink-0 ml-1"
class="text-[#171717]/50 dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] shrink-0 ml-1"
>
<RiCloseLine class="h-3.5 w-3.5" />
</button>
</div>
<div class="flex items-center gap-4">
<span class="font-medium text-[#171717]">
<span class="font-medium text-[#171717] dark:text-[#f3f4f6]">
{{ t('script.stats.total', 'Total') }} {{ store.safeScripts.length }}
</span>
<span class="text-[#525866]">
<span class="text-[#525866] dark:text-gray-400">
{{ t('script.stats.active', 'Active') }} {{ store.enabledScripts.length }}
</span>
<span class="text-[#525866]">
<span class="text-[#525866] dark:text-gray-400">
{{ t('script.stats.failed', 'Failed') }} {{ store.safeScripts.filter((s) => s.lastRun && !s.lastRun.success).length }}
</span>
</div>
@@ -54,14 +54,14 @@
<div class="flex items-center gap-2 shrink-0">
<button
@click="openCreateDialog"
class="shrink-0 text-[13px] font-medium px-4 h-8 rounded-md border border-black/10 bg-transparent hover:bg-black/5 text-[#171717]/80 hover:text-[#171717] flex items-center justify-center transition-colors"
class="shrink-0 text-[13px] font-medium px-4 h-8 rounded-md border border-black/10 dark:border-gray-700 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-[#171717]/80 dark:text-[#f3f4f6]/80 hover:text-[#171717] dark:hover:text-[#f3f4f6] flex items-center justify-center transition-colors"
>
<RiAddLine class="h-4 w-4 mr-2" />
{{ t('script.newScript') }}
</button>
<button
@click="store.fetchScripts()"
class="shrink-0 text-[13px] font-medium h-8 w-8 rounded-md border border-black/10 bg-transparent hover:bg-black/5 text-[#525866] hover:text-[#171717] flex items-center justify-center transition-colors"
class="shrink-0 text-[13px] font-medium h-8 w-8 rounded-md border border-black/10 dark:border-gray-700 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6] flex items-center justify-center transition-colors"
:title="t('script.refresh')"
>
<RiRefreshLine :class="['h-4 w-4', store.loading && 'animate-spin']" />
@@ -83,7 +83,7 @@
<!-- Loading -->
<div
v-if="store.loading && store.safeScripts.length === 0"
class="flex flex-col items-center justify-center h-full text-[#525866]"
class="flex flex-col items-center justify-center h-full text-[#525866] dark:text-gray-400"
>
<RiRefreshLine class="h-10 w-10 animate-spin mb-4" />
<p>{{ t('common.loading', 'Loading...') }}</p>
@@ -91,9 +91,9 @@
<template v-else>
<!-- Scripts List -->
<div v-if="filteredScripts.length === 0" class="flex flex-col items-center justify-center py-20 text-[#525866]">
<div v-if="filteredScripts.length === 0" class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
<RiCodeLine class="h-10 w-10 mb-4 opacity-50" />
<h3 class="text-lg font-medium mb-2 text-[#171717]">{{ t('script.empty.title') }}</h3>
<h3 class="text-lg font-medium mb-2 text-[#171717] dark:text-[#f3f4f6]">{{ t('script.empty.title') }}</h3>
<p class="text-[14px] text-center mb-6 max-w-md">
{{ t('script.empty.description') }}
</p>