fix: three issues - settings page, model facing, Ctrl+drag rotation

1. Settings page always showing wizard:
   - isFirstRun defaults to true in Zustand
   - Settings window is separate WebView, store not synced
   - Now fetches isFirstRun from backend on mount

2. SMD model not facing camera:
   - Pivot group wraps model, centered at origin
   - Default rotation Y=PI to face camera

3. Ctrl+drag to rotate 3D model view:
   - Ctrl key toggles pointer-events on render layer
   - Canvas receives mouse events when Ctrl held
   - Drag rotates pivot group (Y horizontal, X vertical)
   - X rotation clamped to ±60 degrees

Author: 502647092

src/App.tsx

@@ -4,6 +4,7 @@ import { ChatWindow } from "./components/Chat/ChatWindow";
 import { SettingsPanel } from "./components/Settings/SettingsPanel";
 import { AISetupWizard } from "./components/Settings/AISetupWizard";
 import { useSettingsStore } from "./stores/settingsStore";
+import { configAPI } from "./hooks/useAPI";
 
 type Route = "pet" | "chat" | "settings";
 
@@ -16,7 +17,18 @@ function getRoute(): Route {
 
 export default function App() {
   const [route, setRoute] = useState<Route>(getRoute);
-  const { isFirstRun } = useSettingsStore();
+  const { isFirstRun, setFirstRun } = useSettingsStore();
+  const [loaded, setLoaded] = useState(route !== "settings");
+
+  // 设置窗口：从后端同步 isFirstRun 状态
+  useEffect(() => {
+    if (route === "settings") {
+      configAPI.isFirstRun().then((val) => {
+        setFirstRun(val);
+        setLoaded(true);
+      }).catch(() => setLoaded(true));
+    }
+  }, [route, setFirstRun]);
 
   useEffect(() => {
     const onHashChange = () => setRoute(getRoute());
@@ -26,6 +38,9 @@ export default function App() {
 
   if (route === "pet") return <PetWindow />;
   if (route === "chat") return <ChatWindow />;
-  if (route === "settings") return isFirstRun ? <AISetupWizard /> : <SettingsPanel />;
+  if (route === "settings") {
+    if (!loaded) return null;
+    return isFirstRun ? <AISetupWizard /> : <SettingsPanel />;
+  }
   return null;
 }

src/components/Pet/PetWindow.tsx

@@ -5,12 +5,11 @@ import { useClickThrough } from "../../hooks/useClickThrough";
 import { listen } from "@tauri-apps/api/event";
 import type { PetStyle } from "../../types";
 
-/**
- * 宠物窗口 - 只在 pet 路由渲染，包含点击穿透逻辑
- */
 export function PetWindow() {
   const { currentStyle, currentAnimation, setStyle } = usePetStore();
   const containerRef = useRef<HTMLDivElement>(null);
+  const renderWrapRef = useRef<HTMLDivElement>(null);
+  const ctrlHeld = useRef(false);
 
   useClickThrough(containerRef);
 
@@ -22,6 +21,32 @@ export function PetWindow() {
     return () => { unlisten.then((fn) => fn()); };
   }, [setStyle]);
 
+  // Ctrl 键：切换渲染层 pointer-events，允许 canvas 交互（旋转视角）
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Control" && !ctrlHeld.current) {
+        ctrlHeld.current = true;
+        if (renderWrapRef.current) {
+          renderWrapRef.current.style.pointerEvents = "auto";
+        }
+      }
+    };
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === "Control") {
+        ctrlHeld.current = false;
+        if (renderWrapRef.current) {
+          renderWrapRef.current.style.pointerEvents = "none";
+        }
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+
   return (
     <div
       ref={containerRef}
@@ -34,7 +59,7 @@ export function PetWindow() {
         backgroundColor: "transparent",
       }}
     >
-      <div style={{ pointerEvents: "none" }}>
+      <div ref={renderWrapRef} style={{ pointerEvents: "none" }}>
         <PetRenderer
           style={currentStyle}
           animation={currentAnimation}

src/components/Pet/SMDRenderer.tsx

@@ -16,7 +16,13 @@ export function SMDRenderer({ animation, width, height }: PetRendererProps) {
     clips: Map<string, THREE.AnimationClip>;
     currentAction?: THREE.AnimationAction;
     frameId?: number;
-  }>({ clips: new Map() });
+    pivot?: THREE.Group;
+    // 视角控制
+    rotY: number;
+    rotX: number;
+    dragging: boolean;
+    lastMouse: { x: number; y: number };
+  }>({ clips: new Map(), rotY: 0, rotX: 0, dragging: false, lastMouse: { x: 0, y: 0 } });
 
   useEffect(() => {
     const container = containerRef.current;
@@ -34,8 +40,6 @@ export function SMDRenderer({ animation, width, height }: PetRendererProps) {
 
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 10000);
-    camera.position.set(0, 3, 8);
-    camera.lookAt(0, 2, 0);
 
     scene.add(new THREE.AmbientLight(0xffffff, 2.0));
     const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
@@ -51,6 +55,31 @@ export function SMDRenderer({ animation, width, height }: PetRendererProps) {
       console.error("SMD 模型加载失败:", err);
     });
 
+    // Ctrl+拖拽旋转视角
+    const canvas = renderer.domElement;
+    const onMouseDown = (e: MouseEvent) => {
+      if (e.ctrlKey) {
+        state.dragging = true;
+        state.lastMouse = { x: e.clientX, y: e.clientY };
+      }
+    };
+    const onMouseMove = (e: MouseEvent) => {
+      if (!state.dragging || !state.pivot) return;
+      const dx = e.clientX - state.lastMouse.x;
+      const dy = e.clientY - state.lastMouse.y;
+      state.rotY += dx * 0.01;
+      state.rotX += dy * 0.01;
+      state.rotX = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, state.rotX));
+      state.pivot.rotation.y = state.rotY;
+      state.pivot.rotation.x = state.rotX;
+      state.lastMouse = { x: e.clientX, y: e.clientY };
+    };
+    const onMouseUp = () => { state.dragging = false; };
+
+    canvas.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+
     const clock = new THREE.Clock();
     const animate = () => {
       state.frameId = requestAnimationFrame(animate);
@@ -62,13 +91,17 @@ export function SMDRenderer({ animation, width, height }: PetRendererProps) {
 
     return () => {
       if (state.frameId) cancelAnimationFrame(state.frameId);
+      canvas.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
       renderer.dispose();
       if (container.contains(renderer.domElement)) {
         container.removeChild(renderer.domElement);
       }
     };
   }, [width, height]);
 
