xueyinfei
5 months ago
47 changed files with 3608 additions and 19 deletions
@ -0,0 +1,9 @@ |
|||||
|
<component name="libraryTable"> |
||||
|
<library name="contour_plot"> |
||||
|
<CLASSES> |
||||
|
<root url="jar://$PROJECT_DIR$/vue-fastapi-frontend/node_modules/contour_plot/build/contour_plot.zip!/" /> |
||||
|
</CLASSES> |
||||
|
<JAVADOC /> |
||||
|
<SOURCES /> |
||||
|
</library> |
||||
|
</component> |
||||
@ -0,0 +1,9 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="JavaScriptSettings"> |
||||
|
<option name="languageLevel" value="FLOW" /> |
||||
|
</component> |
||||
|
<component name="ProjectRootManager" version="2" languageLevel="JDK_20" project-jdk-name="Python 3.11" project-jdk-type="Python SDK"> |
||||
|
<output url="file://$PROJECT_DIR$/out" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,8 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="ProjectModuleManager"> |
||||
|
<modules> |
||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/vue-fastapi-admin.iml" filepath="$PROJECT_DIR$/.idea/vue-fastapi-admin.iml" /> |
||||
|
</modules> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,6 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="VcsDirectoryMappings"> |
||||
|
<mapping directory="" vcs="Git" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,9 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<module type="JAVA_MODULE" version="4"> |
||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true"> |
||||
|
<exclude-output /> |
||||
|
<content url="file://$MODULE_DIR$" /> |
||||
|
<orderEntry type="inheritedJdk" /> |
||||
|
<orderEntry type="sourceFolder" forTests="false" /> |
||||
|
</component> |
||||
|
</module> |
||||
@ -0,0 +1,113 @@ |
|||||
|
import json |
||||
|
import os |
||||
|
import shutil |
||||
|
from fastapi import APIRouter, Depends, Request, UploadFile, File, Form |
||||
|
from sqlalchemy.ext.asyncio import AsyncSession |
||||
|
from config.get_db import get_db |
||||
|
from module_admin.entity.vo.user_vo import CurrentUserModel |
||||
|
from module_admin.entity.vo.aichat_vo import * |
||||
|
from module_admin.service.login_service import LoginService |
||||
|
from module_admin.service.aichat_service import AiChatService |
||||
|
from utils.log_util import logger |
||||
|
from utils.response_util import ResponseUtil |
||||
|
from config.env import MinioConfig |
||||
|
from datetime import datetime |
||||
|
from utils.common_util import bytes2file_response |
||||
|
from utils.minio_util import Bucket |
||||
|
|
||||
|
aichatController = APIRouter(prefix='/aichat', dependencies=[Depends(LoginService.get_current_user)]) |
||||
|
|
||||
|
|
||||
|
@aichatController.get("/session/list/{sessionId}") |
||||
|
async def get_chat_session_list(request: Request, |
||||
|
sessionId: str, |
||||
|
query_db: AsyncSession = Depends(get_db), |
||||
|
current_user: CurrentUserModel = Depends(LoginService.get_current_user)): |
||||
|
ai_session_list_result = await AiChatService.get_ai_session_list_services(query_db, sessionId, current_user) |
||||
|
logger.info('获取成功') |
||||
|
return ResponseUtil.success(data=ai_session_list_result) |
||||
|
|
||||
|
|
||||
|
@aichatController.get("/chat/list/{sessionId}") |
||||
|
async def get_chat_list(request: Request, sessionId: str, query_db: AsyncSession = Depends(get_db), |
||||
|
current_user: CurrentUserModel = Depends(LoginService.get_current_user)): |
||||
|
ai_chat_list_result = await AiChatService.get_ai_chat_list_services(query_db, sessionId, current_user) |
||||
|
logger.info('获取成功') |
||||
|
return ResponseUtil.success(data=ai_chat_list_result) |
||||
|
|
||||
|
|
||||
|
@aichatController.post("/delete/session/{sessionId}") |
||||
|
async def delete_chat_session(request: Request, sessionId: str, query_db: AsyncSession = Depends(get_db), |
||||
|
current_user: CurrentUserModel = Depends(LoginService.get_current_user)): |
||||
|
delete_chat_session_result = await AiChatService.delete_chat_session(query_db, sessionId, current_user) |
||||
|
logger.info(delete_chat_session_result.message) |
||||
|
return ResponseUtil.success(msg=delete_chat_session_result.message) |
||||
|
|
||||
|
|
||||
|
@aichatController.post("/add") |
||||
|
async def add_chat(request: Request, add_chat: AiChatModel, query_db: AsyncSession = Depends(get_db), |
||||
|
current_user: CurrentUserModel = Depends(LoginService.get_current_user)): |
||||
|
operate_result = await AiChatService.add_chat(query_db, add_chat, current_user) |
||||
|
logger.info(operate_result.message) |
||||
|
return ResponseUtil.success(msg=operate_result.message) |
||||
|
|
||||
|
|
||||
|
@aichatController.post("/update") |
||||
|
async def update_chat(request: Request, update_chat: AiChatModel, query_db: AsyncSession = Depends(get_db), |
||||
|
current_user: CurrentUserModel = Depends(LoginService.get_current_user)): |
||||
|
operate_result = await AiChatService.update_chat(query_db, update_chat) |
||||
|
logger.info(operate_result.message) |
||||
|
return ResponseUtil.success(msg=operate_result.message) |
||||
|
|
||||
|
|
||||
|
@aichatController.post("/upload") |
||||
|
async def upload_file(request: Request, sessionId: str = Form(), file: UploadFile = File(...), |
||||
|
current_user: CurrentUserModel = Depends(LoginService.get_current_user)): |
||||
|
file_extension = os.path.splitext(file.filename)[1] # 文件后缀 |
||||
|
file_prefix = os.path.splitext(file.filename)[0] # 文件前缀 |
||||
|
bucket = Bucket( |
||||
|
minio_address=MinioConfig.minio_address, |
||||
|
minio_admin=MinioConfig.minio_admin, |
||||
|
minio_password=MinioConfig.minio_password |
||||
|
) |
||||
|
file_id = datetime.now().strftime('%Y%m%d%H%M%S') |
||||
|
file_location = file_prefix + "_" + file_id + file_extension |
||||
|
with open(file_location, "wb") as buffer: |
||||
|
shutil.copyfileobj(file.file, buffer) |
||||
|
|
||||
|
# Remove the temporary file after upload (optional) |
||||
|
def remove_file(file_path): |
||||
|
os.remove(file_path) |
||||
|
|
||||
|
# Upload to MinIO |
||||
|
bucket.upload_file_to_bucket(current_user.user.user_name, '/' + sessionId + '/' + file_location, file_location) |
||||
|
|
||||
|
# Clean up |
||||
|
remove_file(file_location) |
||||
|
return ResponseUtil.success(data={"is_success": True, "message": "上传成功", "file": file_location, |
||||
|
"bucket": current_user.user.user_name}, |
||||
|
msg="上传成功") |
||||
|
|
||||
|
|
||||
|
@aichatController.post("/file/download") |
||||
|
async def download_file(request: Request, download_file: DownloadFile = Form()): |
||||
|
file_name = download_file.file |
||||
|
bucket_name = download_file.bucket |
||||
|
sessionId = download_file.sessionId |
||||
|
bucket = Bucket( |
||||
|
minio_address=MinioConfig.minio_address, |
||||
|
minio_admin=MinioConfig.minio_admin, |
||||
|
minio_password=MinioConfig.minio_password |
||||
|
) |
||||
|
|
||||
|
# Remove the temporary file after upload (optional) |
||||
|
def remove_file(file_path): |
||||
|
os.remove(file_path) |
||||
|
|
||||
|
# Upload to MinIO |
||||
|
bucket.download_file_from_bucket(bucket_name, '/' + sessionId + '/' + file_name, file_name) |
||||
|
with open(file_name, "rb") as buffer: |
||||
|
file_data = buffer.read() |
||||
|
# Clean up |
||||
|
remove_file(file_name) |
||||
|
return ResponseUtil.streaming(data=bytes2file_response(file_data)) |
||||
@ -0,0 +1,64 @@ |
|||||
|
from sqlalchemy import desc, delete, func, select, update |
||||
|
from sqlalchemy.ext.asyncio import AsyncSession |
||||
|
from module_admin.entity.do.aichat_do import AiChatHistory |
||||
|
from module_admin.entity.do.aichat_do import AiChatSession |
||||
|
from module_admin.entity.vo.aichat_vo import AiChatModel |
||||
|
|
||||
|
|
||||
|
class AiChatDao: |
||||
|
""" |
||||
|
菜单管理模块数据库操作层 |
||||
|
""" |
||||
|
|
||||
|
@classmethod |
||||
|
async def get_ai_session_list(cls, db: AsyncSession, sessionId: str, user_id: int): |
||||
|
session_list = ( |
||||
|
await db.execute( |
||||
|
select(AiChatSession).where(AiChatSession.user == user_id, AiChatSession.sessionId != sessionId) |
||||
|
.order_by(desc(AiChatSession.time)).limit(20) |
||||
|
) |
||||
|
).scalars().all() |
||||
|
return session_list |
||||
|
|
||||
|
@classmethod |
||||
|
async def get_ai_chat_list(cls, db: AsyncSession, sessionId: str, user_id: int): |
||||
|
chat_list = ( |
||||
|
await db.execute( |
||||
|
select(AiChatHistory).where(AiChatHistory.user == user_id, AiChatHistory.sessionId == sessionId) |
||||
|
.order_by(AiChatHistory.time) |
||||
|
) |
||||
|
).scalars().all() |
||||
|
return chat_list |
||||
|
|
||||
|
@classmethod |
||||
|
async def get_ai_chat_by_id(cls, sessionId: str, db: AsyncSession, user_id: int): |
||||
|
chat_list = (await db.execute(select(AiChatSession) |
||||
|
.where(AiChatSession.user == user_id, |
||||
|
AiChatSession.sessionId == sessionId))).scalars().first() |
||||
|
return chat_list |
||||
|
|
||||
|
@classmethod |
||||
|
async def add_ai_chat_session(cls, sessionId: str, sessionName: str, time: str, db: AsyncSession, user_id: int): |
||||
|
chat_session = AiChatSession() |
||||
|
chat_session.sessionId = sessionId |
||||
|
chat_session.sessionName = sessionName |
||||
|
chat_session.time = time |
||||
|
chat_session.user = user_id |
||||
|
db.add(chat_session) |
||||
|
db.flush() |
||||
|
return chat_session |
||||
|
|
||||
|
@classmethod |
||||
|
async def add_ai_chat_history(cls, chat: AiChatHistory, db: AsyncSession): |
||||
|
db.add(chat) |
||||
|
db.flush() |
||||
|
return chat |
||||
|
|
||||
|
@classmethod |
||||
|
async def delete_chat_session(cls, db: AsyncSession, sessionId: str, user_id: int): |
||||
|
await db.execute(delete(AiChatHistory).where(AiChatHistory.sessionId == sessionId)) |
||||
|
await db.execute(delete(AiChatSession).where(AiChatSession.sessionId == sessionId)) |
||||
|
|
||||
|
@classmethod |
||||
|
async def update_ai_chat_history(cls, update_chat: AiChatModel, db: AsyncSession): |
||||
|
await db.execute(update(AiChatHistory), [dict(update_chat)]) |
||||
@ -0,0 +1,36 @@ |
|||||
|
from sqlalchemy import Column, Integer, String, DateTime, Boolean, Text |
||||
|
from config.database import Base |
||||
|
from datetime import datetime |
||||
|
|
||||
|
|
||||
|
class AiChatHistory(Base): |
||||
|
""" |
||||
|
菜单权限表 |
||||
|
""" |
||||
|
__tablename__ = 'ai_chat_history' |
||||
|
|
||||
|
chatId = Column(String(50), primary_key=True, comment='问答id') |
||||
|
sessionId = Column(String(50), default='', comment='聊天记录id') |
||||
|
sessionName = Column(String(50), default='', comment='聊天记录标题') |
||||
|
type = Column(String(50), default='', comment='类型，问题 or 回答') |
||||
|
isEnd = Column(Boolean, default=None, comment='是否结束') |
||||
|
isStop = Column(Boolean, default=None, comment='是否停止') |
||||
|
user = Column(Integer, default=None, comment='所属用户') |
||||
|
time = Column(String(50), default=None, comment='问答时间') |
||||
|
content = Column(Text, default=None, comment='问答内容') |
||||
|
operate = Column(String(50), default=None, comment='点赞，差评等操作') |
||||
|
thumbDownReason = Column(String(255), default=None, comment='差评原因') |
||||
|
file = Column(String(255), default=None, comment='文件id集合') |
||||
|
|
||||
|
|
||||
|
class AiChatSession(Base): |
||||
|
""" |
||||
|
菜单权限表 |
||||
|
""" |
||||
|
__tablename__ = 'ai_chat_session' |
||||
|
|
||||
|
sessionId = Column(String(50), primary_key=True, comment='聊天记录id') |
||||
|
sessionName = Column(String(50), default='', comment='聊天记录标题') |
||||
|
user = Column(Integer, default=None, comment='所属用户') |
||||
|
time = Column(String(50), default=None, comment='问答时间') |
||||
|
|
||||
@ -0,0 +1,41 @@ |
|||||
|
from pydantic import BaseModel |
||||
|
from typing import Union, Optional, List |
||||
|
|
||||
|
|
||||
|
class CrudChatModel(BaseModel): |
||||
|
is_success: bool |
||||
|
message: str |
||||
|
|
||||
|
|
||||
|
class AiChatModel(BaseModel): |
||||
|
""" |
||||
|
菜单表对应pydantic模型 |
||||
|
""" |
||||
|
chatId: Optional[str] = None |
||||
|
sessionId: Optional[str] = None |
||||
|
sessionName: Optional[str] = None |
||||
|
type: Optional[str] = None |
||||
|
isEnd: Optional[bool] = None |
||||
|
isStop: Optional[bool] = None |
||||
|
user: Optional[int] = None |
||||
|
time: Optional[str] = None |
||||
|
content: Optional[str] = None |
||||
|
operate: Optional[str] = None |
||||
|
thumbDownReason: Optional[str] = None |
||||
|
file: Optional[str] = None |
||||
|
|
||||
|
|
||||
|
class ThumbOperateModel(BaseModel): |
||||
|
chatId: str |
||||
|
operate: str |
||||
|
thumbDownReason: str |
||||
|
|
||||
|
|
||||
|
class DownloadFile(BaseModel): |
||||
|
file: str |
||||
|
bucket: str |
||||
|
sessionId: str |
||||
|
|
||||
|
|
||||
|
class AiChatListModel(BaseModel): |
||||
|
chats: List[Union[AiChatModel, None]] |
||||
@ -0,0 +1,59 @@ |
|||||
|
import uuid |
||||
|
|
||||
|
from typing import Optional |
||||
|
from sqlalchemy.ext.asyncio import AsyncSession |
||||
|
from module_admin.entity.vo.aichat_vo import * |
||||
|
from module_admin.entity.vo.common_vo import CrudResponseModel |
||||
|
from module_admin.dao.aichat_dao import * |
||||
|
from module_admin.entity.vo.user_vo import CurrentUserModel |
||||
|
from datetime import datetime |
||||
|
from utils.common_util import CamelCaseUtil |
||||
|
|
||||
|
|
||||
|
class AiChatService: |
||||
|
""" |
||||
|
智能问答服务层 |
||||
|
""" |
||||
|
|
||||
|
@classmethod |
||||
|
async def get_ai_session_list_services(cls, result_db: AsyncSession, sessionId: str, |
||||
|
current_user: Optional[CurrentUserModel] = None): |
||||
|
ai_session_list = await AiChatDao.get_ai_session_list(result_db, sessionId, current_user.user.user_id) # 查询最新的20条 |
||||
|
return ai_session_list |
||||
|
|
||||
|
@classmethod |
||||
|
async def get_ai_chat_list_services(cls, result_db: AsyncSession, sessionId: str, |
||||
|
current_user: Optional[CurrentUserModel] = None): |
||||
|
ai_session_list = await AiChatDao.get_ai_chat_list(result_db, sessionId, current_user.user.user_id) # 查询最新的20条 |
||||
|
return CamelCaseUtil.transform_result(ai_session_list) |
||||
|
|
||||
|
@classmethod |
||||
|
async def delete_chat_session(cls, result_db: AsyncSession, sessionId: str, |
||||
|
current_user: Optional[CurrentUserModel] = None): |
||||
|
await AiChatDao.delete_chat_session(result_db, sessionId, current_user.user.user_id) |
||||
|
await result_db.commit() |
||||
|
return CrudResponseModel(is_success=True, message='删除成功') |
||||
|
|
||||
|
@classmethod |
||||
|
async def add_chat(cls, result_db: AsyncSession, add_chat: AiChatModel, |
||||
|
current_user: Optional[CurrentUserModel] = None): |
||||
|
chat_session = await AiChatDao.get_ai_chat_by_id(add_chat.sessionId, result_db, current_user.user.user_id) |
||||
|
print(chat_session) |
||||
|
add_chat.user = current_user.user.user_id |
||||
|
if add_chat.time is None: |
||||
|
add_chat.time = datetime.now().strftime("%Y-%m-%d %H:%M:%S") |
||||
|
if chat_session is None: |
||||
|
await AiChatDao.add_ai_chat_session(add_chat.sessionId, add_chat.sessionName, |
||||
|
add_chat.time, result_db, current_user.user.user_id) |
||||
|
await result_db.commit() |
||||
|
chat_history = AiChatHistory(**add_chat.dict()) |
||||
|
chat_history.chatId = uuid.uuid4() |
||||
|
await AiChatDao.add_ai_chat_history(chat_history, result_db) |
||||
|
await result_db.commit() |
||||
|
return CrudResponseModel(is_success=True, message='操作成功') |
||||
|
|
||||
|
@classmethod |
||||
|
async def update_chat(cls, result_db: AsyncSession, update_chat: AiChatModel): |
||||
|
await AiChatDao.update_ai_chat_history(update_chat, result_db) |
||||
|
await result_db.commit() |
||||
|
return CrudResponseModel(is_success=True, message='操作成功') |
||||
@ -0,0 +1,177 @@ |
|||||
|
from minio import Minio, InvalidResponseError, S3Error |
||||
|
|
||||
|
|
||||
|
# MinIO使用bucket（桶）来组织对象。 |
||||
|
# bucket类似于文件夹或目录，其中每个bucket可以容纳任意数量的对象。 |
||||
|
class Bucket: |
||||
|
|
||||
|
def __init__(self, minio_address, minio_admin, minio_password): |
||||
|
# 通过ip 账号 密码 连接minio server |
||||
|
# Http连接 将secure设置为False |
||||
|
self.minioClient = Minio(endpoint=minio_address, |
||||
|
access_key=minio_admin, |
||||
|
secret_key=minio_password, |
||||
|
secure=False) |
||||
|
|
||||
|
def create_one_bucket(self, bucket_name): |
||||
|
# 创建桶(调用make_bucket api来创建一个桶) |
||||
|
""" |
||||
|
桶命名规则：小写字母，句点，连字符和数字 允许使用 长度至少3个字符 |
||||
|
使用大写字母、下划线等会报错 |
||||
|
""" |
||||
|
try: |
||||
|
# bucket_exists：检查桶是否存在 |
||||
|
if self.minioClient.bucket_exists(bucket_name=bucket_name): |
||||
|
print("该存储桶已经存在") |
||||
|
else: |
||||
|
self.minioClient.make_bucket(bucket_name=bucket_name) |
||||
|
print(f"{bucket_name}桶创建成功") |
||||
|
except InvalidResponseError as err: |
||||
|
print(err) |
||||
|
|
||||
|
def remove_one_bucket(self, bucket_name): |
||||
|
# 删除桶(调用remove_bucket api来创建一个存储桶) |
||||
|
try: |
||||
|
if self.minioClient.bucket_exists(bucket_name=bucket_name): |
||||
|
self.minioClient.remove_bucket(bucket_name) |
||||
|
print("删除存储桶成功") |
||||
|
else: |
||||
|
print("该存储桶不存在") |
||||
|
except InvalidResponseError as err: |
||||
|
print(err) |
||||
|
|
||||
|
def upload_file_to_bucket(self, bucket_name, file_name, file_path): |
||||
|
""" |
||||
|
将文件上传到bucket |
||||
|
:param bucket_name: minio桶名称 |
||||
|
:param file_name: 存放到minio桶中的文件名字(相当于对文件进行了重命名，可以与原文件名不同) |
||||
|
file_name处可以创建新的目录(文件夹) 例如 /example/file_name |
||||
|
相当于在该桶中新建了一个example文件夹 并把文件放在其中 |
||||
|
:param file_path: 本地文件的路径 |
||||
|
""" |
||||
|
# 桶是否存在 不存在则新建 |
||||
|
check_bucket = self.minioClient.bucket_exists(bucket_name) |
||||
|
if not check_bucket: |
||||
|
self.minioClient.make_bucket(bucket_name) |
||||
|
|
||||
|
try: |
||||
|
self.minioClient.fput_object(bucket_name=bucket_name, |
||||
|
object_name=file_name, |
||||
|
file_path=file_path) |
||||
|
except FileNotFoundError as err: |
||||
|
print('upload_failed: ' + str(err)) |
||||
|
except S3Error as err: |
||||
|
print("upload_failed:", err) |
||||
|
|
||||
|
def download_file_from_bucket(self, bucket_name, minio_file_path, download_file_path): |
||||
|
""" |
||||
|
从bucket下载文件 |
||||
|
:param bucket_name: minio桶名称 |
||||
|
:param minio_file_path: 存放在minio桶中文件名字 |
||||
|
file_name处可以包含目录(文件夹) 例如 /example/file_name |
||||
|
:param download_file_path: 文件获取后存放的路径 |
||||
|
""" |
||||
|
# 桶是否存在 |
||||
|
check_bucket = self.minioClient.bucket_exists(bucket_name) |
||||
|
if check_bucket: |
||||
|
try: |
||||
|
self.minioClient.fget_object(bucket_name=bucket_name, |
||||
|
object_name=minio_file_path, |
||||
|
file_path=download_file_path) |
||||
|
except FileNotFoundError as err: |
||||
|
print('download_failed: ' + str(err)) |
||||
|
except S3Error as err: |
||||
|
print("download_failed:", err) |
||||
|
|
||||
|
def remove_object(self, bucket_name, object_name): |
||||
|
""" |
||||
|
从bucket删除文件 |
||||
|
:param bucket_name: minio桶名称 |
||||
|
:param object_name: 存放在minio桶中的文件名字 |
||||
|
object_name处可以包含目录(文件夹) 例如 /example/file_name |
||||
|
""" |
||||
|
# 桶是否存在 |
||||
|
check_bucket = self.minioClient.bucket_exists(bucket_name) |
||||
|
if check_bucket: |
||||
|
try: |
||||
|
self.minioClient.remove_object(bucket_name=bucket_name, |
||||
|
object_name=object_name) |
||||
|
except FileNotFoundError as err: |
||||
|
print('upload_failed: ' + str(err)) |
||||
|
except S3Error as err: |
||||
|
print("upload_failed:", err) |
||||
|
|
||||
|
# 获取所有的桶 |
||||
|
def get_all_bucket(self): |
||||
|
buckets = self.minioClient.list_buckets() |
||||
|
ret = [] |
||||
|
for _ in buckets: |
||||
|
ret.append(_.name) |
||||
|
return ret |
||||
|
|
||||
|
# 获取一个桶中的所有一级目录和文件 |
||||
|
def get_list_objects_from_bucket(self, bucket_name): |
||||
|
# 桶是否存在 |
||||
|
check_bucket = self.minioClient.bucket_exists(bucket_name) |
||||
|
if check_bucket: |
||||
|
# 获取到该桶中的所有目录和文件 |
||||
|
objects = self.minioClient.list_objects(bucket_name=bucket_name) |
||||
|
ret = [] |
||||
|
for _ in objects: |
||||
|
ret.append(_.object_name) |
||||
|
return ret |
||||
|
|
||||
|
# 获取桶里某个目录下的所有目录和文件 |
||||
|
def get_list_objects_from_bucket_dir(self, bucket_name, dir_name): |
||||
|
# 桶是否存在 |
||||
|
check_bucket = self.minioClient.bucket_exists(bucket_name) |
||||
|
if check_bucket: |
||||
|
# 获取到bucket_name桶中的dir_name下的所有目录和文件 |
||||
|
# prefix 获取的文件路径需包含该前缀 |
||||
|
objects = self.minioClient.list_objects(bucket_name=bucket_name, |
||||
|
prefix=dir_name, |
||||
|
recursive=True) |
||||
|
ret = [] |
||||
|
for _ in objects: |
||||
|
ret.append(_.object_name) |
||||
|
return ret |
||||
|
|
||||
|
|
||||
|
# if __name__ == "__main__": |
||||
|
# # 本地minio登录IP地址和账号密码 |
||||
|
# minio_address = "127.0.0.1:9000" |
||||
|
# minio_admin = "minioadmin" |
||||
|
# minio_password = "minioadmin" |
||||
|
# |
||||
|
# bucket = Bucket(minio_address=minio_address, |
||||
|
# minio_admin=minio_admin, |
||||
|
# minio_password=minio_password) |
||||
|
# 创建桶测试 |
||||
|
# bucket.create_one_bucket('test1') |
||||
|
|
||||
|
# 删除桶测试 |
||||
|
# bucket.remove_one_bucket('test1') |
||||
|
|
||||
|
# 上传文件测试 |
||||
|
# bucket.upload_file_to_bucket('test1', '1.jpg', './1.jpg') |
||||
|
# bucket.upload_file_to_bucket('test1', '/example/1.jpg', './1.jpg') |
||||
|
|
||||
|
# 删除文件测试 |
||||
|
# bucket.remove_object('test1', '1.jpg') |
||||
|
# bucket.remove_object('test', '/example/1.jpg') |
||||
|
|
||||
|
# 下载图像测试 |
||||
|
# bucket.download_file_from_bucket('test1', 'example/1.jpg', './1.jpg') |
||||
|
|
||||
|
# 获取所有的桶 |
||||
|
# ret = bucket.get_all_bucket() |
||||
|
# print(ret) |
||||
|
|
||||
|
# 获取一个桶中的所有一级目录和文件 |
||||
|
# ret = bucket.get_list_objects_from_bucket(bucket_name='test') |
||||
|
# print(ret) |
||||
|
|
||||
|
# 获取一个桶中的某目录下的所有文件 |
||||
|
# ret = bucket.get_list_objects_from_bucket_dir('test', 'example/') |
||||
|
# print(ret) |
||||
|
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,58 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
import {postStream} from '@/utils/request' |
||||
|
|
||||
|
|
||||
|
|
||||
|
export function listChatHistory(sessionId) { |
||||
|
if (sessionId === ''){ |
||||
|
sessionId = '0' |
||||
|
} |
||||
|
return request({ |
||||
|
url: '/aichat/session/list/'+sessionId, |
||||
|
method: 'get', |
||||
|
params: {} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function getChatList(sessionId) { |
||||
|
return request({ |
||||
|
url: '/aichat/chat/list/'+sessionId, |
||||
|
method: 'get', |
||||
|
params: {} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function postChatMessage(data) { |
||||
|
return postStream('/aichat-api/stream-chat',data) |
||||
|
} |
||||
|
|
||||
|
export function DeleteChatSession(sessionId) { |
||||
|
return request({ |
||||
|
url: '/aichat/delete/session/'+sessionId, |
||||
|
method: 'post' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function updateChat(data) { |
||||
|
return request({ |
||||
|
url: '/aichat/update', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export async function addChat(data) { |
||||
|
return request({ |
||||
|
url: '/aichat/add', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 删除菜单
|
||||
|
export function delMenu(menuId) { |
||||
|
return request({ |
||||
|
url: '/system/menu/' + menuId, |
||||
|
method: 'delete' |
||||
|
}) |
||||
|
} |
||||
|
After Width: | Height: | Size: 945 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 22 KiB |
@ -1,9 +1,11 @@ |
|||||
import hasRole from './permission/hasRole' |
import hasRole from './permission/hasRole' |
||||
import hasPermi from './permission/hasPermi' |
import hasPermi from './permission/hasPermi' |
||||
import copyText from './common/copyText' |
import copyText from './common/copyText' |
||||
|
import { ClickOutside as vClickOutside } from 'element-plus' |
||||
|
|
||||
export default function directive(app){ |
export default function directive(app){ |
||||
app.directive('hasRole', hasRole) |
app.directive('hasRole', hasRole) |
||||
app.directive('hasPermi', hasPermi) |
app.directive('hasPermi', hasPermi) |
||||
app.directive('copyText', copyText) |
app.directive('copyText', copyText) |
||||
|
app.directive('click-outside', vClickOutside) |
||||
} |
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
import moment from 'moment' |
||||
|
import 'moment/dist/locale/zh-cn' |
||||
|
moment.locale('zh-cn') |
||||
|
|
||||
|
// 当天日期 YYYY-MM-DD
|
||||
|
export const nowDate = moment().format('YYYY-MM-DD') |
||||
|
|
||||
|
// 当前时间前n天
|
||||
|
export function beforeDay(n) { |
||||
|
return moment().subtract(n, 'days').format('YYYY-MM-DD') |
||||
|
} |
||||
|
|
||||
|
const getCheckDate = (timestamp) => { |
||||
|
if (!timestamp) return false |
||||
|
const dt = new Date(timestamp) |
||||
|
if (isNaN(dt.getTime())) return false |
||||
|
return dt |
||||
|
} |
||||
|
export const datetimeFormat = (timestamp) => { |
||||
|
const dt = getCheckDate(timestamp) |
||||
|
if (!dt) return timestamp |
||||
|
|
||||
|
const y = dt.getFullYear() |
||||
|
const m = (dt.getMonth() + 1 + '').padStart(2, '0') |
||||
|
const d = (dt.getDate() + '').padStart(2, '0') |
||||
|
const hh = (dt.getHours() + '').padStart(2, '0') |
||||
|
const mm = (dt.getMinutes() + '').padStart(2, '0') |
||||
|
const ss = (dt.getSeconds() + '').padStart(2, '0') |
||||
|
|
||||
|
return `${y}-${m}-${d} ${hh}:${mm}:${ss}` |
||||
|
} |
||||
|
|
||||
|
export const dateFormat = (timestamp) => { |
||||
|
const dt = getCheckDate(timestamp) |
||||
|
if (!dt) return timestamp |
||||
|
|
||||
|
const y = dt.getFullYear() |
||||
|
const m = (dt.getMonth() + 1 + '').padStart(2, '0') |
||||
|
const d = (dt.getDate() + '').padStart(2, '0') |
||||
|
|
||||
|
return `${y}-${m}-${d}` |
||||
|
} |
||||
|
|
||||
|
export function fromNowDate(time) { |
||||
|
// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
|
||||
|
const curTime = new Date() |
||||
|
const futureTime = new Date(time) |
||||
|
const timeDiff = futureTime.getTime() - curTime.getTime() |
||||
|
|
||||
|
// 单位换算
|
||||
|
const min = 60 * 1000 |
||||
|
const hour = min * 60 |
||||
|
const day = hour * 24 |
||||
|
const week = day * 7 |
||||
|
|
||||
|
// 计算发布时间距离当前时间的周、天、时、分
|
||||
|
const exceedWeek = Math.floor(timeDiff / week) |
||||
|
const exceedDay = Math.floor(timeDiff / day) |
||||
|
const exceedHour = Math.floor(timeDiff / hour) |
||||
|
const exceedMin = Math.floor(timeDiff / min) |
||||
|
|
||||
|
// 最后判断时间差到底是属于哪个区间，然后return
|
||||
|
if (exceedWeek > 0) { |
||||
|
return '' |
||||
|
} else { |
||||
|
if (exceedDay < 7 && exceedDay > 0) { |
||||
|
return exceedDay + '天后' |
||||
|
} else { |
||||
|
if (exceedHour < 24 && exceedHour > 0) { |
||||
|
return exceedHour + '小时后' |
||||
|
} else { |
||||
|
if (exceedMin < 0) { |
||||
|
return '已过期' |
||||
|
} else { |
||||
|
return '即将到期' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
<template> |
||||
|
<template v-for="(item, index) in source" :key="index"> |
||||
|
<div v-if="item.type === 'table'" style="width: 100%; position: relative"> |
||||
|
<chatTable :data="item.content"></chatTable> |
||||
|
<el-button style="position: absolute;top: 5px;right: 0;z-index: 1;width:30px;height: 30px" @click="downLoadTable(item.content)"> |
||||
|
<el-icon><Download/></el-icon> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<div v-else-if="item.type === 'html_image'" style="width: 100%;margin-top: 5px;height: 320px"> |
||||
|
<htmlCharts :is_large="is_large" :index="'chat-iframe-'+chatIndex+'-'+index" :data="item.content"></htmlCharts> |
||||
|
</div> |
||||
|
<div v-else-if="item.type === 'G6_ER'" style="width: 100%;height: 300px; overflow: hidden; margin-top: 5px;position: relative"> |
||||
|
<antvg6 :is_large="is_large" :g6Data="item.content" :g6Index="'g6-container-'+chatIndex+'-'+index"></antvg6> |
||||
|
<el-button style="position: absolute;top: 5px;right: 0;z-index: 1;width:30px;height: 30px" @click="fullscreenG6(item.content)"> |
||||
|
<el-icon><FullScreen/></el-icon> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<div v-else style="width: 100%;margin-top: 5px"> |
||||
|
<markdown :markdown-string="item.content"></markdown> |
||||
|
</div> |
||||
|
</template> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import * as XLSX from 'xlsx'; |
||||
|
import markdown from './markdown.vue' |
||||
|
import antvg6 from './antv-g6.vue' |
||||
|
import chatTable from './chatTable.vue' |
||||
|
import htmlCharts from './htmlCharts.vue' |
||||
|
import {Download, FullScreen} from "@element-plus/icons-vue"; |
||||
|
import { ref, watch} from 'vue' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
source: Array, |
||||
|
is_large: Boolean, |
||||
|
chatIndex: Number, |
||||
|
}) |
||||
|
|
||||
|
const emit = defineEmits(['fullscreenG6']) |
||||
|
function fullscreenG6(data){ |
||||
|
emit('fullscreenG6',data) |
||||
|
} |
||||
|
|
||||
|
function downLoadTable(data){ |
||||
|
const worksheet = XLSX.utils.json_to_sheet(data); |
||||
|
|
||||
|
// 创建一个新的工作簿并将工作表添加到工作簿中 |
||||
|
const workbook = XLSX.utils.book_new(); |
||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); |
||||
|
|
||||
|
// 生成 Excel 文件并触发下载 |
||||
|
XLSX.writeFile(workbook, '导出数据.xlsx'); |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
@ -0,0 +1,240 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-text type="info"> |
||||
|
<span class="ml-4" style="margin-left: 4px">{{ datetimeFormat(data.time) }}</span> |
||||
|
</el-text> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span> |
||||
|
<el-tooltip effect="dark" content="换个答案" placement="top" popper-class="operate-tooltip"> |
||||
|
<el-button text @click="regeneration" style="padding: 0"> |
||||
|
<el-icon><RefreshRight /></el-icon> |
||||
|
</el-button> |
||||
|
</el-tooltip> |
||||
|
<el-divider direction="vertical" /> |
||||
|
<el-tooltip effect="dark" content="复制" placement="top" popper-class="operate-tooltip"> |
||||
|
<el-button text @click="copyClick(data)" style="padding: 0"> |
||||
|
<el-icon><CopyDocument /></el-icon> |
||||
|
</el-button> |
||||
|
</el-tooltip> |
||||
|
<el-divider direction="vertical" /> |
||||
|
<el-tooltip |
||||
|
effect="dark" |
||||
|
content="赞同" |
||||
|
placement="top" |
||||
|
v-if="data.operate === null || data.operate === ''" |
||||
|
popper-class="operate-tooltip" |
||||
|
> |
||||
|
<el-button text @click="thumbUp" style="padding: 0"> |
||||
|
<i class="ri-thumb-up-line"></i> |
||||
|
</el-button> |
||||
|
</el-tooltip> |
||||
|
<el-tooltip |
||||
|
effect="dark" |
||||
|
content="取消赞同" |
||||
|
placement="top" |
||||
|
v-if="data.operate !== null && data.operate === 'thumb_up'" |
||||
|
popper-class="operate-tooltip" |
||||
|
> |
||||
|
<el-button text @click="cancelThumb" style="padding: 0"> |
||||
|
<i class="ri-thumb-up-fill" style="color: orange"></i> |
||||
|
</el-button> |
||||
|
</el-tooltip> |
||||
|
<el-divider direction="vertical" v-if="data.operate === null || data.operate === ''" /> |
||||
|
<el-popover |
||||
|
:visible="visible" |
||||
|
v-if="data.operate === null || data.operate === ''" |
||||
|
placement="left" |
||||
|
popper-style="z-index:99999;" |
||||
|
:show-arrow=false |
||||
|
title="反对原因" |
||||
|
:width="260"> |
||||
|
<template #default> |
||||
|
<el-input v-model="thumbDownReason"></el-input> |
||||
|
<div style="text-align: right; margin-top: 10px"> |
||||
|
<el-button size="small" text @click="closeThumb">取消</el-button> |
||||
|
<el-button size="small" type="primary" @click="confirmReason">确定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #reference> |
||||
|
<el-button text @click="showPop" style="padding: 0"> |
||||
|
<el-tooltip |
||||
|
effect="dark" |
||||
|
content="反对" |
||||
|
placement="top" |
||||
|
popper-class="operate-tooltip" |
||||
|
> |
||||
|
<i class="ri-thumb-down-line"></i> |
||||
|
</el-tooltip> |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
<el-tooltip |
||||
|
effect="dark" |
||||
|
:content="'反对原因:'+data.thumbDownReason" |
||||
|
placement="top" |
||||
|
v-if="data.operate !== null && data.operate === 'thumb_down'" |
||||
|
popper-class="operate-tooltip" |
||||
|
> |
||||
|
<el-button text @click="cancelThumb" style="padding: 0"> |
||||
|
<i class="ri-thumb-down-fill" style="color: orange"></i> |
||||
|
</el-button> |
||||
|
</el-tooltip> |
||||
|
</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref } from 'vue' |
||||
|
import { useRoute } from 'vue-router' |
||||
|
import Clipboard from 'vue-clipboard3' |
||||
|
import { datetimeFormat } from '@/utils/time' |
||||
|
import {updateChat} from "@/api/aichat/aichat.js"; |
||||
|
const { proxy } = getCurrentInstance(); |
||||
|
const route = useRoute() |
||||
|
const { |
||||
|
params: { id } |
||||
|
} = route |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => {} |
||||
|
}, |
||||
|
index: Number |
||||
|
}) |
||||
|
const thumbDownReason = ref("") |
||||
|
const visible = ref(false) |
||||
|
|
||||
|
const emit = defineEmits(['update:data', 'regeneration', 'changeThumb']) |
||||
|
|
||||
|
function regeneration() { |
||||
|
emit('regeneration') |
||||
|
} |
||||
|
|
||||
|
function closeThumb(){ |
||||
|
visible.value = false |
||||
|
thumbDownReason.value = "" |
||||
|
} |
||||
|
function showPop(){ |
||||
|
visible.value = true |
||||
|
thumbDownReason.value = props.data.thumbDownReason?props.data.thumbDownReason:'' |
||||
|
} |
||||
|
function confirmReason(){ |
||||
|
let obj = { |
||||
|
operate:'thumb_down', |
||||
|
thumbDownReason: thumbDownReason.value |
||||
|
} |
||||
|
let chat = JSON.parse(JSON.stringify(props.data)) |
||||
|
chat.operate = 'thumb_down' |
||||
|
chat.thumbDownReason = thumbDownReason.value |
||||
|
chat.content = JSON.stringify(chat.content) |
||||
|
updateChat(chat).then(res=>{ |
||||
|
visible.value = false |
||||
|
emit("changeThumb",props.index,obj) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
async function copyClick(data) { |
||||
|
const {toClipboard} = Clipboard() |
||||
|
let str = '' |
||||
|
let content = data.content |
||||
|
for (let i = 0; i < content.length; i++){ |
||||
|
let cont = content[i] |
||||
|
if (cont.type === 'text'){ |
||||
|
str += cont.content |
||||
|
} |
||||
|
} |
||||
|
try { |
||||
|
await toClipboard(str) |
||||
|
proxy.$modal.msgSuccess("复制成功"); |
||||
|
} catch (e) { |
||||
|
console.error(e) |
||||
|
proxy.$modal.msgError('复制失败') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function thumbUp(){ |
||||
|
let obj = { |
||||
|
operate:'thumb_up', |
||||
|
thumbDownReason: '' |
||||
|
} |
||||
|
let chat = JSON.parse(JSON.stringify(props.data)) |
||||
|
chat.operate = 'thumb_up' |
||||
|
chat.content = JSON.stringify(chat.content) |
||||
|
updateChat(chat).then(res=>{ |
||||
|
emit("changeThumb",props.index,obj) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function cancelThumb(){ |
||||
|
let obj = { |
||||
|
operate:'', |
||||
|
thumbDownReason: '' |
||||
|
} |
||||
|
let chat = JSON.parse(JSON.stringify(props.data)) |
||||
|
chat.operate = '' |
||||
|
chat.content = JSON.stringify(chat.content) |
||||
|
updateChat(chat).then(res=>{ |
||||
|
emit("changeThumb",props.index,obj) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function voteHandle(operate) { |
||||
|
let chat = props.data |
||||
|
let obj = { |
||||
|
operate:'', |
||||
|
thumbDownReason:'' |
||||
|
} |
||||
|
if (operate === 'thumb_up'){ |
||||
|
chat.operate = 'thumb_up' |
||||
|
chat.content = JSON.stringify(chat.content) |
||||
|
updateChat(chat).then(res=>{ |
||||
|
obj.operate = 'thumb_up' |
||||
|
emit("changeThumb",props.index,obj) |
||||
|
}) |
||||
|
} |
||||
|
if (operate === 'cancel-thumb-up'){ |
||||
|
chat.operate = '' |
||||
|
chat.content = JSON.stringify(chat.content) |
||||
|
updateChat(chat).then(res=>{ |
||||
|
obj.operate = '' |
||||
|
emit("changeThumb",props.index,obj) |
||||
|
}) |
||||
|
} |
||||
|
if(operate === 'cancel-thumb-down'){ |
||||
|
|
||||
|
} |
||||
|
emit("voteHandle",props.index,val) |
||||
|
} |
||||
|
|
||||
|
function ToPlainText(md) { |
||||
|
return ( |
||||
|
md |
||||
|
// 移除图片  |
||||
|
.replace(/!\[.*?\]\(.*?\)/g, '') |
||||
|
// 移除链接 [text](url) |
||||
|
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') |
||||
|
// 移除 标题符号 (#, ##, ###) |
||||
|
.replace(/^#{1,6}\s+/gm, '') |
||||
|
// 移除加粗 **text** 或 __text__ |
||||
|
.replace(/\*\*(.*?)\*\*/g, '$1') |
||||
|
.replace(/__(.*?)__/g, '$1') |
||||
|
// 移除斜体 *text* 或 _text_ |
||||
|
.replace(/\*(.*?)\*/g, '$1') |
||||
|
.replace(/_(.*?)_/g, '$1') |
||||
|
// 移除行内代码 `code` |
||||
|
.replace(/`(.*?)`/g, '$1') |
||||
|
// 移除代码块 ```code``` |
||||
|
.replace(/```[\s\S]*?```/g, '') |
||||
|
// 移除多余的换行符 |
||||
|
.replace(/\n{2,}/g, '\n') |
||||
|
.trim() |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.operate-tooltip { |
||||
|
z-index: 99999 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,727 @@ |
|||||
|
<template> |
||||
|
<div ref="aiChatRef" class="ai-chat"> |
||||
|
<el-scrollbar ref="scrollDiv" @scroll="handleScrollTop"> |
||||
|
<div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width" style="padding: 24px;"> |
||||
|
<div class="item-content mb-16" style="margin-bottom: 16px"> |
||||
|
<div class="avatar"> |
||||
|
<img src="@/assets/logo/logo2.png" height="30px" /> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<el-card shadow="always" class="dialog-card"> |
||||
|
<span style="font-size: 14px">您好，我是 果知小助手，您可以向我提出关于 果知的相关问题。</span> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<template v-for="(item, index) in chatList" :key="index"> |
||||
|
<!-- 问题 --> |
||||
|
<div v-if="item.type === 'question'" class="item-content mb-16 lighter" style="margin-bottom: 16px;font-weight: 400"> |
||||
|
<div class="avatar"> |
||||
|
<el-avatar style="width:30px;height: 30px;background: #3370FF"> |
||||
|
<img src="@/assets/aichat/user-icon.svg" style="width: 30px" alt="" /> |
||||
|
</el-avatar> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="text break-all pre-wrap" style="word-break: break-all;white-space: pre-wrap;"> |
||||
|
{{ item.content }} |
||||
|
</div> |
||||
|
<el-tag type="success" style="margin-bottom: 5px;cursor: pointer" v-for="(fileName,index) in item.file" :disable-transitions="false" @click="downloadFile(fileName.file,fileName.bucket,item.sessionId)">{{fileName.file}}</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 回答 --> |
||||
|
<div v-if="item.type === 'answer'" class="item-content mb-16 lighter" style="margin-bottom: 16px;font-weight: 400"> |
||||
|
<div class="avatar"> |
||||
|
<img src="@/assets/logo/logo2.png" height="30px" /> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<el-card shadow="always" class="dialog-card"> |
||||
|
<MdRenderer :is_large="is_large" :chatIndex="index" :source="item.content" @fullscreenG6="fullscreen"></MdRenderer> |
||||
|
</el-card> |
||||
|
<div class="flex-between mt-8" style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px"> |
||||
|
<div> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
v-if="item.isStop && !item.isEnd" |
||||
|
@click="startChat(index)" |
||||
|
link |
||||
|
>继续 |
||||
|
</el-button> |
||||
|
<el-button type="primary" v-else-if="!item.isEnd" @click="stopChat(index)" link |
||||
|
>停止回答 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="item.isEnd" class="flex-between" style="display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<OperationButton :data="item" :index="index" @regeneration="regenerationChart(index)" @changeThumb="changeThumb" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
<div class="ai-chat__operate p-24" style="padding: 24px"> |
||||
|
<!-- <slot name="operateBefore" />--> |
||||
|
<div class="chat-width"> |
||||
|
<el-button type="primary" link class="new-chat-button mb-8" style="margin-bottom: 8px" @click="openUpload"> |
||||
|
<el-icon><Upload /></el-icon><span class="ml-4">导入文件</span> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-tag type="success" style="margin-bottom: 5px" v-for="(tag,index) in currentFiles" closable :disable-transitions="false" @close="removeFile(index)">{{tag.file}}</el-tag> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span v-if="currentMachine.length > 0">与 </span> |
||||
|
<el-tag style="margin-bottom: 5px" size="large" v-for="tag in currentMachine" closable :disable-transitions="false" @close="removeMachine"> |
||||
|
<span style="font-size: 16px;margin-left: 10px">{{tag}}</span> |
||||
|
</el-tag> |
||||
|
<span v-if="currentMachine.length > 0"> 对话</span> |
||||
|
</div> |
||||
|
<div class="operate-textarea flex chat-width"> |
||||
|
<el-popover |
||||
|
:visible="popoverVisible" |
||||
|
placement="top" |
||||
|
:width="is_large?'400px':'860px'" |
||||
|
popper-style="max-width:860px;z-index:99999;margin-left:35px" |
||||
|
:show-arrow=false |
||||
|
:offset=1 |
||||
|
> |
||||
|
<template #reference> |
||||
|
<el-input |
||||
|
ref="quickInputRef" |
||||
|
v-model="inputValue" |
||||
|
:placeholder="'@选择机器人，Ctrl+Enter 换行，Enter发送'" |
||||
|
:autosize="{ minRows: 1, maxRows: 4 }" |
||||
|
type="textarea" |
||||
|
:maxlength="100000" |
||||
|
@input="handleInput" |
||||
|
@keydown.enter="sendChatHandle($event)" |
||||
|
/> |
||||
|
</template> |
||||
|
<template #default> |
||||
|
<div style="width: 100%" v-click-outside="clickoutside"> |
||||
|
<div style="align-items: center;display: flex"> |
||||
|
<span style="font-size: 25px;font-weight: bold">选择智能体</span> |
||||
|
<el-link :underline="false" style="font-size: 20px;margin-left: auto" @click="closeMachinePop"><i class="ri-close-large-line"></i></el-link> |
||||
|
</div> |
||||
|
<el-scrollbar max-height="200px"> |
||||
|
<div class="machineDiv" @click="chooseMachine('元数据专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">元数据专家</span> |
||||
|
</div> |
||||
|
<div class="machineDiv" @click="chooseMachine('数据标准专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">数据标准专家</span> |
||||
|
</div> |
||||
|
<div class="machineDiv" @click="chooseMachine('数据质量专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">数据质量专家</span> |
||||
|
</div> |
||||
|
<div class="machineDiv" @click="chooseMachine('数据模型专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">数据模型专家</span> |
||||
|
</div> |
||||
|
<div class="machineDiv" @click="chooseMachine('数据安全专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">数据安全专家</span> |
||||
|
</div> |
||||
|
<div class="machineDiv" @click="chooseMachine('数据分析专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">数据分析专家</span> |
||||
|
</div> |
||||
|
<div class="machineDiv" @click="chooseMachine('数据治理管理专家','@/assets/aichat/智能体logo.jpg')" style="align-items: center;width:100%;display: flex"> |
||||
|
<el-avatar style="width: 30px;height: 30px"><img src="@/assets/aichat/智能体logo.jpg"></el-avatar> |
||||
|
<span style="font-size: 16px;margin-left: 10px">数据治理管理专家</span> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
<div class="operate flex align-center"> |
||||
|
<el-button |
||||
|
text |
||||
|
class="sent-button" |
||||
|
:disabled="isDisabledChart || loading" |
||||
|
@click="sendChatHandle" |
||||
|
> |
||||
|
<img v-show="isDisabledChart || loading" src="@/assets/aichat/icon_send.svg" alt="" /> |
||||
|
<img v-show="!isDisabledChart && !loading" src="@/assets/aichat/icon_send_colorful.svg" alt="" /> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 文件导入对话框 --> |
||||
|
<el-dialog title="文件导入" v-model="upload.open" width="400px" append-to-body> |
||||
|
<el-upload v-if="upload.open" |
||||
|
ref="uploadRef" |
||||
|
:headers="upload.headers" |
||||
|
:action="upload.url" |
||||
|
:data = "upload.data" |
||||
|
:disabled="upload.isUploading" |
||||
|
:on-progress="handleFileUploadProgress" |
||||
|
:on-success="handleFileSuccess" |
||||
|
:auto-upload="false" |
||||
|
drag |
||||
|
> |
||||
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
|
</el-upload> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitFileForm">确 定</el-button> |
||||
|
<el-button @click="upload.open = false">取 消</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog z-index="99999999999999999999" title="ER图全览" v-if="showFullscreenG6Data" :fullscreen="true" v-model="showFullscreenG6Data" append-to-body> |
||||
|
<fullscreenG6 :g6Data="fullscreenG6Data"></fullscreenG6> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue' |
||||
|
import { useRoute } from 'vue-router' |
||||
|
import antvg6 from './antv-g6.vue' |
||||
|
import OperationButton from './OperationButton.vue' |
||||
|
import MdRenderer from '@/views/aichat/MdRenderer.vue' |
||||
|
import fullscreenG6 from '@/views/aichat/fullscreenG6.vue' |
||||
|
import {getToken} from "@/utils/auth.js"; |
||||
|
import {postChatMessage} from "@/api/aichat/aichat.js" |
||||
|
import Cookies from "js-cookie"; |
||||
|
import {addChat} from "@/api/aichat/aichat"; |
||||
|
|
||||
|
defineOptions({ name: 'AiChat' }) |
||||
|
const route = useRoute() |
||||
|
const fullscreenG6Data = ref(null) |
||||
|
const showFullscreenG6Data = ref(false) |
||||
|
const { |
||||
|
params: { accessToken, id }, |
||||
|
query: { mode } |
||||
|
} = route |
||||
|
const props = defineProps({ |
||||
|
is_large: Boolean, |
||||
|
cookieSessionId: String, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => {} |
||||
|
}, |
||||
|
record: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
chatId: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, // 历史记录Id |
||||
|
debug: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const { proxy } = getCurrentInstance(); |
||||
|
|
||||
|
const aiChatRef = ref() |
||||
|
const quickInputRef = ref() |
||||
|
const scrollDiv = ref() |
||||
|
const dialogScrollbar = ref() |
||||
|
const loading = ref(false) |
||||
|
const inputValue = ref('') |
||||
|
const chartOpenId = ref('') |
||||
|
const chatList = ref([]) |
||||
|
const answerList = ref([]) |
||||
|
|
||||
|
const popoverVisible = ref(false) |
||||
|
const currentMachine = ref([]) |
||||
|
const currentFiles = ref([]) |
||||
|
const upload = reactive({ |
||||
|
// 是否显示弹出层（用户导入） |
||||
|
open: false, |
||||
|
// 弹出层标题（用户导入） |
||||
|
title: "", |
||||
|
// 是否禁用上传 |
||||
|
isUploading: false, |
||||
|
// 设置上传的请求头部 |
||||
|
headers: { Authorization: "Bearer " + getToken() }, |
||||
|
// 上传的地址 |
||||
|
url: import.meta.env.VITE_APP_BASE_API + "/aichat/upload", |
||||
|
data: {"sessionId":Cookies.get("chatSessionId")} |
||||
|
}); |
||||
|
const isDisabledChart = computed( |
||||
|
() => !(inputValue.value.trim()) |
||||
|
) |
||||
|
|
||||
|
const emit = defineEmits(['scroll']) |
||||
|
|
||||
|
function setScrollBottom() { |
||||
|
// 将滚动条滚动到最下面 |
||||
|
scrollDiv.value.setScrollTop(getMaxHeight()) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 滚动条距离最上面的高度 |
||||
|
*/ |
||||
|
const scrollTop = ref(0) |
||||
|
|
||||
|
const scorll = ref(true) |
||||
|
|
||||
|
const getMaxHeight = () => { |
||||
|
return dialogScrollbar.value.scrollHeight |
||||
|
} |
||||
|
const handleScrollTop = ($event) => { |
||||
|
scrollTop.value = $event.scrollTop |
||||
|
if ( |
||||
|
dialogScrollbar.value.scrollHeight - (scrollTop.value + scrollDiv.value.wrapRef.offsetHeight) <= |
||||
|
30 |
||||
|
) { |
||||
|
scorll.value = true |
||||
|
} else { |
||||
|
scorll.value = false |
||||
|
} |
||||
|
emit('scroll', { ...$event, dialogScrollbar: dialogScrollbar.value, scrollDiv: scrollDiv.value }) |
||||
|
} |
||||
|
|
||||
|
const handleScroll = () => { |
||||
|
if (!props.log && scrollDiv.value) { |
||||
|
// 内部高度小于外部高度 就需要出滚动条 |
||||
|
if (scrollDiv.value.wrapRef.offsetHeight < dialogScrollbar.value.scrollHeight) { |
||||
|
// 如果当前滚动条距离最下面的距离在 规定距离 滚动条就跟随 |
||||
|
if (scorll.value) { |
||||
|
scrollDiv.value.setScrollTop(getMaxHeight()) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/**文件上传中处理 */ |
||||
|
const handleFileUploadProgress = (event, file, fileList) => { |
||||
|
upload.isUploading = true; |
||||
|
}; |
||||
|
|
||||
|
const handleFileSuccess = (response, file, fileList) => { |
||||
|
currentFiles.value.push({file:response.data.file,bucket:response.data.bucket}) |
||||
|
upload.open = false; |
||||
|
upload.isUploading = false; |
||||
|
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }); |
||||
|
}; |
||||
|
|
||||
|
/** 提交上传文件 */ |
||||
|
function submitFileForm() { |
||||
|
proxy.$refs["uploadRef"].submit(); |
||||
|
} |
||||
|
|
||||
|
watch( |
||||
|
() => props.chatId, |
||||
|
(val) => { |
||||
|
if (val && val !== 'new') { |
||||
|
chartOpenId.value = val |
||||
|
} else { |
||||
|
chartOpenId.value = '' |
||||
|
} |
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
|
||||
|
watch( |
||||
|
() => props.record, |
||||
|
(value) => { |
||||
|
chatList.value = value |
||||
|
}, |
||||
|
{ |
||||
|
immediate: true |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
watch(() => props.cookieSessionId, value => upload.data = {sessionId:value}) |
||||
|
|
||||
|
function regenerationChart(index){ |
||||
|
let question = chatList.value[index - 1] |
||||
|
let chat = { |
||||
|
"type":"question", |
||||
|
"content":question.content, |
||||
|
"time": formatDate(new Date()), |
||||
|
"file": question.file} |
||||
|
chatList.value.push(chat) |
||||
|
let data = { |
||||
|
"query": chat.content, |
||||
|
"user_id": Cookies.get("username"), |
||||
|
"robot": currentMachine.value.length>0?currentMachine.value[0]:"", |
||||
|
"sessionId": props.sessionId, |
||||
|
"doc": chat.file, |
||||
|
"history": [] |
||||
|
} |
||||
|
sendChatMessage(data) |
||||
|
} |
||||
|
|
||||
|
function changeThumb(index,chat){ |
||||
|
chatList.value[index].operate = chat.operate |
||||
|
chatList.value[index].thumbDownReason = chat.thumbDownReason |
||||
|
} |
||||
|
|
||||
|
function openUpload(){ |
||||
|
upload.open = true |
||||
|
} |
||||
|
function chooseMachine(val){ |
||||
|
inputValue.value = inputValue.value.slice(0,-1) |
||||
|
currentMachine.value = [val] |
||||
|
popoverVisible.value = false |
||||
|
} |
||||
|
|
||||
|
function closeMachinePop(){ |
||||
|
if (inputValue.value.endsWith('@')){ |
||||
|
inputValue.value = inputValue.value.slice(0,-1) |
||||
|
} |
||||
|
popoverVisible.value = false |
||||
|
} |
||||
|
|
||||
|
function removeMachine(){ |
||||
|
currentMachine.value = [] |
||||
|
} |
||||
|
|
||||
|
function fullscreen(data){ |
||||
|
fullscreenG6Data.value = data |
||||
|
showFullscreenG6Data.value = true |
||||
|
} |
||||
|
|
||||
|
function clickoutside() { |
||||
|
if (inputValue.value.endsWith('@')){ |
||||
|
inputValue.value = inputValue.value.slice(0,-1) |
||||
|
} |
||||
|
popoverVisible.value = false |
||||
|
} |
||||
|
|
||||
|
function removeFile(index){ |
||||
|
currentFiles.value = currentFiles.value.slice(index,1) |
||||
|
} |
||||
|
|
||||
|
function handleInput() { |
||||
|
popoverVisible.value = inputValue.value.endsWith("@"); |
||||
|
} |
||||
|
|
||||
|
function padZero(num) { |
||||
|
return num < 10 ? '0' + num : num; |
||||
|
} |
||||
|
|
||||
|
function formatDate(date) { |
||||
|
const year = date.getFullYear(); |
||||
|
const month = padZero(date.getMonth() + 1); // 月份从0开始，所以需要+1 |
||||
|
const day = padZero(date.getDate()); |
||||
|
const hours = padZero(date.getHours()); |
||||
|
const minutes = padZero(date.getMinutes()); |
||||
|
const seconds = padZero(date.getSeconds()); |
||||
|
|
||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||
|
} |
||||
|
|
||||
|
function downloadFile(file,bucket,sessionId){ |
||||
|
let data = {file,bucket,sessionId} |
||||
|
proxy.download("aichat/file/download", { |
||||
|
...data, |
||||
|
}, file); |
||||
|
} |
||||
|
|
||||
|
async function sendChatHandle(event) { |
||||
|
if (!event.ctrlKey) { |
||||
|
// 如果没有按下组合键ctrl，则会阻止默认事件 |
||||
|
event.preventDefault() |
||||
|
if (inputValue.value.trim() && ((chatList.value.length > 1 && chatList.value[chatList.value.length - 1].isEnd) || chatList.value.length < 2)) { |
||||
|
chatList.value.push({ |
||||
|
"type": "question", |
||||
|
"content": inputValue.value.trim(), |
||||
|
"time": formatDate(new Date()), |
||||
|
"sessionId": Cookies.get("chatSessionId"), |
||||
|
"sessionName": chatList.value.length > 0 ? chatList.value[0].content.substring(0, 20) : inputValue.value.trim().substring(0, 20), |
||||
|
"file": currentFiles.value |
||||
|
}) |
||||
|
nextTick(() => { |
||||
|
// 将滚动条滚动到最下面 |
||||
|
scrollDiv.value.setScrollTop(getMaxHeight()) |
||||
|
}) |
||||
|
let question = JSON.parse(JSON.stringify(chatList.value[chatList.value.length - 1])) |
||||
|
question.file = JSON.stringify(question.file) |
||||
|
await addChat(question) |
||||
|
inputValue.value = '' |
||||
|
let data = { |
||||
|
"query": inputValue.value.trim(), |
||||
|
"user_id": Cookies.get("username"), |
||||
|
"robot": currentMachine.value.length > 0 ? currentMachine.value[0] : "", |
||||
|
"sessionId": Cookies.get("chatSessionId"), |
||||
|
"doc": currentFiles.value, |
||||
|
"history": [] |
||||
|
} |
||||
|
sendChatMessage(data) |
||||
|
} |
||||
|
} else { |
||||
|
// 如果同时按下ctrl+回车键，则会换行 |
||||
|
inputValue.value += '\n' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function sendChatMessage(data){ |
||||
|
postChatMessage(data).then(res=>{ |
||||
|
currentFiles.value = [] |
||||
|
chatList.value.push({"type":"answer","content":[],"isEnd":false,"isStop":false,"sessionId":chatList.value[0].sessionId,"sessionName":chatList.value[0].sessionName, "operate":'',"thumbDownReason":''}) |
||||
|
answerList.value.push({"index":chatList.value.length-1, "content":[], "isEnd":false}) |
||||
|
const reader = res.body.getReader() |
||||
|
const write = getWrite(reader) |
||||
|
reader.read().then(write).then(()=> { |
||||
|
let answer = JSON.parse(JSON.stringify(chatList.value[chatList.value.length - 1])) |
||||
|
answer.content = JSON.stringify(answer.content) |
||||
|
addChat(answer) |
||||
|
}) |
||||
|
}).catch((e) => { |
||||
|
chatList.value.push({"type":"answer","content":[{"type":"text","content":"服务异常"}],"isEnd":true,"isStop":false}) |
||||
|
}) |
||||
|
} |
||||
|
watch( |
||||
|
chatList, |
||||
|
() => { |
||||
|
handleScroll() |
||||
|
}, |
||||
|
{ deep: true, immediate: true } |
||||
|
) |
||||
|
const getWrite = (reader) => { |
||||
|
let tempResult = ''; |
||||
|
/** |
||||
|
* 处理流式数据 |
||||
|
* @param {done, value} obj - 包含 done 和 value 属性的对象 |
||||
|
*/ |
||||
|
const write_stream = ({ done,value }) => { |
||||
|
try { |
||||
|
if (done) { |
||||
|
return |
||||
|
} |
||||
|
const decoder = new TextDecoder('utf-8'); |
||||
|
let str = decoder.decode(value, { stream: true }); |
||||
|
// 解释：数据流返回的 chunk 可能不完整，因此我们需要累积并拆分它们。 |
||||
|
tempResult += str; |
||||
|
const split = tempResult.match(/data:.*}\n\n/g); |
||||
|
if (split) { |
||||
|
str = split.join(''); |
||||
|
tempResult = tempResult.replace(str, ''); |
||||
|
} else { |
||||
|
return reader.read().then(write_stream); |
||||
|
} |
||||
|
// 如果 str 存在且以 "data:" 开头，则处理数据块。 |
||||
|
if (str && str.startsWith('data:')) { |
||||
|
split.forEach((chunkStr) => { |
||||
|
const chunk = JSON.parse(chunkStr.replace('data:', '')); |
||||
|
if (chunk.docs && chunk.docs[0].length > 0){ |
||||
|
//超链接 |
||||
|
answerList.value[answerList.value.length - 1].content.push({"content":chunk.docs[0],"type":"docs"}) |
||||
|
}else if (chunk.G6_ER && chunk.G6_ER.length > 0){ |
||||
|
//说明是ER图 |
||||
|
answerList.value[answerList.value.length - 1].content.push({"content":chunk.G6_ER,"type":"G6_ER"}) |
||||
|
}else if (chunk.html_image && chunk.html_image.length > 0){ |
||||
|
//说明是html的echarts图 |
||||
|
answerList.value[answerList.value.length - 1].content.push({"content":chunk.html_image,"type":"html_image"}) |
||||
|
}else if (chunk.table && chunk.table.length > 0){ |
||||
|
//说明是 表格 |
||||
|
answerList.value[answerList.value.length - 1].content.push({"content":chunk.table,"type":"table"}) |
||||
|
}else { |
||||
|
// 纯文本 |
||||
|
let last_answer = answerList.value[answerList.value.length - 1].content |
||||
|
chunk.choices[0].delta.content = chunk.choices[0].delta.content.replace("\n","\n\n") |
||||
|
if (last_answer.length > 0) { |
||||
|
if(last_answer[last_answer.length - 1].type === 'text'){ |
||||
|
answerList.value[answerList.value.length-1].content[last_answer.length - 1].content += chunk.choices[0].delta.content |
||||
|
}else{ |
||||
|
answerList.value[answerList.value.length - 1].content.push({"content":chunk.choices[0].delta.content,"type":"text"}) |
||||
|
} |
||||
|
}else{ |
||||
|
answerList.value[answerList.value.length - 1].content.push({"content":chunk.choices[0].delta.content,"type":"text"}) |
||||
|
} |
||||
|
} |
||||
|
if (!chatList.value[answerList.value[answerList.value.length - 1].index].isStop){ |
||||
|
chatList.value[chatList.value.length - 1].content =answerList.value[answerList.value.length - 1].content |
||||
|
} |
||||
|
nextTick(() => { |
||||
|
// 将滚动条滚动到最下面 |
||||
|
scrollDiv.value.setScrollTop(getMaxHeight()) |
||||
|
}) |
||||
|
if (chunk.isEnd){ |
||||
|
answerList.value[answerList.value.length - 1].isEnd = true |
||||
|
answerList.value[answerList.value.length - 1].time = formatDate(new Date()) |
||||
|
if (!chatList.value[answerList.value[answerList.value.length - 1].index].isStop){ |
||||
|
chatList.value[chatList.value.length - 1].isEnd = true |
||||
|
chatList.value[chatList.value.length - 1].time = formatDate(new Date()) |
||||
|
} |
||||
|
nextTick(() => { |
||||
|
// 将滚动条滚动到最下面 |
||||
|
scrollDiv.value.setScrollTop(getMaxHeight()) |
||||
|
}) |
||||
|
return Promise.resolve(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
return Promise.reject(e); |
||||
|
} |
||||
|
return reader.read().then(write_stream); |
||||
|
}; |
||||
|
return write_stream |
||||
|
}; |
||||
|
|
||||
|
const stopChat = (index) => { |
||||
|
chatList.value[index].isStop = true |
||||
|
} |
||||
|
const startChat = (index) => { |
||||
|
chatList.value[index].isStop = false |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
setScrollBottom |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.ai-chat { |
||||
|
--padding-left: 40px; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
color: #1f2329; |
||||
|
|
||||
|
&__content { |
||||
|
height: auto; |
||||
|
padding-top: 0; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.avatar { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding-left: var(--padding-left); |
||||
|
|
||||
|
:deep(ol) { |
||||
|
margin-left: 16px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
padding: 6px 0; |
||||
|
} |
||||
|
|
||||
|
.problem-button { |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
background: #f5f6f7; |
||||
|
height: 46px; |
||||
|
padding: 0 12px; |
||||
|
line-height: 46px; |
||||
|
box-sizing: border-box; |
||||
|
color: #1f2329; |
||||
|
-webkit-line-clamp: 1; |
||||
|
word-break: break-all; |
||||
|
|
||||
|
&:hover { |
||||
|
background: var(--el-color-primary-light-9); |
||||
|
} |
||||
|
|
||||
|
&.disabled { |
||||
|
&:hover { |
||||
|
background: #f5f6f7; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.el-icon) { |
||||
|
color: var(--el-color-primary); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__operate { |
||||
|
background: #f3f7f9; |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
z-index: 10; |
||||
|
|
||||
|
&:before { |
||||
|
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%); |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
top: -16px; |
||||
|
left: 0; |
||||
|
height: 16px; |
||||
|
} |
||||
|
|
||||
|
.operate-textarea { |
||||
|
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08); |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 8px; |
||||
|
border: 1px solid #ffffff; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
&:has(.el-textarea__inner:focus) { |
||||
|
border: 1px solid var(--el-color-primary); |
||||
|
scrollbar-width: none; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-textarea__inner) { |
||||
|
border-radius: 8px !important; |
||||
|
box-shadow: none; |
||||
|
resize: none; |
||||
|
padding: 12px 16px; |
||||
|
box-sizing: border-box; |
||||
|
scrollbar-width: none; |
||||
|
} |
||||
|
|
||||
|
.operate { |
||||
|
padding: 6px 10px; |
||||
|
.el-icon { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.sent-button { |
||||
|
max-height: none; |
||||
|
.el-icon { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.el-loading-spinner) { |
||||
|
margin-top: -15px; |
||||
|
|
||||
|
.circular { |
||||
|
width: 31px; |
||||
|
height: 31px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dialog-card { |
||||
|
border: none; |
||||
|
border-radius: 8px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.chat-width { |
||||
|
max-width: 80%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.machineDiv { |
||||
|
cursor: pointer; |
||||
|
padding-top: 3px; |
||||
|
padding-bottom: 3px; |
||||
|
} |
||||
|
.machineDiv:hover { |
||||
|
background-color: #ebf1ff; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
@media only screen and (max-width: 1000px) { |
||||
|
.chat-width { |
||||
|
max-width: 100% !important; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,611 @@ |
|||||
|
<template> |
||||
|
<div :id="g6Index" style="width: 100%;height: 100%; overflow: hidden"></div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import G6 from '@antv/g6'; |
||||
|
import {watch} from "vue"; |
||||
|
const props = defineProps({ |
||||
|
is_large: Boolean, |
||||
|
g6Data: { |
||||
|
type: Array, |
||||
|
default: () => {} |
||||
|
}, |
||||
|
g6Index: String |
||||
|
}) |
||||
|
|
||||
|
function initG6(){ |
||||
|
const { |
||||
|
Util, |
||||
|
registerBehavior, |
||||
|
registerEdge, |
||||
|
registerNode |
||||
|
} = G6; |
||||
|
const isInBBox = (point, bbox) => { |
||||
|
const { |
||||
|
x, |
||||
|
y |
||||
|
} = point; |
||||
|
const { |
||||
|
minX, |
||||
|
minY, |
||||
|
maxX, |
||||
|
maxY |
||||
|
} = bbox; |
||||
|
|
||||
|
return x < maxX && x > minX && y > minY && y < maxY; |
||||
|
}; |
||||
|
const itemHeight = 20; |
||||
|
registerBehavior("dice-er-scroll", { |
||||
|
getDefaultCfg() { |
||||
|
return { |
||||
|
multiple: true, |
||||
|
}; |
||||
|
}, |
||||
|
getEvents() { |
||||
|
return { |
||||
|
itemHeight, |
||||
|
wheel: "scorll", |
||||
|
click: "click", |
||||
|
"node:mousemove": "move", |
||||
|
"node:mousedown": "mousedown", |
||||
|
"node:mouseup": "mouseup" |
||||
|
}; |
||||
|
}, |
||||
|
scorll(e) { |
||||
|
e.preventDefault(); |
||||
|
const { |
||||
|
graph |
||||
|
} = this; |
||||
|
const nodes = graph.getNodes().filter((n) => { |
||||
|
const bbox = n.getBBox(); |
||||
|
|
||||
|
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox); |
||||
|
}); |
||||
|
|
||||
|
const x = e.deltaX || e.movementX; |
||||
|
let y = e.deltaY || e.movementY; |
||||
|
if (!y && navigator.userAgent.indexOf('Firefox') > -1) y = (-e.wheelDelta * 125) / 3 |
||||
|
|
||||
|
if (nodes) { |
||||
|
const edgesToUpdate = new Set(); |
||||
|
nodes.forEach((node) => { |
||||
|
const model = node.getModel(); |
||||
|
if (model.attrs.length < 2) { |
||||
|
return; |
||||
|
} |
||||
|
const idx = model.startIndex || 0; |
||||
|
let startX = model.startX || 0.5; |
||||
|
let startIndex = idx + y * 0.02; |
||||
|
startX -= x; |
||||
|
if (startIndex < 0) { |
||||
|
startIndex = 0; |
||||
|
} |
||||
|
if (startX > 0) { |
||||
|
startX = 0; |
||||
|
} |
||||
|
if (startIndex > model.attrs.length - 1) { |
||||
|
startIndex = model.attrs.length - 1; |
||||
|
} |
||||
|
graph.updateItem(node, { |
||||
|
startIndex, |
||||
|
startX, |
||||
|
}); |
||||
|
node.getEdges().forEach(edge => edgesToUpdate.add(edge)) |
||||
|
}); |
||||
|
// G6 update the related edges when graph.updateItem with a node according to the new properties |
||||
|
// here you need to update the related edges manualy since the new properties { startIndex, startX } for the nodes are custom, and cannot be recognized by G6 |
||||
|
edgesToUpdate.forEach(edge => edge.refresh()) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
click(e) { |
||||
|
const { |
||||
|
graph |
||||
|
} = this; |
||||
|
const item = e.item; |
||||
|
const shape = e.shape; |
||||
|
if (!item) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (shape.get("name") === "collapse") { |
||||
|
graph.updateItem(item, { |
||||
|
collapsed: true, |
||||
|
size: [300, 50], |
||||
|
}); |
||||
|
setTimeout(() => graph.layout(), 100); |
||||
|
} else if (shape.get("name") === "expand") { |
||||
|
graph.updateItem(item, { |
||||
|
collapsed: false, |
||||
|
size: [300, 80], |
||||
|
}); |
||||
|
setTimeout(() => graph.layout(), 100); |
||||
|
} |
||||
|
}, |
||||
|
mousedown(e) { |
||||
|
this.isMousedown = true; |
||||
|
}, |
||||
|
mouseup(e) { |
||||
|
this.isMousedown = false; |
||||
|
}, |
||||
|
move(e) { |
||||
|
if (this.isMousedown) return; |
||||
|
const name = e.shape.get("name"); |
||||
|
const item = e.item; |
||||
|
|
||||
|
if (name && name.startsWith("item")) { |
||||
|
this.graph.updateItem(item, { |
||||
|
selectedIndex: Number(name.split("-")[1]), |
||||
|
}); |
||||
|
} else { |
||||
|
this.graph.updateItem(item, { |
||||
|
selectedIndex: NaN, |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
registerEdge("dice-er-edge", { |
||||
|
draw(cfg, group) { |
||||
|
const edge = group.cfg.item; |
||||
|
const sourceNode = edge.getSource().getModel(); |
||||
|
const targetNode = edge.getTarget().getModel(); |
||||
|
|
||||
|
const sourceIndex = sourceNode.attrs.findIndex( |
||||
|
(e) => e.key === cfg.sourceKey |
||||
|
); |
||||
|
|
||||
|
const sourceStartIndex = sourceNode.startIndex || 0; |
||||
|
|
||||
|
let sourceY = 15; |
||||
|
|
||||
|
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { |
||||
|
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * itemHeight; |
||||
|
sourceY = Math.min(sourceY, 80); |
||||
|
} |
||||
|
|
||||
|
const targetIndex = targetNode.attrs.findIndex( |
||||
|
(e) => e.key === cfg.targetKey |
||||
|
); |
||||
|
|
||||
|
const targetStartIndex = targetNode.startIndex || 0; |
||||
|
|
||||
|
let targetY = 15; |
||||
|
|
||||
|
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { |
||||
|
targetY = (targetIndex - targetStartIndex + 0.5) * itemHeight + 30; |
||||
|
targetY = Math.min(targetY, 80); |
||||
|
} |
||||
|
|
||||
|
const startPoint = { |
||||
|
...cfg.startPoint |
||||
|
}; |
||||
|
const endPoint = { |
||||
|
...cfg.endPoint |
||||
|
}; |
||||
|
|
||||
|
startPoint.y = startPoint.y + sourceY; |
||||
|
endPoint.y = endPoint.y + targetY; |
||||
|
|
||||
|
let shape; |
||||
|
if (sourceNode.id !== targetNode.id) { |
||||
|
shape = group.addShape("path", { |
||||
|
attrs: { |
||||
|
stroke: "#5B8FF9", |
||||
|
path: [ |
||||
|
["M", startPoint.x, startPoint.y], |
||||
|
[ |
||||
|
"C", |
||||
|
endPoint.x / 3 + (2 / 3) * startPoint.x, |
||||
|
startPoint.y, |
||||
|
endPoint.x / 3 + (2 / 3) * startPoint.x, |
||||
|
endPoint.y, |
||||
|
endPoint.x, |
||||
|
endPoint.y, |
||||
|
], |
||||
|
], |
||||
|
endArrow: true, |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: "path-shape", |
||||
|
}); |
||||
|
} else if (!sourceNode.collapsed) { |
||||
|
let gap = Math.abs((startPoint.y - endPoint.y) / 3); |
||||
|
if (startPoint["index"] === 1) { |
||||
|
gap = -gap; |
||||
|
} |
||||
|
shape = group.addShape("path", { |
||||
|
attrs: { |
||||
|
stroke: "#5B8FF9", |
||||
|
path: [ |
||||
|
["M", startPoint.x, startPoint.y], |
||||
|
[ |
||||
|
"C", |
||||
|
startPoint.x - gap, |
||||
|
startPoint.y, |
||||
|
startPoint.x - gap, |
||||
|
endPoint.y, |
||||
|
startPoint.x, |
||||
|
endPoint.y, |
||||
|
], |
||||
|
], |
||||
|
endArrow: true, |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: "path-shape", |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return shape; |
||||
|
}, |
||||
|
afterDraw(cfg, group) { |
||||
|
const labelCfg = cfg.labelCfg || {}; |
||||
|
const edge = group.cfg.item; |
||||
|
const sourceNode = edge.getSource().getModel(); |
||||
|
const targetNode = edge.getTarget().getModel(); |
||||
|
if (sourceNode.collapsed && targetNode.collapsed) { |
||||
|
return; |
||||
|
} |
||||
|
const path = group.find( |
||||
|
(element) => element.get("name") === "path-shape" |
||||
|
); |
||||
|
|
||||
|
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true); |
||||
|
const label = group.addShape("text", { |
||||
|
attrs: { |
||||
|
...labelStyle, |
||||
|
text: cfg.label || '', |
||||
|
fill: "#000", |
||||
|
textAlign: "center", |
||||
|
stroke: "#fff", |
||||
|
lineWidth: 1, |
||||
|
}, |
||||
|
}); |
||||
|
label.rotateAtStart(labelStyle.rotate); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
registerNode("dice-er-box", { |
||||
|
draw(cfg, group) { |
||||
|
const width = 250; |
||||
|
const height = 96; |
||||
|
const itemCount = 10; |
||||
|
const boxStyle = { |
||||
|
stroke: "#096DD9", |
||||
|
radius: 4, |
||||
|
}; |
||||
|
|
||||
|
const { |
||||
|
attrs = [], |
||||
|
startIndex = 0, |
||||
|
selectedIndex, |
||||
|
collapsed, |
||||
|
icon, |
||||
|
} = cfg; |
||||
|
const list = attrs; |
||||
|
const afterList = list.slice( |
||||
|
Math.floor(startIndex), |
||||
|
Math.floor(startIndex + itemCount - 1) |
||||
|
); |
||||
|
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; |
||||
|
|
||||
|
group.addShape("rect", { |
||||
|
attrs: { |
||||
|
fill: boxStyle.stroke, |
||||
|
height: 30, |
||||
|
width, |
||||
|
radius: [boxStyle.radius, boxStyle.radius, 0, 0], |
||||
|
}, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
let fontLeft = 12; |
||||
|
|
||||
|
if (icon && icon.show !== false) { |
||||
|
group.addShape("image", { |
||||
|
attrs: { |
||||
|
x: 8, |
||||
|
y: 8, |
||||
|
height: 16, |
||||
|
width: 16, |
||||
|
...icon, |
||||
|
}, |
||||
|
}); |
||||
|
fontLeft += 18; |
||||
|
} |
||||
|
|
||||
|
group.addShape("text", { |
||||
|
attrs: { |
||||
|
y: 22, |
||||
|
x: fontLeft, |
||||
|
fill: "#fff", |
||||
|
text: cfg.label, |
||||
|
fontSize: 12, |
||||
|
fontWeight: 500, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
group.addShape("rect", { |
||||
|
attrs: { |
||||
|
x: 0, |
||||
|
y: collapsed ? 30 : 80, |
||||
|
height: 15, |
||||
|
width, |
||||
|
fill: "#eee", |
||||
|
radius: [0, 0, boxStyle.radius, boxStyle.radius], |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: collapsed ? "expand" : "collapse", |
||||
|
}); |
||||
|
|
||||
|
group.addShape("text", { |
||||
|
attrs: { |
||||
|
x: width / 2 - 6, |
||||
|
y: (collapsed ? 30 : 80) + 12, |
||||
|
text: collapsed ? "+" : "-", |
||||
|
width, |
||||
|
fill: "#000", |
||||
|
radius: [0, 0, boxStyle.radius, boxStyle.radius], |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: collapsed ? "expand" : "collapse", |
||||
|
}); |
||||
|
|
||||
|
const keyshape = group.addShape("rect", { |
||||
|
attrs: { |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
width, |
||||
|
height: collapsed ? 45 : height, |
||||
|
...boxStyle, |
||||
|
}, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
if (collapsed) { |
||||
|
return keyshape; |
||||
|
} |
||||
|
|
||||
|
const listContainer = group.addGroup({}); |
||||
|
listContainer.setClip({ |
||||
|
type: "rect", |
||||
|
attrs: { |
||||
|
x: -8, |
||||
|
y: 30, |
||||
|
width: width + 16, |
||||
|
height: 80 - 30, |
||||
|
}, |
||||
|
}); |
||||
|
listContainer.addShape({ |
||||
|
type: "rect", |
||||
|
attrs: { |
||||
|
x: 1, |
||||
|
y: 30, |
||||
|
width: width - 2, |
||||
|
height: 80 - 30, |
||||
|
fill: "#fff", |
||||
|
}, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
if (list.length > itemCount) { |
||||
|
const barStyle = { |
||||
|
width: 4, |
||||
|
padding: 0, |
||||
|
boxStyle: { |
||||
|
stroke: "#00000022", |
||||
|
}, |
||||
|
innerStyle: { |
||||
|
fill: "#00000022", |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
listContainer.addShape("rect", { |
||||
|
attrs: { |
||||
|
y: 30, |
||||
|
x: width - barStyle.padding - barStyle.width, |
||||
|
width: barStyle.width, |
||||
|
height: height - 30, |
||||
|
...barStyle.boxStyle, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const indexHeight = |
||||
|
afterList.length > itemCount ? |
||||
|
(afterList.length / list.length) * height : |
||||
|
10; |
||||
|
|
||||
|
listContainer.addShape("rect", { |
||||
|
attrs: { |
||||
|
y: 30 + |
||||
|
barStyle.padding + |
||||
|
(startIndex / list.length) * (height - 30), |
||||
|
x: width - barStyle.padding - barStyle.width, |
||||
|
width: barStyle.width, |
||||
|
height: Math.min(height, indexHeight), |
||||
|
...barStyle.innerStyle, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
if (afterList) { |
||||
|
afterList.forEach((e, i) => { |
||||
|
const isSelected = |
||||
|
Math.floor(startIndex) + i === Number(selectedIndex); |
||||
|
let { |
||||
|
key = "", type |
||||
|
} = e; |
||||
|
if (type) { |
||||
|
key += " - " + type; |
||||
|
} |
||||
|
const label = key.length > 26 ? key.slice(0, 24) + "..." : key; |
||||
|
|
||||
|
listContainer.addShape("rect", { |
||||
|
attrs: { |
||||
|
x: 1, |
||||
|
y: i * itemHeight - itemHeight / 2 + offsetY, |
||||
|
width: width - 4, |
||||
|
height: itemHeight, |
||||
|
radius: 2, |
||||
|
lineWidth: 1, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: `item-${Math.floor(startIndex) + i}-content`, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
if (!cfg.hideDot) { |
||||
|
listContainer.addShape("circle", { |
||||
|
attrs: { |
||||
|
x: 0, |
||||
|
y: i * itemHeight + offsetY, |
||||
|
r: 3, |
||||
|
stroke: boxStyle.stroke, |
||||
|
fill: "white", |
||||
|
radius: 2, |
||||
|
lineWidth: 1, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
}); |
||||
|
listContainer.addShape("circle", { |
||||
|
attrs: { |
||||
|
x: width, |
||||
|
y: i * itemHeight + offsetY, |
||||
|
r: 3, |
||||
|
stroke: boxStyle.stroke, |
||||
|
fill: "white", |
||||
|
radius: 2, |
||||
|
lineWidth: 1, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
listContainer.addShape("text", { |
||||
|
attrs: { |
||||
|
x: 12, |
||||
|
y: i * itemHeight + offsetY + 6, |
||||
|
text: label, |
||||
|
fontSize: 12, |
||||
|
fill: "#000", |
||||
|
fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol", |
||||
|
full: e, |
||||
|
fontWeight: isSelected ? 500 : 100, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: `item-${Math.floor(startIndex) + i}`, |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
return keyshape; |
||||
|
}, |
||||
|
getAnchorPoints() { |
||||
|
return [ |
||||
|
[0, 0], |
||||
|
[1, 0], |
||||
|
]; |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const dataTransform = (data) => { |
||||
|
const nodes = []; |
||||
|
const edges = []; |
||||
|
|
||||
|
data.map((node) => { |
||||
|
nodes.push({ |
||||
|
...node |
||||
|
}); |
||||
|
if (node.attrs) { |
||||
|
node.attrs.forEach((attr) => { |
||||
|
if (attr.relation) { |
||||
|
attr.relation.forEach((relation) => { |
||||
|
edges.push({ |
||||
|
source: node.id, |
||||
|
target: relation.nodeId, |
||||
|
sourceKey: attr.key, |
||||
|
targetKey: relation.key, |
||||
|
label: relation.label, |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
nodes, |
||||
|
edges, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
const container = document.getElementById(props.g6Index); |
||||
|
const width = props.is_fullscreen?document.documentElement.scrollWidth:container.scrollWidth; |
||||
|
const height = props.is_fullscreen?document.documentElement.scrollHeight:((container.scrollHeight || 500) - 20); |
||||
|
const graph = new G6.Graph({ |
||||
|
container: container, |
||||
|
width, |
||||
|
height, |
||||
|
defaultNode: { |
||||
|
size: [300, 200], |
||||
|
type: 'dice-er-box', |
||||
|
color: '#5B8FF9', |
||||
|
style: { |
||||
|
fill: '#9EC9FF', |
||||
|
lineWidth: 3, |
||||
|
}, |
||||
|
labelCfg: { |
||||
|
style: { |
||||
|
fill: 'black', |
||||
|
fontSize: 20, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
defaultEdge: { |
||||
|
type: 'dice-er-edge', |
||||
|
style: { |
||||
|
stroke: '#e2e2e2', |
||||
|
lineWidth: 4, |
||||
|
endArrow: true, |
||||
|
}, |
||||
|
}, |
||||
|
modes: { |
||||
|
default: ['dice-er-scroll', 'drag-node', 'drag-canvas'], |
||||
|
}, |
||||
|
layout: { |
||||
|
type: 'dagre', |
||||
|
rankdir: 'LR', |
||||
|
align: 'UL', |
||||
|
controlPoints: true, |
||||
|
nodesepFunc: () => 0.2, |
||||
|
ranksepFunc: () => 0.5, |
||||
|
}, |
||||
|
animate: true, |
||||
|
fitView: true |
||||
|
}) |
||||
|
graph.data(dataTransform(props.g6Data)) |
||||
|
graph.render(); |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
initG6(false) |
||||
|
}); |
||||
|
watch(() => props.is_large, |
||||
|
(value) =>{ |
||||
|
let g6 = document.getElementById(props.g6Index) |
||||
|
g6.innerHTML='' |
||||
|
initG6(false) |
||||
|
} |
||||
|
) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<el-tooltip |
||||
|
v-bind="$attrs" |
||||
|
:disabled="!(containerWeight > contentWeight)" |
||||
|
effect="dark" |
||||
|
placement="bottom" |
||||
|
popper-class="auto-tooltip-popper" |
||||
|
> |
||||
|
<div ref="tagLabel" :class="['auto-tooltip', className]" :style="style"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, onMounted, nextTick } from 'vue' |
||||
|
defineOptions({ name: 'AutoTooltip' }) |
||||
|
const props = defineProps({ className: String, style: Object }) |
||||
|
const tagLabel = ref() |
||||
|
const containerWeight = ref(0) |
||||
|
const contentWeight = ref(0) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
nextTick(() => { |
||||
|
containerWeight.value = tagLabel.value?.scrollWidth |
||||
|
contentWeight.value = tagLabel.value?.clientWidth |
||||
|
}) |
||||
|
window.addEventListener('resize', function () { |
||||
|
containerWeight.value = tagLabel.value?.scrollWidth |
||||
|
contentWeight.value = tagLabel.value?.clientWidth |
||||
|
}) |
||||
|
}) |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.auto-tooltip { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,42 @@ |
|||||
|
<template> |
||||
|
<div style="width: 100%;height: 100%"> |
||||
|
<el-table :data="tableData" style="width: 100%; margin-top: 5px"> |
||||
|
<el-table-column v-for="(value,key) in tableData[0]" :prop="key" :label="key"></el-table-column> |
||||
|
</el-table> |
||||
|
<div style="width: 100%; height: 32px"> |
||||
|
<el-pagination |
||||
|
style="position: absolute;right: 0" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@size-change="handleSizeChange" |
||||
|
:current-page="currentPage" |
||||
|
:page-sizes="[10, 20, 30, 40]" |
||||
|
:page-size="pageSize" |
||||
|
layout="total, prev, pager, next" |
||||
|
:total="data.length"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import {computed, ref} from "vue"; |
||||
|
const props = defineProps({ |
||||
|
data: Array |
||||
|
}) |
||||
|
const currentPage = ref(1) |
||||
|
const pageSize = ref(10) |
||||
|
function handleCurrentChange(page) { |
||||
|
currentPage.value = page; |
||||
|
} |
||||
|
function handleSizeChange(size) { |
||||
|
pageSize.value = size; |
||||
|
} |
||||
|
|
||||
|
const tableData = computed(() =>{ |
||||
|
const start = (currentPage.value - 1) * pageSize.value; |
||||
|
const end = start + pageSize.value; |
||||
|
return props.data.slice(start, end); |
||||
|
}) |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<template> |
||||
|
<div class="common-list"> |
||||
|
<ul v-if="data.length > 0" style="list-style: none;margin: 0;padding: 0"> |
||||
|
<template v-for="(item, index) in data" :key="index"> |
||||
|
<li |
||||
|
@click.prevent="clickHandle(item, index)" |
||||
|
class="cursor" |
||||
|
:class="mouseId === item.sessionId ? 'active' : ''" |
||||
|
@mouseenter="mouseenter(item)" |
||||
|
@mouseleave="mouseleave()" |
||||
|
> |
||||
|
<slot :row="item" :index="index"> </slot> |
||||
|
</li> |
||||
|
</template> |
||||
|
</ul> |
||||
|
<slot name="empty" v-else> |
||||
|
<el-empty description="暂无数据" /> |
||||
|
</slot> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref, watch } from 'vue' |
||||
|
import {getChatList} from "@/api/aichat/aichat.js"; |
||||
|
|
||||
|
defineOptions({ name: 'CommonList' }) |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
mouseId: String, |
||||
|
data: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
defaultActive: '' |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const emit = defineEmits(['click', 'mouseenter', 'mouseleave']) |
||||
|
|
||||
|
function mouseenter(row) { |
||||
|
emit('mouseenter', row) |
||||
|
} |
||||
|
function mouseleave() { |
||||
|
emit('mouseleave') |
||||
|
} |
||||
|
|
||||
|
function clickHandle(row, index) { |
||||
|
emit('click', row) |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
/* 通用 ui li样式 */ |
||||
|
.common-list { |
||||
|
li { |
||||
|
padding: 10px 16px; |
||||
|
font-weight: 400; |
||||
|
&.active { |
||||
|
background: var(--el-color-primary-light-9); |
||||
|
border-radius: 4px; |
||||
|
color: var(--el-color-primary); |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.cursor { |
||||
|
cursor: pointer; |
||||
|
padding: 6px 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,604 @@ |
|||||
|
<template> |
||||
|
<div id="fullscreenG6" style="width: 100%;height: 100%; overflow: hidden"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import G6 from '@antv/g6'; |
||||
|
import {watch} from "vue"; |
||||
|
const props = defineProps({ |
||||
|
g6Data: { |
||||
|
type: Array, |
||||
|
default: () => {} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function initG6(){ |
||||
|
const { |
||||
|
Util, |
||||
|
registerBehavior, |
||||
|
registerEdge, |
||||
|
registerNode |
||||
|
} = G6; |
||||
|
const isInBBox = (point, bbox) => { |
||||
|
const { |
||||
|
x, |
||||
|
y |
||||
|
} = point; |
||||
|
const { |
||||
|
minX, |
||||
|
minY, |
||||
|
maxX, |
||||
|
maxY |
||||
|
} = bbox; |
||||
|
|
||||
|
return x < maxX && x > minX && y > minY && y < maxY; |
||||
|
}; |
||||
|
const itemHeight = 20; |
||||
|
registerBehavior("dice-er-scroll", { |
||||
|
getDefaultCfg() { |
||||
|
return { |
||||
|
multiple: true, |
||||
|
}; |
||||
|
}, |
||||
|
getEvents() { |
||||
|
return { |
||||
|
itemHeight, |
||||
|
wheel: "scorll", |
||||
|
click: "click", |
||||
|
"node:mousemove": "move", |
||||
|
"node:mousedown": "mousedown", |
||||
|
"node:mouseup": "mouseup" |
||||
|
}; |
||||
|
}, |
||||
|
scorll(e) { |
||||
|
e.preventDefault(); |
||||
|
const { |
||||
|
graph |
||||
|
} = this; |
||||
|
const nodes = graph.getNodes().filter((n) => { |
||||
|
const bbox = n.getBBox(); |
||||
|
|
||||
|
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox); |
||||
|
}); |
||||
|
|
||||
|
const x = e.deltaX || e.movementX; |
||||
|
let y = e.deltaY || e.movementY; |
||||
|
if (!y && navigator.userAgent.indexOf('Firefox') > -1) y = (-e.wheelDelta * 125) / 3 |
||||
|
|
||||
|
if (nodes) { |
||||
|
const edgesToUpdate = new Set(); |
||||
|
nodes.forEach((node) => { |
||||
|
const model = node.getModel(); |
||||
|
if (model.attrs.length < 2) { |
||||
|
return; |
||||
|
} |
||||
|
const idx = model.startIndex || 0; |
||||
|
let startX = model.startX || 0.5; |
||||
|
let startIndex = idx + y * 0.02; |
||||
|
startX -= x; |
||||
|
if (startIndex < 0) { |
||||
|
startIndex = 0; |
||||
|
} |
||||
|
if (startX > 0) { |
||||
|
startX = 0; |
||||
|
} |
||||
|
if (startIndex > model.attrs.length - 1) { |
||||
|
startIndex = model.attrs.length - 1; |
||||
|
} |
||||
|
graph.updateItem(node, { |
||||
|
startIndex, |
||||
|
startX, |
||||
|
}); |
||||
|
node.getEdges().forEach(edge => edgesToUpdate.add(edge)) |
||||
|
}); |
||||
|
// G6 update the related edges when graph.updateItem with a node according to the new properties |
||||
|
// here you need to update the related edges manualy since the new properties { startIndex, startX } for the nodes are custom, and cannot be recognized by G6 |
||||
|
edgesToUpdate.forEach(edge => edge.refresh()) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
click(e) { |
||||
|
const { |
||||
|
graph |
||||
|
} = this; |
||||
|
const item = e.item; |
||||
|
const shape = e.shape; |
||||
|
if (!item) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (shape.get("name") === "collapse") { |
||||
|
graph.updateItem(item, { |
||||
|
collapsed: true, |
||||
|
size: [300, 50], |
||||
|
}); |
||||
|
setTimeout(() => graph.layout(), 100); |
||||
|
} else if (shape.get("name") === "expand") { |
||||
|
graph.updateItem(item, { |
||||
|
collapsed: false, |
||||
|
size: [300, 80], |
||||
|
}); |
||||
|
setTimeout(() => graph.layout(), 100); |
||||
|
} |
||||
|
}, |
||||
|
mousedown(e) { |
||||
|
this.isMousedown = true; |
||||
|
}, |
||||
|
mouseup(e) { |
||||
|
this.isMousedown = false; |
||||
|
}, |
||||
|
move(e) { |
||||
|
if (this.isMousedown) return; |
||||
|
const name = e.shape.get("name"); |
||||
|
const item = e.item; |
||||
|
|
||||
|
if (name && name.startsWith("item")) { |
||||
|
this.graph.updateItem(item, { |
||||
|
selectedIndex: Number(name.split("-")[1]), |
||||
|
}); |
||||
|
} else { |
||||
|
this.graph.updateItem(item, { |
||||
|
selectedIndex: NaN, |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
registerEdge("dice-er-edge", { |
||||
|
draw(cfg, group) { |
||||
|
const edge = group.cfg.item; |
||||
|
const sourceNode = edge.getSource().getModel(); |
||||
|
const targetNode = edge.getTarget().getModel(); |
||||
|
|
||||
|
const sourceIndex = sourceNode.attrs.findIndex( |
||||
|
(e) => e.key === cfg.sourceKey |
||||
|
); |
||||
|
|
||||
|
const sourceStartIndex = sourceNode.startIndex || 0; |
||||
|
|
||||
|
let sourceY = 15; |
||||
|
|
||||
|
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { |
||||
|
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * itemHeight; |
||||
|
sourceY = Math.min(sourceY, 80); |
||||
|
} |
||||
|
|
||||
|
const targetIndex = targetNode.attrs.findIndex( |
||||
|
(e) => e.key === cfg.targetKey |
||||
|
); |
||||
|
|
||||
|
const targetStartIndex = targetNode.startIndex || 0; |
||||
|
|
||||
|
let targetY = 15; |
||||
|
|
||||
|
if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) { |
||||
|
targetY = (targetIndex - targetStartIndex + 0.5) * itemHeight + 30; |
||||
|
targetY = Math.min(targetY, 80); |
||||
|
} |
||||
|
|
||||
|
const startPoint = { |
||||
|
...cfg.startPoint |
||||
|
}; |
||||
|
const endPoint = { |
||||
|
...cfg.endPoint |
||||
|
}; |
||||
|
|
||||
|
startPoint.y = startPoint.y + sourceY; |
||||
|
endPoint.y = endPoint.y + targetY; |
||||
|
|
||||
|
let shape; |
||||
|
if (sourceNode.id !== targetNode.id) { |
||||
|
shape = group.addShape("path", { |
||||
|
attrs: { |
||||
|
stroke: "#5B8FF9", |
||||
|
path: [ |
||||
|
["M", startPoint.x, startPoint.y], |
||||
|
[ |
||||
|
"C", |
||||
|
endPoint.x / 3 + (2 / 3) * startPoint.x, |
||||
|
startPoint.y, |
||||
|
endPoint.x / 3 + (2 / 3) * startPoint.x, |
||||
|
endPoint.y, |
||||
|
endPoint.x, |
||||
|
endPoint.y, |
||||
|
], |
||||
|
], |
||||
|
endArrow: true, |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: "path-shape", |
||||
|
}); |
||||
|
} else if (!sourceNode.collapsed) { |
||||
|
let gap = Math.abs((startPoint.y - endPoint.y) / 3); |
||||
|
if (startPoint["index"] === 1) { |
||||
|
gap = -gap; |
||||
|
} |
||||
|
shape = group.addShape("path", { |
||||
|
attrs: { |
||||
|
stroke: "#5B8FF9", |
||||
|
path: [ |
||||
|
["M", startPoint.x, startPoint.y], |
||||
|
[ |
||||
|
"C", |
||||
|
startPoint.x - gap, |
||||
|
startPoint.y, |
||||
|
startPoint.x - gap, |
||||
|
endPoint.y, |
||||
|
startPoint.x, |
||||
|
endPoint.y, |
||||
|
], |
||||
|
], |
||||
|
endArrow: true, |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: "path-shape", |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return shape; |
||||
|
}, |
||||
|
afterDraw(cfg, group) { |
||||
|
const labelCfg = cfg.labelCfg || {}; |
||||
|
const edge = group.cfg.item; |
||||
|
const sourceNode = edge.getSource().getModel(); |
||||
|
const targetNode = edge.getTarget().getModel(); |
||||
|
if (sourceNode.collapsed && targetNode.collapsed) { |
||||
|
return; |
||||
|
} |
||||
|
const path = group.find( |
||||
|
(element) => element.get("name") === "path-shape" |
||||
|
); |
||||
|
|
||||
|
const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true); |
||||
|
const label = group.addShape("text", { |
||||
|
attrs: { |
||||
|
...labelStyle, |
||||
|
text: cfg.label || '', |
||||
|
fill: "#000", |
||||
|
textAlign: "center", |
||||
|
stroke: "#fff", |
||||
|
lineWidth: 1, |
||||
|
}, |
||||
|
}); |
||||
|
label.rotateAtStart(labelStyle.rotate); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
registerNode("dice-er-box", { |
||||
|
draw(cfg, group) { |
||||
|
const width = 250; |
||||
|
const height = 96; |
||||
|
const itemCount = 10; |
||||
|
const boxStyle = { |
||||
|
stroke: "#096DD9", |
||||
|
radius: 4, |
||||
|
}; |
||||
|
|
||||
|
const { |
||||
|
attrs = [], |
||||
|
startIndex = 0, |
||||
|
selectedIndex, |
||||
|
collapsed, |
||||
|
icon, |
||||
|
} = cfg; |
||||
|
const list = attrs; |
||||
|
const afterList = list.slice( |
||||
|
Math.floor(startIndex), |
||||
|
Math.floor(startIndex + itemCount - 1) |
||||
|
); |
||||
|
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; |
||||
|
|
||||
|
group.addShape("rect", { |
||||
|
attrs: { |
||||
|
fill: boxStyle.stroke, |
||||
|
height: 30, |
||||
|
width, |
||||
|
radius: [boxStyle.radius, boxStyle.radius, 0, 0], |
||||
|
}, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
let fontLeft = 12; |
||||
|
|
||||
|
if (icon && icon.show !== false) { |
||||
|
group.addShape("image", { |
||||
|
attrs: { |
||||
|
x: 8, |
||||
|
y: 8, |
||||
|
height: 16, |
||||
|
width: 16, |
||||
|
...icon, |
||||
|
}, |
||||
|
}); |
||||
|
fontLeft += 18; |
||||
|
} |
||||
|
|
||||
|
group.addShape("text", { |
||||
|
attrs: { |
||||
|
y: 22, |
||||
|
x: fontLeft, |
||||
|
fill: "#fff", |
||||
|
text: cfg.label, |
||||
|
fontSize: 12, |
||||
|
fontWeight: 500, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
group.addShape("rect", { |
||||
|
attrs: { |
||||
|
x: 0, |
||||
|
y: collapsed ? 30 : 80, |
||||
|
height: 15, |
||||
|
width, |
||||
|
fill: "#eee", |
||||
|
radius: [0, 0, boxStyle.radius, boxStyle.radius], |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: collapsed ? "expand" : "collapse", |
||||
|
}); |
||||
|
|
||||
|
group.addShape("text", { |
||||
|
attrs: { |
||||
|
x: width / 2 - 6, |
||||
|
y: (collapsed ? 30 : 80) + 12, |
||||
|
text: collapsed ? "+" : "-", |
||||
|
width, |
||||
|
fill: "#000", |
||||
|
radius: [0, 0, boxStyle.radius, boxStyle.radius], |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: collapsed ? "expand" : "collapse", |
||||
|
}); |
||||
|
|
||||
|
const keyshape = group.addShape("rect", { |
||||
|
attrs: { |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
width, |
||||
|
height: collapsed ? 45 : height, |
||||
|
...boxStyle, |
||||
|
}, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
if (collapsed) { |
||||
|
return keyshape; |
||||
|
} |
||||
|
|
||||
|
const listContainer = group.addGroup({}); |
||||
|
listContainer.setClip({ |
||||
|
type: "rect", |
||||
|
attrs: { |
||||
|
x: -8, |
||||
|
y: 30, |
||||
|
width: width + 16, |
||||
|
height: 80 - 30, |
||||
|
}, |
||||
|
}); |
||||
|
listContainer.addShape({ |
||||
|
type: "rect", |
||||
|
attrs: { |
||||
|
x: 1, |
||||
|
y: 30, |
||||
|
width: width - 2, |
||||
|
height: 80 - 30, |
||||
|
fill: "#fff", |
||||
|
}, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
if (list.length > itemCount) { |
||||
|
const barStyle = { |
||||
|
width: 4, |
||||
|
padding: 0, |
||||
|
boxStyle: { |
||||
|
stroke: "#00000022", |
||||
|
}, |
||||
|
innerStyle: { |
||||
|
fill: "#00000022", |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
listContainer.addShape("rect", { |
||||
|
attrs: { |
||||
|
y: 30, |
||||
|
x: width - barStyle.padding - barStyle.width, |
||||
|
width: barStyle.width, |
||||
|
height: height - 30, |
||||
|
...barStyle.boxStyle, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const indexHeight = |
||||
|
afterList.length > itemCount ? |
||||
|
(afterList.length / list.length) * height : |
||||
|
10; |
||||
|
|
||||
|
listContainer.addShape("rect", { |
||||
|
attrs: { |
||||
|
y: 30 + |
||||
|
barStyle.padding + |
||||
|
(startIndex / list.length) * (height - 30), |
||||
|
x: width - barStyle.padding - barStyle.width, |
||||
|
width: barStyle.width, |
||||
|
height: Math.min(height, indexHeight), |
||||
|
...barStyle.innerStyle, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
if (afterList) { |
||||
|
afterList.forEach((e, i) => { |
||||
|
const isSelected = |
||||
|
Math.floor(startIndex) + i === Number(selectedIndex); |
||||
|
let { |
||||
|
key = "", type |
||||
|
} = e; |
||||
|
if (type) { |
||||
|
key += " - " + type; |
||||
|
} |
||||
|
const label = key.length > 26 ? key.slice(0, 24) + "..." : key; |
||||
|
|
||||
|
listContainer.addShape("rect", { |
||||
|
attrs: { |
||||
|
x: 1, |
||||
|
y: i * itemHeight - itemHeight / 2 + offsetY, |
||||
|
width: width - 4, |
||||
|
height: itemHeight, |
||||
|
radius: 2, |
||||
|
lineWidth: 1, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: `item-${Math.floor(startIndex) + i}-content`, |
||||
|
draggable: true, |
||||
|
}); |
||||
|
|
||||
|
if (!cfg.hideDot) { |
||||
|
listContainer.addShape("circle", { |
||||
|
attrs: { |
||||
|
x: 0, |
||||
|
y: i * itemHeight + offsetY, |
||||
|
r: 3, |
||||
|
stroke: boxStyle.stroke, |
||||
|
fill: "white", |
||||
|
radius: 2, |
||||
|
lineWidth: 1, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
}); |
||||
|
listContainer.addShape("circle", { |
||||
|
attrs: { |
||||
|
x: width, |
||||
|
y: i * itemHeight + offsetY, |
||||
|
r: 3, |
||||
|
stroke: boxStyle.stroke, |
||||
|
fill: "white", |
||||
|
radius: 2, |
||||
|
lineWidth: 1, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
listContainer.addShape("text", { |
||||
|
attrs: { |
||||
|
x: 12, |
||||
|
y: i * itemHeight + offsetY + 6, |
||||
|
text: label, |
||||
|
fontSize: 12, |
||||
|
fill: "#000", |
||||
|
fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol", |
||||
|
full: e, |
||||
|
fontWeight: isSelected ? 500 : 100, |
||||
|
cursor: "pointer", |
||||
|
}, |
||||
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
||||
|
name: `item-${Math.floor(startIndex) + i}`, |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
return keyshape; |
||||
|
}, |
||||
|
getAnchorPoints() { |
||||
|
return [ |
||||
|
[0, 0], |
||||
|
[1, 0], |
||||
|
]; |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const dataTransform = (data) => { |
||||
|
const nodes = []; |
||||
|
const edges = []; |
||||
|
|
||||
|
data.map((node) => { |
||||
|
nodes.push({ |
||||
|
...node |
||||
|
}); |
||||
|
if (node.attrs) { |
||||
|
node.attrs.forEach((attr) => { |
||||
|
if (attr.relation) { |
||||
|
attr.relation.forEach((relation) => { |
||||
|
edges.push({ |
||||
|
source: node.id, |
||||
|
target: relation.nodeId, |
||||
|
sourceKey: attr.key, |
||||
|
targetKey: relation.key, |
||||
|
label: relation.label, |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
nodes, |
||||
|
edges, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
const container = document.getElementById("fullscreenG6"); |
||||
|
const width = document.documentElement.scrollWidth - 30; |
||||
|
const height = document.documentElement.scrollHeight - 30; |
||||
|
const graph = new G6.Graph({ |
||||
|
container: container, |
||||
|
width, |
||||
|
height, |
||||
|
defaultNode: { |
||||
|
size: [300, 200], |
||||
|
type: 'dice-er-box', |
||||
|
color: '#5B8FF9', |
||||
|
style: { |
||||
|
fill: '#9EC9FF', |
||||
|
lineWidth: 3, |
||||
|
}, |
||||
|
labelCfg: { |
||||
|
style: { |
||||
|
fill: 'black', |
||||
|
fontSize: 20, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
defaultEdge: { |
||||
|
type: 'dice-er-edge', |
||||
|
style: { |
||||
|
stroke: '#e2e2e2', |
||||
|
lineWidth: 4, |
||||
|
endArrow: true, |
||||
|
}, |
||||
|
}, |
||||
|
modes: { |
||||
|
default: ['dice-er-scroll', 'drag-node', 'drag-canvas'], |
||||
|
}, |
||||
|
layout: { |
||||
|
type: 'dagre', |
||||
|
rankdir: 'LR', |
||||
|
align: 'UL', |
||||
|
controlPoints: true, |
||||
|
nodesepFunc: () => 0.2, |
||||
|
ranksepFunc: () => 0.5, |
||||
|
}, |
||||
|
animate: true, |
||||
|
fitView: true |
||||
|
}) |
||||
|
graph.data(dataTransform(props.g6Data)) |
||||
|
graph.render(); |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
initG6() |
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<iframe :id="index" :srcDoc="data" style="width: 100%;height: 100%;border: none"></iframe> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import {watch} from "vue"; |
||||
|
const props = defineProps({ |
||||
|
is_large: Boolean, |
||||
|
data: String, |
||||
|
index: String, |
||||
|
}) |
||||
|
watch(() => props.is_large, |
||||
|
(value) =>{ |
||||
|
let iframe = document.getElementById(props.index) |
||||
|
iframe.contentWindow.location.reload() |
||||
|
} |
||||
|
) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,259 @@ |
|||||
|
<template> |
||||
|
<div class="chat-embed layout-bg"> |
||||
|
<div class="chat-embed__header"> |
||||
|
<div class="chat-width flex align-center" style="height: 56px;align-items: center;line-height: 56px"> |
||||
|
<div class="mr-12 ml-24 flex"> |
||||
|
<el-avatar |
||||
|
shape="square" |
||||
|
:size="32" |
||||
|
style="background: none" |
||||
|
> |
||||
|
<img src="@/assets/logo/deepseek.png" alt="" /> |
||||
|
</el-avatar> |
||||
|
</div> |
||||
|
<h4 style="color: #1f2329;font-size: 16px; font-style: normal; font-weight: bold;margin: 0; -webkit-font-smoothing: antialiased">果知小助手</h4> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="chat-embed__main"> |
||||
|
<AiChat |
||||
|
ref="AiChatRef" |
||||
|
:record="currentRecordList" |
||||
|
:is_large="is_large" |
||||
|
:cookieSessionId = "sessionId" |
||||
|
class="AiChat-embed" |
||||
|
@scroll="handleScroll" |
||||
|
></AiChat> |
||||
|
</div> |
||||
|
<el-link class="chat-popover-button" :underline="false" @click.prevent.stop="showChatHistory"> |
||||
|
<i class="ri-history-line"></i> |
||||
|
</el-link> |
||||
|
<el-link style="z-index: 100; position: absolute; top: 18px; right: 120px; font-size: 20px;" :underline="false" @click.prevent.stop="newChat" :disabled="currentRecordList.length === 0"> |
||||
|
<el-icon><Plus /></el-icon> |
||||
|
</el-link> |
||||
|
<el-collapse-transition> |
||||
|
<div v-show="show" class="chat-popover w-full" style="width: 100%;" v-click-outside="clickoutside"> |
||||
|
<div class="border-b p-16-24" style="border-bottom: 1px solid #dee0e3; padding: 16px 24px; font-size: 14px"> |
||||
|
<span>历史记录</span> |
||||
|
</div> |
||||
|
<el-scrollbar max-height="300"> |
||||
|
<div class="p-8" style="padding: 8px"> |
||||
|
<common-list |
||||
|
:data="chatLogeData" |
||||
|
:mouseId="mouseId" |
||||
|
:defaultActive="sessionId" |
||||
|
@click="clickListHandle" |
||||
|
@mouseenter="mouseenter" |
||||
|
@mouseleave="mouseId = ''" |
||||
|
> |
||||
|
<template #default="{ row }"> |
||||
|
<div class="flex-between" style="display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<auto-tooltip :content="row.sessionName"> |
||||
|
{{ row.sessionName }} |
||||
|
</auto-tooltip> |
||||
|
<div @click.stop v-if="mouseId === row.sessionId"> |
||||
|
<el-button style="padding: 0" link @click.stop="deleteLog(row)"> |
||||
|
<el-icon><Delete /></el-icon> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #empty> |
||||
|
<div class="text-center"> |
||||
|
<el-text type="info">暂无历史记录</el-text> |
||||
|
</div> |
||||
|
</template> |
||||
|
</common-list> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="chatLogeData.length" class="gradient-divider lighter mt-8" style="font-weight: 400; margin-top: 8px"> |
||||
|
<span>仅显示最近 20 条对话</span> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
</el-collapse-transition> |
||||
|
<div class="chat-popover-mask" v-show="show"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, nextTick, computed } from 'vue' |
||||
|
import { v4 as uuidv4 } from 'uuid'; |
||||
|
import Cookies from 'js-cookie' |
||||
|
import CommonList from './common-list.vue' |
||||
|
import AiChat from './aichat.vue' |
||||
|
import AutoTooltip from './auto-tooltip.vue' |
||||
|
import { useRoute } from 'vue-router' |
||||
|
import { listChatHistory, getChatList, DeleteChatSession } from "@/api/aichat/aichat"; |
||||
|
const route = useRoute() |
||||
|
const { proxy } = getCurrentInstance(); |
||||
|
const { |
||||
|
params: { accessToken } |
||||
|
} = route |
||||
|
const props = defineProps({ |
||||
|
is_large: Boolean, |
||||
|
chatDataList: Array, |
||||
|
}) |
||||
|
const AiChatRef = ref() |
||||
|
const chatLogeData = ref([]) |
||||
|
const show = ref(false) |
||||
|
const currentRecordList = ref([]) |
||||
|
const sessionId = ref(Cookies.get("chatSessionId")) // 当前历史记录Id 默认为'new' |
||||
|
const mouseId = ref('') |
||||
|
|
||||
|
function mouseenter(row) { |
||||
|
mouseId.value = row.sessionId |
||||
|
} |
||||
|
function deleteLog(row) { |
||||
|
let sessionId = row.sessionId |
||||
|
DeleteChatSession(sessionId).then(res=>{ |
||||
|
listChatHistory(sessionId).then(response =>{ |
||||
|
chatLogeData.value = response.data |
||||
|
}) |
||||
|
proxy.$modal.msgSuccess("复制成功"); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function clickoutside() { |
||||
|
show.value = false |
||||
|
} |
||||
|
|
||||
|
function showChatHistory(){ |
||||
|
show.value = true |
||||
|
listChatHistory(sessionId.value).then(response =>{ |
||||
|
chatLogeData.value = response.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function newChat() { |
||||
|
currentRecordList.value = [] |
||||
|
sessionId.value = uuidv4() |
||||
|
Cookies.set("chatSessionId",sessionId.value) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function handleScroll(event) { |
||||
|
if (event.scrollTop === 0 && currentRecordList.value.length>0) { |
||||
|
const history_height = event.dialogScrollbar.offsetHeight |
||||
|
event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function clickListHandle(item){ |
||||
|
getChatList(item.sessionId).then(res=>{ |
||||
|
currentRecordList.value = [] |
||||
|
let array = res.data |
||||
|
for (let i = 0; i < array.length; i++) { |
||||
|
if (array[i].type === 'answer'){ |
||||
|
array[i].content = JSON.parse(array[i].content) |
||||
|
} |
||||
|
if (array[i].type === 'question'){ |
||||
|
array[i].file = JSON.parse(array[i].file) |
||||
|
} |
||||
|
currentRecordList.value.push(array[i]) |
||||
|
AiChatRef.value.setScrollBottom() |
||||
|
} |
||||
|
show.value = false |
||||
|
sessionId.value = item.sessionId |
||||
|
Cookies.set("chatSessionId",sessionId.value) |
||||
|
}) |
||||
|
} |
||||
|
watch(() => props.chatDataList, value => currentRecordList.value = JSON.parse(JSON.stringify(value))) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.chat-embed { |
||||
|
overflow: hidden; |
||||
|
height: 100%; |
||||
|
&__header { |
||||
|
background: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
z-index: 100; |
||||
|
height: 56px; |
||||
|
line-height: 56px; |
||||
|
box-sizing: border-box; |
||||
|
border-bottom: 1px solid #dee0e3; |
||||
|
} |
||||
|
&__main { |
||||
|
padding-top: 80px; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.new-chat-button { |
||||
|
z-index: 11; |
||||
|
} |
||||
|
// 历史对话弹出层 |
||||
|
.chat-popover { |
||||
|
position: absolute; |
||||
|
top: 56px; |
||||
|
background: #ffffff; |
||||
|
padding-bottom: 24px; |
||||
|
z-index: 2009; |
||||
|
} |
||||
|
.chat-popover-button { |
||||
|
z-index: 100; |
||||
|
position: absolute; |
||||
|
top: 18px; |
||||
|
right: 85px; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
.chat-popover-mask { |
||||
|
background-color: var(--el-overlay-color-lighter); |
||||
|
bottom: 0; |
||||
|
height: 100%; |
||||
|
left: 0; |
||||
|
overflow: auto; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 56px; |
||||
|
z-index: 2008; |
||||
|
} |
||||
|
.gradient-divider { |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
color: var(--el-color-info); |
||||
|
::before { |
||||
|
content: ''; |
||||
|
width: 17%; |
||||
|
height: 1px; |
||||
|
background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%); |
||||
|
position: absolute; |
||||
|
left: 16px; |
||||
|
top: 50%; |
||||
|
} |
||||
|
::after { |
||||
|
content: ''; |
||||
|
width: 17%; |
||||
|
height: 1px; |
||||
|
background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%); |
||||
|
position: absolute; |
||||
|
right: 16px; |
||||
|
top: 50%; |
||||
|
} |
||||
|
} |
||||
|
.AiChat-embed { |
||||
|
.ai-chat__operate { |
||||
|
padding-top: 12px; |
||||
|
} |
||||
|
} |
||||
|
.chat-width { |
||||
|
max-width: 860px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
} |
||||
|
.flex { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.mr-12 { |
||||
|
margin-right: 12px; |
||||
|
|
||||
|
} |
||||
|
.ml-24 { |
||||
|
margin-left: 24px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,23 @@ |
|||||
|
<template> |
||||
|
<div class="markdown-content" v-html="compiledMarkdown" style="font-size: 14px"></div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref, watch} from 'vue'; |
||||
|
import MarkdownIt from 'markdown-it'; |
||||
|
const props = defineProps({ |
||||
|
markdownString: String |
||||
|
}) |
||||
|
const compiledMarkdown = ref('') |
||||
|
const md = new MarkdownIt() |
||||
|
watch(() => props.markdownString, (newValue) => { |
||||
|
if (newValue){ |
||||
|
compiledMarkdown.value = md.render(newValue.replace("\n","\n\n")); |
||||
|
} |
||||
|
}, { immediate: true }); |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.markdown-content a { |
||||
|
text-decoration: underline; |
||||
|
color: blue |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue