鱼泡前端 GUI 平台

统一配置文件
RN 热更新
Iconfont
模板管理

`yp-gui.config.js`

我们约定在工作区根目录下的 yp-gui.config.js 为扩展功能的导出文件。

module.exports = {
  codePush: {
    // code-push 服务器地址
    serverUrl: "http://yppush.cdqlkj.cn",
    // 发布成功的回调，data为表单内容
    onSuccess: (data) => {},
  },
  iconfont: {
    // TODO 是否需要上传oss
    needOss: false,
    // RN项目需要 -> 生成的组件是否是ts
    use_typescript: true,
    // RN项目需要 -> 存储区，
    save_dir: join(__dirname, "src/components/base/iconfont"),
    // iconfont 前缀
    trim_icon_prefix: "icon",
    // icon 默认大小
    default_icon_size: 50,
    // 暴露自定义接口，好对接oss自动上传
    // @params resource: 资源绝对路径数组 如： /Users/xxx/yyy/iconfont.js /Users/xxx/yyy/iconfont.css
    // @return 返回一个Promise 告诉插件删除临时资源
    onResource: (resource: string[]) => {
      const js = resource.find((e) => e.indexOf("iconfont.js"));
      const source = fs.readFileSync(js);
      // do something
      return Promise.resolve();
    },
  },
};

`RN 热更新`

基础使用

此插件会判断当前工作区是否为 RN 项目，是才会提供菜单。
基础使用并不复杂，点击相应菜单即可，如未登录，会在浏览器打开登录页，登录成功后将 token 填入 vscode 弹框中即可。

注意：package.json 中 type 为 module 时此功能将不支持。

发布自定义表单

除默认提供的表单选项外，您还可以添加额外的表单选项，只需在 yp-gui.config.js 文件下导出 codePush.extraForm ，如下：

const extraForm = [
  {
    type: "Input",
    formItem: { name: "custom", label: "自定义" },
    formChild: {},
  },
];

module.exports = {
  codePush: { extraForm },
};

我们内部使用的是 antd ，字段对应 antd 的 API，具体如下：

type 表单的类型，Input 对应 Input，依此类推，目前仅支持：
- Input
- Select
- Switch
formChild 对应具体表单项的 Props，如 type 为 Input 则对应 Input Props。
formItem 对应 Form.Item Props。

发布成功 hook

发布成功后可执行您的函数，只需在 yp-gui.config.js 文件下导出 codePush.onSuccess ，如下：

function onSuccess(data) {
  console.log(data);
  // 执行一些操作，如飞书群通知
}

module.exports = {
  codePush: { onSuccess },
};

onSuccess 接受一个对象参数，值为您发布时填入的表单值，包括您添加的自定义表单，其中默认表单的字段如下： | 字段名称 | 类型 | 含义 | | --------- | ------- | ------------ | | platform | string | 平台 | | app | string | App | | env | string | 环境 | | version | string | 版本号 | | mandatory | boolean | 是否强制更新 | | remark | string | 备注 | | ... | T | 您的自定义表单 |