代码组件

npm i -g functorz
# 如遇网络缓慢可切换源并强制重装：
# npm i -g functorz --registry=https://registry.npmmirror.com --force

functorz --help
 
zvm cli 0.4.7
 
Usage: functorz [options] [command]
 
Options:
  -h, --help                      display help for command
 
Commands:
  create [options] <项目名>          初始化项目。会在登录的账户下创建关联的自定义组件项目，并且在本地初始化一个模板项目。
  publish [options]               发布项目。
  reinit [options]                重新注册项目ID，将本地项目重新发布为自己账号下的一个新项目。
  reset [options]                 创建模板项目。在当前目录下重置一个模板项目。
  signin [options] <用户名/邮箱> <密码>  登录到Zion平台，目前仅支持用户名密码/邮箱密码方式登录。
  signout [options]               退出，删除目前登录信息。
  help [command]                  display help for command

> functorz signin 你的邮箱账号 你的密码

> functorz signin 你的邮箱账号 你的密码
 
zvm cli 0.4.7
 
ℹ 登录
✔ 登录成功

# create 项目名
> functorz create test

> functorz create test
 
zvm cli 0.4.7
 
ℹ 项目初始化
✔ 准备工作目录完成
✔ 获取最新模板完成
✔ 生成项目完成
✔ 在Zion平台注册项目完成
✔ 关联远程项目完成
✔ 项目初始化完成

> cd test
> npm install

import { ExclamationCircleFilled } from '@ant-design/icons'
import { Button, Modal } from 'antd'
import { EventHandler } from 'zvm-code-context' // 暴露宿主项目上下文的包，里面还暴露了一个很重要的 API，useAppContext，具体可参考模板项目和下文。
 
// 组件的属性数据，右边栏配置，由外向内传递。这里暴露了三个右边栏的数据配置项，分别是 buttonTitle、modalTitle、modalContent。
export interface ConfirmModalPropData {
  buttonTitle: string
  modalTitle: string
  modalContent?: string
}
 
// 组件的状态，右边栏配置，由内向外传递，可供宿主项目的其他组件绑定。
export interface ConfirmModalStateData {}
 
// 组件可供绑定的事件，类型目前是固定的，只能是 EventHandler。
export interface ConfirmModalEvent {
  onConfirm?: EventHandler
  onCancel?: EventHandler
}
 
// 固定写法。运行时，宿主项目将通过以下三个属性传递进来。
export interface ConfirmModalProps {
  propData: ConfirmModalPropData
  propState: ConfirmModalStateData
  event: ConfirmModalEvent
}
 
// 组件逻辑。
export function ConfirmModal({ propData, event }: ConfirmModalProps) {
  // 确认的事件逻辑。
  const showConfirm = () => {
    Modal.confirm({
      title: propData.modalTitle || '', // 绑定宿主项目传进来的弹窗标题内容。
      icon: <ExclamationCircleFilled />, 
      content: propData.modalContent || '', // 绑定宿主项目传进来的弹窗主内容。
      onOk() {
        event.onConfirm?.call(null) // 调用宿主项目绑定的确认事件处理逻辑。
      },
      onCancel() {
        event.onCancel?.call(null) // 调用宿主项目绑定的取消事件处理逻辑。
      },
    })
  }
 
  return (
    <Button type="primary" onClick={showConfirm}>
      {propData.buttonTitle || ''} {/* 绑定宿主项目的按钮文本内容。*/}
    </Button>
  )
}

阅读“https://docs.functorz.com/community/code_component/”，然后完全按照Zion平台的规范编写一个 React 组件。
组件名为 ConfirmModal，功能是弹出确认对话框。组件需要支持以下功能：
1. 组件属性包括：
  - 按钮文本
  - 弹窗标题
  - 弹窗内容
2. 组件状态包括：
  - 确认事件处理函数
  - 取消事件处理函数
3. 组件需要使用 Ant Design 的 Modal 和 Button 组件
4. 组件需要导出以下类型：
  - ConfirmModalPropData
  - ConfirmModalStateData
  - ConfirmModalEvent
  - ConfirmModalProps
请使用 TypeScript 编写，并确保组件符合 Zion 平台的代码组件规范。

npm run dev # 启动本地开发服务，可以为构建产物支持 http 访问。默认启动 5819 端口。

> npm run preview # 本地启动一个静态资源服务器，可以为构建产物支持 http 访问。默认启动 6326 端口。
> npm run watch:build  # 监听本地源代码发生的变化，当编辑保存后，自动运行 npm run build。
# 注意如果不启动 watch:build 命令，可以在编辑后手动运行 npm run build。效果一致。

// 某组件内
import { useAppContext } from 'zvm-code-context'
 
const { component, discover, query, navigate, globalData, pageData } =
  useAppContext()
 
// ...

# 必须在项目的目录下运行
> functorz publish
 
zvm cli 0.4.7
 
ℹ 发布项目
✔ 扫描组件信息完成
✔ 组件解析完成
✔ 项目构建完成
✔ 注册版本信息中0.0.2
ℹ 产物上传开始
ℹ   ConfirmModal-DkZp9JXU.js
ℹ   __federation_expose_Main-DxfqaaDF.js
ℹ   __federation_fn_import-lyDSGtOx.js
ℹ   __federation_shared_classnames-DNBU_3PZ.js
ℹ   __federation_shared_constate-BXZUjDp9.js
ℹ   __federation_shared_lodash-CMjxsLue.js
ℹ   __federation_shared_moment-CEY8C7XE.js
ℹ   __federation_shared_react-DO25RkNm.js
ℹ   __federation_shared_react-dom-ChyTJqHm.js
ℹ   __federation_shared_react-router-dom-BwChNopu.js
ℹ   __federation_shared_zvm-code-context-DJ2L4k_6.js
ℹ   _commonjsHelpers-BFTU3MAI.js
ℹ   index-BBIatVb0.js
ℹ   remoteEntry.js
ℹ   style-CLbg9otl.css
✔ 产物上传完成
✔ 发布项目成功