Update project dependencies and configurations; remove deprecated package settings and enhance legacy build support

- Upgrade package manager to pnpm@11.5.2 and remove patched dependencies from package.json. - Update pnpm-lock.yaml to reflect new dependency versions and remove obsolete entries. - Refactor Vite configuration to improve legacy build handling, including new plugins for legacy CSS management. - Remove unused client/index.html file and adjust paths in Vite config for better project structure. - Enhance DesktopAIShell and EQPage components to support legacy build conditions and improve loading states for raw curves.
2026-06-09 14:24:30 +08:00
parent ccc404b75a
commit f3961cc72a
9 changed files with 2247 additions and 1380 deletions
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
-    <title>Luxsin X8 Controller</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
@@ -65,6 +65,8 @@ function SplitDivider({
  );
 }

+const isLegacyBuild = import.meta.env.VITE_X8_LEGACY === "1";
+
 /**
 * lg+: optional side-by-side AI panel with draggable divider. Mobile unchanged (router only).
 */
@@ -87,6 +89,8 @@ export default function DesktopAIShell({ children }: { children: ReactNode }) {
        "w-full min-w-0",
        showSplit
          ? "flex h-dvh max-h-dvh flex-row overflow-hidden"
+          : isLegacyBuild
+            ? "min-h-0"
            : "min-h-dvh",
      )}
    >
