fix: 修复 model_provider 的卡片点击问题
This commit is contained in:
parent
beae6a1f34
commit
02029764d7
@ -134,7 +134,7 @@
|
|||||||
<iframe
|
<iframe
|
||||||
:key="`embedded-${htmlPreviewRenderKey}`"
|
:key="`embedded-${htmlPreviewRenderKey}`"
|
||||||
class="html-preview"
|
class="html-preview"
|
||||||
:srcdoc="formatContent(file?.content)"
|
:srcdoc="htmlPreviewSrcdoc"
|
||||||
:title="filePath"
|
:title="filePath"
|
||||||
sandbox="allow-scripts"
|
sandbox="allow-scripts"
|
||||||
/>
|
/>
|
||||||
@ -217,7 +217,7 @@
|
|||||||
<iframe
|
<iframe
|
||||||
:key="`fullscreen-${htmlPreviewRenderKey}`"
|
:key="`fullscreen-${htmlPreviewRenderKey}`"
|
||||||
class="html-preview fullscreen-embed-preview"
|
class="html-preview fullscreen-embed-preview"
|
||||||
:srcdoc="formatContent(file?.content)"
|
:srcdoc="htmlPreviewSrcdoc"
|
||||||
:title="filePath"
|
:title="filePath"
|
||||||
sandbox="allow-scripts"
|
sandbox="allow-scripts"
|
||||||
/>
|
/>
|
||||||
@ -276,6 +276,8 @@ import {
|
|||||||
} from '@/utils/file_preview'
|
} from '@/utils/file_preview'
|
||||||
|
|
||||||
const EDITABLE_EXTENSIONS = new Set(['.md', '.markdown', '.mdx', '.txt'])
|
const EDITABLE_EXTENSIONS = new Set(['.md', '.markdown', '.mdx', '.txt'])
|
||||||
|
const HTML_PREVIEW_SCALE = 0.75
|
||||||
|
const HTML_PREVIEW_SCALE_CSS = `html { zoom: ${HTML_PREVIEW_SCALE} !important; }`
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
file: {
|
file: {
|
||||||
@ -380,6 +382,7 @@ const isHtmlFile = computed(
|
|||||||
typeof props.file?.content === 'string' &&
|
typeof props.file?.content === 'string' &&
|
||||||
isHtmlPreview(props.filePath)
|
isHtmlPreview(props.filePath)
|
||||||
)
|
)
|
||||||
|
const htmlPreviewSrcdoc = computed(() => buildHtmlPreviewSrcdoc(props.file?.content))
|
||||||
const codeThemeClass = computed(() => (themeStore.isDark ? 'hljs-theme-dark' : 'hljs-theme-light'))
|
const codeThemeClass = computed(() => (themeStore.isDark ? 'hljs-theme-dark' : 'hljs-theme-light'))
|
||||||
const codeLanguage = computed(() => getCodeLanguageByPath(props.filePath))
|
const codeLanguage = computed(() => getCodeLanguageByPath(props.filePath))
|
||||||
const isCodePreview = computed(
|
const isCodePreview = computed(
|
||||||
@ -413,6 +416,26 @@ const formatContent = (content) => {
|
|||||||
return String(content)
|
return String(content)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const serializeDoctype = (doctype) => {
|
||||||
|
if (!doctype) return ''
|
||||||
|
const publicId = doctype.publicId ? ` PUBLIC "${doctype.publicId}"` : ''
|
||||||
|
const systemId = doctype.systemId ? ` "${doctype.systemId}"` : ''
|
||||||
|
return `<!DOCTYPE ${doctype.name}${publicId}${systemId}>`
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildHtmlPreviewSrcdoc = (content) => {
|
||||||
|
const html = formatContent(content)
|
||||||
|
if (!html.trim() || typeof DOMParser === 'undefined') return html
|
||||||
|
|
||||||
|
const doc = new DOMParser().parseFromString(html, 'text/html')
|
||||||
|
const style = doc.createElement('style')
|
||||||
|
style.setAttribute('data-yuxi-html-preview-scale', String(HTML_PREVIEW_SCALE))
|
||||||
|
style.textContent = HTML_PREVIEW_SCALE_CSS
|
||||||
|
doc.head.append(style)
|
||||||
|
|
||||||
|
return `${serializeDoctype(doc.doctype)}${doc.documentElement.outerHTML}`
|
||||||
|
}
|
||||||
|
|
||||||
const syncDraftContent = () => {
|
const syncDraftContent = () => {
|
||||||
draftContent.value = savedContent.value
|
draftContent.value = savedContent.value
|
||||||
editMode.value = 'preview'
|
editMode.value = 'preview'
|
||||||
|
|||||||
@ -670,13 +670,14 @@ defineExpose({
|
|||||||
>(已启用 {{ provider.enabled_models.length }} 个)</span
|
>(已启用 {{ provider.enabled_models.length }} 个)</span
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
<a-switch
|
<span class="provider-enable-switch" @click.stop>
|
||||||
size="small"
|
<a-switch
|
||||||
:checked="provider.is_enabled"
|
size="small"
|
||||||
:loading="togglingProviderId === provider.provider_id"
|
:checked="provider.is_enabled"
|
||||||
@click.stop
|
:loading="togglingProviderId === provider.provider_id"
|
||||||
@change="(checked) => toggleProviderEnabled(provider, checked)"
|
@change="(checked) => toggleProviderEnabled(provider, checked)"
|
||||||
/>
|
/>
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</InfoCard>
|
</InfoCard>
|
||||||
</ExtensionCardGrid>
|
</ExtensionCardGrid>
|
||||||
@ -1116,6 +1117,11 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.provider-enable-switch {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.enabled-count {
|
.enabled-count {
|
||||||
color: var(--gray-500);
|
color: var(--gray-500);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user