Desktop-Benutzeroberfläche

Anwendungsarchitektur

Die Desktop-Anwendung kombiniert eine SolidJS-Webansicht, Vite, Three.js und eine Tauri v2 Rust-Shell. Die Webansicht besitzt Bildschirme und Interaktionsstatus. Der Bun-Sidecar besitzt API-Handler, Datenbankzugriff, KI-Sitzungen und Projektdienste. Der Rust-Prozess ist Eigentümer des Fensters, der Menüs, der Taskleiste, der Betriebssystemdialoge, des Schlüsselbundzugriffs, der Aktualisierungen und des Sidecar-Lebenszyklus.

apps/desktop/src/main.tsx mountet die Anwendung. app/App.tsx stellt die API-Verbindung her und stellt den gemeinsamen Status bereit; app/routes.tsx ordnet URLs Lazy-Page-Modulen zu. Feature-Screens leben in features/. Das Vorhandensein einer Route stellt nicht die Verfügbarkeit ihrer externen Dienste dar: Für die Abrechnung ist eine Stripe-Konfiguration erforderlich, und für AI ist ein konfigurierter Anbieter erforderlich.

Start und Verbindungswiederherstellung

1. Die Shell startet den gebündelten Sidecar mit einem generierten Starttoken sowie Anwendungsdaten und Migrationsverzeichnissen.
2. Der Sidecar bindet einen kurzlebigen Port an 127.0.0.1, wartet auf die Antwort seiner Gesundheitsroute und schreibt einen JSON ready ereignis, das den Port enthält.
3. Die Webansicht wird aufgerufen get_sidecar_endpoint und erstellt einen API-Client und eine verwaltete Effect-Laufzeit.
4. Eine erfolgreiche Gesundheitsanforderung erstellt den Anwendungsstatus und stellt den Router und die Shell bereit.

Die Webansicht erlaubt 150 Sekunden für die Verbindungswiederherstellung, mit einem Zeitlimit von 30 Sekunden pro Versuch und einer Wiederholungspause von 750 Millisekunden. Bei fehlgeschlagenen Versuchen wird der zwischengespeicherte Endpunkt verworfen, sodass ein neu gestarteter Sidecar einen neuen Port bereitstellen kann. Der Rust-Supervisor wartet 60 Sekunden auf jeden fertigen Handshake und erlaubt einen automatischen Neustart. Ein erneuter Versuch ist verfügbar, wenn das Webview-Verbindungsbudget abläuft.

Bildschirmrouten

Verwenden app/routes.tsx für genaue Parameternamen und pages/ um den unter einer URL bereitgestellten Bildschirm zu finden. Routenadapter sind absichtlich klein; Lesen Sie den Bildschirm und seine API-Aufrufe, wenn Sie eine leere Ansicht oder eine fehlgeschlagene Aktion diagnostizieren.

Quellorganisation

• app/: start, Router, globaler API-Client, native Integration, Shell und Tastaturkürzel.
• pages/: routenadapter zum Importieren oder erneuten Exportieren von Bildschirmen.
• features/: produktbereiche mit Bildschirmen, Komponenten, Hooks, Status und domänenspezifischen Helfern.
• shared/: wiederverwendbare Steuerelemente, Shell-Komponenten, Anwendungsstatus, Abfrage-Caching und Befehlsverlauf.
• viewport/: leinwandzeichnen, Einrasten, Werkzeuggesten, Three.js-Rendering, Vernetzung und Wiedergabe.
• i18n/, styles/, und testing/: übersetzungen, globale Stile und Testvorrichtungen.

Der Desktop hängt davon ab @cadcamfun/api für den HTTP-Vertrag und so weiter @cadcamfun/core für Geometrie- und CAM-Operationen. Die Datenbankpersistenz verbleibt hinter der Sidecar-API. Der Verlauf des lokalen Editors unterscheidet sich von persistenten Zeichnungs- oder Werkzeugwegversionen und von der Projektversionskontrolle.

Native Shell

Das Produktionsfenster beträgt standardmäßig 1440 × 900, mit einem Minimum von 960 × 600. Tauri stellt das Frontend bereit apps/desktop/dist, ein zielspezifischer Sidecar von src-tauri/binariesund generierte Migrationen als Ressourcen. Es registriert sich .cadcam, .nc, und .gcode dateizuordnungen. Beim Öffnen einer unterstützten Datei oder beim Starten einer zweiten Instanz werden Dateipfade an das vorhandene Fenster weitergeleitet.

src-tauri/src/sidecar.rs überwacht den untergeordneten Prozess. Das Schließen der App schreibt a {"event":"shutdown"} linie zum stdin des Kindes und wartet kurz, bevor es es erntet; Das Kind beobachtet auch die Standardschließung. Das Starttoken besteht aus 32 zufälligen Bytes, hexadezimal codiert als 64 Zeichen, und Sidecar-Protokollzeilen, die möglicherweise Anmeldeinformationen enthalten, werden geschwärzt. Protokolle sind von stdout getrennt, das den Bereitschafts-/Fehler-Handshake überträgt. Der Zugriff auf native Geheimnisse erfolgt über src-tauri/src/secrets.rs verwenden des Betriebssystem-Schlüsselbunds.

Unter macOS registriert die Shell das Liquid Glass-Plugin. Die Webansicht folgt der Glaseinstellung und greift zurück, wenn der Effekt nicht verfügbar ist. Die App Store-Konfiguration deaktiviert die private API-Option; Die reguläre Konfiguration ermöglicht dies. Dies sind separate Build-Konfigurationen.

Sicherheits- und Persistenzgrenzen

Die Produktionsinhaltsrichtlinie erlaubt lokale Assets, Loopback-API-Verbindungen, Daten-/Blobbilder und WebAssembly-Auswertung. Es ermöglicht keine beliebige Remote-Skriptausführung. Native Berechtigungen sind eingeschränkt src-tauri/capabilities; die Entwicklungsrichtlinie erlaubt außerdem Vite und seinen Websocket.

open_path kanonisiert Pfade, beschränkt sie auf zulässige Benutzer-/Anwendungsverzeichnisse und lehnt ausführbare Erweiterungen ab, z .exe, .app, .sh, .bat, .msi, und .jar. .. segmente und Symlinks können den zulässigen Ordnern nicht entkommen, da beide Seiten kanonisiert sind. Beim Auswählen und Speichern von Dateien werden native Dialoge und Validierungen verwendet. Ein Starttoken gewährt Zugriff auf die lokale Anwendungs-API. Behandeln Sie es getrennt von einem Companion-Token oder einem projektbezogenen AI-Bridge-Token.

UI-Einstellungen, API-Abfragestatus, Editorbefehle, gespeicherte Projektversionen und native Geheimnisse haben unterschiedliche Besitzer. Diagnostizieren Sie jeden anhand seines tatsächlichen Dienstes, anstatt davon auszugehen, dass der gesamte Anwendungsstatus in SQLite gespeichert ist.

Funktionsintegration

CAD- und CAM-Funktionsmodule bilden wiederverwendbare Ansichtsfensterkomponenten mit eigenen Panels, Speichern und Speicherabläufen. Das Assistentenpanel empfängt Projekt- und Editor-Kontext und streamt Tool-Ereignisse über den KI-Funktionsstatus. Ressourcenbildschirme nutzen den API-Client, anstatt direkt auf die Datenbank zuzugreifen.

Für eine Änderung der Benutzeroberfläche folgen Sie dem Routenadapter zu seinem Funktionsbildschirm und überprüfen Sie dann den Funktionsspeicher oder Hook, der die Anforderung sendet. Verwenden Sie gemeinsam genutzte Komponenten nur dann wieder, wenn ihr bestehender Vertrag mit der Interaktion übereinstimmt. Behalten Sie die reine Geometrie im Kernpaket und das native Betriebssystemverhalten in der Rust-Shell bei.

Routenladen und Fehler

