Browse Source

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

dxj
李朋徽 1 year ago
parent
commit
619566a0b5
  1. 1
      src/components/AppContentBox/index.vue
  2. 3
      src/components/AppConversationDefault/index.d.ts
  3. 14
      src/components/AppConversationDefault/index.vue
  4. 4
      src/components/AppModelSelect/index.d.ts
  5. 3
      src/components/AppModelSelect/index.vue
  6. 3
      src/components/AppTextarea/index.ts
  7. 48
      src/components/AppTextarea/index.vue
  8. 6
      src/design/public.scss
  9. 9
      src/views/conversation/index.vue

1
src/components/AppContentBox/index.vue

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

3
src/components/AppConversationDefault/index.d.ts vendored

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

14
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;

4
src/components/AppModelSelect/index.d.ts vendored

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

3
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;

3
src/components/AppTextarea/index.ts

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

48
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>

6
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 {

9
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>

Loading…
Cancel
Save