Files
aerologic-app/documents/5.5寸首页新样式/5.5设计图html/dashboard.html
YANG JIANKUAN 542c35b22d feat(phone): 5.5 寸手持端首页按新设计稿改版
按 documents/5.5寸首页新样式/ 设计稿还原 PDAEnterActivity 四个 Tab(仅 module_p,平板不经过该页):

- 国内/国际 Tab:分组标题栏 + 三列宫格(PdaMenuGroup / PdaMenuRenderer),分组与顺序按设计稿;
  20 个入口换新图标(源 GIF/PNG 转 PNG 放 drawable-nodpi,放 xxhdpi 会先缩后放发糊),
  设计稿未覆盖的入口追加到组尾沿用旧图标
- 权限过滤 authList.contains(key) 与改版前逐字一致:ADMIN 账号入口集合改版前后 diff 为空
  (国内 9、国际 12),21 个入口逐个点击跳转目标不变
- 首页航班动态:卡片 + 国内/国际、进港/出港分段 + 日期卡片(‹ › 翻日)+ 浅色表格 + 设置悬浮钮;
  默认方向改为进港,日期统一补零,日期选择器从当前选中日期打开
- 底部 Tab 栏(16dp 图标与文字居中)、消息铃铛与角标(四个 Tab 统一位置、切换不再移动)、
  状态栏 #3B71E8;「我的」顶栏同步新导航栏样式;首页 AutoSize 基准 400 → 390
- 删除 module_p 中不再引用的旧菜单/Tab 图标副本
- CLAUDE.md / phone-adapt skill 更新首页菜单入口说明,补图标发糊、分段控件描边与取整两个坑

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-21 13:37:04 +08:00

