mirror of https://gitee.com/godoos/godoos.git
8 changed files with 239 additions and 123 deletions
@ -1,34 +1,121 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { useAiChatStore } from "@/stores/aichat"; |
import { useAiChatStore } from "@/stores/aichat"; |
||||
|
import { Search } from "@element-plus/icons-vue"; |
||||
|
// import { t } from "@/i18n"; |
||||
|
// import { notifyInfo,notifySuccess } from "@/util/msg.ts"; |
||||
const chatStore = useAiChatStore(); |
const chatStore = useAiChatStore(); |
||||
|
const showBox = (flag: any) => { |
||||
|
chatStore.isEditor = flag; |
||||
|
if (flag === true) { |
||||
|
chatStore.editInfo = toRaw(chatStore.chatInfo); |
||||
|
} else { |
||||
|
chatStore.editInfo = { |
||||
|
title: "", |
||||
|
model: "", |
||||
|
prompt: "", |
||||
|
promptName: "", |
||||
|
}; |
||||
|
} |
||||
|
chatStore.showInfo = true; |
||||
|
}; |
||||
|
|
||||
</script> |
</script> |
||||
<template> |
<template> |
||||
|
<el-dialog v-model="chatStore.showInfo" width="600" append-to-body> |
||||
|
<ai-chat-info /> |
||||
|
</el-dialog> |
||||
<el-scrollbar> |
<el-scrollbar> |
||||
<el-space direction="vertical"> |
<el-header class="search"> |
||||
<el-card |
<el-input placeholder="搜索" :prefix-icon="Search" class="search-input" v-model="chatStore.searchInput" /> |
||||
v-for="(item, key) in chatStore.chatList" |
<button class="add-chat" @click="showBox(false)"> |
||||
:key="key" |
<el-icon> |
||||
class="box-card" |
<Plus /> |
||||
style="width: 190px" |
</el-icon> |
||||
:shadow="chatStore.activeId == item.id ? 'always' : 'hover'" |
</button> |
||||
> |
</el-header> |
||||
<el-row type="flex" justify="space-between"> |
<div v-for="(item, key) in chatStore.chatList" :key="key"> |
||||
<el-button |
<div class="list-item"> |
||||
type="info" |
<el-row justify="space-around"> |
||||
text |
<el-col :span="17" @click.stop="chatStore.setActiveId(item.id)" class="chat-title"> |
||||
@click.stop="chatStore.setActiveId(item.id)" |
|
||||
size="small" |
|
||||
> |
|
||||
{{ item.title }} |
{{ item.title }} |
||||
</el-button> |
</el-col> |
||||
<el-button |
<el-col :span="7" class="iconlist"> |
||||
icon="Delete" |
<el-icon size="15"> |
||||
size="small" |
<Edit /> |
||||
@click.stop="chatStore.deleteChat(item.id)" |
</el-icon> |
||||
circle |
<el-icon size="15" @click.stop="chatStore.deleteChat(item.id)"> |
||||
></el-button> |
<Delete /> |
||||
|
</el-icon> |
||||
|
</el-col> |
||||
|
|
||||
</el-row> |
</el-row> |
||||
</el-card> |
</div> |
||||
</el-space> |
</div> |
||||
</el-scrollbar> |
</el-scrollbar> |
||||
</template> |
</template> |
||||
|
<style scoped lang="scss"> |
||||
|
.search { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-evenly; |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
padding: 0; |
||||
|
padding-right: 10px; |
||||
|
-webkit-app-region: drag; |
||||
|
border-bottom: 1px solid #e8e8e8; |
||||
|
border-left: 1px solid #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.add-chat { |
||||
|
width: 40px; |
||||
|
height: 30px; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
width: calc(100% - 20px); |
||||
|
margin: 10px; |
||||
|
height: 30px; |
||||
|
font-size: 0.7rem; |
||||
|
-webkit-app-region: no-drag; |
||||
|
--el-input-placeholder-color: #bfbfbf !important; |
||||
|
--el-input-icon-color: #bfbfbf !important; |
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
width: 95%; |
||||
|
height: 60px; |
||||
|
transition: all 0.5s; |
||||
|
margin: 0 auto; |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 5px; |
||||
|
overflow: hidden; |
||||
|
margin-top: 5px; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.list-item:hover,.list-item .active { |
||||
|
background-color: #e8f3ff; |
||||
|
} |
||||
|
|
||||
|
.chat-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 60px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.iconlist { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
.iconlist .el-icon{ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue