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;