LobeChat — это приложение для AI-диалогов, построенное на фреймворке Next.js. Оно использует ряд технологий для реализации различных функций и особенностей.
## Основной стек технологий
Основной стек технологий LobeChat выглядит следующим образом:
- **Фреймворк**: Мы выбрали [Next.js](https://nextjs.org/), мощный фреймворк для React, который предоставляет серверный рендеринг, маршрутизацию, Router Handler и другие ключевые функции для нашего проекта.
- **Библиотека компонентов**: Мы используем [Ant Design (antd)](https://ant.design/) в качестве основной библиотеки компонентов, а также подключаем [lobe-ui](https://github.com/lobehub/lobe-ui) в качестве нашей бизнес-библиотеки компонентов.
- **Управление состоянием**: Мы выбрали [zustand](https://github.com/pmndrs/zustand), легковесную и простую в использовании библиотеку для управления состоянием.
- **Сетевые запросы**: Мы используем [swr](https://swr.vercel.app/), библиотеку React Hooks для получения данных.
- **Маршрутизация**: Для управления маршрутизацией мы используем встроенное решение [Next.js](https://nextjs.org/).
- **Интернационализация**: Мы используем [i18next](https://www.i18next.com/) для реализации многоязычной поддержки приложения.
- **Стили**: Мы используем [antd-style](https://github.com/ant-design/antd-style), библиотеку CSS-in-JS, совместимую с Ant Design.
- **Модульное тестирование**: Мы используем [vitest](https://github.com/vitejs/vitest) для модульного тестирования.
## Структура каталогов
Структура каталогов LobeChat выглядит следующим образом:
\`\`\`bash
src
├── app # Основная логика приложения и код, связанный с управлением состоянием
├── components # Переиспользуемые UI-компоненты
├── config # Конфигурационные файлы приложения, включая переменные окружения для клиента и сервера
├── const # Для определения констант, таких как типы действий, имена маршрутов и т.д.
├── features # Модули функциональности, связанные с бизнес-функциями, такие как настройки агента, всплывающее окно разработки плагинов и т.д.
├── hooks # Переиспользуемые пользовательские хуки по всему приложению
├── layout # Компоненты макета приложения, такие как навигационная панель, боковая панель и т.д.
├── locales # Файлы языков для интернационализации
├── services # Обернутые интерфейсы бэкенд-сервисов, такие как HTTP-запросы
├── store # Хранилище zustand для управления состоянием
├── types # Файлы определения типов TypeScript
└── utils # Утилитарные функции
\`\`\`
