From 846d1face46bb2aa3e5145246d7492de9ce1fbb8 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Thu, 18 Apr 2024 19:22:19 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=8A=9F=E8=83=BD=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=92=8C=E7=BC=BA=E9=99=B7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89=E9=AB=98=E5=BA=A6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1039553 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001039553
---
 .../components/business/ms-comment/input.vue  |  6 +++-
 .../components/bug-detail-drawer.vue          | 30 +++++++++----------
 .../components/caseDetailDrawer.vue           |  9 +++---
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/business/ms-comment/input.vue b/frontend/src/components/business/ms-comment/input.vue
index 236c58df38..95d374e17c 100644
--- a/frontend/src/components/business/ms-comment/input.vue
+++ b/frontend/src/components/business/ms-comment/input.vue
@@ -87,12 +87,16 @@
   onBeforeUnmount(() => {
     window.removeEventListener('keydown', handleGlobalKeyDown);
   });
+
+  defineExpose({
+    isActive,
+  });
 </script>
 
 <style scoped lang="less">
   .commentWrapper {
-    box-shadow: 1px -1px 4px rgba(2 2 2 / 10%);
     z-index: 101;
+    box-shadow: 1px -1px 4px rgba(2 2 2 / 10%);
     @apply absolute bottom-0 w-full bg-white px-4 py-4;
   }
 </style>
diff --git a/frontend/src/views/bug-management/components/bug-detail-drawer.vue b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
index 7a4584335e..5c9f6e3587 100644
--- a/frontend/src/views/bug-management/components/bug-detail-drawer.vue
+++ b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
@@ -93,19 +93,18 @@
     <template #default="{ loading }">
       <div
         ref="wrapperRef"
-        class="wrapperRef bg-white"
-        :style="{
-          height: 'calc(100% - 86px)',
-        }"
+        :class="[
+          `${
+            activeTab === 'comment' && hasAnyPermission(['PROJECT_BUG:READ+COMMENT']) && !commentInputIsActive
+              ? 'h-[calc(100%-72px)]'
+              : commentInputIsActive
+              ? 'h-[calc(100%-286px)]'
+              : 'h-full'
+          }`,
+          'bg-white',
+        ]"
       >
-        <MsSplitBox
-          expand-direction="right"
-          :max="0.7"
-          :min="0.7"
-          :size="900"
-          direction="horizontal"
-          :class="{ 'left-bug-detail': activeTab === 'comment' }"
-        >
+        <MsSplitBox expand-direction="right" :max="0.7" :min="0.7" :size="900" direction="horizontal">
           <template #first>
             <div class="leftWrapper h-full">
               <a-spin :loading="detailLoading" class="w-full">
@@ -208,6 +207,7 @@
       </div>
       <CommentInput
         v-if="activeTab === 'comment' && hasAnyPermission(['PROJECT_BUG:READ+COMMENT'])"
+        ref="commentInputRef"
         v-model:notice-user-ids="noticeUserIds"
         :content="commentContent"
         is-show-avatar
@@ -301,6 +301,9 @@
   const detailLoading = ref(false);
   const activeTab = ref<string>('detail');
 
+  const commentInputRef = ref<InstanceType<typeof CommentInput>>();
+  const commentInputIsActive = computed(() => commentInputRef.value?.isActive);
+
   const detailInfo = ref<Record<string, any>>({ match: [] }); // 存储当前详情信息，通过loadBug 获取
   const tags = ref([]);
   const platformSystemFields = ref<BugEditCustomField[]>([]); // 平台系统字段
@@ -779,9 +782,6 @@
   :deep(.tags-class .arco-form-item-label-col) {
     justify-content: flex-start !important;
   }
-  .left-bug-detail {
-    height: 88%;
-  }
   .tab-pane-container {
     @apply flex-1 overflow-y-auto px-4;
     .ms-scroll-bar();
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
index a4277771a1..548225c8eb 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
@@ -90,10 +90,7 @@
     <template #default="{ loading }">
       <div
         ref="wrapperRef"
-        class="wrapperRef bg-white"
-        :style="{
-          height: 'calc(100% - 86px)',
-        }"
+        :class="[`${!commentInputIsActive ? 'h-[calc(100%-72px)]' : 'h-[calc(100%-286px)]'}`, 'bg-white']"
       >
         <MsSplitBox :size="900" :max="0.7" :min="0.5" direction="horizontal" expand-direction="right">
           <template #first>
@@ -238,6 +235,7 @@
           </template>
         </MsSplitBox>
         <inputComment
+          ref="commentInputRef"
           v-model:content="content"
           v-model:notice-user-ids="noticeUserIds"
           v-permission="['FUNCTIONAL_CASE:READ+COMMENT']"
@@ -340,6 +338,9 @@
     showSettingDrawer.value = true;
   }
 
+  const commentInputRef = ref<InstanceType<typeof inputComment>>();
+  const commentInputIsActive = computed(() => commentInputRef.value?.isActive);
+
   // const tabSettingList = computed(() => {
   //   return featureCaseStore.tabSettingList;
   // });