WuYongJie/CaiWuXiTong
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

界面：应用VIP黑金主题与统一标题层级

Browse Source
This commit is contained in:
WuYongJie 2026-07-21 21:20:59 +08:00
parent 26ce30d25a
commit 673f0cb0b0
18 changed files with 132 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
presets.js vendored
View File

@ -99,17 +99,17 @@ module.exports = {
},
'purple': {
DEFAULT: '#55588b',
'50': '#f7f7f9',
'100': '#eeeef3',
'200': '#d5d5e2',
'300': '#bbbcd1',
'400': '#888aae',
'500': '#55588b',
'600': '#4d4f7d',
'700': '#404268',
'800': '#333553',
'900': '#2a2b44'
DEFAULT: '#B9954F',
'50': '#FBF8F1',
'100': '#F7F0DE',
'200': '#EEE2BF',
'300': '#E1CF9D',
'400': '#CDB474',
'500': '#B9954F',
'600': '#A17D3E',
'700': '#856632',
'800': '#6A5129',
'900': '#513E21'
},
'red': {
@ -169,10 +169,10 @@ module.exports = {
},
'lilac': {
DEFAULT: '#F8F9FE',
'100': '#F5F7FA',
'300': '#EDF0FC',
'900': '#DCE2F9'
DEFAULT: '#F8F7F3',
'100': '#F4F2EC',
'300': '#EAE6DC',
'900': '#D8D6D0'
},
'golden': {
@ -316,13 +316,13 @@ module.exports = {
DEFAULT: '#fcfcfc'
},
'light-gray': '#C7C9D9',
'light-gray': '#D4D0C7',
'dark-blue': '#15284B',
'lighter-gray': '#F2F2F5',
'purple-lighter': '#F2F4FC',
'purple-lighter': '#F8F6F1',
'modal-background': 'rgba(0, 0, 0, 0.3)',

1
public/img/akaunting-logo-gold.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000.14"><defs><style>.cls-1{fill:#E7D7A4;}</style></defs><title>Akaunting Gold</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M292.3,726.77a306.59,306.59,0,0,1-99.57-215.22H0C3.23,655.16,67,783.81,166.8,873Z"/><path class="cls-1" d="M499.93,0C228,0,6.8,217,0,487.29H192.78c6.7-163.86,141.65-294.63,307.15-294.63,169.78,0,307.42,137.63,307.42,307.41C807.35,614.28,745.06,714,652.61,767L743.31,937C896.44,851.54,1000,687.89,1000,500.07,1000,223.89,776.11,0,499.93,0"/><path class="cls-1" d="M631.11,778.16a307.73,307.73,0,0,1-320.3-35.72L185.27,888.74a500.46,500.46,0,0,0,536.58,59.57Z"/><rect class="cls-1" x="807.35" y="500.07" width="192.65" height="500.07"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 791 B

2
public/img/akaunting-logo-green.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000.14"><defs><style>.cls-1{fill:#6da252;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M292.3,726.77a306.59,306.59,0,0,1-99.57-215.22H0C3.23,655.16,67,783.81,166.8,873Z"/><path class="cls-1" d="M499.93,0C228,0,6.8,217,0,487.29H192.78c6.7-163.86,141.65-294.63,307.15-294.63,169.78,0,307.42,137.63,307.42,307.41C807.35,614.28,745.06,714,652.61,767L743.31,937C896.44,851.54,1000,687.89,1000,500.07,1000,223.89,776.11,0,499.93,0"/><path class="cls-1" d="M631.11,778.16a307.73,307.73,0,0,1-320.3-35.72L185.27,888.74a500.46,500.46,0,0,0,536.58,59.57Z"/><rect class="cls-1" x="807.35" y="500.07" width="192.65" height="500.07"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000.14"><defs><style>.cls-1{fill:#E7D7A4;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M292.3,726.77a306.59,306.59,0,0,1-99.57-215.22H0C3.23,655.16,67,783.81,166.8,873Z"/><path class="cls-1" d="M499.93,0C228,0,6.8,217,0,487.29H192.78c6.7-163.86,141.65-294.63,307.15-294.63,169.78,0,307.42,137.63,307.42,307.41C807.35,614.28,745.06,714,652.61,767L743.31,937C896.44,851.54,1000,687.89,1000,500.07,1000,223.89,776.11,0,499.93,0"/><path class="cls-1" d="M631.11,778.16a307.73,307.73,0,0,1-320.3-35.72L185.27,888.74a500.46,500.46,0,0,0,536.58,59.57Z"/><rect class="cls-1" x="807.35" y="500.07" width="192.65" height="500.07"/></g></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 783 B

After

Width:  |  Height:  |  Size: 784 B

86
resources/assets/sass/app.css vendored
View File

@ -255,6 +255,90 @@
@apply w-64 lg:w-56 py-7 px-5 bg-purple-lighter menu-scroll overflow-y-auto overflow-x-hidden transition-all;
}
:root {
--vip-rail-bg: #050506;
--vip-rail-gold: #F2E7C5;
--vip-sidebar-bg: #18181A;
--vip-sidebar-gold: #F0E4BF;
--vip-sidebar-gold-soft: #DDD0AA;
--vip-sidebar-active: #2A2927;
--vip-content-bg: #F8F6F1;
--vip-border: #D8D2C7;
}
body {
background-color: var(--vip-content-bg);
color: #171717;
}
.finance-theme-rail {
background-color: var(--vip-rail-bg) !important;
border-inline-end: 1px solid rgba(232, 216, 167, 0.18);
}
.finance-theme-rail .text-purple,
.finance-theme-rail .material-icons,
.finance-theme-rail .material-icons-outlined,
.finance-theme-rail .material-icons-round {
color: var(--vip-rail-gold) !important;
}
.finance-theme-sidebar {
background-color: var(--vip-sidebar-bg) !important;
color: var(--vip-sidebar-gold);
}
.finance-theme-sidebar .text-purple,
.finance-theme-sidebar .text-black,
.finance-theme-sidebar a,
.finance-theme-sidebar button,
.finance-theme-sidebar summary {
color: var(--vip-sidebar-gold) !important;
}
.finance-theme-sidebar .menu__submenu a,
.finance-theme-sidebar .menu__submenu .text-purple {
color: var(--vip-sidebar-gold-soft) !important;
}
.finance-theme-sidebar .main-menu .menu__submenu a,
.finance-theme-sidebar .main-menu .menu__submenu summary > div {
font-size: 0.75rem !important;
line-height: 1rem !important;
}
.finance-theme-sidebar .main-menu a.font-semibold,
.finance-theme-sidebar .main-menu summary.font-semibold,
.finance-theme-sidebar .main-menu div.font-semibold {
background-color: var(--vip-sidebar-active);
box-shadow: inset 2px 0 0 #F6E9C2;
border-radius: 0.25rem;
}
.finance-theme-sidebar .main-menu a:hover,
.finance-theme-sidebar .main-menu summary:hover > div {
background-color: rgba(240, 228, 191, 0.10);
border-radius: 0.25rem;
}
.finance-theme-sidebar ul svg {
stroke: #F0E4BF;
}
.finance-theme-sidebar .menu__submenu li::before,
.finance-theme-sidebar .menu__submenu details.relative::before {
background-color: rgba(242, 231, 197, 0.24);
}
.finance-theme-sidebar .bg-purple {
background-color: #F6E9C2 !important;
}
.finance-theme-sidebar:focus-within,
.finance-theme-rail:focus-within {
outline-color: #F6E9C2;
}
.menu-list-hidden {
@apply w-0 p-0 opacity-0;
}
@ -870,4 +954,4 @@ html[dir="rtl"] .el-select-dropdown.is-multiple .el-select-dropdown__item.select
margin-left: 1rem;
}
*/
/* End avatar attachment margin */
/* End avatar attachment margin */

