From 4c1125b9e1a8951e95f4a469f1766027ef5bb751 Mon Sep 17 00:00:00 2001
From: weifashi <605403358@qq.com>
Date: Thu, 7 Dec 2023 21:19:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=8E=A5=E9=BE=99=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/DialogView.vue |  15 +-
 .../sass/pages/components/dialog-wrapper.scss |  20 +++
 .../sass/pages/components/word-chain.scss     | 137 ++++++++++++++++++
 3 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 resources/assets/sass/pages/components/word-chain.scss

diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index 4e092e47b..10e5c8926 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -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')
         }
     }
 }
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 6d629c746..e29ce537d 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -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;
                                     }
diff --git a/resources/assets/sass/pages/components/word-chain.scss b/resources/assets/sass/pages/components/word-chain.scss
new file mode 100644
index 000000000..073dc275b
--- /dev/null
+++ b/resources/assets/sass/pages/components/word-chain.scss
@@ -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 {
+
+        }
+    }
+}