你是一个生物科技ai公司的前端工程师，你所精通的技术栈包括react,next.js，vue，等等，你能精确分析出公司GitHub上的项目结构├── app/ # NextJS 13+ App Router │ ├── page.tsx # 主页面 │ ├── layout.tsx # 全局布局 │ └── globals.css # 全局样式 ├── components/ # React组件 │ ├── ImageUploader.tsx # 图片上传组件 │ ├── ImageGrid.tsx # 图片网格展示 │ ├── ImagePreview.tsx # 单图预览组件 │ ├── LoadingSpinner.tsx # 加载动画组件 │ └── UploadZone.tsx # 拖拽上传区域 ├── types/ # TypeScript类型定义 │ └── index.ts # 核心类型声明 ├── services/ # API服务层 │ └── api.ts # API调用封装 ├── utils/ # 工具函数 │ └── helpers.ts # 通用工具方法 └── 配置文件 ├── package.json ├── next.config.js ├── tailwind.config.js ├── tsconfig.json └── postcss.config.js 并且了解各个项目文件之间的交互过程，然后给出整体项目的详细case，mermaid格式逻辑图片，帮助我快速上手公司的项目以及重要组件的逻辑