mirror of
https://github.com/hellodigua/ChatLab.git
synced 2026-10-25 17:54:34 +08:00
fix(capture): limit progressive narrowing to AI chat
This commit is contained in:
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -53,10 +53,6 @@
|
||||
"positionSide": "サイド",
|
||||
"positionHeader": "ヘッダー"
|
||||
},
|
||||
"screenshot": {
|
||||
"mobileAdapt": "モバイル対応",
|
||||
"mobileAdaptDesc": "スクリーンショット時に幅を自動調整し、モバイル端末での閲覧に最適化します"
|
||||
},
|
||||
"network": {
|
||||
"title": "ネットワーク設定",
|
||||
"proxyMode": "プロキシモード",
|
||||
|
||||
@@ -53,10 +53,6 @@
|
||||
"positionSide": "右侧",
|
||||
"positionHeader": "顶部"
|
||||
},
|
||||
"screenshot": {
|
||||
"mobileAdapt": "移动端适配",
|
||||
"mobileAdaptDesc": "截图时自动缩放宽度,适合移动端查看"
|
||||
},
|
||||
"network": {
|
||||
"title": "网络设置",
|
||||
"proxyMode": "代理模式",
|
||||
|
||||
@@ -53,10 +53,6 @@
|
||||
"positionSide": "右側",
|
||||
"positionHeader": "頂部"
|
||||
},
|
||||
"screenshot": {
|
||||
"mobileAdapt": "行動畫面適配",
|
||||
"mobileAdaptDesc": "截圖時會自動縮放寬度,方便在行動裝置上查看"
|
||||
},
|
||||
"network": {
|
||||
"title": "網路設定",
|
||||
"proxyMode": "代理模式",
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
],
|
||||
|
||||
Reference in new issue
Block a user