Echart React​

对于绘制图表，提供合适的 options 给 echart 即可，但是往往需要显示的数据从接口获取，需要将图表的数据和样式分离。

假设有如下封装好的组件：

<EchartReact options={options} {...{ others }}></EchartReact>

Currying​

Currying is a technique of converting a function that takes multiple arguments into a series of functions that each take a single argument.

In short: Using the characteristics of higher-order functions, the function is partially called according to the parameters.

Business Scenario​

Users can perform operations such as dragging and resizing the content on the page to customize the layout of the page.

demo

What is Vue-Grid-Layout?​

Vue-Grid-Layout is a drag-and-drop layout component that can meet the above requirements. It is a secondary development based on Gridster, supporting drag-and-drop, scaling, responsive layout, etc.

打包​

编写打包逻辑 -> 打包本地js -> 发布 -> cycle

参考​

• GitHub Pages 配置
• GitHub Actions 官方文档
• GitHub Pages 域名配置指南

托管静态资源到GithubPage​

• 通过github action， 从action产物部署
• 推送到 gh-pages, 从分支部署

两种部署模式对比​

• 分支推送模式：生成 gh-pages 分支，GitHub 自动从该分支拉取内容
• 直接部署模式：通过 upload-pages-artifact + deploy-pages 直接托管，无需维护分支

常见问题排查​

错误信息：Branch "main" is not allowed to deploy due to environment protection rules

• 进入仓库设置：Settings → Environments → github-pages
• 修改 Deployment branches：允许 main 分支
• 关闭 Required reviewers 或添加审批者（如有必要）

部署后显示 404

• 检查构建路径是否正确（如 Docusaurus 默认输出到 build 文件夹）
• 验证仓库设置的 Pages 来源：Settings → Pages → Build and deployment → Branch