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

- 落地手机端双形态适配框架:同名布局+资源限定符(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

View File

@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #F3F4F6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
}
/* 统一手机外壳容器 */
.phone-container {
width: 390px;
height: 844px;
background: #1a1a1a;
border-radius: 55px;
border: 8px solid #1F2937;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
position: relative;
}
/* 手机内部屏幕区域 */
.phone-screen {
flex: 1;
background: #F2F5F9;
margin: 0 4px 4px 4px;
border-radius: 46px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card-animate {
animation: fadeInUp 0.35s ease forwards;
opacity: 0;
}
.card-animate:nth-child(1) { animation-delay: 0s; }
.card-animate:nth-child(2) { animation-delay: 0.05s; }
.card-animate:nth-child(3) { animation-delay: 0.1s; }
.card-animate:nth-child(4) { animation-delay: 0.15s; }
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.animate-slideUp { animation: slideUp 0.3s ease-out; }
input { transition: all 0.2s ease; }
input:focus { transition: all 0.2s ease; }
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body>
<div class="phone-container">
<div class="phone-screen">
<!-- ===== ① 顶部连体蓝色区域(状态栏+导航栏) ===== -->
<div class="bg-[#2563EB] flex flex-col flex-none">
<!-- 手机状态栏 -->
<div class="flex items-center justify-between h-[28px] text-white text-[12px] px-6">
<span class="text-white font-medium tracking-wide">09:10</span>
<div class="flex items-center gap-[5px]">
<iconify-icon class="text-white text-[13px]" icon="mdi:signal-cellular-3"></iconify-icon>
<iconify-icon class="text-white text-[13px]" icon="mdi:wifi"></iconify-icon>
<iconify-icon class="text-white text-[15px]" icon="mdi:battery"></iconify-icon>
</div>
</div>
<!-- 导航栏 -->
<header class="text-white h-12 flex items-center px-4">
<button class="flex items-center gap-0.5 text-white font-medium text-[15px] active:opacity-70 transition-opacity" onclick="window.location.href='main.html'">
<iconify-icon class="text-white" height="24" icon="mdi:chevron-left" width="24"></iconify-icon>
<span>返回</span>
</button>
<h1 class="flex-1 text-center text-[17px] font-semibold">开始计重</h1>
<div class="w-[60px]"></div>
</header>
</div>
<!-- ===== ③ 主内容区(滚动) ===== -->
<main class="flex-1 overflow-y-auto no-scrollbar bg-[#F2F5F9] pb-4">
<!-- 顶部运单卡片(原样不动) -->
<div class="mx-4 mt-4 card-animate">
<div class="bg-white rounded-2xl shadow-md shadow-black/5 overflow-hidden relative">
<!-- 顶部渐变装饰条 -->
<div class="h-1" style="background: linear-gradient(90deg, #2563EB, #60A5FA, #2563EB);"></div>
<!-- 内容区 -->
<div class="px-5 py-4">
<!-- 第一行:运单号 + 状态徽标 -->
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div>
<span class="text-[20px] font-bold text-gray-900 tracking-wider">781333617</span>
</div>
<span class="text-[11px] font-medium text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full border border-blue-100">国际出港</span>
</div>
<!-- 分割线 -->
<div class="border-t border-gray-50 mb-3"></div>
<!-- 统一信息区域:浅灰底圆角容器,包含预配 -->
<div class="bg-gray-50/70 rounded-xl px-4 py-3">
<!-- 预配信息三列 -->
<div class="grid grid-cols-3 gap-2">
<div class="text-center">
<p class="text-[10px] text-gray-400 mb-0.5">预配件数</p>
<p class="text-[15px] font-bold text-gray-800">85</p>
</div>
<div class="text-center">
<p class="text-[10px] text-gray-400 mb-0.5">预配重量</p>
<p class="text-[15px] font-bold text-gray-800">156 kg</p>
</div>
<div class="text-center">
<p class="text-[10px] text-gray-400 mb-0.5">预配体积</p>
<p class="text-[15px] font-bold text-gray-800">4.52 m³</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== 统一表单大卡片字体样式统一为APP风格 ===== -->
<div class="mx-4 mt-3 bg-white rounded-2xl shadow-sm shadow-black/5 overflow-hidden card-animate">
<!-- 1. 通道号(必填)-->
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openChannelPicker()">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">通道号<span class="text-red-500 ml-0.5">*</span></span>
<span class="flex-1 text-[14px] text-gray-500 text-left" id="channelDisplay">请选择通道号</span>
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
</div>
<!-- 2. 代理人 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openAgentPicker()">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">代理人</span>
<span class="flex-1 text-[14px] text-gray-500 text-left" id="agentDisplay">请选择代理人</span>
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
</div>
<!-- 3. 特码 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openCodePicker()">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">特码</span>
<span class="flex-1 text-[14px] text-gray-500 text-left" id="codeDisplay">请选择特码</span>
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
</div>
<!-- 4. 运抵件数 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵件数</span>
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" placeholder="请输入运抵件数" type="text"/>
</div>
<!-- 5. 运抵重量 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵重量</span>
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" type="text" value="0"/>
</div>
<!-- 6. 运抵体积 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">运抵体积</span>
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" type="text" value="0.00"/>
</div>
<!-- 7. 托盘数量 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘数量</span>
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" placeholder="请输入托盘数量" type="text"/>
</div>
<!-- 8. 托盘自重 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">托盘自重</span>
<input class="flex-1 text-[14px] text-gray-800 bg-transparent border-none outline-none text-left" value="18" placeholder="请输入托盘自重" type="text"/>
</div>
<!-- 航班信息 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航班日期</span>
<span class="flex-1 text-[14px] text-gray-800 text-left">20260703</span>
</div>
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航班号</span>
<span class="flex-1 text-[14px] text-gray-800 text-left">MU1111</span>
</div>
<div class="flex items-center h-12 px-4 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">航程</span>
<span class="flex-1 text-[14px] text-gray-800 text-left">HFE-LAX</span>
</div>
<!-- 业务类型 -->
<div class="flex items-center h-12 px-4 border-b border-gray-100 cursor-pointer active:bg-gray-50" onclick="openBizPicker()">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">业务类型</span>
<span class="flex-1 text-[14px] text-gray-800 text-left" id="bizDisplay">普通货物运输</span>
<iconify-icon class="text-gray-400 shrink-0" icon="mdi:chevron-right"></iconify-icon>
</div>
<!-- 备注 -->
<div class="flex items-start h-auto min-h-[80px] px-4 py-3 border-b border-gray-100">
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0 pt-1">备注</span>
<textarea class="flex-1 text-[14px] text-gray-800 bg-transparent rounded-lg py-2 h-[60px] resize-none outline-none text-left" placeholder="请输入备注信息"></textarea>
</div>
</div>
<!-- 底部按钮 -->
<div class="px-4 mt-4 mb-2">
<div class="flex gap-3">
<button class="flex-1 h-[52px] rounded-2xl text-[17px] font-semibold active:opacity-90 transition-all text-blue-600" style="background: #fff; border: 2px solid #2563EB;">
分托计重
</button>
<button class="flex-1 h-[52px] rounded-2xl bg-[#2563EB] text-white text-[17px] font-semibold active:opacity-90 shadow-lg shadow-blue-200 transition-all" onclick="submitWeight()">
完成计重
</button>
</div>
</div>
</main>
<!-- iOS 底部指示条 -->
<div class="h-5 bg-[#F2F5F9] flex justify-center items-center flex-none">
<div class="w-[134px] h-[5px] bg-gray-300 rounded-full"></div>
</div>
</div>
</div>
<script>
function openChannelPicker() {
const options = ['A-01', 'A-02', 'B-01', 'B-02', 'C-01'];
document.getElementById('channelDisplay').innerText = "A-01";
document.getElementById('channelDisplay').classList.remove('text-gray-500');
document.getElementById('channelDisplay').classList.add('text-gray-800');
}
function openAgentPicker() {
document.getElementById('agentDisplay').innerText = "上海中远海运物流";
document.getElementById('agentDisplay').classList.remove('text-gray-500');
document.getElementById('agentDisplay').classList.add('text-gray-800');
}
function openCodePicker() {
document.getElementById('codeDisplay').innerText = "GEN (普货)";
document.getElementById('codeDisplay').classList.remove('text-gray-500');
document.getElementById('codeDisplay').classList.add('text-gray-800');
}
function openBizPicker() {
}
function submitWeight() {
alert("提交成功");
}
</script>
</body>
</html>