feat:修复聊天功能部分bug - 修复页面滚动问题

- 优化输入框样式
- 改进UI细节

CHANGELOG.md

@@ -1,5 +1,28 @@
 # 更新日志
 
+## [0.0.5] - 2024-03-xx
+
+### 优化
+
+- 改进页面布局处理
+  - 修复页面初始加载时无法滚动的问题
+  - 优化侧边栏显示效果
+  - 改进页面宽度计算方式
+- 优化输入框样式
+  - 固定输入框高度范围
+  - 添加滚动条支持
+  - 改进样式一致性
+- 完善 UI 细节
+  - 优化侧边栏阴影效果
+  - 移除多余边框
+  - 提升视觉体验
+
+### 修复
+
+- 修复某些网页无法滚动的问题
+- 修复输入框高度不稳定的问题
+- 修复页面宽度计算错误的问题
+
 ## [0.0.4] - 2024-03-xx
 
 ### 新增

css/chat.css

@@ -53,19 +53,24 @@
 }
 
 .chat-input-container {
-  padding: 16px;
-  background: #fff;
-  border-top: 1px solid #f0f0f0;
+  position: sticky !important; /* 确保固定在底部 */
+  bottom: 0 !important;
+  padding: 16px !important;
+  background: #fff !important;
+  border-top: 1px solid #f0f0f0 !important;
+  z-index: 1 !important; /* 确保在消息上方 */
 }
 
 .input-wrapper {
-  position: relative;
-  display: flex;
-  gap: 8px;
-  background: #f0f4f8; /* 与AI消息框背景色保持一致 */
-  border-radius: 8px;
-  padding: 8px 12px;
-  transition: all 0.2s ease;
+  position: relative !important;
+  display: flex !important;
+  gap: 8px !important;
+  background: #f0f4f8 !important;
+  border-radius: 8px !important;
+  padding: 8px 12px !important;
+  transition: all 0.2s ease !important;
+  min-height: 40px !important; /* 设置最小高度 */
+  max-height: 120px !important; /* 设置最大高度 */
 }
 
 .input-wrapper:focus-within {
@@ -73,16 +78,32 @@
 }
 
 #chat-input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  resize: none;
-  padding: 8px;
-  font-size: 14px;
-  line-height: 1.5;
-  max-height: 120px;
-  outline: none;
-  color: #333;
+  flex: 1 !important;
+  border: none !important;
+  background: transparent !important;
+  resize: none !important;
+  padding: 8px !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  min-height: 24px !important; /* 设置最小高度 */
+  max-height: 100px !important; /* 设置最大高度 */
+  outline: none !important;
+  color: #333 !important;
+  overflow-y: auto !important; /* 允许内容超出时滚动 */
+}
+
+/* 确保输入框placeholder样式一致 */
+#chat-input::placeholder {
+  opacity: 1 !important;
+  color: #999 !important;
+  line-height: 24px !important;
+}
+
+/* 输入框禁用状态样式 */
+#chat-input:disabled {
+  cursor: not-allowed !important;
+  color: #999 !important;
+  background: #f5f5f5 !important;
 }
 
 .input-buttons {
@@ -552,12 +573,6 @@
   color: rgba(207, 19, 34, 0.6);
 }
 
-/* 输入框禁用状态样式 */
-#chat-input:disabled {
-  cursor: not-allowed;
-  color: #999;
-}
-
 .input-wrapper.generating {
   background: #f5f5f5;
 }

css/content.css

@@ -1,4 +1,13 @@
-/* 创建一个包装器来控制主页面内容 */
+/* 重置页面布局 - 移除全局overflow限制 */
+html,
+body {
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* 主内容区域 */
 #paiwise-main-wrapper {
   position: fixed !important;
   top: 0 !important;
@@ -7,67 +16,32 @@
   height: 100vh !important;
   overflow-y: auto !important;
   overflow-x: hidden !important;
-  transition: width 0.3s ease-in-out !important;
-}
-
-/* 当侧边栏打开时的主内容样式 */
-#paiwise-main-wrapper.sidebar-open {
-  width: 75% !important;
+  transition: all 0.3s ease-in-out !important;
 }
 
