Browse Source

Merge branch 'master' of https://gitee.com/godoos/godoos

master
godo 6 months ago
parent
commit
9066e9d974
  1. 21
      frontend/src/components/window/IframeFile.vue
  2. 2
      packages/word/src/editor/core/command/Command.ts
  3. 25
      packages/word/src/editor/core/command/CommandAdapt.ts
  4. 1
      packages/word/src/editor/core/worker/WorkerManager.ts
  5. 6
      packages/word/src/main.ts
  6. 1
      packages/word/src/plugins/floatingToolbar/icons/Svgs.ts
  7. 86
      packages/word/src/plugins/floatingToolbar/index.ts
  8. 2
      packages/word/src/plugins/floatingToolbar/style/index.scss

21
frontend/src/components/window/IframeFile.vue

@ -35,7 +35,7 @@ const storeRef = ref<HTMLIFrameElement | null>(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 () => {

2
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)

25
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

1
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)
})

6
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)
}
}

1
packages/word/src/plugins/floatingToolbar/icons/Svgs.ts

@ -3,6 +3,7 @@ export const Svgs = {
check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10.0007 15.1709L19.1931 5.97852L20.6073 7.39273L10.0007 17.9993L3.63672 11.6354L5.05093 10.2212L10.0007 15.1709Z"></path></svg>`,
refresh: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z" fill="currentColor"></path></svg>`,
aiPanelStart: `<svg t="1732001314260" class="icon" viewBox="0 0 1213 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40479" width="16" height="16"><path d="M1004.046124 568.908272l-379.622349 358.119266a54.421386 54.421386 0 0 0 0.26547 80.399538c23.778543 22.185722 62.195869 22.071949 85.822715-0.227546l470.3373-443.67651A56.886466 56.886466 0 0 0 1213.57794 510.580683a54.876477 54.876477 0 0 0-17.634804-41.489196L716.466076 16.844083A63.561145 63.561145 0 0 0 630.681286 16.578612a54.421386 54.421386 0 0 0-0.26547 80.437463L1010.038165 455.135341H56.886466a56.886466 56.886466 0 0 0 0 113.772931h947.159658z" fill="#ffffff" p-id="40480"></path></svg>`,
aiPanelStop: `<svg t="1732173169193" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4263" width="16" height="16"><path d="M722.9375 933.875H301.0625a210.9375 210.9375 0 0 1-210.9375-210.9375V301.0625a210.9375 210.9375 0 0 1 210.9375-210.9375h421.875a210.9375 210.9375 0 0 1 210.9375 210.9375v421.875a210.9375 210.9375 0 0 1-210.9375 210.9375z" p-id="4264" fill="#ffffff"></path></svg>`,
addContent: `<svg t="1732001601983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41747" width="16" height="16"><path d="M1022.721598 853.802081v-298.123346a43.550895 43.550895 0 0 0-87.059176 0v299.146067a85.2268 85.2268 0 0 1-85.2268 85.2268H168.32293a85.2268 85.2268 0 0 1-85.2268-85.2268V172.030295a85.2268 85.2268 0 0 1 85.2268-85.226799h298.933a43.380441 43.380441 0 0 0 0-86.760883H170.4536a170.4536 170.4536 0 0 0-170.4536 170.4536v683.305868a170.4536 170.4536 0 0 0 170.4536 170.453599h681.814398a170.4536 170.4536 0 0 0 170.4536-170.453599zM724.598252 296.54665v173.436538a42.442946 42.442946 0 1 0 84.885893 0v-173.436538h171.604161a41.633292 41.633292 0 1 0 0-83.266583h-171.604161V42.48556a42.442946 42.442946 0 1 0-84.885893 0v170.794507h-173.053017a41.633292 41.633292 0 1 0 0 83.266583h173.053017z" fill="#515151" p-id="41748"></path></svg>`,
replace: `<svg t="1731999904401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10318" width="16" height="16"><path d="M668.506 478.509l-42.425 42.425L697.146 592H449.573v60H842l-60-60zM449.573 688.509l60 60L623.067 862l42.425-42.426-71.065-71.065H842v-60H534.427z" fill="#515151" p-id="10319"></path><path d="M182 162v700h200v-60H242V222h540v250h60V162z" fill="#515151" p-id="10320"></path><path d="M322 302h380v60H322zM322 422h260v60H322z" fill="#515151" p-id="10321"></path></svg> `,
cancle: `<svg t="1731999948759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12341" width="16" height="16"><path d="M768 153.6h230.4a25.6 25.6 0 1 1 0 51.2H921.6v716.8a102.4 102.4 0 0 1-102.4 102.4H204.8a102.4 102.4 0 0 1-102.4-102.4V204.8H25.6a25.6 25.6 0 0 1 0-51.2H256V102.4a102.4 102.4 0 0 1 102.4-102.4h307.2a102.4 102.4 0 0 1 102.4 102.4v51.2z m-51.2 0V102.4a51.2 51.2 0 0 0-51.2-51.2H358.4a51.2 51.2 0 0 0-51.2 51.2v51.2h409.6zM153.6 204.8v716.8a51.2 51.2 0 0 0 51.2 51.2h614.4a51.2 51.2 0 0 0 51.2-51.2V204.8H153.6z" fill="#515151" p-id="12342"></path></svg>`,

86
packages/word/src/plugins/floatingToolbar/index.ts

@ -112,7 +112,7 @@ function createAIToolbar(
<div class="aie-ai-panel-body-content ai-hide"><div class="loader">
${Svgs.refresh}
</div><textarea readonly></textarea></div>
<div class="aie-ai-panel-body-input"><input id="prompt" placeholder="告诉 AI 下一步应该如何?比如:帮我翻译成英语" type="text" />
<div class="aie-ai-panel-body-input"><input id="inputOption" placeholder="告诉 AI 下一步应该如何?比如:帮我翻译成英语" type="text" />
<button type="button" id="go" style="width: 30px;height: 30px">
${Svgs.aiPanelStart}
</button></div>
@ -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<HTMLTextAreaElement>('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<HTMLInputElement>('#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<HTMLTextAreaElement>('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<HTMLDivElement>('.aie-container')?.classList.add('ai-hide')
container.querySelector<HTMLDivElement>(`.${PLUGIN_PREFIX}-ai-edit`)?.classList.remove('ai-active')
container.querySelector<HTMLDivElement>('#footer-one')?.classList.add('ai-hide')
container.querySelector<HTMLDivElement>('#footer-two')?.classList.remove('ai-hide')
container.querySelector('.aie-ai-panel-body-content')?.classList.add('ai-hide')
const inputOption = container.querySelector<HTMLInputElement>('#inputOption')!
inputOption.value = ''
const textarea = container.querySelector<HTMLTextAreaElement>('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
}
// 定位

2
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;

Loading…
Cancel
Save