github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 03:01:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 接龙优化

Browse Source
This commit is contained in:
weifashi 2023-12-07 21:19:12 +08:00
parent 85ef2d9687
commit 4c1125b9e1
3 changed files with 169 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/assets/js/pages/manage/components/DialogView.vue
View File

@ -67,12 +67,17 @@
</ul>
</div>
<!--接龙-->
<div v-else-if="msgData.type === 'word-chain'" class="content-text content-word-chain no-dark-content">
<div v-else-if="msgData.type === 'word-chain'" class="content-text content-word-chain no-dark-content">
<pre v-html="$A.formatTextMsg(msgData.msg.text, userId)"></pre>
<ul>
<li v-for="(item,index) in (msgData.msg.list || [])" :key="index">
<span v-if="item.type == 'case' && item.text">{{ $L('例') }} {{ item.text }}</span>
<span v-else-if="item.type != 'case'">{{index}}. {{item.text}}</span>
<span class="expand" v-if="index == 2 && index != msgData.msg.list.length - 1" @click="unfoldWordChain">
...{{$L('展开')}}...
</span>
<span :class="{'shrink': (index >= 2 && index != msgData.msg.list.length - 1) } ">
<span v-if="item.type == 'case' && item.text">{{ $L('例') }} {{ item.text }}</span>
<span v-else-if="item.type != 'case'">{{index}}. {{item.text}}</span>
</span>
</li>
<li @click="onWordChain" class="participate">{{ $L('参与接龙') }}<span>></span></li>
</ul>
@ -522,6 +527,10 @@ export default {
dialog_id: this.msgData.dialog_id,
msgData: this.msgData,
}
},
unfoldWordChain(e){
e.target.parentNode?.parentNode?.classList.add('expand')
}
}
}

20
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -963,6 +963,13 @@
margin-top: 20px;
li{
margin-top: 5px;
.expand{
cursor: pointer;
color: #0bc037;
}
.shrink{
display: none;
}
}
li.participate{
cursor: pointer;
@ -973,6 +980,14 @@
margin-left: 2px;
}
}
&.expand{
.expand{
display: none;
}
.shrink{
display: block;
}
}
}
}
}
@ -1227,6 +1242,11 @@
.content-word-chain{
ul{
li{
.expand{
color: #23241f;
}
}
li.participate{
color: #23241f;
}

137
resources/assets/sass/pages/components/word-chain.scss vendored Normal file
View File

@ -0,0 +1,137 @@
.word-chain-wrapper {
.ivu-modal-body{
max-height: calc(100vh - 365px);
overflow: auto;
padding-top: 0 !important;
padding-right: 0 !important;
}
.chain-modal-header {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
font-weight: 500;
.chain-modal-close {
color: $primary-text-color;
}
.chain-modal-title {
position: absolute;
top: 0;
bottom: 0;
left: 100px;
right: 100px;
display: flex;
justify-content: center;
align-items: center;
> span {
font-size: 16px;
color: $primary-title-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.chain-modal-submit {
color: $primary-color;
display: flex;
align-items: center;
.submit-loading {
width: 14px;
height: 14px;
margin-right: 6px;
}
&.disabled{
color: #9c9c9c;
}
}
}
.word-chain-body{
display: flex;
flex-direction: column;
height: 100%;
max-height: calc(100vh - 370px);
.source{
margin-right: 32px;
span{
color: #84C56A;
}
}
.initiate{
padding: 10px 0;
gap: 5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow-y: auto;
min-height: 40px;
margin-right: 32px;
padding-bottom: 20px;
.ivu-input{
border-color: #fff !important;
}
.avatar-wrapper{
margin: 0 4px 4px;
}
>span,>div{
float: left;
}
}
.textarea{
padding-right: 32px;
}
ul{
margin: 20px 0;
list-style-type:none;
flex: 1;
overflow: auto;
padding-right: 32px;
li{
display: flex;
gap: 10px;
padding: 5px 0;
span{
min-width: 30px;
height: 30px;
line-height: 30px;
margin-top: 2px;
background-color: #f2f2f2;
border-radius: 100%;
text-align: center;
font-size: 12px;
color: #7f7f7f;
}
&.add{
.taskfont{
font-size: 30px;
cursor: pointer;
line-height: 30px;
user-select: none;
}
}
}
}
}
}
body.window-portrait {
.word-chain-wrapper {
.ivu-modal-body{
padding-top: 10px !important;
max-height: 100%;
}
.word-chain-body{
max-height: 100%;
}
}
@media (max-width: 640px) {
.word-chain-wrapper {
}
}
}