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

4
src/pages/skills/components/EnvVarManager.vue
View File

@@ -2,7 +2,7 @@
<div class="space-y-3">
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
<h3 class="text-[13px] font-bold text-[#171717]/80">
<h3 class="text-[13px] font-bold text-[#171717]/80 dark:text-gray-300">
{{ t('skills.detail.envVars') }}
<el-tag v-if="modelValue.length > 0" type="info" class="ml-2 !h-5 !px-1.5 !text-[10px]">
{{ modelValue.length }}
@@ -21,7 +21,7 @@
</div>
<div class="space-y-2">
<div v-if="modelValue.length === 0" class="text-[13px] text-[#525866] font-medium italic flex items-center bg-[#eeece3] border border-black/5 rounded-xl px-4 py-3 shadow-sm">
<div v-if="modelValue.length === 0" class="text-[13px] text-[#525866] dark:text-gray-400 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#222225] border border-black/5 dark:border-gray-700 rounded-xl px-4 py-3 shadow-sm">
{{ t('skills.detail.noEnvVars', 'No environment variables configured.') }}
</div>

34
src/pages/skills/components/MarketplaceDrawer.vue
View File

@@ -7,24 +7,24 @@
:with-header="false"
class="marketplace-drawer"
>
<div class="flex flex-col h-full bg-[#f3f1e9]">
<div class="px-7 py-6 border-b border-black/10">
<h2 class="text-[24px] font-serif text-[#171717] font-normal tracking-tight">{{ t('skills.marketplace.installDialogTitle') }}</h2>
<p class="mt-1 text-[13px] text-[#171717]/70">{{ t('skills.marketplace.installDialogSubtitle') }}</p>
<div class="flex flex-col h-full bg-[#f3f1e9] dark:bg-[#1b1b1d]">
<div class="px-7 py-6 border-b border-black/10 dark:border-gray-700">
<h2 class="text-[24px] font-serif text-[#171717] dark:text-[#f3f4f6] font-normal tracking-tight">{{ t('skills.marketplace.installDialogTitle') }}</h2>
<p class="mt-1 text-[13px] text-[#171717]/70 dark:text-gray-400">{{ t('skills.marketplace.installDialogSubtitle') }}</p>
<div class="mt-4 flex flex-col md:flex-row gap-2">
<div class="relative flex items-center bg-black/5 rounded-xl px-3 py-2 border border-black/10 flex-1">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866]" />
<div class="relative flex items-center bg-black/5 dark:bg-[#222225] rounded-xl px-3 py-2 border border-black/10 dark:border-gray-700 flex-1">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-500" />
<input
:value="query"
@input="$emit('update:query', ($event.target as HTMLInputElement).value)"
:placeholder="t('skills.searchMarketplace')"
class="ml-2 bg-transparent outline-none w-full font-normal placeholder:text-[#171717]/50 text-[13px] text-[#171717]"
class="ml-2 bg-transparent outline-none w-full font-normal placeholder:text-[#171717]/50 dark:placeholder:text-gray-500 text-[13px] text-[#171717] dark:text-[#f3f4f6]"
/>
<button v-if="query" @click="$emit('update:query', '')" class="text-[#171717]/50 hover:text-[#171717] shrink-0 ml-1">
<button v-if="query" @click="$emit('update:query', '')" 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>
<el-button disabled class="!h-10 !rounded-xl !border-black/10 !bg-transparent !text-[#525866]">
<el-button disabled class="!h-10 !rounded-xl !border-black/10 dark:!border-gray-700 !bg-transparent !text-[#525866] dark:!text-gray-400">
{{ t('skills.marketplace.sourceLabel') }}: {{ t('skills.marketplace.sourceClawHub') }}
</el-button>
</div>
@@ -38,7 +38,7 @@
</span>
</div>
<div v-if="searching" class="flex flex-col items-center justify-center py-20 text-[#525866]">
<div v-if="searching" class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
<RiRefreshLine class="h-8 w-8 animate-spin mb-4" />
<p class="text-sm">{{ t('skills.marketplace.searching') }}</p>
</div>
@@ -47,25 +47,25 @@
<div
v-for="skill in searchResults"
:key="skill.slug"
class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 transition-colors cursor-pointer border-b border-black/5 last:border-0"
class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-[#2a2a2d] transition-colors cursor-pointer border-b border-black/5 dark:border-gray-700/50 last:border-0"
@click="handleOpenExternal(skill.slug)"
>
<div class="flex items-start gap-4 flex-1 overflow-hidden pr-4">
<div class="h-10 w-10 shrink-0 flex items-center justify-center text-xl bg-black/5 border border-black/5 rounded-xl overflow-hidden">
<div class="h-10 w-10 shrink-0 flex items-center justify-center text-xl bg-black/5 dark:bg-[#222225] border border-black/5 dark:border-gray-700 rounded-xl overflow-hidden">
📦
</div>
<div class="flex flex-col overflow-hidden">
<div class="flex items-center gap-2 mb-1">
<h3 class="text-[15px] font-semibold text-[#171717] truncate">{{ skill.name }}</h3>
<span v-if="skill.author" class="text-xs text-[#525866]">• {{ skill.author }}</span>
<h3 class="text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ skill.name }}</h3>
<span v-if="skill.author" class="text-xs text-[#525866] dark:text-gray-400">• {{ skill.author }}</span>
</div>
<p class="text-[13.5px] text-[#525866] line-clamp-1 pr-6 leading-relaxed">
<p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-1 pr-6 leading-relaxed">
{{ skill.description }}
</p>
</div>
</div>
<div class="flex items-center gap-4 shrink-0" @click.stop>
<span v-if="skill.version" class="text-[13px] font-mono text-[#525866] mr-2">
<span v-if="skill.version" class="text-[13px] font-mono text-[#525866] dark:text-gray-400 mr-2">
v{{ skill.version }}
</span>
<template v-if="isInstalled(skill)">
@@ -82,7 +82,7 @@
</div>
</div>
<div v-else class="flex flex-col items-center justify-center py-20 text-[#525866]">
<div v-else class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
<RiArchiveLine class="h-10 w-10 mb-4 opacity-50" />
<p>{{ query.trim() ? t('skills.marketplace.noResults') : t('skills.marketplace.emptyPrompt') }}</p>
</div>

32
src/pages/skills/components/SkillDetailDrawer.vue
View File

@@ -7,37 +7,37 @@
:with-header="false"
class="skill-detail-drawer"
>
<div v-if="skill" class="flex flex-col h-full bg-[#f3f1e9]">
<div v-if="skill" class="flex flex-col h-full bg-[#f3f1e9] dark:bg-[#1b1b1d]">
<div class="flex-1 overflow-y-auto px-8 py-10">
<div class="flex flex-col items-center mb-8">
<div class="w-16 h-16 flex items-center justify-center rounded-full bg-white border border-black/5 shrink-0 mb-4 relative shadow-sm">
<div class="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#222225] border border-black/5 dark:border-gray-700 shrink-0 mb-4 relative shadow-sm">
<span class="text-3xl">{{ skill.icon || '🔧' }}</span>
<div v-if="skill.isCore" class="absolute -bottom-1 -right-1 bg-[#f3f1e9] rounded-full p-1 shadow-sm border border-black/5">
<RiLockLine class="h-3 w-3 text-[#525866] shrink-0" />
<div v-if="skill.isCore" class="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1b1b1d] rounded-full p-1 shadow-sm border border-black/5 dark:border-gray-700">
<RiLockLine class="h-3 w-3 text-[#525866] dark:text-gray-400 shrink-0" />
</div>
</div>
<h2 class="text-[28px] font-serif text-[#171717] font-normal mb-3 text-center tracking-tight">
<h2 class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6] font-normal mb-3 text-center tracking-tight">
{{ skill.name }}
</h2>
<div class="flex items-center justify-center gap-2.5 mb-6 opacity-80">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px] !font-mono">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px] !font-mono">
v{{ skill.version || '1.0.0' }}
</el-tag>
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px]">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px]">
{{ skill.isCore ? t('skills.detail.coreSystem') : skill.isBundled ? t('skills.detail.bundled') : t('skills.detail.userInstalled') }}
</el-tag>
</div>
<p v-if="skill.description" class="text-[14px] text-[#171717]/70 font-medium leading-[1.6] text-center px-4">
<p v-if="skill.description" class="text-[14px] text-[#171717]/70 dark:text-gray-400 font-medium leading-[1.6] text-center px-4">
{{ skill.description }}
</p>
</div>
<div class="space-y-7 px-1">
<div class="space-y-2">
<h3 class="text-[13px] font-bold text-[#171717]/80">{{ t('skills.detail.source') }}</h3>
<h3 class="text-[13px] font-bold text-[#171717]/80 dark:text-gray-300">{{ t('skills.detail.source') }}</h3>
<div class="flex items-center gap-2 flex-wrap">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] !border-0 !text-[#171717]/70 !px-3 !py-0.5 !text-[11px]">
<el-tag type="info" effect="plain" class="!rounded-full !bg-black/[0.04] dark:!bg-white/[0.04] !border-0 !text-[#171717]/70 dark:!text-[#f3f4f6]/70 !px-3 !py-0.5 !text-[11px]">
{{ resolvedSource }}
</el-tag>
</div>
@@ -45,7 +45,7 @@
<el-input
:model-value="skill.baseDir || t('skills.detail.pathUnavailable')"
readonly
class="flex-1 !h-[38px] font-mono text-[12px] bg-[#eeece3] border-black/10 rounded-xl text-[#171717]/70"
class="flex-1 !h-[38px] font-mono text-[12px] bg-[#eeece3] dark:bg-[#222225] border-black/10 dark:border-gray-700 rounded-xl text-[#171717]/70 dark:text-gray-300"
/>
<el-button
class="!h-[38px] !w-[38px] !px-0"
@@ -67,7 +67,7 @@
</div>
<div v-if="!skill.isCore" class="space-y-2">
<h3 class="text-[13px] font-bold flex items-center gap-2 text-[#171717]/80">
<h3 class="text-[13px] font-bold flex items-center gap-2 text-[#171717]/80 dark:text-gray-300">
<RiKeyLine class="h-3.5 w-3.5 text-blue-500" />
{{ t('skills.detail.apiKey') }}
</h3>
@@ -78,7 +78,7 @@
show-password
class="!h-[44px]"
/>
<p class="text-[12px] text-[#171717]/50 mt-2 font-medium">
<p class="text-[12px] text-[#171717]/50 dark:text-gray-500 mt-2 font-medium">
{{ t('skills.detail.apiKeyDesc', 'The primary API key for this skill.') }}
</p>
</div>
@@ -86,11 +86,11 @@
<EnvVarManager v-if="!skill.isCore" v-model="envVars" />
<div v-if="skill.slug && !skill.isBundled && !skill.isCore" class="flex gap-2 justify-center pt-8">
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 !bg-transparent hover:!bg-black/5" @click="handleOpenClawhub">
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5" @click="handleOpenClawhub">
<RiGlobalLine class="h-3 w-3" />
ClawHub
</el-button>
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 !bg-transparent hover:!bg-black/5" @click="handleOpenEditor">
<el-button size="small" class="!h-[28px] !text-[11px] !font-medium !px-3 !gap-1.5 !rounded-full !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5" @click="handleOpenEditor">
<RiFileCodeLine class="h-3 w-3" />
{{ t('skills.detail.openManual') }}
</el-button>
@@ -110,7 +110,7 @@
<el-button
v-if="!skill.isCore"
class="flex-1 !h-[42px] !text-[13px] !rounded-full !font-semibold !border-black/20 hover:!bg-black/5"
class="flex-1 !h-[42px] !text-[13px] !rounded-full !font-semibold !border-black/20 dark:!border-gray-700 hover:!bg-black/5 dark:hover:!bg-white/5"
@click="handleSecondaryAction"
>
{{ secondaryLabel }}

18
src/pages/skills/components/SkillListItem.vue
View File

@@ -1,26 +1,26 @@
<template>
<div
class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 transition-colors cursor-pointer border-b border-black/5 last:border-0"
class="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-[#2a2a2d] transition-colors cursor-pointer border-b border-black/5 dark:border-gray-700/50 last:border-0"
@click="$emit('click')"
>
<div class="flex items-start gap-4 flex-1 overflow-hidden pr-4">
<div class="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 border border-black/5 rounded-xl overflow-hidden">
<div class="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 dark:bg-[#222225] border border-black/5 dark:border-gray-700 rounded-xl overflow-hidden">
{{ skill.icon || '🧩' }}
</div>
<div class="flex flex-col overflow-hidden min-w-0">
<div class="flex items-center gap-2 mb-1">
<h3 class="text-[15px] font-semibold text-[#171717] truncate">{{ skill.name }}</h3>
<RiLockLine v-if="skill.isCore" class="h-3 w-3 text-[#525866] shrink-0" />
<h3 class="text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ skill.name }}</h3>
<RiLockLine v-if="skill.isCore" class="h-3 w-3 text-[#525866] dark:text-gray-400 shrink-0" />
<RiPuzzleLine v-else-if="skill.isBundled" class="h-3 w-3 text-blue-500/70 shrink-0" />
<span v-if="skill.slug && skill.slug !== skill.name" class="text-[11px] font-mono px-1.5 py-0.5 rounded border border-black/10 text-[#525866] shrink-0">
<span v-if="skill.slug && skill.slug !== skill.name" class="text-[11px] font-mono px-1.5 py-0.5 rounded border border-black/10 dark:border-gray-700 text-[#525866] dark:text-gray-400 shrink-0">
{{ skill.slug }}
</span>
</div>
<p class="text-[13.5px] text-[#525866] line-clamp-1 pr-6 leading-relaxed">
<p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-1 pr-6 leading-relaxed">
{{ skill.description }}
</p>
<div class="mt-1 flex items-center gap-2 text-[11px] text-[#525866]/80">
<el-tag size="small" effect="plain" class="!rounded-full !bg-black/5 !border-0 !text-[#525866] !h-5 !px-1.5 !text-[10px]">
<div class="mt-1 flex items-center gap-2 text-[11px] text-[#525866]/80 dark:text-gray-500">
<el-tag size="small" effect="plain" class="!rounded-full !bg-black/5 dark:!bg-white/5 !border-0 !text-[#525866] dark:!text-gray-400 !h-5 !px-1.5 !text-[10px]">
{{ resolvedSource }}
</el-tag>
<span class="truncate font-mono">
@@ -30,7 +30,7 @@
</div>
</div>
<div class="flex items-center gap-6 shrink-0" @click.stop>
<span v-if="skill.version" class="text-[13px] font-mono text-[#525866]">
<span v-if="skill.version" class="text-[13px] font-mono text-[#525866] dark:text-gray-400">
v{{ skill.version }}
</span>
<el-switch

36
src/pages/skills/index.vue
View File

@@ -1,14 +1,14 @@
<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" style="font-family: Georgia, Cambria, 'Times New Roman', Times, serif">
<h1 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('skills.title') }}
</h1>
<p class="text-[17px] text-[#171717]/70 font-medium">
<p class="text-[17px] text-[#171717]/70 dark:text-gray-400 font-medium">
{{ t('skills.subtitle') }}
</p>
</div>
@@ -17,7 +17,7 @@
<button
v-if="hasInstalledSkills"
@click="handleOpenSkillsFolder"
class="hover:bg-black/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 flex items-center justify-center text-[#171717]/80 hover:text-[#171717]"
class="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 dark:border-gray-700 flex items-center justify-center text-[#171717]/80 dark:text-gray-300 hover:text-[#171717] dark:hover:text-[#f3f4f6]"
>
<RiFolderOpenLine class="h-4 w-4 mr-2" />
{{ t('skills.openFolder') }}
@@ -26,20 +26,20 @@
</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-[#222225] rounded-full px-3 py-1.5 focus-within:bg-black/10 dark:focus-within:bg-[#2a2a2d] transition-colors border border-transparent focus-within:border-black/10 dark:focus-within:border-gray-700 mr-2">
<RiSearchLine class="h-4 w-4 shrink-0 text-[#525866] dark:text-gray-500" />
<input
:placeholder="t('skills.search')"
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>
@@ -48,19 +48,19 @@
<div class="flex items-center gap-6">
<button
@click="selectedSource = 'all'"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'all' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'all' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
>
{{ t('skills.filter.all', { count: sourceStats.all }) }}
</button>
<button
@click="selectedSource = 'built-in'"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'built-in' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'built-in' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
>
{{ t('skills.filter.builtIn', { count: sourceStats.builtIn }) }}
</button>
<button
@click="selectedSource = 'marketplace'"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'marketplace' ? 'text-[#171717]' : 'text-[#525866] hover:text-[#171717]']"
:class="['font-medium transition-colors flex items-center gap-1.5', selectedSource === 'marketplace' ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#525866] dark:text-gray-400 hover:text-[#171717] dark:hover:text-[#f3f4f6]']"
>
{{ t('skills.filter.marketplace', { count: sourceStats.marketplace }) }}
</button>
@@ -71,28 +71,28 @@
<el-button
size="small"
@click="bulkToggleVisible(true)"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
>
{{ t('skills.actions.enableVisible') }}
</el-button>
<el-button
size="small"
@click="bulkToggleVisible(false)"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
>
{{ t('skills.actions.disableVisible') }}
</el-button>
<el-button
size="small"
@click="openMarketplace"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 !bg-transparent hover:!bg-black/5"
class="!h-8 !text-[13px] !font-medium !rounded-md !px-3 !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5"
>
{{ t('skills.actions.installSkill') }}
</el-button>
<el-button
size="small"
@click="store.fetchSkills()"
class="!h-8 !w-8 !ml-1 !rounded-md !border-black/10 !bg-transparent hover:!bg-black/5 !text-[#525866] hover:!text-[#171717]"
class="!h-8 !w-8 !ml-1 !rounded-md !border-black/10 dark:!border-gray-700 !bg-transparent hover:!bg-black/5 dark:hover:!bg-white/5 !text-[#525866] dark:!text-gray-400 hover:!text-[#171717] dark:hover:!text-[#f3f4f6]"
:title="t('skills.refresh')"
>
<RiRefreshLine :class="['h-4 w-4', store.loading && 'animate-spin']" />
@@ -109,14 +109,14 @@
</span>
</div>
<div v-if="store.loading && store.skills.length === 0" class="flex flex-col items-center justify-center h-full text-[#525866]">
<div v-if="store.loading && store.skills.length === 0" 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('skills.marketplace.searching') }}</p>
</div>
<div v-else class="flex flex-col gap-1">
<template v-if="filteredSkills.length === 0">
<div class="flex flex-col items-center justify-center py-20 text-[#525866]">
<div class="flex flex-col items-center justify-center py-20 text-[#525866] dark:text-gray-400">
<RiPuzzleLine class="h-10 w-10 mb-4 opacity-50" />
<p>{{ searchQuery ? t('skills.noSkillsSearch') : t('skills.noSkillsAvailable') }}</p>
</div>