Browse Source

add:AI写作交互实现

master
prr 7 months ago
parent
commit
3b85620508
  1. 35
      packages/word/index.html
  2. 61
      packages/word/src/editor/core/command/CommandAdapt.ts
  3. 97
      packages/word/src/main.ts

35
packages/word/index.html

@ -346,21 +346,21 @@
<div class="ai-content-box">
<div>
<label for="">标题:</label>
<input type="text">
<input id="aiTitle" type="text" placeholder="请输入标题">
</div>
<div>
<label for="">分类:</label>
<select name="articleClassification" id="aiSelect">
<option value="">论文</option>
<option value="">合同</option>
<option value="">项目</option>
<option value="">投标</option>
<option value="">招标</option>
<option value="">散文</option>
<option value="">产品说明</option>
<option value="">销售计划</option>
<option value="">年度计划</option>
<option value="">战略规划</option>
<option value="论文">论文</option>
<option value="合同">合同</option>
<option value="项目">项目</option>
<option value="投标">投标</option>
<option value="招标">招标</option>
<option value="散文">散文</option>
<option value="产品说明">产品说明</option>
<option value="销售计划">销售计划</option>
<option value="年度计划">年度计划</option>
<option value="战略规划">战略规划</option>
</select>
</div>
<button id="aiArticle">生成大纲</button>
@ -368,15 +368,16 @@
</div>
<div class="ai-edit-content-box hide">
<div class="ai-menu">
<p id="watchOutline" class="outline-svg"><i></i>查看大纲</p>
<p id="watchArticle" class="article-svg active-ai"><i></i>查看文章</p>
<p id="watchOutline" class="outline-svg active-ai"><i></i>查看大纲</p>
<p id="watchArticle" class="article-svg"><i></i>查看文章</p>
<button id="articleInsert">插入</button>
<button id="createArticle">生成文章</button>
</div>
<div id="outlineView" class="ai-content-box hide">
<textarea name="" id="outlineText" readonly></textarea>
<div id="outlineView" class="ai-content-box">
<textarea name="" id="outlineText">大纲</textarea>
</div>
<div id="articleView" class="ai-content-box">
<textarea name="" id="articleText" readonly>
<div id="articleView" class="ai-content-box hide">
<textarea name="articleText" id="articleText">
将进酒
作者:李白

61
packages/word/src/editor/core/command/CommandAdapt.ts

