Fügt einen neuen Sidebar-Tab mit React-View hinzu. Erstellt View-Komponente in src/views/, TabRouter-Eintrag und Sidebar-Button. Backend-Commands werden über /add-tauri-command hinzugefügt. Aufruf mit /add-sidebar-tab [tab-name] [sidebar-gruppe] [beschreibung].
Du fügst einen neuen Tab in die Sidebar der Speicher Analyse Tauri-App ein, inklusive React-View und App-Integration.
$ARGUMENTS[0] = Tab-Name (kebab-case, z.B. disk-health)$ARGUMENTS[1] = Sidebar-Gruppe: start, analyse, bereinigung, system, sicherheit, extras$ARGUMENTS[2] = Kurzbeschreibung (optional)Pflicht — lies diese Dateien zuerst:
src/components/Sidebar.tsx - Bestehende Sidebar-Struktur und Gruppensrc/components/TabRouter.tsx - Wie Views lazy-loaded werdensrc/style.css - Bestehende View-Styles als Referenzsrc/views/PrivacyView.tsxsrc/views/<TabName>View.tsx — React-Viewimport { useState, useCallback, useEffect } from 'react';
import * as api from '../api/tauri-api';
import { useAppContext } from '../context/AppContext';
export default function TabNameView() {
const { showToast } = useAppContext();
const [data, setData] = useState<any>(null);
const [loading, setLoading] = useState(false);
const [loaded, setLoaded] = useState(false);
const loadData = useCallback(async () => {
if (loading) return;
setLoading(true);
try {
const result = await api.tabNameAction();
setData(result);
setLoaded(true);
} catch (err: any) {
showToast('Fehler: ' + err.message, 'error');
} finally {
setLoading(false);
}
}, [loading, showToast]);
useEffect(() => {
if (!loaded) loadData();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div className="tab-name-page">
<div className="tab-name-header"><h2>Anzeigename</h2></div>
{loading && <div className="loading-state">Lade Daten...</div>}
{!loading && loaded && data && (
<div className="tab-name-content">{/* Inhalt */}</div>
)}
{!loading && !loaded && (
<div className="tool-placeholder">Noch keine Daten geladen.</div>
)}
</div>
);
}
Konventionen:
export default Funktionale KomponenteuseEffect mit Cleanup-Return für Timer/Listener/Observerimport * as api from '../api/tauri-api'dangerouslySetInnerHTMLsrc/components/TabRouter.tsx — Lazy-Import + Routeconst TabNameView = lazy(() => import('../views/TabNameView'));
// Im switch/map:
case 'tab-name':
return <Suspense fallback={<div className="loading-state">Laden...</div>}><TabNameView /></Suspense>;
src/components/Sidebar.tsx — Button hinzufügenButton in die passende Gruppe einfügen.
| Gruppe | Inhalt |
|---|---|
start | Dashboard, Explorer |
analyse | Dateitypen, Verzeichnisbaum, Treemap, Top 100, Duplikate, Alte Dateien |
bereinigung | Bereinigung, Autostart, Dienste |
system | Optimierung, Updates, S.M.A.R.T., System-Profil, PC-Diagnose |
sicherheit | Privacy, Netzwerk, Software-Audit, Sicherheits-Check |
extras | PDF-Editor, Terminal, Einstellungen |
dangerouslySetInnerHTML?useEffect Cleanup für Timer/Listener/Observer?/add-tauri-command)