mirror of
https://github.com/kuaifan/dootask.git
synced 2026-02-28 04:40:37 +00:00
no message
This commit is contained in:
kuaifan
parent
ca74ba1c15
commit
85f95ff89c
@ -37,7 +37,7 @@
|
||||
"notification-koro1": "^1.1.1",
|
||||
"postcss": "^8.4.5",
|
||||
"quill": "^1.3.7",
|
||||
"quill-mention": "^3.1.0",
|
||||
"quill-mention-hi": "^3.1.0-1",
|
||||
"resolve-url-loader": "^4.0.0",
|
||||
"sass": "^1.45.1",
|
||||
"sass-loader": "^12.4.0",
|
||||
|
||||
@ -59,7 +59,9 @@ export default {
|
||||
},
|
||||
|
||||
touchmove(event) {
|
||||
this.getXY(event)
|
||||
if (this.show) {
|
||||
this.getXY(event)
|
||||
}
|
||||
},
|
||||
|
||||
touchend() {
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import Quill from 'quill';
|
||||
import "quill-mention";
|
||||
import "quill-mention-hi";
|
||||
import ChatEmoji from "./emoji";
|
||||
import touchmouse from "../../../../directives/touchmouse";
|
||||
import TransferDom from "../../../../directives/transfer-dom";
|
||||
@ -308,6 +308,7 @@ export default {
|
||||
if (!val && this.$refs.emojiTip) {
|
||||
this.$refs.emojiTip.updatePopper()
|
||||
}
|
||||
this.$emit('on-emoji-visible-change', val)
|
||||
},
|
||||
|
||||
showMore(val) {
|
||||
@ -317,6 +318,7 @@ export default {
|
||||
if (!val && this.$refs.moreTip) {
|
||||
this.$refs.moreTip.updatePopper()
|
||||
}
|
||||
this.$emit('on-more-visible-change', val)
|
||||
},
|
||||
|
||||
dialogInputCache() {
|
||||
@ -365,6 +367,7 @@ export default {
|
||||
mentionDenotationChars: ["@", "#"],
|
||||
defaultMenuOrientation: this.defaultMenuOrientation,
|
||||
isolateCharacter: true,
|
||||
positioningStrategy: 'fixed',
|
||||
renderItem: (data) => {
|
||||
if (data.disabled === true) {
|
||||
return `<div class="mention-item-disabled">${data.value}</div>`;
|
||||
@ -381,6 +384,13 @@ export default {
|
||||
return "Loading...";
|
||||
},
|
||||
source: (searchTerm, renderList, mentionChar) => {
|
||||
const mentionName = mentionChar == "@" ? 'user-mention' : 'task-mention';
|
||||
const containers = document.getElementsByClassName("ql-mention-list-container");
|
||||
for (let i = 0; i < containers.length; i++) {
|
||||
containers[i].classList.remove("user-mention");
|
||||
containers[i].classList.remove("task-mention");
|
||||
containers[i].classList.add(mentionName);
|
||||
}
|
||||
this.getSource(mentionChar).then(array => {
|
||||
let values = [];
|
||||
array.some(item => {
|
||||
@ -492,7 +502,18 @@ export default {
|
||||
this.recordDuration = duration;
|
||||
}
|
||||
})
|
||||
this.recordReady = true;
|
||||
if (window.Recorder.Support()) {
|
||||
this.recordReady = true;
|
||||
this.$nextTick(_ => {
|
||||
this.recordWave = window.Recorder.FrequencyHistogramView({
|
||||
elem: this.$refs.recwave,
|
||||
lineCount: 90,
|
||||
position: 0,
|
||||
minHeight: 1,
|
||||
stripeEnable: false
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// Ready event
|
||||
@ -586,24 +607,17 @@ export default {
|
||||
this.recordState = "ready";
|
||||
this.recordRec.open(_ => {
|
||||
if (this.recordState === "ready") {
|
||||
this.recordDuration = 0;
|
||||
this.recordState = "ing"
|
||||
this.recordBlob = null
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.recwave.innerHTML = "";
|
||||
this.recordWave = window.Recorder.FrequencyHistogramView({
|
||||
elem: this.$refs.recwave,
|
||||
lineCount: 90,
|
||||
position: 0,
|
||||
minHeight: 1,
|
||||
stripeEnable: false
|
||||
})
|
||||
setTimeout(_ => {
|
||||
this.recordRec.start()
|
||||
})
|
||||
}, 300)
|
||||
} else {
|
||||
this.recordRec.close();
|
||||
}
|
||||
}, (msg) => {
|
||||
$A.modalError(msg || '打开录音失败')
|
||||
$A.messageError(msg || '打开录音失败')
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
@ -612,28 +626,33 @@ export default {
|
||||
},
|
||||
|
||||
stopRecord(isCancel) {
|
||||
if (this.recordState === "ing") {
|
||||
this.recordState = "stop";
|
||||
this.recordRec.stop((blob, duration) => {
|
||||
this.recordRec.close();
|
||||
if (isCancel === true) {
|
||||
return;
|
||||
}
|
||||
if (duration < 600) {
|
||||
// 小于 600ms 不发送
|
||||
$A.messageWarning("说话时间太短")
|
||||
} else {
|
||||
this.recordBlob = blob;
|
||||
this.uploadRecord(duration);
|
||||
}
|
||||
}, (msg) => {
|
||||
this.recordRec.close();
|
||||
$A.modalError("录音失败: " + msg);
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
this.recordState = "stop";
|
||||
return false;
|
||||
switch (this.recordState) {
|
||||
case "ing":
|
||||
this.recordState = "stop";
|
||||
this.recordRec.stop((blob, duration) => {
|
||||
this.recordRec.close();
|
||||
if (isCancel === true) {
|
||||
return;
|
||||
}
|
||||
if (duration < 600) {
|
||||
$A.messageWarning("说话时间太短") // 小于 600ms 不发送
|
||||
} else {
|
||||
this.recordBlob = blob;
|
||||
this.uploadRecord(duration);
|
||||
}
|
||||
}, (msg) => {
|
||||
this.recordRec.close();
|
||||
$A.messageError(msg || "录音失败");
|
||||
});
|
||||
return true;
|
||||
|
||||
case "ready":
|
||||
this.recordState = "stop";
|
||||
return true;
|
||||
|
||||
default:
|
||||
this.recordState = "stop";
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div
|
||||
v-if="isReady"
|
||||
class="dialog-wrapper"
|
||||
:style="wrapperStyle"
|
||||
@drop.prevent="chatPasteDrag($event, 'drag')"
|
||||
@dragover.prevent="chatDragOver(true, $event)"
|
||||
@dragleave.prevent="chatDragOver(false, $event)">
|
||||
@ -116,6 +117,7 @@
|
||||
@on-more="onEventMore"
|
||||
@on-file="sendFileMsg"
|
||||
@on-send="sendMsg"
|
||||
@on-emoji-visible-change="onEventEmojiVisibleChange"
|
||||
:placeholder="$L('输入消息...')"/>
|
||||
</div>
|
||||
<div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
|
||||
@ -218,15 +220,21 @@ export default {
|
||||
|
||||
dialogDrag: false,
|
||||
groupInfoShow: false,
|
||||
|
||||
windowScrollY: 0
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
if ($A.isIos()) {
|
||||
window.addEventListener('scroll', this.onScrollEvent);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
|
||||
if ($A.isIos()) {
|
||||
window.removeEventListener('scroll', this.onScrollEvent);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -313,6 +321,13 @@ export default {
|
||||
isMyDialog() {
|
||||
const {dialogData, userId} = this;
|
||||
return dialogData.dialog_user && dialogData.dialog_user.userid == userId
|
||||
},
|
||||
|
||||
wrapperStyle() {
|
||||
const {windowScrollY} = this;
|
||||
return {
|
||||
top: windowScrollY + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -580,6 +595,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
onEventEmojiVisibleChange(val) {
|
||||
if (val && !this.$isDesktop) {
|
||||
this.onToBottom();
|
||||
}
|
||||
},
|
||||
|
||||
onActive() {
|
||||
this.$emit("on-active");
|
||||
},
|
||||
@ -673,6 +694,10 @@ export default {
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
|
||||
onScrollEvent() {
|
||||
this.windowScrollY = window.scrollY
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import "~quill/dist/quill.bubble.css";
|
||||
@import "~quill-mention/dist/quill.mention.min.css";
|
||||
@import "~quill-mention-hi/dist/quill.mention.min.css";
|
||||
|
||||
.chat-input-box {
|
||||
display: inline-block;
|
||||
@ -7,6 +7,9 @@
|
||||
|
||||
&.record-ing {
|
||||
.chat-input-wrapper {
|
||||
.ql-container {
|
||||
opacity: 0;
|
||||
}
|
||||
.chat-toolbar {
|
||||
> li {
|
||||
&.chat-send {
|
||||
@ -15,29 +18,8 @@
|
||||
}
|
||||
}
|
||||
&.chat-record-recwave {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.task-mention {
|
||||
.chat-input-wrapper {
|
||||
.ql-container {
|
||||
.ql-mention-list-container {
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ql-mention-list-item {
|
||||
line-height: 36px;
|
||||
.mention-item-disabled {
|
||||
padding: 8px 4px 0;
|
||||
}
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -102,136 +84,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-container {
|
||||
width: auto;
|
||||
min-width: 220px;
|
||||
max-width: 280px;
|
||||
max-height: 360px;
|
||||
//noinspection CssInvalidPropertyValue
|
||||
overflow-y: overlay;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb:hover {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-item {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
|
||||
&.selected {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mention-item-at {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background-color: $primary-color;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mention-item-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> em {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff9900;
|
||||
border: 1px solid #ffffff;
|
||||
transform-origin: right bottom;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.online {
|
||||
> em {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention-item-name {
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-item-tip {
|
||||
color: #8f8f8e;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-item-disabled {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-bubble {
|
||||
@ -245,6 +97,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
user-select: none;
|
||||
> li {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@ -297,10 +150,12 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
> div {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
@ -499,6 +354,151 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-container {
|
||||
width: auto;
|
||||
min-width: 220px;
|
||||
max-width: 280px;
|
||||
max-height: 360px;
|
||||
overflow-y: overlay;
|
||||
|
||||
&.task-mention {
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ql-mention-list-item {
|
||||
line-height: 36px;
|
||||
.mention-item-disabled {
|
||||
padding: 8px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 2px solid transparent;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb:hover {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.ql-mention-list {
|
||||
> li {
|
||||
&:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-mention-list-item {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
|
||||
&.selected {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mention-item-at {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background-color: $primary-color;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mention-item-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> em {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff9900;
|
||||
border: 1px solid #ffffff;
|
||||
transform-origin: right bottom;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.online {
|
||||
> em {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention-item-name {
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-item-tip {
|
||||
color: #8f8f8e;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mention-item-disabled {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chat-input-box {
|
||||
.chat-input-wrapper {
|
||||
|
||||
@ -451,7 +451,7 @@
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
color: #ffffff;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -691,6 +691,7 @@
|
||||
|
||||
.dialog-record {
|
||||
flex-direction: row;
|
||||
color: #ffffff;
|
||||
|
||||
.record-time {
|
||||
padding: 0 4px 0 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user