From 619566a0b59fd7d49c686df61f33cbb72927035b Mon Sep 17 00:00:00 2001
From: lipenghui <mrkezhi@163.com>
Date: Thu, 18 Jan 2024 13:54:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:1.=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E8=BE=93=E5=85=A5=E6=A1=86=EF=BC=9B2.=20?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BC=9A=E8=AF=9D=E9=BB=98=E8=AE=A4=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppContentBox/index.vue        |  1 +
 .../AppConversationDefault/index.d.ts         |  3 ++
 .../AppConversationDefault/index.vue          | 14 +++++-
 src/components/AppModelSelect/index.d.ts      |  4 ++
 src/components/AppModelSelect/index.vue       |  3 ++
 src/components/AppTextarea/index.ts           |  3 ++
 src/components/AppTextarea/index.vue          | 48 +++++++++++++++++++
 src/design/public.scss                        |  6 +--
 src/views/conversation/index.vue              |  9 +++-
 9 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 src/components/AppConversationDefault/index.d.ts
 create mode 100644 src/components/AppTextarea/index.ts
 create mode 100644 src/components/AppTextarea/index.vue

diff --git a/src/components/AppContentBox/index.vue b/src/components/AppContentBox/index.vue
index b48ddf0..a1e856d 100644
--- a/src/components/AppContentBox/index.vue
+++ b/src/components/AppContentBox/index.vue
@@ -14,5 +14,6 @@
   padding: 30px;
   border-radius: 30px 0 0 30px;
   background-color: #ffffff;
+  position: relative;
 }
 </style>
diff --git a/src/components/AppConversationDefault/index.d.ts b/src/components/AppConversationDefault/index.d.ts
new file mode 100644
index 0000000..7bacb74
--- /dev/null
+++ b/src/components/AppConversationDefault/index.d.ts
@@ -0,0 +1,3 @@
+export interface Props {
+  height?: string
+}
diff --git a/src/components/AppConversationDefault/index.vue b/src/components/AppConversationDefault/index.vue
index a45464c..b445f03 100644
--- a/src/components/AppConversationDefault/index.vue
+++ b/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;
diff --git a/src/components/AppModelSelect/index.d.ts b/src/components/AppModelSelect/index.d.ts
index 69dd6a3..7301b9a 100644
--- a/src/components/AppModelSelect/index.d.ts
+++ b/src/components/AppModelSelect/index.d.ts
@@ -2,3 +2,7 @@ export interface ModelSelect {
   label: string
   value: string
 }
+
+export interface Props {
+  activeIndex: number
+}
diff --git a/src/components/AppModelSelect/index.vue b/src/components/AppModelSelect/index.vue
index 86a755a..be18431 100644
--- a/src/components/AppModelSelect/index.vue
+++ b/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;
diff --git a/src/components/AppTextarea/index.ts b/src/components/AppTextarea/index.ts
new file mode 100644
index 0000000..ddddedb
--- /dev/null
+++ b/src/components/AppTextarea/index.ts
@@ -0,0 +1,3 @@
+import AppTextarea from './index.vue'
+
+export { AppTextarea }
diff --git a/src/components/AppTextarea/index.vue b/src/components/AppTextarea/index.vue
new file mode 100644
index 0000000..f37ac76
--- /dev/null
+++ b/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>
diff --git a/src/design/public.scss b/src/design/public.scss
index 3ebdf11..805c4f7 100644
--- a/src/design/public.scss
+++ b/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: #9093994d, $alpha: 0.3);
+    background-color: rgba($color: #bdc1c94d, $alpha: 0.2);
     border-radius: 2px;
     box-shadow: inset 0 0 6px rgba($color: #000000, $alpha: 0.2);
+    cursor: pointer;
 }
 
 ::-webkit-scrollbar-thumb:hover {
diff --git a/src/views/conversation/index.vue b/src/views/conversation/index.vue
index fd1fc0e..d624b84 100644
--- a/src/views/conversation/index.vue
+++ b/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>