Browse Source

add:AI写作

master
prr 6 months ago
parent
commit
80cb8fc599
  1. 59
      packages/word/index.html
  2. 1
      packages/word/src/assets/images/article.svg
  3. 1
      packages/word/src/assets/images/outline.svg
  4. 2
      packages/word/src/editor/core/command/Command.ts
  5. 85
      packages/word/src/editor/core/command/CommandAdapt.ts
  6. 82
      packages/word/src/main.ts
  7. 4
      packages/word/src/plugins/floatingToolbar/icons/Svgs.ts
  8. 31
      packages/word/src/plugins/floatingToolbar/index.ts
  9. 126
      packages/word/src/style.css

59
packages/word/index.html

@ -337,6 +337,65 @@
<div class="menu-item__ai-edit" data-menu="save">
<i></i>
</div>
<div class="menu-item__ai-edit-box hide">
<span>×</span>
<div class="ai-edit-outline-box">
<div class="ai-menu">
<p class="outline-svg active-ai"><i></i>生成大纲</p>
</div>
<div class="ai-content-box">
<div>
<label for="">标题:</label>
<input type="text">
</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>
</select>
</div>
<button id="aiArticle">生成大纲</button>
</div>
</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>
<button id="articleInsert">插入</button>
</div>
<div id="outlineView" class="ai-content-box hide">
<textarea name="" id="outlineText" readonly></textarea>
</div>
<div id="articleView" class="ai-content-box">
<textarea name="" id="articleText" readonly>
将进酒
作者:李白
  君不见,黄河之水天上来,奔流到海不复回。
  君不见,高堂明镜悲白发,朝如青丝暮成雪!
  人生得意须尽欢,莫使金樽空对月。
  天生我材必有用,千金散尽还复来。
  烹羊宰牛且为乐,会须一饮三百杯。
  岑夫子,丹丘生,将进酒,杯莫停。
  与君歌一曲,请君为我倾耳听。
  钟鼓馔玉不足贵,但愿长醉不复醒。
  古来圣贤皆寂寞,惟有饮者留其名。
  陈王昔时宴平乐,斗酒十千恣欢谑。
  主人何为言少钱,径须沽取对君酌。
  五花马、千金裘,呼儿将出换美酒,与尔同销万古愁!
</textarea>
</div>
</div>
</div>
<div class="menu-item__save" data-menu="save">
<i></i>
</div>

1
packages/word/src/assets/images/article.svg

@ -0,0 +1 @@
<svg t="1732247973623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7387" width="16" height="16"><path d="M640 795.136a155.136 155.136 0 0 0 155.136-155.136h31.0272a155.136 155.136 0 0 0 155.136 155.136v31.0272a155.136 155.136 0 0 0-155.136 155.136h-31.0272a155.136 155.136 0 0 0-155.136-155.136v-31.0272zM85.3504 128h853.2992v85.3504H85.3504V128z m0 213.3504h853.2992v85.2992H85.3504V341.3504z m0 213.2992h512V640h-512v-85.3504z m0 213.3504h341.2992v85.3504H85.3504z" p-id="7388" fill="#515151"></path></svg>

After

Width:  |  Height:  |  Size: 556 B

1
packages/word/src/assets/images/outline.svg

