750 lines
17 KiB
Vue
750 lines
17 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<Transition name="modal">
|
||
<div v-if="visible" class="modal-overlay" @click.self="close">
|
||
<div class="conversation-settings-modal">
|
||
<!-- 头部 -->
|
||
<div class="modal-header">
|
||
<div class="header-title">
|
||
<MessageSquare :size="22" />
|
||
<h3>对话设置</h3>
|
||
</div>
|
||
<button class="close-btn" @click="close">
|
||
<X :size="20" />
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 内容 -->
|
||
<div class="modal-content">
|
||
<!-- 对话信息 -->
|
||
<div class="section">
|
||
<div class="section-title">对话信息</div>
|
||
|
||
<!-- 标题 -->
|
||
<div class="setting-item vertical">
|
||
<label class="setting-label">对话标题</label>
|
||
<input
|
||
v-model="localSettings.title"
|
||
type="text"
|
||
class="text-input"
|
||
placeholder="输入对话标题"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 创建时间 -->
|
||
<div class="setting-item">
|
||
<span class="setting-label">创建时间</span>
|
||
<span class="setting-value">{{
|
||
formatDate(conversation?.createdAt)
|
||
}}</span>
|
||
</div>
|
||
|
||
<!-- 消息数量 -->
|
||
<div class="setting-item">
|
||
<span class="setting-label">消息数量</span>
|
||
<span class="setting-value"
|
||
>{{ conversation?.messages.length || 0 }} 条</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 设置 -->
|
||
<div class="section">
|
||
<div class="section-title">AI 设置</div>
|
||
|
||
<!-- 模型选择 -->
|
||
<div class="setting-item vertical">
|
||
<label class="setting-label">AI 模型</label>
|
||
<FormSelect
|
||
v-model="modelSelect"
|
||
:options="modelOptions"
|
||
valueProp="label"
|
||
@update:model-value="updateSelect"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 温度 -->
|
||
<div class="setting-item vertical">
|
||
<div class="setting-header">
|
||
<label class="setting-label">温度</label>
|
||
<span class="setting-value">{{
|
||
localSettings.temperature.toFixed(1)
|
||
}}</span>
|
||
</div>
|
||
<FormSlider
|
||
v-model="localSettings.temperature"
|
||
:min="0"
|
||
:max="1"
|
||
:step="0.1"
|
||
/>
|
||
<p class="setting-hint">
|
||
较低的温度使回复更加集中和确定，较高的温度使回复更加多样化
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 最大 Token -->
|
||
<div class="setting-item vertical">
|
||
<div class="setting-header">
|
||
<label class="setting-label">最大回复长度</label>
|
||
<span class="setting-value">{{
|
||
localSettings.maxTokens
|
||
}}</span>
|
||
</div>
|
||
<FormSlider
|
||
v-model="localSettings.maxTokens"
|
||
:min="256"
|
||
:max="8192"
|
||
:step="256"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统提示词 -->
|
||
<div class="section">
|
||
<div class="section-title">系统提示词</div>
|
||
|
||
<div class="setting-item vertical">
|
||
<textarea
|
||
v-model="localSettings.systemPrompt"
|
||
class="prompt-textarea"
|
||
rows="5"
|
||
placeholder="输入系统提示词，定义 AI 的角色和行为..."
|
||
/>
|
||
<p class="setting-hint">
|
||
系统提示词会影响 AI 在整个对话中的行为方式
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 预设提示词 -->
|
||
<div class="preset-prompts">
|
||
<span class="preset-label">快速选择：</span>
|
||
<button
|
||
v-for="preset in presetPrompts"
|
||
:key="preset.name"
|
||
class="preset-btn"
|
||
@click="localSettings.systemPrompt = preset.prompt"
|
||
>
|
||
{{ preset.name }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记忆设置 -->
|
||
<div class="section">
|
||
<div class="section-title">记忆设置</div>
|
||
|
||
<div class="setting-item">
|
||
<div class="setting-info">
|
||
<span class="setting-label">启用对话记忆</span>
|
||
<span class="setting-desc">AI 会记住之前的对话内容</span>
|
||
</div>
|
||
<FormSwitch v-model="localSettings.enableMemory" />
|
||
</div>
|
||
|
||
<div
|
||
v-if="localSettings.enableMemory"
|
||
class="setting-item vertical"
|
||
>
|
||
<div class="setting-header">
|
||
<label class="setting-label">记忆长度</label>
|
||
<span class="setting-value"
|
||
>{{ localSettings.memoryLength }} 条消息</span
|
||
>
|
||
</div>
|
||
<FormSlider
|
||
v-model="localSettings.memoryLength"
|
||
:min="2"
|
||
:max="50"
|
||
:step="2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 危险操作 -->
|
||
<div class="section danger-section">
|
||
<div class="section-title">危险操作</div>
|
||
|
||
<div class="danger-actions">
|
||
<button class="danger-btn" @click="handleClearMessages">
|
||
<Trash2 :size="18" />
|
||
<span>清空消息</span>
|
||
</button>
|
||
<button class="danger-btn" @click="handleDeleteConversation">
|
||
<Trash2 :size="18" />
|
||
<span>删除对话</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部 -->
|
||
<div class="modal-footer">
|
||
<button class="cancel-btn" @click="close">取消</button>
|
||
<button class="save-btn" @click="handleSave">
|
||
<Check :size="18" />
|
||
<span>保存设置</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted } from "vue";
|
||
import { storeToRefs } from "pinia";
|
||
import { useChatStore } from "@/stores/chat";
|
||
import { useSettingsStore } from "@/stores/settings";
|
||
import FormSwitch from "@/components/ui/FormSwitch.vue";
|
||
import FormSlider from "@/components/ui/FormSlider.vue";
|
||
import FormSelect from "@/components/ui/FormSelect.vue";
|
||
import { MessageSquare, X, Check, Trash2 } from "@/components/icons";
|
||
import { chatApi } from "@/services/api.ts";
|
||
import type { ConversationSettings } from "@/types/chat";
|
||
|
||
const chatStore = useChatStore();
|
||
const settingsStore = useSettingsStore();
|
||
|
||
// 分开获取：响应式状态用 storeToRefs，普通数据直接从 store 获取
|
||
const { currentConversation: conversation } = storeToRefs(chatStore);
|
||
const { showConversationSettingsModal: visible, settings } =
|
||
storeToRefs(settingsStore);
|
||
const availableModels: any = ref([]);
|
||
const modelSelect = ref(localStorage.getItem("modelSelect") || "");
|
||
|
||
onMounted(() => {
|
||
chatApi.getModels().then((res: any) => {
|
||
availableModels.value = res;
|
||
if (!localStorage.getItem("modelSelect")) {
|
||
modelSelect.value = availableModels.value[0]["name"] || "";
|
||
localStorage.setItem("modelSelect", modelSelect.value);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 本地设置副本
|
||
const localSettings = ref({
|
||
title: "",
|
||
model: "gpt-4",
|
||
temperature: 0.7,
|
||
maxTokens: 4096,
|
||
systemPrompt: "",
|
||
enableMemory: true,
|
||
memoryLength: 20,
|
||
});
|
||
|
||
// 模型选项 - 添加安全检查
|
||
const modelOptions = computed(() => {
|
||
if (!availableModels.value || !Array.isArray(availableModels.value)) {
|
||
return [{ value: "gpt-4", label: "GPT-4", description: "默认模型" }];
|
||
}
|
||
return availableModels.value?.map((model: any) => ({
|
||
value: model.name,
|
||
label: model.name,
|
||
description: model.description,
|
||
}));
|
||
});
|
||
|
||
// 预设提示词
|
||
const presetPrompts = [
|
||
{
|
||
name: "默认助手",
|
||
prompt: "你是一个有帮助的 AI 助手，能够回答各种问题并提供帮助。",
|
||
},
|
||
{
|
||
name: "代码专家",
|
||
prompt:
|
||
"你是一个专业的编程助手，擅长代码编写、调试和解释。请提供简洁、高质量的代码示例。",
|
||
},
|
||
{
|
||
name: "写作助手",
|
||
prompt:
|
||
"你是一个专业的写作助手，擅长文章撰写、润色和编辑。请使用优美的语言和清晰的结构。",
|
||
},
|
||
{
|
||
name: "翻译专家",
|
||
prompt: "你是一个专业的翻译助手，能够在多种语言之间进行准确、自然的翻译。",
|
||
},
|
||
{
|
||
name: "学习导师",
|
||
prompt:
|
||
"你是一个耐心的学习导师，擅长用简单易懂的方式解释复杂的概念，并提供练习建议。",
|
||
},
|
||
];
|
||
|
||
function updateSelect(data: any) {
|
||
localStorage.setItem("modelSelect", data);
|
||
}
|
||
|
||
// 格式化日期
|
||
function formatDate(timestamp?: number): string {
|
||
if (!timestamp) return "-";
|
||
const date = new Date(timestamp);
|
||
return date.toLocaleString("zh-CN", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
|
||
// 监听对话变化，初始化设置
|
||
watch(
|
||
[visible, conversation],
|
||
([isVisible, conv]) => {
|
||
if (isVisible && conv) {
|
||
localSettings.value = {
|
||
title: conv.title || "",
|
||
model: conv.settings?.model || settings.value.defaultModel || "gpt-4",
|
||
temperature:
|
||
conv.settings?.temperature ??
|
||
settings.value.defaultTemperature ??
|
||
0.7,
|
||
maxTokens:
|
||
conv.settings?.maxTokens || settings.value.defaultMaxTokens || 4096,
|
||
systemPrompt:
|
||
conv.settings?.systemPrompt ||
|
||
settings.value.defaultSystemPrompt ||
|
||
"",
|
||
enableMemory: conv.settings?.enableMemory ?? true,
|
||
memoryLength: conv.settings?.memoryLength || 20,
|
||
};
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
function close() {
|
||
settingsStore.closeConversationSettingsModal();
|
||
}
|
||
|
||
function handleSave() {
|
||
if (!conversation.value) return;
|
||
|
||
// 更新对话标题
|
||
if (localSettings.value.title !== conversation.value.title) {
|
||
chatStore.renameConversation(
|
||
conversation.value.id,
|
||
localSettings.value.title,
|
||
);
|
||
}
|
||
|
||
// 更新对话设置 - 这里需要一个新方法来更新对话设置
|
||
const convSettings: ConversationSettings = {
|
||
model: localSettings.value.model,
|
||
temperature: localSettings.value.temperature,
|
||
maxTokens: localSettings.value.maxTokens,
|
||
systemPrompt: localSettings.value.systemPrompt,
|
||
enableMemory: localSettings.value.enableMemory,
|
||
memoryLength: localSettings.value.memoryLength,
|
||
};
|
||
|
||
// 调用更新对话设置的方法
|
||
chatStore.updateConversationSettings(conversation.value.id, convSettings);
|
||
|
||
close();
|
||
|
||
// 显示成功提示
|
||
if (window.$toast) {
|
||
window.$toast("设置已保存", "success");
|
||
}
|
||
}
|
||
|
||
function handleClearMessages() {
|
||
if (!conversation.value) return;
|
||
|
||
if (confirm("确定要清空所有消息吗？此操作不可恢复。")) {
|
||
chatStore.clearConversation(conversation.value.id);
|
||
close();
|
||
}
|
||
}
|
||
|
||
function handleDeleteConversation() {
|
||
if (!conversation.value) return;
|
||
|
||
if (confirm("确定要删除这个对话吗？此操作不可恢复。")) {
|
||
chatStore.deleteConversation(conversation.value.id);
|
||
close();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.conversation-settings-modal {
|
||
width: 520px;
|
||
max-width: 90vw;
|
||
max-height: 85vh;
|
||
background: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
.dark & {
|
||
background: #1e1e2e;
|
||
}
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
|
||
.dark & {
|
||
border-bottom-color: #2d2d3d;
|
||
}
|
||
}
|
||
|
||
.header-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
svg {
|
||
color: #3b82f6;
|
||
}
|
||
|
||
h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
|
||
.dark & {
|
||
color: #f3f4f6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.close-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: #6b7280;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background: #f3f4f6;
|
||
color: #1f2937;
|
||
|
||
.dark & {
|
||
background: #374151;
|
||
color: #f3f4f6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 28px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #9ca3af;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.vertical {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
|
||
.setting-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.setting-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.setting-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1f2937;
|
||
|
||
.dark & {
|
||
color: #f3f4f6;
|
||
}
|
||
}
|
||
|
||
.setting-desc {
|
||
font-size: 12px;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.setting-value {
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
|
||
.setting-header & {
|
||
font-weight: 500;
|
||
color: #3b82f6;
|
||
}
|
||
}
|
||
|
||
.setting-hint {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
color: #9ca3af;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.text-input {
|
||
width: 100%;
|
||
padding: 10px 14px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
background: white;
|
||
font-size: 14px;
|
||
color: #1f2937;
|
||
|
||
.dark & {
|
||
background: #2d2d3d;
|
||
border-color: #374151;
|
||
color: #f3f4f6;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
|
||
.prompt-textarea {
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
background: white;
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
color: #1f2937;
|
||
resize: vertical;
|
||
min-height: 120px;
|
||
|
||
.dark & {
|
||
background: #2d2d3d;
|
||
border-color: #374151;
|
||
color: #f3f4f6;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
|
||
.preset-prompts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.preset-label {
|
||
font-size: 12px;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.preset-btn {
|
||
padding: 6px 12px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 16px;
|
||
background: white;
|
||
color: #6b7280;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
.dark & {
|
||
background: #2d2d3d;
|
||
border-color: #374151;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: #3b82f6;
|
||
color: #3b82f6;
|
||
}
|
||
}
|
||
|
||
.danger-section {
|
||
padding: 16px;
|
||
background: rgba(239, 68, 68, 0.05);
|
||
border-radius: 12px;
|
||
border: 1px solid rgba(239, 68, 68, 0.1);
|
||
}
|
||
|
||
.danger-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.danger-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
border: 1px solid #fecaca;
|
||
border-radius: 10px;
|
||
background: white;
|
||
color: #ef4444;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
.dark & {
|
||
background: transparent;
|
||
border-color: rgba(239, 68, 68, 0.3);
|
||
}
|
||
|
||
&:hover {
|
||
background: #ef4444;
|
||
border-color: #ef4444;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
padding: 16px 24px;
|
||
border-top: 1px solid #e2e8f0;
|
||
|
||
.dark & {
|
||
border-top-color: #2d2d3d;
|
||
}
|
||
}
|
||
|
||
.cancel-btn {
|
||
padding: 10px 20px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
.dark & {
|
||
border-color: #374151;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
&:hover {
|
||
background: #f3f4f6;
|
||
color: #374151;
|
||
|
||
.dark & {
|
||
background: #2d2d3d;
|
||
color: #e5e7eb;
|
||
}
|
||
}
|
||
}
|
||
|
||
.save-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||
}
|
||
}
|
||
|
||
// 动画
|
||
.modal-enter-active,
|
||
.modal-leave-active {
|
||
transition: all 0.25s ease;
|
||
|
||
.conversation-settings-modal {
|
||
transition: all 0.25s ease;
|
||
}
|
||
}
|
||
|
||
.modal-enter-from,
|
||
.modal-leave-to {
|
||
opacity: 0;
|
||
|
||
.conversation-settings-modal {
|
||
transform: scale(0.9);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
</style>
|