882 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="w-full h-full overflow-hidden" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
<title>首页</title>
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #F0F3F7;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
"HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Source Han Sans SC",
"Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button {
font: inherit;
-webkit-tap-highlight-color: transparent;
}
.app-frame,
.app-frame *,
.app-frame *::before,
.app-frame *::after {
font-family: inherit;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.app-frame {
width: 100%;
height: 100%;
max-width: min(393px, 100vw);
max-height: min(852px, 100vh);
display: flex;
flex-direction: column;
overflow: hidden;
background: #F5F7FA;
position: relative;
--nav-height: 52px;
--tab-height: 68px;
}
.nav-bar {
height: var(--nav-height);
}
.nav-title {
font-size: clamp(16px, 4.8vw, 18px);
line-height: 1.3;
font-weight: 600;
letter-spacing: clamp(0px, 0.16vw, 0.3px);
}
.nav-bell {
width: clamp(30px, 9.4vw, 34px);
height: clamp(30px, 9.4vw, 34px);
}
.nav-bell iconify-icon {
width: clamp(18px, 5.6vw, 20px);
height: clamp(18px, 5.6vw, 20px);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
.nav-badge {
min-width: clamp(21px, 6.7vw, 24px);
font-size: clamp(10px, 2.9vw, 11px);
line-height: clamp(14px, 4.2vw, 15px);
letter-spacing: 0;
}
.tab-bar {
height: var(--tab-height);
}
.tab-bar iconify-icon {
width: clamp(22px, 6.7vw, 24px);
height: clamp(22px, 6.7vw, 24px);
}
.tab-bar .tab-icon-stack {
width: clamp(25px, 7.5vw, 27px);
height: clamp(22px, 6.7vw, 24px);
}
.tab-bar .tab-icon-stack > iconify-icon:first-child {
width: clamp(20px, 6.1vw, 22px);
height: clamp(20px, 6.1vw, 22px);
}
.tab-bar .tab-icon-stack > iconify-icon:last-child {
width: clamp(15px, 4.7vw, 17px);
height: clamp(15px, 4.7vw, 17px);
}
.tab-bar .tab-label {
font-size: 11.5px;
line-height: 1.4;
font-weight: 400;
}
.tab-bar .tab-label.is-active {
font-weight: 500;
}
.status-bar {
height: clamp(26px, 8.3vw, 30px);
}
.main-scroll {
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-y: contain;
/* 为右下角悬浮的设置按钮留出避让空间,滚到底时列表不被遮挡 */
padding-bottom: calc(52px + var(--tab-height) + 16px + 20px);
}
.main-scroll::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* 航班动态设置:右下角悬浮按钮,抬升到 tab 栏之上 */
.settings-fab {
position: fixed;
z-index: 40;
right: 16px;
bottom: calc(var(--tab-height) + 16px);
width: 52px;
height: 52px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: #E8EFFD;
color: #3B71E8;
transform: translateZ(0);
box-shadow: 0 4px 14px rgba(31, 42, 51, 0.14);
cursor: pointer;
touch-action: manipulation;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.settings-fab:active {
transform: translateZ(0) scale(0.96);
box-shadow: 0 2px 8px rgba(31, 42, 51, 0.18);
}
.settings-fab:focus-visible {
outline: 2px solid rgba(59, 113, 232, 0.55);
outline-offset: 2px;
}
.settings-fab .settings-fab-icon {
width: 23px;
height: 23px;
display: block;
}
/* 主卡片:白卡 + 1px 描边 + 轻阴影,与两页统一 */
.flight-card {
margin: clamp(10px, 3vw, 14px);
background: #FFFFFF;
border: 1px solid #EDF0F4;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.card-head {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0;
padding: 10px clamp(10px, 3.4vw, 14px);
border-bottom: 1px solid #EEF1F5;
}
.card-title {
flex: none;
font-size: clamp(13px, 3.7vw, 14px);
line-height: 1.4;
font-weight: 400;
letter-spacing: 0.2px;
color: #16202A;
white-space: nowrap;
}
.scope-group {
display: flex;
align-items: center;
gap: 2px;
flex: none;
padding: 2px;
border-radius: 999px;
background: #F4F6F9;
border: 1px solid #EDF0F4;
/* 作为筛选行中的一个平级项,宽度按内容自适应,不拉伸 */
width: max-content;
max-width: 100%;
white-space: nowrap;
box-sizing: border-box;
}
.scope-option {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0 clamp(5px, 1.6vw, 8px);
height: 24px;
border-radius: 999px;
background: transparent;
color: #6B7A8D;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
white-space: nowrap;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease;
}
.scope-option.is-active {
background: #3B71E8;
color: #FFFFFF;
font-weight: 500;
}
/* 筛选行:国内/国际、进港/出港、日期控件为三个平级项。
控件本体按内容自适应,不拉伸;两段间隙为 flex 弹性间隔,
各占剩余空间的一半,因此首项贴左内边距、末项贴右内边距 */
.card-head > .scope-group,
.card-head > .date-group {
flex: 0 0 auto;
max-width: none;
white-space: nowrap;
}
.card-head > .gap-flex {
flex: 1 1 0%;
min-width: 0;
height: 1px;
}
.date-group {
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
}
.date-picker {
flex: none;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
width: 30px;
height: 34px;
padding: 0;
border: 1px solid #EDF0F4;
border-radius: 7px;
background: #FFFFFF;
color: #3B71E8;
font-size: 8px;
line-height: 1.1;
letter-spacing: 0.2px;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.date-picker:focus-visible,
.date-picker.is-open {
border-color: #3B71E8;
box-shadow: 0 0 0 2px rgba(59, 113, 232, 0.14), 0 1px 2px rgba(16, 24, 40, 0.04);
outline: none;
}
.date-picker .date-month {
font-size: 8px;
font-weight: 500;
line-height: 1.1;
color: #98A4B3;
}
.date-picker .date-day {
font-size: 13px;
font-weight: 600;
line-height: 1.1;
color: #3B71E8;
}
.date-step {
flex: none;
width: 22px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
background: transparent;
color: #16202A;
border-radius: 6px;
cursor: pointer;
}
.date-picker + .date-step,
.date-step + .date-picker {
margin-left: 3px;
}
.date-step.is-next {
margin-left: 3px;
}
.date-step iconify-icon {
display: inline-flex;
align-items: center;
}
.date-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
padding: 0;
cursor: pointer;
}
.dir-tab {
border: 0;
background: transparent;
padding: 0 clamp(5px, 1.6vw, 8px);
height: 24px;
margin: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #6B7A8D;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
transition: background-color 140ms ease, color 140ms ease;
}
.dir-tab.is-active {
background: #3B71E8;
color: #FFFFFF;
font-weight: 500;
}
.dir-tab + .dir-tab {
margin-left: 2px;
}
/* 导航栏右侧图标组:仅铃铛 */
.nav-actions {
display: flex;
align-items: center;
gap: 0;
}
.nav-icon-btn {
position: relative;
flex: none;
width: clamp(32px, 10vw, 34px);
height: clamp(32px, 10vw, 34px);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #FFFFFF;
cursor: pointer;
transition: background-color 140ms ease, opacity 140ms ease;
}
.nav-icon-btn:active {
background: rgba(255, 255, 255, 0.14);
opacity: 0.8;
}
.nav-icon-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 1px;
}
.nav-icon-btn iconify-icon {
width: clamp(17px, 5.4vw, 19px);
height: clamp(17px, 5.4vw, 19px);
}
.table-head {
display: grid;
grid-template-columns: 0.95fr 1fr 1.05fr 1fr;
align-items: center;
background: #F4F6F9;
border-bottom: 1px solid #EEF1F5;
padding: 0 4px;
}
.table-head span {
padding: 9px 4px;
text-align: center;
color: #6B7A8D;
font-size: 12.5px;
line-height: 1.4;
font-weight: 400;
letter-spacing: 0;
white-space: nowrap;
}
.table-body {
flex: 1;
min-height: 120px;
background: #FFFFFF;
}
.flight-row {
display: grid;
grid-template-columns: 0.95fr 1fr 1.05fr 1fr;
align-items: center;
padding: 0 4px;
border-bottom: 1px solid #EEF1F5;
}
.flight-row span {
padding: 9px 4px;
text-align: center;
color: #16202A;
font-size: 12.5px;
line-height: 1.4;
font-weight: 400;
letter-spacing: 0;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tab-button {
flex: 1;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 0;
background: transparent;
color: #98A4B3;
cursor: pointer;
transition: color 140ms ease, transform 140ms ease;
}
.tab-button:active {
transform: scale(0.94);
}
.tab-button.is-active {
color: #3B71E8;
}
.toast {
position: absolute;
left: 50%;
bottom: 80px;
z-index: 60;
max-width: calc(100% - 44px);
width: max-content;
padding: 9px 16px;
border-radius: 999px;
background: rgba(29, 41, 57, 0.9);
color: #ffffff;
font-size: 12px;
line-height: 1.5;
text-align: center;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 8px);
transition: opacity 180ms ease, transform 180ms ease;
box-shadow: 0 8px 24px rgba(18, 33, 49, 0.18);
backdrop-filter: blur(8px);
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* 5.51 寸小屏(窄屏或矮屏)收紧纵向节奏 */
@media (max-width: 374px), (max-height: 760px) {
.app-frame {
--nav-height: 46px;
--tab-height: 58px;
}
.nav-title {
font-size: 16px;
}
.tab-bar .tab-label {
font-size: 11px;
}
.flight-card {
margin: 8px;
}
.card-head {
gap: 0;
padding: 8px 9px;
}
.card-title {
font-size: 13px;
}
.scope-group {
gap: 2px;
padding: 2px;
}
.scope-option,
.dir-tab {
font-size: 11.5px;
height: 22px;
padding: 0 clamp(4px, 1.3vw, 7px);
}
.date-picker {
width: 27px;
height: 31px;
border-radius: 6px;
}
.settings-fab {
right: 12px;
bottom: calc(var(--tab-height) + 12px);
width: 48px;
height: 48px;
}
.settings-fab .settings-fab-icon {
width: 21px;
height: 21px;
}
.date-picker .date-month {
font-size: 7px;
}
.date-picker .date-day {
font-size: 12px;
}
.date-step {
width: 19px;
height: 31px;
}
.date-step iconify-icon {
width: 15px;
height: 15px;
}
.dir-tab {
height: 22px;
margin: 0;
}
.table-head span {
padding: 8px 2px;
font-size: 11.5px;
}
.flight-row span {
padding: 8px 2px;
font-size: 11.5px;
}
.toast {
bottom: 72px;
font-size: 11px;
line-height: 1.5;
padding: 8px 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.tab-button,
.nav-icon-btn,
.settings-fab,
.toast {
transition: none;
}
}
@media (max-width: 359px) {
.table-head,
.flight-row {
padding: 0 2px;
}
.table-head span,
.flight-row span {
padding: 8px 1px;
font-size: 10.5px;
letter-spacing: -0.2px;
}
}
</style>
</head>
<body>
<div class="app-frame">
<!-- 顶部系统状态栏 -->
<header class="flex-none bg-[#3B71E8] text-white">
<div class="status-bar flex items-center justify-between px-3">
<div class="flex items-center gap-[7px]">
<span class="text-[11.5px] font-semibold tracking-[0.2px]">16:48</span>
</div>
<div aria-label="Wi-Fi" class="flex min-w-0 items-center gap-[5px]">
<iconify-icon class="opacity-95" height="14" icon="mdi:wifi" width="14"></iconify-icon>
</div>
</div>
</header>
<!-- 蓝色导航栏 -->
<nav aria-label="首页导航栏" class="nav-bar relative z-20 flex flex-none items-center justify-center bg-[#3B71E8] text-white">
<h1 class="nav-title">首页</h1>
<div class="nav-actions absolute right-[8px] top-1/2 -translate-y-1/2">
<button aria-label="通知,507 条消息" class="nav-icon-btn text-white" onclick="showNotificationToast()" type="button">
<iconify-icon class="drop-shadow-[0_1px_1px_rgba(0,0,0,0.12)]" icon="mdi:bell-outline"></iconify-icon>
<span class="nav-badge absolute -right-[2px] top-[0px] rounded-full bg-[#e1192d] px-[4px] text-center font-semibold text-white shadow-[0_1px_2px_rgba(145,16,31,0.35)]">507</span>
</button>
</div>
</nav>
<!-- 主内容滚动区 -->
<main class="main-scroll min-h-0 flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-[#F5F7FA]" id="mainContent">
<section aria-label="航班动态" class="flight-card">
<!-- 首行:国内/国际 + 进港/出港分段 + 图标式日期 -->
<div class="card-head">
<div aria-label="国内国际" class="scope-group" role="radiogroup">
<button aria-checked="true" class="scope-option is-active" data-scope="国内" onclick="selectScope(this)" role="radio" type="button">国内</button>
<button aria-checked="false" class="scope-option" data-scope="国际" onclick="selectScope(this)" role="radio" type="button">国际</button>
</div>
<span aria-hidden="true" class="gap-flex"></span>
<div aria-label="进港出港方向" class="scope-group" role="radiogroup">
<button aria-checked="true" class="dir-tab is-active" data-dir="进港" onclick="selectDirection(this)" role="radio" type="button">进港</button>
<button aria-checked="false" class="dir-tab" data-dir="出港" onclick="selectDirection(this)" role="radio" type="button">出港</button>
</div>
<span aria-hidden="true" class="gap-flex"></span>
<div class="date-group">
<button aria-label="前一天" class="date-step date-step-prev" data-date-step="-1" onclick="stepDate(-1)" type="button">
<iconify-icon height="18" icon="mdi:chevron-left" width="18"></iconify-icon>
</button>
<button aria-label="选择日期" class="date-picker" id="datePicker" type="button">
<span class="date-month" id="dateMonth">10月</span>
<span class="date-day" id="dateDay">20</span>
<input aria-label="日期" class="date-input" id="dateInput" type="date" value="2026-10-20"/>
</button>
<button aria-label="后一天" class="date-step is-next" data-date-step="1" onclick="stepDate(1)" type="button">
<iconify-icon height="18" icon="mdi:chevron-right" width="18"></iconify-icon>
</button>
</div>
</div>
<!-- 表头 -->
<div class="table-head" role="row">
<span role="columnheader">航班号</span>
<span role="columnheader">航程</span>
<span role="columnheader">地区类型</span>
<span role="columnheader">计划起飞</span>
</div>
<!-- 数据区 -->
<div aria-label="航班动态列表" class="table-body">
<div class="flight-row" role="row">
<span role="cell">MU2222</span>
<span role="cell">HFE-PEK</span>
<span role="cell">国内</span>
<span role="cell">12:20</span>
</div>
<div class="flight-row" role="row">
<span role="cell">MU6895</span>
<span role="cell">HFE-LAX</span>
<span role="cell">国际</span>
<span role="cell">02:26</span>
</div>
</div>
</section>
</main>
<!-- 右下角悬浮:航班动态设置 -->
<button aria-label="航班动态设置" class="settings-fab" onclick="showToast('航班动态设置')" type="button">
<svg aria-hidden="true" class="settings-fab-icon" focusable="false" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" fill="#3B71E8"></path>
</svg>
</button>
<!-- 底部 Tab 栏 -->
<nav aria-label="底部导航" class="tab-bar relative z-30 flex flex-none items-stretch border-t border-[#EDF0F4] bg-white pb-[4px] shadow-[0_-1px_2px_rgba(16,24,40,0.04)]">
<button aria-current="page" aria-label="首页,当前页面" class="tab-button is-active" onclick="switchTab('首页')" type="button">
<iconify-icon icon="mdi:home"></iconify-icon>
<span class="tab-label is-active">首页</span>
</button>
<button aria-label="国内" class="tab-button" onclick="switchTab('国内')" type="button">
<iconify-icon icon="mdi:earth"></iconify-icon>
<span class="tab-label">国内</span>
</button>
<button aria-label="国际" class="tab-button" onclick="switchTab('国际')" type="button">
<span class="tab-icon-stack relative inline-flex items-center justify-center">
<iconify-icon class="absolute bottom-0 left-0" icon="mdi:earth"></iconify-icon>
<iconify-icon class="absolute right-0 top-0 -rotate-[14deg]" icon="mdi:airplane"></iconify-icon>
</span>
<span class="tab-label">国际</span>
</button>
<button aria-label="我的" class="tab-button" onclick="switchTab('我的')" type="button">
<iconify-icon icon="mdi:account-circle-outline"></iconify-icon>
<span class="tab-label">我的</span>
</button>
</nav>
<div aria-live="polite" class="toast" id="toast" role="status"></div>
</div>
<script>
let toastTimer = null;
function showToast(message) {
const toast = document.getElementById("toast");
if (!toast) return;
toast.textContent = message;
toast.classList.add("is-visible");
if (toastTimer) {
clearTimeout(toastTimer);
}
toastTimer = setTimeout(function () {
toast.classList.remove("is-visible");
}, 1800);
}
function showNotificationToast() {
showToast("您有 507 条待处理消息");
}
function selectScope(target) {
const options = document.querySelectorAll(".scope-option");
for (let i = 0; i < options.length; i++) {
const isTarget = options[i] === target;
options[i].classList.toggle("is-active", isTarget);
options[i].setAttribute("aria-checked", isTarget ? "true" : "false");
}
}
function selectDirection(target) {
const tabs = document.querySelectorAll(".dir-tab");
for (let i = 0; i < tabs.length; i++) {
const isTarget = tabs[i] === target;
tabs[i].classList.toggle("is-active", isTarget);
tabs[i].setAttribute("aria-checked", isTarget ? "true" : "false");
}
}
function switchTab(name) {
if (name === "国内") {
window.location.href = "domestic.html";
return;
}
if (name === "国际") {
window.location.href = "home.html";
return;
}
if (name === "首页") {
const main = document.getElementById("mainContent");
if (main) {
main.scrollTo({ top: 0, behavior: "smooth" });
}
showToast("当前已在首页");
return;
}
showToast(name + "模块暂未接入");
}
(function () {
const datePicker = document.getElementById("datePicker");
const dateInput = document.getElementById("dateInput");
const dateMonth = document.getElementById("dateMonth");
const dateDay = document.getElementById("dateDay");
if (!datePicker || !dateInput || !dateMonth || !dateDay) return;
function renderDate(value) {
if (!value) return;
const parts = value.split("-");
const month = parseInt(parts[1], 10);
const day = parseInt(parts[2], 10);
if (!month || !day) return;
dateMonth.textContent = month + "月";
dateDay.textContent = String(day);
datePicker.setAttribute("aria-label", "选择日期,当前 " + month + "月" + day + "日");
}
window.stepDate = function (offset) {
const parts = dateInput.value.split("-");
const current = new Date(
parseInt(parts[0], 10) || 2026,
(parseInt(parts[1], 10) || 1) - 1,
parseInt(parts[2], 10) || 1
);
current.setDate(current.getDate() + offset);
const y = current.getFullYear();
const m = String(current.getMonth() + 1).padStart(2, "0");
const d = String(current.getDate()).padStart(2, "0");
dateInput.value = y + "-" + m + "-" + d;
renderDate(dateInput.value);
};
renderDate(dateInput.value);
datePicker.addEventListener("click", function (event) {
if (event.target === dateInput) return;
if (typeof dateInput.showPicker === "function") {
try {
dateInput.showPicker();
} catch (error) {
dateInput.focus();
}
}
});
dateInput.addEventListener("focus", function () {
datePicker.classList.add("is-open");
});
dateInput.addEventListener("blur", function () {
datePicker.classList.remove("is-open");
});
dateInput.addEventListener("change", function () {
if (dateInput.value) {
renderDate(dateInput.value);
}
});
})();
</script>
</body>
</html>