@ -0,0 +1 @@
<svg t="1732255262904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8990" width="16" height="16"><path d="M639.77984 748.449304a31.34893 31.34893 0 0 0 8.317063-1.151594l223.920928-63.977407c17.081968-4.862283 27.190398-23.543686 22.648002-41.777248-4.606373-18.233561-22.136183-28.981766-39.154174-24.119483l-223.920927 63.977408c-17.081968 4.862283-27.190398 23.543686-22.648003 41.777248a32.244614 32.244614 0 0 0 30.837111 25.271076z m0-170.499792a31.34893 31.34893 0 0 0 8.317063-1.151594l223.920928-63.977408c17.081968-4.862283 27.190398-23.607664 22.648002-41.777247-4.606373-18.233561-22.136183-28.981766-39.154174-24.119483l-223.920927 63.977408a34.419845 34.419845 0 0 0-22.71198 41.777247c3.838644 15.290601 16.762081 25.271076 30.901088 25.271077z m0-170.435815a31.34893 31.34893 0 0 0 8.317063-1.151594l223.920928-63.977408c17.081968-4.862283 27.190398-23.543686 22.648002-41.777247-4.606373-18.233561-22.136183-29.045743-39.154174-24.119483l-223.920927 63.977408c-17.145945 4.862283-27.254376 23.543686-22.71198 41.777248 3.838644 15.226623 16.762081 25.271076 30.901088 25.271076z m319.88704 418.86009l-415.853152 118.806046V197.411889L959.66688 78.605842v747.767945z m-479.83056 118.742069L63.983168 826.373787V78.605842L479.83632 197.411889v747.703967zM1011.104716 7.143078a30.261314 30.261314 0 0 0-27.766195-5.885922L511.825024 135.9296 40.24755 1.257156a30.005404 30.005404 0 0 0-27.702218 5.885922A34.739733 34.739733 0 0 0 0.00576 34.205521V852.540547a33.908026 33.908026 0 0 0 23.735618 32.948365l479.83056 137.039608a30.261314 30.261314 0 0 0 16.506171 0l479.83056-137.039608A33.908026 33.908026 0 0 0 1023.644288 852.540547V34.205521a34.739733 34.739733 0 0 0-12.539572-27.062443zM151.696194 683.320303l223.920928 63.977407a31.029043 31.029043 0 0 0 8.317063 1.151594 32.372568 32.372568 0 0 0 30.837111-25.271076c4.542396-18.169584-5.566034-36.914964-22.648003-41.777248l-223.920927-63.977408c-16.954013-4.798306-34.5478 5.949899-39.154174 24.183461-4.542396 18.169584 5.566034 36.850987 22.648002 41.71327z m0-170.499793l223.920928 63.977408A28.278014 28.278014 0 0 0 383.870208 577.949512a32.372568 32.372568 0 0 0 30.837111-25.271077c4.542396-18.169584-5.566034-36.914964-22.648003-41.777247l-223.920928-63.977408c-16.890036-4.798306-34.483823 5.949899-39.090196 24.18346-4.542396 18.169584 5.566034 36.850987 22.648002 41.71327z m0-170.435815l223.920928 63.977408A30.581201 30.581201 0 0 0 383.870208 407.513697a32.372568 32.372568 0 0 0 30.837111-25.271076c4.542396-18.169584-5.566034-36.914964-22.648003-41.777248l-223.920928-63.977408c-16.890036-4.862283-34.483823 5.885922-39.090196 24.119483-4.542396 18.169584 5.566034 36.914964 22.648002 41.777247z" fill="#515151" p-id="8991"></path></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

2
packages/word/src/editor/core/command/Command.ts