+  // 切换动画
   useEffect(() => {
     const state = stateRef.current;
     if (!state.mixer) return;
@@ -101,56 +134,53 @@ async function loadModel(
     mixer?: THREE.AnimationMixer;
     clips: Map<string, THREE.AnimationClip>;
     currentAction?: THREE.AnimationAction;
+    pivot?: THREE.Group;
+    rotY: number;
   },
   scene: THREE.Scene,
   camera: THREE.PerspectiveCamera,
 ) {
-  console.log("[SMD] 开始加载模型...");
-
   const pqcResp = await fetch(`${MODEL_BASE}/8.pqc`);
-  if (!pqcResp.ok) {
-    throw new Error(`PQC 加载失败: ${pqcResp.status}`);
-  }
-  const pqcText = await pqcResp.text();
-  const config = parsePQC(pqcText);
-  console.log("[SMD] PQC 配置:", config);
+  if (!pqcResp.ok) throw new Error(`PQC 加载失败: ${pqcResp.status}`);
+  const config = parsePQC(await pqcResp.text());
 
   const bodyResp = await fetch(`${MODEL_BASE}/${config.body}`);
-  if (!bodyResp.ok) {
-    throw new Error(`Body SMD 加载失败: ${bodyResp.status}`);
-  }
-  const bodyText = await bodyResp.text();
-  const bodySMD = parseSMD(bodyText);
-  console.log("[SMD] Body 解析完成:", bodySMD.triangles.length, "个三角形,", bodySMD.bones.length, "个骨骼");
+  if (!bodyResp.ok) throw new Error(`Body SMD 加载失败: ${bodyResp.status}`);
+  const bodySMD = parseSMD(await bodyResp.text());
 
-  const texture = await new THREE.TextureLoader().loadAsync(
-    `${MODEL_BASE}/cresselia-lp.png`,
-  );
+  const texture = await new THREE.TextureLoader().loadAsync(`${MODEL_BASE}/cresselia-lp.png`);
   texture.colorSpace = THREE.SRGBColorSpace;
-  console.log("[SMD] 贴图加载完成");
 
   const { mesh } = buildSkinnedMesh(bodySMD, texture, config.scale);
-  scene.add(mesh);
 
-  // 自动适配相机：计算模型包围盒
+  // 用 pivot group 包裹模型，方便旋转
+  const pivot = new THREE.Group();
+  pivot.add(mesh);
+  scene.add(pivot);
+  state.pivot = pivot;
+
+  // 计算包围盒，自动适配相机
   const box = new THREE.Box3().setFromObject(mesh);
   const center = box.getCenter(new THREE.Vector3());
   const size = box.getSize(new THREE.Vector3());
   const maxDim = Math.max(size.x, size.y, size.z);
 
-  console.log("[SMD] 模型包围盒 center:", center, "size:", size, "maxDim:", maxDim);
+  // 把 pivot 原点移到模型中心
+  pivot.position.set(-center.x, -center.y, -center.z);
+
+  // 旋转模型到正面（SMD 模型默认朝向可能不对）
+  // 先旋转 180 度让模型面向相机
+  state.rotY = Math.PI;
+  pivot.rotation.y = state.rotY;
 
-  // 相机对准模型中心，距离根据模型大小调整
   const fov = camera.fov * (Math.PI / 180);
-  const dist = maxDim / (2 * Math.tan(fov / 2)) * 1.2;
-  camera.position.set(center.x, center.y, center.z + dist);
-  camera.lookAt(center);
+  const dist = maxDim / (2 * Math.tan(fov / 2)) * 1.3;
+  camera.position.set(0, 0, dist);
+  camera.lookAt(0, 0, 0);
   camera.near = dist / 100;
   camera.far = dist * 100;
   camera.updateProjectionMatrix();
 
-  console.log("[SMD] 相机位置:", camera.position, "距离:", dist);
-
   // 动画
   const mixer = new THREE.AnimationMixer(mesh);
   state.mixer = mixer;
@@ -159,11 +189,9 @@ async function loadModel(
     try {
       const resp = await fetch(`${MODEL_BASE}/${file}`);
       if (!resp.ok) continue;
-      const text = await resp.text();
-      const animSMD = parseSMD(text);
+      const animSMD = parseSMD(await resp.text());
       const clip = buildAnimationClip(name, animSMD, bodySMD.bones, config.scale);
       state.clips.set(name, clip);
-      console.log("[SMD] 动画加载:", name, clip.duration.toFixed(2) + "s");
     } catch (err) {
       console.warn("[SMD] 动画加载失败:", name, err);
     }
@@ -174,8 +202,5 @@ async function loadModel(
     const action = mixer.clipAction(idleClip);
     action.play();
     state.currentAction = action;
-    console.log("[SMD] 播放 idle 动画");
   }
-
-  console.log("[SMD] 模型加载完成");
 }