31 changed files with 577 additions and 9 deletions
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 372 KiB |
|
After Width: | Height: | Size: 270 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
||||
<svg t="1705480968419" class="icon" viewBox="0 0 1024 1024" version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" p-id="2401" |
||||
xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50"> |
||||
<path d="M512 750.2c-10.6 0-20.8-4.2-28.3-11.7L75.6 330.3c-15.6-15.6-15.6-40.9 0-56.6 15.6-15.6 40.9-15.6 56.6 0L512 653.6l379.8-379.9c15.6-15.6 40.9-15.6 56.6 0 15.6 15.6 15.6 40.9 0 56.6L540.3 738.5c-7.5 7.5-17.7 11.7-28.3 11.7z" p-id="2402"></path> |
||||
</svg> |
||||
@ -0,0 +1,3 @@
|
||||
import AppContentDefaultBox from './index.vue' |
||||
|
||||
export { AppContentDefaultBox } |
||||
@ -0,0 +1,15 @@
|
||||
<!-- 内容默认容器组件 --> |
||||
<script setup lang="ts"> |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="app-content-default-box w-full"> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
@include app('content-default-box') { |
||||
padding: 0 100px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,3 @@
|
||||
import AppConversationDefault from './index.vue' |
||||
|
||||
export { AppConversationDefault } |
||||
@ -0,0 +1,169 @@
|
||||
<!-- 会话默认对话组件 --> |
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
import DefaultImage from '@/assets/images/conversation/default_img.png' |
||||
import TestImg from '@/assets/images/a1.png' |
||||
import { SvgIcon } from '@/components/SvgIcon' |
||||
import { AppContentDefaultBox } from '@/components/AppContentDefaultBox' |
||||
import { AppDefaultLead } from '@/components/AppDefaultLead' |
||||
import { AppModelSelect } from '@/components/AppModelSelect' |
||||
import { AppTopPicks } from '@/components/AppTopPicks' |
||||
import type { TopPickItem } from '@/components/AppTopPicks/index.d' |
||||
import { AppPicture } from '@/components/AppPicture' |
||||
import type { PictureType } from '@/components/AppPicture/index.d' |
||||
|
||||
const leadData = { |
||||
title: '你好，我是青鸟语言大模型-同聪~', |
||||
subTitles: [ |
||||
'我可以自由的跟你对话～陪你聊天～帮你想方案～答疑解惑。', |
||||
'你可以试着问我', |
||||
], |
||||
image: DefaultImage, |
||||
} |
||||
|
||||
const topPickList = ref<TopPickItem[]>([ |
||||
{ |
||||
id: '1', |
||||
label: '啦啦啦啦啦啦', |
||||
}, |
||||
{ |
||||
id: '2', |
||||
label: '啦啦啦啦啦啦', |
||||
}, |
||||
{ |
||||
id: '3', |
||||
label: '啦啦啦啦啦啦啦啦啦啦啦啦', |
||||
}, |
||||
{ |
||||
id: '4', |
||||
label: '啦啦啦啦啦啦', |
||||
}, |
||||
{ |
||||
id: '5', |
||||
label: '啦啦啦啦啦啦', |
||||
}, |
||||
]) |
||||
|
||||
const roleList = ref<PictureType[]>([ |
||||
{ |
||||
id: '1', |
||||
image: TestImg, |
||||
name: '法律顾问', |
||||
type: '2', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
image: TestImg, |
||||
name: '法律顾问', |
||||
type: '2', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
image: TestImg, |
||||
name: '法律顾问', |
||||
type: '2', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
image: TestImg, |
||||
name: '法律顾问', |
||||
type: '2', |
||||
}, |
||||
]) |
||||
</script> |
||||
|
||||
<template> |
||||
<AppContentDefaultBox> |
||||
<AppModelSelect></AppModelSelect> |
||||
<AppDefaultLead |
||||
class="mt-10" |
||||
:title="leadData.title" |
||||
:sub-titles="leadData.subTitles" |
||||
:image="leadData.image" |
||||
></AppDefaultLead> |
||||
<AppTopPicks class="pl-20 mt-10" :list="topPickList"></AppTopPicks> |
||||
|
||||
<div class="pl-20 mt-10 flex justify-between items-end"> |
||||
<div class="category-box"> |
||||
<div class="top flex items-center"> |
||||
<p class="title"> |
||||
常用角色 |
||||
</p> |
||||
<p class="sub-title truncate"> |
||||
我会转换为不同的角色跟你对话 |
||||
</p> |
||||
<SvgIcon class="icon" name="more"></SvgIcon> |
||||
</div> |
||||
<div class="picture-box flex"> |
||||
<AppPicture |
||||
v-for="(item, index) in roleList" |
||||
:key="index" |
||||
class="picture-item-role" |
||||
:name="item.name" |
||||
:image="item.image" |
||||
></AppPicture> |
||||
</div> |
||||
</div> |
||||
<div class="category-box"> |
||||
<div class="top flex items-center"> |
||||
<p class="title"> |
||||
热门应用 |
||||
</p> |
||||
<p class="sub-title truncate"> |
||||
这里或许有你想要的好东西 |
||||
</p> |
||||
<SvgIcon class="icon" name="more"></SvgIcon> |
||||
</div> |
||||
<div class="picture-box flex"> |
||||
<AppPicture |
||||
v-for="(item, index) in roleList" |
||||
:key="index" |
||||
class="picture-item" |
||||
:name="item.name" |
||||
:image="item.image" |
||||
type="entire" |
||||
></AppPicture> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</AppContentDefaultBox> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.category-box { |
||||
width: calc(50% - 10px); |
||||
padding: 15px 20px; |
||||
background-color: #edf3ff; |
||||
border-radius: 8px; |
||||
.top { |
||||
position: relative; |
||||
.title { |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
margin-bottom: 0; |
||||
} |
||||
.sub-title { |
||||
color: #6d7278; |
||||
margin-left: 30px; |
||||
margin-bottom: 0; |
||||
} |
||||
.icon { |
||||
width: 45px; |
||||
height: 18px; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 6px; |
||||
} |
||||
} |
||||
.picture-box { |
||||
margin-top: 20px; |
||||
.picture-item-role { |
||||
margin-left: -10px; |
||||
} |
||||
.picture-item + .picture-item { |
||||
margin-left: 15px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,3 @@
|
||||
import AppDefaultLead from './index.vue' |
||||
|
||||
export { AppDefaultLead } |
||||
@ -0,0 +1,77 @@
|
||||
<!-- 默认导读组件 --> |
||||
<script setup lang="ts"> |
||||
defineProps({ |
||||
title: { |
||||
type: String, |
||||
default: '你好啊', |
||||
}, |
||||
subTitles: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
image: { |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="app-default-lead flex justify-between"> |
||||
<img class="profile" src="~@/assets/images/conversation/logo.png" alt=""> |
||||
<div class="right"> |
||||
<div class="banner flex justify-between"> |
||||
<div class="content"> |
||||
<p class="title"> |
||||
{{ title }} |
||||
</p> |
||||
<p v-for="(subTitle, index) of subTitles" :key="index" class="sub-title"> |
||||
{{ subTitle }} |
||||
</p> |
||||
</div> |
||||
<img v-if="image" class="banner-img" :src="image" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
@include app('default-lead') { |
||||
.profile { |
||||
width: 50px; |
||||
height: 40px; |
||||
} |
||||
.right { |
||||
width: calc(100% - 50px); |
||||
padding-left: 30px; |
||||
.banner { |
||||
padding: 30px; |
||||
border-radius: 22px; |
||||
background-image: url(../../assets/images/conversation/default_bg.png); |
||||
background-size: cover; |
||||
position: relative; |
||||
box-shadow: 5px 5px 15px #2260e8; |
||||
.content { |
||||
color: #fff; |
||||
.title { |
||||
font-size: 26px; |
||||
font-weight: bold; |
||||
margin-bottom: 20px; |
||||
line-height: 40px; |
||||
} |
||||
.sub-title { |
||||
line-height: 32px; |
||||
margin: 0; |
||||
} |
||||
} |
||||
.banner-img { |
||||
width: 50%; |
||||
max-width: 500px; |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,4 @@
|
||||
export interface ModelSelect { |
||||
label: string |
||||
value: string |
||||
} |
||||
@ -0,0 +1,3 @@
|
||||
import AppModelSelect from './index.vue' |
||||
|
||||
export { AppModelSelect } |
||||
@ -0,0 +1,64 @@
|
||||
<!-- 3.5和4.0模型切换组件 --> |
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
import { Dropdown, Menu, MenuItem } from 'ant-design-vue' |
||||
import type { ModelSelect } from './index.d' |
||||
import { SvgIcon } from '@/components/SvgIcon' |
||||
|
||||
const emit = defineEmits(['change']) |
||||
const optionActive = ref(0) |
||||
const options: ModelSelect[] = [ |
||||
{ |
||||
label: '同聪3.5', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '同聪4.0', |
||||
value: '2', |
||||
}, |
||||
] |
||||
|
||||
function handelChange(index: number, item: ModelSelect) { |
||||
optionActive.value = index |
||||
emit('change', index, item) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<Dropdown :trigger="['click']"> |
||||
<div class="app-model-select flex justify-between items-center" @click.prevent> |
||||
<SvgIcon class="icon icon-robot" name="robot" /> |
||||
{{ options[optionActive].label }} |
||||
<SvgIcon class="icon icon-down" name="down" /> |
||||
</div> |
||||
|
||||
<template #overlay> |
||||
<Menu> |
||||
<MenuItem v-for="(item, index) in options" :key="item.value" @click="handelChange(index, item)"> |
||||
{{ item.label }} |
||||
</MenuItem> |
||||
</Menu> |
||||
</template> |
||||
</Dropdown> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
@include app('model-select') { |
||||
width: 200px; |
||||
height: 40px; |
||||
padding: 0 20px; |
||||
margin: 0 auto; |
||||
color: #4670e3; |
||||
background-color: #edf3ff; |
||||
border-radius: 20px; |
||||
cursor: pointer; |
||||
.icon { |
||||
width: 24px; |
||||
height: 24px; |
||||
} |
||||
.icon-down { |
||||
width: 18px; |
||||
height: 18px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,6 @@
|
||||
export interface PictureType { |
||||
id: string |
||||
image: string |
||||
name: string |
||||
type: string |
||||
} |
||||
@ -0,0 +1,3 @@
|
||||
import AppPicture from './index.vue' |
||||
|
||||
export { AppPicture } |
||||
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts"> |
||||
import { computed } from 'vue' |
||||
|
||||
interface Props { |
||||
widthStyle?: number |
||||
heightStyle?: number |
||||
type?: 'separate' | 'entire' |
||||
name: string |
||||
image: string |
||||
} |
||||
const props = withDefaults(defineProps<Props>(), { |
||||
widthStyle: 80, |
||||
heightStyle: 80, |
||||
type: 'separate', |
||||
name: '', |
||||
image: '', |
||||
}) |
||||
const w = computed(() => `${props.widthStyle}px`) |
||||
const h = computed(() => `${props.heightStyle}px`) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="app-picture" :style="{ width: w, height: h }"> |
||||
<div v-if="props.type === 'separate'" class="separate-box w-full h-full"> |
||||
<img class="img" :src="image" alt=""> |
||||
<p class="name w-full"> |
||||
{{ name }} |
||||
</p> |
||||
</div> |
||||
<div v-else class="entire-box w-full h-full"> |
||||
<img class="img w-full h-full" :src="image" alt=""> |
||||
|
||||
<p class="name w-full"> |
||||
{{ name }} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
@include app('picture') { |
||||
cursor: pointer; |
||||
.separate-box { |
||||
.img { |
||||
width: calc(100% - 25px); |
||||
height: calc(100% - 25px); |
||||
margin: 0 auto; |
||||
display: block; |
||||
} |
||||
.name { |
||||
text-align: center; |
||||
margin-top: 3px; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
.entire-box { |
||||
position: relative; |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
.name { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
color: #fff; |
||||
background-color: rgba($color: #000000, $alpha: 0.5); |
||||
margin: 0; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,4 @@
|
||||
export interface TopPickItem { |
||||
id: string |
||||
label: string |
||||
} |
||||
@ -0,0 +1,3 @@
|
||||
import AppTopPicks from './index.vue' |
||||
|
||||
export { AppTopPicks } |
||||
@ -0,0 +1,53 @@
|
||||
<!-- 精选推荐组件 --> |
||||
<script setup lang="ts"> |
||||
import type { TopPickItem } from './index.d' |
||||
import { SvgIcon } from '@/components/SvgIcon' |
||||
|
||||
defineProps<{ |
||||
list: TopPickItem[] |
||||
}>() |
||||
|
||||
const emit = defineEmits(['change', 'refresh']) |
||||
|
||||
function handelChange(index: number, item: TopPickItem) { |
||||
emit('change', index, item) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="app-top-picks flex items-center"> |
||||
<div |
||||
v-for="(item, index) in list" |
||||
:key="index" |
||||
class="item truncate" |
||||
@click="handelChange(index, item)" |
||||
> |
||||
{{ item.label }} |
||||
</div> |
||||
<SvgIcon class="icon" name="refresh" @click="emit('refresh')" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
@include app('top-picks') { |
||||
.item { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
padding: 0 20px; |
||||
color: #4670e3; |
||||
background-color: #edf3ff; |
||||
border-radius: 8px; |
||||
cursor: pointer; |
||||
} |
||||
.item + .item { |
||||
margin-left: 20px; |
||||
} |
||||
.icon { |
||||
width: 20px; |
||||
height: 20px; |
||||
color: #4670e3; |
||||
margin-left: 20px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue