🔀 合并手机导航与日期布局修复到生产分支
从已验证的 test/custom-admin-ui 分支合并导航对比度和趋势日期单行布局修复。\n\n- 测试环境已通过 48 组响应式与明暗模式回归\n- 320/390px 日期单行且无溢出\n- 浅色与深色导航对比度均通过专项验证
This commit is contained in:
@@ -214,36 +214,39 @@ const updatePart = (part: DatePart, value: string) => {
|
|||||||
|
|
||||||
@media (max-width: 639px) {
|
@media (max-width: 639px) {
|
||||||
:global(.analytics-date-range) {
|
:global(.analytics-date-range) {
|
||||||
--native-date-width: 100%;
|
--native-date-width: auto;
|
||||||
display: grid !important;
|
display: flex !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template-columns: minmax(0, 1fr);
|
flex-wrap: nowrap !important;
|
||||||
gap: 0.5rem !important;
|
gap: 0.2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.native-date-strip {
|
.native-date-strip {
|
||||||
|
width: min-content;
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1 1 0;
|
||||||
min-height: 2.75rem;
|
min-height: 2.75rem;
|
||||||
padding-inline: 0.5rem;
|
padding-inline: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.native-date-part {
|
.native-date-part {
|
||||||
height: 2.75rem;
|
height: 2.75rem;
|
||||||
min-width: 2.75rem;
|
min-width: 0;
|
||||||
font-size: 0.9rem;
|
font-size: clamp(0.75rem, 3.4vw, 0.9rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.native-date-year {
|
.native-date-year {
|
||||||
width: 5.25rem;
|
width: clamp(3.35rem, 15vw, 4rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.native-date-month,
|
.native-date-month,
|
||||||
.native-date-day {
|
.native-date-day {
|
||||||
width: 2.75rem;
|
width: clamp(1.7rem, 8vw, 2.2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.native-date-separator {
|
.native-date-separator {
|
||||||
margin-inline: clamp(0.12ch, 0.55vw, 0.3ch);
|
margin-inline: 0;
|
||||||
font-size: clamp(0.8rem, 3.65vw, 0.95rem);
|
font-size: clamp(0.72rem, 3vw, 0.85rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -14,11 +14,11 @@
|
|||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<aside
|
<aside
|
||||||
ref="sidebarRef"
|
ref="sidebarRef"
|
||||||
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="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r shadow-2xl lg:relative lg:h-screen lg:translate-x-0 lg:shadow-none"
|
||||||
:class="[
|
:class="[
|
||||||
isDarkMode
|
isDarkMode
|
||||||
? 'border-[#31454d] bg-[#1a2930]/92 backdrop-filter backdrop-blur-xl'
|
? 'border-[#3d555f] bg-[#18282f]'
|
||||||
: 'border-[#c8d7da] bg-[#f2f6f5]/92 backdrop-blur-xl',
|
: 'border-[#b8cbd0] bg-[#f9fcfc]',
|
||||||
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
|
isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
|
||||||
'transition-transform duration-300 ease-in-out lg:transition-none'
|
'transition-transform duration-300 ease-in-out lg:transition-none'
|
||||||
]"
|
]"
|
||||||
@@ -26,29 +26,29 @@
|
|||||||
<!-- Logo区域 -->
|
<!-- Logo区域 -->
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between h-16 px-4 border-b"
|
class="flex items-center justify-between h-16 px-4 border-b"
|
||||||
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
|
:class="[isDarkMode ? 'border-[#3d555f]' : 'border-[#c8d7da]']"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div
|
<div
|
||||||
class="rounded-full bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] 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-[#1a2930]' : 'bg-[#f2f6f5]']">
|
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#18282f]' : 'bg-white']">
|
||||||
<BoxIcon
|
<BoxIcon
|
||||||
class="w-6 h-6"
|
class="w-6 h-6"
|
||||||
:class="[isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']"
|
:class="[isDarkMode ? 'text-[#b9dbe2]' : 'text-[#356b7d]']"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h1
|
<h1
|
||||||
@click="router.push('/')"
|
@click="router.push('/')"
|
||||||
class="ml-2 text-xl font-semibold cursor-pointer"
|
class="ml-2 text-xl font-semibold cursor-pointer"
|
||||||
:class="[isDarkMode ? 'text-[#edf4f4]' : 'text-[#2d4650]']"
|
:class="[isDarkMode ? 'text-white' : 'text-[#173b47]']"
|
||||||
>
|
>
|
||||||
{{ t('common.appName') }}
|
{{ t('common.appName') }}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" :aria-label="t('common.closeMenu')" :title="t('common.closeMenu')" @click="closeSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg lg:hidden">
|
<button type="button" :aria-label="t('common.closeMenu')" :title="t('common.closeMenu')" @click="closeSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg transition-colors lg:hidden" :class="[isDarkMode ? 'hover:bg-[#294047]' : 'hover:bg-[#e5eff1]']">
|
||||||
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
|
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-[#d7e6e9]' : 'text-[#294b56]']" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -62,11 +62,11 @@
|
|||||||
:class="[
|
:class="[
|
||||||
route.name === item.id
|
route.name === item.id
|
||||||
? isDarkMode
|
? isDarkMode
|
||||||
? 'border-[#a5c8d0] bg-[#294047] text-[#dceff1]'
|
? 'border-[#8bc2cf] bg-[#29454f] text-white shadow-sm'
|
||||||
: 'border-[#6f98a6] bg-[#d5e4e6] text-[#315c69]'
|
: 'border-[#327a91] bg-[#dcecef] text-[#123f4e] shadow-sm'
|
||||||
: isDarkMode
|
: isDarkMode
|
||||||
? 'border-transparent text-[#aebfc3] hover:bg-[#22353c]'
|
? 'border-transparent text-[#d0dee1] hover:bg-[#223942] hover:text-white'
|
||||||
: 'border-transparent text-[#586f75] hover:bg-[#e5eeee]'
|
: 'border-transparent text-[#294b56] hover:bg-[#e8f1f2] hover:text-[#163d49]'
|
||||||
]"
|
]"
|
||||||
@click="closeSidebarForMobile"
|
@click="closeSidebarForMobile"
|
||||||
>
|
>
|
||||||
@@ -78,14 +78,14 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- 退出登录按钮 -->
|
<!-- 退出登录按钮 -->
|
||||||
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
|
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#3d555f]' : 'border-[#c8d7da]']">
|
||||||
<button
|
<button
|
||||||
@click="handleLogout"
|
@click="handleLogout"
|
||||||
class="flex min-h-11 w-full items-center rounded-lg p-2 transition-colors duration-200"
|
class="flex min-h-11 w-full items-center rounded-lg p-2 transition-colors duration-200"
|
||||||
:class="[
|
:class="[
|
||||||
isDarkMode
|
isDarkMode
|
||||||
? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
|
? 'text-[#d0dee1] hover:bg-[#223942] hover:text-white'
|
||||||
: 'text-[#586f75] hover:bg-[#e5eeee] hover:text-[#2d4650]'
|
: 'text-[#36535c] hover:bg-[#e8f1f2] hover:text-[#173b47]'
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<LogOutIcon class="w-5 h-5 mr-3" />
|
<LogOutIcon class="w-5 h-5 mr-3" />
|
||||||
|
|||||||
Reference in New Issue
Block a user