339 lines
9.1 KiB
Vue
339 lines
9.1 KiB
Vue
<template>
|
||
<div class="slide-wrap">
|
||
<div class="header">
|
||
<img class="header-image" :src="getImage()" />
|
||
<div class="header-name">{{ appData.name || 'AI助手' }}</div>
|
||
</div>
|
||
<div class="createArea">
|
||
<a-button type="dashed" @click="handleCreate">新建聊天</a-button>
|
||
</div>
|
||
<div class="historyArea">
|
||
<ul>
|
||
<li
|
||
v-for="(item, index) in dataSource.history"
|
||
:key="item.id"
|
||
class="list"
|
||
:class="[item.id == dataSource.active ? 'active' : 'normal', dataSource.history.length == 1 ? 'last' : '']"
|
||
@click="handleToggleChat(item, index)"
|
||
>
|
||
<i class="icon message">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
aria-hidden="true"
|
||
role="img"
|
||
class="iconify iconify--ri"
|
||
width="1em"
|
||
height="1em"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
fill="currentColor"
|
||
d="M2 8.994A5.99 5.99 0 0 1 8 3h8c3.313 0 6 2.695 6 5.994V21H8c-3.313 0-6-2.695-6-5.994zM20 19V8.994A4.004 4.004 0 0 0 16 5H8a3.99 3.99 0 0 0-4 3.994v6.012A4.004 4.004 0 0 0 8 19zm-6-8h2v2h-2zm-6 0h2v2H8z"
|
||
></path>
|
||
</svg>
|
||
</i>
|
||
<a-input
|
||
class="title"
|
||
ref="inputRef"
|
||
v-if="item.isEdit"
|
||
:defaultValue="item.title"
|
||
placeholder="请输入标题"
|
||
@change="handleInputChange"
|
||
@keyup.enter="inputBlur(item)"
|
||
/>
|
||
<span class="title" v-else>{{ item.title }}</span>
|
||
<span class="icon edit" @click.stop="handleEdit(item)" v-if="!item.isEdit && !item.disabled">
|
||
<svg xmlns="http://www.w3.org/2000/svg" role="img" class="iconify iconify--ri" width="1em" height="1em" viewBox="0 0 24 24">
|
||
<path
|
||
fill="currentColor"
|
||
d="M6.414 15.89L16.556 5.748l-1.414-1.414L5 14.476v1.414zm.829 2H3v-4.243L14.435 2.212a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414zM3 19.89h18v2H3z"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<span class="icon del">
|
||
<a-popconfirm
|
||
:overlayStyle="{ 'z-index': 9999 }"
|
||
title="确定删除此记录？"
|
||
placement="bottom"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm.stop="handleDel(item)"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" role="img" class="iconify iconify--ri" width="1em" height="1em" viewBox="0 0 24 24">
|
||
<path
|
||
fill="currentColor"
|
||
d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zm1 2H6v12h12zm-9 3h2v6H9zm4 0h2v6h-2zM9 4v2h6V4z"
|
||
></path>
|
||
</svg>
|
||
</a-popconfirm>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="left-footer" v-if="source!='chatJs'">
|
||
AI客服由
|
||
<a style="color: #4183c4;margin-left: 2px;margin-right: 2px" href="https://www.qiaoqiaoyun.com/aiCustomerService" target="_blank">
|
||
JEECG AI
|
||
</a>
|
||
提供
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { defHttp } from '@/utils/http/axios';
|
||
import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
|
||
import defaultImg from '../img/ailogo.png';
|
||
const props = defineProps(['dataSource', 'appData','source']);
|
||
const emit = defineEmits(['save', 'click', 'reloadRight', 'prologue']);
|
||
const inputRef = ref(null);
|
||
const router = useRouter();
|
||
let inputValue = '';
|
||
//新建聊天
|
||
const handleCreate = () => {
|
||
const uuid = getUuid();
|
||
props.dataSource.history.unshift({ title: '新建聊天', id: uuid, isEdit: false, disabled: true });
|
||
// 新建第一个(需要高亮选中)
|
||
props.dataSource.active = uuid;
|
||
emit('click', "新建聊天", 0);
|
||
};
|
||
// 切换聊天
|
||
const handleToggleChat = (item, index) => {
|
||
if (item.id != props.dataSource.active) {
|
||
props.dataSource.active = item.id;
|
||
emit('click', item.title, index);
|
||
}
|
||
};
|
||
const handleInputChange = (e) => {
|
||
inputValue = e.target.value.trim();
|
||
};
|
||
// 失去焦点
|
||
const inputBlur = (item) => {
|
||
item.isEdit = false;
|
||
item.title = inputValue;
|
||
defHttp
|
||
.put(
|
||
{
|
||
url: '/airag/chat/conversation/update/title',
|
||
params: { id: item.id, title: inputValue },
|
||
},
|
||
{ joinParamsToUrl: true }
|
||
)
|
||
.then((res) => {});
|
||
};
|
||
// 编辑
|
||
const handleEdit = (item) => {
|
||
console.log(item);
|
||
item.isEdit = true;
|
||
inputValue = item.title;
|
||
};
|
||
// 保存
|
||
const handleSave = (item) => {
|
||
item.isEdit = false;
|
||
item.title = inputValue;
|
||
};
|
||
|
||
/**
|
||
* 删除
|
||
* @param data
|
||
*/
|
||
function handleDel(data) {
|
||
const findIndex = props.dataSource.history.findIndex((item) => item.id == data.id);
|
||
if (findIndex != -1) {
|
||
props.dataSource.history.splice(findIndex, 1);
|
||
// 删除的是当前active的，active往前移，前面没了往后移。
|
||
if (props.dataSource.history.length) {
|
||
if (props.dataSource.active == data.id) {
|
||
if (findIndex > 0) {
|
||
props.dataSource.active = props.dataSource.history[findIndex - 1].id;
|
||
} else {
|
||
props.dataSource.active = props.dataSource.history[0].id;
|
||
}
|
||
}
|
||
emit('click', props.dataSource.history[0].title, findIndex);
|
||
} else {
|
||
// 删没了（删除了最后一个）
|
||
handleCreate();
|
||
}
|
||
}
|
||
//update-begin---author:wangshuai---date:2025-03-12---for:【QQYUN-11560】新建聊天内容为空，无法删除---
|
||
if(data.disabled){
|
||
return;
|
||
}
|
||
//update-end---author:wangshuai---date:2025-03-12---for:【QQYUN-11560】新建聊天内容为空，无法删除---
|
||
defHttp.delete({
|
||
url: '/airag/chat/conversation/' + data.id,
|
||
},{ isTransformResponse: false });
|
||
}
|
||
|
||
/**
|
||
* 获取图片
|
||
*/
|
||
function getImage() {
|
||
return props.appData.icon ? getFileAccessHttpUrl(props.appData.icon) : defaultImg;
|
||
}
|
||
|
||
watch(
|
||
() => inputRef.value,
|
||
(newVal: any) => {
|
||
if (newVal?.length) {
|
||
newVal[0].focus();
|
||
}
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 指定长度和基数
|
||
const getUuid = (len = 10, radix = 16) => {
|
||
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
||
var uuid: any = [],
|
||
i;
|
||
radix = radix || chars.length;
|
||
|
||
if (len) {
|
||
for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
|
||
} else {
|
||
var r;
|
||
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
|
||
uuid[14] = '4';
|
||
for (i = 0; i < 36; i++) {
|
||
if (!uuid[i]) {
|
||
r = 0 | (Math.random() * 16);
|
||
uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
|
||
}
|
||
}
|
||
}
|
||
return uuid.join('');
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.slide-wrap {
|
||
border-right: 1px solid #e5e7eb;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.historyArea {
|
||
padding: 20px;
|
||
padding-top: 0;
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
margin-bottom: 20px;
|
||
&::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
}
|
||
.historyArea ul li:hover {
|
||
.del {
|
||
display: block;
|
||
}
|
||
}
|
||
.createArea {
|
||
padding: 20px;
|
||
padding-bottom: 0;
|
||
}
|
||
.ant-btn {
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
ul {
|
||
margin-bottom: 0;
|
||
}
|
||
.list {
|
||
width: 100%;
|
||
padding-top: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
padding-left: 0.75rem;
|
||
padding-right: 0.75rem;
|
||
border-radius: 0.375rem;
|
||
border-width: 1px;
|
||
cursor: pointer;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
&:hover,
|
||
&.active {
|
||
border-color: @primary-color;
|
||
color: @primary-color;
|
||
}
|
||
.edit,
|
||
.save,
|
||
.del {
|
||
display: none;
|
||
}
|
||
&.active {
|
||
.edit,
|
||
.save,
|
||
.del {
|
||
display: block;
|
||
}
|
||
&.last {
|
||
.del {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.message {
|
||
margin-right: 8px;
|
||
}
|
||
.edit {
|
||
margin-right: 8px;
|
||
}
|
||
.title {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
position: relative;
|
||
top: 2px;
|
||
&.ant-input {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
svg {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
:deep(.ant-popover) {
|
||
z-index: 9999 !important;
|
||
}
|
||
:deep(.ant-popconfirm) {
|
||
z-index: 9999 !important;
|
||
}
|
||
.header {
|
||
display: flex;
|
||
padding: 20px 4px 0 4px;
|
||
margin-left: 16px;
|
||
.header-image {
|
||
height: 35px;
|
||
width: 35px;
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
}
|
||
.header-name {
|
||
align-self: center;
|
||
color: #1d2939;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.left-footer{
|
||
display:flex;
|
||
margin-right: 20px;
|
||
font-size: 12px;
|
||
position: absolute;
|
||
bottom: 4px;
|
||
left: 50px;
|
||
width: 100%;
|
||
}
|
||
</style>
|