style: 功能用例详情和缺陷详情抽屉高度问题

--bug=1039553 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001039553

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>

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -93,19 +93,18 @@
     <template #default="{ loading }">
       <div
         ref="wrapperRef"
-        class="wrapperRef bg-white"
+        :class="[
-        :style="{
+          `${
-          height: 'calc(100% - 86px)',
+            activeTab === 'comment' && hasAnyPermission(['PROJECT_BUG:READ+COMMENT']) && !commentInputIsActive
-        }"
+              ? 'h-[calc(100%-72px)]'
+              : commentInputIsActive
+              ? 'h-[calc(100%-286px)]'
+              : 'h-full'
+          }`,
+          'bg-white',
+        ]"
       >
-        <MsSplitBox
+        <MsSplitBox expand-direction="right" :max="0.7" :min="0.7" :size="900" direction="horizontal">
-          expand-direction="right"
-          :max="0.7"
-          :min="0.7"
-          :size="900"
-          direction="horizontal"
-          :class="{ 'left-bug-detail': activeTab === 'comment' }"
-        >
           <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();

frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue

@@ -90,10 +90,7 @@
     <template #default="{ loading }">
       <div
         ref="wrapperRef"
-        class="wrapperRef bg-white"
+        :class="[`${!commentInputIsActive ? 'h-[calc(100%-72px)]' : 'h-[calc(100%-286px)]'}`, 'bg-white']"
-        :style="{
-          height: 'calc(100% - 86px)',
-        }"
       >
         <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;
   // });