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/App.vue
+7 -3
View File
@@ -42,11 +42,15 @@ const {
}
.light {
@apply bg-gradient-to-br from-blue-50 via-indigo-50 to-white;
background:
linear-gradient(135deg, #dfe9eb 0%, #edf3f2 46%, #f7f8f5 100%),
linear-gradient(90deg, rgba(103, 135, 145, 0.12), rgba(162, 172, 154, 0.1));
}
.dark {
@apply bg-gradient-to-br from-gray-900 via-indigo-900 to-black;
background:
linear-gradient(135deg, #10191e 0%, #17252b 48%, #223036 100%),
linear-gradient(90deg, rgba(113, 153, 168, 0.12), rgba(117, 143, 132, 0.08));
}
.fade-enter-active,
@@ -100,7 +104,7 @@ const {
width: 50px;
height: 50px;
border: 3px solid #fff;
border-top: 3px solid #3498db;
border-top: 3px solid #6f98a6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
src/assets/style/main.css
+260
View File
@@ -154,3 +154,263 @@
linear-gradient(135deg, rgba(42, 62, 72, 0.98), rgba(29, 48, 58, 0.96)),
radial-gradient(circle at 0% 0%, rgba(117, 166, 184, 0.22), transparent 36%);
}
.bg-indigo-50,
.bg-blue-50 {
background-color: #dce8eb !important;
}
.bg-indigo-100,
.bg-blue-100 {
background-color: #d1e0e3 !important;
}
.bg-indigo-500,
.bg-blue-500,
.bg-cyan-500 {
background-color: #6f98a6 !important;
}
.bg-indigo-600,
.bg-blue-600,
.bg-cyan-600 {
background-color: #5f8796 !important;
}
.bg-indigo-700,
.bg-blue-700,
.bg-cyan-700 {
background-color: #527887 !important;
}
.bg-green-50 {
background-color: #e1eee8 !important;
}
.bg-green-100 {
background-color: #d4e5dd !important;
}
.bg-green-500,
.bg-green-600 {
background-color: #6f9688 !important;
}
.bg-green-700 {
background-color: #5f8377 !important;
}
.bg-red-50 {
background-color: #f1e2e5 !important;
}
.bg-red-100 {
background-color: #e8d3d7 !important;
}
.bg-red-500,
.bg-red-600 {
background-color: #9b6a72 !important;
}
.bg-red-700 {
background-color: #895c63 !important;
}
.bg-purple-50 {
background-color: #e7e2ea !important;
}
.bg-purple-100 {
background-color: #ddd6e2 !important;
}
.bg-purple-500,
.bg-pink-500 {
background-color: #8c8294 !important;
}
.bg-purple-600,
.bg-pink-600 {
background-color: #7b7284 !important;
}
.text-indigo-200,
.text-blue-200 {
color: #d8e8eb !important;
}
.text-indigo-300,
.text-blue-300 {
color: #b8d4dc !important;
}
.text-indigo-400,
.text-blue-400,
.text-cyan-400 {
color: #8fb2bf !important;
}
.text-indigo-500,
.text-blue-500,
.text-cyan-500 {
color: #6f98a6 !important;
}
.text-indigo-600,
.text-blue-600,
.text-cyan-600 {
color: #5f8796 !important;
}
.text-indigo-700,
.text-blue-700 {
color: #3f6a77 !important;
}
.text-green-300,
.text-green-400 {
color: #b6d6ca !important;
}
.text-green-500,
.text-green-600,
.text-green-700 {
color: #5f8377 !important;
}
.text-red-200,
.text-red-300,
.text-red-400 {
color: #e5c5ca !important;
}
.text-red-500,
.text-red-600,
.text-red-700 {
color: #8b5962 !important;
}
.text-purple-300,
.text-purple-400 {
color: #d4c8dc !important;
}
.text-purple-500,
.text-purple-600,
.text-purple-700 {
color: #6f6379 !important;
}
.border-indigo-100,
.border-blue-100 {
border-color: #cfe1e4 !important;
}
.border-indigo-300,
.border-blue-300 {
border-color: #9db6bd !important;
}
.border-indigo-400,
.border-indigo-500,
.border-blue-500 {
border-color: #8fb2bf !important;
}
.border-indigo-600 {
border-color: #5f8796 !important;
}
.border-red-100 {
border-color: #e8d3d7 !important;
}
.border-red-200,
.border-red-500 {
border-color: #c9a4aa !important;
}
.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-cyan-500:focus,
.focus\:ring-purple-500:focus {
--tw-ring-color: #8fb2bf !important;
}
.focus\:border-indigo-500:focus,
.focus\:border-cyan-500:focus {
border-color: #8fb2bf !important;
}
.hover\:bg-indigo-100:hover,
.hover\:bg-blue-100:hover {
background-color: #cfe1e4 !important;
}
.hover\:bg-indigo-500:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-cyan-500:hover {
background-color: #6f98a6 !important;
}
.hover\:bg-indigo-600:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-cyan-600:hover {
background-color: #527887 !important;
}
.hover\:bg-indigo-700:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-cyan-700:hover {
background-color: #466b78 !important;
}
.hover\:bg-green-100:hover {
background-color: #d4e5dd !important;
}
.hover\:bg-green-400:hover,
.hover\:bg-green-600:hover,
.hover\:bg-green-700:hover {
background-color: #5f8377 !important;
}
.hover\:bg-red-100:hover {
background-color: #e8d3d7 !important;
}
.hover\:bg-red-400:hover,
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover {
background-color: #895c63 !important;
}
.hover\:border-indigo-500:hover {
border-color: #8fb2bf !important;
}
.from-indigo-500,
.from-indigo-600,
.from-cyan-500,
.from-cyan-600 {
--tw-gradient-from: #5f8796 var(--tw-gradient-from-position) !important;
--tw-gradient-to: rgba(95, 135, 150, 0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-purple-500,
.via-purple-600 {
--tw-gradient-to: rgba(140, 130, 148, 0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops:
var(--tw-gradient-from),
#8c8294 var(--tw-gradient-via-position),
var(--tw-gradient-to) !important;
}
.to-purple-500,
.to-purple-600,
.to-pink-500,
.to-pink-600 {
--tw-gradient-to: #6f9688 var(--tw-gradient-to-position) !important;
}
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
+3 -3
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)'; // 淡灰色半透明
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" />
src/layout/AdminLayout/AdminLayout.vue
+18 -18
View File
@@ -1,15 +1,15 @@
<template>
<div
class="flex h-screen overflow-hidden flex-col transition-colors duration-300 lg:flex-row"
:class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
:class="[isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]']"
>
<!-- Sidebar -->
<aside
class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r lg:relative lg:h-screen lg:translate-x-0"
:class="[
isDarkMode
? 'border-[#344951] bg-[#203039]/90 backdrop-filter backdrop-blur-xl'
: 'border-[#d5e1e3] bg-[#f8fbfb]/92 backdrop-blur-xl',
? 'border-[#31454d] bg-[#1a2930]/92 backdrop-filter backdrop-blur-xl'
: 'border-[#c8d7da] bg-[#f2f6f5]/92 backdrop-blur-xl',
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
'transition-transform duration-300 ease-in-out lg:transition-none'
]"
@@ -21,19 +21,19 @@
>
<div class="flex items-center">
<div
class="rounded-full bg-gradient-to-r from-[#6f9cad] via-[#91b7b3] to-[#b7b0c4] p-1 animate-spin-slow"
class="rounded-full bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] p-1 animate-spin-slow"
>
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#203039]' : 'bg-[#f8fbfb]']">
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#1a2930]' : 'bg-[#f2f6f5]']">
<BoxIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-[#9cc5d2]' : 'text-[#5f8fa3]']"
:class="[isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']"
/>
</div>
</div>
<h1
@click="router.push('/')"
class="ml-2 text-xl font-semibold cursor-pointer"
:class="[isDarkMode ? 'text-[#eef5f5]' : 'text-[#263f48]']"
:class="[isDarkMode ? 'text-[#edf4f4]' : 'text-[#2d4650]']"
>
{{ t('common.appName') }}
</h1>
@@ -53,11 +53,11 @@
:class="[
route.name === item.id
? isDarkMode
? 'border-[#9cc5d2] bg-[#2b414a] text-[#d8ebef]'
: 'border-[#6f9cad] bg-[#e3eef0] text-[#315f73]'
? 'border-[#a5c8d0] bg-[#294047] text-[#dceff1]'
: 'border-[#6f98a6] bg-[#d5e4e6] text-[#315c69]'
: isDarkMode
? 'border-transparent text-[#aabdc2] hover:bg-[#263941]'
: 'border-transparent text-[#5b737b] hover:bg-[#e7f0f1]'
? 'border-transparent text-[#aebfc3] hover:bg-[#22353c]'
: 'border-transparent text-[#586f75] hover:bg-[#e5eeee]'
]"
@click="closeSidebarForMobile"
>
@@ -69,14 +69,14 @@
</nav>
<!-- 退出登录按钮 -->
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#344951]' : 'border-[#d5e1e3]']">
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
<button
@click="handleLogout"
class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
:class="[
isDarkMode
? 'text-[#aabdc2] hover:bg-[#263941] hover:text-[#eef5f5]'
: 'text-[#5b737b] hover:bg-[#e7f0f1] hover:text-[#263f48]'
? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
: 'text-[#586f75] hover:bg-[#e5eeee] hover:text-[#2d4650]'
]"
>
<LogOutIcon class="w-5 h-5 mr-3" />
@@ -90,7 +90,7 @@
<!-- Header -->
<header
class="shadow-md border-b transition-colors duration-300 h-16"
:class="[isDarkMode ? 'bg-[#203039] border-[#344951]' : 'bg-[#f8fbfb] border-[#d5e1e3]']"
:class="[isDarkMode ? 'bg-[#1a2930] border-[#31454d]' : 'bg-[#f2f6f5] border-[#c8d7da]']"
>
<div class="flex items-center justify-between h-16 px-4">
<button @click="toggleSidebar" class="lg:hidden">
@@ -102,7 +102,7 @@
<!-- Content -->
<main
class="min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
:class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
:class="[isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]']"
>
<router-view />
</main>
@@ -230,11 +230,11 @@ const handleLogout = async () => {
}
input:checked + .slider {
background-color: #4f46e5;
background-color: #6f9688;
}
.dark input:checked + .slider {
background-color: #4f46e5;
background-color: #6f9688;
}
.slider:before {
src/views/manage/DashboardView.vue
+6 -6
View File
@@ -100,7 +100,7 @@
</div>
<ActivityIcon
class="h-5 w-5"
:class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']"
:class="[isDarkMode ? 'text-[#b8d4dc]' : 'text-[#5f8796]']"
/>
</div>
@@ -226,7 +226,7 @@
:class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
>
<div
class="h-full rounded-full bg-indigo-500"
class="h-full rounded-full bg-[#6f98a6]"
:style="{ width: `${dashboardData.todaySizeRatio}%` }"
></div>
</div>
@@ -319,7 +319,7 @@
</div>
<DownloadCloudIcon
class="h-5 w-5"
:class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']"
:class="[isDarkMode ? 'text-[#b8d4dc]' : 'text-[#5f8796]']"
/>
</div>
<div class="overflow-x-auto">
@@ -615,9 +615,9 @@ const MetricProgress = defineComponent({
setup(props) {
const toneClass = computed(() => {
const classes = {
green: 'bg-green-500',
indigo: 'bg-indigo-500',
purple: 'bg-purple-500'
green: 'bg-[#6f9688]',
indigo: 'bg-[#5f8796]',
purple: 'bg-[#8c8294]'
}
return classes[props.tone]
})
src/views/manage/FileManageView.vue
+10 -10
View File
@@ -495,8 +495,8 @@
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? 'bg-indigo-900/20 text-indigo-300 hover:bg-indigo-900/30'
: 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
? 'bg-[#294047]/70 text-[#b8d4dc] hover:bg-[#34515a]'
: 'bg-[#dcebed] text-[#3f6a77] hover:bg-[#cfe1e4]'
]"
@click="openFileDetail(file)"
>
@@ -510,8 +510,8 @@
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: 'bg-[#edf4f5] text-[#506972] hover:bg-[#e2ecee]'
]"
@click="openTextPreview(file)"
>
@@ -527,8 +527,8 @@
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-sm"
:class="[
isDarkMode
? 'bg-emerald-900/20 text-emerald-300 hover:bg-emerald-900/30'
: 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
? 'bg-[#31564f]/70 text-[#c4dfd5] hover:bg-[#3c675e]'
: 'bg-[#e1eee8] text-[#55796e] hover:bg-[#d4e5dd]'
]"
@click="downloadFile(file)"
>
@@ -544,8 +544,8 @@
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? 'bg-blue-900/20 text-blue-300 hover:bg-blue-900/30'
: 'bg-blue-50 text-blue-600 hover:bg-blue-100'
? 'bg-[#2d4851]/70 text-[#bfd9df] hover:bg-[#365862]'
: 'bg-[#dce8eb] text-[#4b7380] hover:bg-[#cfdee2]'
]"
@click="openEditModal(file)"
>
@@ -557,8 +557,8 @@
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? 'bg-red-900/20 text-red-300 hover:bg-red-900/30'
: 'bg-red-50 text-red-600 hover:bg-red-100'
? 'bg-[#5f383f]/70 text-[#ecd1d6] hover:bg-[#71454d]'
: 'bg-[#f1e2e5] text-[#8b5962] hover:bg-[#e8d3d7]'
]"
@click="deleteFile(file.id)"
>
src/views/manage/LoginView.vue
+18 -18
View File
@@ -2,7 +2,7 @@
<div
:class="[
'min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-200 relative overflow-hidden',
isDarkMode ? 'bg-gray-900' : 'bg-gray-50'
isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]'
]"
>
<div class="absolute inset-0 z-0">
@@ -10,24 +10,24 @@
<div class="floating-particles"></div>
</div>
<div
class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
:class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']"
class="max-w-md w-full space-y-8 backdrop-blur-lg p-8 rounded-[30px] border shadow-xl"
:class="[isDarkMode ? 'bg-[#1a2930]/82 border-[#31454d]' : 'bg-[#f2f6f5]/82 border-[#c8d7da]']"
>
<div>
<div class="mx-auto h-16 w-16 relative">
<div
class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow"
class="absolute inset-0 bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] rounded-full animate-spin-slow"
></div>
<div
class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse"
class="absolute -inset-2 bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] rounded-full opacity-45 blur-md animate-pulse"
></div>
<div
:class="[
'absolute inset-1 rounded-full flex items-center justify-center',
isDarkMode ? 'bg-gray-800' : 'bg-white'
isDarkMode ? 'bg-[#1a2930]' : 'bg-[#f2f6f5]'
]"
>
<BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-cyan-400' : 'text-cyan-600']" />
<BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']" />
</div>
</div>
<h2
@@ -63,10 +63,10 @@
required
v-model="password"
:class="[
'appearance-none rounded-t-md relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm backdrop-blur-sm',
'appearance-none rounded-[30px] relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:border-[#8fb2bf] focus:z-10 sm:text-sm backdrop-blur-sm',
isDarkMode
? 'bg-gray-800/50 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'bg-white/50 border-gray-300 text-gray-900 hover:border-gray-400'
? 'bg-[#263941]/60 border-[#40545c] text-white placeholder-gray-400 hover:border-[#7199a8]'
: 'bg-[#edf4f5]/70 border-[#c8d8dc] text-[#2d4650] hover:border-[#9db6bd]'
]"
placeholder="密码"
/>
@@ -76,10 +76,10 @@
<button
type="submit"
:class="[
'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 shadow-lg hover:shadow-cyan-500/50',
'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-[30px] text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#8fb2bf] shadow-lg',
isDarkMode
? 'bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600'
: 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-700 hover:to-purple-700',
? 'bg-gradient-to-r from-[#5f8796] to-[#6f9688] hover:from-[#527887] hover:to-[#5f8377] hover:shadow-[#6f98a6]/35'
: 'bg-gradient-to-r from-[#5f8796] to-[#6f9688] hover:from-[#527887] hover:to-[#5f8377] hover:shadow-[#9fb8bf]/45',
isLoading ? 'opacity-75 cursor-not-allowed' : ''
]"
:disabled="isLoading"
@@ -147,7 +147,7 @@ const submitLogin = async () => {
}
input:focus {
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
box-shadow: 0 0 15px rgba(95, 135, 150, 0.24);
}
button:active:not(:disabled) {
@@ -156,8 +156,8 @@ button:active:not(:disabled) {
.cyber-grid {
background-image:
linear-gradient(transparent 95%, rgba(99, 102, 241, 0.1) 50%),
linear-gradient(90deg, transparent 95%, rgba(99, 102, 241, 0.1) 50%);
linear-gradient(transparent 95%, rgba(95, 135, 150, 0.1) 50%),
linear-gradient(90deg, transparent 95%, rgba(95, 135, 150, 0.1) 50%);
background-size: 30px 30px;
width: 100%;
height: 100%;
@@ -179,7 +179,7 @@ button:active:not(:disabled) {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
background-image: radial-gradient(circle at center, rgba(95, 135, 150, 0.1) 0%, transparent 50%);
animation: float 20s infinite linear;
}
@@ -203,7 +203,7 @@ button:active:not(:disabled) {
}
button:hover:not(:disabled) {
box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
box-shadow: 0 0 25px rgba(95, 135, 150, 0.38);
}
.fade-enter-active,