AI助手
This commit is contained in:
nojava
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<section class="chat-panel">
|
||||
<div class="chat-header">
|
||||
<span class="chat-title">{{ currentTitle }}</span>
|
||||
<span v-if="isLoggedIn && currentSessionId" class="round-badge">{{ roundCount }}/{{ maxRounds }}</span>
|
||||
</div>
|
||||
|
||||
<div ref="messagesRef" class="messages">
|
||||
<div v-if="messages.length === 0 && !sending" class="welcome">
|
||||
<p>我是 Jog AI 助手</p>
|
||||
<p class="welcome-sub">可以回答博客写作、技术问题等。输入问题后点击发送开始对话。</p>
|
||||
</div>
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id ?? msg._localId"
|
||||
class="message-row"
|
||||
:class="msg.role"
|
||||
>
|
||||
<div class="bubble">{{ msg.content }}</div>
|
||||
</div>
|
||||
<div v-if="sending" class="message-row assistant">
|
||||
<div class="bubble thinking">正在思考…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="readOnly" class="readonly-banner">
|
||||
当前会话已满 {{ maxRounds }} 轮，请点击左侧「新会话」开始新的对话
|
||||
</div>
|
||||
|
||||
<div class="input-area">
|
||||
<el-input
|
||||
v-model="inputText"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
placeholder="请输入您的问题…"
|
||||
:disabled="inputDisabled"
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="sending"
|
||||
:disabled="sendDisabled"
|
||||
@click="onSend"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
currentTitle: { type: String, default: 'AI 助手' },
|
||||
messages: { type: Array, default: () => [] },
|
||||
roundCount: { type: Number, default: 0 },
|
||||
maxRounds: { type: Number, default: 5 },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
sending: { type: Boolean, default: false },
|
||||
currentSessionId: { type: [Number, String], default: null },
|
||||
isLoggedIn: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['send'])
|
||||
|
||||
const inputText = ref('')
|
||||
const messagesRef = ref(null)
|
||||
|
||||
const inputDisabled = computed(() => {
|
||||
if (!props.isLoggedIn) return true
|
||||
if (props.readOnly) return true
|
||||
if (props.sending) return true
|
||||
return false
|
||||
})
|
||||
|
||||
const sendDisabled = computed(() => {
|
||||
if (inputDisabled.value) return true
|
||||
if (props.roundCount >= props.maxRounds) return true
|
||||
return !inputText.value.trim()
|
||||
})
|
||||
|
||||
function onSend() {
|
||||
const text = inputText.value.trim()
|
||||
if (!text || sendDisabled.value) return
|
||||
emit('send', text)
|
||||
inputText.value = ''
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
onSend()
|
||||
}
|
||||
}
|
||||
|
||||
async function scrollToBottom() {
|
||||
await nextTick()
|
||||
const el = messagesRef.value
|
||||
if (el) el.scrollTop = el.scrollHeight
|
||||
}
|
||||
|
||||
watch(() => props.messages, () => scrollToBottom(), { deep: true })
|
||||
watch(() => props.sending, () => { if (props.sending) scrollToBottom() })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--border-color-light);
|
||||
}
|
||||
.chat-title {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
.round-badge {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
background: var(--color-primary-light);
|
||||
padding: 2px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.readonly-banner {
|
||||
background: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
color: #ad6800;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-md) 0;
|
||||
min-height: 280px;
|
||||
}
|
||||
.welcome {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
padding: var(--spacing-2xl) var(--spacing-md);
|
||||
}
|
||||
.welcome-sub {
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
.message-row {
|
||||
display: flex;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
.message-row.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.message-row.assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.bubble {
|
||||
max-width: 85%;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-lg);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.message-row.user .bubble {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
.message-row.assistant .bubble {
|
||||
background: var(--border-color-light);
|
||||
color: var(--text-regular);
|
||||
}
|
||||
.bubble.thinking {
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
.input-area {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
align-items: flex-end;
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--border-color-light);
|
||||
}
|
||||
.input-area .el-textarea {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user