Browse Source

style: 修改ai bot聊天弹窗相关样式bug

zhouyuhao 6 months ago
parent
commit
9b84063ef8

+ 13 - 3
src/styles/reset.scss

@@ -155,8 +155,6 @@ div.markdown-body {
 .markdown-body {
   display: inline-block;
   width: 100%;
-  line-height: 1.6;
-  font-size: 16px;
   color: #333;
 }
 
@@ -170,7 +168,6 @@ div.markdown-body {
   font-weight: bold;
 }
 .markdown-body p {
-  font-size: 14px;
   margin: 1em 0;
 }
 
@@ -180,6 +177,16 @@ div.markdown-body {
   padding-left: 1em;
 }
 
+div.markdown-body {
+  li,
+  th,
+  p,
+  td,
+  span {
+    font-size: 14px;
+  }
+}
+
 div.markdown-body ul {
   list-style-type: disc;
   margin-left: 8px;
@@ -194,6 +201,9 @@ div.markdown-body ul {
 
 .markdown-body li {
   margin: 0.5em 0;
+  & > ul {
+    margin-left: 0;
+  }
 }
 
 .markdown-body blockquote {

+ 32 - 18
src/views/AIRobotChat/src/AIRobotChat.vue

@@ -339,21 +339,33 @@ defineExpose({
         <span class="welcome">Hi! I'm your Freight Assistant</span>
         <div class="option-icon">
           <el-tooltip v-if="modalSize === 'large'" trigger="hover" content="Sidebar Window">
-            <span
-              class="font_family icon-icon_sidebar__window_b"
+            <el-button
+              style="width: 24px; height: 24px"
+              class="el-button--text"
               @click="modalSize = 'small'"
-            ></span>
+              ><span class="font_family icon-icon_sidebar__window_b"></span
+            ></el-button>
           </el-tooltip>
 
-          <el-tooltip v-else-if="modalSize !== 'large'" trigger="hover" content="Maximized Window"
-            ><span
-              class="font_family icon-icon_maximized__window_b"
+          <el-tooltip v-else-if="modalSize !== 'large'" trigger="hover" content="Maximized Window">
+            <el-button
+              style="width: 24px; height: 24px"
+              class="el-button--text"
               @click="modalSize = 'large'"
-            ></span>
+              ><span class="font_family icon-icon_maximized__window_b"></span
+            ></el-button>
           </el-tooltip>
 
-          <el-tooltip trigger="hover" content="Collapsed to Widget"
-            ><span @click="handleClose" class="font_family icon-icon_collapsed__to_widget_b"></span>
+          <el-tooltip trigger="hover" content="Collapsed to Widget">
+            <el-button
+              style="width: 24px; height: 24px"
+              class="el-button--text"
+              @click="handleClose"
+              ><span
+                @click="handleClose"
+                class="font_family icon-icon_collapsed__to_widget_b"
+              ></span
+            ></el-button>
           </el-tooltip>
         </div>
       </div>
@@ -483,6 +495,7 @@ defineExpose({
       v-model="liabilityExeDialog"
       title="Disclaimer"
       width="800"
+      top="20vh"
     >
       <p style="line-height: 21px">
         This feature generates automated answers summarised from FT articles. By using it, you are
@@ -541,7 +554,6 @@ defineExpose({
       .option-icon {
         display: flex;
         align-items: center;
-        gap: 6px;
         .font_family {
           font-size: 16px;
           cursor: pointer;
@@ -594,7 +606,7 @@ defineExpose({
     .message-item {
       position: relative;
       display: inline-block;
-      padding: 11px 8px;
+      padding: 11px 16px;
       margin-bottom: 7px;
       border-radius: 12px;
       background-color: var(--scoring-bg-color);
@@ -772,14 +784,16 @@ defineExpose({
   .liability-exemption {
     margin-top: 8px;
     font-size: 12px;
-    color: var(--color-neutral-3);
     text-align: center;
-  }
-  .liability-exemption-btn {
-    margin-left: 2px;
-    text-decoration: underline;
-    color: var(--color-theme);
-    cursor: pointer;
+    span {
+      color: var(--color-neutral-3);
+    }
+    .liability-exemption-btn {
+      margin-left: 2px;
+      text-decoration: underline;
+      color: var(--color-theme);
+      cursor: pointer;
+    }
   }
 
   @keyframes loading-rotate {

+ 18 - 3
src/views/AIRobotChat/src/components/AutoResizeTextarea.vue

@@ -11,14 +11,15 @@ watch(
   }
 )
 const textareaRef = ref(null)
+const isComposing = ref(false)
+
 // 实现自适应高度(最多 4 行)
 const resize = () => {
   const el = textareaRef.value
   if (!el) return
-
   el.style.height = 'auto' // 先清空旧高度
   const scrollHeight = el.scrollHeight
-
+  console.log('scrollHeight:', scrollHeight)
   const maxHeight = 92 // 四行时高度
 
   if (scrollHeight <= maxHeight) {
@@ -28,7 +29,19 @@ const resize = () => {
     el.style.overflowY = 'auto'
     el.style.height = maxHeight + 'px'
   }
+  console.log('New height:', el.style.height)
+}
+
+// 处理中文输入法
+const handleCompositionStart = () => {
+  isComposing.value = true
+}
+
+const handleCompositionEnd = () => {
+  isComposing.value = false
+  nextTick(resize)
 }
+
 const emit = defineEmits(['focus', 'blur'])
 </script>
 
@@ -39,7 +52,9 @@ const emit = defineEmits(['focus', 'blur'])
     class="input-area"
     rows="1"
     :placeholder="props.placeholder"
-    @input="resize"
+    @input="!isComposing && resize()"
+    @compositionstart="handleCompositionStart"
+    @compositionend="handleCompositionEnd"
     @focus="emit('focus')"
     @blur="emit('blur')"
   />