@ -30,6 +30,7 @@ export class Command {
public executeSubscript: CommandAdapt['subscript']
public excuteAiResult: CommandAdapt['aiResult']
public executeAiEdit: CommandAdapt['aiEdit']
public executeAiArticle: CommandAdapt['aiArticle']
public executeColor: CommandAdapt['color']
public executeHighlight: CommandAdapt['highlight']
public executeTitle: CommandAdapt['title']
@ -156,6 +157,7 @@ export class Command {
this.executeSubscript = adapt.subscript.bind(adapt)
this.excuteAiResult = adapt.aiResult.bind(adapt)
this.executeAiEdit = adapt.aiEdit.bind(adapt)
this.executeAiArticle = adapt.aiArticle.bind(adapt)
this.executeColor = adapt.color.bind(adapt)
this.executeHighlight = adapt.highlight.bind(adapt)
// 标题、对齐方式、列表

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

@ -477,7 +477,7 @@ export class CommandAdapt {
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
if (isDisabled) return
const selection = this.range.getSelectionElementList()
if (selection?.length) {
const noBoldIndex = selection.findIndex(s => !s.bold)
selection.forEach(el => {
@ -635,10 +635,75 @@ export class CommandAdapt {
})
this.draw.render({ isSetCursor: false })
}
public aiResult (result?: string) {
result ? this.aiContent = result : ''
public aiResult(result?: string) {
result ? (this.aiContent = result) : ''
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
})
this.search(content)
this.replace(content + payload)
// if (operate && content) {
// window.parent.postMessage(
// {
// type: 'aiCreater',
// data: content,
// action: operate
// },
// '*'
// )
// }
return content
}
public aiEdit(operate: string | null) {
console.log('ai edit:', operate)
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
@ -648,9 +713,9 @@ export class CommandAdapt {
let content = ''
selection.forEach(el => {
content += el.value
})
})
// const eventBus = this.draw.getEventBus()
this.search(content)
if (operate && content) {
window.parent.postMessage(
@ -905,10 +970,12 @@ export class CommandAdapt {
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
if (isDisabled) return
const activeControl = this.control.getActiveControl()
//console.log(' hyperlink:', activeControl)
if (activeControl) return
const { startIndex, endIndex } = this.range.getRange()
if (!~startIndex && !~endIndex) return
const elementList = this.draw.getElementList()
const { valueList, url } = payload
const hyperlinkId = getUUID()
const newElementList = valueList?.map<IElement>(v => ({
@ -1180,12 +1247,14 @@ export class CommandAdapt {
}
public replace(payload: string) {
console.log('替换:', payload);
// console.log('替换', payload)
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
if (!payload || new RegExp(`${ZERO}`, 'g').test(payload)) return
const matchList = this.draw.getSearch().getSearchMatchList()
// console.log('ssssss:', matchList)
if (!matchList.length) return
// 匹配index变化的差值
let pageDiffCount = 0
@ -1231,6 +1300,8 @@ 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

82
packages/word/src/main.ts

@ -238,12 +238,12 @@ window.onload = function () {
}
//ai
const aiEditDom = document.querySelector<HTMLDivElement>('.menu-item__ai-edit')!
aiEditDom.title = `ai帮助`
aiEditDom.onclick = function () {
console.log('ai-edit')
instance.command.executeAiEdit('')
}
// const aiEditDom = document.querySelector<HTMLDivElement>('.menu-item__ai-edit')!
// aiEditDom.title = `ai帮助`
// aiEditDom.onclick = function () {
// console.log('ai-edit')
// instance.command.executeAiEdit('')
// }
const colorControlDom = document.querySelector<HTMLInputElement>('#color')!
colorControlDom.oninput = function () {
@ -1131,6 +1131,76 @@ window.onload = function () {
})
}
//添加AI功能
const aiEditDom = document.querySelector<HTMLDivElement>('.menu-item__ai-edit')!
const aiMenuBox = document.querySelector<HTMLDivElement>('.menu-item__ai-edit-box')!
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')!
aiEditDom.title = `ai写作`
aiEditDom.onclick = function () {
console.log('ai-edit')
instance.command.executeAiEdit('')
aiMenuBox.classList.contains('hide') ? aiMenuBox.classList.remove('hide') : aiMenuBox.classList.add('hide')
}
function initAiDialog() {
aiMenuBox.classList.add('hide')
aiMenuBox.classList.remove('add-height')
aiOutlineDom?.classList.remove('hide')
aiContentDom?.classList.add('hide')
}
aiMenuBoxClose.onclick = function () {
initAiDialog()
}
// 点击生成大纲,弹窗切换
document.querySelector<HTMLButtonElement>('#aiArticle')!.onclick =
function () {
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() {
watchOutline.classList.add('active-ai')
watchArticle.classList.remove('active-ai')
aiInertBtn?.classList.add('hide')
outlineViewDom.classList.remove('hide')
articleViewDom.classList.add('hide')
}
watchArticle.onclick =
function() {
watchArticle.classList.add('active-ai')
watchOutline.classList.remove('active-ai')
aiInertBtn?.classList.remove('hide')
outlineViewDom.classList.add('hide')
articleViewDom.classList.remove('hide')
}
//插入文章
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);
instance.command.executeAiArticle(text)
initAiDialog()
}
// 5. | 搜索&替换 | 打印 |
const searchCollapseDom = document.querySelector<HTMLDivElement>(
'.menu-item__search__collapse'

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

@ -12,5 +12,7 @@ export const Svgs = {
simplification: `<svg t="1732000724337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34332" width="16" height="16"><path d="M843.2 64 175.552 64c-101.248 0-110.08 116.864-110.08 116.864s0 606.848 0 675.776c0 68.928 110.08 103.36 110.08 103.36l495.296 0 287.616-283.2c0 0 0-417.984 0-504.896C958.528 84.992 843.2 64 843.2 64zM888.768 648.64c0 35.328-37.312 37.184-37.312 37.184s-85.376 0-126.976 0c-41.536 0-41.152 31.488-41.152 31.488s0 81.28 0 125.888c0 44.48-22.528 46.4-22.528 46.4s-418.048 0-468.992 0-56.448-43.456-56.448-43.456 0-591.808 0-648.768 56.448-67.392 56.448-67.392 579.904 2.88 633.216 2.88c53.248 0 63.744 63.744 63.744 63.744S888.768 613.184 888.768 648.64z" fill="#515151" p-id="34333"></path><path d="M754.752 373.696c0 19.264-15.488 34.752-34.688 34.752L300.288 408.448c-19.2 0-34.752-15.488-34.752-34.752l0 0c0-19.2 15.552-34.688 34.752-34.688l419.776 0C739.264 339.008 754.752 354.496 754.752 373.696L754.752 373.696z" fill="#515151" p-id="34334"></path><path d="M680.64 550.336c0 18.56-15.104 33.664-33.728 33.664L299.264 584c-18.56 0-33.664-15.104-33.664-33.664l0 0c0-18.752 15.104-33.792 33.664-33.792l347.648 0C665.472 516.48 680.64 531.584 680.64 550.336L680.64 550.336z" fill="#515151" p-id="34335"></path></svg>`,
richContent: `<svg t="1732000631383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28766" width="16" height="16"><path d="M451.733333 665.066667l-2.133333 118.933333c0 9.066667 6.933333 16 16 16h0.533333l117.866667-2.666667c2.133333 0 4.266667-1.066667 5.333333-2.133333l356.266667-356.266667c3.2-3.2 3.2-8 0-11.2L821.333333 303.466667c-1.6-1.6-3.733333-2.133333-5.866666-2.133334-2.133333 0-4.266667 1.066667-5.866667 2.133334L453.333333 659.733333c-0.533333 1.066667-1.6 3.2-1.6 5.333334z m63.466667 23.466666L816 387.733333l45.333333 45.333334-301.333333 300.8-45.866667 1.066666c0.533333 0 1.066667-46.4 1.066667-46.4zM661.333333 341.333333H320c-5.866667 0-10.666667-4.8-10.666667-10.666666V266.666667c0-5.866667 4.8-10.666667 10.666667-10.666667h341.333333c5.866667 0 10.666667 4.8 10.666667 10.666667v64c0 5.866667-4.8 10.666667-10.666667 10.666666zM490.133333 512H320c-5.866667 0-10.666667-4.8-10.666667-10.666667V437.333333c0-5.866667 4.8-10.666667 10.666667-10.666666h170.133333c5.866667 0 10.666667 4.8 10.666667 10.666666v64c0 5.866667-4.8 10.666667-10.666667 10.666667z" p-id="28767" fill="#515151"></path><path d="M757.333333 865.066667H224V160h533.333333v74.666667c0 5.866667 4.8 10.666667 10.666667 10.666666h64c5.866667 0 10.666667-4.8 10.666667-10.666666V106.666667c0-17.6-14.4-32-32-32H170.666667c-17.6 0-32 14.4-32 32v811.733333c0 17.6 14.4 32 32 32h640c17.6 0 32-14.4 32-32V736c0-5.866667-4.8-10.666667-10.666667-10.666667h-64c-5.866667 0-10.666667 4.8-10.666667 10.666667v129.066667z" p-id="28768" fill="#515151"></path></svg>`,
translation: `<svg t="1732000795334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38216" width="16" height="16"><path d="M608 416h288.00000001c35.36 0 63.99999999 28.48000002 63.99999999 64v416.00000001c0 35.36-28.48000002 63.99999999-63.99999999 63.99999999H480c-35.36 0-63.99999999-28.48000002-64-64.00000001v-287.99999999H127.99999999c-35.36 0-63.99999999-28.48000002-63.99999999-64V127.99999999c0-35.36 28.48000002-63.99999999 64.00000001-63.99999999h415.99999999c35.36 0 63.99999999 28.48000002 64 64.00000001v287.99999999z m0 64v64c0 35.36-28.48000002 63.99999999-64 64h-64v256.032c0 17.664 14.304 31.96800001 31.968 31.96799999H864a31.96800001 31.96800001 0 0 0 31.968-31.96799999V512a31.96800001 31.96800001 0 0 0-31.968-31.96800001H608zM127.99999999 159.968V512c0 17.664 14.304 31.96800001 31.96800001 31.96800001H512a31.96800001 31.96800001 0 0 0 31.96800001-31.96800001V160A31.96800001 31.96800001 0 0 0 512.032 127.99999999H160A31.96800001 31.96800001 0 0 0 127.99999999 159.968z m64.00000001 244.288V243.36h112.736V176h46.752c6.4 0.928 9.63200001 1.824 9.632 2.75200001a10.56000001 10.56000001 0 0 1-1.37600001 4.12799998c-2.75200001 7.328-4.128 16.032-4.12799999 26.11200001v34.368h119.648v156.768h-50.88000001v-20.64000001h-68.76799999v118.27200002H306.11199999v-118.27200002H238.752v24.76800001H192z m46.72-122.36800001v60.48000001h67.39200001V281.91999999H238.752z m185.66400001 60.48000001V281.91999999h-68.76800001v60.48000001h68.76799999z m203.83999999 488H575.99999999L668.128 575.99999999h64.64l89.344 254.40000002h-54.976l-19.264-53.66400001h-100.38399999l-19.23200001 53.632z m33.024-96.256h72.864l-34.368-108.608h-1.376l-37.12 108.608zM896.00000001 320h-64.00000001a128.00000001 128.00000001 0 0 0-128-128V127.99999999a192 192 0 0 1 191.99999999 192.00000001zM127.99999999 704h64.00000001a128.00000001 128.00000001 0 0 0 128 128v64.00000001a192 192 0 0 1-191.99999999-192.00000001z" fill="#515151" p-id="38217"></path></svg>`,
summary: `<svg t="1732001057788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39349" width="16" height="16"><path d="M794.168 517.746L746 469.574 499.4 792.73l-15.662 11.746-359.024 138.4-46.44-46.56 139.34-358.2 11.688-15.546 322.932-246.76-47.98-47.978L671.132 60.954l289.914 289.914z m-513.2 55.832l-74.2 190.738 195.326-195.328a52 52 0 1 1 50.912 50.912l-194.24 194.24L448.4 741.038l246.186-322.6-91.064-91.338z m325.11-345.746l188.09 188.09 65.054-65.054-188.09-188.09z" p-id="39350" fill="#515151"></path></svg>`
summary: `<svg t="1732001057788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39349" width="16" height="16"><path d="M794.168 517.746L746 469.574 499.4 792.73l-15.662 11.746-359.024 138.4-46.44-46.56 139.34-358.2 11.688-15.546 322.932-246.76-47.98-47.978L671.132 60.954l289.914 289.914z m-513.2 55.832l-74.2 190.738 195.326-195.328a52 52 0 1 1 50.912 50.912l-194.24 194.24L448.4 741.038l246.186-322.6-91.064-91.338z m325.11-345.746l188.09 188.09 65.054-65.054-188.09-188.09z" p-id="39350" fill="#515151"></path></svg>`,
outline: `<svg t="1732237907313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4525" width="16" height="16"><path d="M960 256H192v256h128V448c0-38.4 25.6-64 64-64h448c38.4 0 64 25.6 64 64v128c0 38.4-25.6 64-64 64H384c-38.4 0-64-25.6-64-64H192v320h128v-64c0-38.4 25.6-64 64-64h448c38.4 0 64 25.6 64 64v128c0 38.4-25.6 64-64 64H384c-38.4 0-64-25.6-64-64H192c-38.4 0-64-25.6-64-64V256H64c-38.4 0-64-25.6-64-64V64c0-38.4 25.6-64 64-64h896c38.4 0 64 25.6 64 64v128c0 38.4-25.6 64-64 64zM384 576h448V448H384v128z m0 384h448v-128H384v128z m576-896H64v128h896V64z" fill="#2c2c2c" p-id="4526"></path></svg>`,
compose: `<svg t="1732238116599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6445" width="16" height="16"><path d="M115.712 247.808h786.432c32.256 0 58.88-26.624 58.88-58.88 0-32.768-26.624-58.88-58.88-58.88H115.712c-32.768 0-58.88 26.624-58.88 58.88s26.624 58.88 58.88 58.88zM487.424 533.504c0-15.872-6.144-30.72-17.408-41.984-11.264-11.264-26.112-17.408-41.984-17.408h-312.32c-32.256 0-58.88 26.624-58.88 58.88 0 32.768 26.624 58.88 58.88 58.88h312.832c32.256 0.512 58.88-25.6 58.88-58.368zM241.152 819.712H115.712c-32.256 0-58.88 26.624-58.88 58.88 0 32.768 26.624 58.88 58.88 58.88h125.44c32.256 0 58.88-26.624 58.88-58.88 0-15.872-6.144-30.72-17.408-41.984-10.752-10.752-25.6-16.896-41.472-16.896zM930.816 389.632l-89.088-61.44c-28.672-21.504-68.096-15.872-90.624 11.776l-279.04 390.656c-7.168 10.24-10.752 22.528-10.752 34.816l2.048 130.048c1.536 21.504 18.944 38.4 40.448 38.4l5.12-0.512 0.512-0.512c2.56-0.512 4.608-1.024 7.168-1.536l124.416-42.496c12.288-4.096 22.528-11.264 29.696-21.504l279.04-390.144 1.024-1.536c8.704-14.336 11.776-31.232 7.68-47.616-3.584-15.36-13.312-29.184-27.648-38.4z m-87.04 62.976l-246.784 345.088-33.792 11.264-0.512-31.232L811.008 430.08l32.768 22.528z m-291.84 373.76z" p-id="6446" fill="#515151"></path></svg>`
}

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

@ -63,23 +63,16 @@ function createPickerToolbar(
export const defaultAiPanelMenus = [
{
icon: Svgs.optimize,
// title: '改进写作',
title: '优化',
key: 'creation_optimization'
},
{
icon: Svgs.checkGrammar,
// title: '检查拼写和语法'
title: '纠错',
key: 'creation_proofreading'
},
// {
// icon: Svgs.simplification,
// title: '简化内容'
// },
{
icon: Svgs.richContent,
// title: '丰富内容'
title: '续写',
key: 'creation_continuation'
},
@ -166,18 +159,8 @@ 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 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
@ -223,20 +206,6 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
}
}
})
container.querySelectorAll('.aie-ai-panel-actions p').forEach(element => {
// const prompt = element.getAttribute('data-prompt')!
// element.addEventListener('click', () => {
// startChat(holder, container, prompt)
// })
})
container.addEventListener('click', e => {
// if (e.target === container) {
// holder.aiPanelInstance?.hide()
// holder.tippyInstance?.show()
// }
})
}
//ai弹窗初始化
function initAiDialog(container: HTMLDivElement, editor: Editor) {

126
packages/word/src/style.css

@ -1073,3 +1073,129 @@ ul {
.menu-item__ai-edit i{
background-image: url('./assets/images/ai-edit.svg');
}
.outline-svg i{
margin-right: 5px;
background-image: url('./assets/images/outline.svg');
}
.article-svg i{
margin-right: 5px;
background-image: url('./assets/images/article.svg');
}
.hide {
display: none !important;
}
.active-ai {
font-weight: bold;
}
.add-height {
height: 300px !important;
}
.menu-item .menu-item__ai-edit-box {
/* display: block; */
position: absolute;
top: 25px;
width: 500px;
min-height: 120px;
/* height: 80px; */
font-size: 14px;
padding: 10px 15px 10px 0;
background-color: #ebf9fb !important;
box-shadow: 0px 5px 5px #e3dfdf;
}
.menu-item .menu-item__ai-edit-box span {
position: absolute;
top: 0px;
right: 0px;
width: 25px;
height: 25px;
/* height: 100%; */
color: #dcdfe6;
font-size: 25px;
text-align: center;
line-height: 25px;
border: 0;
}
.menu-item .menu-item__ai-edit-box input ,
.menu-item .menu-item__ai-edit-box select{
width: 180px;
height: 27px;
appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #ebebeb;
box-sizing: border-box;
color: #606266;
display: inline-block;
line-height: 27px;
outline: none;
padding: 0 10px;
}
.menu-item .menu-item__ai-edit-box button {
display: inline-block;
border: 1px solid #e2e6ed;
border-radius: 2px;
background: #fff;
line-height: 22px;
padding: 0 6px;
white-space: nowrap;
margin-left: 4px;
cursor: pointer;
font-size: 12px;
}
.menu-item .ai-edit-outline-box,
.menu-item .ai-edit-content-box{
width: 100%;
height: 100%;
text-align: center;
}
.menu-item .ai-menu {
display: inline-block;
position: relative;
width: 20%;
min-width: 85px;
height: 100%;
padding: 10px 0;
box-sizing: border-box;
vertical-align: top;
}
.menu-item .ai-menu button {
position: absolute;
bottom: 10px;
right: 10px;
}
.menu-item .ai-menu button:hover {
background: rgba(25, 55, 88, .04);
}
.menu-item .ai-menu p {
display: inline-block;
height: 25px;
line-height: 25px;
vertical-align: middle;
}
.menu-item .ai-content-box {
display: inline-block;
width: 70%;
height: 100%;
/* padding: 10px 15px; */
border-radius: 5px;
background-color: #ffffff;
box-sizing: border-box;
}
.menu-item .ai-content-box textarea {
width: 100%;
height: 100%;
padding: 10px 15px;
/* height: 250px; */
border-color: #f4f4f5;
border-radius: 5px;
outline: none;
resize: none;
box-sizing: border-box;
}
.ai-content-box div {
margin: 5px 0;
}
Loading…
Cancel
Save