From 03af25e2382a8b5c56a613b699508c83914b95bb Mon Sep 17 00:00:00 2001
From: digua <i@digua.me>
Date: Wed, 15 Jul 2026 21:49:54 +0800
Subject: [PATCH] fix(capture): limit progressive narrowing to AI chat

---
 src/components/AIChat/chat/ChatMessage.vue    |  1 +
 src/components/common/CaptureButton.vue       |  9 +++-----
 .../common/Settings/BasicSettingsTab.vue      | 14 ++-----------
 src/composables/useScreenCapture.ts           | 21 ++++++++++---------
 src/i18n/locales/en-US/settings.json          |  4 ----
 src/i18n/locales/ja-JP/settings.json          |  4 ----
 src/i18n/locales/zh-CN/settings.json          |  4 ----
 src/i18n/locales/zh-TW/settings.json          |  4 ----
 src/stores/layout.ts                          |  6 +-----
 9 files changed, 18 insertions(+), 49 deletions(-)

diff --git a/src/components/AIChat/chat/ChatMessage.vue b/src/components/AIChat/chat/ChatMessage.vue
index e2390b13..0090c425 100644
--- a/src/components/AIChat/chat/ChatMessage.vue
+++ b/src/components/AIChat/chat/ChatMessage.vue
@@ -1031,6 +1031,7 @@ async function handleCopyMarkdown() {
           type="element"
           target-selector=".qa-pair"
           markdown-fix
+          :progressive-narrowing="true"
         />
       </div>
     </div>
diff --git a/src/components/common/CaptureButton.vue b/src/components/common/CaptureButton.vue
index 3104283d..0ddb5561 100644
--- a/src/components/common/CaptureButton.vue
+++ b/src/components/common/CaptureButton.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useScreenCapture } from '@/composables'
 import { ref, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useLayoutStore } from '@/stores/layout'
 import { useI18n } from 'vue-i18n'
 
 /**
@@ -26,6 +24,8 @@ const props = withDefaults(
     targetSelector?: string
     /** 是否应用 Markdown 列表渲染兼容修复（仅截取 Markdown 内容时传 true） */
     markdownFix?: boolean
+    /** 是否对截图内容进行渐进式缩窄；传入数字时作为基准宽度 */
+    progressiveNarrowing?: number | boolean
     /** 按钮颜色，默认 primary */
     color?: string
   }>(),
@@ -37,8 +37,6 @@ const props = withDefaults(
 )
 
 const { isCapturing, capturePage, captureElement } = useScreenCapture()
-const layoutStore = useLayoutStore()
-const { screenshotMobileAdapt } = storeToRefs(layoutStore)
 
 // 生成唯一 ID 用于隐藏按钮自身
 const buttonId = ref('')
