289 lines
6.7 KiB
Vue
289 lines
6.7 KiB
Vue
<script setup lang="ts">
|
||
import { ref, nextTick } from 'vue'
|
||
import { useEditorStore } from '../stores/editorStore'
|
||
import { sendAIRequest } from '../composables/useAI'
|
||
|
||
const store = useEditorStore()
|
||
const inputText = ref('')
|
||
const loading = ref(false)
|
||
const errorMsg = ref('')
|
||
const messages = ref<{ role: string; content: string }[]>([])
|
||
const chatRef = ref<HTMLDivElement | null>(null)
|
||
|
||
const mode = ref<'json' | 'code'>('json')
|
||
|
||
function toggleMode() {
|
||
mode.value = mode.value === 'json' ? 'code' : 'json'
|
||
}
|
||
|
||
async function send() {
|
||
const msg = inputText.value.trim()
|
||
if (!msg || loading.value) return
|
||
inputText.value = ''
|
||
errorMsg.value = ''
|
||
|
||
if (!store.deepseekKey) {
|
||
errorMsg.value = '请先在设置中输入 DeepSeek API Key'
|
||
return
|
||
}
|
||
|
||
messages.value.push({ role: 'user', content: msg })
|
||
loading.value = true
|
||
|
||
try {
|
||
const { result, sessionId: newSid } = await sendAIRequest(msg, mode.value, store.deepseekKey, store.aiSessionId || undefined)
|
||
if (newSid) store.setAISessionId(newSid)
|
||
|
||
if (mode.value === 'json') {
|
||
const clean = result.replace(/^```json\n?|\n?```$/g, '').trim()
|
||
try {
|
||
JSON.parse(clean)
|
||
store.setAIResult(clean)
|
||
messages.value.push({ role: 'assistant', content: '已生成 JSON，请查看编辑器面板' })
|
||
} catch {
|
||
messages.value.push({ role: 'assistant', content: result })
|
||
}
|
||
} else {
|
||
messages.value.push({ role: 'assistant', content: result || '已完成' })
|
||
}
|
||
} catch (e: any) {
|
||
errorMsg.value = e.message || '请求失败'
|
||
} finally {
|
||
loading.value = false
|
||
await nextTick()
|
||
chatRef.value?.scrollTo({ top: chatRef.value.scrollHeight })
|
||
}
|
||
}
|
||
|
||
function onKeydown(e: KeyboardEvent) {
|
||
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() }
|
||
}
|
||
|
||
function newSession() {
|
||
store.clearAISession()
|
||
messages.value = []
|
||
errorMsg.value = ''
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="ai-panel">
|
||
<div class="ai-header">
|
||
<span class="ai-title">AI 助手</span>
|
||
<div class="ai-header-actions">
|
||
<button class="ai-mode-btn" @click="toggleMode" :title="mode === 'json' ? '切换到代码模式' : '切换到 JSON 模式'">
|
||
{{ mode === 'json' ? '📋 JSON' : '💻 代码' }}
|
||
</button>
|
||
<button class="ai-new-btn" @click="newSession" title="新建对话">+</button>
|
||
<button class="ai-close-btn" @click="store.showAIPanel = false">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai-chat" ref="chatRef">
|
||
<div v-if="!store.deepseekKey" class="ai-key-setup">
|
||
<span class="key-label">DeepSeek API Key</span>
|
||
<input
|
||
class="key-input"
|
||
type="password"
|
||
placeholder="sk-..."
|
||
:value="store.deepseekKey"
|
||
@input="store.setDeepseekKey(($event.target as HTMLInputElement).value)"
|
||
/>
|
||
<div class="key-hint">Key 保存在浏览器本地，不会上传到编辑器服务器</div>
|
||
</div>
|
||
<div v-if="messages.length === 0 && store.deepseekKey" class="ai-empty">
|
||
输入你的需求，AI 将根据引擎规范修改配置
|
||
</div>
|
||
<div v-for="(m, i) in messages" :key="i" class="ai-msg" :class="m.role">
|
||
<span class="ai-role">{{ m.role === 'user' ? '👤' : '🤖' }}</span>
|
||
<span class="ai-content">{{ m.content }}</span>
|
||
</div>
|
||
<div v-if="loading" class="ai-msg assistant">
|
||
<span class="ai-role">🤖</span>
|
||
<span class="ai-content loading-dots">正在生成<span class="dots">...</span></span>
|
||
</div>
|
||
<div v-if="errorMsg" class="ai-error">{{ errorMsg }}</div>
|
||
</div>
|
||
|
||
<div class="ai-input-area">
|
||
<input
|
||
v-model="inputText"
|
||
class="ai-input"
|
||
placeholder="输入你的需求..."
|
||
:disabled="loading"
|
||
@keydown="onKeydown"
|
||
/>
|
||
<button class="ai-send-btn" @click="send" :disabled="loading">发送</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.ai-panel {
|
||
width: 340px;
|
||
height: 100%;
|
||
background: #141428;
|
||
border-left: 1px solid rgba(255,255,255,0.08);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.ai-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ai-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #ddd;
|
||
}
|
||
|
||
.ai-header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.ai-mode-btn {
|
||
padding: 3px 8px;
|
||
font-size: 11px;
|
||
color: #8cf;
|
||
background: rgba(100,200,255,0.08);
|
||
border: 1px solid rgba(100,200,255,0.2);
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.ai-mode-btn:hover { background: rgba(100,200,255,0.15); }
|
||
|
||
.ai-new-btn, .ai-close-btn {
|
||
background: none;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
color: #888;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
}
|
||
.ai-new-btn:hover, .ai-close-btn:hover { color: #ddd; border-color: rgba(255,255,255,0.2); }
|
||
|
||
.ai-chat {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.ai-empty {
|
||
color: #555;
|
||
font-size: 13px;
|
||
text-align: center;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.ai-msg {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.ai-role {
|
||
flex-shrink: 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.ai-msg.user .ai-content {
|
||
color: #8cf;
|
||
}
|
||
|
||
.ai-msg.assistant .ai-content {
|
||
color: #ccc;
|
||
}
|
||
|
||
.loading-dots .dots {
|
||
animation: dotPulse 1.2s infinite;
|
||
}
|
||
|
||
@keyframes dotPulse {
|
||
0%, 20% { opacity: 0; }
|
||
50% { opacity: 1; }
|
||
80%, 100% { opacity: 0; }
|
||
}
|
||
|
||
.ai-error {
|
||
font-size: 12px;
|
||
color: #e74c3c;
|
||
padding: 8px 12px;
|
||
background: rgba(231,76,60,0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.ai-input-area {
|
||
display: flex;
|
||
gap: 6px;
|
||
padding: 10px 14px;
|
||
border-top: 1px solid rgba(255,255,255,0.06);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ai-input {
|
||
flex: 1;
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
background: rgba(255,255,255,0.05);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 4px;
|
||
color: #ddd;
|
||
outline: none;
|
||
}
|
||
.ai-input:focus { border-color: rgba(255,255,255,0.2); }
|
||
|
||
.ai-send-btn {
|
||
padding: 8px 14px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
background: rgba(100,200,255,0.15);
|
||
border: 1px solid rgba(100,200,255,0.25);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.ai-send-btn:hover { background: rgba(100,200,255,0.25); }
|
||
.ai-send-btn:disabled { opacity: 0.4; cursor: default; }
|
||
|
||
.ai-key-setup {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.key-label {
|
||
font-size: 14px;
|
||
color: #ccc;
|
||
}
|
||
|
||
.key-input {
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
background: rgba(255,255,255,0.05);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 4px;
|
||
color: #ddd;
|
||
outline: none;
|
||
}
|
||
.key-input:focus { border-color: rgba(100,200,255,0.3); }
|
||
|
||
.key-hint {
|
||
font-size: 11px;
|
||
color: #666;
|
||
}
|
||
</style>
|