fix(capture): limit progressive narrowing to AI chat

This commit is contained in:
digua committed 2026-07-15 22:03:13 +08:00
1 parent 0aafed0f60
commit 03af25e238
9 files changed
+18 -49

No files matched your search

@@ -1031,6 +1031,7 @@ async function handleCopyMarkdown() {
type="element"
target-selector=".qa-pair"
markdown-fix
:progressive-narrowing="true"
/>
</div>
</div>
+3 -6
View File
@@ -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,
}
@@ -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>
+11 -10
View File
@@ -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
-4
View File
@@ -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",
-4
View File
@@ -53,10 +53,6 @@
"positionSide": "サイド",
"positionHeader": "ヘッダー"
},
"screenshot": {
"mobileAdapt": "モバイル対応",
"mobileAdaptDesc": "スクリーンショット時に幅を自動調整し、モバイル端末での閲覧に最適化します"
},
"network": {
"title": "ネットワーク設定",
"proxyMode": "プロキシモード",
-4
View File
@@ -53,10 +53,6 @@
"positionSide": "右侧",
"positionHeader": "顶部"
},
"screenshot": {
"mobileAdapt": "移动端适配",
"mobileAdaptDesc": "截图时自动缩放宽度,适合移动端查看"
},
"network": {
"title": "网络设置",
"proxyMode": "代理模式",
-4
View File
@@ -53,10 +53,6 @@
"positionSide": "右側",
"positionHeader": "頂部"
},
"screenshot": {
"mobileAdapt": "行動畫面適配",
"mobileAdaptDesc": "截圖時會自動縮放寬度,方便在行動裝置上查看"
},
"network": {
"title": "網路設定",
"proxyMode": "代理模式",
+1 -5
View File
@@ -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,
},
],