From 6dc5ae1ae4f353427047dc20aa31313bc70f8942 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sat, 12 Apr 2025 13:15:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E4=BB=BB=E5=8A=A1=E7=AA=97=E5=8F=A3=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/TaskDetail.vue | 11 +++-
 .../js/pages/manage/components/TaskModal.vue  | 16 +-----
 .../sass/pages/components/task-detail.scss    | 54 ++++++++++++++++++-
 3 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index c03a450c7..3bcf29d7c 100755
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -56,7 +56,8 @@
     <!--主任务-->
     <div
         v-else-if="ready"
-        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}"
+        class="task-detail"
+        :class="taskDetailClass"
         :style="taskDetailStyle">
         <div v-show="taskDetail.id > 0" class="task-info">
             <div class="head">
@@ -832,6 +833,14 @@ export default {
             }
         },
 
+        taskDetailClass() {
+            const {taskDetail, hasOpenDialog} = this;
+            return {
+                'open-dialog': hasOpenDialog,
+                'completed': taskDetail.complete_at
+            }
+        },
+
         taskDetailStyle() {
             const {modalMode, windowHeight, hasOpenDialog} = this;
             const height = Math.min(1100, windowHeight)
diff --git a/resources/assets/js/pages/manage/components/TaskModal.vue b/resources/assets/js/pages/manage/components/TaskModal.vue
index ae0b1070a..a585c5875 100644
--- a/resources/assets/js/pages/manage/components/TaskModal.vue
+++ b/resources/assets/js/pages/manage/components/TaskModal.vue
@@ -5,25 +5,13 @@
         :styles="styles"
         :mask-closable="false"
         :footer-hide="true"
+        :fullscreen="windowPortrait"
         :beforeClose="onBeforeClose"
-        class-name="task-modal">
+        class-name="common-task-modal">
         <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData" modalMode/>
     </Modal>
 </template>
 
-<style lang="scss">
-body {
-    .ivu-modal-wrap {
-        &.task-modal {
-            display: flex;
-            flex-direction: column;
-            .ivu-modal-close {
-                z-index: 2;
-            }
-        }
-    }
-}
-</style>
 <script>
 import {mapGetters, mapState} from "vuex";
 import TaskDetail from "./TaskDetail";
diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss
index d87d4dd5a..5027376aa 100644
--- a/resources/assets/sass/pages/components/task-detail.scss
+++ b/resources/assets/sass/pages/components/task-detail.scss
@@ -1,3 +1,55 @@
+.common-task-modal {
+    display: flex;
+    flex-direction: column;
+
+    .ivu-modal {
+        .ivu-modal-content {
+            .ivu-modal-close {
+                z-index: 2;
+            }
+        }
+
+        &.ivu-modal-fullscreen {
+            .ivu-modal-content {
+                margin-top: calc(var(--status-bar-height) + 46px);
+                margin-bottom: 0;
+                border-top-left-radius: 18px !important;
+                border-top-right-radius: 18px !important;
+                overflow: hidden;
+
+                .ivu-modal-body {
+                    padding: 0;
+
+                    .task-detail {
+                        position: absolute;
+                        inset: 0;
+                        margin: 0;
+                        padding: 0 20px 0 15px;
+                        overflow: auto;
+                        -webkit-overflow-scrolling: touch;
+
+                        .task-info {
+                            .head {
+                                position: sticky;
+                                top: 0;
+                                z-index: 1;
+                                background-color: #fff;
+                                padding-top: 14px;
+                                padding-right: 4px;
+                                height: 58px;
+                            }
+                        }
+
+                        .task-dialog {
+                            padding-bottom: calc(var(--navigation-bar-height) + 20px);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .task-detail {
     display: flex;
     flex-direction: column;
@@ -594,7 +646,7 @@
             display: flex;
             align-items: center;
             height: 42px;
-            margin-left: 5px;
+            margin: 0 5px;
             padding-bottom: 10px;
             color: #888888;
             position: relative;