Browse Source

fix:开源版文件密码设置

master
prr 7 months ago
parent
commit
1cc928fbfd
  1. 162
      frontend/src/components/setting/SetFilePwd.vue
  2. 10
      frontend/src/components/setting/SetSystem.vue
  3. 1
      frontend/src/i18n/lang/zh.json
  4. 86
      packages/word/index.html
  5. 2
      packages/word/src/assets/images/ai-edit.svg
  6. 26
      packages/word/src/editor/core/command/CommandAdapt.ts
  7. 2
      packages/word/src/main.ts
  8. 79
      packages/word/src/plugins/floatingToolbar/index.ts
  9. 9
      packages/word/src/plugins/floatingToolbar/style/index.scss
  10. 41
      packages/word/src/style.css

162
frontend/src/components/setting/SetFilePwd.vue

@ -1,74 +1,114 @@
<template> <template>
<div class="file-pwd-box"> <el-button type="primary" :icon="Plus" circle @click="addPwd"/>
<!-- <div v-if="setPwd"> <div class="file-pwd-list-box">
<div class="setting-item"> <div class="file-pwd-list">
<label>文件密码</label> <div class="pwd-box">
<el-input <p>密码提示</p>
v-model="filePwd" <el-button type="danger" :icon="Delete" circle @click="addPwd"/>
placeholder="请设置6-10位的密码" <el-tag type="primary">default</el-tag>
type="password" </div>
show-password </div>
/> </div>
</div> <el-dialog v-model="dialogShow" title="添加密码" width="350px">
<div class="setting-item"> <span>
<label></label> <el-form>
<el-button <el-form-item label="密码提示">
@click="toSetFilePwd" <el-input v-model="formData.pwdName"/>
type="primary" </el-form-item>
>{{ t("setFilePwd") }}</el-button <el-form-item label="密码">
> <el-input v-model="formData.pwd" show-password/>
<el-button </el-form-item>
@click="clearPwd" <el-form-item label="是否为默认密码">
type="primary" <el-switch v-model="formData.isDefault"/>
>取消文件加密</el-button </el-form-item>
> <el-form-item>
</div> <el-button type="primary" @click="dialogShow = false">
</div> --> 确认
<div </el-button>
class="setting-item" </el-form-item>
> </el-form>
<label></label> </span>
<el-button </el-dialog>
@click="setFilePwd"
type="primary"
>{{ isSetPwd ? t("cancleFilePwd") : t("setFilePwd") }}</el-button
>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { t } from "@/system"; import { Plus, Delete } from '@element-plus/icons-vue'
import { import { reactive, ref } from "vue";
fetchGet, const dialogShow = ref(false)
getApiUrl, const formData = reactive({
getSystemConfig, pwdName: '',
setSystemKey, pwd: '',
} from "@/system/config"; isDefault: ''
import { onMounted, ref } from "vue"; })
const config = getSystemConfig(); function addPwd() {
const isSetPwd = ref(false); dialogShow.value = true
async function setFilePwd() { }
isSetPwd.value = !isSetPwd.value // import { t } from "@/system";
const params = { // import {
isPwd: isSetPwd.value ? 1 : 0 // fetchGet,
} // getApiUrl,
await fetchGet(`${getApiUrl()}/file/changeispwd?ispwd=${params.isPwd}`); // getSystemConfig,
setSystemKey("file", params); // setSystemKey,
// } from "@/system/config";
// const config = getSystemConfig();
// const isSetPwd = ref(false);
// async function setFilePwd() {
// isSetPwd.value = !isSetPwd.value
// const params = {
// isPwd: isSetPwd.value ? 1 : 0
// }
// await fetchGet(`${getApiUrl()}/file/changeispwd?ispwd=${params.isPwd}`);
// setSystemKey("file", params);
} // }
onMounted(() => { // onMounted(() => {
isSetPwd.value = config.file.isPwd ? true : false; // isSetPwd.value = config.file.isPwd ? true : false;
}); // });
</script> </script>
<style scoped> <style scoped lang="scss">
@import "./setStyle.css"; @import "./setStyle.css";
.file-pwd-box { .file-pwd-list-box {
width: 100%;
height: 100%;
.file-pwd-list {
width: 100%;
height: 90%;
padding: 10px;
box-sizing: border-box;
background-color: rgb(248, 247, 247);
overflow-y: scroll;
.pwd-box {
width: 95%;
height: 60px;
padding: 10px 30px;
margin: 10px auto;
border: 1px solid black;
background-color: white;
box-sizing: border-box;
p {
display: inline-block;
height: 38px;
line-height: 38px;
margin: 0;
}
.el-tag {
float: right;
margin: 5px 20px;
}
.el-button {
float: right;
}
}
}
}
/* .file-pwd-box {
padding-top: 20px; padding-top: 20px;
} }
.setting-item { .setting-item {
display: flex; display: flex;
align-items: center; align-items: center;
} } */
</style> </style>

10
frontend/src/components/setting/SetSystem.vue

@ -47,7 +47,6 @@
{{ t("confirm") }} {{ t("confirm") }}
</el-button> </el-button>
</div> </div>
<SetFilePwd v-if="config.userType === 'person'"></SetFilePwd>
</div> </div>
<div v-if="2 === activeIndex"> <div v-if="2 === activeIndex">
@ -95,6 +94,9 @@
</el-button> </el-button>
</div> </div>
</div> </div>
<div v-if="3 === activeIndex" class="setting-area">
<SetFilePwd v-if="config.userType === 'person'"></SetFilePwd>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -131,7 +133,7 @@ const storeList = [
}, },
]; ];
const items = ["用户角色","个人存储", "备份还原"]; const items = ["用户角色","个人存储", "备份还原","文件密码箱"];
const urlRegex = /^(https?:\/\/)/; const urlRegex = /^(https?:\/\/)/;
const userTypes = [ const userTypes = [
{ {
@ -413,4 +415,8 @@ async function importBackup(path = "") {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.setting-area {
width: 100%;
height: 90%;
}
</style> </style>

1
frontend/src/i18n/lang/zh.json

@ -11,7 +11,6 @@
"myshare": "我的分享", "myshare": "我的分享",
"othershare": "接收的分享", "othershare": "接收的分享",
"setFilePwd": "设置文件密码", "setFilePwd": "设置文件密码",
"cancleFilePwd": "取消文件密码",
"favorite": "我的收藏", "favorite": "我的收藏",
"desktop": "桌面", "desktop": "桌面",
"personalization": "个性化", "personalization": "个性化",

86
packages/word/index.html

@ -337,54 +337,54 @@
<div class="menu-item__ai-edit" data-menu="save"> <div class="menu-item__ai-edit" data-menu="save">
<i></i> <i></i>
</div> </div>
<div class="menu-item__ai-edit-box hide"> <div class="menu-item__save" data-menu="save">
<span>×</span> <i></i>
<div class="ai-edit-outline-box"> </div>
<div class="ai-menu"> </div>
<p class="outline-svg active-ai"><i></i>生成大纲</p> <div class="menu-item__ai-edit-box hide">
</div> <span>×</span>
<div class="ai-content-box"> <div class="ai-edit-outline-box">
<div> <div class="ai-menu">
<label for="">标题:</label> <p class="outline-svg active-ai"><i></i>生成大纲</p>
<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>
</select>
</div>
<button id="aiArticle">生成大纲</button>
</div>
</div> </div>
<div class="ai-edit-content-box hide"> <div class="ai-content-box">
<div class="ai-menu"> <div>
<p id="watchOutline" class="outline-svg active-ai"><i></i>查看大纲</p> <label for="">标题:</label>
<p id="watchArticle" class="article-svg"><i></i>查看文章</p> <input id="aiTitle" type="text" placeholder="请输入标题">
<button id="articleInsert">插入</button>
<button id="createArticle">生成文章</button>
</div> </div>
<div id="outlineView" class="ai-content-box"> <div>
<textarea name="" id="outlineText"></textarea> <label for="">分类:</label>
<span id="outlineLoader"> </span> <select name="articleClassification" id="aiSelect">
</div> <option value="论文">论文</option>
<div id="articleView" class="ai-content-box hide"> <option value="合同">合同</option>
<textarea name="articleText" id="articleText"></textarea> <option value="项目">项目</option>
<span id="articleLoader"> </span> <option value="投标">投标</option>
<option value="招标">招标</option>
<option value="散文">散文</option>
<option value="产品说明">产品说明</option>
<option value="销售计划">销售计划</option>
<option value="年度计划">年度计划</option>
<option value="战略规划">战略规划</option>
</select>
</div> </div>
<button id="aiArticle">生成大纲</button>
</div> </div>
</div> </div>
<div class="menu-item__save" data-menu="save"> <div class="ai-edit-content-box hide">
<i></i> <div class="ai-menu">
<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">
<textarea name="" id="outlineText"></textarea>
<span id="outlineLoader"> </span>
</div>
<div id="articleView" class="ai-content-box hide">
<textarea name="articleText" id="articleText"></textarea>
<span id="articleLoader"> </span>
</div>
</div> </div>
</div> </div>
</div> </div>

2
packages/word/src/assets/images/ai-edit.svg

@ -1 +1 @@
<svg t="1731985324837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2001" width="16" height="16"><path d="M683.7 922.7h-345c-73.5 0-133.3-59.8-133.3-133.3V459.8c0-73.5 59.8-133.3 133.3-133.3h345c73.5 0 133.3 59.8 133.3 133.3v329.6c0 73.5-59.8 133.3-133.3 133.3z m-345-506.9c-24.3 0-44.1 19.8-44.1 44.1v329.6c0 24.3 19.8 44.1 44.1 44.1h345c24.3 0 44.1-19.8 44.1-44.1V459.8c0-24.3-19.8-44.1-44.1-44.1h-345zM914.3 759.6c-24.6 0-44.6-20-44.6-44.6V534.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6V715c0 24.7-20 44.6-44.6 44.6zM111.7 759.6c-24.6 0-44.6-20-44.6-44.6V534.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6V715c0 24.7-19.9 44.6-44.6 44.6z" fill="#515151" p-id="2002"></path><path d="M511.2 415.8c-24.6 0-44.6-20-44.6-44.6V239.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6v131.9c0 24.6-20 44.6-44.6 44.6z" fill="#515151" p-id="2003"></path><path d="M511.2 276.6c-49.2 0-89.2-40-89.2-89.2s40-89.2 89.2-89.2 89.2 40 89.2 89.2-40 89.2-89.2 89.2z m0-89.2h0.2-0.2z m0 0h0.2-0.2z m0 0h0.2-0.2z m0 0h0.2-0.2z m0 0z m0 0h0.2-0.2z m0 0h0.2-0.2z m0-0.1h0.2-0.2zM399 675.5c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9c0 28.1-22.8 50.9-50.9 50.9zM622.9 675.5c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9 28.1 0 50.9 22.8 50.9 50.9 0 28.1-22.8 50.9-50.9 50.9z" fill="#515151" p-id="2004"></path></svg> <svg t="1731985324837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2001" width="18" height="18"><path d="M683.7 922.7h-345c-73.5 0-133.3-59.8-133.3-133.3V459.8c0-73.5 59.8-133.3 133.3-133.3h345c73.5 0 133.3 59.8 133.3 133.3v329.6c0 73.5-59.8 133.3-133.3 133.3z m-345-506.9c-24.3 0-44.1 19.8-44.1 44.1v329.6c0 24.3 19.8 44.1 44.1 44.1h345c24.3 0 44.1-19.8 44.1-44.1V459.8c0-24.3-19.8-44.1-44.1-44.1h-345zM914.3 759.6c-24.6 0-44.6-20-44.6-44.6V534.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6V715c0 24.7-20 44.6-44.6 44.6zM111.7 759.6c-24.6 0-44.6-20-44.6-44.6V534.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6V715c0 24.7-19.9 44.6-44.6 44.6z" fill="#515151" p-id="2002"></path><path d="M511.2 415.8c-24.6 0-44.6-20-44.6-44.6V239.3c0-24.6 20-44.6 44.6-44.6s44.6 20 44.6 44.6v131.9c0 24.6-20 44.6-44.6 44.6z" fill="#515151" p-id="2003"></path><path d="M511.2 276.6c-49.2 0-89.2-40-89.2-89.2s40-89.2 89.2-89.2 89.2 40 89.2 89.2-40 89.2-89.2 89.2z m0-89.2h0.2-0.2z m0 0h0.2-0.2z m0 0h0.2-0.2z m0 0h0.2-0.2z m0 0z m0 0h0.2-0.2z m0 0h0.2-0.2z m0-0.1h0.2-0.2zM399 675.5c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9s50.9 22.8 50.9 50.9c0 28.1-22.8 50.9-50.9 50.9zM622.9 675.5c-28.1 0-50.9-22.8-50.9-50.9 0-28.1 22.8-50.9 50.9-50.9 28.1 0 50.9 22.8 50.9 50.9 0 28.1-22.8 50.9-50.9 50.9z" fill="#515151" p-id="2004"></path></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -121,7 +121,6 @@ export class CommandAdapt {
private i18n: I18n private i18n: I18n
private zone: Zone private zone: Zone
private tableOperate: TableOperate private tableOperate: TableOperate
private aiContent: string
constructor(draw: Draw) { constructor(draw: Draw) {
this.draw = draw this.draw = draw
@ -136,7 +135,6 @@ export class CommandAdapt {
this.i18n = draw.getI18n() this.i18n = draw.getI18n()
this.zone = draw.getZone() this.zone = draw.getZone()
this.tableOperate = draw.getTableOperate() this.tableOperate = draw.getTableOperate()
this.aiContent = ''
} }
public mode(payload: EditorMode) { public mode(payload: EditorMode) {
@ -651,11 +649,11 @@ export class CommandAdapt {
content = '\t' content = '\t'
} }
this.search(content) this.search(content)
this.replace(content + payload, true) this.replace(content + payload)
return content return content
} }
public aiEdit(operate: string | null, question?: string) { public aiEdit(operate: string | null, question?: string) {
console.log('ai edit:', operate) // console.log('ai edit:', operate)
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled() const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
if (isDisabled) return if (isDisabled) return
const selection = this.range.getSelectionElementList() const selection = this.range.getSelectionElementList()
@ -671,7 +669,7 @@ export class CommandAdapt {
type: 'aiCreater', type: 'aiCreater',
data: { data: {
title: question, title: question,
category: content content
}, },
action: operate action: operate
}, },
@ -1211,19 +1209,15 @@ export class CommandAdapt {
} }
return false; return false;
} }
public replace(payload: string, aiArticle?: boolean) { public replace(payload: string) {
// console.log('替换', payload)
const isReadonly = this.draw.isReadonly() const isReadonly = this.draw.isReadonly()
if (isReadonly) return if (isReadonly) return
if (aiArticle == true) { if (!payload) return
if (!payload) return // if (aiArticle == true) {
} else { // if (!payload) return
// console.log('zero:', new RegExp(`${ZERO}`, 'g').test(payload)) // } else {
// if (!payload) return
//if (!payload || new RegExp(`${ZERO}`, 'g').test(payload)) return // }
if(this.checkPayload(payload))return
}
// if (!payload || (isZero && aiArticle)) return // if (!payload || (isZero && aiArticle)) return
const matchList = this.draw.getSearch().getSearchMatchList() const matchList = this.draw.getSearch().getSearchMatchList()
if (!matchList.length) return if (!matchList.length) return

2
packages/word/src/main.ts

@ -2183,7 +2183,7 @@ window.onload = function () {
} else if (eventData.action == 'creation_builder') { } else if (eventData.action == 'creation_builder') {
changeAiArticleTextarea(eventData.data, 'article') changeAiArticleTextarea(eventData.data, 'article')
} else { } else {
changeAiTextarea(eventData.data) changeAiTextarea(eventData)
} }
} }

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

@ -102,12 +102,14 @@ 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" id="aiLoader"> <div class="aie-ai-panel-body-content ai-hide">
${Svgs.refresh} <div class="loader" id="aiLoader">${Svgs.refresh}</div>
</div><textarea readonly id="aiTextarea"></textarea></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 id="goAskAi" >
${Svgs.aiPanelStart} <p id="aiStart">${Svgs.aiPanelStart}</p>
<p id="aiStop" class="ai-hide">${Svgs.aiPanelStop}</p>
</button></div> </button></div>
<div class="aie-ai-panel-body-tips"> <div class="aie-ai-panel-body-tips">
${Svgs.tips} ${Svgs.tips}
@ -139,33 +141,50 @@ function createAIToolbar(
` `
container.append(toolbarItem) container.append(toolbarItem)
bindAiPanelEvent(container, editor) bindAiPanelEvent(container, editor)
}//AI弹窗绑定点击事件 }
//ai回答问题,切换视图
function viewChange(container: HTMLDivElement) {
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')
container.querySelector('#aiStart')!.classList.add('ai-hide')
container.querySelector('#aiStop')!.classList.remove('ai-hide')
container.querySelector<HTMLButtonElement>('#goAskAi')!.disabled = true
}
//AI弹窗绑定点击事件
function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) { function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
const textarea = container.querySelector<HTMLTextAreaElement>('#aiTextarea')! 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 = container.querySelector<HTMLDivElement>(`.${PLUGIN_PREFIX}-ai-edit`)! const target = container.querySelector<HTMLDivElement>(`.${PLUGIN_PREFIX}-ai-edit`)!
const isActive = target.classList.contains('ai-active') const isActive = target.classList.contains('ai-active')
isActive ? target.classList.remove('ai-active') : target.classList.add('ai-active') isActive ? target.classList.remove('ai-active') : target.classList.add('ai-active')
const aiDialog = container.querySelector<HTMLDivElement>('.aie-container') const aiDialog = container.querySelector<HTMLDivElement>('.aie-container')
!isActive ? aiDialog?.classList.remove('ai-hide') : aiDialog?.classList.add('ai-hide') !isActive ? aiDialog?.classList.remove('ai-hide') : aiDialog?.classList.add('ai-hide')
}) })
//选中操作,进行处理 //选中操作,进行处理
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') viewChange(container)
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') const chooseType = item.getAttribute('data-type')
editor.command.executeAiEdit(chooseType) editor.command.executeAiEdit(chooseType)
}) })
}) })
// 搜索
container.querySelector('#goAskAi')!.addEventListener('click', () => {
// console.log('搜索');
const inputOption = container.querySelector<HTMLInputElement>('#inputOption')!
if (inputOption.value) {
viewChange(container)
editor.command.executeAiEdit('creation_ask', inputOption.value)
// container.querySelector<HTMLButtonElement>('#goAskAi')!.disabled = true
}
})
// 替换 // 替换
container.querySelector('#replace')!.addEventListener('click', () => { container.querySelector('#replace')!.addEventListener('click', () => {
// console.log('替换', textarea) // console.log('替换', textarea)
@ -184,36 +203,24 @@ function bindAiPanelEvent(container: HTMLDivElement, editor: Editor) {
initAiDialog(container, editor) initAiDialog(container, editor)
// console.log('舍弃') // console.log('舍弃')
}) })
// 搜索
container.querySelector('#go')!.addEventListener('click', () => {
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.value = aiContent
}
}
})
} }
export function changeAiTextarea(data: string) { export function changeAiTextarea(eventData: {[key: string]: any}) {
const aiLoader = document.querySelector('#aiLoader') const aiLoader = document.querySelector('#aiLoader')
const textarea = document.querySelector<HTMLTextAreaElement>('#aiTextarea')! const textarea = document.querySelector<HTMLTextAreaElement>('#aiTextarea')!
if (data) { if (eventData.data) {
textarea.value = data textarea.value = eventData.data
} }
aiLoader?.classList.add('ai-hide') aiLoader?.classList.add('ai-hide')
document.querySelector('#aiStart')!.classList.remove('ai-hide')
document.querySelector('#aiStop')!.classList.add('ai-hide')
document.querySelector<HTMLButtonElement>('#goAskAi')!.disabled = false
} }
//ai弹窗初始化 //ai弹窗初始化
function initAiDialog(container: HTMLDivElement, editor: Editor) { function initAiDialog(container: HTMLDivElement, editor: Editor) {
editor.command.executeSearch('') editor.command.executeSearch('')
container.querySelector('#aiStart')!.classList.remove('ai-hide')
container.querySelector('#aiStop')!.classList.add('ai-hide')
container.querySelector<HTMLButtonElement>('#goAskAi')!.disabled = false
container.querySelector<HTMLDivElement>('.aie-container')?.classList.add('ai-hide') container.querySelector<HTMLDivElement>('.aie-container')?.classList.add('ai-hide')
container.querySelector<HTMLDivElement>(`.${PLUGIN_PREFIX}-ai-edit`)?.classList.remove('ai-active') container.querySelector<HTMLDivElement>(`.${PLUGIN_PREFIX}-ai-edit`)?.classList.remove('ai-active')
container.querySelector<HTMLDivElement>('#footer-one')?.classList.add('ai-hide') container.querySelector<HTMLDivElement>('#footer-one')?.classList.add('ai-hide')
@ -227,10 +234,6 @@ function initAiDialog(container: HTMLDivElement, editor: Editor) {
// 工具栏列表 // 工具栏列表
const toolbarRegisterList: IToolbarRegister[] = [ const toolbarRegisterList: IToolbarRegister[] = [
{ {
// key: ToolbarType.AI_EDIT,
// callback(editor) {
// editor.command.executeAiEdit('')
// }
render(container, editor) { render(container, editor) {
createAIToolbar(container, ToolbarType.AI_EDIT, editor) createAIToolbar(container, ToolbarType.AI_EDIT, editor)
} }

9
packages/word/src/plugins/floatingToolbar/style/index.scss

@ -176,9 +176,8 @@
textarea { textarea {
width: 100%; width: 100%;
// height: 100%; min-height: 130px;
// min-height: 100px; // height: 150px;
// height: 300px;
padding: 15px; padding: 15px;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
@ -229,8 +228,8 @@
button { button {
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 25px !important; width: 25px;
height: 25px !important; height: 25px;
padding: 0; padding: 0;
margin-left: 5px; margin-left: 5px;
background: #609eec; background: #609eec;

41
packages/word/src/style.css

@ -1071,13 +1071,21 @@ ul {
} }
.menu-item__ai-edit i{ .menu-item__ai-edit i{
width: 20px;
height: 20px;
background-image: url('./assets/images/ai-edit.svg'); background-image: url('./assets/images/ai-edit.svg');
} }
.outline-svg i{ .outline-svg i{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px; margin-right: 5px;
background-image: url('./assets/images/outline.svg'); background-image: url('./assets/images/outline.svg');
} }
.article-svg i{ .article-svg i{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px; margin-right: 5px;
background-image: url('./assets/images/article.svg'); background-image: url('./assets/images/article.svg');
} }
@ -1090,10 +1098,11 @@ ul {
.add-height { .add-height {
height: 300px !important; height: 300px !important;
} }
.menu-item .menu-item__ai-edit-box { .menu .menu-item__ai-edit-box {
/* display: block; */ /* display: block; */
position: absolute; position: absolute;
top: 25px; top: 90px;
left: 10%;
width: 500px; width: 500px;
min-height: 120px; min-height: 120px;
/* height: 80px; */ /* height: 80px; */
@ -1103,7 +1112,7 @@ ul {
box-shadow: 0px 5px 5px #e3dfdf; box-shadow: 0px 5px 5px #e3dfdf;
} }
.menu-item .menu-item__ai-edit-box span { .menu .menu-item__ai-edit-box span {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -1116,8 +1125,8 @@ ul {
line-height: 25px; line-height: 25px;
border: 0; border: 0;
} }
.menu-item .menu-item__ai-edit-box input , .menu .menu-item__ai-edit-box input ,
.menu-item .menu-item__ai-edit-box select{ .menu .menu-item__ai-edit-box select{
width: 180px; width: 180px;
height: 27px; height: 27px;
appearance: none; appearance: none;
@ -1132,7 +1141,7 @@ ul {
outline: none; outline: none;
padding: 0 10px; padding: 0 10px;
} }
.menu-item .menu-item__ai-edit-box button { .menu .menu-item__ai-edit-box button {
display: inline-block; display: inline-block;
border: 1px solid #e2e6ed; border: 1px solid #e2e6ed;
border-radius: 2px; border-radius: 2px;
@ -1145,14 +1154,14 @@ ul {
font-size: 12px; font-size: 12px;
} }
.menu-item .ai-edit-outline-box, .menu .ai-edit-outline-box,
.menu-item .ai-edit-content-box{ .menu .ai-edit-content-box{
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
} }
.menu-item .ai-menu { .menu .ai-menu {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 20%; width: 20%;
@ -1162,21 +1171,21 @@ ul {
box-sizing: border-box; box-sizing: border-box;
vertical-align: top; vertical-align: top;
} }
.menu-item .ai-menu button { .menu .ai-menu button {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
} }
.menu-item .ai-menu button:hover { .menu .ai-menu button:hover {
background: rgba(25, 55, 88, .04); background: rgba(25, 55, 88, .04);
} }
.menu-item .ai-menu p { .menu .ai-menu p {
display: inline-block; display: inline-block;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
vertical-align: middle; vertical-align: middle;
} }
.menu-item .ai-content-box { .menu .ai-content-box {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 70%; width: 70%;
@ -1186,7 +1195,7 @@ ul {
background-color: #ffffff; background-color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
} }
.menu-item .ai-content-box textarea { .menu .ai-content-box textarea {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 10px 15px; padding: 10px 15px;
@ -1200,8 +1209,8 @@ ul {
.ai-content-box div { .ai-content-box div {
margin: 5px 0; margin: 5px 0;
} }
.menu-item #articleLoader, .menu #articleLoader,
.menu-item #outlineLoader { .menu #outlineLoader {
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 40%; left: 40%;

Loading…
Cancel
Save