xianren_studio/ui/src/pages/SettingsPage.tsx

import { useEffect, useState } from "react";
import { api, AppInfo } from "../api";

export default function SettingsPage() {
  const [info, setInfo] = useState<AppInfo | null>(null);
  const [settings, setSettings] = useState<Record<string, string>>({});

  useEffect(() => {
    api.appInfo().then(setInfo);
    api.settingsGet().then(setSettings);
  }, []);

  async function handleSave(key: string, value: string) {
    await api.settingsSet(key, value);
    setSettings((prev) => ({ ...prev, [key]: value }));
  }

  return (
    <div className="h-full overflow-auto p-6">
      <h1 className="text-xl font-semibold">设置</h1>
      <p className="mt-1 text-sm text-slate-400">运行路径与引擎配置</p>

      <div className="mt-6 max-w-xl space-y-4">
        <div className="rounded-xl border border-border bg-panel p-5">
          <div className="text-xs uppercase text-slate-400">关于</div>
          <div className="mt-2 space-y-1 text-sm">
            <div>
              版本：<span className="text-slate-300">{info?.version}</span>（{info?.platform}）
            </div>
            <div>
              数据目录：<span className="text-slate-300">{info?.db_path}</span>
            </div>
            <div className="flex items-center gap-2">
              <span>
                日志目录：<span className="text-slate-300">{info?.logs_dir}</span>
              </span>
              {info?.logs_dir ? (
                <button
                  className="text-xs text-slate-400 hover:text-slate-200"
                  onClick={() => api.openPath(info.logs_dir!)}
                >
                  打开
                </button>
              ) : null}
            </div>
            <div>
              引擎可用：
              {info?.engine_exists ? (
                <span className="text-emerald-400">是</span>
              ) : (
                <span className="text-red-400">否（请配置 llama-server 路径）</span>
              )}
            </div>
          </div>
        </div>

        <div className="rounded-xl border border-border bg-panel p-5">
          <div className="text-xs uppercase text-slate-400">引擎与路径</div>
          <div className="mt-3 space-y-3">
            <SettingInput
              label="模型目录"
              value={settings.model_dir ?? ""}
              onSave={(v) => handleSave("model_dir", v)}
            />
            <SettingInput
              label="llama-server 路径（llama-server-cpu/cuda/vulkan.exe）"
              value={settings.engine_bin ?? ""}
              onSave={(v) => handleSave("engine_bin", v)}
            />
            <SettingInput
              label="模型下载源（hf-mirror.com / huggingface.co / modelscope.cn）"
              value={settings.hf_endpoint ?? ""}
              onSave={(v) => handleSave("hf_endpoint", v)}
            />
            <SettingInput
              label="默认后端（auto / cpu / cuda / vulkan）"
              value={settings.backend ?? ""}
              onSave={(v) => handleSave("backend", v)}
            />
            <SettingInput
              label="上传图片/文件大小上限（MB）"
              value={settings.upload_max_mb ?? "10"}
              onSave={(v) => handleSave("upload_max_mb", v)}
            />
          </div>
        </div>

        <div className="text-xs text-slate-500">
          获取 llama-server：运行 <code className="text-slate-300">scripts/fetch-llama.ps1</code>{" "}
          自动下载预编译引擎，或手动指定已下载的 exe 路径。
        </div>
      </div>
    </div>
  );
}

function SettingInput({
  label,
  value,
  onSave,
}: {
  label: string;
  value: string;
  onSave: (v: string) => void;
}) {
  const [draft, setDraft] = useState(value);
  useEffect(() => setDraft(value), [value]);
  return (
    <label className="block text-sm">
      <span className="text-xs text-slate-400">{label}</span>
      <div className="mt-1 flex gap-2">
        <input className="input flex-1" value={draft} onChange={(e) => setDraft(e.target.value)} />
        <button
          className="btn-secondary"
          onClick={() => onSave(draft)}
          disabled={draft === value}
        >
          保存
        </button>
      </div>
    </label>
  );
}