From 7c5e9f9b754452cf161b99401b628d5a109795ed Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 19 Apr 2022 00:36:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9=E8=A1=A8?=
 =?UTF-8?q?=E6=83=85=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/functions/web.js          |  6 ++--
 .../manage/components/ChatInput/emoji.vue     |  4 +--
 .../manage/components/ChatInput/index.vue     |  2 +-
 .../js/pages/manage/components/DialogView.vue | 25 ++++++++++---
 .../sass/pages/components/dialog-wrapper.scss | 35 +++++++++++++++++++
 5 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/resources/assets/js/functions/web.js b/resources/assets/js/functions/web.js
index 6ccc4c096..4af3aa5ef 100755
--- a/resources/assets/js/functions/web.js
+++ b/resources/assets/js/functions/web.js
@@ -695,7 +695,8 @@
                     .sr-reader,
                     .no-dark-mode,
                     .no-dark-mode-before:before,
-                    .sr-backdrop {
+                    .sr-backdrop,
+                    .dialog-content .content-text {
                         ${this.utils.reverseFilter}
                     }
 
@@ -705,7 +706,8 @@
                     [style*="background-image: url"] *,
                     input,
                     [background] *,
-                    twitterwidget .NaturalImage-image {
+                    twitterwidget .NaturalImage-image,
+                    .dialog-content .content-text img {
                         ${this.utils.noneFilter}
                     }
 
diff --git a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
index bf127d0b1..326175e10 100644
--- a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="chat-emoji-wrapper">
-        <ul class="chat-emoji-box overlay-y" :class="type">
+        <ul class="chat-emoji-box overlay-y" :class="type === 'emoji' ? ['no-dark-mode', 'emoji'] : [type]">
             <li v-for="item in list" @click="onSelect(item)">
                 <img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
                 <span v-else v-html="item.html" :title="item.name"></span>
@@ -8,7 +8,7 @@
         </ul>
         <ul class="chat-emoji-menu">
             <li :class="{active: type === 'emoji'}" @click="type='emoji'">
-                <span>&#128512;</span>
+                <span class="no-dark-mode">&#128512;</span>
             </li>
             <li v-for="item in emoticonList" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
                 <img :title="item.name" :alt="item.name" :src="item.src"/>
diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 839b11ed9..f1af5ac86 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="chat-input-wrapper" :class="modeClass">
-        <div ref="editor"></div>
+        <div ref="editor" class="no-dark-mode"></div>
         <div class="chat-input-toolbar">
             <slot name="toolbarBefore"/>
 
diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index cc2f1c465..6468a001f 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -7,10 +7,10 @@
 
         <div class="dialog-head">
             <!--详情-->
-            <div class="dialog-content">
+            <div class="dialog-content" :class="contentClass">
                 <!--文本-->
                 <div v-if="msgData.type === 'text'" class="content-text">
-                    <pre class="no-dark-mode" @click="viewText" v-html="textMsg(msgData.msg.text)"></pre>
+                    <pre @click="viewText" v-html="textMsg(msgData.msg.text)"></pre>
                 </div>
                 <!--文件-->
                 <div v-else-if="msgData.type === 'file'" :class="`content-file ${msgData.msg.type}`">
@@ -124,6 +124,23 @@ export default {
 
         showMenu() {
             return this.msgData.userid == this.userId || this.msgData.type === 'file'
+        },
+
+        contentClass() {
+            const {type, msg} = this.msgData;
+            let classArray = [];
+            if (type === 'text') {
+                if (/^<img\s+class="emoticon"[^>]*?>$/.test(msg.text)) {
+                    classArray.push('an-emoticon')
+                } else if (/^\s*<p>\s*([\uD800-\uDBFF][\uDC00-\uDFFF]){3}\s*<\/p>\s*$/.test(msg.text)) {
+                    classArray.push('three-emoji')
+                } else if (/^\s*<p>\s*([\uD800-\uDBFF][\uDC00-\uDFFF]){2}\s*<\/p>\s*$/.test(msg.text)) {
+                    classArray.push('two-emoji')
+                } else if (/^\s*<p>\s*[\uD800-\uDBFF][\uDC00-\uDFFF]\s*<\/p>\s*$/.test(msg.text)) {
+                    classArray.push('an-emoji')
+                }
+            }
+            return classArray;
         }
     },
 
@@ -195,8 +212,8 @@ export default {
         imageStyle(info) {
             const {width, height} = info;
             if (width && height) {
-                let maxW = 180,
-                    maxH = 180,
+                let maxW = 220,
+                    maxH = 220,
                     tempW = width,
                     tempH = height;
                 if (width > maxW || height > maxH) {
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index a6a4e7298..8ceb9c8fe 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -230,6 +230,40 @@
                                 display: flex;
                                 align-items: flex-start;
 
+                                &.an-emoticon,
+                                &.an-emoji,
+                                &.two-emoji,
+                                &.three-emoji {
+                                    background-color: transparent !important;
+                                }
+
+                                &.an-emoji {
+                                    .content-text {
+                                        > pre {
+                                            font-size: 72px;
+                                            line-height: 1;
+                                        }
+                                    }
+                                }
+
+                                &.two-emoji {
+                                    .content-text {
+                                        > pre {
+                                            font-size: 52px;
+                                            line-height: 1;
+                                        }
+                                    }
+                                }
+
+                                &.three-emoji {
+                                    .content-text {
+                                        > pre {
+                                            font-size: 32px;
+                                            line-height: 1;
+                                        }
+                                    }
+                                }
+
                                 .content-text {
                                     color: #333333;
 
@@ -242,6 +276,7 @@
                                         word-wrap: break-word;
                                         word-break: break-word;
                                         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+                                        font-size: 14px;
 
                                         img {
                                             cursor: pointer;