orion/FileCodeBoxFronted2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 调整2026莫兰迪主题色

Browse Source
This commit is contained in:
Orion
2026-06-05 13:01:09 +08:00
parent 4eb2146206
commit 0be56a5b0c
13 changed files with 376 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/AlertComponent.vue
+4 -4
View File
@@ -56,10 +56,10 @@ const { alerts } = storeToRefs(alertStore)
const { removeAlert, startProgressTimer, stopProgressTimer } = alertStore
const gradientClasses = {
success: 'from-green-500 to-green-600',
error: 'from-red-500 to-red-600',
warning: 'from-yellow-500 to-yellow-600',
info: 'from-blue-500 to-blue-600'
success: 'from-[#6f9688] to-[#5f8377]',
error: 'from-[#9b6a72] to-[#895c63]',
warning: 'from-[#b2a16f] to-[#9b8b5e]',
info: 'from-[#5f8796] to-[#527887]'
}
const alertIcons = {
src/components/common/BaseButton.vue
+7 -7
View File
@@ -56,27 +56,27 @@ const variantClasses = computed(() => {
const baseClasses = 'focus:ring-2 focus:ring-offset-2'
if (props.variant === 'primary') {
return `${baseClasses} bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500`
return `${baseClasses} bg-[#5f8796] text-white shadow-[#9fb8bf]/35 hover:bg-[#527887] focus:ring-[#8fb2bf]`
}
if (props.variant === 'secondary') {
return isDarkMode.value
? `${baseClasses} bg-gray-700 text-gray-300 hover:bg-gray-600 focus:ring-gray-500 border border-gray-600`
: `${baseClasses} bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300`
? `${baseClasses} border border-[#40545c] bg-[#263941] text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#2d4751] focus:ring-[#7199a8]`
: `${baseClasses} border border-[#c8d8dc] bg-[#edf4f5] text-[#415d66] hover:border-[#9db6bd] hover:bg-[#e2ecee] focus:ring-[#8fb2bf]`
}
if (props.variant === 'danger') {
return `${baseClasses} bg-red-600 text-white hover:bg-red-700 focus:ring-red-500`
return `${baseClasses} bg-[#9b6a72] text-white shadow-[#c9a4aa]/35 hover:bg-[#895c63] focus:ring-[#b98f97]`
}
if (props.variant === 'success') {
return `${baseClasses} bg-green-600 text-white hover:bg-green-700 focus:ring-green-500`
return `${baseClasses} bg-[#6f9688] text-white shadow-[#aac4ba]/35 hover:bg-[#5f8377] focus:ring-[#92b3a7]`
}
if (props.variant === 'outline') {
return isDarkMode.value
? `${baseClasses} border border-gray-600 text-gray-300 hover:bg-gray-700 focus:ring-gray-500`
: `${baseClasses} border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500`
? `${baseClasses} border border-[#40545c] text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#263941] focus:ring-[#7199a8]`
: `${baseClasses} border border-[#c8d8dc] text-[#415d66] hover:border-[#9db6bd] hover:bg-[#edf4f5] focus:ring-[#8fb2bf]`
}
return ''
src/components/common/BorderProgressBar.vue
+4 -4
View File
@@ -29,9 +29,9 @@ const drawProgress = () => {
// 创建渐变
const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, '#4f46e5'); // 靛蓝色
gradient.addColorStop(0.5, '#7c3aed'); // 紫色
gradient.addColorStop(1, '#db2777'); // 粉色
gradient.addColorStop(0, '#5f8796');
gradient.addColorStop(0.5, '#6f9688');
gradient.addColorStop(1, '#8c8294');
// 绘制背景
ctx.strokeStyle = 'rgba(229, 231, 235, 0.2)'; // 淡灰色半透明
@@ -151,4 +151,4 @@ watch(() => props.progress, drawProgress);
height: 100%;
transition: all 0.3s ease;
}
</style>
</style>
src/components/common/DataPagination.vue
+18 -18
View File
@@ -1,7 +1,7 @@
<template>
<div
class="mt-4 flex flex-col gap-3 border-t px-6 py-4 sm:flex-row sm:items-center sm:justify-between"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
:class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']"
>
<div
class="flex items-center text-sm"
@@ -14,11 +14,11 @@
<div class="flex flex-wrap items-center gap-2">
<select
:value="pageSize"
class="h-9 rounded-md border px-2 text-sm"
class="h-9 rounded-[30px] border px-3 text-sm shadow-sm transition-colors"
:class="[
isDarkMode
? 'border-gray-700 bg-gray-800 text-gray-200'
: 'border-gray-200 bg-white text-gray-700'
? 'border-[#40545c] bg-[#263941] text-[#d8e3e5] hover:border-[#7199a8]'
: 'border-[#c8d8dc] bg-[#edf4f5] text-[#415d66] hover:border-[#9db6bd]'
]"
@change="$emit('page-size-change', Number(($event.target as HTMLSelectElement).value))"
>
@@ -27,15 +27,15 @@
<button
@click="$emit('page-change', currentPage - 1)"
:disabled="currentPage === 1"
class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? currentPage === 1
? 'bg-gray-800 text-gray-600 cursor-not-allowed'
: 'bg-gray-800 text-gray-300 hover:bg-gray-700'
? 'cursor-not-allowed bg-[#223039] text-[#657a80]'
: 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: currentPage === 1
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'cursor-not-allowed bg-[#e8eeee] text-[#9aa9ad]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
]"
>
<ChevronLeftIcon class="w-4 h-4" />
@@ -47,13 +47,13 @@
<button
v-if="pageNum !== '...'"
@click="$emit('page-change', pageNum as number)"
class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
currentPage === pageNum
? 'bg-indigo-600 text-white'
? 'bg-[#5f8796] text-white shadow-[#9fb8bf]/35'
: isDarkMode
? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
]"
>
{{ pageNum }}
@@ -67,15 +67,15 @@
<button
@click="$emit('page-change', currentPage + 1)"
:disabled="currentPage >= totalPages"
class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? currentPage >= totalPages
? 'bg-gray-800 text-gray-600 cursor-not-allowed'
: 'bg-gray-800 text-gray-300 hover:bg-gray-700'
? 'cursor-not-allowed bg-[#223039] text-[#657a80]'
: 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: currentPage >= totalPages
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'cursor-not-allowed bg-[#e8eeee] text-[#9aa9ad]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
]"
>
下一页
src/components/common/SettingSwitch.vue
+8 -2
View File
@@ -6,8 +6,14 @@
<div class="flex items-center">
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
:class="[modelValue === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent shadow-sm transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2"
:class="[
modelValue === 1
? 'bg-[#6f9688]'
: isDarkMode
? 'bg-[#40545c]'
: 'bg-[#cfdadc]'
]"
role="switch"
:aria-checked="modelValue === 1"
@click="$emit('toggle')"
src/components/common/StatCard.vue
+10 -10
View File
@@ -50,28 +50,28 @@ const isDarkMode = useInjectedDarkMode()
const iconBgClass = computed(() => {
const colorMap = {
indigo: isDarkMode.value ? 'bg-indigo-900' : 'bg-indigo-100',
purple: isDarkMode.value ? 'bg-purple-900' : 'bg-purple-100',
green: isDarkMode.value ? 'bg-green-900' : 'bg-green-100',
blue: isDarkMode.value ? 'bg-blue-900' : 'bg-blue-100'
indigo: isDarkMode.value ? 'bg-[#294047]' : 'bg-[#dcebed]',
purple: isDarkMode.value ? 'bg-[#443d4b]' : 'bg-[#e7e2ea]',
green: isDarkMode.value ? 'bg-[#31564f]' : 'bg-[#e1eee8]',
blue: isDarkMode.value ? 'bg-[#2d4851]' : 'bg-[#dce8eb]'
}
return colorMap[props.iconColor]
})
const iconClass = computed(() => {
const colorMap = {
indigo: isDarkMode.value ? 'text-indigo-400' : 'text-indigo-600',
purple: isDarkMode.value ? 'text-purple-400' : 'text-purple-600',
green: isDarkMode.value ? 'text-green-400' : 'text-green-600',
blue: isDarkMode.value ? 'text-blue-400' : 'text-blue-600'
indigo: isDarkMode.value ? 'text-[#b8d4dc]' : 'text-[#3f6a77]',
purple: isDarkMode.value ? 'text-[#d4c8dc]' : 'text-[#6f6379]',
green: isDarkMode.value ? 'text-[#c4dfd5]' : 'text-[#55796e]',
blue: isDarkMode.value ? 'text-[#bfd9df]' : 'text-[#4b7380]'
}
return colorMap[props.iconColor]
})
const descriptionClass = computed(() => {
const typeMap = {
success: isDarkMode.value ? 'text-green-400' : 'text-green-600',
error: isDarkMode.value ? 'text-red-400' : 'text-red-600',
success: isDarkMode.value ? 'text-[#b6d6ca]' : 'text-[#5f8377]',
error: isDarkMode.value ? 'text-[#e5c5ca]' : 'text-[#8b5962]',
neutral: isDarkMode.value ? 'text-gray-400' : 'text-gray-600'
}
return typeMap[props.descriptionType]
src/components/common/ThemeToggle.vue
+6 -2
View File
@@ -13,8 +13,12 @@ const toggleColorMode = () => {
<template>
<button
@click="toggleColorMode"
class="p-2 rounded-full transition-all duration-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transform hover:rotate-180"
:class="isDarkMode ? 'bg-gray-800 text-yellow-300' : 'bg-white text-gray-800'"
class="rounded-full p-2 shadow-sm transition-all duration-500 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2 transform hover:rotate-180"
:class="
isDarkMode
? 'bg-[#263941] text-[#d8c98e]'
: 'bg-[#edf4f5] text-[#4f6c75]'
"
>
<SunIcon v-if="!isDarkMode" class="w-6 h-6" />
<MoonIcon v-else class="w-6 h-6" />