eric/aerologic-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成国际出港移库/出库交接页面5.5寸手机端适配

Browse Source 
- 落地手机端双形态适配框架：同名布局+资源限定符（layout/手机、
  layout-sw600dp/平板）自动切换，DeviceUtil 设备形态判定，7个
  手机版公共组件（PhoneSearchBar/StatusTab/DataLayout/FilterPanel/
  BottomBar/StatBox/KvItem）
- 完成「国际出港移库」「国际出港出库交接」两页手机端适配，新增
  各自详情页（IntExpMoveDetailActivity/IntExpOutHandoverDetailActivity）
- 手机端首页菜单接入"出港移库""出库交接"入口
- 修复手机端进入页面先横屏后转竖屏的闪屏问题：Manifest 全项目
  192 处改为 screenOrientation="unspecified"，由 BaseActivity
  按设备形态运行时锁定方向
- 修复该方案的中间版本在平板端引入的回归（先竖后横 + UI放大1.6倍）
- AutoSize 补充手机竖屏 390×844 设计基准
- 修复 CHANGELOG.md 因脚本异常导致的内容重复损坏（膨胀至12万行），
  恢复正常结构并补充本次变更记录

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
杨建宽
2026-07-29 14:18:29 +08:00
parent 9c4588e47e
commit db062c8ee3
134 changed files with 19602 additions and 2965 deletions
Download Patch File Download Diff File Expand all files Collapse all files

650
documents/5.5寸手持端设计文件/01_ULD管理/ULD管理.html Normal file
View File