+/* 侧边栏 */
 #paiwise-sidebar {
   position: fixed !important;
   top: 0 !important;
-  right: -25% !important; /* 初始位置在屏幕外 */
-  width: 25% !important;
+  right: -400px !important;
+  width: 400px !important;
   height: 100vh !important;
-  z-index: 2147483647 !important;
-  border: none !important;
   background: #fff !important;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1) !important;
-  transition: right 0.3s ease-in-out !important;
-  opacity: 0;
-  transform: translateX(20px);
+  border: none !important;
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08) !important;
+  z-index: 2147483647 !important;
+  transition: transform 0.3s ease-in-out !important;
 }
 
-/* 当侧边栏显示时的样式 */
+/* 侧边栏显示状态 */
 #paiwise-sidebar.show {
-  right: 0 !important;
-  opacity: 1;
-  transform: translateX(0);
-}
-
-/* 隐藏原始滚动条 */
-body::-webkit-scrollbar {
-  display: none !important;
-}
-
-body {
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  height: 100vh !important;
+  transform: translateX(-400px) !important;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12) !important;
 }
 
-/* 添加动画关键帧 */
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+/* 主内容区域在侧边栏显示时的状态 */
+body.sidebar-open #paiwise-main-wrapper {
+  width: calc(100% - 400px) !important; /* 自动计算宽度 */
 }
 
-@keyframes slideOut {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-}
+/* 移除所有动画关键帧，使用transform实现动画 */

js/content.js

@@ -144,9 +144,15 @@ class SidebarManager {
     const wrapper = document.createElement("div");
     wrapper.id = this.wrapperId;
 
-    // 添加初始样式
-    wrapper.style.width = "100%";
-
+    // 保存body的原始样式
+    this.originalBodyStyle = {
+      width: document.body.style.width,
+      margin: document.body.style.margin,
+      position: document.body.style.position,
+      overflow: document.body.style.overflow,
+    };
+
+    // 包装内容
     while (document.body.firstChild) {
       if (document.body.firstChild.id !== this.sidebarId) {
         wrapper.appendChild(document.body.firstChild);
@@ -165,6 +171,11 @@ class SidebarManager {
     const wrapper = document.getElementById(this.wrapperId);
     if (!wrapper) return;
 
+    // 恢复body的原始样式
+    if (this.originalBodyStyle) {
+      Object.assign(document.body.style, this.originalBodyStyle);
+    }
+
     while (wrapper.firstChild) {
       document.body.insertBefore(wrapper.firstChild, wrapper);
     }
@@ -188,15 +199,8 @@ class SidebarManager {
 
       // 使用 RAF 确保 DOM 更新后再添加动画类
       requestAnimationFrame(() => {
-        const wrapper = document.getElementById(this.wrapperId);
-        const sidebar = document.getElementById(this.sidebarId);
-
-        // 先触发重排
-        sidebar.getBoundingClientRect();
-
-        // 添加动画类
-        if (wrapper) wrapper.classList.add("sidebar-open");
-        if (sidebar) sidebar.classList.add("show");
+        document.body.classList.add("sidebar-open");
+        iframe.classList.add("show");
       });
 
       this.isOpen = true;
@@ -215,11 +219,9 @@ class SidebarManager {
 
     try {
       const sidebar = document.getElementById(this.sidebarId);
-      const wrapper = document.getElementById(this.wrapperId);
 
-      if (sidebar && wrapper) {
-        // 移除动画类
-        wrapper.classList.remove("sidebar-open");
+      if (sidebar) {
+        document.body.classList.remove("sidebar-open");
         sidebar.classList.remove("show");
 
         // 等待动画完成后再移除元素

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "派维斯智能体助手",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "一个辅助用户处理业务流程的智能体助手",
   "author": "Paiwise Team",
   "permissions": [