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

20
src/pages/scripts/components/ScriptCard.vue
View File

@@ -1,24 +1,24 @@
<template>
<div
class="group flex flex-col p-5 rounded-2xl bg-white border border-black/[0.08] hover:border-black/[0.12] hover:bg-black/[0.03] transition-all relative overflow-hidden"
class="group flex flex-col p-5 rounded-2xl bg-white dark:bg-[#1f1f22] border border-black/[0.08] dark:border-[#2a2a2d] hover:border-black/[0.12] dark:hover:border-gray-700 hover:bg-black/[0.03] dark:hover:bg-[#2a2a2d] transition-all relative overflow-hidden"
>
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-4">
<div class="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-[#171717] bg-black/5 border border-black/5 rounded-full shadow-sm group-hover:scale-105 transition-transform">
<RiCodeLine :class="['h-5 w-5', script.enabled ? 'text-[#171717]' : 'text-[#99A0AE]']" />
<div class="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-[#171717] dark:text-[#f3f4f6] bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 rounded-full shadow-sm group-hover:scale-105 transition-transform">
<RiCodeLine :class="['h-5 w-5', script.enabled ? 'text-[#171717] dark:text-[#f3f4f6]' : 'text-[#99A0AE] dark:text-gray-500']" />
</div>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-2 mb-1">
<h3 class="text-[16px] font-semibold text-[#171717] truncate">{{ script.name }}</h3>
<h3 class="text-[16px] font-semibold text-[#171717] dark:text-[#f3f4f6] truncate">{{ script.name }}</h3>
<div
:class="[
'w-2 h-2 rounded-full shrink-0',
script.enabled ? 'bg-green-500' : 'bg-[#99A0AE]'
script.enabled ? 'bg-green-500' : 'bg-[#99A0AE] dark:bg-gray-500'
]"
:title="script.enabled ? t('script.stats.active') : t('script.stats.total')"
/>
</div>
<p v-if="props.script.channel && props.script.channel !== 'common'" class="text-[13px] text-[#525866] flex items-center gap-1.5">
<p v-if="props.script.channel && props.script.channel !== 'common'" class="text-[13px] text-[#525866] dark:text-gray-400 flex items-center gap-1.5">
<RiMapPinLine class="h-3.5 w-3.5" />
{{ channelLabel }}
</p>
@@ -35,14 +35,14 @@
<div class="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
<div class="flex items-start gap-2 mb-3">
<RiFileTextLine class="h-3.5 w-3.5 mt-0.5 text-[#99A0AE] shrink-0" />
<p class="text-[13.5px] text-[#525866] line-clamp-2 leading-[1.5]">
<RiFileTextLine class="h-3.5 w-3.5 mt-0.5 text-[#99A0AE] dark:text-gray-500 shrink-0" />
<p class="text-[13.5px] text-[#525866] dark:text-gray-400 line-clamp-2 leading-[1.5]">
{{ script.description || t('script.dialog.descriptionPlaceholder') }}
</p>
</div>
<!-- Metadata -->
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-[#99A0AE] font-medium mb-3">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-[#99A0AE] dark:text-gray-500 font-medium mb-3">
<span v-if="script.lastRun" class="flex items-center gap-1.5">
<RiHistoryLine class="h-3.5 w-3.5" />
{{ t('script.card.last') }}: {{ formatRelativeTime(script.lastRun.time) }}
@@ -56,7 +56,7 @@
<div
:class="[
'p-2.5 rounded-xl text-[12px] font-mono overflow-y-auto max-h-[120px] border',
executionLog.success ? 'bg-green-500/5 border-green-500/20 text-green-700' : 'bg-red-500/10 border-red-500/20 text-red-600'
executionLog.success ? 'bg-green-500/5 border-green-500/20 text-green-700 dark:text-green-400' : 'bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400'
]"
>
<pre class="whitespace-pre-wrap break-all">{{ executionLog.stdoutTail || executionLog.stderrTail || executionLog.error || '-' }}</pre>

