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> <button id="createArticle">生成文章</button>
</div> </div>
<div id="outlineView" class="ai-content-box"> <div id="outlineView" class="ai-content-box">
<textarea name="" id="outlineText">大纲</textarea> <textarea name="" id="outlineText"></textarea>
<span id="outlineLoader"> </span>
</div> </div>
<div id="articleView" class="ai-content-box hide"> <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> </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() const isReadonly = this.draw.isReadonly()
if (isReadonly) return if (isReadonly) return
if(aiArticle && aiArticle == true) { if(aiArticle == true) {
if (!payload) return if (!payload) return
} else { } else {
// console.log('zero:', new RegExp(`${ZERO}`, 'g').test(payload)) // 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 { debounce, nextTick, scrollIntoView } from './utils'
import barcode1DPlugin from "./plugins/barcode1d" import barcode1DPlugin from "./plugins/barcode1d"
import barcode2dPlugin from "./plugins/barcode2d" import barcode2dPlugin from "./plugins/barcode2d"
import floatingToolbarPlugin from "./plugins/floatingToolbar" import { floatingToolbarPlugin, changeAiTextarea} from "./plugins/floatingToolbar"
import excelPlugin from "./plugins/excel" import excelPlugin from "./plugins/excel"
import docxPlugin from './plugins/docx' import docxPlugin from './plugins/docx'
import { AiResult } from './editor/dataset/constant/AIResult'
window.onload = function () { window.onload = function () {
const isApple = const isApple =
typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent) typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)
@ -1148,6 +1147,8 @@ window.onload = function () {
const createArticleBtn = document.querySelector<HTMLButtonElement>('#createArticle')! const createArticleBtn = document.querySelector<HTMLButtonElement>('#createArticle')!
const outlineTextarea = document.querySelector<HTMLTextAreaElement>('#outlineText')! const outlineTextarea = document.querySelector<HTMLTextAreaElement>('#outlineText')!
const articleTextarea = document.querySelector<HTMLTextAreaElement>('#articleText')! const articleTextarea = document.querySelector<HTMLTextAreaElement>('#articleText')!
const articleLoader = document.querySelector<HTMLSpanElement>('#articleLoader')!
const outlineLoader = document.querySelector<HTMLSpanElement>('#outlineLoader')!
aiEditDom.title = `ai写作` aiEditDom.title = `ai写作`
aiEditDom.onclick = function () { aiEditDom.onclick = function () {
// instance.command.executeAiEdit('') // instance.command.executeAiEdit('')
@ -1191,15 +1192,16 @@ window.onload = function () {
}, },
'*' '*'
) )
outlineTextarea.value = AiResult.aiOutline // outlineTextarea.value = AiResult.aiOutline
console.log('结果:', AiResult);
aiOutlineDom?.classList.add('hide') aiOutlineDom?.classList.add('hide')
aiContentDom?.classList.remove('hide') aiContentDom?.classList.remove('hide')
aiMenuBox.classList.add('add-height') aiMenuBox.classList.add('add-height')
outlineLoader.classList.remove('hide')
} }
// 视图切换 // 视图切换
function switchView(view: string) { function switchView(view: string) {
outlineTextarea.value == '' ? outlineLoader.classList.remove('hide') : ''
articleTextarea.value == '' ? articleLoader.classList.remove('hide') : ''
switch (view) { switch (view) {
case 'outline': case 'outline':
watchOutline.classList.add('active-ai') watchOutline.classList.add('active-ai')
@ -1208,6 +1210,8 @@ window.onload = function () {
aiInertBtn?.classList.add('hide') aiInertBtn?.classList.add('hide')
outlineViewDom.classList.remove('hide') outlineViewDom.classList.remove('hide')
articleViewDom.classList.add('hide') articleViewDom.classList.add('hide')
// outlineLoader.classList.remove('hide')
// articleLoader.classList.add('hide')
break break
case 'article': case 'article':
watchArticle.classList.add('active-ai') watchArticle.classList.add('active-ai')
@ -1216,6 +1220,8 @@ window.onload = function () {
aiInertBtn?.classList.remove('hide') aiInertBtn?.classList.remove('hide')
outlineViewDom.classList.add('hide') outlineViewDom.classList.add('hide')
articleViewDom.classList.remove('hide') articleViewDom.classList.remove('hide')
// articleLoader.classList.remove('hide')
// outlineLoader.classList.add('hide')
break break
default: default:
break 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 () { aiInertBtn.onclick = function () {
@ -2161,13 +2177,13 @@ window.onload = function () {
}); });
} else if (eventData.type == 'aiReciver') { } else if (eventData.type == 'aiReciver') {
console.log('接收到来自伏组件数据:', eventData.data); console.log('接收到来自伏组件数据:', eventData);
if (eventData.action == 'creation_leader') { if (eventData.action == 'creation_leader') {
AiResult.aiOutline = eventData.data changeAiArticleTextarea(eventData.data, 'outline')
} else if (eventData.action == 'creation_builder') { } else if (eventData.action == 'creation_builder') {
AiResult.aiArticle = eventData.data changeAiArticleTextarea(eventData.data, 'article')
} else { } 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 { IToolbarRegister } from './interface'
import { PLUGIN_PREFIX } from './constant' import { PLUGIN_PREFIX } from './constant'
import { Svgs } from './icons/Svgs' import { Svgs } from './icons/Svgs'
import { AiResult } from '../../editor/dataset/constant/AIResult'
function createPickerToolbar( function createPickerToolbar(
container: HTMLDivElement, container: HTMLDivElement,
toolbarType: ToolbarType, toolbarType: ToolbarType,
@ -103,9 +102,9 @@ function createAIToolbar(
<i id="${toolbarType}-btn"></i> <i id="${toolbarType}-btn"></i>
<div class="aie-container ce-picker-container ai-hide"> <div class="aie-container ce-picker-container ai-hide">
<div class="aie-ai-panel-body"> <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} ${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" /> <div class="aie-ai-panel-body-input"><input id="inputOption" placeholder="告诉 AI 下一步应该如何?比如:帮我翻译成英语" type="text" />
<button type="button" id="go" style="width: 30px;height: 30px"> <button type="button" id="go" style="width: 30px;height: 30px">
${Svgs.aiPanelStart} ${Svgs.aiPanelStart}
@ -140,9 +139,9 @@ function createAIToolbar(
` `
container.append(toolbarItem) container.append(toolbarItem)
bindAiPanelEvent(container, editor) bindAiPanelEvent(container, editor)
} }//AI弹窗绑定点击事件
//AI弹窗绑定点击事件
function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) { function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const textarea = container.querySelector<HTMLTextAreaElement>('#aiTextarea')!
// 菜单栏AI选项 // 菜单栏AI选项
container.querySelector<HTMLDivElement>(`#ai-edit-btn`)?.addEventListener('click', () => { container.querySelector<HTMLDivElement>(`#ai-edit-btn`)?.addEventListener('click', () => {
// const target = e.currentTarget as HTMLDivElement // const target = e.currentTarget as HTMLDivElement
@ -157,35 +156,33 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const aiOptions = Array.from(container.querySelectorAll('#ai-operate')) const aiOptions = Array.from(container.querySelectorAll('#ai-operate'))
aiOptions.forEach((item) => { aiOptions.forEach((item) => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
const aiLoader = container.querySelector('#aiLoader')
aiLoader?.classList.remove('ai-hide')
container.querySelector('#footer-one')?.classList.remove('ai-hide') container.querySelector('#footer-one')?.classList.remove('ai-hide')
container.querySelector('#footer-two')?.classList.add('ai-hide') container.querySelector('#footer-two')?.classList.add('ai-hide')
container.querySelector('.aie-ai-panel-body-content')?.classList.remove('ai-hide') container.querySelector('.aie-ai-panel-body-content')?.classList.remove('ai-hide')
const chooseType = item.getAttribute('data-type') const chooseType = item.getAttribute('data-type')
let aiContent = editor.command.executeAiEdit(chooseType) editor.command.executeAiEdit(chooseType)
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!
if (aiContent) {
textarea.value = AiResult.aiContent
}
}) })
}) })
// 替换 // 替换
container.querySelector('#replace')!.addEventListener('click', () => { container.querySelector('#replace')!.addEventListener('click', () => {
editor.command.executeReplace(AiResult.aiContent) // console.log('替换', textarea)
console.log('替换'); editor.command.executeReplace(textarea.value)
}) })
// 插入 // 插入
container.querySelector('#insert')!.addEventListener('click', () => { container.querySelector('#insert')!.addEventListener('click', () => {
const aiContent = editor.command.executeAiEdit('') const aiContent = editor.command.executeAiEdit('')
editor.command.executeReplace(aiContent + AiResult.aiContent) editor.command.executeReplace(aiContent + textarea.value)
editor.command.executeSearch('') editor.command.executeSearch('')
console.log('插入:') // console.log('插入:')
}) })
// 舍弃 // 舍弃
container.querySelector('#hide')!.addEventListener('click', () => { container.querySelector('#hide')!.addEventListener('click', () => {
editor.command.executeSearch('') editor.command.executeSearch('')
initAiDialog(container, editor) initAiDialog(container, editor)
console.log('舍弃') // console.log('舍弃')
}) })
// 搜索 // 搜索
container.querySelector('#go')!.addEventListener('click', () => { container.querySelector('#go')!.addEventListener('click', () => {
@ -201,11 +198,19 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const aiContent = editor.command.executeAiEdit(inputOption.value) const aiContent = editor.command.executeAiEdit(inputOption.value)
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')! const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!
if (aiContent) { 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弹窗初始化 //ai弹窗初始化
function initAiDialog(container: HTMLDivElement, editor: Editor) { function initAiDialog(container: HTMLDivElement, editor: Editor) {
editor.command.executeSearch('') editor.command.executeSearch('')
@ -217,7 +222,7 @@ function initAiDialog(container: HTMLDivElement, editor: Editor) {
const inputOption = container.querySelector<HTMLInputElement>('#inputOption')! const inputOption = container.querySelector<HTMLInputElement>('#inputOption')!
inputOption.value = '' inputOption.value = ''
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')! const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!
textarea.textContent = "" textarea.value = ""
} }
// 工具栏列表 // 工具栏列表
const toolbarRegisterList: IToolbarRegister[] = [ const toolbarRegisterList: IToolbarRegister[] = [
@ -336,7 +341,7 @@ function toggleToolbarItemActive(toolbarItem: HTMLDivElement, active: boolean) {
: toolbarItem.classList.remove('active') : toolbarItem.classList.remove('active')
} }
export default function floatingToolbarPlugin(editor: Editor) { export function floatingToolbarPlugin(editor: Editor) {
// 创建工具栏 // 创建工具栏
const toolbarContainer = createToolbar(editor) const toolbarContainer = createToolbar(editor)
const editorContainer = editor.command.getContainer() const editorContainer = editor.command.getContainer()

20
packages/word/src/style.css

@ -1178,6 +1178,7 @@ ul {
} }
.menu-item .ai-content-box { .menu-item .ai-content-box {
display: inline-block; display: inline-block;
position: relative;
width: 70%; width: 70%;
height: 100%; height: 100%;
/* padding: 10px 15px; */ /* padding: 10px 15px; */
@ -1199,3 +1200,22 @@ ul {
.ai-content-box div { .ai-content-box div {
margin: 5px 0; 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