diff --git a/frontend/src/components/window/IframeFile.vue b/frontend/src/components/window/IframeFile.vue index 9d393e0..0dfce81 100644 --- a/frontend/src/components/window/IframeFile.vue +++ b/frontend/src/components/window/IframeFile.vue @@ -35,7 +35,7 @@ const storeRef = ref(null); let hasInit = false; const eventHandler = async (e: MessageEvent) => { const eventData = e.data; - + if (eventData.type == props.eventType) { let data = JSON.parse(eventData.data); let title = data.title; @@ -186,6 +186,25 @@ const eventHandler = async (e: MessageEvent) => { winMind.show() } + else if (eventData.type == 'aiCreater') { + // 模拟AI返回数据 + storeRef.value?.contentWindow?.postMessage( + { + type: 'aiReciver', + data: '-------------经过AI处理后的数据-----------', + }, + "*" + ); + } + else if (eventData.type == 'aiReciver') { + storeRef.value?.contentWindow?.postMessage( + { + type: eventData.type, + data: '----经过AI处理后的数据-----', + }, + "*" + ); + } }; //删除本地暂存的文件密码 const delFileInputPwd = async () => { diff --git a/packages/word/src/editor/core/command/Command.ts b/packages/word/src/editor/core/command/Command.ts index d401400..f63c19a 100644 --- a/packages/word/src/editor/core/command/Command.ts +++ b/packages/word/src/editor/core/command/Command.ts @@ -28,6 +28,7 @@ export class Command { public executeStrikeout: CommandAdapt['strikeout'] public executeSuperscript: CommandAdapt['superscript'] public executeSubscript: CommandAdapt['subscript'] + public excuteAiResult: CommandAdapt['aiResult'] public executeAiEdit: CommandAdapt['aiEdit'] public executeColor: CommandAdapt['color'] public executeHighlight: CommandAdapt['highlight'] @@ -153,6 +154,7 @@ export class Command { this.executeStrikeout = adapt.strikeout.bind(adapt) this.executeSuperscript = adapt.superscript.bind(adapt) this.executeSubscript = adapt.subscript.bind(adapt) + this.excuteAiResult = adapt.aiResult.bind(adapt) this.executeAiEdit = adapt.aiEdit.bind(adapt) this.executeColor = adapt.color.bind(adapt) this.executeHighlight = adapt.highlight.bind(adapt) diff --git a/packages/word/src/editor/core/command/CommandAdapt.ts b/packages/word/src/editor/core/command/CommandAdapt.ts index ac1a379..3d2c69b 100644 --- a/packages/word/src/editor/core/command/CommandAdapt.ts +++ b/packages/word/src/editor/core/command/CommandAdapt.ts @@ -121,6 +121,7 @@ export class CommandAdapt { private i18n: I18n private zone: Zone private tableOperate: TableOperate + private aiContent: string constructor(draw: Draw) { this.draw = draw @@ -135,6 +136,7 @@ export class CommandAdapt { this.i18n = draw.getI18n() this.zone = draw.getZone() this.tableOperate = draw.getTableOperate() + this.aiContent = '' } public mode(payload: EditorMode) { @@ -633,7 +635,10 @@ export class CommandAdapt { }) this.draw.render({ isSetCursor: false }) } - + public aiResult (result?: string) { + result ? this.aiContent = result : '' + return this.aiContent + } public aiEdit(operate: string | null) { console.log('ai edit:', operate) const isDisabled = this.draw.isReadonly() || this.draw.isDisabled() @@ -643,8 +648,20 @@ export class CommandAdapt { let content = '' selection.forEach(el => { content += el.value - }) - //console.log('操作内容:', content); + }) + // const eventBus = this.draw.getEventBus() + + this.search(content) + if (operate && content) { + window.parent.postMessage( + { + type: 'aiCreater', + data: content, + action: operate + }, + '*' + ) + } return content } @@ -1163,6 +1180,8 @@ export class CommandAdapt { } public replace(payload: string) { + console.log('替换:', payload); + const isReadonly = this.draw.isReadonly() if (isReadonly) return if (!payload || new RegExp(`${ZERO}`, 'g').test(payload)) return diff --git a/packages/word/src/editor/core/worker/WorkerManager.ts b/packages/word/src/editor/core/worker/WorkerManager.ts index 6114e3d..5bb3260 100644 --- a/packages/word/src/editor/core/worker/WorkerManager.ts +++ b/packages/word/src/editor/core/worker/WorkerManager.ts @@ -26,7 +26,6 @@ export class WorkerManager { this.wordCountWorker.onerror = evt => { reject(evt) } - const elementList = this.draw.getOriginalMainElementList() this.wordCountWorker.postMessage(elementList) }) diff --git a/packages/word/src/main.ts b/packages/word/src/main.ts index 9ab3e00..ff8dbe1 100644 --- a/packages/word/src/main.ts +++ b/packages/word/src/main.ts @@ -2030,6 +2030,8 @@ window.onload = function () { } const eventHandler = (e: any) => { const eventData = e.data + // console.log(''); + wordTitle = eventData.title ? eventData.title : '未命名文档' if (eventData.type === 'init') { const data = eventData.data @@ -2042,6 +2044,10 @@ window.onload = function () { arrayBuffer: buffer, }); + } else if (eventData.type === 'aiReciver') { + // const buffer = base64ToArrayBuffer(eventData.data) + // console.log('接收到来自伏组件数据:', eventData.data); + instance.command.excuteAiResult(eventData.data) } } diff --git a/packages/word/src/plugins/floatingToolbar/icons/Svgs.ts b/packages/word/src/plugins/floatingToolbar/icons/Svgs.ts index ba209c5..891ab80 100644 --- a/packages/word/src/plugins/floatingToolbar/icons/Svgs.ts +++ b/packages/word/src/plugins/floatingToolbar/icons/Svgs.ts @@ -3,6 +3,7 @@ export const Svgs = { check: ``, refresh: ``, aiPanelStart: ``, + aiPanelStop: ``, addContent: ``, replace: ` `, cancle: ``, diff --git a/packages/word/src/plugins/floatingToolbar/index.ts b/packages/word/src/plugins/floatingToolbar/index.ts index bc91afd..434b8a5 100644 --- a/packages/word/src/plugins/floatingToolbar/index.ts +++ b/packages/word/src/plugins/floatingToolbar/index.ts @@ -112,7 +112,7 @@ function createAIToolbar(
${Svgs.refresh}
-
+
@@ -166,60 +166,62 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) { container.querySelector('#footer-one')?.classList.remove('ai-hide') container.querySelector('#footer-two')?.classList.add('ai-hide') container.querySelector('.aie-ai-panel-body-content')?.classList.remove('ai-hide') + // const goBtn = container.querySelector('#go') + // goBtn ? goBtn.innerHTML = Svgs.aiPanelStop : '' //console.log('选项点击'); - const aiContent = editor.command.executeAiEdit(item.getAttribute('data-type')) + const chooseType = item.getAttribute('data-type') + // const aiContent = editor.command.excuteAiResult() + let aiContent = editor.command.executeAiEdit(chooseType) + // editor.eventBus.on('aiProcessedData', (msg: string) => { + // console.log('收到'); + + // aiContent = msg + // }) + const textarea = container.querySelector('textarea')! if (aiContent) { textarea.textContent = aiContent - //console.log('textarea内容:', textarea, aiContent); - } }) }) + // 替换 container.querySelector('#replace')!.addEventListener('click', () => { + const aiResult = editor.command.excuteAiResult() + editor.command.executeReplace(aiResult) console.log('替换'); - - // const textarea = container.querySelector('textarea')! - // if (textarea.value) { - // const { - // state: { selection, tr }, - // view: { dispatch }, - // schema - // } = holder.editor! - // const textNode = schema.text(textarea.value) - // dispatch(tr.replaceRangeWith(selection.from, selection.to, textNode)) - // holder.aiPanelInstance?.hide() - // holder.tippyInstance?.show() - // } }) - + // 插入 container.querySelector('#insert')!.addEventListener('click', () => { + const aiContent = editor.command.executeAiEdit('') + const aiResult = editor.command.excuteAiResult() + editor.command.executeReplace(aiContent + aiResult) + editor.command.executeSearch('') console.log('插入'); - - // const textarea = container.querySelector('textarea')! - // if (textarea.value) { - // const { - // state: { selection, tr }, - // view: { dispatch } - // } = holder.editor! - // dispatch(tr.insertText(textarea.value, selection.to)) - // holder.aiPanelInstance?.hide() - // holder.tippyInstance?.show() - // } }) - + // 舍弃 container.querySelector('#hide')!.addEventListener('click', () => { - console.log('舍弃'); - - // holder.aiPanelInstance?.hide() - // holder.tippyInstance?.show() + editor.command.executeSearch('') + initAiDialog(container, editor) + console.log('舍弃') }) - + // 搜索 container.querySelector('#go')!.addEventListener('click', () => { - // const prompt = (container.querySelector('#prompt') as HTMLInputElement) - // .value - // startChat(holder, container, prompt) + console.log('搜索'); + const inputOption = container.querySelector('#inputOption')! + if (inputOption.value) { + // const goBtn = container.querySelector('#go') + // goBtn ? goBtn.innerHTML = Svgs.aiPanelStop : '' + // goBtn ? (goBtn.innerHTML = Svgs.aiPanelStart) : '' + container.querySelector('#footer-one')?.classList.remove('ai-hide') + container.querySelector('#footer-two')?.classList.add('ai-hide') + container.querySelector('.aie-ai-panel-body-content')?.classList.remove('ai-hide') + const aiContent = editor.command.executeAiEdit(inputOption.value) + const textarea = container.querySelector('textarea')! + if (aiContent) { + textarea.textContent = aiContent + } + } }) container.querySelectorAll('.aie-ai-panel-actions p').forEach(element => { @@ -237,12 +239,15 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) { }) } //ai弹窗初始化 -function initAiDialog(container: HTMLDivElement) { +function initAiDialog(container: HTMLDivElement, editor: Editor) { + editor.command.executeSearch('') container.querySelector('.aie-container')?.classList.add('ai-hide') container.querySelector(`.${PLUGIN_PREFIX}-ai-edit`)?.classList.remove('ai-active') container.querySelector('#footer-one')?.classList.add('ai-hide') container.querySelector('#footer-two')?.classList.remove('ai-hide') container.querySelector('.aie-ai-panel-body-content')?.classList.add('ai-hide') + const inputOption = container.querySelector('#inputOption')! + inputOption.value = '' const textarea = container.querySelector('textarea')! textarea.textContent = "" } @@ -254,7 +259,6 @@ const toolbarRegisterList: IToolbarRegister[] = [ // editor.command.executeAiEdit('') // } render(container, editor) { - console.log('是否会重复'); createAIToolbar(container, ToolbarType.AI_EDIT, editor) } }, @@ -379,7 +383,7 @@ export default function floatingToolbarPlugin(editor: Editor) { const context = editor.command.getRangeContext() if (!context || context.isCollapsed || !context.rangeRects[0]) { toggleToolbarVisible(toolbarContainer, false) - initAiDialog(toolbarContainer) + initAiDialog(toolbarContainer, editor) return } // 定位 diff --git a/packages/word/src/plugins/floatingToolbar/style/index.scss b/packages/word/src/plugins/floatingToolbar/style/index.scss index bee5013..6e76eed 100644 --- a/packages/word/src/plugins/floatingToolbar/style/index.scss +++ b/packages/word/src/plugins/floatingToolbar/style/index.scss @@ -176,7 +176,7 @@ textarea { width: 100%; - height: 100%; + // height: 100%; // min-height: 100px; // height: 300px; padding: 15px;