coze源码解读:项目启动

coze源码解读第一篇,主要介绍项目是如何启动的,以及coze studio前端index.tsx的一些基本逻辑。

启动服务

Bash 复制代码
# 启动服务
cd docker
cp .env.example .env
docker compose up -d

前端目录

bash 复制代码
frontend/
├── apps/                    # 应用层
│   └── coze-studio/        # 主应用
│       ├── src/            # 源代码
│       │   ├── app.tsx     # 应用入口
│       │   ├── layout.tsx  # 布局组件
│       │   ├── pages/      # 页面组件
│       │   └── routes/     # 路由配置
│       ├── assets/         # 静态资源
│       ├── config/         # 项目配置
│       └── package.json    # 依赖配置
│
├── packages/               # 核心包
│   ├── agent-ide/         # AI Agent 开发环境
│   ├── arch/              # 架构基础设施
│   ├── common/            # 通用组件和工具
│   ├── components/        # UI组件库
│   ├── data/              # 数据层
│   ├── devops/            # DevOps工具
│   ├── foundation/        # 基础设施
│   ├── project-ide/       # 项目开发环境
│   ├── studio/            # Studio核心功能
│   ├── workflow/          # 工作流引擎
│   └── community/         # 社区功能
│
├── config/                # 配置层
│   ├── eslint-config/     # ESLint配置
│   ├── rsbuild-config/    # Rsbuild构建配置
│   ├── ts-config/         # TypeScript配置
│   ├── postcss-config/    # PostCSS配置
│   ├── stylelint-config/  # Stylelint配置
│   ├── tailwind-config/   # Tailwind CSS配置
│   └── vitest-config/     # Vitest测试配置
│
├── infra/                 # 基础设施
│   ├── idl/              # 接口定义语言工具
│   ├── plugins/          # 构建插件
│   ├── utils/            # 工具库
│   └── eslint-plugin/    # 自定义ESLint插件
│
└── scripts/              # 脚本工具
    ├── block-unresolved-conflict.sh
    ├── post-rush-install.sh
    └── pre-push-hook.sh

前端启动脚本

bash 复制代码
cd frontend
rush install

cd apps/coze-studio

npm run dev

app 启动

index.tsx

加载功能配置文件

加载流程 全局上下文 window.fg_values ->fetchFeatureGating->window.fetch_fg_promise->localStorage['cache:@coze-arch/bot-flags']的流程去获取。 应该是项目内部的一套处理功能灰度的方法,不太重要。

typescript 复制代码
initFlags();

加载国际化文件

typescript 复制代码
initI18nInstance({
  lng: (localStorage.getItem('i18next') ?? (IS_OVERSEA ? 'en' : 'zh-CN')) as
    | 'en'
    | 'zh-CN',
});

具体的配置文件在 frontend/packages/arch/i18n/config 下面,一共有两个,中文和英文

加载样式并渲染 app 组件

typescript 复制代码
dynamicImportMdBoxStyle();
typescript 复制代码
root.render(<App />);

app.tsx

逻辑很简单,就只是渲染了一些路由配置,路由配置在routes/index.tsx下面

根路由结构

scss 复制代码
/ (根路径)
├── Layout (主布局)
│   ├── / → /space (重定向)
│   ├── sign (登录页面)
│   ├── space (工作空间)
│   ├── work_flow (工作流)
│   └── explore (探索页面)
├── /open/docs/* (开放文档)
├── /docs/* (文档)
└── /information/auth/success (认证成功)
相关推荐
阿明Drift几秒前
从炫酷粒子星云学 Three.js:深度解析一个 15 万粒子的 GPU 动画系统
前端·three.js
凉_橙3 分钟前
移动端h5适配方案
前端
久亮哦3 分钟前
开发Electron程序
前端·javascript·electron
敲敲了个代码7 分钟前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
你们的前端课代表7 分钟前
前端如何优雅地“边聊边等”——用 Fetch 实现流式请求大模型
前端
王大宇_8 分钟前
React闭包陷阱
前端·javascript
A达峰绮20 分钟前
Actix-web 框架性能优化技巧深度解析
前端·性能优化·actix-web
小白学过的代码24 分钟前
videojs增加视频源选择框小工具
javascript·vue.js·音视频
Promise52034 分钟前
用油猴脚本实现用户身份快速切换
前端·javascript
玲玲51235 分钟前
vue3组件通信:defineEmits和defineModel
前端