From 0ad32ff63d76d2b917b2a2befb71eecd726656e2 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 20 Apr 2022 16:12:19 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/pages/manage.vue           |  4 ++--
 .../js/pages/manage/components/TaskDetail.vue  | 18 +++++++++++++++++-
 resources/assets/js/pages/single/task.vue      |  2 +-
 .../sass/pages/components/dialog-wrapper.scss  |  3 ++-
 .../sass/pages/components/task-detail.scss     | 14 +++-----------
 5 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 3ef9254e9..5b4a1ca56 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -305,8 +305,8 @@
             :mask-closable="false"
             :footer-hide="true"
             @on-visible-change="taskVisibleChange">
-            <div class="page-manage-task-modal" :style="taskStyle">
-                <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData"/>
+            <div class="page-manage-task-modal">
+                <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData" modalMode/>
             </div>
         </Modal>
 
diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index 1c11116e7..18ab31117 100644
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -70,7 +70,8 @@
     <!--主任务-->
     <div
         v-else-if="ready"
-        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}">
+        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}"
+        :style="taskDetailStyle">
         <div v-show="taskDetail.id > 0" class="task-info">
             <div class="head">
                 <TaskMenu
@@ -454,6 +455,11 @@ export default {
             type: Boolean,
             default: true
         },
+        // 是否Modal模式
+        modalMode: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
@@ -625,6 +631,16 @@ export default {
             }
         },
 
+        taskDetailStyle() {
+            const {modalMode, innerHeight, hasOpenDialog} = this;
+            if (modalMode && hasOpenDialog) {
+                return {
+                    maxHeight: (innerHeight - (innerHeight > 900 ? 200 : 70) - 30) + 'px'
+                }
+            }
+            return {}
+        },
+
         cutTime() {
             const {taskDetail} = this;
             let start_at = $A.Date(taskDetail.start_at, true);
diff --git a/resources/assets/js/pages/single/task.vue b/resources/assets/js/pages/single/task.vue
index 2c7fe5757..d94ee04a0 100644
--- a/resources/assets/js/pages/single/task.vue
+++ b/resources/assets/js/pages/single/task.vue
@@ -11,12 +11,12 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: auto;
     .task-detail {
         flex: 1;
         margin: 0;
         padding: 18px 22px;
         border-radius: 0;
+        overflow: auto;
     }
 }
 </style>
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 117ecdca1..d05984528 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -504,6 +504,7 @@
                             .percent {
                                 display: none;
                                 margin-left: 4px;
+                                align-items: center;
                                 cursor: pointer;
                             }
                         }
@@ -628,7 +629,7 @@
                                 }
 
                                 .percent {
-                                    display: inline-block;
+                                    display: flex;
                                 }
                             }
                         }
diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss
index a67608709..05e19a4d1 100644
--- a/resources/assets/sass/pages/components/task-detail.scss
+++ b/resources/assets/sass/pages/components/task-detail.scss
@@ -4,7 +4,6 @@
     margin: 0 -32px 12px -10px;
     padding: 0 22px 12px 0;
     min-height: 120px;
-    overflow: auto;
     .task-info {
         flex: 3;
         display: flex;
@@ -492,6 +491,7 @@
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
+        justify-content: flex-end;
         margin-top: 22px;
         position: relative;
         .head {
@@ -671,16 +671,8 @@
             margin: 0 0 0 18px;
             min-width: 320px;
             max-width: 450px;
-            &:before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                z-index: 1;
-                width: 1px;
-                background-color: #f4f5f5;
-            }
+            border-left: 1px solid #f4f5f5;
+            
             .head {
                 &:before {
                     left: 18px;