2
resources/views/auth/forgot/create.blade.php
View File

@ -5,7 +5,7 @@
<x-slot name="content">
<div>
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-16" alt="Akaunting" />
<h1 class="text-lg my-3">
{{ trans('auth.reset_password') }}

2
resources/views/auth/login/create.blade.php
View File

@ -5,7 +5,7 @@
<x-slot name="content">
<div>
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-16" alt="Akaunting" />
<h1 class="text-lg my-3">
{{ trans('auth.login_to') }}

2
resources/views/auth/register/create.blade.php
View File

@ -5,7 +5,7 @@
<x-slot name="content">
<div>
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-16" alt="Akaunting" />
<h1 class="text-lg my-3">
{{ trans('auth.register_user') }}

2
resources/views/auth/reset/create.blade.php
View File

@ -5,7 +5,7 @@
<x-slot name="content">
<div>
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-16" alt="Akaunting" />
<h1 class="text-lg my-3">
{{ trans('auth.reset_password') }}

2
resources/views/components/empty-page.blade.php
View File

@ -1,7 +1,7 @@
<div class="flex flex-col lg:flex-row">
<div class="w-full">
<div class="border-b px-2 pb-3">
<h1 class="flex items-center justify-end text-right text-lg xl:text-xl text-black font-semibold">
<h1 class="flex items-center justify-end text-right text-sm text-black font-semibold">
<x-title>
{!! $title !!}
</x-title>

