Browse Source

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

master
godo 6 months ago
parent
commit
c2146c6bee
  1. 6
      packages/word/index.html
  2. 1
      packages/word/src/assets/images/loader.svg
  3. 2
      packages/word/src/editor/core/command/CommandAdapt.ts
  4. 5
      packages/word/src/editor/dataset/constant/AIResult.ts
  5. 36
      packages/word/src/main.ts
  6. 41
      packages/word/src/plugins/floatingToolbar/index.ts
  7. 20
      packages/word/src/style.css

6
packages/word/index.html

@ -374,10 +374,12 @@
<button id="createArticle">生成文章</button>
</div>
<div id="outlineView" class="ai-content-box">
<textarea name="" id="outlineText">大纲</textarea>
<textarea name="" id="outlineText"></textarea>
<span id="outlineLoader"> </span>
</div>
<div id="articleView" class="ai-content-box hide">
<textarea name="articleText" id="articleText"> 请先点击生成文章按钮</textarea>
<textarea name="articleText" id="articleText"></textarea>
<span id="articleLoader"> </span>
</div>
</div>
</div>

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

@ -0,0 +1 @@
<svg t="1732353171919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5352" width="48" height="48"><path d="M546.462897 266.292966c-73.410207 0-133.15531-59.727448-133.155311-133.137656C413.307586 59.762759 473.05269 0 546.462897 0c73.410207 0 133.12 59.727448 133.12 133.15531 0 73.410207-59.709793 133.137655-133.12 133.137656z m-283.453794 105.736827c-67.054345 0-121.626483-54.554483-121.626482-121.644138s54.572138-121.644138 121.626482-121.644138a121.767724 121.767724 0 0 1 121.608828 121.644138c0 67.054345-54.554483 121.644138-121.608828 121.644138zM142.547862 647.185655A107.343448 107.343448 0 0 1 35.310345 539.895172a107.343448 107.343448 0 0 1 107.237517-107.237517 107.343448 107.343448 0 0 1 107.219862 107.237517 107.343448 107.343448 0 0 1-107.219862 107.272828z m120.461241 272.595862a91.047724 91.047724 0 0 1-90.941793-90.959448 91.065379 91.065379 0 0 1 90.924138-90.941793 91.065379 91.065379 0 0 1 90.941793 90.941793c0 50.14069-40.783448 90.959448-90.924138 90.959448zM546.462897 1024a79.518897 79.518897 0 0 1-79.448276-79.448276c0-43.820138 35.645793-79.448276 79.448276-79.448276a79.518897 79.518897 0 0 1 79.43062 79.448276c0 43.820138-35.628138 79.448276-79.448276 79.448276z m287.744-134.285241a64.194207 64.194207 0 0 1-64.123587-64.123587 64.194207 64.194207 0 0 1 64.123587-64.123586 64.194207 64.194207 0 0 1 64.123586 64.123586 64.194207 64.194207 0 0 1-64.123586 64.123587z m117.848275-296.695173a52.683034 52.683034 0 0 1-52.612413-52.612414 52.683034 52.683034 0 0 1 52.612413-52.630069 52.70069 52.70069 0 0 1 52.630069 52.612414 52.718345 52.718345 0 0 1-52.630069 52.630069z m-158.667034-338.696827a40.818759 40.818759 0 1 0 81.655172 0.017655 40.818759 40.818759 0 0 0-81.655172 0z" fill="#76c9f5" p-id="5353"></path></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -1209,7 +1209,7 @@ export class CommandAdapt {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
if(aiArticle && aiArticle == true) {
if(aiArticle == true) {
if (!payload) return
} else {
// console.log('zero:', new RegExp(`${ZERO}`, 'g').test(payload))

5
packages/word/src/editor/dataset/constant/AIResult.ts

@ -1,5 +0,0 @@
export const AiResult = {
aiContent: '',
aiArticle: '',
aiOutline: ''
}

36
packages/word/src/main.ts

@ -27,10 +27,9 @@ import { Signature } from './components/signature/Signature'
import { debounce, nextTick, scrollIntoView } from './utils'
import barcode1DPlugin from "./plugins/barcode1d"
import barcode2dPlugin from "./plugins/barcode2d"
import floatingToolbarPlugin from "./plugins/floatingToolbar"
import { floatingToolbarPlugin, changeAiTextarea} from "./plugins/floatingToolbar"
import excelPlugin from "./plugins/excel"
import docxPlugin from './plugins/docx'
import { AiResult } from './editor/dataset/constant/AIResult'
window.onload = function () {
const isApple =
typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)
@ -1148,6 +1147,8 @@ window.onload = function () {
const createArticleBtn = document.querySelector<HTMLButtonElement>('#createArticle')!
const outlineTextarea = document.querySelector<HTMLTextAreaElement>('#outlineText')!
const articleTextarea = document.querySelector<HTMLTextAreaElement>('#articleText')!
const articleLoader = document.querySelector<HTMLSpanElement>('#articleLoader')!
const outlineLoader = document.querySelector<HTMLSpanElement>('#outlineLoader')!
aiEditDom.title = `ai写作`
aiEditDom.onclick = function () {
// instance.command.executeAiEdit('')
@ -1191,15 +1192,16 @@ window.onload = function () {
},
'*'
)
outlineTextarea.value = AiResult.aiOutline
console.log('结果:', AiResult);
// outlineTextarea.value = AiResult.aiOutline
aiOutlineDom?.classList.add('hide')
aiContentDom?.classList.remove('hide')
aiMenuBox.classList.add('add-height')
outlineLoader.classList.remove('hide')
}
// 视图切换
function switchView(view: string) {
outlineTextarea.value == '' ? outlineLoader.classList.remove('hide') : ''
articleTextarea.value == '' ? articleLoader.classList.remove('hide') : ''
switch (view) {
case 'outline':
watchOutline.classList.add('active-ai')
@ -1208,6 +1210,8 @@ window.onload = function () {
aiInertBtn?.classList.add('hide')
outlineViewDom.classList.remove('hide')
articleViewDom.classList.add('hide')
// outlineLoader.classList.remove('hide')
// articleLoader.classList.add('hide')
break
case 'article':
watchArticle.classList.add('active-ai')
@ -1216,6 +1220,8 @@ window.onload = function () {
aiInertBtn?.classList.remove('hide')
outlineViewDom.classList.add('hide')
articleViewDom.classList.remove('hide')
// articleLoader.classList.remove('hide')
// outlineLoader.classList.add('hide')
break
default:
break
@ -1239,7 +1245,17 @@ window.onload = function () {
},
'*'
)
articleTextarea.value = AiResult.aiArticle
// articleTextarea.value = AiResult.aiArticle
}
// 替换textarea内容
function changeAiArticleTextarea (data: string , type: string) {
if (type == 'outline') {
outlineTextarea.value = data
outlineLoader.classList.add('hide')
} else {
articleTextarea.value = data
articleLoader.classList.add('hide')
}
}
//插入文章
aiInertBtn.onclick = function () {
@ -2161,13 +2177,13 @@ window.onload = function () {
});
} else if (eventData.type == 'aiReciver') {
console.log('接收到来自伏组件数据:', eventData.data);
console.log('接收到来自伏组件数据:', eventData);
if (eventData.action == 'creation_leader') {
AiResult.aiOutline = eventData.data
changeAiArticleTextarea(eventData.data, 'outline')
} else if (eventData.action == 'creation_builder') {
AiResult.aiArticle = eventData.data
changeAiArticleTextarea(eventData.data, 'article')
} else {
AiResult.aiContent = eventData.data
changeAiTextarea(eventData.data)
}
}

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

@ -6,7 +6,6 @@ import { ToolbarType } from './enum'
import { IToolbarRegister } from './interface'
import { PLUGIN_PREFIX } from './constant'
import { Svgs } from './icons/Svgs'
import { AiResult } from '../../editor/dataset/constant/AIResult'
function createPickerToolbar(
container: HTMLDivElement,
toolbarType: ToolbarType,
@ -103,9 +102,9 @@ function createAIToolbar(
<i id="${toolbarType}-btn"></i>
<div class="aie-container ce-picker-container ai-hide">
<div class="aie-ai-panel-body">
<div class="aie-ai-panel-body-content ai-hide"><div class="loader">
<div class="aie-ai-panel-body-content ai-hide"><div class="loader" id="aiLoader">
${Svgs.refresh}
</div><textarea readonly></textarea></div>
</div><textarea readonly id="aiTextarea"></textarea></div>
<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}
@ -140,9 +139,9 @@ function createAIToolbar(
`
container.append(toolbarItem)
bindAiPanelEvent(container, editor)
}
//AI弹窗绑定点击事件
}//AI弹窗绑定点击事件
function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const textarea = container.querySelector<HTMLTextAreaElement>('#aiTextarea')!
// 菜单栏AI选项
container.querySelector<HTMLDivElement>(`#ai-edit-btn`)?.addEventListener('click', () => {
// const target = e.currentTarget as HTMLDivElement
@ -157,35 +156,33 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const aiOptions = Array.from(container.querySelectorAll('#ai-operate'))
aiOptions.forEach((item) => {
item.addEventListener('click', () => {
const aiLoader = container.querySelector('#aiLoader')
aiLoader?.classList.remove('ai-hide')
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 chooseType = item.getAttribute('data-type')
let aiContent = editor.command.executeAiEdit(chooseType)
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!
if (aiContent) {
textarea.value = AiResult.aiContent
}
editor.command.executeAiEdit(chooseType)
})
})
// 替换
container.querySelector('#replace')!.addEventListener('click', () => {
editor.command.executeReplace(AiResult.aiContent)
console.log('替换');
// console.log('替换', textarea)
editor.command.executeReplace(textarea.value)
})
// 插入
container.querySelector('#insert')!.addEventListener('click', () => {
const aiContent = editor.command.executeAiEdit('')
editor.command.executeReplace(aiContent + AiResult.aiContent)
editor.command.executeReplace(aiContent + textarea.value)
editor.command.executeSearch('')
console.log('插入:')
// console.log('插入:')
})
// 舍弃
container.querySelector('#hide')!.addEventListener('click', () => {
editor.command.executeSearch('')
initAiDialog(container, editor)
console.log('舍弃')
// console.log('舍弃')
})
// 搜索
container.querySelector('#go')!.addEventListener('click', () => {
@ -201,11 +198,19 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const aiContent = editor.command.executeAiEdit(inputOption.value)
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!
if (aiContent) {
textarea.textContent = aiContent
textarea.value = aiContent
}
}
})
}
export function changeAiTextarea(data: string) {
const aiLoader = document.querySelector('#aiLoader')
const textarea = document.querySelector<HTMLTextAreaElement>('#aiTextarea')!
if (data) {
textarea.value = data
}
aiLoader?.classList.add('ai-hide')
}
//ai弹窗初始化
function initAiDialog(container: HTMLDivElement, editor: Editor) {
editor.command.executeSearch('')
@ -217,7 +222,7 @@ function initAiDialog(container: HTMLDivElement, editor: Editor) {
const inputOption = container.querySelector<HTMLInputElement>('#inputOption')!
inputOption.value = ''
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!
textarea.textContent = ""
textarea.value = ""
}
// 工具栏列表
const toolbarRegisterList: IToolbarRegister[] = [
@ -336,7 +341,7 @@ function toggleToolbarItemActive(toolbarItem: HTMLDivElement, active: boolean) {
: toolbarItem.classList.remove('active')
}
export default function floatingToolbarPlugin(editor: Editor) {
export function floatingToolbarPlugin(editor: Editor) {
// 创建工具栏
const toolbarContainer = createToolbar(editor)
const editorContainer = editor.command.getContainer()

20
packages/word/src/style.css

@ -1178,6 +1178,7 @@ ul {
}
.menu-item .ai-content-box {
display: inline-block;
position: relative;
width: 70%;
height: 100%;
/* padding: 10px 15px; */
@ -1198,4 +1199,23 @@ ul {
}
.ai-content-box div {
margin: 5px 0;
}
.menu-item #articleLoader,
.menu-item #outlineLoader {
position: absolute;
top: 40%;
left: 40%;
/* transform: translate(-50%, -50%); */
width: 48px;
height: 48px;
background-image: url('./assets/images/loader.svg');
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Loading…
Cancel
Save