feat: 输入框顶部快捷短语

src/views/asistant/components/InputArea.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="input-area">
+    <div class="shortcut-container flex">
+      <div
+        class="shortcut-item flex flex-center"
+        v-for="item in shortcutList"
+        :key="item"
+        @click="handleShortcut(item)"
+      >
+        {{ item }}
+      </div>
+    </div>
     <div class="input-container">
       <!-- 加号图标 -->
       <div class="icon-wrapper">
@@ -42,6 +52,14 @@ interface InputAreaEmits {
 }
 
 const inputValue = ref<string>('')
+const shortcutList: string[] = [
+  'Suggest shoe styles',
+  'Recommend evening bags',
+  'Suggest accessory combinations',
+  'Suggest color combinations',
+  'Suggest fabric combinations',
+  'Suggest style combinations'
+]
 
 const emit = defineEmits<InputAreaEmits>()
 
@@ -52,12 +70,39 @@ const handleSend = (): void => {
     inputValue.value = ''
   }
 }
+
+const handleShortcut = (item: string): void => {
+  console.log('handleShortcut', item)
+  inputValue.value = item
+}
 </script>
 
 <style lang="less" scoped>
 .input-area {
   background-color: #fff;
 }
+.shortcut-container {
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  padding: 0 4.4rem;
+  column-gap: 1.2rem;
+  margin-bottom: 2.84rem;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .shortcut-item {
+    font-size: 4.2rem;
+    width: fit-content;
+    font-family: 'robotoBold';
+    white-space: nowrap;
+    height: 8.1rem;
+    line-height: 8.1rem;
+    padding: 2.2rem 2.8rem;
+    color: #6d6868;
+    background-color: #efefef;
+    border-radius: 2rem;
+  }
+}
 
 .input-container {
   display: flex;

src/views/asistant/index.vue

@@ -3,19 +3,20 @@
     <div class="header">
       <HeaderTitle light hasSetting />
     </div>
-    <div class="content flex-1" v-if="!isLoading">
-      <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
-    </div>
-    <div class="footer" v-if="!isLoading">
-      <InputArea @send-message="handleSendMessage" />
-      <div class="continue">
-        <button class="btn">Continue</button>
-      </div>
-    </div>
-    <!-- Loading状态时显示loading组件 -->
-    <div v-if="isLoading" class="loading-wrapper">
+    <div class="loading-container" v-if="isLoading">
       <ChatLoading />
     </div>
+    <template v-else>
+      <div class="content flex-1" v-if="!isLoading">
+        <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
+      </div>
+      <div class="footer" v-if="!isLoading">
+        <InputArea @send-message="handleSendMessage" />
+        <div class="continue">
+          <button class="btn">Continue</button>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -41,7 +42,7 @@ const handleSendMessage = (message: string): void => {
   console.log('收到消息:', message)
   // 显示loading状态
   isLoading.value = true
-  
+
   // 模拟请求延迟
   setTimeout(() => {
     // 调用NoticeList的方法添加新消息
@@ -71,7 +72,7 @@ const handleSendMessage = (message: string): void => {
 
 .footer {
   flex-shrink: 0;
-  
+
   .continue {
     font-family: 'satoshiRegular';
     font-size: 3.6rem;
@@ -87,7 +88,7 @@ const handleSendMessage = (message: string): void => {
   }
 }
 
-.loading-wrapper {
+.loading-container {
   flex: 1;
   display: flex;
   align-items: center;
@@ -95,4 +96,3 @@ const handleSendMessage = (message: string): void => {
   background-color: #fff;
 }
 </style>
-