feat: 实现自建情景功能
## 功能概述 - 用户可创建、编辑、删除自定义情景 - 支持自定义情景名称、图标、描述、Prompt、首句引导 - 完整的权限隔离，用户只能管理自己的情景 - 深度集成 Eino 框架，动态加载自建情景 Prompt ## 后端实现 ### 数据库 - 新增 user_scenarios 表 - 支持用户配额（最多 20 个） - 字段验证：description 可选，prompt 最小 10 字符 ### API - GET /api/scenarios - 获取用户情景列表 - POST /api/scenarios - 创建情景 - GET /api/scenarios/:id - 获取详情 - PATCH /api/scenarios/:id - 更新情景 - DELETE /api/scenarios/:id - 删除情景 ### Eino 集成 - PipelineState 添加 UserID 字段 - nodes_history 动态加载用户自建情景 - GetScenarioPrompt 支持自建情景优先级 ## 前端实现 ### 组件 - CreateScenarioModal - 创建情景对话框 - EditScenarioModal - 编辑情景对话框 - ConfigPanel 改造 - 分组显示系统预置和自建情景 ### Hook - useScenarios - 合并系统和自建情景，提供 CRUD 接口 ### 国际化 - 中文、英文、日文翻译支持 ## 问题修复 - 修复 CORS 问题：使用 Vite 代理 - 统一验证规则：description 可选，prompt 最小 10 字符 - 修复数据库约束：使用 NULLIF 处理空字符串 ## 文件变更 新增文件: 13 个 修改文件: 14 个 详见文档: docs/自建情景功能完整文档.md
This commit is contained in:
@@ -7,18 +7,21 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useVisionSession } from "./hooks/useVisionSession";
|
||||
import { useSessionList } from "./hooks/useSessionList";
|
||||
import { useScenarios } from "./hooks/useScenarios";
|
||||
import { VideoPreview } from "./components/VideoPreview";
|
||||
import { ChatPanel } from "./components/ChatPanel";
|
||||
import { ConfigPanel } from "./components/ConfigPanel";
|
||||
import { SessionSidebar } from "./components/SessionSidebar";
|
||||
import { ToastContainer } from "./components/Toast";
|
||||
import { LandingPage } from "./components/LandingPage";
|
||||
import { CreateScenarioModal } from "./components/CreateScenarioModal";
|
||||
import { EditScenarioModal } from "./components/EditScenarioModal";
|
||||
import { AuthProvider, useAuth } from "./lib/auth";
|
||||
import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
|
||||
import { I18nContext, parseLocale, t } from "./lib/i18n";
|
||||
import { scenarios } from "./lib/scenarios";
|
||||
import type { Locale } from "./lib/i18n";
|
||||
import type { Theme } from "./types";
|
||||
import type { UserScenario } from "./lib/api/scenarios";
|
||||
import "./App.css";
|
||||
|
||||
/** AI 视觉模式 */
|
||||
@@ -28,12 +31,22 @@ type VisionMode = "realtime" | "ondemand" | "chat";
|
||||
function AppContent() {
|
||||
const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth();
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
const [showCreateScenario, setShowCreateScenario] = useState(false);
|
||||
const [editingScenario, setEditingScenario] = useState<UserScenario | null>(null);
|
||||
const [theme, setTheme] = useState<Theme>(loadTheme);
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [visionMode, setVisionMode] = useState<VisionMode>("ondemand");
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
// ---- 自建情景管理 ----
|
||||
const {
|
||||
allScenarios,
|
||||
createScenario,
|
||||
updateScenario,
|
||||
deleteScenario,
|
||||
} = useScenarios(accessToken);
|
||||
|
||||
// 切换主题时更新 <html> 的 data-theme 属性
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
@@ -185,15 +198,20 @@ function AppContent() {
|
||||
|
||||
// ---- 情景选择 ----
|
||||
const handleSelectScenario = useCallback((scenarioId: string) => {
|
||||
const sc = scenarios.find(s => s.id === scenarioId);
|
||||
const sc = allScenarios.find((s) => s.id === scenarioId);
|
||||
const updates: Partial<import("./types").SessionConfig> = { scenario: scenarioId };
|
||||
// 如果情景有默认语言，同步切换
|
||||
if (sc?.defaultLanguage) {
|
||||
updates.language = sc.defaultLanguage;
|
||||
// 如果情景有默认语言，同步切换（仅系统预置情景）
|
||||
if (sc && !sc.isCustom) {
|
||||
const systemScenario = sc as any;
|
||||
if (systemScenario.defaultLanguage) {
|
||||
updates.language = systemScenario.defaultLanguage;
|
||||
}
|
||||
}
|
||||
updateConfig(updates);
|
||||
// 插入系统提示消息
|
||||
const scenarioName = sc ? `${sc.icon} ${tr(sc.nameKey)}` : scenarioId;
|
||||
const scenarioName = sc
|
||||
? `${sc.icon} ${sc.nameKey ? tr(sc.nameKey) : sc.name}`
|
||||
: scenarioId;
|
||||
setMessages(prev => [...prev, {
|
||||
id: uuidv4(),
|
||||
role: "system",
|
||||
@@ -203,7 +221,7 @@ function AppContent() {
|
||||
}, [updateConfig, setMessages, tr]);
|
||||
|
||||
// 当前情景对象
|
||||
const activeScenario = scenarios.find(s => s.id === (config.scenario || "free_chat")) || scenarios[0];
|
||||
const activeScenario = allScenarios.find((s) => s.id === (config.scenario || "free_chat")) || allScenarios[0];
|
||||
|
||||
// ---- 键盘快捷键 ----
|
||||
useEffect(() => {
|
||||
@@ -293,10 +311,41 @@ function AppContent() {
|
||||
config={config}
|
||||
theme={theme}
|
||||
username={user?.username}
|
||||
allScenarios={allScenarios}
|
||||
onUpdate={updateConfig}
|
||||
onThemeChange={handleThemeChange}
|
||||
onLogout={logout}
|
||||
onClose={() => setShowConfig(false)}
|
||||
onCreateScenario={() => {
|
||||
setShowConfig(false);
|
||||
setShowCreateScenario(true);
|
||||
}}
|
||||
onEditScenario={(scenario) => {
|
||||
setShowConfig(false);
|
||||
setEditingScenario(scenario);
|
||||
}}
|
||||
onDeleteScenario={deleteScenario}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 创建情景 Modal */}
|
||||
{showCreateScenario && (
|
||||
<CreateScenarioModal
|
||||
onClose={() => setShowCreateScenario(false)}
|
||||
onSubmit={async (data) => {
|
||||
await createScenario(data);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 编辑情景 Modal */}
|
||||
{editingScenario && (
|
||||
<EditScenarioModal
|
||||
scenario={editingScenario}
|
||||
onClose={() => setEditingScenario(null)}
|
||||
onSubmit={async (id, data) => {
|
||||
await updateScenario(id, data);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -492,8 +541,10 @@ function AppContent() {
|
||||
onChange={(e) => handleSelectScenario(e.target.value)}
|
||||
title={tr("settings.scenario")}
|
||||
>
|
||||
{scenarios.map((sc) => (
|
||||
<option key={sc.id} value={sc.id}>{sc.icon} {tr(sc.nameKey)}</option>
|
||||
{allScenarios.map((sc) => (
|
||||
<option key={sc.id} value={sc.id}>
|
||||
{sc.icon} {sc.nameKey ? tr(sc.nameKey) : sc.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{isConnected && mode === "observation" && (
|
||||
|
||||
Reference in New Issue
Block a user