LobeChat ist eine KI-Chat-Anwendung, die auf dem Next.js-Framework basiert. Es verwendet eine Reihe von Technologiestacks, um verschiedene Funktionen und Merkmale zu implementieren.
## Grundlegender Technologiestack
Der Kerntechnologiestack von LobeChat ist wie folgt:
- **Framework**: Wir haben [Next.js](https://nextjs.org/) gewählt, ein leistungsstarkes React-Framework, das unserem Projekt serverseitiges Rendering, Routing-Framework, Router-Handler und andere wichtige Funktionen bietet.
- **Komponentenbibliothek**: Wir verwenden [Ant Design (antd)](https://ant.design/) als grundlegende Komponentenbibliothek und haben [lobe-ui](https://github.com/lobehub/lobe-ui) als unsere Geschäfts-Komponentenbibliothek integriert.
- **Zustandsverwaltung**: Wir haben [zustand](https://github.com/pmndrs/zustand) gewählt, eine leichtgewichtige und einfach zu verwendende Zustandsverwaltungsbibliothek.
- **Netzwerkanfragen**: Wir verwenden [swr](https://swr.vercel.app/), eine React-Hooks-Bibliothek für die Datenbeschaffung.
- **Routing**: Für das Routing-Management verwenden wir direkt die von [Next.js](https://nextjs.org/) bereitgestellte Lösung.
- **Internationalisierung**: Wir verwenden [i18next](https://www.i18next.com/), um mehrsprachige Unterstützung für die Anwendung zu implementieren.
- **Stile**: Wir verwenden [antd-style](https://github.com/ant-design/antd-style), eine CSS-in-JS-Bibliothek, die mit Ant Design kompatibel ist.
- **Unit-Tests**: Wir verwenden [vitest](https://github.com/vitejs/vitest) für Unit-Tests.
## Verzeichnisstruktur
Die Verzeichnisstruktur von LobeChat ist wie folgt:
\`\`\`bash
src
├── app # Hauptlogik und zustandsverwaltungsbezogene Codes der Anwendung
├── components # Wiederverwendbare UI-Komponenten
├── config # Konfigurationsdateien der Anwendung, einschließlich Client- und Serverumgebungsvariablen
├── const # Zur Definition von Konstanten, wie Aktionsarten, Routenname usw.
├── features # Funktionsmodule, die mit Geschäftslogik verbunden sind, wie Agenteneinstellungen, Plugin-Entwicklungs-Popups usw.
├── hooks # Anwendungsübergreifende benutzerdefinierte Tool-Hooks
├── layout # Layout-Komponenten der Anwendung, wie Navigationsleiste, Seitenleiste usw.
├── locales # Internationalisierte Sprachdateien
├── services # Kapselte Backend-Service-Schnittstellen, wie HTTP-Anfragen
├── store # Zustandsverwaltungs-Zustand von zustand
├── types # TypeScript-Typdefinitionsdateien
└── utils # Allgemeine Hilfsfunktionen
\`\`\`
