From 5ce21eb2807952070b8d580f7b6c02c9fc644bd6 Mon Sep 17 00:00:00 2001 From: JOJO <1498581755@qq.com> Date: Sun, 8 Mar 2026 04:52:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?= =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E7=A9=BA=E9=97=B4=E9=80=89=E9=A1=B9=E5=8D=A1?= =?UTF-8?q?=E6=BB=91=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为选项卡容器添加 width: 100% 和 max-width: 100% 限制宽度 - 添加 -webkit-overflow-scrolling: touch 启用 iOS 平滑滚动 - 添加 touch-action: pan-x 明确允许横向触摸滚动 - 添加 scroll-behavior: smooth 实现平滑滚动效果 - 添加 overscroll-behavior-x: contain 防止滚动溢出 Co-Authored-By: Claude Sonnet 4.5 --- static/src/App.vue | 55 +- .../personalization/PersonalizationDrawer.vue | 8 + .../styles/components/chat/_chat-area.scss | 28 +- .../styles/components/overlays/_overlays.scss | 587 +++++++++++++++++- 4 files changed, 658 insertions(+), 20 deletions(-) diff --git a/static/src/App.vue b/static/src/App.vue index 34da366..6106a72 100644 --- a/static/src/App.vue +++ b/static/src/App.vue @@ -366,6 +366,19 @@ +
{{ currentConversationTitle || '未命名对话' }}
@@ -394,14 +407,50 @@ - + +
+
+
模型
+ +
+ +
+
运行模式
+ +
+
+ diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue index 84844a3..49e978d 100644 --- a/static/src/components/personalization/PersonalizationDrawer.vue +++ b/static/src/components/personalization/PersonalizationDrawer.vue @@ -762,6 +762,10 @@ const shiftTab = (direction: 1 | -1) => { }; const handleSwipeStart = (event: TouchEvent) => { + // 手机端禁用滑动切换标签页 + if (window.innerWidth <= 768) { + return; + } if (!event.touches.length) { return; } @@ -769,6 +773,10 @@ const handleSwipeStart = (event: TouchEvent) => { }; const handleSwipeEnd = (event: TouchEvent) => { + // 手机端禁用滑动切换标签页 + if (window.innerWidth <= 768) { + return; + } if (!swipeState.value.active || !event.changedTouches.length) { return; } diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss index 4886882..78c0f63 100644 --- a/static/src/styles/components/chat/_chat-area.scss +++ b/static/src/styles/components/chat/_chat-area.scss @@ -130,7 +130,13 @@ } .chat-container--mobile { - padding-top: 68px; + padding-top: 52px; +} + +@media (max-width: 768px) { + .chat-container--mobile { + padding-top: 44px; + } } .conversation-ribbon__selector { @@ -207,6 +213,26 @@ z-index: 50; } +.model-mode-dropdown--mobile { + position: fixed; + top: 52px; + left: 12px; + right: auto; + min-width: 0; + max-width: min(480px, calc(100vw - 24px)); + grid-template-columns: 1fr 1fr; + gap: 8px; + z-index: 1600; +} + +.model-mode-dropdown--mobile .dropdown-item { + grid-template-columns: 1fr auto; +} + +.model-mode-dropdown--mobile .item-desc { + display: none; +} + .dropdown-column { display: flex; flex-direction: column; diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss index 5cf43a5..fe33f5c 100644 --- a/static/src/styles/components/overlays/_overlays.scss +++ b/static/src/styles/components/overlays/_overlays.scss @@ -357,6 +357,446 @@ } } +/* 手机端完整适配 */ +@media (max-width: 768px) { + .personal-page-overlay { + padding: 0; + align-items: stretch; + } + + .personal-page-card { + width: 100%; + height: 100%; + max-height: none; + border-radius: 0; + padding: 16px; + display: flex; + flex-direction: column; + } + + .personal-page-header { + flex-direction: column; + align-items: stretch; + gap: 12px; + margin-bottom: 16px; + } + + .personal-page-header h2 { + font-size: 20px; + } + + .personal-page-header p { + font-size: 13px; + } + + .personal-page-actions { + flex-direction: row; + width: 100%; + gap: 8px; + } + + .personal-page-logout, + .personal-page-close { + flex: 1; + padding: 10px 16px; + font-size: 13px; + text-align: center; + } + + .personalization-body { + flex: 1; + min-height: 0; + overflow: hidden; + } + + .personal-form { + height: 100%; + display: flex; + flex-direction: column; + } + + .personalization-layout { + display: flex; + flex-direction: column; + gap: 12px; + flex: 1; + min-height: 0; + } + + .personal-page-tabs { + flex-direction: row; + padding: 8px; + height: auto; + max-height: none; + width: 100%; + max-width: 100%; + overflow-x: auto; + overflow-y: hidden; + flex-wrap: nowrap; + gap: 8px; + border-radius: 12px; + flex-shrink: 0; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + touch-action: pan-x; + overscroll-behavior-x: contain; + } + + .personal-tab-button { + flex: 0 0 auto; + min-width: 100px; + padding: 10px 14px; + text-align: center; + white-space: nowrap; + font-size: 13px; + touch-action: pan-x; + } + + .personal-tab-desc { + display: none; + } + + .personalization-content-shell { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + } + + .personalization-content { + flex: 1; + min-height: 0; + border-radius: 12px; + padding: 0; + /* 允许内部横向滚动 */ + touch-action: pan-y pan-x; + } + + .personalization-content .personal-page { + padding: 12px; + height: 100%; + overflow-y: auto; + /* 允许内部横向滚动 */ + touch-action: pan-y pan-x; + } + + .personalization-sections { + display: flex; + flex-direction: column; + gap: 12px; + } + + .personal-left-column, + .personal-right-column { + width: 100%; + max-width: none; + } + + .personal-section { + padding: 14px; + border-radius: 12px; + } + + .personal-field { + font-size: 13px; + } + + .personal-field input { + padding: 10px 12px; + font-size: 14px; + } + + .personal-toggle { + padding: 14px; + border-radius: 12px; + } + + .toggle-title { + font-size: 14px; + } + + .toggle-desc { + font-size: 12px; + } + + .consideration-list { + max-height: 200px; + } + + .consideration-item { + padding: 10px; + font-size: 13px; + } + + .tone-preset-row { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .tone-preset-buttons { + width: 100%; + } + + .tone-preset-buttons button { + font-size: 12px; + padding: 6px 12px; + } + + .behavior-section { + padding: 16px; + border-radius: 12px; + overflow: visible; + } + + .behavior-field { + gap: 12px; + overflow: visible; + } + + .field-title { + font-size: 15px; + } + + .field-desc, + .behavior-desc { + font-size: 13px; + } + + .run-mode-options { + display: flex !important; + grid-template-columns: none; + flex-direction: row; + overflow-x: auto; + overflow-y: hidden; + gap: 10px; + padding-bottom: 8px; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + /* 确保容器可以滚动 */ + width: 100%; + max-width: 100%; + /* 关键：允许触摸滚动 */ + touch-action: pan-x; + overscroll-behavior-x: contain; + } + + .run-mode-options::-webkit-scrollbar { + height: 4px; + } + + .run-mode-options::-webkit-scrollbar-track { + background: transparent; + } + + .run-mode-options::-webkit-scrollbar-thumb { + background: rgba(121, 109, 94, 0.3); + border-radius: 4px; + } + + .run-mode-card { + flex: 0 0 280px; + min-width: 280px; + max-width: 280px; + padding: 12px; + border-radius: 12px; + scroll-snap-align: start; + /* 防止卡片内的触摸事件干扰滚动 */ + touch-action: pan-x; + } + + .run-mode-title { + font-size: 14px; + } + + .run-mode-desc { + font-size: 12px; + } + + .run-mode-badge { + font-size: 11px; + padding: 2px 6px; + } + + .thinking-presets { + display: flex; + flex-direction: row; + overflow-x: auto; + overflow-y: hidden; + gap: 8px; + padding-bottom: 8px; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + width: 100%; + max-width: 100%; + touch-action: pan-x; + overscroll-behavior-x: contain; + } + + .thinking-presets::-webkit-scrollbar { + height: 4px; + } + + .thinking-presets::-webkit-scrollbar-track { + background: transparent; + } + + .thinking-presets::-webkit-scrollbar-thumb { + background: rgba(121, 109, 94, 0.3); + border-radius: 4px; + } + + .thinking-presets button { + flex: 0 0 auto; + min-width: 100px; + max-width: 150px; + padding: 10px; + scroll-snap-align: start; + touch-action: pan-x; + } + + .thinking-input-row { + flex-direction: column; + align-items: stretch; + gap: 10px; + } + + .thinking-input-row label { + width: 100%; + } + + .thinking-input-row input { + width: 100%; + } + + .tool-category-grid { + gap: 8px; + } + + .tool-category-chip { + padding: 8px 10px; + font-size: 12px; + } + + .personal-form-actions { + flex-direction: column; + gap: 10px; + padding: 12px 0 0; + } + + .personal-form-actions .primary { + width: 100%; + padding: 12px 20px; + } + + .personal-status-group { + width: 100%; + justify-content: center; + } + + .personal-actions-row { + margin-top: 12px; + } + + .personal-actions-row .personal-form-actions { + max-width: none; + width: 100%; + } + + .theme-grid { + display: flex; + flex-direction: row; + overflow-x: auto; + overflow-y: hidden; + gap: 12px; + padding-bottom: 8px; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + width: 100%; + max-width: 100%; + touch-action: pan-x; + overscroll-behavior-x: contain; + } + + .theme-grid::-webkit-scrollbar { + height: 4px; + } + + .theme-grid::-webkit-scrollbar-track { + background: transparent; + } + + .theme-grid::-webkit-scrollbar-thumb { + background: rgba(121, 109, 94, 0.3); + border-radius: 4px; + } + + .theme-card { + flex: 0 0 260px; + min-width: 260px; + max-width: 260px; + padding: 14px; + scroll-snap-align: start; + touch-action: pan-x; + } + + .experiment-hero { + grid-template-columns: 1fr; + gap: 16px; + } + + .experiment-visual { + min-height: 160px; + border-radius: 20px; + } + + .experiment-copy h3 { + font-size: 20px; + } + + .experiment-toggle-card { + padding: 16px; + border-radius: 16px; + } + + .experiment-toggle-info h4 { + font-size: 16px; + } + + .experiment-note { + padding: 14px 16px; + border-radius: 14px; + } + + .admin-monitor-panel { + padding: 16px; + border-radius: 16px; + } + + .admin-monitor-title-row h3 { + font-size: 18px; + } + + .admin-monitor-desc { + font-size: 13px; + } + + .admin-monitor-actions { + flex-direction: column; + align-items: stretch; + } + + .admin-monitor-button { + width: 100%; + justify-content: center; + padding: 12px 20px; + } + + .section-note { + font-size: 11px; + } +} + .behavior-section { display: flex; flex-direction: column; @@ -682,6 +1122,13 @@ gap: 12px; } +@media (max-width: 768px) { + .run-mode-options { + display: flex !important; + grid-template-columns: none; + } +} + .run-mode-card { border: 1px solid var(--theme-control-border); border-radius: 16px; @@ -981,21 +1428,51 @@ } .mobile-panel-topbar { - background: var(--claude-left-rail); - padding: 10px 16px; + background: var(--chat-surface-color, #ffffff); + padding: 6px 12px; display: flex; - align-items: center; - gap: 12px; - box-shadow: 0 10px 20px rgba(51, 35, 20, 0.1); + align-items: flex-start; + gap: 8px; + box-shadow: none; pointer-events: auto; + position: relative; + height: 44px; +} + +.mobile-panel-topbar::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: -8px; + height: 16px; + background: var(--chat-surface-color, #ffffff); + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%); + -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + pointer-events: none; +} + +@media (max-width: 768px) { + .mobile-panel-topbar { + height: 36px; + padding: 3px 10px; + gap: 6px; + } + + .mobile-panel-topbar::after { + bottom: -8px; + height: 16px; + } } .mobile-panel-fab { - width: 44px; - height: 44px; + width: 32px; + height: 32px; border: none; padding: 0; - border-radius: 12px; + border-radius: 8px; background: transparent; color: var(--claude-text); cursor: pointer; @@ -1008,8 +1485,20 @@ } .mobile-panel-fab img { - width: 32px; - height: 32px; + width: 22px; + height: 22px; +} + +@media (max-width: 768px) { + .mobile-panel-fab { + width: 30px; + height: 30px; + } + + .mobile-panel-fab img { + width: 22px; + height: 22px; + } } .mobile-panel-menu { @@ -1026,16 +1515,82 @@ } .mobile-topbar-title { - flex: 0 0 50%; - max-width: 50%; + flex: 1; font-size: 14px; - font-weight: 600; - color: var(--claude-text); - margin-left: auto; - text-align: right; + font-weight: 700; + color: #0f172a; + font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); + text-align: right; + margin-left: auto; + padding-top: 4px; +} + +@media (max-width: 768px) { + .mobile-topbar-title { + padding-top: 3px; + } +} + +.mobile-topbar-selector { + pointer-events: auto; + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 0 0 0; + border-radius: 0; + border: none; + background: transparent; + box-shadow: none; + color: #0f172a; + font-weight: 600; + font-size: 14px; + line-height: 1.35; + font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + cursor: pointer; + transition: color 0.15s ease; + flex-shrink: 0; +} + +@media (max-width: 768px) { + .mobile-topbar-selector { + padding: 3px 0 0 0; + } +} + +.mobile-topbar-selector:hover { + color: #111827; +} + +.mobile-topbar-selector:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.mobile-topbar-selector.open { + color: #111827; +} + +.mobile-selector-label { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.mobile-selector-model { + font-weight: 700; +} + +.mobile-selector-sep { + opacity: 0.6; +} + +.mobile-selector-mode { + font-weight: 500; + color: rgba(15, 23, 42, 0.8); } .mobile-menu-btn {