“ydy0615”
501 lines
14 KiB
Vue
501 lines
14 KiB
Vue
<template>
|
|
<section class="doc-card" :class="{ 'is-collapsed': collapsedState }">
|
|
<header class="doc-card__header">
|
|
<div class="doc-card__badge">{{ typeLabel }}</div>
|
|
<div class="doc-card__meta">
|
|
<div class="doc-card__name">{{ docName }}</div>
|
|
<div class="doc-card__time">{{ displayTime }}</div>
|
|
</div>
|
|
<div class="doc-card__actions">
|
|
<button type="button" class="doc-card__btn" :title="'压缩文档'" @click="handleCompress">
|
|
<svg v-if="compressState === 'idle' || compressState === 'completed'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 14h6v7H4z"/>
|
|
<path d="M14 9h6v12h-6z"/>
|
|
<path d="M4 9h6v5H4z"/>
|
|
</svg>
|
|
<span v-if="compressState === 'queued' || compressState === 'processing'" class="doc-card__spinner"></span>
|
|
<svg v-else-if="compressState === 'error'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="15" y1="9" x2="9" y2="15"/>
|
|
<line x1="9" y1="9" x2="15" y2="15"/>
|
|
</svg>
|
|
</button>
|
|
<span v-if="compressState === 'queued'" class="doc-card__status-label">排队中</span>
|
|
<button type="button" class="doc-card__btn" :title="collapsedState ? '展开文件' : '折叠文件'" @click="toggleCollapse">
|
|
<svg v-if="collapsedState" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="9 18 15 12 9 6"/>
|
|
</svg>
|
|
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="doc-card__btn doc-card__btn--danger" title="删除文件" @click="props.onDelete?.()">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 6h18"/>
|
|
<path d="M8 6V4h8v2"/>
|
|
<path d="M19 6l-1 14H6L5 6"/>
|
|
<path d="M10 11v6"/>
|
|
<path d="M14 11v6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div v-show="!collapsedState" class="doc-card__body">
|
|
<div ref="editorRoot" class="doc-card__editor"></div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import { replaceAll } from '@milkdown/kit/utils'
|
|
import { Crepe } from '@milkdown/crepe'
|
|
import { editorViewCtx } from '@milkdown/kit/core'
|
|
import { copilotPlugin, copilotConfigCtx, copilotGhostMark, setCopilotEnabled, clearGhostSuggestion } from '../plugins/copilotPlugin'
|
|
import { hiddenTextInputPlugin, hiddenTextNode, hiddenTextRemark, hiddenTextView } from '../plugins/hiddenTextPlugin'
|
|
import { fetchSuggestion, submitCompress, pollCompressStatus } from '../utils/api.js'
|
|
import { isDocumentVisible, getRecommendedDebounce, getRecommendedSyncInterval } from '../composables/useVisibility.js'
|
|
|
|
const COPILOT_TOGGLE_EVENT = 'llm-in-text:copilot-toggle'
|
|
const props = defineProps({
|
|
docType: { type: String, default: 'txt' },
|
|
docName: { type: String, default: 'document.txt' },
|
|
uploadTime: { type: String, default: '' },
|
|
content: { type: String, default: '' },
|
|
collapsed: { type: Boolean, default: false },
|
|
resolveSuggestionRequest: { type: Function, default: null },
|
|
onUpdateContent: { type: Function, default: null },
|
|
onUpdateCollapsed: { type: Function, default: null },
|
|
onDelete: { type: Function, default: null },
|
|
onCompress: { type: Function, default: null },
|
|
})
|
|
|
|
const editorRoot = ref(null)
|
|
const collapsedState = ref(Boolean(props.collapsed))
|
|
const currentContent = ref(props.content || '')
|
|
const compressState = ref('idle') // idle | queued | processing | error
|
|
let crepe = null
|
|
let syncTimer = null
|
|
let syncingExternal = false
|
|
let compressPoller = null
|
|
let copilotToggleHandler = null
|
|
|
|
const handleCompress = () => {
|
|
if (compressState.value !== 'idle') return
|
|
|
|
// 直接从嵌套编辑器获取最新内容，不依赖外部同步缓存
|
|
const content = crepe?.getMarkdown() || ''
|
|
if (!content.trim()) {
|
|
compressState.value = 'error'
|
|
setTimeout(() => { compressState.value = 'idle' }, 2000)
|
|
return
|
|
}
|
|
|
|
submitCompress(content, props.docType).then((result) => {
|
|
compressState.value = 'queued'
|
|
|
|
if (compressPoller) compressPoller.stop()
|
|
compressPoller = pollCompressStatus(result.task_id, (status, compressedContent, message) => {
|
|
compressState.value = status
|
|
|
|
if (status === 'completed') {
|
|
// 压缩完成，直接更新嵌套编辑器的内容
|
|
crepe.editor.action(replaceAll(compressedContent))
|
|
} else if (status === 'error') {
|
|
setTimeout(() => { compressState.value = 'idle' }, 3000)
|
|
}
|
|
})
|
|
|
|
if (compressState.value === 'queued') {
|
|
// Task already completed before polling started
|
|
}
|
|
}).catch(() => {
|
|
compressState.value = 'error'
|
|
setTimeout(() => { compressState.value = 'idle' }, 3000)
|
|
})
|
|
}
|
|
|
|
const typeLabel = computed(() => {
|
|
if (props.docType === 'docx') return 'DOCX'
|
|
if (props.docType === 'pptx') return 'PPTX'
|
|
if (props.docType === 'pdf') return 'PDF'
|
|
return 'TXT'
|
|
})
|
|
|
|
const displayTime = computed(() => {
|
|
if (!props.uploadTime) return '刚上传'
|
|
const date = new Date(props.uploadTime)
|
|
if (Number.isNaN(date.getTime())) return '刚上传'
|
|
return date.toLocaleString('zh-CN', { hour12: false })
|
|
})
|
|
|
|
const toggleCollapse = () => {
|
|
collapsedState.value = !collapsedState.value
|
|
props.onUpdateCollapsed?.(collapsedState.value)
|
|
}
|
|
|
|
const syncContent = () => {
|
|
if (!crepe) return
|
|
// Skip content sync when tab is hidden (energy saving for nested editors)
|
|
if (!isDocumentVisible()) return
|
|
|
|
// Don't sync during compression to avoid overwriting compressed content
|
|
if (compressState.value !== 'idle') return
|
|
|
|
if (syncTimer) clearTimeout(syncTimer)
|
|
const syncInterval = getRecommendedSyncInterval(120)
|
|
syncTimer = setTimeout(async () => {
|
|
if (!crepe || syncingExternal) return
|
|
const markdown = await crepe.getMarkdown()
|
|
currentContent.value = markdown
|
|
props.onUpdateContent?.(markdown)
|
|
}, syncInterval)
|
|
}
|
|
|
|
const syncExternalContent = async (nextValue) => {
|
|
const value = nextValue || ''
|
|
|
|
// Reject empty content to prevent accidental document clearing (e.g., from failed compression)
|
|
if (!value || !value.trim()) {
|
|
return
|
|
}
|
|
|
|
if (!crepe) {
|
|
currentContent.value = value
|
|
return
|
|
}
|
|
if (value === currentContent.value) return
|
|
|
|
// Clear pending sync timer to prevent stale content from overwriting new content
|
|
if (syncTimer) {
|
|
clearTimeout(syncTimer)
|
|
syncTimer = null
|
|
}
|
|
|
|
syncingExternal = true
|
|
try {
|
|
crepe.editor.action(replaceAll(value))
|
|
currentContent.value = value
|
|
} finally {
|
|
syncingExternal = false
|
|
}
|
|
}
|
|
|
|
watch(() => props.content, (nextValue) => {
|
|
void syncExternalContent(nextValue)
|
|
})
|
|
|
|
watch(() => props.collapsed, (nextValue) => {
|
|
collapsedState.value = Boolean(nextValue)
|
|
})
|
|
|
|
onMounted(async () => {
|
|
if (!editorRoot.value) return
|
|
crepe = new Crepe({
|
|
root: editorRoot.value,
|
|
defaultValue: props.content || '',
|
|
features: {
|
|
[Crepe.Feature.Latex]: true,
|
|
[Crepe.Feature.ImageBlock]: true,
|
|
[Crepe.Feature.Table]: true,
|
|
[Crepe.Feature.ListCheck]: true,
|
|
},
|
|
config: {
|
|
showLineNumber: false,
|
|
},
|
|
})
|
|
|
|
crepe.editor.config((ctx) => {
|
|
ctx.set(copilotConfigCtx.key, {
|
|
fetchSuggestion: async (prefix, suffix, languageId, signal) => {
|
|
const payload = props.resolveSuggestionRequest
|
|
? await props.resolveSuggestionRequest({ prefix, suffix, languageId })
|
|
: { prefix, suffix, languageId, blocked: false }
|
|
if (payload?.blocked) return ''
|
|
return fetchSuggestion(payload?.prefix ?? prefix, payload?.suffix ?? suffix, payload?.languageId ?? languageId, signal)
|
|
},
|
|
debounceMs: getRecommendedDebounce(900),
|
|
})
|
|
})
|
|
|
|
crepe.editor.use(copilotConfigCtx)
|
|
crepe.editor.use(copilotGhostMark)
|
|
crepe.editor.use(copilotPlugin)
|
|
crepe.editor.use(hiddenTextRemark)
|
|
crepe.editor.use(hiddenTextNode)
|
|
crepe.editor.use(hiddenTextView)
|
|
crepe.editor.use(hiddenTextInputPlugin)
|
|
await crepe.create()
|
|
|
|
crepe.on((listener) => {
|
|
listener.updated(() => {
|
|
syncContent()
|
|
})
|
|
})
|
|
|
|
crepe.editor.action((ctx) => {
|
|
const view = ctx.get(editorViewCtx)
|
|
const enabled = typeof window !== 'undefined'
|
|
? window.__LLM_IN_TEXT_COPILOT_ENABLED__ !== false
|
|
: true
|
|
setCopilotEnabled(view, enabled)
|
|
if (!enabled) {
|
|
clearGhostSuggestion(view)
|
|
}
|
|
})
|
|
|
|
copilotToggleHandler = (event) => {
|
|
const enabled = Boolean(event?.detail?.enabled)
|
|
crepe?.editor?.action((ctx) => {
|
|
const view = ctx.get(editorViewCtx)
|
|
setCopilotEnabled(view, enabled)
|
|
if (!enabled) {
|
|
clearGhostSuggestion(view)
|
|
}
|
|
})
|
|
}
|
|
window.addEventListener(COPILOT_TOGGLE_EVENT, copilotToggleHandler)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (syncTimer) {
|
|
clearTimeout(syncTimer)
|
|
syncTimer = null
|
|
}
|
|
if (compressPoller) {
|
|
compressPoller.stop()
|
|
compressPoller = null
|
|
}
|
|
if (copilotToggleHandler) {
|
|
window.removeEventListener(COPILOT_TOGGLE_EVENT, copilotToggleHandler)
|
|
copilotToggleHandler = null
|
|
}
|
|
if (crepe) {
|
|
crepe.editor.action((ctx) => {
|
|
const view = ctx.get(editorViewCtx)
|
|
clearGhostSuggestion(view)
|
|
})
|
|
crepe.destroy()
|
|
crepe = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.doc-card {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 8px 0;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(59, 130, 246, 0.12);
|
|
background: rgba(255, 255, 255, 0.8);
|
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card {
|
|
background: rgba(26, 30, 39, 0.8);
|
|
border-color: rgba(96, 165, 250, 0.15);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.doc-card__header {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card__header {
|
|
background: rgba(26, 30, 39, 0.8);
|
|
border-bottom-color: rgba(96, 165, 250, 0.15);
|
|
}
|
|
|
|
.doc-card__badge {
|
|
min-width: 48px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-align: center;
|
|
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.doc-card__meta {
|
|
min-width: 0;
|
|
}
|
|
|
|
.doc-card__name {
|
|
color: #1e293b;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card__name {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.doc-card__time {
|
|
margin-top: 2px;
|
|
color: #64748b;
|
|
font-size: 10px;
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card__time {
|
|
color: #aeb6c5;
|
|
}
|
|
|
|
.doc-card__actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.doc-card__status-label {
|
|
font-size: 10px;
|
|
color: #f59e0b;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.doc-card__spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid rgba(59, 130, 246, 0.2);
|
|
border-top-color: #3b82f6;
|
|
border-radius: 50%;
|
|
animation: doc-card-spin 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes doc-card-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.doc-card__btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid rgba(59, 130, 246, 0.12);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: #64748b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card__btn {
|
|
background: rgba(34, 40, 52, 0.5);
|
|
border-color: rgba(96, 165, 250, 0.15);
|
|
color: #aeb6c5;
|
|
}
|
|
|
|
.doc-card__btn:hover {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border-color: rgba(59, 130, 246, 0.25);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.doc-card__btn--danger:hover {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-color: rgba(239, 68, 68, 0.2);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.doc-card__body {
|
|
padding: 8px 10px;
|
|
background: rgba(248, 250, 252, 0.8);
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card__body {
|
|
background: rgba(18, 22, 30, 0.8);
|
|
}
|
|
|
|
.doc-card__editor {
|
|
min-height: 0;
|
|
height: auto;
|
|
max-height: none;
|
|
overflow: auto;
|
|
overscroll-behavior-y: contain;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(59, 130, 246, 0.08);
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
:root[data-theme='dark'] .doc-card__editor {
|
|
background: rgba(26, 30, 39, 0.8);
|
|
border-color: rgba(96, 165, 250, 0.12);
|
|
}
|
|
|
|
.doc-card__editor :deep(.milkdown) {
|
|
background: transparent !important;
|
|
min-height: 0;
|
|
height: auto !important;
|
|
}
|
|
|
|
.doc-card__editor :deep(.milkdown__main),
|
|
.doc-card__editor :deep(.milkdown__editor) {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
min-height: 0;
|
|
height: auto !important;
|
|
}
|
|
|
|
.doc-card__editor :deep(.ProseMirror) {
|
|
min-height: 0;
|
|
height: auto !important;
|
|
overflow-x: hidden;
|
|
padding: 10px 12px 12px !important;
|
|
font-size: 13px !important;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.doc-card__editor :deep(.ProseMirror > *:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.doc-card__editor :deep(.ProseMirror img) {
|
|
max-width: min(100%, 520px);
|
|
height: auto;
|
|
}
|
|
|
|
.doc-card__editor :deep(.ProseMirror p:first-child) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.doc-card__editor :deep(.cm-scroller) {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior-y: contain;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
|
|
.doc-card__editor :deep(.cm-editor) {
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.doc-card__editor :deep(.milkdown__toolbar),
|
|
.doc-card__editor :deep(.milkdown__menu),
|
|
.doc-card__editor :deep(.milkdown__statusbar),
|
|
.doc-card__editor :deep(.milkdown-slate-toolbar),
|
|
.doc-card__editor :deep(.milkdown-bubble-menu) {
|
|
display: none !important;
|
|
}
|
|
</style>
|