47
src/pages/scripts/components/ScriptCreateDialog.vue
View File

@@ -8,16 +8,16 @@
>
<!-- Header -->
<template #header>
<div class="sticky top-0 z-10 bg-[#F4F3EB] flex justify-between items-start">
<div class="sticky top-0 z-10 bg-[#F4F3EB] dark:bg-[#1f1f22] flex justify-between items-start">
<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('script.dialog.createTitle') }}
</h2>
<p class="text-[14px] text-[#99A0AE]">
<p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
{{ t('script.dialog.description') }}
</p>
</div>
<button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
<button @click="visible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
<el-icon class="text-[20px] cursor-pointer"><Close /></el-icon>
</button>
</div>
@@ -27,7 +27,7 @@
<div class="px-[30px] pb-[30px] pt-[30px] space-y-6">
<!-- Name -->
<div class="space-y-2.5">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.name') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.name') }}</label>
<el-input
v-model="form.name"
:placeholder="t('script.dialog.namePlaceholder')"
@@ -37,7 +37,7 @@
<!-- Description -->
<div class="space-y-2.5">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
<el-input
v-model="form.description"
type="textarea"
@@ -49,7 +49,7 @@
<!-- Channel -->
<div class="space-y-2.5">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.channel') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.channel') }}</label>
<el-input
v-model="form.channel"
:placeholder="t('script.dialog.channel')"
@@ -169,6 +169,9 @@ function handleClosed() {
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}
.dark .custom-script-dialog {
background-color: #1f1f22 !important;
}
.custom-script-dialog .el-dialog__body {
padding: 0 !important;
max-height: calc(100vh - 360px);
@@ -181,6 +184,9 @@ function handleClosed() {
background-color: #D1CFC7;
border-radius: 3px;
}
.dark .custom-script-dialog .el-dialog__body::-webkit-scrollbar-thumb {
background-color: #2a2a2d;
}
/* Input / Textarea styling */
.custom-script-dialog .el-input__wrapper,
@@ -191,22 +197,41 @@ function handleClosed() {
border: 1px solid transparent !important;
color: #171717 !important;
}
.dark .custom-script-dialog .el-input__wrapper,
.dark .custom-script-dialog .el-textarea__inner {
background-color: #222225 !important;
color: #f3f4f6 !important;
}
.custom-script-dialog .el-input__wrapper.is-focus,
.custom-script-dialog .el-textarea__inner:focus {
border-color: #3B6DE8 !important;
}
.dark .custom-script-dialog .el-input__wrapper.is-focus,
.dark .custom-script-dialog .el-textarea__inner:focus {
border-color: #3B6DE8 !important;
}
.custom-script-dialog .el-input__inner {
color: #171717 !important;
}
.dark .custom-script-dialog .el-input__inner {
color: #f3f4f6 !important;
}
.custom-script-dialog .el-input__inner::placeholder,
.custom-script-dialog .el-textarea__inner::placeholder {
color: #99A0AE !important;
}
.dark .custom-script-dialog .el-input__inner::placeholder,
.dark .custom-script-dialog .el-textarea__inner::placeholder {
color: #6b7280 !important;
}
/* Select styling */
.custom-script-dialog .el-select .el-input__wrapper {
background-color: #EDECE4 !important;
}
.dark .custom-script-dialog .el-select .el-input__wrapper {
background-color: #222225 !important;
}
/* Cancel button */
.cancel-btn {
@@ -218,4 +243,12 @@ function handleClosed() {
background-color: #E5E4DC !important;
color: #171717 !important;
}
.dark .cancel-btn {
background-color: #222225 !important;
color: #9ca3af !important;
}
.dark .cancel-btn:hover {
background-color: #2a2a2d !important;
color: #f3f4f6 !important;
}
</style>

61
src/pages/scripts/components/ScriptEditorDialog.vue
View File

@@ -8,16 +8,16 @@
>
<!-- Header -->
<template #header>
<div class="sticky top-0 z-10 bg-[#F4F3EB] flex justify-between items-start">
<div class="sticky top-0 z-10 bg-[#F4F3EB] dark:bg-[#1f1f22] flex justify-between items-start">
<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('script.dialog.editTitle') }}
</h2>
<p class="text-[14px] text-[#99A0AE]">
<p class="text-[14px] text-[#99A0AE] dark:text-gray-500">
{{ t('script.dialog.description') }}
</p>
</div>
<button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
<button @click="visible = false" class="text-[#99A0AE] dark:text-gray-500 hover:text-[#171717] dark:hover:text-[#f3f4f6] transition-colors mt-[4px]">
<el-icon class="text-[20px] cursor-pointer"><Close /></el-icon>
</button>
</div>
@@ -27,7 +27,7 @@
<div class="px-[30px] pb-[30px] pt-[30px] space-y-6">
<!-- Name -->
<div class="space-y-2.5">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.name') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.name') }}</label>
<el-input
v-model="form.name"
:placeholder="t('script.dialog.namePlaceholder')"
@@ -37,7 +37,7 @@
<!-- Description -->
<div class="space-y-2.5">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.descriptionLabel') }}</label>
<el-input
v-model="form.description"
type="textarea"
@@ -49,7 +49,7 @@
<!-- Channel -->
<div class="space-y-2.5">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.channel') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.channel') }}</label>
<el-input
v-model="form.channel"
:placeholder="t('script.dialog.channelPlaceholder') || '粘贴渠道链接 / Paste channel URL'"
@@ -60,7 +60,7 @@
<!-- Code Editor -->
<div class="space-y-2.5">
<div class="flex items-center justify-between">
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('script.dialog.code') }}</label>
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('script.dialog.code') }}</label>
<div class="flex items-center gap-2">
<el-button
v-if="store.recordingStatus !== 'recording'"
@@ -90,11 +90,11 @@
</div>
</div>
<p v-if="store.recordingStatus === 'recording'" class="text-[12px] text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
<p v-if="store.recordingStatus === 'recording'" class="text-[12px] text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg px-3 py-2">
{{ t('script.dialog.recordTip') }}
</p>
<div class="rounded-[12px] overflow-hidden border border-transparent h-[320px] script-editor-container">
<div class="rounded-[12px] overflow-hidden border border-transparent dark:border-[#2a2a2d] h-[320px] script-editor-container">
<Codemirror
v-model="form.code"
placeholder="// Write your Playwright script here..."
@@ -108,10 +108,10 @@
</div>
<!-- Enabled -->
<div class="flex items-center justify-between bg-[#E8E6DE]/50 p-4 rounded-2xl border border-black/5">
<div class="flex items-center justify-between bg-[#E8E6DE]/50 dark:bg-[#222225] p-4 rounded-2xl border border-black/5 dark:border-[#2a2a2d]">
<div>
<label class="text-[14px] text-[#171717]/80 font-bold">{{ t('cron.dialog.enableImmediately') }}</label>
<p class="text-[13px] text-[#99A0AE] mt-0.5">
<label class="text-[14px] text-[#171717]/80 dark:text-[#f3f4f6]/80 font-bold">{{ t('cron.dialog.enableImmediately') }}</label>
<p class="text-[13px] text-[#99A0AE] dark:text-gray-500 mt-0.5">
{{ t('cron.dialog.enableImmediatelyDesc') }}
</p>
</div>
@@ -280,6 +280,9 @@ function handleClosed() {
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}
.dark .custom-script-dialog {
background-color: #1f1f22 !important;
}
.custom-script-dialog .el-dialog__body {
padding: 0 !important;
max-height: calc(100vh - 360px);
@@ -292,6 +295,9 @@ function handleClosed() {
background-color: #D1CFC7;
border-radius: 3px;
}
.dark .custom-script-dialog .el-dialog__body::-webkit-scrollbar-thumb {
background-color: #2a2a2d;
}
/* Input / Textarea styling */
.custom-script-dialog .el-input__wrapper,
@@ -302,6 +308,11 @@ function handleClosed() {
border: 1px solid transparent !important;
color: #171717 !important;
}
.dark .custom-script-dialog .el-input__wrapper,
.dark .custom-script-dialog .el-textarea__inner {
background-color: #222225 !important;
color: #f3f4f6 !important;
}
.custom-script-dialog .el-input__wrapper.is-focus,
.custom-script-dialog .el-textarea__inner:focus {
border-color: #3B6DE8 !important;
@@ -309,15 +320,25 @@ function handleClosed() {
.custom-script-dialog .el-input__inner {
color: #171717 !important;
}
.dark .custom-script-dialog .el-input__inner {
color: #f3f4f6 !important;
}
.custom-script-dialog .el-input__inner::placeholder,
.custom-script-dialog .el-textarea__inner::placeholder {
color: #99A0AE !important;
}
.dark .custom-script-dialog .el-input__inner::placeholder,
.dark .custom-script-dialog .el-textarea__inner::placeholder {
color: #6b7280 !important;
}
/* Select styling */
.custom-script-dialog .el-select .el-input__wrapper {
background-color: #EDECE4 !important;
}
.dark .custom-script-dialog .el-select .el-input__wrapper {
background-color: #222225 !important;
}
/* Toggle switch */
.custom-script-dialog .el-switch.is-checked .el-switch__core {
@@ -335,15 +356,29 @@ function handleClosed() {
background-color: #E5E4DC !important;
color: #171717 !important;
}
.dark .cancel-btn {
background-color: #222225 !important;
color: #9ca3af !important;
}
.dark .cancel-btn:hover {
background-color: #2a2a2d !important;
color: #f3f4f6 !important;
}
/* CodeMirror container */
.script-editor-container {
background-color: #EDECE4;
}
.dark .script-editor-container {
background-color: #0f0f10;
}
.script-editor-container .cm-editor {
height: 100%;
background-color: #EDECE4;
}
.dark .script-editor-container .cm-editor {
background-color: #0f0f10;
}
.script-editor-container .cm-editor.cm-focused {
outline: none;
}

18
src/pages/scripts/components/ScriptStats.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
<div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-black/5">
<div class="text-[12px] text-[#525866] font-medium mb-1">{{ t('script.stats.total') }}</div>
<div class="text-[28px] font-serif text-[#171717]">{{ total }}</div>
<div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d]">
<div class="text-[12px] text-[#525866] dark:text-gray-400 font-medium mb-1">{{ t('script.stats.total') }}</div>
<div class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6]">{{ total }}</div>
</div>
<div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-black/5">
<div class="text-[12px] text-[#525866] font-medium mb-1">{{ t('script.stats.active') }}</div>
<div class="text-[28px] font-serif text-[#171717]">{{ active }}</div>
<div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d]">
<div class="text-[12px] text-[#525866] dark:text-gray-400 font-medium mb-1">{{ t('script.stats.active') }}</div>
<div class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6]">{{ active }}</div>
</div>
<div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 border border-black/5">
<div class="text-[12px] text-[#525866] font-medium mb-1">{{ t('script.stats.failed') }}</div>
<div class="text-[28px] font-serif text-[#171717]">{{ failed }}</div>
<div class="p-5 rounded-[24px] bg-[#F4F3EB]/60 dark:bg-[#1f1f22] border border-black/5 dark:border-[#2a2a2d]">
<div class="text-[12px] text-[#525866] dark:text-gray-400 font-medium mb-1">{{ t('script.stats.failed') }}</div>
<div class="text-[28px] font-serif text-[#171717] dark:text-[#f3f4f6]">{{ failed }}</div>
</div>
</div>
</template>

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>