diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index f0749d165..8f466893c 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -308,22 +308,10 @@
         </Modal>
 
         <!--任务详情-->
-        <Modal
-            :value="taskId > 0"
-            :styles="{
-                width: '90%',
-                maxWidth: taskData.dialog_id ? '1200px' : '700px'
-            }"
-            :mask-closable="false"
-            :footer-hide="true"
-            @on-visible-change="taskVisibleChange">
-            <div class="page-manage-task-modal">
-                <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData" modalMode/>
-            </div>
-        </Modal>
+        <TaskModal ref="taskModal"/>
 
         <!--聊天窗口（移动端）-->
-        <DialogModal/>
+        <DialogModal ref="dialogModal"/>
 
         <!--工作报告-->
         <DrawerOverlay
@@ -371,38 +359,34 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import TaskDetail from "./manage/components/TaskDetail";
 import ProjectArchived from "./manage/components/ProjectArchived";
 import TeamManagement from "./manage/components/TeamManagement";
 import ProjectManagement from "./manage/components/ProjectManagement";
 import DrawerOverlay from "../components/DrawerOverlay";
-import DragBallComponent from "../components/DragBallComponent";
 import MobileTabbar from "../components/Mobile/Tabbar";
 import UserInput from "../components/UserInput";
 import TaskAdd from "./manage/components/TaskAdd";
 import Report from "./manage/components/Report";
-import notificationKoro from "notification-koro1";
-import {Store} from "le5le-store";
 import MobileBack from "../components/Mobile/Back";
-import TaskMenu from "./manage/components/TaskMenu";
 import MobileNotification from "../components/Mobile/Notification";
 import MeetingManager from "./manage/components/MeetingManager";
 import longpress from "../directives/longpress";
 import DialogModal from "./manage/components/DialogModal";
+import TaskModal from "./manage/components/TaskModal";
+import notificationKoro from "notification-koro1";
+import {Store} from "le5le-store";
 
 export default {
     components: {
+        TaskModal,
         DialogModal,
         MeetingManager,
         MobileNotification,
-        TaskMenu,
         MobileBack,
         MobileTabbar,
         UserInput,
         TaskAdd,
-        TaskDetail,
         Report,
-        DragBallComponent,
         DrawerOverlay,
         ProjectManagement,
         TeamManagement,
@@ -504,7 +488,6 @@ export default {
             'cacheDialogs',
             'cacheProjects',
             'projectTotal',
-            'taskId',
             'wsOpenNum',
             'columnTemplate',
 
@@ -519,7 +502,7 @@ export default {
             'dialogIns',
         ]),
 
-        ...mapGetters(['taskData', 'dashboardTask']),
+        ...mapGetters(['dashboardTask']),
 
         routeName() {
             return this.$route.name
@@ -897,9 +880,8 @@ export default {
                 } else if (e.keyCode === 75 || e.keyCode === 78) {
                     e.preventDefault();
                     this.onAddMenu('task')
-                } else if (e.keyCode === 83 && this.taskId > 0) {
+                } else if (e.keyCode === 83 && this.$refs.taskModal.checkUpdate()) {
                     e.preventDefault();
-                    this.$refs.taskDetail.checkUpdate(true)
                 }
             }
         },
@@ -975,12 +957,6 @@ export default {
             }
         },
 
-        taskVisibleChange(visible) {
-            if (!visible) {
-                this.openTask(0)
-            }
-        },
-
         getReportUnread(timeout) {
             this.reportUnreadTimeout && clearTimeout(this.reportUnreadTimeout)
             this.reportUnreadTimeout = setTimeout(() => {
diff --git a/resources/assets/js/pages/manage/components/DialogModal.vue b/resources/assets/js/pages/manage/components/DialogModal.vue
index 7c94f82f9..a757a7ed6 100644
--- a/resources/assets/js/pages/manage/components/DialogModal.vue
+++ b/resources/assets/js/pages/manage/components/DialogModal.vue
@@ -1,6 +1,6 @@
 <template>
     <Modal
-        v-model="show"
+        :value="show"
         :mask="false"
         :mask-closable="false"
         :footer-hide="true"
@@ -40,40 +40,27 @@ body {
     }
 }
 </style>
-<script>
 
+<script>
 import {mapState} from "vuex";
 import DialogWrapper from "./DialogWrapper";
 
 export default {
     name: "DialogModal",
     components: {DialogWrapper},
-    data() {
-        return {
-            show: false
-        }
-    },
 
     computed: {
-        ...mapState(['dialogId'])
-    },
+        ...mapState(['dialogId']),
 
-    watch: {
-        dialogId: {
-            handler(id) {
-                this.show = id > 0 && this.windowSmall;
-            },
-            immediate: true
-        },
-        windowSmall(small) {
-            this.show = this.dialogId > 0 && small;
+        show() {
+            return this.dialogId > 0 && this.windowSmall
         }
     },
 
     methods: {
         onBeforeClose() {
             return new Promise(_ => {
-                this.$store.state.dialogId = 0;
+                this.$store.dispatch("openDialog", 0)
             })
         },
     }
diff --git a/resources/assets/js/pages/manage/components/TaskModal.vue b/resources/assets/js/pages/manage/components/TaskModal.vue
new file mode 100644
index 000000000..c3d65079e
--- /dev/null
+++ b/resources/assets/js/pages/manage/components/TaskModal.vue
@@ -0,0 +1,52 @@
+<template>
+    <Modal
+        :value="show"
+        :styles="styles"
+        :mask-closable="false"
+        :footer-hide="true"
+        :beforeClose="onBeforeClose">
+        <div class="page-manage-task-modal">
+            <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData" modalMode/>
+        </div>
+    </Modal>
+</template>
+
+<script>
+import {mapGetters, mapState} from "vuex";
+import TaskDetail from "./TaskDetail";
+
+export default {
+    name: "TaskModal",
+    components: {TaskDetail},
+
+    computed: {
+        ...mapState(['taskId']),
+        ...mapGetters(['taskData']),
+
+        show() {
+            return this.taskId > 0
+        },
+
+        styles() {
+            return {
+                width: '90%',
+                maxWidth: this.taskData.dialog_id ? '1200px' : '700px'
+            }
+        }
+    },
+
+    methods: {
+        onBeforeClose() {
+            return new Promise(_ => {
+                this.$store.dispatch("openTask", 0)
+            })
+        },
+        checkUpdate() {
+            if (this.show) {
+                this.$refs.taskDetail.checkUpdate(true);
+                return true;
+            }
+        }
+    }
+}
+</script>