Jede Route verwendet die Lazy-Import-Grenze von Solid. Die Tabelle enthält eine Sammelseite, /500, /offlineund legale Wege. Eine direkte Browsernavigation muss über den Vite-Entwicklungsserver oder die gepackte Webansicht bereitgestellt werden, damit der Client-Router die URL auflösen kann.

Die Vorschau-API implementiert einen begrenzten Satz von Sammlungen und kann in Tests absichtlich Anforderungsfehler einschleusen. Ein erfolgreiches Vorschau-Rendern zeigt das UI-Verhalten gegenüber diesen Fixtures; Überprüfen Sie Persistenz, Berechtigungen, Streaming und externe Integrationen mit dem Live-Sidecar.

Native Befehlsschnittstelle

Einheimische Ereignisse

Die Muschel emittiert sidecar-status für Lebenszyklusänderungen, open-file mit unterstützten Pfaden, menu zur Menüauswahl und update://status für den Updater-Fortschritt. Die Auswahl aktueller Projekte im Fach wird durch dargestellt tray.recent.<projectId> menübezeichner. Die Menü- und Tray-Module der Shell definieren ihre vollständigen Bezeichnersätze.

Listener sollten auf ihren Komponenten- oder Anwendungslebenszyklus beschränkt sein und bei der Bereinigung entfernt werden. Die Webansicht muss den Endpunkt nach einem Sidecar-Neustart neu auflösen, anstatt weiterhin den vorherigen Port zu verwenden.

Entwicklung und Verifizierung

bun run --filter @cadcamfun/desktop dev
bun run desktop:dev
bun run --filter @cadcamfun/desktop typecheck
bun test apps/desktop/src
bun run build:desktop

Der erste Befehl führt eine Browservorschau aus. desktop:dev kompiliert den echten Sidecar und führt Migrationen durch, bevor Tauri gestartet wird. Das Desktop-Paket tauri:dev das Skript erstellt stattdessen nur dann eine Stub-Binärdatei, wenn keine Binärdatei vorhanden ist. Verwenden Sie es für isolierte Shell-Arbeiten und prüfen Sie, welche Binärdatei vorhanden ist, bevor Sie die API-Antworten interpretieren.

Der Desktop build skript läuft vite build nur; Es kompiliert weder den Sidecar noch verpackt es ein Tauri-Bundle. Verwenden bun scripts/build.ts für die vollständige Release-Pipeline (siehe Freigeben).

Präferenzen und Einstellungen

Der Speicher für freigegebene Einstellungen speichert einen validierten Datensatz unter cadcamfun.settings im lokalen Webview-Speicher. Fehlende, ungültige oder nicht lesbare Felder werden unabhängig voneinander zurückgesetzt. Ein voller oder blockierter Speicherbereich stoppt die Bearbeitung nicht, aber Präferenzänderungen bleiben möglicherweise nicht bestehen. Browservorschaueinstellungen gehören zum Browserursprung und sind von den nativen Webansichteinstellungen getrennt.

Der Einstellungsbildschirm verfügt über die Registerkarten „Profil“, „Konto“, „Sicherheit“, „Abonnement“, „Benachrichtigungen“, „KI“, „Geräte“ und „Sprache“. Die Registerkarte „Geräte“ bettet das Begleit-Gateway-Panel ein. Zu den Spracheinstellungen gehört auch der Glasschalter. Der allgemeine Gebietsschemaspeicher validiert derzeit das Standardgebietsschema; Leiten Sie keine zusätzliche Übersetzungsabdeckung aus einer Liste von Anzeigebezeichnungen ab.

Speichern Sie ein CAM-Programm und öffnen Sie es erneut

