SwanLab前端核心模块，app基座。
项目开发IDE为Webstorm，node.js版本为20.17.0，npm版本为默认版本，项目使用npm为包管理工具。
- swanLab-app-components：共享组件库
- react：前端框架
- Next.js：react的SSR框架
- next-intl：next框架下的文本国际化插件
- ahooks：一套高质量可靠的 React Hooks 库
- axios：前端网络请求库
- shadcn：前端UI库
- tailwindcss：前端样式库
- classnames：前端样式类名处理工具
- prettier：代码格式化工具
- eslint：代码检查工具
⚠️ 启动项目相关配置还在完善，在此之前只需要npm install安装依赖，运行npm run dev启动项目即可。
如果需要使用完整的项目功能，请按照以下步骤进行
- 确保本机环境已经安装Node.js，版本为20.17.0
- 确保本机已安装docker
- 确保SwanLab-Cloud项目已经能启动，端口号为5177
- 确保Next-Login项目已经能启动，端口号为3002
- 运行
npm install安装依赖，运行npm run dev启动项目，端口号为3001 - 在本项目
/dev目录下运行docker-compose up启动网关，端口号为8080
从微应用的角度出发，我们应该将各个模块分割为不同的项目单独维护、部署，通过路由展示。next.js的rewrites只能用作单页面应用的路由重定向，无法实现微应用的目标。 因此理想情况下，会将一些需要解耦的模块分割为不同项目，通过路由区分，这样可以减少单个项目的复杂度，提高开发效率。
但是问题在于历史上我们使用的大多数框架为vue，因此如果需要实现微应用的目标，需要后端网关的介入，详见mirco-frontend。 此外，为了避免初始化时的请求开销，需要使用sessionStorage缓存用户信息。
因此一些共享的模块，如header组件、全局主题样式、语言切换函数和sessionStorage信息传递函数等，通过npm包的方式引入，存放在SwanLab-App-Components仓库中。
对于一些用户自定义选项，如果语言、深色模式等，一方面next.js需要在服务端渲染时获取到这些信息，另一方面也需要在不同的项目间传递，因此需要使用cookie传递。
目前所使用到的前端设置cookie如下：
| key | value | description |
|---|---|---|
| NEXT_LOCALE | zh, en | 语言设置 |
| NEXT_COLOR_MODE | dark, light, system | 深色模式设置 |
相关方法存储在SwanLab-App-Components仓库中。
在实际生产中会将项目划分为多个模块，每个模块单独维护，通过路由区分，路由图如下图所示， 红色为core-app， 绿色为cloud， 紫色为next-login：
其中不同模块通过后端网关完成分发。