perf: 优化撤回消息

app/Http/Controllers/Api/DialogController.php

@@ -160,16 +160,28 @@ class DialogController extends AbstractController
     }
 
     /**
-     * @api {get} api/dialog/msg/sendtext          05. 未读消息
+     * @api {get} api/dialog/msg/unread          05. 获取未读消息数量
      *
      * @apiDescription 需要token身份
      * @apiVersion 1.0.0
      * @apiGroup dialog
-     * @apiName msg__sendtext
+     * @apiName msg__unread
+     *
+     * @apiParam {Number} [dialog_id]         对话ID，留空获取总未读消息数量
+     *
+     * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
+     * @apiSuccess {String} msg     返回信息（错误描述）
+     * @apiSuccess {Object} data    返回数据
      */
     public function msg__unread()
     {
-        $unread = WebSocketDialogMsgRead::whereUserid(User::userid())->whereReadAt(null)->count();
+        $dialog_id = intval(Request::input('dialog_id'));
+        //
+        $builder = WebSocketDialogMsgRead::whereUserid(User::userid())->whereReadAt(null);
+        if ($dialog_id > 0) {
+            $builder->whereDialogId($dialog_id);
+        }
+        $unread = $builder->count();
         return Base::retSuccess('success', [
             'unread' => $unread,
         ]);
@@ -417,7 +429,7 @@ class DialogController extends AbstractController
     /**
      * @api {get} api/dialog/msg/withdraw          11. 聊天消息撤回
      *
-     * @apiDescription 需要token身份
+     * @apiDescription 消息撤回限制24小时内，需要token身份
      * @apiVersion 1.0.0
      * @apiGroup dialog
      * @apiName msg__withdraw

app/Models/WebSocketDialogMsg.php

@@ -8,6 +8,7 @@ use App\Tasks\PushTask;
 use App\Tasks\WebSocketDialogMsgTask;
 use Carbon\Carbon;
 use Hhxsv5\LaravelS\Swoole\Task\Task;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 /**
  * App\Models\WebSocketDialogMsg
@@ -21,11 +22,15 @@ use Hhxsv5\LaravelS\Swoole\Task\Task;
  * @property int|null $send 发送数量
  * @property \Illuminate\Support\Carbon|null $created_at
  * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property \Illuminate\Support\Carbon|null $deleted_at
  * @property-read int|mixed $percentage
+ * @property-read \App\Models\WebSocketDialog|null $webSocketDialog
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg newModelQuery()
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg newQuery()
+ * @method static \Illuminate\Database\Query\Builder|WebSocketDialogMsg onlyTrashed()
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg query()
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereDeletedAt($value)
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereDialogId($value)
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereId($value)
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereMsg($value)
@@ -34,10 +39,14 @@ use Hhxsv5\LaravelS\Swoole\Task\Task;
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereType($value)
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereUpdatedAt($value)
  * @method static \Illuminate\Database\Eloquent\Builder|WebSocketDialogMsg whereUserid($value)
+ * @method static \Illuminate\Database\Query\Builder|WebSocketDialogMsg withTrashed()
+ * @method static \Illuminate\Database\Query\Builder|WebSocketDialogMsg withoutTrashed()
  * @mixin \Eloquent
  */
 class WebSocketDialogMsg extends AbstractModel
 {
+    use SoftDeletes;
+
     protected $appends = [
         'percentage',
     ];
@@ -46,6 +55,14 @@ class WebSocketDialogMsg extends AbstractModel
         'updated_at',
     ];
 
+    /**
+     * @return \Illuminate\Database\Eloquent\Relations\HasOne
+     */
+    public function webSocketDialog(): \Illuminate\Database\Eloquent\Relations\HasOne
+    {
+        return $this->hasOne(WebSocketDialog::class, 'id', 'dialog_id');
+    }
+
     /**
      * 阅读占比
      * @return int|mixed
@@ -130,27 +147,39 @@ class WebSocketDialogMsg extends AbstractModel
      */
     public function deleteMsg()
     {
-        $send_dt = Carbon::parse($this->created_at)->addMinutes(5);
+        $send_dt = Carbon::parse($this->created_at)->addDay();
         if ($send_dt->lt(Carbon::now())) {
-            throw new ApiException('已超过5分钟，此消息不能撤回');
+            throw new ApiException('已超过24小时，此消息不能撤回');
-        }
-        $this->delete();
-        //
-        $dialog = WebSocketDialog::find($this->dialog_id);
-        if ($dialog) {
-            $userids = $dialog->dialogUser->pluck('userid')->toArray();
-            PushTask::push([
-                'userid' => $userids,
-                'msg' => [
-                    'type' => 'dialog',
-                    'mode' => 'delete',
-                    'data' => [
-                        'id' => $this->id,
-                        'dialog_id' => $this->dialog_id
-                    ],
-                ]
-            ]);
         }
+        AbstractModel::transaction(function() {
+            $deleteRead = WebSocketDialogMsgRead::whereMsgId($this->id)->whereNull('read_at')->delete();    // 未阅读记录不需要软删除，直接删除即可
+            $this->delete();
+            //
+            $last_msg = null;
+            if ($this->webSocketDialog) {
+                $last_msg = WebSocketDialogMsg::whereDialogId($this->dialog_id)->orderByDesc('id')->first();
+                $this->webSocketDialog->last_at = $last_msg->created_at;
+                $this->webSocketDialog->save();
+            }
+            //
+            $dialog = WebSocketDialog::find($this->dialog_id);
+            if ($dialog) {
+                $userids = $dialog->dialogUser->pluck('userid')->toArray();
+                PushTask::push([
+                    'userid' => $userids,
+                    'msg' => [
+                        'type' => 'dialog',
+                        'mode' => 'delete',
+                        'data' => [
+                            'id' => $this->id,
+                            'dialog_id' => $this->dialog_id,
+                            'last_msg' => $last_msg,
+                            'update_read' => $deleteRead ? 1 : 0
+                        ],
+                    ]
+                ]);
+            }
+        });
     }
 
     /**

database/migrations/2022_01_29_125829_web_socket_dialog_msgs_add_deletes.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class WebSocketDialogMsgsAddDeletes extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('web_socket_dialog_msgs', function (Blueprint $table) {
+            if (!Schema::hasColumn('web_socket_dialog_msgs', 'deleted_at')) {
+                $table->softDeletes();
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('web_socket_dialog_msgs', function (Blueprint $table) {
+            $table->dropSoftDeletes();
+        });
+    }
+}

resources/assets/js/pages/manage/components/DialogView.vue

@@ -1,41 +1,49 @@
 <template>
     <div :class="`dialog-view ${msgData.type}`" :data-id="msgData.id">
 
-        <!--文本-->
+        <div class="dialog-head">
-        <div v-if="msgData.type === 'text'" class="dialog-content">
+            <!--详情-->
-            <pre class="no-dark-mode">{{textMsg(msgData.msg.text)}}</pre>
+            <div class="dialog-content">
-        </div>
+                <!--文本-->
-
+                <div v-if="msgData.type === 'text'" class="content-text">
-        <!--等待-->
+                    <pre class="no-dark-mode">{{textMsg(msgData.msg.text)}}</pre>
-        <div v-else-if="msgData.type === 'loading'" class="dialog-content loading"><Loading/></div>
+                </div>
-
+                <!--文件-->
-        <!--文件-->
+                <div v-else-if="msgData.type === 'file'" :class="`content-file ${msgData.msg.type}`">
-        <div v-else-if="msgData.type === 'file'" :class="['dialog-content', msgData.msg.type]">
+                    <div class="dialog-file">
-            <div class="dialog-file">
+                        <img v-if="msgData.msg.type === 'img'" class="file-img" :style="imageStyle(msgData.msg)" :src="msgData.msg.thumb" @click="viewFile"/>
-                <img v-if="msgData.msg.type === 'img'" class="file-img" :style="imageStyle(msgData.msg)" :src="msgData.msg.thumb" @click="viewFile"/>
+                        <div v-else class="file-box">
-                <div v-else class="file-box">
+                            <img class="file-thumb" :src="msgData.msg.thumb"/>
-                    <img class="file-thumb" :src="msgData.msg.thumb"/>
+                            <div class="file-info">
-                    <div class="file-info">
+                                <div class="file-name">{{msgData.msg.name}}</div>
-                        <div class="file-name">{{msgData.msg.name}}</div>
+                                <div class="file-size">{{$A.bytesToSize(msgData.msg.size)}}</div>
-                        <div class="file-size">{{$A.bytesToSize(msgData.msg.size)}}</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <!--等待-->
+                <div v-else-if="msgData.type === 'loading'" class="content-loading">
+                    <Loading/>
+                </div>
+                <!--未知-->
+                <div v-else class="content-unknown">{{$L("未知的消息类型")}}</div>
             </div>
-            <div class="dialog-file-menu">
+
-                <div class="file-menu-warp"></div>
+            <!--菜单-->
-                <div class="file-menu-icon">
+            <div v-if="showMenu" class="dialog-menu">
-                    <Icon @click="viewFile" type="md-eye" />
+                <div class="menu-icon">
-                    <Icon @click="downFile" type="md-arrow-round-down" />
+                    <Icon v-if="msgData.userid == userId" @click="withdraw" type="md-undo" :title="$L('撤回')"/>
+                    <template v-if="msgData.type === 'file'">
+                        <Icon @click="viewFile" type="md-eye" :title="$L('查看')"/>
+                        <Icon @click="downFile" type="md-arrow-round-down" :title="$L('下载')"/>
+                    </template>
                 </div>
             </div>
         </div>
 
-        <!--未知-->
-        <div v-else class="dialog-content unknown">{{$L("未知的消息类型")}}</div>
-
         <!--时间/阅读-->
         <div v-if="msgData.created_at" class="dialog-foot">
-            <div class="time">{{$A.formatTime(msgData.created_at)}}</div>
+            <div class="time" :title="msgData.created_at">{{$A.formatTime(msgData.created_at)}}</div>
             <Poptip
                 v-if="msgData.send > 1 || dialogType == 'group'"
                 class="percent"
@@ -95,7 +103,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userToken']),
+        ...mapState(['userToken', 'userId']),
 
         readList() {
             return this.read_list.filter(({read_at}) => read_at)
@@ -103,6 +111,10 @@ export default {
 
         unreadList() {
             return this.read_list.filter(({read_at}) => !read_at)
+        },
+
+        showMenu() {
+            return this.msgData.userid == this.userId || this.msgData.type === 'file'
         }
     },
 
@@ -176,6 +188,29 @@ export default {
             return {};
         },
 
+        withdraw() {
+            $A.modalConfirm({
+                content: `确定撤回此信息吗？`,
+                okText: '撤回',
+                loading: true,
+                onOk: () => {
+                    this.$store.dispatch("call", {
+                        url: 'dialog/msg/withdraw',
+                        data: {
+                            msg_id: this.msgData.id
+                        },
+                    }).then(() => {
+                        $A.messageSuccess("消息已撤回");
+                        this.$store.dispatch("forgetDialogMsg", this.msgData.id);
+                        this.$Modal.remove();
+                    }).catch(({msg}) => {
+                        $A.messageError(msg, 301);
+                        this.$Modal.remove();
+                    });
+                }
+            });
+        },
+
         viewFile() {
             if (this.$Electron) {
                 this.$Electron.ipcRenderer.send('windowRouter', {

resources/assets/js/store/actions.js

@@ -2053,6 +2053,22 @@ export default {
                                     case 'delete':
                                         // 删除消息
                                         dispatch("forgetDialogMsg", data.id)
+                                        //
+                                        let dialog = state.cacheDialogs.find(({id}) => id == data.dialog_id);
+                                        if (dialog) {
+                                            // 更新最后消息
+                                            dialog.last_at = data.last_msg && data.last_msg.created_at;
+                                            dialog.last_msg = data.last_msg;
+                                            if (data.update_read) {
+                                                // 更新未读数量
+                                                dispatch("call", {
+                                                    url: 'dialog/msg/unread',
+                                                    dialog_id: data.dialog_id
+                                                }).then(result => {
+                                                    dialog.unread = result.data.unread
+                                                }).catch(() => {});
+                                            }
+                                        }
                                         break;
                                     case 'add':
                                     case 'chat':

resources/assets/sass/dark.scss

@@ -140,8 +140,10 @@ body.dark-mode-reverse {
                     > li {
                         .dialog-view {
                             .dialog-content {
-                                color: #ffffff;
                                 background-color: #e1e1e1;
+                                .content-text {
+                                    color: #ffffff;
+                                }
                             }
                         }
                         &.self {

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -8,6 +8,7 @@
     flex-direction: column;
     background-color: #ffffff;
     z-index: 1;
+
     .dialog-title {
         display: flex;
         flex-direction: column;
@@ -15,6 +16,7 @@
         padding: 0 30px;
         height: 68px;
         position: relative;
+
         &:before {
             content: "";
             position: absolute;
@@ -24,6 +26,7 @@
             height: 1px;
             background-color: #f4f5f5;
         }
+
         &.completed {
             &:after {
                 content: "\f373";
@@ -39,19 +42,23 @@
                 z-index: 1;
             }
         }
+
         .main-title {
             display: flex;
             align-items: center;
             line-height: 22px;
             max-width: 100%;
+
             .ivu-tag {
                 flex-shrink: 0;
                 margin: 0 6px 0 0;
                 padding: 0 5px;
+
                 &.ivu-tag-success {
                     padding: 0 6px;
                 }
             }
+
             .ivu-icon {
                 font-size: 18px;
                 margin-right: 6px;
@@ -60,6 +67,7 @@
                     color: $primary-color;
                 }
             }
+
             > h2 {
                 font-size: 17px;
                 font-weight: 600;
@@ -67,6 +75,7 @@
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
+
             > em {
                 font-style: normal;
                 font-size: 17px;
@@ -74,24 +83,29 @@
                 padding-left: 6px;
             }
         }
+
         .sub-title {
             flex-shrink: 0;
             font-size: 12px;
             line-height: 20px;
             color: #aaaaaa;
+
             &.pointer {
                 cursor: pointer;
+
                 &:hover {
                     color: #888888;
                 }
             }
         }
     }
+
     .dialog-scroller {
         position: relative;
         flex: 1;
         padding: 0 32px;
         overflow: auto;
+
         .dialog-list {
             > ul {
                 > li {
@@ -100,9 +114,11 @@
                     align-items: flex-end;
                     list-style: none;
                     margin-bottom: 16px;
+
                     &:first-child {
                         margin-top: 16px;
                     }
+
                     .dialog-avatar {
                         position: relative;
                         margin-bottom: 20px;
@@ -110,36 +126,137 @@
                         width: 30px;
                         height: 30px;
                     }
+
                     .dialog-view {
                         display: flex;
                         flex-direction: column;
                         align-items: flex-start;
                         margin: 0 0 0 8px;
                         position: relative;
+
                         &.text {
                             max-width: 70%;
                         }
-                        .dialog-content {
+
-                            color: #333333;
+                        &:hover {
-                            background-color: #F4F5F7;
+                            .dialog-head {
-                            padding: 8px;
+                                .dialog-menu {
-                            min-width: 32px;
+                                    opacity: 1;
-                            border-radius: 6px 6px 6px 0;
-                            .dialog-file-menu {
-                                opacity: 0;
-                                transition: all 0.3s;
-                                position: absolute;
-                                left: 0;
-                                bottom: -8px;
-                                .file-menu-warp {
-                                    width: 100%;
-                                    height: 12px;
                                 }
-                                .file-menu-icon {
+                            }
+                        }
+
+                        .dialog-head {
+                            display: flex;
+                            align-items: flex-start;
+
+                            .dialog-content {
+                                background-color: #F4F5F7;
+                                padding: 8px;
+                                min-width: 32px;
+                                border-radius: 6px 6px 6px 0;
+                                display: flex;
+                                align-items: flex-start;
+
+                                .content-text {
+                                    color: #333333;
+                                    > pre {
+                                        display: block;
+                                        margin: 0;
+                                        padding: 0;
+                                        line-height: 1.5;
+                                        white-space: pre-wrap;
+                                        word-wrap: break-word;
+                                        word-break: break-word;
+                                    }
+                                }
+
+                                .content-file {
+                                    &.file {
+                                        display: inline-block;
+
+                                        .file-box {
+                                            background-color: #ffffff;
+                                            display: flex;
+                                            align-items: center;
+                                            padding: 10px 14px;
+                                            border-radius: 3px;
+                                            width: 220px;
+
+                                            .file-thumb {
+                                                width: 36px;
+                                            }
+
+                                            .file-info {
+                                                margin-left: 12px;
+                                                display: flex;
+                                                flex-direction: column;
+                                                justify-content: center;
+
+                                                .file-name {
+                                                    color: #333333;
+                                                    font-size: 14px;
+                                                    line-height: 18px;
+                                                    word-break: break-all;
+                                                    text-overflow: ellipsis;
+                                                    overflow: hidden;
+                                                    display: -webkit-box;
+                                                    -webkit-line-clamp: 2;
+                                                    -webkit-box-orient: vertical;
+                                                }
+
+                                                .file-size {
+                                                    padding-top: 4px;
+                                                    color: #666666;
+                                                    font-size: 14px;
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    &.img {
+                                        padding: 0;
+                                        display: flex;
+                                        max-width: 220px;
+                                        max-height: 220px;
+                                        border-radius: 6px;
+                                        background-color: transparent;
+                                        overflow: hidden;
+
+                                        .file-img {
+                                            display: flex;
+                                            cursor: pointer;
+                                        }
+                                    }
+                                }
+
+                                .content-loading {
+                                    display: flex;
+
+                                    .common-loading {
+                                        width: 20px;
+                                        height: 20px;
+                                        margin: 4px;
+                                    }
+                                }
+
+                                .content-unknown {
+                                    text-decoration: underline;
+                                }
+                            }
+
+                            .dialog-menu {
+                                opacity: 0;
+                                margin-left: 6px;
+                                transition: all 0.3s;
+
+                                .menu-icon {
                                     display: flex;
                                     align-items: center;
                                     border-radius: 4px;
                                     border: 1px solid #ddd;
+                                    background-color: #ffffff;
+
                                     > i {
                                         flex: 1;
                                         display: inline-block;
@@ -147,105 +264,37 @@
                                         color: #999;
                                         font-size: 13px;
                                         cursor: pointer;
+
+                                        & + i {
+                                            border-left: 1px solid #ddd;
+                                        }
+
                                         &:hover {
                                             color: #777;
                                         }
-                                        &+i {
-                                            border-left: 1px solid #ddd;
-                                        }
                                     }
                                 }
                             }
-                            > pre {
-                                display: block;
-                                margin: 0;
-                                padding: 0;
-                                line-height: 1.5;
-                                white-space: pre-wrap;
-                                word-wrap: break-word;
-                                word-break: break-word;
-                            }
-                            &:hover {
-                                .dialog-file-menu {
-                                    opacity: 1;
-                                }
-                            }
-                            &.loading {
-                                display: flex;
-                                .common-loading {
-                                    width: 20px;
-                                    height: 20px;
-                                    margin: 4px;
-                                }
-                            }
-                            &.file {
-                                display: inline-block;
-                                .file-box {
-                                    background-color: #ffffff;
-                                    display: flex;
-                                    align-items: center;
-                                    padding: 10px 14px;
-                                    border-radius: 3px;
-                                    width: 220px;
-                                    .file-thumb {
-                                        width: 36px;
-                                    }
-                                    .file-info {
-                                        margin-left: 12px;
-                                        display: flex;
-                                        flex-direction: column;
-                                        justify-content: center;
-                                        .file-name {
-                                            color: #333333;
-                                            font-size: 14px;
-                                            line-height: 18px;
-                                            word-break: break-all;
-                                            text-overflow: ellipsis;
-                                            overflow: hidden;
-                                            display: -webkit-box;
-                                            -webkit-line-clamp: 2;
-                                            -webkit-box-orient: vertical;
-                                        }
-                                        .file-size {
-                                            padding-top: 4px;
-                                            color: #666666;
-                                            font-size: 14px;
-                                        }
-                                    }
-                                }
-                            }
-                            &.img {
-                                padding: 0;
-                                display: flex;
-                                max-width: 220px;
-                                max-height: 220px;
-                                border-radius: 6px;
-                                background-color: transparent;
-                                overflow: hidden;
-                                .file-img {
-                                    display: flex;
-                                    cursor: pointer;
-                                }
-                            }
-                            &.unknown {
-                                text-decoration: underline;
-                            }
                         }
+
                         .dialog-foot {
                             display: flex;
                             align-items: center;
                             padding-top: 4px;
                             height: 21px;
                             line-height: 1;
+
                             .common-loading {
                                 margin: 0 2px;
                                 width: 10px;
                                 height: 10px;
                             }
+
                             .time {
                                 color: #bbbbbb;
                                 font-size: 12px;
                             }
+
                             .done {
                                 display: none;
                                 margin-left: 4px;
@@ -253,6 +302,7 @@
                                 font-size: 12px;
                                 color: $primary-color;
                             }
+
                             .percent {
                                 display: none;
                                 margin-left: 4px;
@@ -260,6 +310,7 @@
                             }
                         }
                     }
+
                     .dialog-action {
                         align-self: flex-start;
                         display: flex;
@@ -271,6 +322,7 @@
                         }
 
                     }
+
                     &.history {
                         cursor: pointer;
                         justify-content: center;
@@ -279,13 +331,16 @@
                         margin: 12px 0;
                         opacity: 0.6;
                         transition: opacity 0.2s;
+
                         &:hover {
                             opacity: 1;
                         }
                     }
+
                     &.history-tip {
                         position: relative;
                         padding-top: 60px;
+
                         .history-text {
                             font-style: normal;
                             position: absolute;
@@ -301,15 +356,18 @@
                             transform: translateX(-50%);
                         }
                     }
+
                     &.loading {
                         padding: 12px 0;
                         justify-content: center;
+
                         .common-loading {
                             margin: 0;
                             width: 18px;
                             height: 18px;
                         }
                     }
+
                     &.nothing {
                         position: absolute;
                         top: 50%;
@@ -317,32 +375,54 @@
                         transform: translate(-50%, -50%);
                         color: #999999;
                     }
+
                     &.bottom {
                         height: 0;
                         margin: 0;
                         padding: 0;
                     }
+
                     &.self {
                         flex-direction: row-reverse;
+
                         .dialog-view {
                             align-items: flex-end;
                             margin: 0 8px 0 0;
-                            .dialog-content {
+
-                                color: #ffffff;
+                            .dialog-head {
-                                background-color: $primary-color;
+                                flex-direction: row-reverse;
-                                border-radius: 6px 6px 0 6px;
+
-                                &.file {
+                                .dialog-content {
-                                    background-color: #F4F5F7;
+                                    background-color: $primary-color;
+                                    border-radius: 6px 6px 0 6px;
+
+                                    .content-text {
+                                        color: #ffffff;
+                                    }
+
+                                    .content-file {
+                                        &.file {
+                                            background-color: #F4F5F7;
+                                        }
+
+                                        &.img {
+                                            border-radius: 6px;
+                                            background-color: transparent;
+                                        }
+                                    }
                                 }
-                                &.img {
+
-                                    border-radius: 6px;
+                                .dialog-menu {
-                                    background-color: transparent;
+                                    margin-left: 0;
+                                    margin-right: 6px;
                                 }
                             }
+
                             .dialog-foot {
                                 .done {
                                     display: inline-block;
                                 }
+
                                 .percent {
                                     display: inline-block;
                                 }
@@ -353,6 +433,7 @@
             }
         }
     }
+
     .dialog-footer {
         display: flex;
         flex-direction: column;
@@ -360,6 +441,7 @@
         padding: 0 28px;
         margin-bottom: 20px;
         position: relative;
+
         .dialog-newmsg {
             display: none;
             height: 30px;
@@ -374,19 +456,23 @@
             cursor: pointer;
             z-index: 2;;
         }
+
         .dialog-input {
             background-color: #F4F5F7;
             padding: 10px 52px 10px 12px;
             border-radius: 10px;
+
             .ivu-input {
                 border: 0;
                 resize: none;
                 background-color: transparent;
+
                 &:focus {
                     box-shadow: none;
                 }
             }
         }
+
         .dialog-send {
             position: absolute;
             top: 0;
@@ -398,19 +484,23 @@
             align-items: center;
             justify-content: center;
         }
+
         .chat-upload {
             display: none;
             width: 0;
             height: 0;
             overflow: hidden;
         }
+
         &.newmsg {
             margin-top: -50px;
+
             .dialog-newmsg {
                 display: block;
             }
         }
     }
+
     .drag-over {
         position: absolute;
         top: 0;
@@ -422,6 +512,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         &:before {
             content: "";
             position: absolute;
@@ -432,6 +523,7 @@
             border: 2px dashed #7b7b7b;
             border-radius: 12px;
         }
+
         .drag-text {
             padding: 12px;
             font-size: 18px;
@@ -439,23 +531,29 @@
         }
     }
 }
+
 .dialog-wrapper-read-poptip-content {
     display: flex;
     position: relative;
+
     .read,
     .unread {
         flex: 1;
         max-height: 300px;
         overflow: auto;
+
         > li {
             list-style: none;
             margin-bottom: 12px;
+
             .common-avatar {
                 width: 100%;
             }
+
             &:last-child {
                 margin-bottom: 6px;
             }
+
             &.read-title {
                 > em {
                     font-size: 18px;
@@ -466,11 +564,13 @@
             }
         }
     }
+
     .unread {
         > li {
             padding-left: 16px;
         }
     }
+
     &:before {
         content: "";
         position: absolute;
@@ -484,10 +584,12 @@
 
 .dialog-wrapper-paste {
     margin-top: -4px;
+
     img {
         max-width: 100%;
         max-height: 1000px;
     }
+
     > div,
     > img {
         display: flex;
@@ -502,6 +604,7 @@
         .dialog-footer {
             padding: 0 20px;
             margin-bottom: 16px;
+
             .dialog-send {
                 right: 20px;
             }

resources/assets/sass/pages/components/task-detail.scss

@@ -6,7 +6,7 @@
     min-height: 120px;
     overflow: auto;
     .task-info {
-        flex: 1;
+        flex: 3;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -459,6 +459,7 @@
         }
     }
     .task-dialog {
+        flex: 2;
         flex-shrink: 0;
         display: flex;
         flex-direction: column;