lanyuanxiaoyao/ai-analysis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成基本功能

Browse Source
This commit is contained in:
兰缘小妖
2025-02-26 17:47:34 +08:00
parent 57ecdb62fa
commit ce59d63412
14 changed files with 1230 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

781
client/src/App.vue
View File

@@ -1,73 +1,161 @@
<script setup>
import {ref} from 'vue'
import {onMounted, ref} from 'vue'
import MarkdownIt from 'markdown-it'
import MarkDownMermaidPlugin from 'mermaid-it-markdown'
import {fetchEventSource} from '@microsoft/fetch-event-source'
import {createEventSource} from 'eventsource-client'
// 初始化 markdown-it 实例
const md = new MarkdownIt({
html: true, // 启用 HTML 标签
breaks: true, // 转换换行符为 <br>
linkify: true, // 自动转换 URL 为链接
typographer: true // 启用一些语言中性的替换 + 引号美化
html: true, // 启用 HTML 标签
breaks: true, // 转换换行符为 <br>
linkify: true, // 自动转换 URL 为链接
typographer: true, // 启用一些语言中性的替换 + 引号美化
})
md.use(MarkDownMermaidPlugin)
const question = ref('')
const answer = ref('')
const loading = ref(false)
const useTw = ref(false)
// 使用计算属性来渲染 markdown
const renderedAnswer = ref('')
answer.value = "```mermaid\ngraph TD;\n A-->B;\n A-->C;\n B-->D;\n C-->D;\n```"
renderedAnswer.value = md.render(answer.value)
// 在 script setup 中添加新的响应式变量
const useDatabase = ref(false)
const databaseUrl = ref('')
const databaseUsername = ref('')
const databasePassword = ref('')
const databaseName = ref('')
// 在 script setup 中添加 Toast 相关的响应式变量
const showToast = ref(false)
const toastMessage = ref('')
const toastMessageType = ref('success')
const handleSubmit = async () => {
if (!question.value.trim() || loading.value) return
loading.value = true
answer.value = ''
renderedAnswer.value = ''
try {
await fetchEventSource('http://localhost:7891/chat/stream', {
const url = 'http://localhost:7891/chat/stream'
const formData = new FormData()
formData.append('prompt', question.value.trim())
formData.append('use_tw', useTw.value)
// 如果启用数据库，添加相关参数
if (useDatabase.value) {
formData.append('use_database', useDatabase.value)
formData.append('database_url', databaseUrl.value)
formData.append('database_username', databaseUsername.value)
formData.append('database_password', databasePassword.value)
formData.append('database_name', databaseName.value)
}
const eventSource = createEventSource({
url: url,
method: 'POST',
body: question.value.trim(),
onmessage(event) {
// 处理每个消息事件
answer.value += event.data
// 实时渲染 markdown
renderedAnswer.value = md.render(answer.value)
},
onclose() {
loading.value = false
body: formData,
onDisconnect: () => {
console.log(answer.value)
console.log(renderedAnswer.value)
eventSource.close()
},
onerror(err) {
console.error('请求出错:', err)
loading.value = false
return false // 不进行重试
}
})
for await (const { data } of eventSource) {
answer.value += data.replaceAll(/#\/#/g, '')
renderedAnswer.value = md.render(answer.value)
}
} catch (error) {
console.error('请求出错:', error)
answer.value = '抱歉，请求出现错误'
renderedAnswer.value = answer.value
showToastMessage('请求失败，请检查服务器连接', 'error')
} finally {
loading.value = false
}
}
// 添加设置对话框的状态控制
const showSettings = ref(false)
// 添加保存设置到本地存储的函数
const saveSettingsToStorage = () => {
const settings = {
useTw: useTw.value,
useDatabase: useDatabase.value,
databaseUrl: databaseUrl.value,
databaseUsername: databaseUsername.value,
databasePassword: databasePassword.value,
databaseName: databaseName.value,
}
localStorage.setItem('chatSettings', JSON.stringify(settings))
}
// 从本地存储加载设置的函数
const loadSettingsFromStorage = () => {
const settings = localStorage.getItem('chatSettings')
if (settings) {
const parsed = JSON.parse(settings)
useTw.value = parsed.useTw
useDatabase.value = parsed.useDatabase
databaseUrl.value = parsed.databaseUrl
databaseUsername.value = parsed.databaseUsername
databasePassword.value = parsed.databasePassword
databaseName.value = parsed.databaseName || ''
}
}
// 修改 showToastMessage 函数，添加消息类型参数
const showToastMessage = (message, type = 'success') => {
toastMessage.value = message
toastMessageType.value = type
showToast.value = true
setTimeout(() => {
showToast.value = false
}, 3000)
}
// 修改 handleCloseSettings 函数中的调用
const handleCloseSettings = () => {
if (useDatabase.value) {
if (!databaseUrl.value.trim()) {
showToastMessage('请输入数据库地址', 'error')
return
}
if (!databaseUsername.value.trim()) {
showToastMessage('请输入数据库用户名', 'error')
return
}
if (!databaseName.value.trim()) {
showToastMessage('请输入数据库名称', 'error')
return
}
}
saveSettingsToStorage()
showSettings.value = false
showToastMessage('设置已保存', 'success')
}
// 在组件挂载时加载设置
onMounted(() => {
loadSettingsFromStorage()
})
</script>
<template>
<div class="chat-container">
<div class="chat-header">
<h1>AI 助手</h1>
<h1>数据库助手</h1>
</div>
<div class="messages-container">
<div class="answer-area">
<div
<div
v-if="renderedAnswer"
class="markdown-body"
v-html="renderedAnswer"
@@ -80,7 +168,7 @@ const handleSubmit = async () => {
</div>
</template>
<template v-else>
在下方输入您的问题，AI 助手会为您解答...
你好！很高兴见到你。有什么我可以帮忙的吗？
</template>
</div>
</div>
@@ -88,21 +176,176 @@ const handleSubmit = async () => {
<div class="input-area">
<div class="input-container">
<textarea
<textarea
v-model="question"
placeholder="请输入您的问题... (Ctrl + Enter 快速发送)"
@keyup.ctrl.enter="handleSubmit"
></textarea>
<button
:disabled="loading"
class="send-button"
@click="handleSubmit"
>
<span v-if="loading" class="loading-spinner"></span>
<span>{{ loading ? '思考中...' : '发送' }}</span>
</button>
<div class="button-group">
<button :disabled="loading" class="send-button" @click="handleSubmit">
<template v-if="loading">
<span class="loading-spinner"></span>
</template>
<template v-else>
<span>发送</span>
</template>
</button>
<button class="settings-button" @click="showSettings = true">
<span>设置</span>
</button>
</div>
</div>
</div>
<!-- 修改设置对话框的 Transition 组件 -->
<Transition
enter-active-class="transition duration-300 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="showSettings" class="settings-modal">
<Transition
enter-active-class="transition duration-300 ease-out"
enter-from-class="opacity-0 translate-y-4"
enter-to-class="opacity-100 translate-y-0"
leave-active-class="transition duration-200 ease-in"
leave-from-class="opacity-100 translate-y-0"
leave-to-class="opacity-0 translate-y-4"
>
<div class="settings-content">
<div class="settings-header">
<h2>设置</h2>
</div>
<div class="settings-body">
<label class="switch-wrapper">
<span class="switch-label">图文并茂</span>
<div class="switch">
<input v-model="useTw" type="checkbox" />
<span class="slider"></span>
</div>
</label>
<label class="switch-wrapper">
<span class="switch-label">连接数据库</span>
<div class="switch">
<input v-model="useDatabase" type="checkbox" />
<span class="slider"></span>
</div>
</label>
<!-- 数据库设置项，仅在 useDatabase 为 true 时显示 -->
<div v-if="useDatabase" class="database-settings">
<div class="input-field">
<label for="database-url">数据库地址</label>
<div class="input-wrapper">
<input
id="database-url"
v-model="databaseUrl"
placeholder="请输入数据库连接地址"
type="text"
/>
<button
v-if="databaseUrl"
class="clear-button"
@click="databaseUrl = ''"
>
✕
</button>
</div>
</div>
<div class="input-field">
<label for="database-username">用户名</label>
<div class="input-wrapper">
<input
id="database-username"
v-model="databaseUsername"
placeholder="请输入数据库用户名"
type="text"
/>
<button
v-if="databaseUsername"
class="clear-button"
@click="databaseUsername = ''"
>
✕
</button>
</div>
</div>
<div class="input-field">
<label for="database-password">密码</label>
<div class="input-wrapper">
<input
id="database-password"
v-model="databasePassword"
placeholder="请输入数据库密码"
type="password"
/>
<button
v-if="databasePassword"
class="clear-button"
@click="databasePassword = ''"
>
✕
</button>
</div>
</div>
<div class="input-field">
<label for="database-name">数据库名</label>
<div class="input-wrapper">
<input
id="database-name"
v-model="databaseName"
placeholder="请输入数据库名称"
type="text"
/>
<button
v-if="databaseName"
class="clear-button"
@click="databaseName = ''"
>
✕
</button>
</div>
</div>
</div>
</div>
<div class="settings-footer">
<button class="save-button" @click="handleCloseSettings">
<svg
fill="none"
height="20"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
></path>
<polyline points="17 21 17 13 7 13 7 21"></polyline>
<polyline points="7 3 7 8 15 8"></polyline>
</svg>
<span>保存</span>
</button>
</div>
</div>
</Transition>
</div>
</Transition>
<!-- 修改 Toast 组件 -->
<div v-if="showToast" :data-type="toastMessageType" class="toast-message">
{{ toastMessage }}
</div>
</div>
</template>
@@ -112,13 +355,17 @@ const handleSubmit = async () => {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #fafafa; /* 更柔和的背景色 */
background-color: #f8fafc; /* 更浅的背景色 */
}
.chat-header {
padding: 20px 32px;
background: linear-gradient(to right, #2563eb, #3b82f6); /* 渐变背景 */
box-shadow: 0 2px 12px rgba(37, 99, 235, 0.15);
background: linear-gradient(
to right,
#334155,
#475569
); /* 更深沉的渐变背景 */
box-shadow: 0 2px 12px rgba(51, 65, 85, 0.15);
position: sticky;
top: 0;
z-index: 10;
@@ -136,7 +383,11 @@ const handleSubmit = async () => {
flex: 1;
overflow-y: auto;
padding: 32px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); /* 渐变背景 */
background: linear-gradient(
135deg,
#f1f5f9 0%,
#ffffff 100%
); /* 更柔和的渐变背景 */
scroll-behavior: smooth;
}
@@ -144,12 +395,13 @@ const handleSubmit = async () => {
max-width: 1200px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
padding: 40px;
min-height: 200px;
min-height: 200px; /* 保持最小高度 */
height: auto; /* 添加自适应高度 */
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
}
.placeholder {
@@ -162,13 +414,15 @@ const handleSubmit = async () => {
}
.input-area {
padding: 24px 32px;
padding: 16px 24px; /* 减小内边距 */
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(0, 0, 0, 0.06);
position: sticky;
bottom: 0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}
.input-container {
@@ -176,17 +430,16 @@ const handleSubmit = async () => {
margin: 0 auto;
width: 100%;
display: flex;
gap: 20px;
gap: 12px; /* 减小间距 */
}
textarea {
flex: 1;
min-height: 64px;
max-height: 200px;
padding: 18px 24px;
border: 2px solid #e2e8f0;
border-radius: 16px;
resize: none; /* 禁用调整大小功能 */
padding: 14px 20px; /* 减小内边距 */
border: 1px solid #e2e8f0;
border-radius: 12px;
resize: none;
font-size: 1rem;
line-height: 1.6;
transition: all 0.2s ease;
@@ -196,8 +449,8 @@ textarea {
textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
border-color: #475569;
box-shadow: 0 0 0 4px rgba(71, 85, 105, 0.15);
}
textarea::placeholder {
@@ -205,31 +458,42 @@ textarea::placeholder {
font-weight: 500;
}
.send-button {
padding: 0 32px;
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
.button-group {
display: flex;
flex-direction: column;
gap: 6px; /* 减小按钮之间的间距 */
justify-content: stretch;
}
.send-button,
.settings-button {
width: 100px; /* 统一按钮宽度 */
height: 46px; /* 统一按钮高度 */
background: linear-gradient(135deg, #334155 0%, #475569 100%);
color: white;
border: none;
border-radius: 16px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
box-shadow: 0 4px 12px rgba(51, 65, 85, 0.2);
}
.send-button:hover:not(:disabled) {
.send-button:hover:not(:disabled),
.settings-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
box-shadow: 0 6px 20px rgba(51, 65, 85, 0.25);
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.send-button:active:not(:disabled) {
.send-button:active:not(:disabled),
.settings-button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
box-shadow: 0 2px 8px rgba(51, 65, 85, 0.2);
}
.send-button:disabled {
@@ -241,7 +505,11 @@ textarea::placeholder {
/* Markdown 样式优化 */
.markdown-body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
width: 100%;
height: auto; /* 添加自适应高度 */
overflow: visible; /* 确保内容不会被截断 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
sans-serif;
font-size: 1.05rem;
line-height: 1.8;
color: #334155;
@@ -249,20 +517,21 @@ textarea::placeholder {
.markdown-body :deep(pre) {
background-color: #f8fafc;
border-radius: 16px;
padding: 24px;
border-radius: 8px; /* 减小圆角 */
padding: 20px;
overflow-x: auto;
border: 1px solid #e2e8f0;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03);
}
.markdown-body :deep(code) {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, monospace;
font-size: 0.95em;
background-color: #f1f5f9;
padding: 0.2em 0.4em;
border-radius: 6px;
color: #2563eb;
border-radius: 4px;
color: #475569;
}
.markdown-body :deep(pre code) {
@@ -275,9 +544,9 @@ textarea::placeholder {
.markdown-body :deep(blockquote) {
margin: 2em 0;
padding: 1em 1.5em;
border-left: 4px solid #3b82f6;
border-left: 4px solid #475569;
background-color: #f8fafc;
border-radius: 0 16px 16px 0;
border-radius: 0 8px 8px 0; /* 减小圆角 */
color: #475569;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}
@@ -290,7 +559,7 @@ textarea::placeholder {
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
display: block; /* 改为 block 以确保居中 */
}
@keyframes spin {
@@ -301,25 +570,17 @@ textarea::placeholder {
/* 响应式设计优化 */
@media (max-width: 768px) {
.messages-container {
padding: 20px;
}
.answer-area {
padding: 24px;
}
.input-area {
padding: 16px 20px;
padding: 12px 16px; /* 移动端进一步减小内边距 */
}
.input-container {
gap: 8px; /* 移动端减小间距 */
}
textarea {
padding: 16px 20px;
font-size: 16px;
}
.send-button {
padding: 0 24px;
min-height: 56px; /* 移动端减小文本框高度 */
padding: 12px 16px; /* 移动端减小内边距 */
}
}
@@ -330,16 +591,346 @@ textarea::placeholder {
justify-content: center;
gap: 12px;
font-size: 1.2rem;
color: #3b82f6;
color: #475569; /* 更改思考中的颜色 */
}
.thinking-spinner {
width: 16px;
height: 16px;
border: 2.5px solid #3b82f6;
border: 2.5px solid #475569; /* 更改加载动画颜色 */
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
}
</style>
.settings-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-start;
justify-content: center;
z-index: 1000;
padding-top: 15vh;
}
.settings-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 600px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
transform-origin: bottom;
}
.settings-header {
padding: 5px 20px;
border-bottom: 1px solid #e2e8f0;
}
.settings-body {
padding: 24px;
flex: 1;
min-height: 200px;
}
.settings-footer {
padding: 10px 20px;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: flex-end;
background-color: #f8fafc;
border-radius: 0 0 12px 12px;
}
.save-button {
background: #334155;
border: none;
cursor: pointer;
padding: 8px 15px;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 6px;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.2s ease;
}
.save-button:hover {
background: #1e293b;
transform: translateY(-1px);
}
.save-button:active {
transform: translateY(0);
}
/* 修改数据库设置区域的样式 */
.database-settings {
margin-top: 12px;
padding: 12px 16px;
background-color: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.input-field {
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.input-field:last-child {
margin-bottom: 0;
}
.input-field label {
display: block;
font-size: 1rem;
color: #334155;
font-weight: 500;
flex: 0 0 80px;
}
.input-field input {
flex: 1;
padding: 8px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.95rem;
transition: all 0.2s ease;
background-color: white;
padding-right: 32px; /* 为清空按钮留出空间 */
}
.input-field input:focus {
outline: none;
border-color: #475569;
box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.1);
}
.input-field input::placeholder {
color: #94a3b8;
}
.input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.clear-button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 50%;
width: 20px;
height: 20px;
transition: all 0.2s ease;
z-index: 1;
}
.clear-button:hover {
background-color: #f1f5f9;
color: #64748b;
}
.clear-button:active {
background-color: #e2e8f0;
}
/* 优化开关选项的间距 */
.switch-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.switch-wrapper + .switch-wrapper {
border-top: 1px solid #e2e8f0;
}
.switch-label {
font-size: 1rem;
color: #334155;
font-weight: 500;
}
/* 开关样式 */
.switch {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
transition: 0.4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: '';
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #334155;
}
input:focus + .slider {
box-shadow: 0 0 1px #334155;
}
input:checked + .slider:before {
transform: translateX(24px);
}
/* 修改 Toast 样式 */
.toast-message {
position: fixed;
top: 90px;
left: 50%;
transform: translateX(-50%);
background-color: #334155;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
z-index: 2000;
display: flex;
align-items: center;
gap: 8px;
}
.toast-message::before {
font-weight: bold;
}
/* 成功状态的 toast */
.toast-message[data-type='success']::before {
content: '✓';
color: #10b981;
}
/* 错误状态的 toast */
.toast-message[data-type='error']::before {
content: '!';
color: #ef4444;
}
/* 添加响应式样式 */
@media (max-width: 768px) {
.toast-message {
width: 90%;
max-width: 320px;
text-align: center;
justify-content: center;
}
}
/* 添加必要的过渡类 */
.transition {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.duration-300 {
transition-duration: 300ms;
}
.duration-200 {
transition-duration: 200ms;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.translate-y-4 {
transform: translateY(1rem);
}
.translate-y-0 {
transform: translateY(0);
}
/* 删除这些不需要的类 */
.translate-y-full {
transform: translateY(100%);
}
.translate-y-\[-20px\] {
transform: translateY(-20px);
}
/* 添加图表容器样式 */
.chart-container {
width: 100%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
</style>

2
client/src/main.js
View File

@@ -1,7 +1,5 @@
import {createApp} from 'vue'
import App from './App.vue'
import Markdown from 'vue3-markdown-it'
const app = createApp(App)
.use(Markdown)
.mount('#app')