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 (认证成功)
相关推荐
西洼工作室1 小时前
CSS高效开发三大方向
前端·css
昔人'1 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾2 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶3 小时前
Starting again-02
开发语言·前端·javascript
Apifox.4 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku4 小时前
Typescript return type
前端·javascript·typescript
叁佰万4 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆4 小时前
js异步任务你都知道了吗?
前端·面试
光影少年4 小时前
react生态
前端·react.js·前端框架
golang学习记5 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端