feat 在线客服

src/views/service/cpns/ChatInput.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { AppButton } from '@/components'
+import { ElButton, ElMessage } from 'element-plus'
 
 const MAX_FILE_SIZE = 1024 * 1024 * 1024
 
 const content = ref('')
-const fileInputRef = ref<HTMLInputElement | null>(null)
 
 const emit = defineEmits<{
   send: [content: string]
@@ -28,10 +26,6 @@ function onKeydown(event: KeyboardEvent): void {
   }
 }
 
-function openFilePicker(): void {
-  fileInputRef.value?.click()
-}
-
 function onFileChange(event: Event): void {
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
@@ -56,28 +50,21 @@ function onFileChange(event: Event): void {
       @keydown="onKeydown"
     />
     <div class="chat-input__bar">
-      <span class="chat-input__hint text-secondary">
-        按Enter发送 | 支持拖拽上传文件
+      <span class="chat-input__hint">
+        按 Enter 发送 | 支持拖拽上传文件
       </span>
       <div class="chat-input__actions">
-        <button
-          type="button"
-          class="chat-input__attach"
-          aria-label="上传附件"
-          title="上传附件"
-          @click="openFilePicker"
-        >
-          📎
-        </button>
         <input
-          ref="fileInputRef"
           type="file"
           class="chat-input__file"
           @change="onFileChange"
         >
-        <AppButton type="primary" @click="doSend">
+        <el-button
+          class="chat-input__send"
+          @click="doSend"
+        >
           发送
-        </AppButton>
+        </el-button>
       </div>
     </div>
   </div>
@@ -86,20 +73,21 @@ function onFileChange(event: Event): void {
 <style lang="less" scoped>
 .chat-input {
   .flex(column, flex-start, stretch);
-  gap: 16px;
-  padding: 12px 16px 24px;
-  border-top: 1px solid @project-divider;
+  gap: 0;
+  padding: 16px 22px 20px;
+  border-top: 1px solid @service-card-line;
   background: @white;
+  box-sizing: border-box;
 
   &__textarea {
     width: 100%;
-    height: 57px;
-    padding: 11px 10px;
+    height: 72px;
+    padding: 12px 14px;
     border: none;
-    border-radius: 6px;
-    background: @finance-row-bg;
-    color: @heading-color;
-    font-size: 11px;
+    border-radius: @radius-sm;
+    background: @service-input-bg;
+    color: @service-bubble-text;
+    font-size: 13px;
     line-height: 1.6;
     resize: none;
     outline: none;
@@ -108,24 +96,27 @@ function onFileChange(event: Event): void {
 
     &:focus {
       border: none;
-      background: @finance-row-bg;
+      background: @service-input-bg;
     }
 
     &::placeholder {
-      color: @heading-color;
+      color: @project-muted;
     }
   }
 
   &__bar {
-    .flex(row, space-between);
+    .flex(row, space-between, center);
     gap: @spacing-base;
-    align-items: center;
     width: 100%;
+    margin-top: 0;
+    padding-top: 14px;
+    background: @service-bar-bg;
   }
 
   &__hint {
     font-size: 11px;
-    color: @text-color-disabled;
+    line-height: 16px;
+    color: @project-muted;
   }
 
   &__actions {
@@ -134,35 +125,26 @@ function onFileChange(event: Event): void {
   }
 
   &__attach {
-    .flex(row, center);
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: @radius-sm;
-    background: transparent;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      background: @bg-color-light;
-    }
+    display: none;
   }
 
   &__file {
     display: none;
   }
 
-  .app-button {
-    height: 24px; // 31 × 0.77
-    padding: 0 14px;
-    border-radius: 6px;
+  &__send {
+    width: 76px;
+    height: 30px;
+    padding: 0;
+    border-color: @primary-strong;
+    border-radius: @radius-sm;
     background: @primary-strong;
     color: @white;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 500;
 
     &:hover {
+      border-color: @primary-strong;
       background: @primary-strong;
       color: @white;
     }