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 57eeacebe..73ed46685 100644
--- a/web/frontend/src/i18n/locales/en.json
+++ b/web/frontend/src/i18n/locales/en.json
@@ -70,7 +70,10 @@
},
"common": {
"cancel": "Cancel",
- "save": "Save"
+ "save": "Save",
+ "saving": "Saving...",
+ "reset": "Reset",
+ "confirm": "Confirm"
},
"credentials": {
"description": "Manage OAuth and token-based credentials for supported providers.",
@@ -223,7 +226,20 @@
"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_confirm_title": "Reset Changes",
+ "reset_confirm_desc": "Are you sure you want to reset your unsaved changes back to the last saved state?",
+ "reset_success": "Changes have been reset to the last saved state.",
+ "invalid_json": "Invalid JSON format.",
+ "format_success": "JSON formatted successfully.",
+ "format_error": "Invalid JSON format.",
+ "format": "Format",
+ "lose_unsaved_changes": "You have unsaved changes. Are you sure you want to reset and lose these changes?"
},
"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 3897b48fe..0fe345a0b 100644
--- a/web/frontend/src/i18n/locales/zh.json
+++ b/web/frontend/src/i18n/locales/zh.json
@@ -70,7 +70,10 @@
},
"common": {
"cancel": "取消",
- "save": "保存"
+ "save": "保存",
+ "saving": "保存中...",
+ "reset": "重置",
+ "confirm": "确认"
},
"credentials": {
"description": "管理已支持服务商的 OAuth 与 Token 凭据。",
@@ -223,7 +226,21 @@
"description": "安全管理您的 API 密钥与访问凭据。"
},
"config": {
- "description": "系统配置和偏好设置。"
+ "description": "系统配置和偏好设置。",
+ "raw_json_title": "原始 JSON 配置",
+ "raw_json_desc": "高级用户可以直接编辑下方的原始 JSON 配置。",
+ "json_placeholder": "请输入有效的 JSON 配置...",
+ "save_success": "配置保存成功。",
+ "save_error": "配置保存失败。",
+ "reset_confirm_title": "重置更改",
+ "reset_confirm_desc": "您确定要重置回上次保存的状态吗？",
+ "reset_success": "更改已重置为上次保存的状态。",
+ "invalid_json": "JSON 格式无效。",
+ "format_success": "JSON 格式化成功。",
+ "format_error": "JSON 格式无效。",
+ "format": "格式化",
+ "lose_unsaved_changes": "您有未保存的更改。确定要重置并丢失这些更改吗？",
+ "unsaved_changes": "您有未保存的更改。"
},
"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..0a7255596 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 { useState } from "react"
export const Route = createFileRoute("/config")({
component: ConfigPage,
@@ -12,19 +36,190 @@ 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."))
+ // Update last saved config and reset dirty state
+ try {
+ const savedConfig = JSON.parse(editorValue)
+ setLastSavedConfig(savedConfig)
+ setIsDirty(false)
+ // Important: Invalidate the query to refresh the cached data
+ queryClient.invalidateQueries({ queryKey: ["config"] })
+ } catch {
+ // If JSON parsing fails, invalidate to get fresh data
+ queryClient.invalidateQueries({ queryKey: ["config"] })
+ }
+ },
+ onError: () => {
+ toast.error(t("pages.config.save_error", "Failed to save configuration."))
+ },
+ })
+
+ const [editorValue, setEditorValue] = useState("")
+ const [isDirty, setIsDirty] = useState(false)
+
+ // Store the last saved config to detect changes
+ const [lastSavedConfig, setLastSavedConfig] = useState
| null>(null)
+
+ // Initialize editor value when config is first loaded
+ const getInitialEditorValue = () => {
+ if (config && !editorValue) {
+ return JSON.stringify(config, null, 2)
+ }
+ return editorValue
+ }
+
+ const displayValue = getInitialEditorValue()
+
+ const handleSave = () => {
+ try {
+ // Validate JSON before saving
+ JSON.parse(editorValue)
+ mutation.mutate(editorValue)
+ } catch (error) {
+ toast.error(t("pages.config.invalid_json", error instanceof Error ? error.message : "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", error instanceof Error ? error.message : "Invalid JSON format."))
+ }
+ }
+
+ const [showResetDialog, setShowResetDialog] = useState(false)
+
+ const confirmReset = () => {
+ // Reset editor content to the last saved configuration
+ if (lastSavedConfig) {
+ setEditorValue(JSON.stringify(lastSavedConfig, null, 2))
+ } else if (config) {
+ // Fallback to current config if no last saved config
+ setEditorValue(JSON.stringify(config, null, 2))
+ }
+ setIsDirty(false)
+ toast.info(t("pages.config.reset_success", "Changes have been reset to the last saved state."))
+ 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...")}
+
+ {isDirty && (
+
+ {t("pages.config.unsaved_changes", "You have unsaved changes.")}
+
+ )}
+
+
+