@@ -0,0 +1,650 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ULD管理</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>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #F3F4F6;
font-size: 13px;
}
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.custom-checkbox-round {
appearance: none;
-webkit-appearance: none;
border-radius: 9999px;
width: 18px;
height: 18px;
border: 2px solid #D1D5DB;
background-color: #fff;
position: relative;
cursor: pointer;
outline: none;
flex-shrink: 0;
}
.custom-checkbox-round:checked {
background-color: #0D6EFD;
border-color: #0D6EFD;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.btn-active:active {
opacity: 0.7;
}
</style>
</head>
<body class="bg-gray-200 min-h-screen flex items-center justify-center p-4">
<div class="relative w-[390px] h-[844px] bg-[#1a1a1a] rounded-[55px] shadow-2xl border-[6px] border-[#333] flex flex-col overflow-hidden">
<div class="flex-1 bg-white mt-0 mb-1 mx-1 rounded-[46px] overflow-hidden flex flex-col relative">
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50">
<span>09:41</span>
<div class="flex items-center gap-1.5 pb-0.5">
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
<iconify-icon icon="mdi:wifi"></iconify-icon>
<iconify-icon icon="mdi:battery"></iconify-icon>
</div>
</div>
<div class="flex-1 flex flex-col overflow-hidden relative bg-gray-100">
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 sticky top-0 z-50">
<div class="flex items-center btn-active" onclick="alert('返回首页')">
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
<span class="text-sm font-medium text-white -ml-1">返回</span>
</div>
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD管理</h1>
</header>
<section class="px-4 pt-4 pb-3 flex-none">
<div class="flex items-center gap-2">
<div class="flex items-center bg-white border border-gray-200 rounded-[12px] h-10 px-3 gap-2 flex-1 shadow-sm">
<iconify-icon class="text-gray-500 text-[14px] text-lg flex-none" icon="mdi:magnify"></iconify-icon>
<input class="flex-1 bg-transparent text-[14px] text-gray-700 placeholder-gray-400 outline-none border-none rounded-lg px-2" placeholder="搜索ULD编号" type="text"/>
<button class="flex-none text-blue-500">
<iconify-icon class="text-lg" icon="mdi:qrcode-scan"></iconify-icon>
</button>
</div>
<button class="bg-white p-2.5 rounded-full shadow-sm border border-gray-200 text-[#2563EB] flex items-center justify-center flex-none" onclick="toggleFilterDrawer(true)">
<iconify-icon class="text-lg" icon="mdi:filter-variant"></iconify-icon>
</button>
</div>
</section>
<main class="flex-1 overflow-y-auto px-4 pt-3 pb-[80px] no-scrollbar">
<!-- 卡片1 -->
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363396', '占用', 'CA', '150', '12.5', '6800', 'CA1111', 'PEK', 'B区-05货位', '--')">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363396</span>
</div>
<div class="flex items-center gap-1">
<span class="bg-[#FFF3E0] text-[#E67722] text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">占用</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
</div>
</div>
<div class="space-y-2 text-gray-500 text-[13px]">
<div class="grid grid-cols-2 gap-x-3">
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
<span>所属航司：CA</span>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
<span>来源：空运</span>
</div>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
<span>入库时间：2026-07-20 15:59:20</span>
</div>
</div>
</div>
<!-- 卡片2 -->
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363397', '可用', 'CA', '120', '10.0', '5500', 'CA2222', 'CAN', 'C区-12货位', '--')">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363397</span>
</div>
<div class="flex items-center gap-1">
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">可用</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
</div>
</div>
<div class="space-y-2 text-gray-500 text-[13px]">
<div class="grid grid-cols-2 gap-x-3">
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
<span>所属航司：CA</span>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
<span>来源：空运</span>
</div>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
<span>入库时间：2026-07-20 15:59:20</span>
</div>
</div>
</div>
<!-- 卡片3 -->
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363398', '维修', 'CA', '0', '0.0', '0', 'CA3333', 'PVG', '维修区', '维修中')">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363398</span>
</div>
<div class="flex items-center gap-1">
<span class="bg-red-50 text-red-600 text-[11px] px-2 py-0.5 rounded font-medium">维修</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
</div>
</div>
<div class="space-y-2 text-gray-500 text-[13px]">
<div class="grid grid-cols-2 gap-x-3">
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
<span>所属航司：CA</span>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
<span>来源：陆运</span>
</div>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
<span>入库时间：2026-07-20 15:59:20</span>
</div>
</div>
</div>
<!-- 卡片4 -->
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363399', '占用', 'CA', '280', '20.0', '8500', 'CA4444', 'CTU', 'A区-08货位', '--')">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363399</span>
</div>
<div class="flex items-center gap-1">
<span class="bg-[#FFF3E0] text-[#E67722] text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">占用</span>
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
</div>
</div>
<div class="space-y-2 text-gray-500 text-[13px]">
<div class="grid grid-cols-2 gap-x-3">
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
<span>所属航司：CA</span>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
<span>来源：空运</span>
</div>
</div>
<div class="flex items-center gap-1.5">
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
<span>入库时间：2026-07-20 15:59:20</span>
</div>
</div>
</div>
</main>
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-3 pb-3" id="bottom-toolbar" style="display: flex;">
<div class="absolute right-4 -top-[73px] z-50">
<button class="bg-[#2563EB] text-white w-11 h-11 rounded-full flex items-center justify-center shadow-lg shadow-blue-500/40" onclick="showAddDialog()">
<iconify-icon icon="mdi:plus" width="24"></iconify-icon>
</button>
</div>
<div class="px-4 flex items-center w-full">
<div class="flex items-center gap-2">
<input class="custom-checkbox-round flex-none" id="select-all-cb" onclick="toggleSelectAll(this.checked)" type="checkbox"/>
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
</div>
<div class="flex-1"></div>
<div class="flex items-center gap-3">
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0 / 4</span> 项</span>
<button class="bg-[#FDEDED] text-[#DC2626] text-[15px] font-bold px-5 py-2 rounded-[10px] flex items-center gap-1.5 btn-active" onclick="handleBatchDelete()">
<iconify-icon class="text-base" icon="mdi:delete-outline"></iconify-icon>
<span>删除</span>
</button>
</div>
</div>
</div>
</div>
<!-- 新增弹窗 -->
<div class="absolute inset-0 bg-gray-100 z-[60] flex flex-col hidden" id="addUldOverlay">
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
<span>09:41</span>
<div class="flex items-center gap-1.5 pb-0.5">
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
<iconify-icon icon="mdi:wifi"></iconify-icon>
<iconify-icon icon="mdi:battery"></iconify-icon>
</div>
</div>
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
<div class="flex items-center btn-active" onclick="hideAddDialog()">
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
<span class="text-sm font-medium text-white -ml-1">返回</span>
</div>
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD新增</h1>
</header>
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
<div class="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.05)] overflow-hidden px-4">
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">ULD编号<span class="text-red-500 ml-0.5">*</span></span>
<input id="add-uldNo" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入ULD编号" type="text"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">状态</span>
<div class="flex-1 flex items-center justify-between cursor-pointer status-display" onclick="showSelectPanel('status', '请选择状态', ['可用', '占用', '维修'])">
<span id="add-status-text" class="text-[14px] text-gray-500">请选择状态</span>
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
</div>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所属航司</span>
<div class="flex-1 flex items-center justify-between cursor-pointer airline-display" onclick="showSelectPanel('airline', '请选择所属航司', ['CA', 'MU', 'CZ', '3U'])">
<span id="add-airline-text" class="text-[14px] text-gray-500">请选择所属航司</span>
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
</div>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">来源</span>
<div class="flex-1 flex items-center justify-between cursor-pointer source-display" onclick="showSelectPanel('source', '请选择来源', ['空运', '陆运'])">
<span id="add-source-text" class="text-[14px] text-gray-500">请选择来源</span>
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
</div>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">自重(kg)<span class="text-red-500 ml-0.5">*</span></span>
<input id="add-weight" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入自重" type="number"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">进港航班号</span>
<input id="add-flightNo" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入进港航班号" type="text"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所在港</span>
<input id="add-port" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="HFE" type="text"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">入库时间<span class="text-red-500 ml-0.5">*</span></span>
<input id="add-inTime" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入入库时间" type="text"/>
</div>
<div class="flex items-center py-[14px]">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">备注</span>
<input id="add-remark" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入备注" type="text"/>
</div>
</div>
<button class="w-full mt-8 bg-[#2563EB] text-white py-3.5 rounded-[10px] font-bold text-[16px] shadow-lg shadow-blue-500/30 btn-active" onclick="saveUld()">保存</button>
</div>
</div>
<!-- 详情弹窗 -->
<div class="absolute inset-0 bg-gray-100 z-[70] flex flex-col hidden" id="detailOverlay">
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
<span>09:41</span>
<div class="flex items-center gap-1.5 pb-0.5">
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
<iconify-icon icon="mdi:wifi"></iconify-icon>
<iconify-icon icon="mdi:battery"></iconify-icon>
</div>
</div>
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
<div class="flex items-center btn-active" onclick="hideUldDetail()">
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
<span class="text-sm font-medium text-white -ml-1">返回</span>
</div>
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD详情</h1>
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-lg" onclick="openEdit()">
<iconify-icon icon="mdi:pencil" width="22"></iconify-icon>
</button>
</header>
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
<div class="bg-white rounded-xl shadow-sm overflow-hidden px-4 mb-6">
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">ULD编号</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-uldNo">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">状态</span>
<span class="text-[13px] font-medium px-2 py-0.5 rounded-[6px]" id="detail-status">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">所属航司</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-airline">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">自重 (kg)</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-weight">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">最大装载容积 (m³)</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-volume">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">最大载重 (kg)</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-maxWeight">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">进港航班号</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-flightNo">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">所在港</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-port">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">来源</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-source">--</span>
</div>
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
<span class="text-[13px] font-medium text-[#6B7280]">入库时间</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-inTime">--</span>
</div>
<div class="flex items-center justify-between py-3.5">
<span class="text-[13px] font-medium text-[#6B7280]">备注</span>
<span class="text-[14px] font-normal text-[#111827]" id="detail-remark">--</span>
</div>
</div>
</div>
</div>
<!-- 修改页面 -->
<div class="absolute inset-0 bg-gray-100 z-[80] flex flex-col hidden" id="editOverlay">
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
<span>09:41</span>
<div class="flex items-center gap-1.5 pb-0.5">
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
<iconify-icon icon="mdi:wifi"></iconify-icon>
<iconify-icon icon="mdi:battery"></iconify-icon>
</div>
</div>
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
<div class="flex items-center btn-active" onclick="closeEdit()">
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
<span class="text-sm font-medium text-white -ml-1">返回</span>
</div>
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD修改</h1>
</header>
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
<div class="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.05)] overflow-hidden px-4">
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">ULD编号</span>
<input id="edit-uldNo" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text" readonly/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">状态</span>
<div class="flex-1 flex items-center justify-between cursor-pointer status-display" onclick="showSelectPanel('editStatus', '请选择状态', ['可用', '占用', '维修'])">
<span id="edit-status-text" class="text-[13px] font-medium px-2 py-0.5 rounded-[6px] text-gray-800">--</span>
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
</div>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所属航司</span>
<div class="flex-1 flex items-center justify-between cursor-pointer airline-display" onclick="showSelectPanel('editAirline', '请选择航司', ['CA', 'MU', 'CZ', '3U'])">
<span id="edit-airline-text" class="text-[14px] text-gray-800">--</span>
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
</div>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">自重(kg)</span>
<input id="edit-weight" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="number"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">进港航班号</span>
<input id="edit-flightNo" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所在港</span>
<input id="edit-port" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">来源</span>
<div class="flex-1 flex items-center justify-between cursor-pointer source-display" onclick="showSelectPanel('editSource', '请选择来源', ['空运', '陆运'])">
<span id="edit-source-text" class="text-[14px] text-gray-800">--</span>
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
</div>
</div>
<div class="flex items-center py-[14px] border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">入库时间</span>
<input id="edit-inTime" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
</div>
<div class="flex items-center py-[14px]">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">备注</span>
<input id="edit-remark" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
</div>
</div>
<button class="w-full mt-8 bg-[#2563EB] text-white py-3.5 rounded-[10px] font-bold text-[16px] shadow-lg shadow-blue-500/30 btn-active" onclick="saveEdit()">保存</button>
</div>
</div>
<!-- 筛选弹窗 -->
<div class="absolute inset-0 z-[100] bg-black/50 flex items-end justify-center" id="filterOverlay" onclick="toggleFilterDrawer(false)" style="display: none;">
<div class="bg-white rounded-t-[20px] w-full max-w-[390px] px-5 pt-6 pb-8" onclick="event.stopPropagation()">
<div class="relative flex items-center justify-center mb-6">
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
</button>
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
</div>
<div class="space-y-5">
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">入库时间</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入入库时间" type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:calendar" width="18"></iconify-icon>
</div>
</div>
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">进港航班号</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入进港航班号" type="text"/>
</div>
</div>
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">所属航司</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择所属航司" readonly type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
</div>
</div>
<div>
<label class="block text-[14px] text-gray-700 mb-1.5">来源</label>
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择来源" readonly type="text"/>
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
</div>
</div>
</div>
<div class="flex gap-3 mt-8">
<button class="flex-1 h-11 text-[15px] font-medium text-gray-600 bg-white border border-gray-200 rounded-[10px]" onclick="resetFilter()">重置</button>
<button class="flex-1 h-11 text-[15px] font-medium text-white bg-[#2563EB] rounded-[10px] shadow-sm" onclick="confirmFilter()">确认</button>
</div>
</div>
</div>
<!-- 选择面板 -->
<div class="fixed inset-0 z-[100] bg-black/40 flex items-end justify-center" id="selectPanel" onclick="hideSelectPanel(event)" style="display: none;">
<div class="bg-white rounded-t-[20px] w-full max-w-[390px] px-4 pt-4 pb-8" onclick="event.stopPropagation()">
<div class="flex items-center justify-between mb-4">
<div class="w-6"></div>
<div class="text-center text-[16px] font-bold text-gray-900" id="selectPanelTitle">请选择</div>
<button class="w-6 h-6 flex items-center justify-center text-gray-500" onclick="hideSelectPanel()">
<iconify-icon icon="mdi:close" width="20"></iconify-icon>
</button>
</div>
<div class="space-y-1" id="selectPanelOptions"></div>
</div>
</div>
</div>
</div>
<script>
let currentDetail = {};
function showUldDetail(uldNo, status, airline, weight, volume, maxWeight, flightNo, port, location, remark) {
currentDetail = { uldNo, status, airline, weight, volume, maxWeight, flightNo, port, location, remark };
document.getElementById('detail-uldNo').innerText = uldNo;
document.getElementById('detail-airline').innerText = airline;
document.getElementById('detail-weight').innerText = weight;
document.getElementById('detail-volume').innerText = volume;
document.getElementById('detail-maxWeight').innerText = maxWeight;
document.getElementById('detail-flightNo').innerText = flightNo;
document.getElementById('detail-port').innerText = port;
document.getElementById('detail-remark').innerText = remark;
document.getElementById('detail-inTime').innerText = "2026-07-20 15:59:20";
document.getElementById('detail-source').innerText = "空运";
const st = document.getElementById('detail-status');
st.innerText = status;
st.className = 'text-[11px] px-2 rounded-[6px] font-medium leading-none h-5 flex items-center';
if (status === '占用') {
st.classList.add('bg-orange-100', 'text-orange-600');
} else if (status === '可用') {
st.classList.add('bg-green-100','text-green-600');
} else if (status === '维修') {
st.classList.add('bg-red-100','text-red-600');
} else {
st.className = 'text-[14px] font-normal text-[#111827]';
}
document.getElementById('detailOverlay').classList.remove('hidden');
}
function hideUldDetail() {
document.getElementById('detailOverlay').classList.add('hidden');
}
function openEdit() {
document.getElementById('editOverlay').classList.remove('hidden');
document.getElementById('edit-uldNo').value = currentDetail.uldNo;
document.getElementById('edit-weight').value = currentDetail.weight;
document.getElementById('edit-flightNo').value = currentDetail.flightNo;
document.getElementById('edit-port').value = currentDetail.port;
document.getElementById('edit-inTime').value = "2026-07-20 15:59:20";
document.getElementById('edit-remark').value = currentDetail.remark;
const st = document.getElementById('edit-status-text');
st.textContent = currentDetail.status;
st.className = 'text-[13px] font-medium px-2 py-0.5 rounded-[6px]';
if (currentDetail.status === '占用') {
st.classList.add('bg-[#FFF3E0]','text-[#E67722]');
} else if (currentDetail.status === '可用') {
st.classList.add('bg-green-100','text-green-600');
} else if (currentDetail.status === '维修') {
st.classList.add('bg-red-100','text-red-600');
} else {
st.classList.add('text-gray-800');
}
document.getElementById('edit-airline-text').textContent = currentDetail.airline;
document.getElementById('edit-source-text').textContent = '空运';
}
function closeEdit() {
document.getElementById('editOverlay').classList.add('hidden');
}
function saveEdit() {
alert('修改成功');
closeEdit();
hideUldDetail();
}
function toggleFilterDrawer(show) {
document.getElementById('filterOverlay').style.display = show ? 'flex' : 'none';
}
function resetFilter() {
document.querySelectorAll('#filterOverlay input').forEach(i=>i.value='');
}
function confirmFilter() {
toggleFilterDrawer(false);
}
function toggleSelectAll(checked) {
document.querySelectorAll('main .custom-checkbox-round').forEach(cb=>cb.checked=checked);
updateSelectedCount();
}
function handleCheckboxClick() {
updateSelectedCount();
}
function updateSelectedCount() {
const total = document.querySelectorAll('main .custom-checkbox-round').length;
const ckd = document.querySelectorAll('main .custom-checkbox-round:checked').length;
document.getElementById('selected-count').innerText = ckd+' / '+total;
document.getElementById('select-all-cb').checked = total > 0 && total === ckd;
}
function showAddDialog() {
document.getElementById('addUldOverlay').classList.remove('hidden');
}
function hideAddDialog() {
document.getElementById('addUldOverlay').classList.add('hidden');
}
function saveUld() {
alert('保存成功');
hideAddDialog();
}
let currentSelectField = '';
function showSelectPanel(field, title, options) {
currentSelectField = field;
document.getElementById('selectPanelTitle').textContent = title;
const box = document.getElementById('selectPanelOptions');
box.innerHTML = '';
options.forEach(opt=>{
const d = document.createElement('div');
d.className = 'py-3 px-4 text-center border-b cursor-pointer hover:bg-gray-50';
if(field.includes('status')){
let cls = opt=='占用'?'bg-[#FFF3E0] text-[#E67722]':
opt=='可用'?'bg-green-100 text-green-600':'bg-red-100 text-red-600';
d.innerHTML = `<span class="${cls} px-2 py-0.5 rounded-[6px] text-sm font-medium">${opt}</span>`;
} else {
d.textContent = opt;
}
d.onclick = ()=>{
if(field === 'editStatus'){
const t = document.getElementById('edit-status-text');
t.textContent = opt;
t.className = 'text-[13px] font-medium px-2 py-0.5 rounded-[6px]';
if(opt=='占用'){
t.classList.add('bg-[#FFF3E0]','text-[#E67722]');
}
if(opt=='可用')t.classList.add('bg-green-100','text-green-600');
if(opt=='维修')t.classList.add('bg-red-100','text-red-600');
}
if(field === 'editAirline') document.getElementById('edit-airline-text').textContent = opt;
if(field === 'editSource') document.getElementById('edit-source-text').textContent = opt;
if(field === 'status') document.getElementById('add-status-text').textContent = opt;
if(field === 'airline') document.getElementById('add-airline-text').textContent = opt;
if(field === 'source') document.getElementById('add-source-text').textContent = opt;
hideSelectPanel();
};
box.appendChild(d);
});
document.getElementById('selectPanel').style.display = 'flex';
}
function hideSelectPanel() {
document.getElementById('selectPanel').style.display = 'none';
}
function handleBatchDelete() {
const ckd = document.querySelectorAll('main .custom-checkbox-round:checked').length;
if(ckd===0)return alert('请选择');
if(confirm('确定删除？')) alert('删除成功');
}
</script>
</body>
</html>