mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
perf: 优化会话全屏输入功能菜单固定下方
This commit is contained in:
kuaifan
parent
9001c51bea
commit
7df9c37850
@ -1,50 +0,0 @@
|
||||
|
||||
const fullToolIcons = [
|
||||
{
|
||||
label: 'bold',
|
||||
type: '',
|
||||
svg: '<svg viewBox="0 0 18 18"><path class="im-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path><path class="im-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path></svg>'
|
||||
},
|
||||
{
|
||||
label: 'strike',
|
||||
type: '',
|
||||
svg: '<svg viewBox="0 0 18 18"><line class="im-stroke im-thin" x1="15.5" x2="2.5" y1="8.5" y2="9.5"></line><path class="im-fill" d="M9.007,8C6.542,7.791,6,7.519,6,6.5,6,5.792,7.283,5,9,5c1.571,0,2.765.679,2.969,1.309a1,1,0,0,0,1.9-.617C13.356,4.106,11.354,3,9,3,6.2,3,4,4.538,4,6.5a3.2,3.2,0,0,0,.5,1.843Z"></path><path class="im-fill" d="M8.984,10C11.457,10.208,12,10.479,12,11.5c0,0.708-1.283,1.5-3,1.5-1.571,0-2.765-.679-2.969-1.309a1,1,0,1,0-1.9.617C4.644,13.894,6.646,15,9,15c2.8,0,5-1.538,5-3.5a3.2,3.2,0,0,0-.5-1.843Z"></path></svg>'
|
||||
},
|
||||
{
|
||||
label: 'italic',
|
||||
type: '',
|
||||
svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="7" x2="13" y1="4" y2="4"></line><line class="im-stroke" x1="5" x2="11" y1="14" y2="14"></line><line class="im-stroke" x1="8" x2="10" y1="14" y2="4"></line></svg>'
|
||||
},
|
||||
{
|
||||
label: 'underline',
|
||||
type: '',
|
||||
svg: '<svg viewBox="0 0 18 18"><path class="im-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path><rect class="im-fill" height="1" rx="0.5" ry="0.5" width="12" x="3" y="15"></rect></svg>'
|
||||
},
|
||||
{
|
||||
label: 'blockquote',
|
||||
type: '',
|
||||
svg: '<svg viewBox="0 0 18 18"><rect class="im-fill im-stroke" height="3" width="3" x="4" y="5"></rect><rect class="im-fill im-stroke" height="3" width="3" x="11" y="5"></rect><path class="im-even im-fill im-stroke" d="M7,8c0,4.031-3,5-3,5"></path><path class="im-even im-fill im-stroke" d="M14,8c0,4.031-3,5-3,5"></path></svg>'
|
||||
},
|
||||
{
|
||||
label: 'link',
|
||||
type: '',
|
||||
svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="7" x2="11" y1="7" y2="11"></line><path class="im-even im-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path><path class="im-even im-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path></svg>'
|
||||
},
|
||||
{
|
||||
label: 'list',
|
||||
type: 'ordered',
|
||||
svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="7" x2="15" y1="4" y2="4"></line><line class="im-stroke" x1="7" x2="15" y1="9" y2="9"></line><line class="im-stroke" x1="7" x2="15" y1="14" y2="14"></line><line class="im-stroke im-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line><path class="im-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path><path class="im-stroke im-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path><path class="im-stroke im-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path></svg>'
|
||||
},
|
||||
{
|
||||
label: 'list',
|
||||
type: 'bullet',
|
||||
svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="6" x2="15" y1="4" y2="4"></line><line class="im-stroke" x1="6" x2="15" y1="9" y2="9"></line><line class="im-stroke" x1="6" x2="15" y1="14" y2="14"></line><line class="im-stroke" x1="3" x2="3" y1="4" y2="4"></line><line class="im-stroke" x1="3" x2="3" y1="9" y2="9"></line><line class="im-stroke" x1="3" x2="3" y1="14" y2="14"></line></svg>'
|
||||
},
|
||||
{
|
||||
label: 'list',
|
||||
type: 'unchecked',
|
||||
svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="9" x2="15" y1="4" y2="4"></line><polyline class="im-stroke" points="3 4 4 5 6 3"></polyline><line class="im-stroke" x1="9" x2="15" y1="14" y2="14"></line><polyline class="im-stroke" points="3 14 4 15 6 13"></polyline><line class="im-stroke" x1="9" x2="15" y1="9" y2="9"></line><polyline class="im-stroke" points="3 9 4 10 6 8"></polyline></svg>'
|
||||
},
|
||||
]
|
||||
|
||||
export {fullToolIcons}
|
||||
@ -202,7 +202,7 @@
|
||||
class-name="chat-input-full-input"
|
||||
footer-hide
|
||||
fullscreen>
|
||||
<div class="chat-input-box">
|
||||
<div class="chat-input-box" :style="chatInputBoxStyle">
|
||||
<div class="chat-input-wrapper">
|
||||
<div ref="editorFull" class="no-dark-content"></div>
|
||||
</div>
|
||||
@ -210,8 +210,11 @@
|
||||
<li
|
||||
v-for="(item, index) in fullTools"
|
||||
:key="index"
|
||||
@click="onFullMenu(item.label, item.type)"
|
||||
v-html="item.svg"></li>
|
||||
@touchstart.prevent=""
|
||||
@touchend.prevent="onFullMenu(item.label, item.type)"
|
||||
@click="onFullMenu(item.label, item.type)">
|
||||
<i class="taskfont" v-html="item.icon"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<i slot="close" class="taskfont"></i>
|
||||
@ -230,7 +233,6 @@ import TransferDom from "../../../../directives/transfer-dom";
|
||||
import clickoutside from "../../../../directives/clickoutside";
|
||||
import longpress from "../../../../directives/longpress";
|
||||
import {inputLoadAdd, inputLoadIsLast, inputLoadRemove} from "./one";
|
||||
import {fullToolIcons} from "./icon";
|
||||
import {isMarkdownFormat} from "../../../../store/markdown";
|
||||
import {Store} from "le5le-store";
|
||||
|
||||
@ -354,7 +356,55 @@ export default {
|
||||
fullInput: false,
|
||||
fullQuill: null,
|
||||
fullSelection: {index: 0, length: 0},
|
||||
fullTools: fullToolIcons,
|
||||
fullTools: [
|
||||
{
|
||||
label: 'bold',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'strike',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'italic',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'underline',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'blockquote',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'link',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'list',
|
||||
type: 'ordered',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'list',
|
||||
type: 'bullet',
|
||||
icon: '',
|
||||
},
|
||||
{
|
||||
label: 'list',
|
||||
type: 'unchecked',
|
||||
icon: '',
|
||||
},
|
||||
],
|
||||
|
||||
viewportHeight: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -363,6 +413,10 @@ export default {
|
||||
mounted() {
|
||||
this.init();
|
||||
//
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', this.visualViewportResize);
|
||||
}
|
||||
//
|
||||
this.recordInter = setInterval(_ => {
|
||||
if (this.recordState === 'ing') {
|
||||
// 录音中，但录音时长不增加则取消录音
|
||||
@ -399,6 +453,9 @@ export default {
|
||||
if (this.recordInter) {
|
||||
clearInterval(this.recordInter)
|
||||
}
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.removeEventListener('resize', this.visualViewportResize);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
@ -511,6 +568,14 @@ export default {
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
chatInputBoxStyle({fullInput, viewportHeight}) {
|
||||
const style = {}
|
||||
if (fullInput && viewportHeight > 0) {
|
||||
style.height = Math.max(100, viewportHeight - 70) + 'px'
|
||||
}
|
||||
return style
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// Watch content change
|
||||
@ -661,8 +726,14 @@ export default {
|
||||
|
||||
fullInput(val) {
|
||||
this.quill?.enable(!val)
|
||||
},
|
||||
|
||||
windowScrollY(val) {
|
||||
if (this.fullInput && val > 0) {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// Options
|
||||
@ -1304,6 +1375,9 @@ export default {
|
||||
this.fullQuill.on('selection-change', range => {
|
||||
this.fullSelection = range || {index: 0, length: 0};
|
||||
})
|
||||
this.fullQuill.on('text-change', _ => {
|
||||
this.fullSelection = this.fullQuill.getSelection()
|
||||
})
|
||||
this.fullQuill.enable(true)
|
||||
this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML
|
||||
this.$nextTick(_ => {
|
||||
@ -1782,7 +1856,11 @@ export default {
|
||||
if (mention.isOpen) {
|
||||
mention.setMentionContainerPosition()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
visualViewportResize() {
|
||||
this.viewportHeight = window.visualViewport?.height || 0;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -769,10 +769,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
margin: 0 -12px;
|
||||
&.activation {
|
||||
> li {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
> li {
|
||||
@ -784,39 +789,17 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
opacity: 0.6;
|
||||
opacity: 0.8;
|
||||
cursor: not-allowed;
|
||||
> svg {
|
||||
height: 20px;
|
||||
.im-fill {
|
||||
fill: #333;
|
||||
}
|
||||
.im-stroke {
|
||||
fill: none;
|
||||
stroke: #333;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.im-thin {
|
||||
stroke-width: 1;
|
||||
}
|
||||
.im-even {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
&:active {
|
||||
.im-fill {
|
||||
fill: #000;
|
||||
}
|
||||
.im-stroke {
|
||||
stroke: #000;
|
||||
}
|
||||
}
|
||||
border-radius: 8px;
|
||||
> i {
|
||||
color: #555;
|
||||
font-size: 16px;
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
height: 52px;
|
||||
> svg {
|
||||
height: 18px;
|
||||
> i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user