1. Generieren oder laden Sie NC-Code in CAM und öffnen Sie den Speicher-/Exportdialog über den vorhandenen Einstiegspunkt.
2. Wählen Sie für einen Dateiexport G-Code oder das tragbare Werkzeugwegformat. G-Code lädt den aktuellen NC-Text herunter; Die Wahl des Werkzeugwegs schreibt eine strukturierte .cam.json schnappschuss.
3. Wählen Sie für die Anwendungspersistenz ein vorhandenes Projekt, ein neues Projekt oder aktualisieren Sie das bereits gespeicherte Programm. Geben Sie den Programmnamen und die erforderlichen Zielfelder an.
4. Beim Aktualisieren zeichnet der Speicherablauf das vorherige vollständige Programm als Werkzeugwegversion auf, bevor die aktuellen Daten ersetzt werden.
5. Öffnen Sie das gespeicherte Element an seiner Werkzeugweg-Detailroute, um Versionen zu überprüfen oder wiederherzustellen.

Die Speicherzusammenfassung umfasst NC-Zeilen, Bytes, Bewegungen, Werkzeugkennungen, Operationsnamen, Lagerbestände, Einheiten, Arbeitsversatz und Überprüfungsidentität, wenn dieser Nachweis zur aktuellen NC gehört. Ein geänderter NC-Text kann dazu führen, dass zuvor berechnete Beweise veraltet sind. Überprüfen Sie die aktuelle Code-/Beweisbeziehung, bevor Sie sich auf die Zusammenfassung verlassen.

Wenn das Erstellen eines neuen Projekts erfolgreich ist, ein späterer Speicherschritt jedoch fehlschlägt, behält das Modal das erstellte Ziel für Wiederholungsversuche bei und bezieht seine Kennung in den Fehler ein. Durch einen erneuten Versuch innerhalb dieses Modals wird vermieden, dass dasselbe Projekt erneut erstellt wird. Gehen Sie nicht davon aus, dass der Speicherfluss eine atomare ressourcenübergreifende Transaktion ist.

Tastatur- und Fehlerdiagnose

Cmd/Ctrl+K öffnet die Befehlspalette und Cmd/Ctrl+J schaltet das Assistentenfeld um. Shell-Verknüpfungen werden ignoriert, wenn der Fokus auf einem Eingabe-, Textbereichs-, Auswahl- oder inhaltsbearbeitbaren Element liegt. Editor-Canvas verfügen über eine eigene Tastaturbedienung. Mehrere Shell-Befehlsrückrufe, einschließlich Speichern/Exportieren in der generischen Verknüpfungstabelle, sind Platzhalter; Verwenden Sie die tatsächlichen Steuerelemente zum Speichern/Exportieren der Funktion, anstatt davon auszugehen, dass jeder aufgelistete Beschleuniger einen Dokumentvorgang ausführt.

Umsetzungsanker: shared/state/settings.ts, app/shortcuts.ts, features/settings/screens/settings.tsx, und features/cam/components/SaveCamModal.tsx.

Native Ereignisnutzlasten

import { invoke } from "@tauri-apps/api/core"
import { listen } from "@tauri-apps/api/event"

const { baseUrl, token } = await invoke<{ baseUrl: string; token: string }>("get_sidecar_endpoint")

const path = await invoke<string | null>("pick_file", {
  filters: [{ name: "G-code", extensions: ["nc", "gcode"] }],
})                                    // null when the user cancels

await invoke("save_file", { defaultName: "part.nc", contents: gcodeText })

const unlisten = await listen<{ state: string; port?: number }>("sidecar-status", (e) => {
  if (e.payload.state === "ready") reconnect()
})
// later: unlisten()

try {
  await invoke("install_update", { unsavedWork: editorIsDirty })
} catch (error) {
  // { kind, message }: the update variant carries the refusal (unsavedWork | noneAvailable | failed)
}

get_sidecar_endpoint kehrt zurück { baseUrl, token } (serialisiert in camelCase von SidecarEndpoint). Fehler von jedem Befehl kommen als abgelehnter Wert von an invoke, geformt { kind, message }.

Tastaturkürzel

Jede Bildschirmroute

Der Router drin apps/desktop/src/app/routes.tsx deklariert 68 Routen, von denen jede träge geladen wird apps/desktop/src/pages/ (dynamische Segmente sind _id_.tsx dateien). Gruppiert nach erstem Segment:

In 3D