[代码优化]AI: 写作更改样式

src/views/ai/writer/index/components/Left.vue

@@ -24,10 +24,11 @@
     </h3>
   </DefineLabel>
 
-  <div class="relative" v-bind="$attrs">
+  <div class="flex flex-col" v-bind="$attrs">
     <!-- tab -->
+    <div class="w-full pt-2 bg-[#f5f7f9] flex justify-center">
       <div
-      class="absolute left-1/2 top-2 -translate-x-1/2 w-[303px] rounded-full bg-[#DDDFE3] p-1 z-10"
+        class="w-[303px] rounded-full bg-[#DDDFE3] p-1 z-10"
       >
         <div
           class="flex items-center relative after:content-[''] after:block after:bg-white after:h-[30px] after:w-1/2 after:absolute after:top-0 after:left-0 after:transition-transform after:rounded-full"
@@ -42,8 +43,9 @@
           />
         </div>
       </div>
+    </div>
     <div
-      class="px-7 pb-2 pt-[46px] overflow-y-auto lg:block w-[380px] box-border bg-[#ECEDEF] h-full"
+      class="px-7 pb-2 flex-grow overflow-y-auto lg:block w-[380px] box-border bg-[#f5f7f9] h-full"
     >
       <div>
         <template v-if="selectedTab === 1">

src/views/ai/writer/index/components/Right.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="h-full box-border flex flex-col px-7">
+  <el-card class="my-card h-full">
-    <h3 class="m-0 h-14 -mx-7 px-7 shrink-0 flex items-center justify-between bg-[#ecedef]">
+    <template #header
+      ><h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
         <span>预览</span>
         <!-- 展示在右上角 -->
         <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
@@ -9,9 +10,10 @@
           </template>
           复制
         </el-button>
-    </h3>
+      </h3></template
+    >
 
-    <div ref="contentRef" class="hide-scroll-bar flex-grow box-border overflow-y-auto">
+    <div ref="contentRef" class="hide-scroll-bar h-full box-border overflow-y-auto">
       <div class="w-full min-h-full relative flex-grow bg-white box-border p-3 sm:p-7">
         <!-- 终止生成内容的按钮 -->
         <el-button
@@ -36,7 +38,7 @@
         />
       </div>
     </div>
-  </div>
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -102,4 +104,17 @@ watch(copied, (val) => {
     height: 0;
   }
 }
+
+.my-card{
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0;
+    @extend .hide-scroll-bar;
+  }
+}
 </style>

src/views/ai/writer/index/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- TODO @hhhero：整体没啥问题了。感觉整体框框的样子可以优化下，可以参考下绘图界面。例如说：1）写作的“预览”和绘图的“绘图任务”的 header；2）左右的边界，有个竖线之类的。 -->
+  <div class="absolute top-0 left-0 right-0 bottom-0 flex">
-  <div class="h-[calc(100vh-var(--top-tool-height)-var(--app-footer-height)-40px)] -m-5 flex">
     <Left
       :is-writing="isWriting"
       class="h-full"