前端技术栈
第 4 周切到前端。今天先认识这套 React 应用的"骨架"：用什么框架、什么 UI 库、怎么构建、应用怎么启动。零基础也能跟——每个术语都配大白话。
ice.js 3 + React 18
pages/ 建个文件夹就自动变成一个页面路由，不用手写路由表。frontend/src/pages/ 下新建目录 route/ 并放个 index.tsx → 访问 /route 就自动渲染这个页面，无需在任何路由表里登记。目录结构 = 路由结构。frontend/package.json：react ^18.2.0（:23）、@ice/runtime ^1.0.0（:16）、@ice/app ^3.0.0（:35）。这是阿里的 ice.js 3（icejs）——基于 React 的应用框架，约定式路由 + 数据流。
pages/ 建个文件夹就自动成为一个页面路由，不用手写路由表）。好比 React 是发动机，ice.js 是整车。antd + Pro 组件
UI 库是 Ant Design 4（antd ^4.24.0，:12），外加 Ant Design Pro 组件族：@ant-design/pro-components / pro-layout / pro-table / pro-form（:6-9），图表 @ant-design/charts。HTTP 用 axios ^1.2.1。
构建配置 + 开发代理
👨🏫：浏览器有"同源策略"——前端跑在
localhost:3000，直接请求 demo.higress.io 会被跨域拦截。👶：那代理怎么绕过？
👨🏫：让 ice 的开发服务器当"中转站"：前端把
/api/* 发给自己（同源，不跨域），ice 再替你转发到 demo.higress.io。好比你不方便直收国际快递，就先寄到一个国内转寄点。pathRewrite 负责把 /api 前缀去掉再转发。frontend/ice.config.mts：
ssr: false, ssg: false // :10-12 纯 CSR 单页应用（SPA）
proxy: { // :16-22 开发代理
'/api': { target: 'http://demo.higress.io/', changeOrigin: true,
pathRewrite: { '^/api': '' } }
}/api 开头的请求转发到 demo.higress.io——于是本地前端能直接用线上 demo 的后端调试，省去自己搭后端。pathRewrite 把 /api 前缀去掉再转发。Monaco 本地托管
ice.config.mts:28-43 用 copy-webpack-plugin 把 node_modules/monaco-editor/min/vs 拷到构建产物的 vs/ 目录。
app.ts 应用配置
frontend/src/app.ts 是 ice 的应用入口：
// :39-66 dataLoader：启动前并发拉三份数据
getUserInfo() / getConfigs() / getSystemInfo() // 任一失败降级为空对象
// :14-22 authConfig：按 userInfo.type 生成 admin/user 权限位
// :24-37 storeConfig：把 dataLoader 结果注入全局 store 初始状态全局 store
frontend/src/store.ts:6-10 由三个 model 组成：user / config / system（createStore）。每个 model 是 ice 的 createModel（rematch 风格 state + reducers），如 models/config.ts:8-17。
i18n 国际化
frontend/src/i18n.ts:8-26：用 i18next，fallback zh-CN，内置 en/zh 两份 translation.json（src/locales/{zh-CN,en-US}/translation.json）。package.json 还有 check-i18n 脚本校验中英文键一致。
t('key') 取翻译。这套前端 i18n 和 Day 12 后端插件的 x-*-i18n 约定配合——插件的多语言标题由后端按语言返回，界面文案由前端 i18next 翻译，两条线共同实现全站中英文。今日小结 + 动手
🧠 今天你应该能回答
- React 和 ice.js 的关系？什么是"约定式路由"？
- 用了哪个 UI 库？Pro 组件是什么？
- 开发代理解决什么问题？为什么 Monaco 要本地托管？
- dataLoader 和全局 store 各自的作用？
✋ 动手
cd /Users/bitmart/work/codes/github/higress-group/higress-console/frontend
sed -n '1,70p' package.json
sed -n '1,43p' ice.config.mts
sed -n '14,66p' src/app.ts
cat src/store.ts_defaultProps、API 层 request.tsx 拦截器，以及精读路由管理页的 CRUD。