2
resources/views/components/layouts/admin/header.blade.php
View File

@ -4,7 +4,7 @@
<div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 sm:rtl:space-x-reverse hide-empty-page">
<div data-page-title-first class="order-1 flex w-full items-center justify-end mb-3 sm:order-2 sm:w-6/12 sm:mb-0">
<div class="flex w-full items-center justify-end gap-3">
<h1 class="flex min-w-0 items-center justify-end text-right text-lg xl:text-xl text-black font-semibold mt-2">
<h1 class="flex min-w-0 items-center justify-end text-right text-sm text-black font-semibold mt-2">
<x-title>
{!! $title !!}
</x-title>

16
resources/views/components/layouts/admin/menu.blade.php
View File

@ -6,7 +6,7 @@
<span class="material-icons text-black js-hamburger-menu">menu</span>
<div class="flex items-center m-auto">
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-8 m-auto" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-8 m-auto" alt="Akaunting" />
<span class="ltr:ml-2 rtl:mr-2">{{ Str::limit(setting('company.name'), 22) }}</span>
</div>
@ -40,7 +40,7 @@
x-ref="realMenu"
class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
>
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div class="finance-theme-rail w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div
data-tooltip-target="tooltip-profile"
data-tooltip-placement="{{ language()->direction() === 'rtl' ? 'left' : 'right' }}"
@ -122,13 +122,13 @@
@stack('main_menu_start')
<nav class="menu-list js-main-menu" id="sidenav-main">
<nav class="finance-theme-sidebar menu-list js-main-menu" id="sidenav-main">
@stack('main_menu_company_start')
<div class="relative mb-5">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center">
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-6 h-6" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-6 h-6" alt="Akaunting" />
</div>
<div class="flex ltr:ml-2 rtl:mr-2">
@ -152,7 +152,7 @@
@stack('profile_menu_start')
<div class="profile-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="finance-theme-sidebar profile-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
@stack('profile_menu_avatar_start')
<div class="flex h-12.5">
@ -185,7 +185,7 @@
@can('read-notifications')
@stack('notifications_menu_start')
<div class="notifications-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="finance-theme-sidebar notifications-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
@stack('notifications_menu_title_start')
<div class="flex items-center mb-3">
@ -208,7 +208,7 @@
@stack('settings_menu_start')
<div class="settings-menu user-menu menu-list fixed h-full overflow-y-unset ltr:-left-80 rtl:-right-80">
<div class="finance-theme-sidebar settings-menu user-menu menu-list fixed h-full overflow-y-unset ltr:-left-80 rtl:-right-80">
@stack('settings_menu_title_start')
<div class="flex items-center mb-3">
@ -230,7 +230,7 @@
@stack('add_new_menu_start')
<div class="add-new-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="finance-theme-sidebar add-new-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
@stack('add_new_menu_title_start')
<div class="flex items-center mb-3">

4
resources/views/components/layouts/install.blade.php
View File

@ -18,7 +18,7 @@
<div class="w-full lg:w-46 h-31 flex flex-col justify-center gap-12 px-6 lg:px-24 py-24 mt-12 lg:mt-0">
<div class="flex flex-col gap-4">
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16 my-3" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-16 my-3" alt="Akaunting" />
<div class="rounded-xl px-5 py-3 mb-5 bg-red-100 text-sm mb-0 text-red-600">
{!! trans('install.requirements.npm') !!}
@ -34,7 +34,7 @@
<div class="w-full lg:w-46 h-31 flex flex-col justify-center gap-12 px-6 lg:px-24 py-24 mt-12 lg:mt-0">
<div class="flex flex-col gap-4">
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-16 my-3" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-16 my-3" alt="Akaunting" />
<x-layouts.install.content :title="$title">
{!! $content !!}

2
resources/views/components/layouts/portal/header.blade.php
View File

@ -4,7 +4,7 @@
<div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 sm:rtl:space-x-reverse hide-empty-page">
<div data-page-title-first class="order-1 flex w-full items-center justify-end mb-3 sm:order-2 sm:w-6/12 sm:mb-0">
<div class="flex w-full items-center justify-end gap-3">
<h1 class="flex min-w-0 items-center justify-end text-right text-lg xl:text-xl text-black font-semibold mt-2">
<h1 class="flex min-w-0 items-center justify-end text-right text-sm text-black font-semibold mt-2">
<x-title>
{!! $title !!}
</x-title>

12
resources/views/components/layouts/portal/menu.blade.php
View File

