358 lines
9.8 KiB
Vue
358 lines
9.8 KiB
Vue
<!--
|
||
Copyright 2024-2026 ReplyPier
|
||
|
||
Licensed under the Apache License, Version 2.0 (the "License");
|
||
you may not use this file except in compliance with the License.
|
||
You may obtain a copy of the License at
|
||
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
Unless required by applicable law or agreed to in writing, software
|
||
distributed under the License is distributed on an "AS IS" BASIS,
|
||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
See the License for the specific language governing permissions and
|
||
limitations under the License.
|
||
-->
|
||
|
||
<script setup lang="ts">
|
||
import type { Agent } from '@/types/agent'
|
||
import { useAgentCreate } from '@/composables/useAgentCreate'
|
||
|
||
const {
|
||
agentName,
|
||
useWorkflow,
|
||
isCreating,
|
||
error,
|
||
createAgent
|
||
} = useAgentCreate()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'close'): void
|
||
(e: 'created', agent: Agent): void
|
||
(e: 'openWorkflowBuilder', agent: Agent): void
|
||
}>()
|
||
|
||
const handleCreateAgent = async () => {
|
||
const newAgent = await createAgent()
|
||
if (newAgent) {
|
||
emit('created', newAgent)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="modal-overlay">
|
||
<div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="create-agent-title">
|
||
<div class="modal-header">
|
||
<h3 id="create-agent-title">创建客服</h3>
|
||
<button type="button" class="close-button" aria-label="关闭" @click="$emit('close')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form @submit.prevent="handleCreateAgent">
|
||
<div class="form-group">
|
||
<label for="agent-name">客服名称</label>
|
||
<input
|
||
id="agent-name"
|
||
type="text"
|
||
v-model="agentName"
|
||
placeholder="例如：客户支持客服"
|
||
:disabled="isCreating"
|
||
required
|
||
>
|
||
<div class="help-text">
|
||
为客服起个名字，访客会看到这个名称。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group mode-selection">
|
||
<label>客服模式</label>
|
||
<div class="mode-options">
|
||
<div
|
||
class="mode-option"
|
||
:class="{ 'selected': !useWorkflow }"
|
||
@click="useWorkflow = false"
|
||
>
|
||
<div class="mode-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 3l1.9 4.6L18.5 9l-4.6 1.4L12 15l-1.9-4.6L5.5 9l4.6-1.4z"/>
|
||
<path d="M19 14l.7 1.8L21.5 16.5l-1.8.7L19 19l-.7-1.8L16.5 16.5l1.8-.7z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="mode-details">
|
||
<h4>AI 自动模式</h4>
|
||
<p>让 AI 依据指令自然应答</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="mode-option"
|
||
:class="{ 'selected': useWorkflow }"
|
||
@click="useWorkflow = true"
|
||
>
|
||
<div class="mode-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="6" cy="6" r="2.4"/>
|
||
<circle cx="6" cy="18" r="2.4"/>
|
||
<circle cx="18" cy="9" r="2.4"/>
|
||
<path d="M8.4 6H13a3 3 0 0 1 3 3M6 8.4v7.2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="mode-details">
|
||
<h4>工作流编排</h4>
|
||
<p>拖拽搭建自定义对话流程</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="error" class="error-message">
|
||
{{ error }}
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button
|
||
type="button"
|
||
class="cancel-button"
|
||
@click="$emit('close')"
|
||
:disabled="isCreating"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="create-button"
|
||
:disabled="isCreating"
|
||
>
|
||
{{ isCreating ? '创建中…' : '创建客服' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: var(--surface);
|
||
border: 1px solid var(--o10);
|
||
border-radius: 24px;
|
||
width: 90%;
|
||
max-width: 600px;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
|
||
animation: modal-appear 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes modal-appear {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--space-lg) var(--space-lg) var(--space-md);
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
font-size: 1.5rem;
|
||
color: var(--text-color);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.close-button {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
line-height: 1;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.close-button:hover {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: var(--space-xs);
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
padding: var(--space-md);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-md);
|
||
background: var(--background-soft);
|
||
color: var(--text-color);
|
||
font-size: 1rem;
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
|
||
input:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 2px var(--primary-soft);
|
||
}
|
||
|
||
.help-text {
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
margin-top: var(--space-xs);
|
||
}
|
||
|
||
.error-message {
|
||
background-color: var(--error-soft);
|
||
color: var(--error-color);
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-lg);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.mode-options {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
flex-direction: column;
|
||
}
|
||
|
||
.mode-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
padding: var(--space-md);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: var(--radius-lg);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.mode-option.selected {
|
||
border-color: var(--primary-color);
|
||
background-color: var(--primary-soft);
|
||
}
|
||
|
||
.mode-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44px;
|
||
height: 44px;
|
||
flex-shrink: 0;
|
||
border-radius: var(--radius-md);
|
||
background: var(--o05);
|
||
border: 1px solid var(--o10);
|
||
color: var(--muted);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.mode-option.selected .mode-icon {
|
||
background: var(--accent-bg-08);
|
||
border-color: var(--accent-border);
|
||
color: var(--accent-ink);
|
||
}
|
||
|
||
.mode-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.mode-details h4 {
|
||
margin: 0 0 var(--space-xs);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.mode-details p {
|
||
margin: 0;
|
||
color: var(--text-muted);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: var(--space-md);
|
||
margin-top: var(--space-xl);
|
||
}
|
||
|
||
.cancel-button {
|
||
padding: var(--space-md) var(--space-lg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-md);
|
||
background: var(--background-soft);
|
||
color: var(--text-color);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.cancel-button:hover {
|
||
background: var(--background-muted);
|
||
}
|
||
|
||
.create-button {
|
||
padding: var(--space-md) var(--space-lg);
|
||
border: none;
|
||
border-radius: var(--radius-md);
|
||
background: var(--accent-solid);
|
||
color: var(--on-accent-solid);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.create-button:hover {
|
||
background: var(--primary-dark);
|
||
}
|
||
|
||
.create-button:disabled,
|
||
.cancel-button:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.mode-options {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.mode-option {
|
||
flex: 1;
|
||
}
|
||
}
|
||
</style> |