@@ -97,6 +101,8 @@ export default function DesktopAIShell({ children }: { children: ReactNode }) {
            ? "h-full min-h-0 overflow-y-auto overflow-x-hidden"
            : isLgUp
              ? "min-h-dvh overflow-x-hidden"
+              : isLegacyBuild
+                ? "w-full overflow-x-hidden"
                : "min-h-dvh max-h-dvh overflow-x-hidden overflow-y-auto overscroll-y-contain [touch-action:pan-y]",
        )}
        style={
@@ -157,6 +157,7 @@ export default function EQPage() {
  const [selectedCatalogTarget, setSelectedCatalogTarget] = useState<string>("");
  const [isConfirmingTarget, setIsConfirmingTarget] = useState(false);
  const [currentRawCurve, setCurrentRawCurve] = useState<number[] | null>(null);
+  const [rawCurveLoading, setRawCurveLoading] = useState(false);
  const allowPeqRemoteSyncRef = useRef(false);
  const lastPeqCatalogSyncKeyRef = useRef("");
  const syncingHeadphoneRef = useRef(false);
@@ -663,9 +664,13 @@ export default function EQPage() {
      return;
    }

+    const copyBrand = currentPeq?.brand?.trim() ?? "";
+    const copyModel = currentPeq?.model?.trim() ?? "";
    const copyPayload: PeqChangePayload = {
      peqChange: {
        name: nextName,
+        ...(copyBrand ? { brand: copyBrand } : {}),
+        ...(copyModel ? { model: copyModel } : {}),
        filters: bands.map(bandToPeqFilter),
        autoPre: currentPeq?.autoPre ?? 0,
        preamp: currentPeq?.preamp ?? 0,
@@ -704,6 +709,8 @@ export default function EQPage() {
          ...prev,
          {
            name: nextName,
+            ...(addPresetMode === "copy" && copyBrand ? { brand: copyBrand } : {}),
+            ...(addPresetMode === "copy" && copyModel ? { model: copyModel } : {}),
            filters: localFilters,
            autoPre: localAutoPre,
            preamp: localPreamp,
@@ -817,15 +824,8 @@ export default function EQPage() {

  const loadRawCurveForPeq = useCallback(
    async (peq: { brand?: string; model?: string; name?: string } | undefined): Promise<number[] | null> => {
-      let brand = peq?.brand?.trim() ?? "";
-      let model = peq?.model?.trim() ?? "";
-
-      // Some presets only have `name` (e.g. "Apple AirPods Pro") and miss explicit brand/model.
-      if ((!brand || !model) && peq?.name) {
-        const [first, ...rest] = peq.name.trim().split(/\s+/);
-        if (!brand && first) brand = first;
-        if (!model && rest.length > 0) model = rest.join(" ");
-      }
+      const brand = peq?.brand?.trim() ?? "";
+      const model = peq?.model?.trim() ?? "";
      if (!brand || !model) return null;

      const modelCurve = await getModelCurve(brand, model);
@@ -966,11 +966,20 @@ export default function EQPage() {
    syncingHeadphoneRef.current = true;
    setBandsForBothModes(nextBands);
    setSelectedBandByMode({ A: 0, B: 0 });
+    const shouldFetchModelCurve = !!(peq.brand?.trim() && peq.model?.trim());
+    if (shouldFetchModelCurve) {
+      setRawCurveLoading(true);
+      setCurrentRawCurve(null);
+    } else {
+      setRawCurveLoading(false);
+    }
+
    let cancelled = false;
    void (async () => {
      const raw = await loadRawCurveForPeq(peq as { brand?: string; model?: string });
      if (cancelled) return;
      setCurrentRawCurve(raw);
+      setRawCurveLoading(false);
      renderCharts(nextBands, raw, false);
    })();
    requestAnimationFrame(() => {
@@ -1463,6 +1472,7 @@ export default function EQPage() {
        <FreqChart
          bands={bands}
          rawCurve={currentRawCurve}
+          rawCurveLoading={rawCurveLoading}
          selectedBand={selectedBand}
          abMode={abMode}
          onAbToggle={handleAbToggle}
@@ -135,7 +135,7 @@ function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: bool

 // ── List row ──
 function ListRow({
-  icon, label, value, onClick, toggle, checked, onToggle, thumbnailSrc,
+  icon, label, value, onClick, toggle, checked, onToggle, thumbnail,
 }: {
  icon: React.ReactNode;
  label: string;
@@ -144,8 +144,7 @@ function ListRow({
  toggle?: boolean;
  checked?: boolean;
  onToggle?: (v: boolean) => void;
-  /** Optional small thumbnail shown between value text and chevron. */
-  thumbnailSrc?: string;
+  thumbnail?: string;
 }) {
  return (
    <div className="ios-list-row cursor-pointer" onClick={onClick}>
@@ -159,13 +158,12 @@ function ListRow({
      {toggle ? (
        <IOSToggle checked={!!checked} onChange={onToggle ?? (() => {})} />
      ) : (
-        <div className="flex items-center gap-1.5">
-          {thumbnailSrc && (
+        <div className="flex items-center gap-1">
+          {thumbnail && (
            <img
-              src={thumbnailSrc}
-              alt=""
-              className="w-16 h-12 rounded-[8px] object-cover flex-shrink-0"
-              style={{ border: "1px solid rgba(255,255,255,0.12)" }}
+              src={thumbnail}
+              alt={value ?? label}
+              className="h-8 w-14 object-contain rounded bg-black/20 border border-white/10"
            />
          )}
          {value && <span className="ios-row-value">{value}</span>}
@@ -883,7 +881,7 @@ export default function Home() {
            icon={<Gauge size={16} />}
            label={homeText.vu ?? "VU表"}
            value={vuLabel}
-            thumbnailSrc={`${import.meta.env.BASE_URL}vu/vu${(ds.vu ?? 0) + 1}.png`}
+            thumbnail={`${import.meta.env.BASE_URL}vu/vu${(ds.vu ?? 0) + 1}.png`}
            onClick={() => setLocation("/vu")}
          />
          <ListRow
@@ -5,9 +5,29 @@ import { buildPeqSvgCurveData, sampleCombinedPeqMagnitudeDb } from "@/lib/peqAud
 import { eqInterp } from "../eqFormatters";
 import type { EqBand, PeqEqUi } from "../types";

+function LegendCurveIndicator({
+  loading,
+  color,
+}: {
+  loading: boolean;
+  color: string;
+}) {
+  if (loading) {
+    return (
+      <span
+        className="inline-block w-3 h-3 rounded-full border-2 animate-spin flex-shrink-0"
+        style={{ borderColor: `${color}40`, borderTopColor: color }}
+        aria-hidden="true"
+      />
+    );
+  }
+  return <div className="w-3 h-[2px] rounded flex-shrink-0" style={{ background: color }} />;
+}
+
 export type FreqChartProps = {
  bands: EqBand[];
  rawCurve: number[] | null;
+  rawCurveLoading?: boolean;
  selectedBand: number;
  abMode: "A" | "B";
  onAbToggle: (m: "A" | "B") => void;
@@ -22,6 +42,7 @@ export type FreqChartProps = {
 export function FreqChart({
  bands,
  rawCurve,
+  rawCurveLoading = false,
  selectedBand,
  abMode,
  onAbToggle,
@@ -212,10 +233,13 @@ export function FreqChart({
          type="button"
          className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
          onClick={() => toggleCurveVisibility("raw")}
-          disabled={!hasRawCurve}
+          disabled={rawCurveLoading || !hasRawCurve}
+        >
+          <LegendCurveIndicator loading={rawCurveLoading} color="#ffffff" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#ffffff", opacity: rawCurveLoading || showRaw ? 1 : 0.35 }}
          >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#ffffff" }} />
-          <span className="text-[10px]" style={{ color: "#ffffff", opacity: showRaw ? 1 : 0.35 }}>
            Raw
          </span>
        </button>
@@ -223,10 +247,13 @@ export function FreqChart({
          type="button"
          className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
          onClick={() => toggleCurveVisibility("equalized")}
-          disabled={!hasEqualizedCurve}
+          disabled={rawCurveLoading || !hasEqualizedCurve}
+        >
+          <LegendCurveIndicator loading={rawCurveLoading} color="#23d2fe" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#23d2fe", opacity: rawCurveLoading || showEqualized ? 1 : 0.35 }}
          >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#23d2fe" }} />
-          <span className="text-[10px]" style={{ color: "#23d2fe", opacity: showEqualized ? 1 : 0.35 }}>
            Equalized
          </span>
        </button>
@@ -94,13 +94,5 @@
    "vite-plugin-manus-runtime": "^0.0.57",
    "vitest": "^2.1.4"
  },
-  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
-  "pnpm": {
-    "patchedDependencies": {
-      "wouter@3.7.1": "patches/wouter@3.7.1.patch"
-    },
-    "overrides": {
-      "tailwindcss>nanoid": "3.3.7"
-    }
-  }
+  "packageManager": "pnpm@11.5.2+sha512.71c631e382066efc25625d5cf029075de07b61b37f6e27350fbd84b1bda5864c8c1967adc280776b45c30a715c0359a3be08fef42d5bb09e2b99029979692916"
 }
@@ -0,0 +1,8 @@
+packages:
+  - .
+
+allowBuilds:
+  esbuild: true
+
+overrides:
+  tailwindcss>nanoid: 3.3.7
@@ -4,21 +4,19 @@ import path from "node:path";
 import { createRequire } from "node:module";
 import { defineConfig, type Plugin } from "vite";

+const PROJECT_ROOT = import.meta.dirname;
 const require = createRequire(import.meta.url);
 const tailwindcss3 = require("tailwindcss3");
 const autoprefixer = require("autoprefixer");

 function legacyIndexRewritePlugin(): Plugin {
-  // Vite dev server always serves /index.html for "/".
-  // For legacy dev, we must serve i.legacy.html instead, otherwise it loads
-  // modern main.tsx + index.css (Tailwind v4) and breaks the Tailwind v3 pipeline.
  return {
    name: "legacy-index-rewrite",
    apply: "serve",
    configureServer(server) {
      server.middlewares.use((req, _res, next) => {
-        const url = req.url ?? "";
-        if (url === "/" || url === "/index.html") {
+        const url = (req.url ?? "").split("?")[0];
+        if (url === "/" || url === "/index.html" || url === "/i.modern.html") {
          req.url = "/i.legacy.html";
        }
        next();
@@ -27,38 +25,59 @@ function legacyIndexRewritePlugin(): Plugin {
  };
 }

+/** Dev MPA may discover modern CSS — stub them so Tailwind v3 postcss does not choke. */
+function legacySkipModernCssPlugin(): Plugin {
+  return {
+    name: "legacy-skip-modern-css",
+    enforce: "pre",
+    apply: "serve",
+    load(id) {
+      const norm = id.replace(/\\/g, "/");
+      if (norm.endsWith("/client/src/index.css")) {
+        return "/* legacy dev: skip modern index.css */";
+      }
+      if (/node_modules\/tailwindcss\/index\.css/.test(norm)) {
+        return "/* legacy dev: skip tailwind v4 */";
+      }
+    },
+  };
+}
+
 export default defineConfig({
-  // Legacy build targets Chrome 91 WebView-class browsers.
-  // Uses Tailwind v3 via css.postcss (see postcss.legacy.config.cjs).
-  plugins: [legacyIndexRewritePlugin(), react(), jsxLocPlugin()],
+  plugins: [legacySkipModernCssPlugin(), legacyIndexRewritePlugin(), react(), jsxLocPlugin()],
+  define: {
+    "import.meta.env.VITE_X8_LEGACY": JSON.stringify("1"),
+  },
  base: process.env.NODE_ENV === "production" ? "/x8/v2/legacy/" : "/",
  resolve: {
    alias: {
-      "@": path.resolve(import.meta.dirname, "client", "src"),
-      "@shared": path.resolve(import.meta.dirname, "shared"),
-      "@assets": path.resolve(import.meta.dirname, "attached_assets"),
+      "@": path.resolve(PROJECT_ROOT, "client", "src"),
+      "@shared": path.resolve(PROJECT_ROOT, "shared"),
+      "@assets": path.resolve(PROJECT_ROOT, "attached_assets"),
    },
    dedupe: ["react", "react-dom"],
  },
-  envDir: path.resolve(import.meta.dirname),
-  root: path.resolve(import.meta.dirname, "client"),
-  publicDir: path.resolve(import.meta.dirname, "client/public"),
+  envDir: path.resolve(PROJECT_ROOT),
+  root: path.resolve(PROJECT_ROOT, "client"),
+  publicDir: path.resolve(PROJECT_ROOT, "client/public"),
  css: {
-    // Force PostCSS for Tailwind v3 (Chrome 91 legacy).
    transformer: "postcss",
    postcss: {
-      plugins: [tailwindcss3({ config: "./tailwind.legacy.config.cjs" }), autoprefixer()],
+      plugins: [
+        tailwindcss3({ config: path.join(PROJECT_ROOT, "tailwind.legacy.config.cjs") }),
+        autoprefixer(),
+      ],
    },
  },
  build: {
    target: ["chrome91", "edge91"],
    cssTarget: "chrome91",
-    outDir: path.resolve(import.meta.dirname, "dist/legacy"),
+    outDir: path.resolve(PROJECT_ROOT, "dist/legacy"),
    emptyOutDir: true,
    minify: "terser",
    rollupOptions: {
      input: {
-        i: path.resolve(import.meta.dirname, "client", "i.legacy.html"),
+        i: path.resolve(PROJECT_ROOT, "client", "i.legacy.html"),
      },
    },
  },
@@ -75,4 +94,3 @@ export default defineConfig({
    },
  },
 });
-