feat:1.新增编辑内容输入框；2. 完成会话默认模板；

src/components/AppContentBox/index.vue

@@ -14,5 +14,6 @@
   padding: 30px;
   border-radius: 30px 0 0 30px;
   background-color: #ffffff;
+  position: relative;
 }
 </style>

src/components/AppConversationDefault/index.d.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  height?: string
+}

src/components/AppConversationDefault/index.vue

@@ -1,6 +1,7 @@
 <!-- 会话默认对话组件 -->
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { Props } from './index.d'
 import DefaultImage from '@/assets/images/conversation/default_img.png'
 import TestImg from '@/assets/images/a1.png'
 import { SvgIcon } from '@/components/SvgIcon'
@@ -12,6 +13,10 @@ import type { TopPickItem } from '@/components/AppTopPicks/index.d'
 import { AppPicture } from '@/components/AppPicture'
 import type { PictureType } from '@/components/AppPicture/index.d'
 
+withDefaults(defineProps<Props>(), {
+  height: '100%',
+})
+
 const leadData = {
   title: '你好，我是青鸟语言大模型-同聪~',
   subTitles: [
@@ -73,10 +78,10 @@ const roleList = ref<PictureType[]>([
 </script>
 
 <template>
-  <AppContentDefaultBox>
+  <AppContentDefaultBox class="content-default-style">
     <AppModelSelect></AppModelSelect>
     <AppDefaultLead
-      class="mt-10"
+      class="mt-20"
       :title="leadData.title"
       :sub-titles="leadData.subTitles"
       :image="leadData.image"
@@ -130,6 +135,11 @@ const roleList = ref<PictureType[]>([
 </template>
 
 <style lang="scss" scoped>
+.content-default-style {
+  height: v-bind(height);
+  overflow-y: auto;
+}
+
 .category-box {
   width: calc(50% - 10px);
   padding: 15px 20px;

src/components/AppModelSelect/index.d.ts

@@ -2,3 +2,7 @@ export interface ModelSelect {
   label: string
   value: string
 }
+
+export interface Props {
+  activeIndex: number
+}

src/components/AppModelSelect/index.vue

@@ -52,6 +52,9 @@ function handelChange(index: number, item: ModelSelect) {
   background-color: #edf3ff;
   border-radius: 20px;
   cursor: pointer;
+  position: absolute;
+  top: 30px;
+  left: calc(50% - 100px);
   .icon {
     width: 24px;
     height: 24px;

src/components/AppTextarea/index.ts

@@ -0,0 +1,3 @@
+import AppTextarea from './index.vue'
+
+export { AppTextarea }

src/components/AppTextarea/index.vue

@@ -0,0 +1,48 @@
+<!-- 公共输入框组件 -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button, Textarea } from 'ant-design-vue'
+
+defineProps({
+  placeholder: {
+    type: String,
+    default: '在此输入你想了解的内容（Shift + Enter = 换行）',
+  },
+})
+
+const emit = defineEmits(['pressEnter', 'send'])
+
+const value = ref('')
+
+function pressEnter(event: KeyboardEvent) {
+  if (event.shiftKey)
+    return false
+  emit('pressEnter', value.value)
+  handeleSend()
+}
+
+function handeleSend() {
+  emit('send', value.value)
+  value.value = ''
+}
+</script>
+
+<template>
+  <div class="absolute right-0 bottom-5 w-full">
+    <div class="relative">
+      <Textarea
+        v-model:value="value"
+        class="pt-4 pr-34 pb-6 pl-4"
+        :placeholder="placeholder"
+        :auto-size="{ minRows: 3, maxRows: 8 }"
+        @press-enter="pressEnter"
+      >
+      </Textarea>
+      <Button class="w-28 absolute right-5 bottom-3" type="primary" @click="handeleSend">
+        发送
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/design/public.scss

@@ -17,14 +17,14 @@
 // }
 
 ::-webkit-scrollbar-track {
-    background-color: rgba($color: #000000, $alpha: 0.5);
+    background-color: rgba($color: #000000, $alpha: 0.1);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba($color: #000000, $alpha: 0.6);
+    background-color: rgba($color: #bdc1c94d, $alpha: 0.2);
-    background-color: rgba($color: #9093994d, $alpha: 0.3);
     border-radius: 2px;
     box-shadow: inset 0 0 6px rgba($color: #000000, $alpha: 0.2);
+    cursor: pointer;
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/views/conversation/index.vue

@@ -6,6 +6,7 @@ import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
 import { AppSubMenuList } from '@/components/AppSubMenuList'
 import { AppConversationDefault } from '@/components/AppConversationDefault'
 import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
+import { AppTextarea } from '@/components/AppTextarea'
 
 const subMenuActive = ref(0)
 const subMenuList = ref<SubMenuItem[]>([
@@ -24,6 +25,10 @@ const subMenuList = ref<SubMenuItem[]>([
 function handleSubMenuChange(index: number) {
   subMenuActive.value = index
 }
+
+function pressEnter(value: string) {
+  console.log('pressEnter', value)
+}
 </script>
 
 <template>
@@ -38,8 +43,8 @@ function handleSubMenuChange(index: number) {
       <AppSubMenuList :list="subMenuList" :active-index="subMenuActive" @change="handleSubMenuChange"></AppSubMenuList>
     </template>
     <template #content>
-      <AppConversationDefault></AppConversationDefault>
+      <AppConversationDefault height="calc(100% - 120px)"></AppConversationDefault>
-      我是内容区
+      <AppTextarea class="pl-52 pr-32 mt-10" @press-enter="pressEnter"></AppTextarea>
     </template>
   </AppContainerBox>
 </template>