mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
Merge branch 'master' of https://github.com/WeBankFinTech/fes.js
This commit is contained in:
winixt
commit
ad3e4edd3e
16
.fatherrc.js
16
.fatherrc.js
@ -1,10 +1,7 @@
|
||||
import { readdirSync } from "fs";
|
||||
import { join } from "path";
|
||||
|
||||
// utils must build before core
|
||||
// runtime must build before renderer-react
|
||||
|
||||
const headPkgs = [
|
||||
const pkgs = [
|
||||
"fes-runtime",
|
||||
"fes-compiler",
|
||||
"fes",
|
||||
@ -20,19 +17,14 @@ const headPkgs = [
|
||||
"fes-plugin-vuex",
|
||||
"create-fes-app",
|
||||
"fes-plugin-qiankun",
|
||||
"fes-plugin-sass"
|
||||
"fes-plugin-sass",
|
||||
"fes-plugin-monaco-editor"
|
||||
];
|
||||
const tailPkgs = [];
|
||||
// const otherPkgs = readdirSync(join(__dirname, 'packages')).filter(
|
||||
// (pkg) =>
|
||||
// pkg.charAt(0) !== '.' && !headPkgs.includes(pkg) && !tailPkgs.includes(pkg),
|
||||
// );
|
||||
|
||||
const otherPkgs = [];
|
||||
|
||||
export default {
|
||||
target: "node",
|
||||
cjs: { type: "babel", lazy: false },
|
||||
disableTypeCheck: true,
|
||||
pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs],
|
||||
pkgs,
|
||||
};
|
||||
|
||||
4
.prettierrc
Normal file
4
.prettierrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
123
README.en-US.md
Normal file
123
README.en-US.md
Normal file
@ -0,0 +1,123 @@
|
||||
English | [简体中文](./README.md)
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/WeBankFinTech/fes.js">
|
||||
<img alt="fes.js" width="250" src="https://i.loli.net/2021/03/12/Vb4LKc5gaHUfOwB.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div align="center">
|
||||
|
||||
An excellent front-end solution
|
||||
|
||||
[](https://github.com/WeBankFinTech/fes.js/issues)
|
||||
[](http://opensource.org/licenses/MIT)
|
||||
[](https://github.com/WeBankFinTech/fes.js/pulls)
|
||||
|
||||
</div>
|
||||
|
||||
- document - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/)
|
||||
- changelog - [https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md](https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md)
|
||||
|
||||
# Pain points
|
||||
Before developing a front-end project, we may need to do the following preparations：
|
||||
- Set up a development environment
|
||||
- Conventional code specification
|
||||
- Encapsulate API requests
|
||||
- Configure routing
|
||||
- Realize layout, menu, navigation
|
||||
- Realize login
|
||||
- authority management
|
||||
- ...
|
||||
|
||||
In addition to the preparation work, there are many similar business types. For example, most of the middle and back-end applications are workbenches, additions, deletions, changes, permissions, charts, etc. If each project is completely processed manually, it will not only take time, but over time there may be multiple technology stacks and development specifications, leading to inconsistent development processes and making historical projects more and more difficult to maintain. So we need a complete solution to manage the entire process from development to deployment.
|
||||
|
||||
|
||||
## Fes.js ？
|
||||
Fes.js is an excellent front-end application solution. Fes.js is based on Vue 3.0 and routing, and supports both configuration routing and convention routing, which can be used for functional expansion. Equipped with a complete plug-in system covering the compile-time and runtime life cycle, it supports various function extensions and business requirements.
|
||||
|
||||
It mainly has the following functions:
|
||||
- 🚀 __fast__ , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs.
|
||||
|
||||
- 🧨 __easy__ , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning.
|
||||
|
||||
- 💪 __strong__ , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality.
|
||||
|
||||
- 📦 __expanded__ , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js.
|
||||
|
||||
- 📡 __future__ , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future.
|
||||
|
||||
## Plugins
|
||||
|
||||
| plugin | introduce |
|
||||
| ---- | ---- |
|
||||
| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | Provides the ability to control the permissions of page resources |
|
||||
| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | Provide unified enumeration access and rich functions to handle enumeration |
|
||||
| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg file is automatically registered as a component |
|
||||
| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Jest`, provide unit testing and coverage testing capabilities |
|
||||
| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | Simple configuration to have a layout, including navigation and sidebar |
|
||||
| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | Based on `Vue I18n`, providing internationalization capabilities |
|
||||
| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | Simple data management solution |
|
||||
| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling |
|
||||
| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Vuex`, provide state management capabilities |
|
||||
| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | Based on `qiankun`, provide microservice capabilities |
|
||||
| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | Style support sass |
|
||||
| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) |
|
||||
|
||||
## As easy as counting 1, 2, 3
|
||||
use `yarn`：
|
||||
```bash
|
||||
# Create a template
|
||||
yarn create @fesjs/fes-app myapp
|
||||
|
||||
# Installation dependencies
|
||||
yarn
|
||||
|
||||
# run
|
||||
yarn dev
|
||||
```
|
||||
|
||||
use `npm`：
|
||||
```bash
|
||||
# Create a template
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
# Installation dependencies
|
||||
npm install
|
||||
|
||||
# run
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Feedback
|
||||
|
||||
| Github Issue | WeChat group | Fes.js开源运营小助手 |
|
||||
| --- | --- | --- |
|
||||
| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests and stars are always welcome.
|
||||
|
||||
For bugs and feature requests, [please create an issue](https://github.com/WeBankFinTech/fes.js/issues).
|
||||
|
||||
1. Fork it!
|
||||
2. Create your feature branch: `git checkout -b my-new-feature`
|
||||
3. Commit your changes: `git commit -am 'Add some feature'`
|
||||
4. Push to the branch: `git push origin my-new-feature`
|
||||
5. Submit a pull request :D
|
||||
|
||||
|
||||
## Community activity
|
||||
|
||||
### Fesjs community award-winning essay activity
|
||||
|
||||
In order for the Fes.js open source project to run better, and to give back to the open source community, the community launched an award-winning essay event! Everyone is welcome to post practical experience to provide reference for community users and a wider range of developers.
|
||||
|
||||
The output of experience can also help your system accumulate your own projects, sort out your work ideas, and also help your technology blog to promote. Good practice cases will have the opportunity to be invited to participate in the project community technical meeting to share, hurry up and participate.
|
||||
|
||||
Please stamp: https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
|
||||
|
||||
|
||||
22
README.md
22
README.md
@ -1,3 +1,5 @@
|
||||
简体中文 | [English](./README.en-US.md)
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/WeBankFinTech/fes.js">
|
||||
<img alt="fes.js" width="250" src="https://i.loli.net/2021/03/12/Vb4LKc5gaHUfOwB.png">
|
||||
@ -32,7 +34,7 @@
|
||||
|
||||
|
||||
## Fes.js 是什么？
|
||||
Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
|
||||
Fes.js 是一个优秀的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
|
||||
|
||||
它主要具备以下功能：
|
||||
- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
|
||||
@ -60,6 +62,7 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
|
||||
| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
使用 `yarn`：
|
||||
@ -93,18 +96,17 @@ npm run dev
|
||||
| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
|
||||
|
||||
|
||||
## Contributing
|
||||
## 参与共建
|
||||
|
||||
Pull requests and stars are always welcome.
|
||||
我们非常欢迎社区同学能提交PR：
|
||||
|
||||
For bugs and feature requests, [please create an issue](https://github.com/WeBankFinTech/fes.js/issues).
|
||||
|
||||
1. Fork it!
|
||||
2. Create your feature branch: `git checkout -b my-new-feature`
|
||||
3. Commit your changes: `git commit -am 'Add some feature'`
|
||||
4. Push to the branch: `git push origin my-new-feature`
|
||||
5. Submit a pull request :D
|
||||
1. fork项目!
|
||||
2. 创建你的功能分支: `git checkout -b my-new-feature`
|
||||
3. 本地提交新代码: `git commit -am 'Add some feature'`
|
||||
4. 推送本地到服务器分支: `git push origin my-new-feature`
|
||||
5. 创建一个PR
|
||||
|
||||
如果是发现Bug或者期望添加新功能，请提交[issue](https://github.com/WeBankFinTech/fes.js/issues)。
|
||||
|
||||
## 社区活动
|
||||
|
||||
|
||||
@ -62,6 +62,7 @@ export const en: SidebarConfig = {
|
||||
'/reference/plugin/plugins/vuex.md',
|
||||
'/reference/plugin/plugins/qiankun.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -62,6 +62,7 @@ export const zh: SidebarConfig = {
|
||||
'/zh/reference/plugin/plugins/vuex.md',
|
||||
'/zh/reference/plugin/plugins/qiankun.md',
|
||||
'/zh/reference/plugin/plugins/sass.md',
|
||||
'/zh/reference/plugin/plugins/editor.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -20,7 +20,7 @@ export default {
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
footer: 'Created by MumbleFe',
|
||||
footer: 'Created by MumbelFe',
|
||||
multiTabs: false,
|
||||
menus: [{
|
||||
name: 'index'
|
||||
|
||||
@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
|
||||
</style>
|
||||
```
|
||||
|
||||
## CSS Modules
|
||||
支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
|
||||
```vue
|
||||
<style module>
|
||||
.layout-content {
|
||||
max-width: 1000px;
|
||||
}
|
||||
```
|
||||
如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
|
||||
```js
|
||||
import style from '@/styles/index.module.css'
|
||||
console.log(style)
|
||||
```
|
||||
|
||||
## CSS 预处理器
|
||||
Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。
|
||||
@ -1,7 +1,7 @@
|
||||
# 快速上手
|
||||
|
||||
## 依赖环境
|
||||
首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 `10.13` 或以上。
|
||||
首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
|
||||
```bash
|
||||
# 打印 node 版本
|
||||
node -v
|
||||
|
||||
@ -4,7 +4,7 @@ Mock 数据是前端开发过程中必不可少的一环，是分离前后端开
|
||||
|
||||
## 约定式 Mock 文件
|
||||
|
||||
Fes.js 约定 `src/mock.js` 为 mock 文件。
|
||||
Fes.js 约定 `./mock.js` 为 mock 文件。
|
||||
|
||||
比如：
|
||||
```
|
||||
@ -172,7 +172,6 @@ export default function ({ cgiMock, mockjs, utils }) {
|
||||
- utils.file(path)，从项目根目录根据path寻找文件，返回文件流。
|
||||
|
||||
## 配置 Mock
|
||||
|
||||
详见配置 [mock](../reference/config/#mock)。
|
||||
|
||||
## 关闭 Mock
|
||||
|
||||
@ -39,6 +39,26 @@ export function beforeRender(lastOpts) {
|
||||
};
|
||||
```
|
||||
|
||||
### patchRoutes
|
||||
|
||||
patchRoutes({routes })
|
||||
|
||||
|
||||
修改路由。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
```
|
||||
export function patchRoutes({ routes }) {
|
||||
routes.unshift({
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
});
|
||||
}
|
||||
```
|
||||
:::tip
|
||||
直接修改 `routes`, 不需要返回
|
||||
:::
|
||||
|
||||
### modifyClientRenderOpts
|
||||
|
||||
modifyClientRenderOpts(lastOpts)
|
||||
@ -83,26 +103,6 @@ export function rootContainer(container) {
|
||||
}
|
||||
```
|
||||
|
||||
### patchRoutes
|
||||
|
||||
patchRoutes({routes })
|
||||
|
||||
|
||||
修改路由。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
```
|
||||
export function patchRoutes({ routes }) {
|
||||
routes.unshift({
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
});
|
||||
}
|
||||
```
|
||||
:::tip
|
||||
直接修改 `routes`, 不需要返回
|
||||
:::
|
||||
|
||||
### onAppCreated
|
||||
|
||||
onAppCreated({app})
|
||||
@ -126,6 +126,10 @@ render(oldRender: Function)
|
||||
|
||||
覆写 render。
|
||||
|
||||
比如用于渲染之前做权限校验。
|
||||
|
||||
|
||||
|
||||
### onRouterCreated
|
||||
|
||||
onRouterCreated({router})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# HTML模板
|
||||
# HTML和静态资源
|
||||
|
||||
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认 HTML模板 是：
|
||||
```html
|
||||
@ -50,4 +50,34 @@ export default {
|
||||
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
|
||||
- `NODE_ENV`
|
||||
- `FES_ENV`
|
||||
- `.env` 文件中以 `FES_APP_` 开头的变量
|
||||
- `.env` 文件中以 `FES_APP_` 开头的变量
|
||||
|
||||
## 处理静态资源
|
||||
|
||||
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
|
||||
|
||||
### `public` 文件夹
|
||||
|
||||
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
|
||||
|
||||
* 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
|
||||
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
```
|
||||
|
||||
* 在模板中，你首先需要向你的组件传入基础 URL：
|
||||
|
||||
```html
|
||||
setup() {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后：
|
||||
|
||||
```html
|
||||
<img :src="`${publicPath}my-image.png`">
|
||||
```
|
||||
|
||||
@ -144,6 +144,24 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## extraBabelPlugins
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 babel 插件。
|
||||
|
||||
- 示例：
|
||||
```js
|
||||
export default {
|
||||
extraBabelPlugins: [
|
||||
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## extraPostCSSPlugins
|
||||
|
||||
- 类型： `array`
|
||||
@ -278,6 +296,12 @@ export default {
|
||||
|
||||
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
|
||||
|
||||
## router
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{ mode: 'hash' }`
|
||||
- 详情： 配置路由，具体请查看指南中关于路由的介绍
|
||||
|
||||
## singular
|
||||
- 类型： `boolean`
|
||||
- 默认值： `false`
|
||||
|
||||
120
docs/reference/plugin/plugins/editor.md
Normal file
120
docs/reference/plugin/plugins/editor.md
Normal file
@ -0,0 +1,120 @@
|
||||
# @fesjs/plugin-monaco-editor
|
||||
|
||||
|
||||
## 介绍
|
||||
我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### 编译时配置
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json']
|
||||
}
|
||||
}
|
||||
```
|
||||
我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
|
||||
|
||||
|
||||
#### filename
|
||||
- **类型**：自定义worker脚本名称
|
||||
|
||||
- **默认值**：`'[name].worker.js'`
|
||||
|
||||
#### publicPath
|
||||
- **类型**：自定义worker脚本的路径
|
||||
|
||||
- **默认值**：`''`
|
||||
|
||||
#### languages
|
||||
- **类型**：需要支持的语言类型
|
||||
|
||||
- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
|
||||
|
||||
- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### monaco
|
||||
编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
|
||||
```js
|
||||
import { monaco } from '@fesjs/fes';
|
||||
|
||||
monaco.editor.defineTheme('myCoolTheme', {
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
rules: [
|
||||
{ token: 'custom-info', foreground: '808080' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||
{ token: 'custom-date', foreground: '008800' },
|
||||
]
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### 组件 MonacoEditor
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MonacoEditor
|
||||
v-model="json"
|
||||
language="json"
|
||||
height="400px"
|
||||
check>
|
||||
</MonacoEditor>
|
||||
</template>
|
||||
<script>
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
},
|
||||
setup(){
|
||||
const json = ref('');
|
||||
return {
|
||||
json
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
#### props
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | ------------- | ------------- | ------------- |
|
||||
| theme | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
|
||||
| language | 编辑器的语言 | string | - |
|
||||
| height | 编辑器的高度 | string | `100%` |
|
||||
| width | 编辑器的宽度 | string | `100%` |
|
||||
| modelValue(v-model) | 编辑器的代码 | string | - |
|
||||
| readOnly | 是否只读 | boolean | `false` |
|
||||
| options | 编辑器的配置对象 | object | `{}` |
|
||||
| check | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
|
||||
|
||||
#### events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
@ -14,12 +14,23 @@
|
||||
|
||||
- 可配置页面是否需要 layout。
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 布局类型
|
||||
配置参数是 `navigation`, 内容默认是 `side`：
|
||||
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
|
||||
```js
|
||||
export default {
|
||||
layout: {
|
||||
navigation: 'side
|
||||
navigation: 'side'
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -36,28 +47,31 @@ export default {
|
||||
<!--  -->
|
||||
<img :src="$withBase('mixin.png')" alt="mixin">
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### 页面禁用布局
|
||||
Fes.js 渲染路由时，如果路由元信息存在配置 `layout` 为 `false`，则表示禁用此配置，用户只需要如下配置：
|
||||
布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
|
||||
```vue
|
||||
<config>
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": false
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
</script>
|
||||
```
|
||||
如果只是不想展示`side`，则：
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": {
|
||||
"side": false
|
||||
}
|
||||
}
|
||||
</config>
|
||||
```
|
||||
`layout`的可选配置有：
|
||||
|
||||
- **side**： 左侧区域
|
||||
|
||||
- **top**： 头部区域
|
||||
|
||||
- **logo**：logo和标题区域。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -174,13 +188,13 @@ export default {
|
||||
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
|
||||
```js
|
||||
{
|
||||
name: "user"
|
||||
icon: "user"
|
||||
}
|
||||
```
|
||||
- 图表使用本地或者远程svg图片。
|
||||
- 图标使用本地或者远程svg图片。
|
||||
```js
|
||||
{
|
||||
name: "/wine-outline.svg"
|
||||
icon: "/wine-outline.svg"
|
||||
}
|
||||
```
|
||||
|
||||
@ -201,7 +215,7 @@ export const layout = {
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：布局的 Header 部位提供组件自定义功能。
|
||||
- **详情**：top的区域部分位置提供组件自定义功能。
|
||||
|
||||
#### unAccessHandler
|
||||
- **类型**：`Function`
|
||||
@ -261,4 +275,4 @@ export const access = {
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
@ -136,6 +136,30 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||
如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
|
||||
|
||||
|
||||
`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" url="/" />
|
||||
</template>
|
||||
<script>
|
||||
import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
return {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 子应用配置
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
```js
|
||||
export default {
|
||||
request: {
|
||||
dataField: 'result',
|
||||
dataField: 'result'
|
||||
},
|
||||
}
|
||||
```
|
||||
@ -32,6 +32,16 @@ export default {
|
||||
|
||||
`dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
|
||||
|
||||
|
||||
#### base(即将废弃)
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`base` 接口前缀。
|
||||
|
||||
⚠️警告，这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
|
||||
### 运行时配置
|
||||
|
||||
在 `app.js` 中进行运行时配置。
|
||||
@ -42,6 +52,8 @@ export const request = {
|
||||
responseDataAdaptor: (data) => {
|
||||
|
||||
},
|
||||
// 关闭 response data 校验（只判断 xhr status）
|
||||
closeResDataCheck: false,
|
||||
// 请求拦截器
|
||||
requestInterceptors: [],
|
||||
// 相应拦截器
|
||||
@ -50,17 +62,45 @@ export const request = {
|
||||
// 内部以 reponse.data.code === '0' 判断请求是否成功
|
||||
// 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
|
||||
errorHandler: {
|
||||
11199: (response) => {
|
||||
|
||||
11199(response) {
|
||||
// 特殊 code 处理逻辑
|
||||
},
|
||||
404: (error) => {
|
||||
|
||||
404(error) {
|
||||
},
|
||||
default(error) {
|
||||
// 异常统一处理
|
||||
}
|
||||
},
|
||||
// 其他 axios 配置
|
||||
...otherConfigs
|
||||
}
|
||||
```
|
||||
|
||||
#### skipErrorHandler
|
||||
|
||||
- 类型： `boolean | string | number | array<string | number>`
|
||||
- 默认值： ``
|
||||
- 详情：
|
||||
|
||||
指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。
|
||||
|
||||
- 示列：
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
|
||||
request('/api/login', null, {
|
||||
skipErrorHandler: '110'
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 这里处理 code 为 110 的异常
|
||||
// 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
### 发起一个普通 post 请求
|
||||
@ -78,6 +118,27 @@ request('/api/login', {
|
||||
})
|
||||
```
|
||||
|
||||
### merge 重复请求
|
||||
|
||||
连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。
|
||||
|
||||
当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}, {
|
||||
mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
```
|
||||
|
||||
### 请求节流
|
||||
|
||||
```js
|
||||
@ -106,7 +167,7 @@ request('/api/login', {
|
||||
}, {
|
||||
cache: {
|
||||
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
|
||||
},
|
||||
}).then((res) => {
|
||||
// do something
|
||||
@ -117,6 +178,7 @@ request('/api/login', {
|
||||
|
||||
若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。
|
||||
|
||||
|
||||
### 结合 use 使用
|
||||
|
||||
```js
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# @fesjs/plugin-access
|
||||
# @fesjs/plugin-sass
|
||||
|
||||
|
||||
|
||||
@ -24,4 +24,4 @@ Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`，例如：
|
||||
```vue
|
||||
<style lang="scss">
|
||||
</style>
|
||||
```
|
||||
```
|
||||
|
||||
@ -49,13 +49,6 @@ store.getters[GETTER_TYPES.user.address]
|
||||
store.commit(MUTATION_TYPES.counter.increment)
|
||||
store.dispatch(ACTION_TYPES.user.login)
|
||||
```
|
||||
|
||||
```js
|
||||
import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES, store } from '@fesjs/fes';
|
||||
store.getters[GETTER_TYPES.user.address]
|
||||
store.commit(MUTATION_TYPES.counter.increment)
|
||||
store.dispatch(ACTION_TYPES.user.login)
|
||||
```
|
||||
## API
|
||||
### MUTATION_TYPES
|
||||
* 类型 `Object`
|
||||
|
||||
120
docs/zh/reference/plugin/plugins/editor.md
Normal file
120
docs/zh/reference/plugin/plugins/editor.md
Normal file
@ -0,0 +1,120 @@
|
||||
# @fesjs/plugin-monaco-editor
|
||||
|
||||
|
||||
## 介绍
|
||||
我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### 编译时配置
|
||||
在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json']
|
||||
}
|
||||
}
|
||||
```
|
||||
我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
|
||||
|
||||
|
||||
#### filename
|
||||
- **类型**：自定义worker脚本名称
|
||||
|
||||
- **默认值**：`'[name].worker.js'`
|
||||
|
||||
#### publicPath
|
||||
- **类型**：自定义worker脚本的路径
|
||||
|
||||
- **默认值**：`''`
|
||||
|
||||
#### languages
|
||||
- **类型**：需要支持的语言类型
|
||||
|
||||
- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
|
||||
|
||||
- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### monaco
|
||||
编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
|
||||
```js
|
||||
import { monaco } from '@fesjs/fes';
|
||||
|
||||
monaco.editor.defineTheme('myCoolTheme', {
|
||||
base: 'vs',
|
||||
inherit: false,
|
||||
rules: [
|
||||
{ token: 'custom-info', foreground: '808080' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||
{ token: 'custom-date', foreground: '008800' },
|
||||
]
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### 组件 MonacoEditor
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MonacoEditor
|
||||
v-model="json"
|
||||
language="json"
|
||||
height="400px"
|
||||
check>
|
||||
</MonacoEditor>
|
||||
</template>
|
||||
<script>
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
},
|
||||
setup(){
|
||||
const json = ref('');
|
||||
return {
|
||||
json
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
#### props
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | ------------- | ------------- | ------------- |
|
||||
| theme | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
|
||||
| language | 编辑器的语言 | string | - |
|
||||
| height | 编辑器的高度 | string | `100%` |
|
||||
| width | 编辑器的宽度 | string | `100%` |
|
||||
| modelValue(v-model) | 编辑器的代码 | string | - |
|
||||
| readOnly | 是否只读 | boolean | `false` |
|
||||
| options | 编辑器的配置对象 | object | `{}` |
|
||||
| check | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
|
||||
|
||||
#### events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
@ -11,10 +11,11 @@
|
||||
"clean": "lerna clean",
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"build": "father-build --watch",
|
||||
"ver": "lerna version patch --no-changelog --no-commit-hooks --no-private",
|
||||
"ver": "lerna version --conventional-prerelease --no-changelog --no-commit-hooks --no-private",
|
||||
"release": "father-build && lerna publish from-git",
|
||||
"docs:dev": "vuepress dev docs --clean-cache",
|
||||
"docs:build": "vuepress build docs --clean-cache"
|
||||
"docs:build": "vuepress build docs --clean-cache",
|
||||
"lint": "eslint -c ./.eslintrc.js --ext .js,.jsx,.vue,.ts"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
@ -34,7 +35,7 @@
|
||||
"@vuepress/plugin-pwa": "^2.0.0-alpha.18",
|
||||
"@vuepress/plugin-pwa-popup": "^2.0.0-alpha.18",
|
||||
"@vuepress/theme-vue": "^2.0.0-alpha.18",
|
||||
"@webank/eslint-config-webank": "0.2.10",
|
||||
"@webank/eslint-config-webank": "0.3.0",
|
||||
"commitizen": "^4.2.1",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"esbuild-loader": "^2.7.0",
|
||||
|
||||
21
packages/fes-plugin-monaco-editor/LICENSE
Normal file
21
packages/fes-plugin-monaco-editor/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-present webank
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
37
packages/fes-plugin-monaco-editor/package.json
Normal file
37
packages/fes-plugin-monaco-editor/package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@fesjs/plugin-monaco-editor",
|
||||
"version": "2.0.0-beta.1",
|
||||
"description": "@fesjs/plugin-monaco-editor",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib"
|
||||
],
|
||||
"scripts": {},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-plugin-monaco-editor"
|
||||
},
|
||||
"keywords": [
|
||||
"fes"
|
||||
],
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@umijs/utils": "3.3.3",
|
||||
"lodash": "^4.17.15",
|
||||
"monaco-editor": "^0.20.0",
|
||||
"monaco-editor-webpack-plugin": "^1.9.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
}
|
||||
85
packages/fes-plugin-monaco-editor/src/index.js
Normal file
85
packages/fes-plugin-monaco-editor/src/index.js
Normal file
@ -0,0 +1,85 @@
|
||||
import { readFileSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
const namespace = 'plugin-monaco-editor';
|
||||
|
||||
export default (api) => {
|
||||
const {
|
||||
utils: { Mustache }
|
||||
} = api;
|
||||
|
||||
api.describe({
|
||||
key: 'monacoEditor',
|
||||
config: {
|
||||
schema(joi) {
|
||||
return joi.object().keys({
|
||||
filename: joi.string(),
|
||||
publicPath: joi.string(),
|
||||
languages: joi.array(),
|
||||
features: joi.array(),
|
||||
globalAPI: joi.boolean()
|
||||
});
|
||||
}
|
||||
},
|
||||
default: {
|
||||
}
|
||||
});
|
||||
|
||||
const absoluteFilePath = join(namespace, 'core.js');
|
||||
|
||||
const absRuntimeFilePath = join(namespace, 'runtime.js');
|
||||
|
||||
const absLoaderFilePath = join(namespace, 'loader.js');
|
||||
|
||||
api.onGenerateFiles(() => {
|
||||
// 文件写出
|
||||
api.writeTmpFile({
|
||||
path: absoluteFilePath,
|
||||
content: Mustache.render(
|
||||
readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),
|
||||
{
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
api.writeTmpFile({
|
||||
path: absRuntimeFilePath,
|
||||
content: Mustache.render(
|
||||
readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8')
|
||||
)
|
||||
});
|
||||
|
||||
api.writeTmpFile({
|
||||
path: absLoaderFilePath,
|
||||
content: Mustache.render(
|
||||
readFileSync(join(__dirname, 'runtime/loader.tpl'), 'utf-8')
|
||||
)
|
||||
});
|
||||
|
||||
api.copyTmpFiles({
|
||||
namespace,
|
||||
path: join(__dirname, 'runtime'),
|
||||
ignore: ['.tpl']
|
||||
});
|
||||
});
|
||||
|
||||
api.addPluginExports(() => [
|
||||
{
|
||||
specifiers: ['monaco', 'MonacoEditor'],
|
||||
source: absoluteFilePath
|
||||
}
|
||||
]);
|
||||
|
||||
api.addRuntimePluginKey(() => 'monacoEditor');
|
||||
|
||||
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
|
||||
|
||||
api.chainWebpack((webpackConfig) => {
|
||||
webpackConfig
|
||||
.plugin('monaco-editor')
|
||||
.use(require('monaco-editor-webpack-plugin'), [
|
||||
api.config?.monacoEditor || {}
|
||||
]);
|
||||
return webpackConfig;
|
||||
});
|
||||
};
|
||||
6
packages/fes-plugin-monaco-editor/src/runtime/core.tpl
Normal file
6
packages/fes-plugin-monaco-editor/src/runtime/core.tpl
Normal file
@ -0,0 +1,6 @@
|
||||
import Editor from './editor';
|
||||
import _monaco from './loader';
|
||||
|
||||
export const MonacoEditor = Editor;
|
||||
|
||||
export const monaco = _monaco;
|
||||
304
packages/fes-plugin-monaco-editor/src/runtime/editor.vue
Normal file
304
packages/fes-plugin-monaco-editor/src/runtime/editor.vue
Normal file
@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<section ref="containRef" :style="style" class="editor" />
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
computed, ref, watch, onMounted, onBeforeUnmount
|
||||
} from 'vue';
|
||||
import { merge, debounce } from 'lodash';
|
||||
// eslint-disable-next-line
|
||||
import monaco from './loader';
|
||||
|
||||
const processSize = function (size) {
|
||||
return !/^\d+$/.test(size) ? size : `${size}px`;
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'MonacoEditor',
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'defaultTheme'
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
modelValue: String,
|
||||
readOnly: Boolean,
|
||||
options: Object,
|
||||
check: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'onload', 'scrollChange'],
|
||||
setup(props, { emit }) {
|
||||
const containRef = ref(null);
|
||||
|
||||
const style = computed(() => {
|
||||
const fixedWidth = processSize(props.width);
|
||||
const fixedHeight = processSize(props.height);
|
||||
return {
|
||||
width: fixedWidth,
|
||||
height: fixedHeight
|
||||
};
|
||||
});
|
||||
|
||||
const currentConfig = computed(() => {
|
||||
const config = merge(
|
||||
{
|
||||
automaticLayout: true,
|
||||
scrollBeyondLastLine: false,
|
||||
minimap: {
|
||||
enabled: false
|
||||
},
|
||||
glyphMargin: true,
|
||||
fontSize: '14px',
|
||||
contextmenu: true
|
||||
},
|
||||
props.options,
|
||||
{
|
||||
readOnly: props.readOnly
|
||||
}
|
||||
);
|
||||
return config;
|
||||
});
|
||||
|
||||
let editor;
|
||||
let editorModel;
|
||||
|
||||
const getValue = () => {
|
||||
if (!editor) {
|
||||
return '';
|
||||
}
|
||||
const text = editor.getValue({
|
||||
lineEnding: '\n',
|
||||
preserveBOM: false
|
||||
});
|
||||
// 如果开启检查
|
||||
if (props.check) {
|
||||
if (props.language === 'json') {
|
||||
try {
|
||||
JSON.parse(text);
|
||||
} catch (e) {
|
||||
return props.modelValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
return text;
|
||||
};
|
||||
|
||||
watch(currentConfig, () => {
|
||||
if (editor) {
|
||||
editor.updateOptions(currentConfig.value);
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.language, (newVal) => {
|
||||
if (editorModel) {
|
||||
monaco.editor.setModelLanguage(editorModel, newVal);
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.theme, (newVal) => {
|
||||
if (editor) {
|
||||
monaco.editor.setTheme(newVal);
|
||||
}
|
||||
});
|
||||
|
||||
watch([() => props.width, () => props.height], () => {
|
||||
if (editor) {
|
||||
editor.layout();
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
if (newValue === getValue()) {
|
||||
return;
|
||||
}
|
||||
const readOnly = editor.getRawOptions().readOnly;
|
||||
if (readOnly) {
|
||||
// editor.setValue 和 model.setValue 都会丢失撤销栈
|
||||
editor.setValue(newValue);
|
||||
} else {
|
||||
// 有撤销栈
|
||||
const range = editorModel.getFullModelRange();
|
||||
const text = newValue;
|
||||
const op = {
|
||||
identifier: {
|
||||
major: 1,
|
||||
minor: 1
|
||||
},
|
||||
range,
|
||||
text,
|
||||
forceMoveMarkers: true
|
||||
};
|
||||
editor.executeEdits('insertValue', [op]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const initMonaco = () => {
|
||||
if (!containRef.value) {
|
||||
return;
|
||||
}
|
||||
editor = monaco.editor.create(containRef.value, {
|
||||
...currentConfig.value,
|
||||
language: props.language,
|
||||
theme: props.theme,
|
||||
value: props.modelValue
|
||||
});
|
||||
editorModel = editor.getModel();
|
||||
emit('onload', {
|
||||
monaco,
|
||||
editor,
|
||||
editorModel
|
||||
});
|
||||
editor.onDidScrollChange(
|
||||
debounce((e) => {
|
||||
emit('scrollChange', e);
|
||||
}),
|
||||
300
|
||||
);
|
||||
// 内容改变
|
||||
editor.onDidChangeModelContent(
|
||||
debounce(() => {
|
||||
emit('update:modelValue', getValue());
|
||||
}),
|
||||
100
|
||||
);
|
||||
// 焦点离开事件
|
||||
editor.onDidBlurEditorText(() => {
|
||||
// 格式化代码
|
||||
editor.trigger('anyString', 'editor.action.formatDocument');
|
||||
});
|
||||
};
|
||||
|
||||
const undo = () => {
|
||||
if (!editor) return;
|
||||
editor.trigger('anyString', 'undo');
|
||||
};
|
||||
|
||||
const redo = () => {
|
||||
if (!editor) return;
|
||||
editor.trigger('anyString', 'redo');
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存的编辑状态 ViewState
|
||||
* Yes, editor.saveViewState stores:
|
||||
cursor position
|
||||
scroll location
|
||||
folded sections
|
||||
for a certain model when it is connected to an editor instance.
|
||||
Once the same model is connected to the same or a different editor instance, editor.restoreViewState can be used to restore the above listed state.
|
||||
|
||||
There are very many things that influence how rendering occurs:
|
||||
the current theme
|
||||
the current wrapping settings set on the editor
|
||||
the enablement of a minimap, etc.
|
||||
the current language configured for a model
|
||||
etc.
|
||||
*/
|
||||
const saveViewState = () => {
|
||||
if (!editorModel) return;
|
||||
editorModel.viewState = editor.saveViewState();
|
||||
};
|
||||
|
||||
// 重置之前保存的编辑状态 ViewState
|
||||
const restoreViewState = () => {
|
||||
if (editorModel && editorModel.viewState) {
|
||||
editor.restoreViewState(editorModel.viewState);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取选择的内容
|
||||
const getValueInRange = () => {
|
||||
if (!editor) return;
|
||||
const selection = editor.getSelection();
|
||||
return selection.isEmpty()
|
||||
? null
|
||||
: editorModel.getValueInRange(selection);
|
||||
};
|
||||
|
||||
// 在编辑器选中的范围插入值
|
||||
const insertValueIntoEditor = (value) => {
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
const SelectedRange = editor.getSelection();
|
||||
let range = null;
|
||||
if (SelectedRange) {
|
||||
range = new monaco.Range(
|
||||
SelectedRange.startLineNumber,
|
||||
SelectedRange.startColumn,
|
||||
SelectedRange.endLineNumber,
|
||||
SelectedRange.endColumn
|
||||
);
|
||||
const text = value;
|
||||
const op = {
|
||||
identifier: {
|
||||
major: 1,
|
||||
minor: 1
|
||||
},
|
||||
range,
|
||||
text,
|
||||
forceMoveMarkers: true
|
||||
};
|
||||
editor.executeEdits('insertValue', [op]);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initMonaco();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 销毁 editor，进行gc
|
||||
editor && editor.dispose();
|
||||
editorModel && editorModel.dispose();
|
||||
});
|
||||
|
||||
return {
|
||||
containRef,
|
||||
style,
|
||||
undo,
|
||||
redo,
|
||||
saveViewState,
|
||||
restoreViewState,
|
||||
getValueInRange,
|
||||
insertValueIntoEditor
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.editor {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.monaco-editor.rename-box {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.glyphMarginErrorClass {
|
||||
background: #ff5500;
|
||||
}
|
||||
.contentErrorClass {
|
||||
background: rgba(#ff5500, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
packages/fes-plugin-monaco-editor/src/runtime/loader.tpl
Normal file
7
packages/fes-plugin-monaco-editor/src/runtime/loader.tpl
Normal file
@ -0,0 +1,7 @@
|
||||
import * as monaco from 'monaco-editor';
|
||||
import defaultTheme from './theme/default';
|
||||
|
||||
// 默认主题
|
||||
defaultTheme.register(monaco);
|
||||
|
||||
export default monaco;
|
||||
111
packages/fes-plugin-monaco-editor/src/runtime/theme/default.js
Normal file
111
packages/fes-plugin-monaco-editor/src/runtime/theme/default.js
Normal file
@ -0,0 +1,111 @@
|
||||
/* eslint-disable max-len */
|
||||
export default {
|
||||
register(monaco) {
|
||||
monaco.editor.defineTheme('defaultTheme', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: 'c41a16',
|
||||
token: 'string'
|
||||
},
|
||||
{
|
||||
foreground: '1c00cf',
|
||||
token: 'constant.numeric'
|
||||
},
|
||||
{
|
||||
foreground: 'aa0d91',
|
||||
token: 'keyword'
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
token: 'keyword.operator'
|
||||
},
|
||||
{
|
||||
foreground: 'aa0d91',
|
||||
token: 'constant.language'
|
||||
},
|
||||
{
|
||||
foreground: '990000',
|
||||
token: 'support.class.exception'
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
token: 'entity.name.function'
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold underline',
|
||||
token: 'entity.name.type'
|
||||
},
|
||||
{
|
||||
fontStyle: 'italic',
|
||||
token: 'variable.parameter'
|
||||
},
|
||||
{
|
||||
foreground: '007400',
|
||||
token: 'comment'
|
||||
},
|
||||
{
|
||||
foreground: 'ff0000',
|
||||
token: 'invalid'
|
||||
},
|
||||
{
|
||||
background: 'e71a1100',
|
||||
token: 'invalid.deprecated.trailing-whitespace'
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
background: 'fafafafc',
|
||||
token: 'text source'
|
||||
},
|
||||
{
|
||||
foreground: 'aa0d91',
|
||||
token: 'meta.tag'
|
||||
},
|
||||
{
|
||||
foreground: 'aa0d91',
|
||||
token: 'declaration.tag'
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
fontStyle: 'bold',
|
||||
token: 'support'
|
||||
},
|
||||
{
|
||||
foreground: 'aa0d91',
|
||||
token: 'storage'
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold underline',
|
||||
token: 'entity.name.section'
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
fontStyle: 'bold',
|
||||
token: 'entity.name.function.frame'
|
||||
},
|
||||
{
|
||||
foreground: '333333',
|
||||
token: 'meta.tag.preprocessor.xml'
|
||||
},
|
||||
{
|
||||
foreground: '994500',
|
||||
fontStyle: 'italic',
|
||||
token: 'entity.other.attribute-name'
|
||||
},
|
||||
{
|
||||
foreground: '881280',
|
||||
token: 'entity.name.tag'
|
||||
}
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#000000',
|
||||
'editor.background': '#FFFFFF',
|
||||
'editor.selectionBackground': '#BAD6FD',
|
||||
'editor.lineHighlightBackground': '#0000001A',
|
||||
'editorCursor.foreground': '#000000',
|
||||
'editorWhitespace.foreground': '#B3B3B3F4'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@fesjs/plugin-qiankun",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"description": "@fesjs/plugin-qiankun",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
@ -19,7 +19,7 @@
|
||||
"keywords": [
|
||||
"fes"
|
||||
],
|
||||
"author": "michaelxxie",
|
||||
"author": "michaelxxie、harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
@ -32,13 +32,13 @@
|
||||
"@umijs/utils": "3.3.3",
|
||||
"address": "^1.1.2",
|
||||
"lodash": "^4.17.15",
|
||||
"qiankun": "2.3.4"
|
||||
"qiankun": "^2.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"npm-run-all": "^4.1.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@webank/fes": "^2.0.0",
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@fesjs/plugin-request",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"description": "@fesjs/plugin-request",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
|
||||
@ -61,7 +61,10 @@ export default {
|
||||
name: "test",
|
||||
},
|
||||
],
|
||||
},
|
||||
},{
|
||||
name: 'editor',
|
||||
icon: "/wine-outline.svg"
|
||||
}
|
||||
],
|
||||
},
|
||||
locale: {
|
||||
@ -82,5 +85,8 @@ export default {
|
||||
dynamicImport: true,
|
||||
extraBabelPlugins: [
|
||||
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
|
||||
]
|
||||
],
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json']
|
||||
}
|
||||
};
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
"@fesjs/plugin-request": "^2.0.0",
|
||||
"@fesjs/plugin-qiankun": "^2.0.0",
|
||||
"@fesjs/plugin-sass": "^2.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^2.0.0-rc.0",
|
||||
"ant-design-vue": "2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"vuex": "^4.0.0"
|
||||
|
||||
41
packages/fes-template/src/pages/editor.vue
Normal file
41
packages/fes-template/src/pages/editor.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<monaco-editor
|
||||
ref="editorRef"
|
||||
v-model="json"
|
||||
:language="language"
|
||||
height="200px"
|
||||
check
|
||||
/>
|
||||
{{json}}
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "editor",
|
||||
"title": "monaco-editor"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
},
|
||||
setup() {
|
||||
const editorRef = ref();
|
||||
const json = ref('');
|
||||
const language = ref('json');
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
language.value = 'html';
|
||||
}, 3000);
|
||||
});
|
||||
return {
|
||||
editorRef,
|
||||
json,
|
||||
language
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user