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

70
src/pages/agents/components/ProvidersSettings.vue
View File

@@ -2,8 +2,8 @@
<div class="space-y-6">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-medium text-[#171717]">{{ t('models.aiProviders.title', 'AI Providers') }}</h3>
<p class="text-sm text-[#99A0AE] mt-1">{{ t('models.aiProviders.subtitle', 'Manage your AI models and API keys.') }}</p>
<h3 class="text-lg font-medium text-[#171717] dark:text-[#f3f4f6]">{{ t('models.aiProviders.title', 'AI Providers') }}</h3>
<p class="text-sm text-[#99A0AE] dark:text-gray-500 mt-1">{{ t('models.aiProviders.subtitle', 'Manage your AI models and API keys.') }}</p>
</div>
<el-button type="primary" @click="showAddDialog = true">
<el-icon class="mr-1"><Plus /></el-icon>
@@ -12,7 +12,7 @@
</div>
<!-- Provider List -->
<div v-if="loading" class="py-8 text-center text-[#99A0AE]">
<div v-if="loading" class="py-8 text-center text-[#99A0AE] dark:text-gray-500">
<el-icon class="is-loading text-2xl"><Loading /></el-icon>
</div>
@@ -20,19 +20,19 @@
<el-card v-for="item in displayProviders" :key="item.account.id" shadow="hover" class="provider-card">
<div class="flex items-start justify-between">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-xl overflow-hidden border border-gray-200">
<div class="w-10 h-10 rounded-full bg-gray-100 dark:bg-[#222225] flex items-center justify-center text-xl overflow-hidden border border-gray-200 dark:border-[#2a2a2d]">
{{ item.vendor?.icon || '🤖' }}
</div>
<div>
<div class="flex items-center gap-2">
<span class="font-medium text-[16px] text-[#171717]">{{ item.account.label || item.vendor?.name }}</span>
<span class="font-medium text-[16px] text-[#171717] dark:text-[#f3f4f6]">{{ item.account.label || item.vendor?.name }}</span>
<el-tag size="small" :type="item.account.isDefault ? 'success' : 'info'" v-if="item.account.isDefault">
{{ t('models.aiProviders.default', 'Default') }}
</el-tag>
</div>
<div class="text-sm text-[#99A0AE] mt-1 flex items-center gap-2">
<div class="text-sm text-[#99A0AE] dark:text-gray-500 mt-1 flex items-center gap-2">
<span v-if="item.account.baseUrl" class="truncate max-w-[200px]">{{ item.account.baseUrl }}</span>
<span v-if="item.account.model" class="truncate max-w-[150px] bg-gray-100 px-2 py-0.5 rounded text-xs">{{ item.account.model }}</span>
<span v-if="item.account.model" class="truncate max-w-[150px] bg-gray-100 dark:bg-[#222225] px-2 py-0.5 rounded text-xs">{{ item.account.model }}</span>
<span v-if="item.status?.hasKey" class="text-green-600 text-xs flex items-center">
<el-icon class="mr-1"><Check /></el-icon> {{ t('models.aiProviders.configured', 'Configured') }}
</span>
@@ -61,7 +61,7 @@
</div>
</el-card>
<div v-if="displayProviders.length === 0" class="text-center py-12 border border-dashed border-gray-300 rounded-lg text-gray-500">
<div v-if="displayProviders.length === 0" class="text-center py-12 border border-dashed border-gray-300 dark:border-[#2a2a2d] rounded-lg text-gray-500 dark:text-gray-400">
{{ t('models.aiProviders.empty', 'No providers configured yet. Click "Add Provider" to start.') }}
</div>
</div>
@@ -76,27 +76,27 @@
<div class="p-[30px] pb-[20px]">
<div class="flex justify-between items-start mb-[24px]">
<div>
<h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
<h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
{{ editingItem?.account.id.includes('-') ? t('models.aiProviders.addProvider', '添加 AI 提供商') : t('models.aiProviders.editProvider', '编辑提供商') }}
</h2>
<p class="text-[14px] text-[#99A0AE]">
<p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
配置新的 AI 模型提供商
</p>
</div>
<button @click="editDialogVisible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
<button @click="editDialogVisible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
<el-icon class="text-[20px]"><Close /></el-icon>
</button>
</div>
<div class="bg-white rounded-[16px] p-[20px] flex items-center gap-[16px] mb-[24px] shadow-sm">
<div class="w-[48px] h-[48px] rounded-[14px] bg-[#F4F3EB] flex items-center justify-center text-[24px] overflow-hidden">
<div class="bg-white dark:bg-[#1f1f22] rounded-[16px] p-[20px] flex items-center gap-[16px] mb-[24px] shadow-sm">
<div class="w-[48px] h-[48px] rounded-[14px] bg-[#F4F3EB] dark:bg-[#222225] flex items-center justify-center text-[24px] overflow-hidden">
{{ editingItem?.vendor?.icon || '🤖' }}
</div>
<div class="flex flex-col">
<span class="text-[16px] font-medium text-[#171717] mb-[4px]">{{ editingItem?.vendor?.name }}</span>
<div class="flex items-center text-[13px] text-[#007AFF]">
<span class="text-[16px] font-medium text-[#171717] dark:text-[#f3f4f6] mb-[4px]">{{ editingItem?.vendor?.name }}</span>
<div class="flex items-center text-[13px] text-[#007AFF] dark:text-blue-400">
<a href="javascript:void(0)" @click="showAddDialog = true; editDialogVisible = false" class="hover:underline">更换提供商</a>
<span class="mx-[8px] text-[#E5E8EE]">|</span>
<span class="mx-[8px] text-[#E5E8EE] dark:text-[#2a2a2d]">|</span>
<a v-if="editingItem?.vendor?.docsUrl" :href="editingItem.vendor.docsUrl" target="_blank" class="hover:underline flex items-center gap-[4px]">
查看文档
<el-icon class="text-[12px]"><TopRight /></el-icon>
@@ -137,7 +137,7 @@
</template>
</el-form>
<div class="h-[1px] bg-[rgba(0,0,0,0.05)] w-full my-[24px]"></div>
<div class="h-[1px] bg-[rgba(0,0,0,0.05)] dark:bg-[rgba(255,255,255,0.08)] w-full my-[24px]"></div>
<div class="flex justify-end">
<el-button type="primary" @click="saveEdit" :loading="saving" class="h-[40px] px-[24px] rounded-[20px] bg-[#007AFF] hover:bg-[#0066FF] border-none text-[14px] font-medium">
@@ -157,29 +157,29 @@
<div class="p-[30px]">
<div class="flex justify-between items-start mb-[30px]">
<div>
<h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
<h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] mb-[8px] font-normal tracking-tight">
{{ t('models.aiProviders.addProvider', 'Add AI Provider') }}
</h2>
<p class="text-[14px] text-[#99A0AE]">
<p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
配置新的 AI 模型提供商
</p>
</div>
<button @click="showAddDialog = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
<button @click="showAddDialog = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
<el-icon class="text-[20px]"><Close /></el-icon>
</button>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-[16px]">
<div
v-for="provider in availableProviders"
<div
v-for="provider in availableProviders"
:key="provider.id"
@click="selectNewProvider(provider)"
class="cursor-pointer border border-[rgba(0,0,0,0.05)] rounded-[16px] p-[20px] flex flex-col items-center justify-center gap-[12px] bg-[rgba(255,255,255,0.4)] hover:bg-[rgba(255,255,255,0.8)] transition-all duration-200"
class="cursor-pointer border border-[rgba(0,0,0,0.05)] dark:border-[rgba(255,255,255,0.08)] rounded-[16px] p-[20px] flex flex-col items-center justify-center gap-[12px] bg-[rgba(255,255,255,0.4)] dark:bg-[#1f1f22] hover:bg-[rgba(255,255,255,0.8)] dark:hover:bg-[#2a2a2d] transition-all duration-200"
>
<div class="w-[48px] h-[48px] rounded-[14px] bg-[rgba(0,0,0,0.05)] flex items-center justify-center text-[24px] overflow-hidden">
<div class="w-[48px] h-[48px] rounded-[14px] bg-[rgba(0,0,0,0.05)] dark:bg-[#222225] flex items-center justify-center text-[24px] overflow-hidden">
{{ provider.icon || '🤖' }}
</div>
<span class="text-[14px] font-medium text-[#171717] text-center">{{ provider.name }}</span>
<span class="text-[14px] font-medium text-[#171717] dark:text-[#f3f4f6] text-center">{{ provider.name }}</span>
</div>
</div>
</div>
@@ -372,6 +372,9 @@ const saveEdit = async () => {
background-color: #F4F3EB !important;
border-radius: 20px !important;
}
.dark .custom-provider-dialog {
background-color: #1f1f22 !important;
}
.custom-provider-dialog .el-dialog__header {
display: none !important;
}
@@ -384,6 +387,9 @@ const saveEdit = async () => {
padding-bottom: 8px !important;
font-size: 15px !important;
}
.dark .custom-form .el-form-item__label {
color: #f3f4f6 !important;
}
.custom-input .el-input__wrapper {
background-color: #F4F3EB !important;
border: 1px solid rgba(0,0,0,0.1) !important;
@@ -391,10 +397,24 @@ const saveEdit = async () => {
box-shadow: none !important;
padding: 10px 16px !important;
}
.dark .custom-input .el-input__wrapper {
background-color: #222225 !important;
border-color: rgba(255,255,255,0.1) !important;
}
.custom-input .el-input__wrapper:hover, .custom-input .el-input__wrapper.is-focus {
border-color: rgba(0,0,0,0.2) !important;
}
.dark .custom-input .el-input__wrapper:hover, .dark .custom-input .el-input__wrapper.is-focus {
border-color: rgba(255,255,255,0.2) !important;
}
.custom-input .el-input__inner {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
color: #171717 !important;
}
.dark .custom-input .el-input__inner {
color: #f3f4f6 !important;
}
.dark .custom-input .el-input__inner::placeholder {
color: #9ca3af !important;
}
</style>