@@ -49,10 +47,9 @@ onMounted(() => {
 async function handleCapture(event: Event) {
   const btn = event.currentTarget as HTMLElement
 
-  // 根据用户设置决定是否启用移动端适配
   const defaultOptions = {
     hideSelectors: [`#${buttonId.value}`],
-    mobileWidth: screenshotMobileAdapt.value ? true : undefined,
+    progressiveNarrowing: props.progressiveNarrowing,
     markdownFix: props.markdownFix || undefined,
   }
 
diff --git a/src/components/common/Settings/BasicSettingsTab.vue b/src/components/common/Settings/BasicSettingsTab.vue
index 8173a126..763965e3 100644
--- a/src/components/common/Settings/BasicSettingsTab.vue
+++ b/src/components/common/Settings/BasicSettingsTab.vue
@@ -16,7 +16,7 @@ const { t } = useI18n()
 // Store
 const layoutStore = useLayoutStore()
 const settingsStore = useSettingsStore()
-const { screenshotMobileAdapt, toolsPanelPosition } = storeToRefs(layoutStore)
+const { toolsPanelPosition } = storeToRefs(layoutStore)
 const { locale, defaultSessionTab } = storeToRefs(settingsStore)
 
 // Auto Launch
@@ -145,7 +145,7 @@ const toolsPanelPositionOptions = computed(() => [
       </div>
     </div>
 
-    <!-- 偏好设置：默认标签页 + 截图 -->
+    <!-- 偏好设置 -->
     <div>
       <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-white">
         <UIcon name="i-heroicons-adjustments-horizontal" class="h-4 w-4 text-purple-500" />
@@ -176,16 +176,6 @@ const toolsPanelPositionOptions = computed(() => [
             <UTabs v-model="toolsPanelPosition" size="sm" class="gap-0" :items="toolsPanelPositionOptions"></UTabs>
           </div>
         </div>
-        <div class="border-t border-gray-200 dark:border-gray-700"></div>
-        <div class="flex items-center justify-between p-4">
-          <div class="flex-1 pr-4">
-            <p class="text-sm font-medium text-gray-900 dark:text-white">
-              {{ t('settings.basic.screenshot.mobileAdapt') }}
-            </p>
-            <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('settings.basic.screenshot.mobileAdaptDesc') }}</p>
-          </div>
-          <USwitch v-model="screenshotMobileAdapt" />
-        </div>
       </div>
     </div>
 
diff --git a/src/composables/useScreenCapture.ts b/src/composables/useScreenCapture.ts
index 1d17dd75..95469cee 100644
--- a/src/composables/useScreenCapture.ts
+++ b/src/composables/useScreenCapture.ts
@@ -10,8 +10,8 @@ import { useLayoutStore } from '@/stores/layout'
 import { usePlatformService } from '@/services'
 import { useCacheService } from '@/services/cache/service'
 
-/** 默认移动端最大宽度 */
-const DEFAULT_MOBILE_MAX_WIDTH = 525
+/** 渐进式缩窄的默认基准宽度 */
+const DEFAULT_NARROWING_BASE_WIDTH = 525
 
 export interface ScreenCaptureOptions {
   /** 截屏时要隐藏的元素选择器列表 */
@@ -23,12 +23,12 @@ export interface ScreenCaptureOptions {
   /** 是否捕获完整的可滚动内容（默认 true） */
   fullContent?: boolean
   /**
-   * 移动端适配宽度，设置后会临时改变元素宽度以适配移动端布局
-   * - 传入数字：使用指定宽度
-   * - 传入 true：使用默认值 525px（自动适配，仅当原始宽度超过时才缩放）
-   * - 传入 false 或不传：不进行移动端适配
+   * 渐进式缩窄，设置后会临时收窄截图元素
+   * - 传入数字：使用指定的基准宽度
+   * - 传入 true：使用默认基准宽度 525px（仅当原始宽度超过时才缩窄）
+   * - 传入 false 或不传：不进行缩窄
    */
-  mobileWidth?: number | boolean
+  progressiveNarrowing?: number | boolean
   /** 是否应用 Markdown 列表渲染兼容修复（仅截取 Markdown 内容时需要，默认 false） */
   markdownFix?: boolean
 }
@@ -149,9 +149,10 @@ export function useScreenCapture() {
       element.style.position = 'relative'
     }
 
-    // 移动端宽度适配（渐进式缩放）
-    if (options?.mobileWidth) {
-      const baseWidth = typeof options.mobileWidth === 'number' ? options.mobileWidth : DEFAULT_MOBILE_MAX_WIDTH
+    // 渐进式缩窄：只压缩超出基准宽度的部分，避免截图突然变得过窄。
+    if (options?.progressiveNarrowing) {
+      const baseWidth =
+        typeof options.progressiveNarrowing === 'number' ? options.progressiveNarrowing : DEFAULT_NARROWING_BASE_WIDTH
 
       // 获取元素当前的实际宽度
       const currentWidth = element.getBoundingClientRect().width
diff --git a/src/i18n/locales/en-US/settings.json b/src/i18n/locales/en-US/settings.json
index 59918ab8..a414546d 100644
--- a/src/i18n/locales/en-US/settings.json
+++ b/src/i18n/locales/en-US/settings.json
@@ -53,10 +53,6 @@
       "positionSide": "Side",
       "positionHeader": "Header"
     },
-    "screenshot": {
-      "mobileAdapt": "Mobile Adaptation",
-      "mobileAdaptDesc": "Auto-scale width when taking screenshots for mobile viewing"
-    },
     "network": {
       "title": "Network",
       "proxyMode": "Proxy Mode",
diff --git a/src/i18n/locales/ja-JP/settings.json b/src/i18n/locales/ja-JP/settings.json
index 92c1565a..781ebc44 100644
--- a/src/i18n/locales/ja-JP/settings.json
+++ b/src/i18n/locales/ja-JP/settings.json
@@ -53,10 +53,6 @@
       "positionSide": "サイド",
       "positionHeader": "ヘッダー"
     },
-    "screenshot": {
-      "mobileAdapt": "モバイル対応",
-      "mobileAdaptDesc": "スクリーンショット時に幅を自動調整し、モバイル端末での閲覧に最適化します"
-    },
     "network": {
       "title": "ネットワーク設定",
       "proxyMode": "プロキシモード",
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index c38f1de0..b86e5a4f 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -53,10 +53,6 @@
       "positionSide": "右侧",
       "positionHeader": "顶部"
     },
-    "screenshot": {
-      "mobileAdapt": "移动端适配",
-      "mobileAdaptDesc": "截图时自动缩放宽度，适合移动端查看"
-    },
     "network": {
       "title": "网络设置",
       "proxyMode": "代理模式",
diff --git a/src/i18n/locales/zh-TW/settings.json b/src/i18n/locales/zh-TW/settings.json
index 5046cf11..613d6c2b 100644
--- a/src/i18n/locales/zh-TW/settings.json
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -53,10 +53,6 @@
       "positionSide": "右側",
       "positionHeader": "頂部"
     },
-    "screenshot": {
-      "mobileAdapt": "行動畫面適配",
-      "mobileAdaptDesc": "截圖時會自動縮放寬度，方便在行動裝置上查看"
-    },
     "network": {
       "title": "網路設定",
       "proxyMode": "代理模式",
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
index 1c1a62af..0f8eff97 100644
--- a/src/stores/layout.ts
+++ b/src/stores/layout.ts
@@ -19,9 +19,6 @@ export const useLayoutStore = defineStore(
     const toolsPanelPosition = ref<'side' | 'header'>('header')
     const isToolsPanelOpen = ref(false)
 
-    // 截图设置
-    const screenshotMobileAdapt = ref(false) // 截图时开启移动端适配，默认关闭
-
     // 设置弹窗
     const showSettings = ref(false)
     const settingsTab = ref<string>('settings')
@@ -108,7 +105,6 @@ export const useLayoutStore = defineStore(
       screenCaptureImage,
       showChatRecordDrawer,
       chatRecordQuery,
-      screenshotMobileAdapt,
       showSettings,
       settingsTab,
       settingsSubTab,
@@ -127,7 +123,7 @@ export const useLayoutStore = defineStore(
   {
     persist: [
       {
-        pick: ['isSidebarCollapsed', 'screenshotMobileAdapt', 'isToolsPanelLocked', 'isToolsPanelMini', 'toolsPanelPosition'],
+        pick: ['isSidebarCollapsed', 'isToolsPanelLocked', 'isToolsPanelMini', 'toolsPanelPosition'],
         storage: localStorage,
       },
     ],