feat: 聊天页面

2025-10-14 16:42:09 +08:00
parent fe2e8b1965
commit f64c3752b4
20 changed files with 718 additions and 10 deletions
--- a/src/views/asistant/components/InputArea.vue
+++ b/src/views/asistant/components/InputArea.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="input-area">
+    <div class="input-container">
+      <!-- 加号图标 -->
+      <div class="icon-wrapper">
+        <SvgIcon name="plus" size="40" />
+      </div>
+
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+
+      <!-- 输入框 -->
+      <div class="input-wrapper">
+        <input
+          v-model="inputValue"
+          type="text"
+          placeholder="Ask anything about your desired outfit"
+          class="text-input"
+          @keyup.enter="handleSend"
+        />
+      </div>
+
+      <!-- 语音图标 -->
+      <div class="icon-wrapper">
+        <SvgIcon name="audio" size="52" />
+      </div>
+
+      <!-- 发送图标 -->
+      <div class="icon-wrapper send-icon" @click="handleSend">
+        <SvgIcon name="send" size="46" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+interface InputAreaEmits {
+  'send-message': [message: string]
+}
+
+const inputValue = ref<string>('')
+
+const emit = defineEmits<InputAreaEmits>()
+
+const handleSend = (): void => {
+  if (inputValue.value.trim()) {
+    console.log('input发送消息:', inputValue.value)
+    emit('send-message', inputValue.value)
+    inputValue.value = ''
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.input-area {
+  background-color: #fff;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  background-color: #efefef;
+  padding: 0 4.85rem 0 5.2rem;
+  height: 19.3rem;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &.send-icon {
+    margin-left: 4.38rem;
+  }
+}
+
+.divider {
+  width: 2px;
+  height: 14.9rem;
+  margin-left: 5.59rem;
+  margin-right: 3.5rem;
+  background-color: #888;
+}
+
+.input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.text-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 4rem;
+  font-family: 'robotoBold';
+  font-weight: 400;
+  line-height: 121%;
+  // padding-right: 2rem;
+  margin-right: 4.21rem;
+  color: #888;
+
+  &::placeholder {
+    color: #888;
+  }
+}
+
+// 确保图标颜色为 #6d6868
+:deep(.svg-icon) {
+  color: #6d6868;
+
+  svg {
+    fill: #6d6868;
+  }
+}
+</style>