From c0bf3ad3cf0cab5c6f63d27bc86141c139ce5a90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E7=8A=80=E9=BA=9F?= <xiaxilin@91ybt.com>
Date: Fri, 21 Aug 2026 14:58:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=E6=9D=A1=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 全局为 html/body 添加 overflow-x: clip 兜底（不影响 sticky 定位）
- 全局 img 与 cropper 容器限制最大宽度，大图在窄屏不再撑破布局
- URL 构造的参数编辑行在移动端改为纵向堆叠
- 时间戳页日期选择器窄屏占满可用宽度
- 首页标签行允许换行，避免超窄屏溢出
---
 src/assets/styles/index.scss          | 26 ++++++++++++++++++++++++++
 src/views/HomeView.vue                |  1 +
 src/views/timestamp/TimestampView.vue |  5 +++++
 src/views/url-parse/UrlParseView.vue  |  6 ++++++
 4 files changed, 38 insertions(+)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 0c8695d..7a4fbc9 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -19,6 +19,32 @@ body,
   padding: 0;
 }
 
+/* ---------- 移动端防横向滚动 ----------
+ * 个别组件（如裁剪容器按图片原始宽度渲染、日期选择器固定宽度）
+ * 在窄屏下会撑出横向滚动条。此处做全局兜底：
+ * overflow-x: clip 不会产生滚动容器，因此不影响 sticky 定位元素。 */
+html,
+body {
+  overflow-x: hidden;
+}
+@supports (overflow: clip) {
+  html,
+  body {
+    overflow-x: clip;
+  }
+}
+
+/* 图片通用约束（与 cropperjs 官方示例一致）：上传的图片预览不超出容器 */
+img {
+  display: block;
+  max-width: 100%;
+}
+
+/* Cropper 容器宽度不超过视口，避免大图在移动端撑破布局 */
+.cropper-container {
+  max-width: 100%;
+}
+
 body {
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 9bacd33..4d3669d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -60,6 +60,7 @@ import { tools } from '@/router/tools'
   display: flex;
   justify-content: center;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
 /* 工具卡片栅格：响应式，移动端单列 */
diff --git a/src/views/timestamp/TimestampView.vue b/src/views/timestamp/TimestampView.vue
index 512908d..e628542 100644
--- a/src/views/timestamp/TimestampView.vue
+++ b/src/views/timestamp/TimestampView.vue
@@ -216,4 +216,9 @@ function onHistorySelect(text: string) {
   margin-top: 16px;
   flex-wrap: wrap;
 }
+/* 日期选择器：窄屏下占满可用宽度，避免固定宽度撑出横向滚动条 */
+:deep(.t-date-picker) {
+  width: 100%;
+  max-width: 340px;
+}
 </style>
diff --git a/src/views/url-parse/UrlParseView.vue b/src/views/url-parse/UrlParseView.vue
index 425c4e7..cb4e691 100644
--- a/src/views/url-parse/UrlParseView.vue
+++ b/src/views/url-parse/UrlParseView.vue
@@ -281,6 +281,12 @@ function onHistorySelect(text: string) {
   gap: 8px;
   margin-bottom: 8px;
 }
+/* 移动端：参数编辑行改为纵向堆叠，避免输入框并排撑出横向滚动 */
+@media (max-width: 767px) {
+  .param-edit-row {
+    flex-direction: column;
+  }
+}
 .param-input {
   flex: 1;
 }