img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/web/frontend/src/i18n/locales/en.json b/web/frontend/src/i18n/locales/en.json
index 8b6b02c8d..1c96e0a7c 100644
--- a/web/frontend/src/i18n/locales/en.json
+++ b/web/frontend/src/i18n/locales/en.json
@@ -71,7 +71,9 @@
},
"common": {
"cancel": "Cancel",
- "save": "Save"
+ "save": "Save",
+ "saving": "Saving...",
+ "reset": "Reset"
},
"models": {
"description": "Configure API keys for each AI provider. Only configured models are available for chat.",
@@ -155,7 +157,17 @@
"description": "Securely manage your API keys and credentials."
},
"config": {
- "description": "System configuration and preferences."
+ "description": "System configuration and preferences.",
+ "raw_json_title": "Raw JSON Configuration",
+ "raw_json_desc": "Advanced users can directly edit the raw JSON configuration below.",
+ "json_placeholder": "Enter valid JSON configuration...",
+ "save_success": "Configuration saved successfully.",
+ "save_error": "Failed to save configuration.",
+ "reset_success": "Configuration has been reset.",
+ "invalid_json": "Invalid JSON format.",
+ "format_success": "JSON formatted successfully.",
+ "format_error": "Invalid JSON format.",
+ "format": "Format"
},
"logs": {
"description": "System logs and monitoring."
diff --git a/web/frontend/src/i18n/locales/zh.json b/web/frontend/src/i18n/locales/zh.json
index 69bddd7e6..a8ef0002e 100644
--- a/web/frontend/src/i18n/locales/zh.json
+++ b/web/frontend/src/i18n/locales/zh.json
@@ -71,7 +71,9 @@
},
"common": {
"cancel": "取消",
- "save": "保存"
+ "save": "保存",
+ "saving": "保存中...",
+ "reset": "重置"
},
"models": {
"description": "为每个 AI 服务商配置 API Key。只有已配置的模型可用于对话。",
@@ -155,7 +157,17 @@
"description": "安全管理您的 API 密钥与访问凭据。"
},
"config": {
- "description": "系统配置和偏好设置。"
+ "description": "系统配置和偏好设置。",
+ "raw_json_title": "原始 JSON 配置",
+ "raw_json_desc": "高级用户可以直接编辑下方的原始 JSON 配置。",
+ "json_placeholder": "请输入有效的 JSON 配置...",
+ "save_success": "配置保存成功。",
+ "save_error": "配置保存失败。",
+ "reset_success": "配置已重置。",
+ "invalid_json": "JSON 格式无效。",
+ "format_success": "JSON 格式化成功。",
+ "format_error": "JSON 格式无效。",
+ "format": "格式化"
},
"logs": {
"description": "系统日志和监控。"
diff --git a/web/frontend/src/main.tsx b/web/frontend/src/main.tsx
index 4eaf72e3e..eae0cb89a 100644
--- a/web/frontend/src/main.tsx
+++ b/web/frontend/src/main.tsx
@@ -1,3 +1,7 @@
+import {
+ QueryClient,
+ QueryClientProvider,
+} from "@tanstack/react-query"
import { RouterProvider, createRouter } from "@tanstack/react-router"
import { StrictMode } from "react"
import ReactDOM from "react-dom/client"
@@ -6,7 +10,14 @@ import "./i18n"
import "./index.css"
import { routeTree } from "./routeTree.gen"
-const router = createRouter({ routeTree })
+const queryClient = new QueryClient()
+
+const router = createRouter({
+ routeTree,
+ context: {
+ queryClient,
+ },
+})
declare module "@tanstack/react-router" {
interface Register {
@@ -19,7 +30,9 @@ if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(
-
+
+
+
,
)
-}
+}
\ No newline at end of file
diff --git a/web/frontend/src/routes/config.tsx b/web/frontend/src/routes/config.tsx
index 5d4a39c1d..7ebed8bf7 100644
--- a/web/frontend/src/routes/config.tsx
+++ b/web/frontend/src/routes/config.tsx
@@ -1,7 +1,31 @@
import { createFileRoute } from "@tanstack/react-router"
import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
import { PageHeader } from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+import { Textarea } from "@/components/ui/textarea"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useEffect, useState } from "react"
export const Route = createFileRoute("/config")({
component: ConfigPage,
@@ -12,19 +36,157 @@ function ConfigPage() {
return (
-
-
-
- {t("navigation.config", "Config")}
-
-
- {t(
- "pages.config.description",
- "System configuration and preferences.",
- )}
-
+
)
}
+
+function RawJsonPanel() {
+ const { t } = useTranslation()
+ const queryClient = useQueryClient()
+
+ const { data: config, isLoading } = useQuery({
+ queryKey: ["config"],
+ queryFn: async () => {
+ const res = await fetch("/api/config")
+ if (!res.ok) {
+ throw new Error("Failed to fetch config")
+ }
+ return res.json()
+ },
+ })
+
+ const mutation = useMutation({
+ mutationFn: async (newConfig: string) => {
+ const res = await fetch("/api/config", {
+ method: "PUT",
+ headers: { "Content-Type": "application/json" },
+ body: newConfig,
+ })
+ if (!res.ok) {
+ throw new Error("Failed to save config")
+ }
+ },
+ onSuccess: () => {
+ toast.success(t("pages.config.save_success", "Configuration saved successfully."))
+ queryClient.invalidateQueries({ queryKey: ["config"] })
+ },
+ onError: () => {
+ toast.error(t("pages.config.save_error", "Failed to save configuration."))
+ },
+ })
+
+ const [editorValue, setEditorValue] = useState("")
+
+ useEffect(() => {
+ if (config) {
+ setEditorValue(JSON.stringify(config, null, 2))
+ }
+ }, [config])
+
+ const handleSave = () => {
+ try {
+ // Validate JSON before saving
+ JSON.parse(editorValue)
+ mutation.mutate(editorValue)
+ } catch (e) {
+ toast.error(t("pages.config.invalid_json", "Invalid JSON format."))
+ }
+ }
+
+ const handleFormat = () => {
+ try {
+ const formatted = JSON.stringify(JSON.parse(editorValue), null, 2)
+ setEditorValue(formatted)
+ toast.success(t("pages.config.format_success", "JSON formatted successfully."))
+ } catch (error) {
+ toast.error(t("pages.config.format_error", "Invalid JSON format."))
+ }
+ }
+
+ const [showResetDialog, setShowResetDialog] = useState(false)
+
+ const confirmReset = () => {
+ queryClient.invalidateQueries({ queryKey: ["config"] })
+ toast.info(t("pages.config.reset_success", "Configuration has been reset."))
+ setShowResetDialog(false)
+ }
+
+ return (
+
+
+
+ {t("pages.config.raw_json_title", "Raw JSON Configuration")}
+
+
+ {t(
+ "pages.config.raw_json_desc",
+ "Advanced users can directly edit the raw JSON configuration below.",
+ )}
+
+
+
+ {isLoading ? (
+
+
{t("labels.loading", "Loading...")}
+