Преглед изворни кода

修改 DeepSeekChat 组件对话框的样式:将按钮放入对话框内部

Ryuiso пре 3 месеци
родитељ
комит
27f9c63e61
2 измењених фајлова са 842 додато и 717 уклоњено
  1. 714 706
      app/components/DeepSeekChat.tsx
  2. 128 11
      app/components/chat.module.scss

Разлика између датотеке није приказан због своје велике величине
+ 714 - 706
app/components/DeepSeekChat.tsx


+ 128 - 11
app/components/chat.module.scss

@@ -510,19 +510,20 @@
 .chat-input-panel {
   position: relative;
   width: 100%;
-  padding: 20px;
-  padding-top: 10px;
+  padding: 16px;
+  padding-top: 16px;
   box-sizing: border-box;
   flex-direction: column;
+  background: transparent;
   // box-shadow: var(--card-shadow);
+  // 下方线条
+  border-top: 1px solid #dedede;
+  // border-top: none;
 
   // 背景
   // background: rgba(155, 155, 255, 0.2);
   // 背景模糊程度
-  backdrop-filter: blur(2px);
-  // 下方线条
-  // border-top: 1px solid rgba(55, 155, 255, 0.5);
-  border-top: 1px solid #dedede;
+  // backdrop-filter: blur(2px);
 
   .chat-input-actions {
     .chat-input-action {
@@ -588,9 +589,15 @@
 .chat-input-panel-inner {
   cursor: text;
   display: flex;
+  flex-direction: column; // 垂直布局
   flex: 1;
-  border-radius: 10px;
+  border-radius: 16px;
   border: var(--border-in-light);
+  position: relative;
+  // min-height: 100px;
+  max-height: 120px;
+  overflow-y: auto;
+  overflow: hidden;
 }
 
 .chat-input-panel-inner-attach {
@@ -606,20 +613,24 @@
 }
 
 .chat-input {
+  flex: 1;
   height: 100%;
   width: 100%;
-  border-radius: 10px;
+  // border-radius: 16px;
   border: none;
+  background: transparent;
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
   color: var(--black) !important;
   font-family: inherit;
-  padding: 10px 90px 10px 14px;
+  padding: 16px 16px 8px 16px;
   resize: none;
   outline: none;
   box-sizing: border-box;
-  min-height: 68px;
+  min-height: 60px;
+  font-size: 14px;
+  line-height: 1.5;
   // 文字颜色
-  color: #FFFFFF;
+  // color: #FFFFFF;
 }
 
 .chat-input2 {
@@ -638,6 +649,112 @@
   right: 30px;
   bottom: 32px;
 }
+// 新增:输入框内部按钮区域样式
+.chat-input-bottom-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px 16px 16px;
+  flex-shrink: 0;
+  // border-top: 1px solid #f3f4f6;
+  margin-top: auto;
+  
+  .left-options {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .option-item { //  未使用
+      display: flex;
+      height: 28px;
+      border-radius: 16px;
+      font-size: 12px;
+      padding: 0px 12px;
+      justify-content: center;
+      align-items: center;
+      margin-right: 10px;
+      cursor: pointer;
+      background: #f3f4f6;  // 默认状态
+      color: #000000;        // 默认状态
+      // border: 1px solid transparent;  // 默认状态
+      transition: all 0.2s ease;
+      user-select: none;
+      
+      // 激活状态
+      &.active {
+        background: #dee9fc;
+        color: #3875f6;
+        // border: 1px solid #3875f6;
+      }
+      
+      &:hover {
+        background-color: #f9fafb;
+        color: #374151;
+      }
+      
+      // .chevron {
+      //   margin-left: 4px;
+      //   font-size: 10px;
+      //   opacity: 0.6;
+      // }
+    }
+  }
+  
+  .middle-action {
+    .primary-button {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: #dbeafe;
+      color: #1e40af;
+      border: none;
+      border-radius: 8px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: #bfdbfe;
+      }
+      
+      .chevron {
+        font-size: 10px;
+        opacity: 0.7;
+      }
+    }
+  }
+  
+  .right-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .action-icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background-color: #f3f4f6;
+      }
+      
+      &.send-button {
+        background: #6b7280;
+        color: white;
+        
+        &:hover {
+          background: #4b5563;
+        }
+      }
+    }
+  }
+}
 
 @media only screen and (max-width: 600px) {
   .chat-input {

Неке датотеке нису приказане због велике количине промена