@ -6,7 +6,7 @@
<span class="material-icons text-black js-hamburger-menu">menu</span>
<div class="flex items-center m-auto">
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-8 m-auto" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-8 m-auto" alt="Akaunting" />
<span class="ltr:ml-2 rtl:mr-2">{{ Str::limit(setting('company.name'), 22) }}</span>
</div>
</div>
@ -24,7 +24,7 @@
x-ref="realMenu"
class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
>
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div class="finance-theme-rail w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div
data-tooltip-target="tooltip-profile"
data-tooltip-placement="{{ language()->direction() === 'rtl' ? 'left' : 'right' }}"
@ -89,11 +89,11 @@
<livewire:menu.favorites />
</div>
<nav class="menu-list js-main-menu" id="sidenav-main">
<nav class="finance-theme-sidebar menu-list js-main-menu" id="sidenav-main">
<div class="relative mb-5 cursor-pointer">
<button type="button" class="flex items-center" data-dropdown-toggle="dropdown-menu-company">
<div class="w-8 h-8 flex items-center justify-center">
<img src="{{ asset('public/img/akaunting-logo-green.svg') }}" class="w-6 h-6" alt="Akaunting" />
<img src="{{ asset('public/img/akaunting-logo-gold.svg') }}" class="w-6 h-6" alt="Akaunting" />
</div>
<div class="flex ltr:ml-2 rtl:mr-2">
@ -143,7 +143,7 @@
</div>
</nav>
<div class="profile-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="finance-theme-sidebar profile-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="flex h-12.5">
@if (setting('default.use_gravatar', '0') == '1')
<img src="{{ user()->picture }}" class="w-8 h-8 rounded-full" alt="{{ user()->name }}" title="{{ user()->name }}">
@ -166,7 +166,7 @@
</div>
@can('read-notifications')
<div class="notifications-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="finance-theme-sidebar notifications-menu user-menu menu-list fixed h-full ltr:-left-80 rtl:-right-80">
<div class="flex items-center mb-3">
<span name="notifications" class="material-icons-outlined w-8 h-8 flex items-center justify-center text-purple text-2xl pointer-events-none">notifications</span>

2
resources/views/components/layouts/preview/header.blade.php
View File

@ -4,7 +4,7 @@
<div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 sm:rtl:space-x-reverse hide-empty-page">
<div data-page-title-first class="order-1 flex w-full items-center justify-end mb-3 sm:order-2 sm:w-6/12 sm:mb-0">
<div class="flex w-full items-center justify-end gap-3">
<h1 class="flex min-w-0 items-center justify-end text-right text-lg xl:text-xl text-black font-semibold mt-2">
<h1 class="flex min-w-0 items-center justify-end text-right text-sm text-black font-semibold mt-2">
<x-title>
{!! $title !!}
</x-title>

2
resources/views/components/layouts/signed/header.blade.php
View File

@ -4,7 +4,7 @@
<div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 sm:rtl:space-x-reverse hide-empty-page">
<div data-page-title-first class="order-1 flex w-full items-center justify-end mb-3 sm:order-2 sm:w-6/12 sm:mb-0">
<div class="flex w-full items-center justify-end gap-3">
<h1 class="flex min-w-0 items-center justify-end text-right text-lg xl:text-xl text-black font-semibold mt-2">
<h1 class="flex min-w-0 items-center justify-end text-right text-sm text-black font-semibold mt-2">
<x-title>
{!! $title !!}
</x-title>

4
resources/views/components/loading/menu.blade.php
View File

@ -11,7 +11,7 @@
x-ref="loadingMenu"
class="w-70 h-screen hidden lg:flex fixed top-0 z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
>
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div class="finance-theme-rail w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div class="flex flex-col items-center justify-center mb-7 cursor-pointer">
<span class="w-7 h-7 flex items-center justify-center text-2xl">
<div class="w-full h-full animate-pulse bg-gray-300 rounded-full"></div>
@ -43,7 +43,7 @@
</div>
</div>
<nav class="menu-list">
<nav class="finance-theme-sidebar menu-list">
<div class="relative flex items-center mb-7">
<div class="w-7 h-7 flex items-center justify-center">
<div class="w-full h-full animate-pulse bg-gray-300 rounded-full"></div>

2
resources/views/components/title.blade.php
View File

@ -5,7 +5,7 @@
@endphp
<div class="inline-flex min-w-0 items-center gap-2">
<span class="material-icons-outlined flex-none text-xl text-purple" aria-hidden="true">{{ $icon }}</span>
<span class="material-icons-outlined flex-none text-lg text-purple" aria-hidden="true">{{ $icon }}</span>
<div data-title-truncate class="truncate">
{!! $slot !!}