@ -640,58 +640,22 @@ export class CommandAdapt {
return this.aiContent
}
public aiArticle(payload: string) {
// const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
// if (isDisabled) return
// const activeControl = this.control.getActiveControl()
// if (activeControl) return
// let { startIndex, endIndex } = this.range.getRange()
// console.log('range:', startIndex, endIndex)
// if (!~startIndex && !~endIndex) {
// startIndex = 0
// endIndex = 0
// }
// const elementList = this.draw.getElementList()
// console.log('hyperlink temp: ', payload, elementList)
// const { valueList, url } = payload
// const hyperlinkId = getUUID()
// const newElementList = valueList?.map<IElement>(v => ({
// url,
// hyperlinkId,
// value: v.value,
// type: ElementType.HYPERLINK
// }))
// if (!newElementList) return
// const start = startIndex + 1
// formatElementContext(elementList, newElementList, startIndex, {
// editorOptions: this.options
// })
// this.draw.spliceElementList(
// elementList,
// start,
// startIndex === endIndex ? 0 : endIndex - startIndex,
// ...newElementList
// )
// const articalLength = newElementList?.length || 0
// const curIndex = start + articalLength - 1
// this.range.setRange(curIndex, curIndex)
// this.draw.render({ curIndex })
// console.log('ai article:')
this.selectAll()
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
// console.log('isDisables:', isDisabled);
if (isDisabled) return
const selection = this.range.getSelectionElementList()
// if (!selection) return
let content = ''
selection?.forEach(el => {
content += el.value
})
if (content === '') {
this.setHTML({
main: '<p>\t</p>'
})
content = '\t'
}
this.search(content)
this.replace(content + payload)
this.replace(content + payload, true)
// if (operate && content) {
// window.parent.postMessage(
// {
@ -1246,15 +1210,18 @@ export class CommandAdapt {
return this.searchManager.getSearchNavigateInfo()
}
public replace(payload: string) {
public replace(payload: string, aiArticle?: boolean) {
// console.log('替换', payload)
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
if(aiArticle && aiArticle == true) {
if (!payload) return
} else {
if (!payload || new RegExp(`${ZERO}`, 'g').test(payload)) return
}
// if (!payload || (isZero && aiArticle)) return
const matchList = this.draw.getSearch().getSearchMatchList()
// console.log('ssssss:', matchList)
if (!matchList.length) return
// 匹配index变化的差值
let pageDiffCount = 0
@ -1300,8 +1267,6 @@ export class CommandAdapt {
} else {
const curIndex = match.index + pageDiffCount
const element = elementList[curIndex]
console.log(element);
if (
element.type === ElementType.CONTROL &&
element.controlComponent !== ControlComponent.VALUE

97
packages/word/src/main.ts

@ -1137,6 +1137,16 @@ window.onload = function () {
const aiMenuBoxClose = document.querySelector<HTMLDivElement>('.menu-item__ai-edit-box span')!
const aiOutlineDom = document.querySelector<HTMLDivElement>('.ai-edit-outline-box')!
const aiContentDom = document.querySelector<HTMLDivElement>('.ai-edit-content-box')!
const articleTitle = document.querySelector<HTMLInputElement>('#aiTitle')!
const articleType = document.querySelector<HTMLSelectElement>('#aiSelect')!
const watchOutline = document.querySelector<HTMLPreElement>('#watchOutline')!
const watchArticle = document.querySelector<HTMLPreElement>('#watchArticle')!
const outlineViewDom = document.querySelector<HTMLDivElement>('#outlineView')!
const articleViewDom = document.querySelector<HTMLDivElement>('#articleView')!
const aiInertBtn = document.querySelector<HTMLButtonElement>('#articleInsert')!
const createArticleBtn = document.querySelector<HTMLButtonElement>('#createArticle')!
const outlineTextarea = document.querySelector<HTMLTextAreaElement>('#outlineText')!
const articleTextarea = document.querySelector<HTMLTextAreaElement>('#articleText')!
aiEditDom.title = `ai写作`
aiEditDom.onclick = function () {
console.log('ai-edit')
@ -1149,6 +1159,9 @@ window.onload = function () {
aiMenuBox.classList.remove('add-height')
aiOutlineDom?.classList.remove('hide')
aiContentDom?.classList.add('hide')
switchView('outline')
articleTextarea.textContent = ''
outlineTextarea.textContent = ''
}
aiMenuBoxClose.onclick = function () {
initAiDialog()
@ -1156,48 +1169,80 @@ window.onload = function () {
// 点击生成大纲,弹窗切换
document.querySelector<HTMLButtonElement>('#aiArticle')!.onclick =
function () {
const title = articleTitle.value
const category = articleType.value
//console.log('类型:',title, category);
if (title == '' || category == '') {
// alert()
// new Dialog({
// title: '请输入标题和分类',
// data: {}
// })
return
}
window.parent.postMessage(
{
type: 'aiCreater',
data: {
title,
category
},
action: 'creation_leader'
},
'*'
)
outlineTextarea.textContent = instance.command.excuteAiResult()
aiOutlineDom?.classList.add('hide')
aiContentDom?.classList.remove('hide')
aiMenuBox.classList.add('add-height')
}
const watchOutline = document.querySelector<HTMLPreElement>('#watchOutline')!
const watchArticle = document.querySelector<HTMLPreElement>('#watchArticle')!
const outlineViewDom = document.querySelector<HTMLDivElement>('#outlineView')!
const articleViewDom = document.querySelector<HTMLDivElement>('#articleView')!
const aiInertBtn = document.querySelector<HTMLButtonElement>('#articleInsert')!
watchOutline.onclick =
function() {
// 视图切换
function switchView(view: string) {
switch (view) {
case 'outline':
watchOutline.classList.add('active-ai')
watchArticle.classList.remove('active-ai')
createArticleBtn?.classList.remove('hide')
aiInertBtn?.classList.add('hide')
outlineViewDom.classList.remove('hide')
articleViewDom.classList.add('hide')
}
watchArticle.onclick =
function() {
break
case 'article':
watchArticle.classList.add('active-ai')
watchOutline.classList.remove('active-ai')
createArticleBtn?.classList.add('hide')
aiInertBtn?.classList.remove('hide')
outlineViewDom.classList.add('hide')
articleViewDom.classList.remove('hide')
break
default:
break
}
}
// 查看大纲
watchOutline.onclick = () => switchView('outline')
// 查看文章
watchArticle.onclick = () => switchView('article')
// 生成文章
createArticleBtn.onclick = function () {
switchView('article')
window.parent.postMessage(
{
type: 'aiCreater',
data: {
title: articleTitle.value,
outline: outlineTextarea.textContent
},
action: 'creation_builder'
},
'*'
)
articleTextarea.textContent = instance.command.excuteAiResult()
}
//插入文章
aiInertBtn.onclick = function () {
const text = document.querySelector<HTMLTextAreaElement>('#articleText')?.textContent || ''
// instance.command.executeSelectAll()
// instance.command.executeSearch()
// text ? instance.command.executeReplace(text) : ''
// const temp = {
// type: ElementType.TEXT,
// value: '',
// url: '',
// valueList: splitText(text).map(n => ({
// value: n,
// size: 16
// }))
// }
// console.log('数字:', temp);
const text = articleTextarea.textContent || ''
instance.command.executeAiArticle(text)
initAiDialog()
}
@ -2116,7 +2161,7 @@ window.onload = function () {
} else if (eventData.type === 'aiReciver') {
// const buffer = base64ToArrayBuffer(eventData.data)
// console.log('接收到来自伏组件数据:', eventData.data);
//console.log('接收到来自伏组件数据:', eventData.data);
instance.command.excuteAiResult(eventData.data)
}

Loading…
Cancel
Save