TinyEngine is a low-code engine based on which you can build or develop low-code platforms in different domains/TinyEngine是一个低代码引擎，基于这个引擎可以构建或者开发出不同领域的低代码平台
Home Page: https://opentiny.design/tiny-engine
License: MIT License
ms-edge
v20.2.0
3.10.1
Cannot find module 'D:\opentiny\tiny-engine\mockServer\node_modules@opentiny\tiny-engine-dsl-vue\dist\tiny-engine-dsl-vue.cjs.js'. Please verify that the package.json has a valid "main" entry
pnpm dev
运行后，生产代码，然后单击“下载”按钮，右侧出现弹窗，内容为： Cannot find module 'D:\wwwroot\opentiny\tiny-engine\mockServer\node_modules@opentiny\tiny-engine-dsl-vue\dist\tiny-engine-dsl-vue.cjs.js'. Please verify that the package.json has a valid "main" entry
No response
No response
No response
chrome
v16.14.0
no
https://github.com/opentiny/tiny-engine
No response
No response
No response
当页面组件较多时，想要拖到指定位置较困难，希望提供鼠标右键剪切和粘贴功能。
官网说图元编排，流程编排，物料定制（编排），但是，咱们的工程运行起来，没有看到相应的能力啊，是相关源代码未开放，还有继续整理相关代码吗？
如图所示，预览页面的组件显示不正确，schema2code接口生成的代码如下：
问下官方开发者，需要做什么改动，才能让预览页面的组件显示正确
预览页面的组件显示正确
请问下在生产是怎么设计器的输出结果呢？
看了下preview的逻辑但是发现渲染太慢，应该达不到产品所需的渲染要求
网址打不开了
chrome
v16.14.0
no
https://github.com/opentiny/tiny-engine.git
No response
No response
No response
下载后的这个vue文件，里面涉及的一些方法像wrap啥的要怎么初始化？
怎么让这些文件跑在别的vue项目里面？
.cid和.codecheck这些与开源无关的内容是不是可以去掉啊
design-core文件目录下的vite.config.js
const config = {
base: '/design',
publicDir: path.resolve(__dirname, './public'),
resolve: {
extensions: ['.js', '.jsx', '.vue'],
alias: {}
}
可否帮忙看一下，解决一下这个控制台报错
Google Chrome 117.0.5938.92, window 10
v16.18.0
1.0.0
示例中的选择框无法选中，设置此组件的右侧属性
示例中的输入框可以选中，设置此组件的右侧属性
刚初始化项目，打开官方提供的示例页面，左侧插件--》页面管理--》静态页面--》createVm
修正此bug
No response
No response
chrome
v16.14.0
no
应该是vite配置里面的 define
define: {
'process.env': {}
}, 这个配置的目的是什么
No response
No response
No response
看了下学院课程中的物料文档，是基于在线平台的，并不是自己开发一个物料的教程，其他的也就只有个介绍、提纲，希望官方能有更详细的使用文档
比如：
windwos11
16
最新
No response
No response
No response
chrome
latest
latest
设计态，在对话框dialogBox内无法切换tab页签
No response
No response
No response
Turbo error: Invalid package dependency graph: cyclic dependency detected:
@opentiny/tiny-engine-http,@opentiny/tiny-engine-controller,@opentiny/tiny-engine-common,@opentiny/tiny-engine-canvas
后续可以提供一种方式来避免每次生产打包重复构建无改动的插件吗？或者说优化解决一下循环依赖问题
windwos11
16
最新
Cannot find module 'C:\Users\cq\Desktop\12\tiny-engine-develop\tiny-engine-develop\mockServer\node_modules@opentiny\tiny-engine-dsl-vue\dist\tiny-engine-dsl-vue.cjs.js'. Please verify that the package.json has a valid "main" entry
点击生成
No response
No response
No response
node:18.0.0
安装依赖后，项目运行后依然缺失很多依赖
目前没有对应文档，所有实践都只能摸索。
答：详情可以查看如何在设计器中引入第三方组件库
答：详情可以查看插槽的声明与使用
当前我们的出码结果依赖官方出码模板，暂时无法放置在自己项目中独立运行
第一步：下载 https://github.com/opentiny/tiny-engine-generate-preview 工程，解压
第二步：将代码下载到解压好的文件夹中（提示选择文件夹的时候，选择我们解压出来的文件夹）
第三步：用代码编辑器打开文件夹，确认出码结果，安装依赖并运行 npm run dev 启动服务，查看效果
后续相关的规划：
答：如果是想从零搭建业务组件，可以查看官方的文档教程尝试一步一步搭建（目前使用手册已更新）
如果是已有的业务组件，可以尝试通过导入第三方组件库的方式导入到左侧物料中。
答：先简要介绍一下我们工程中主要的 package：
|_ canvas 负责中间画布渲染
|_ common 公共的组件以及 metaComponent
|_ controller 公共逻辑控制层
|_ design-core 总入口
|_ http 负责 http 相关请求
|_ i18n lowcode-i18n 包裹层
|_ plugins 左侧面板相关插件
|_ settings 右侧设置面板相关组件
|_ svgs svg 封装组件
|_ theme 主题相关样式
|_ toolbars 顶部工具栏相关 package
|_ utils 公共utils
|_ vue-generator 出码package
|_ webcomponent webcomponent 封装区域大致职责划分：
主要的功能入口：
1、资源请求
// packages/design-core/src/App.vue
// 这里发起请求物料、请求数据源、请求页面等相关资源请求，很关键
useResource().fetchResource()2、画布渲染相关入口
packages
|_ canvas
|_ src
|_ components
|_ render
|_ runner.js # 用于画布相关的资源请求，预设
|_ RenderMain.js # 画布渲染的入口，同时也暴露了许多 api 供修改 schema
|_ render.js # RenderMain.js 会调用该文件的 renderer 方法，递归渲染 schema3、画布选中后，如何关联渲染右侧属性面板？
// DesignCanvas.vue
// 画布中节点选中后，会触发该方法
const nodeSelected = (node, parent, type) => {
const { toolbars } = useLayout().layoutState
if (type !== 'clickTree') {
useLayout().closePlugin()
}
// 动态计算该方法需要渲染的 属性面板
useProperties().getProps(node, parent)
// 设置当前 schema
useCanvas().setCurrentSchema(node)
footData.value = getNodePath(node?.id)
toolbars.visiblePopover = false
}// settings/props/src/Main.vue
<template>
<!-- 在属性面板渲染设置属性的入口 -->
<config-render :data="properties">
<template #prefix="{ data }">
<block-link-field v-if="isBlock" :data="data"></block-link-field>
</template>
</config-render>
</template>
<script>
// 选中之后，经过 getProps 的计算，我们会得到 properties，渲染在属性面板
const { properties } = useProperty({ pageState })
</script>上面就是一些简单的入口简介，后续，我们会增加更多详细的架构原理、功能设计相关的文档，敬请期待
答：我们目前有内置的排版组件——行列容器，可以通过简单的剪切方式实现轻松的 flex 布局。
答：这个问题要分多种情况讨论，
设计器开发：
可以拉下来源代码，按照原来静态资源图片等分类，放置进去要用的图片，在开发设计器的时候可以直接使用。
页面运行态：
可以通过 <input type="file">标签选中你要的静态资源，这部分的逻辑完全取决于用户
页面设计态：
低代码引擎在开源之前是有这样的功能的，但是为了开源的合规，屏蔽了该功能。因为在设计态想用到静态资源的话，要选中静态资源，并上传到公司的文件管理系统，然后文件系统返回静态资源地址，然后再展示在画布中。如果用户想要这样的功能，只需要开发一个文件上传按钮，并把上传的内容放置用户的文件管理系统。
答：可以关注一下以下 bundle.json 这个文件的设置是否正确，尤其是 widget.component 这个字段
以下为 bundle.json 这个文件的节选：
{
"property": "text",
"label": {
"text": {
"zh_CN": "按钮名称",
"en_US": "Button Name"
}
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"widget": {
"component": "MetaBindI18n",
"props": {}
},
"description": {
"zh_CN": "按钮名称",
"en_US": "Name of the button."
}
}答：实现的方式是多种的，
方式一：假如 A（输入框）与 B（显示框）联动，那么可以给 A 绑定一个 change 事件，直接影响 B的显示
方式二：给 B 绑定一个值，通过影响 B 的值，从而影响 B 的显示。
方式三：通过 watch 监听
答：参照此issue #30 解决
答：原来的.net 系统可以继续独立运行，当需要跳转到低代码系统时候。从原来的.net系统带出关键参数。如 projectId, itemId, processId 等，通过URL的传参形式：https://xxxxxxxxxxx?projectId=1111&itemId=2222222&processId=33333333。 跳转到低代码系统后，在代码系统初始化时候获取URL的参数，通过服务端API接口获取到相应的流程、页面、物料等等信息。通过低代码系统搭建页面会产生schema或者源代码，在点击保存按钮的时候可以把想要的产物保存回来原来的.net系统中。
答：目前服务端有两套源代码，一套技术栈是 node.js ，一套技术栈是 Java。因为要从公司流程流程审批、技术评估还有后面的迭代演进等维度考虑，目前还不知最终会开源哪种技术栈的服务端。大家敬请期待12月30号左右的公告
答：目前暂不支持，后续有在规划增加 typescript 的支持，大家敬请期待
答：目前只有一个开源版本的代码，没有商业版本。至于商业技术上的支持，可以找到 OpenTiny 的小助手沟通，详细沟通一下贵司具体需要的商业支持。
答：AI 能力目前已经在 TinyEngine 官网部署，当前采用的大模型是文心一言，通过 AI生成代码->生成 AST->页面 schema->展示在页面->下载源代码 ，后续会切回华为的盘古大模型。现在 AI 能力的取决于文心一言生成的代码。同时我们也通过数据和资源的不断投入在持续训练我们的 AI 能力，大家敬请期待 AI 能力的持续迭代。
答：后端的开发与技术栈无关，是可以采用任意的技术栈的。我们提供了所有后端接口的文档，只需要按照设计器的文档来，给出对应接口的出入参即可。
答：TinyEngine 目前是用到的物料是已开源的 TinyVue 组件库，欢迎大家使用~
现在的预览好像是根据源码在线编译，这样速度太慢了，请问下有更好的方式嘛？
有这样一种场景，将页面的json存储，前端直接解析json渲染出来
更好的方式？
谷歌 119.0.6045.105
18.18.2
~3.10.0
123
1、pnpm run dev
2、点击资源管理
2.1、新建工具类
2.2、名称：vue-router
2.3、包名：vue-router
2.4、导出名称：useRouter
2.5、是否解构：是
2.6、保存（保存的时候列表返回没有我创建的工具类）
3、进入页面管理（当前页面）
3.1、添加生命周期（function onMounted() {console.log(this.utils)} ）
3.2、保存
4、 预览
能按逻辑正常添加、运行
工具类没有添加成功
No response
tiny-engine\mockServer> npm install
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@opentiny%2flowcode-dsl-vue - Not found
Google Chrome 117.0.5938.92, window 10
v16.18.0
tiny-engine latest
TinyButtonGroup中添加数据项后，渲染错乱：
希望官方解决一下
No response
No response
No response
tiny-engine只有前端开源吗？对应的后端是否没有开源
谷歌
latest
latest
1
2
No response
No response
如题
谷歌浏览器
17
3.1.10
设计器新增数据源后，在线点击发送请求能够调通接口，将数据源绑定到表格的fetchData属性后，预览时报错，点击右上角出码后本地运行也调不了接口。预览提示fetchData3.api.apply is not a function
设计器新增数据源后，在线点击发送请求能够调通接口，将数据源绑定到表格的fetchData属性后，预览时报错，点击右上角出码后本地运行也调不了接口。预览提示fetchData3.api.apply is not a function
希望能否正常使用数据源
No response
No response
chrome
latest
latest
顶部工具栏画布设置选择pc端宽度设置为1440px后，回车确认会自动切换为大屏下且宽度被设置成了1920px
希望画布实际宽度及输入框显示的是我输入的值。
No response
No response
谷歌浏览器
17
3.10.1
...
希望当页面管理选择某一个页面后，即代表当前的操作时针对这个页面.vue进行操作。即使没有选中画布的情况下，点击左侧的变量或者JS按钮进行操作时，连续添加变量或者编辑JS脚本，也能正常保存编辑后的数据。而不是每次操作前都要点一下画布（选择body或者任意物流）才行，这样用户体验很差，用起来也很麻烦。点击设计器右上角的保存按钮时，会自动让鼠标在画布中的已选中物料失去焦点，因此往往在页面出现添加变量后，点击保存，后续再继续添加变量时，就实际上没保存起来。
希望当页面管理选择某一个页面后，即代表当前的操作时针对这个页面.vue进行操作。即使没有选中画布的情况下，点击左侧的变量或者JS按钮进行操作时，连续添加变量或者编辑JS脚本，也能正常保存编辑后的数据。而不是每次操作前都要点一下画布（选择body或者任意物流）才行，这样用户体验很差，用起来也很麻烦。点击设计器右上角的保存按钮时，会自动让鼠标在画布中的已选中物料失去焦点，因此往往在页面出现添加变量后，点击保存，后续再继续添加变量时，就实际上没保存起来。
No response
No response
chrome
latest
latest
先用Collection绑定一个数据源，然后再用tinyGrid与collection绑定。然后保存预览，会出现报错。
希望可以正常绑定。
No response
No response
您好，请问生态中心有计划开源吗？
关于导入第三方组件问题：
1.关于如何导入第三方组件不使用npm.script方式导入，比如
"package": "@huawei/tiny-vue3", // npm 包名
"version": "0.1.16", // 版本号
"destructuring": true, // 是否解构
"exportName": "Button" // npm package 导出名
我想用这种方式导用第三方比如element-plus或antd vue 有没有文档说明？
关于导入第三方组件问题：
1.关于如何导入第三方组件不使用npm.script方式导入，比如
"package": "@huawei/tiny-vue3", // npm 包名
"version": "0.1.16", // 版本号
"destructuring": true, // 是否解构
"exportName": "Button" // npm package 导出名
我想用这种方式导用第三方比如element-plus或antd vue 有没有文档说明？
官方大佬们好：
能否写文档的时候把下面两个写进去，或者录制视频也行，谢谢！
（1）教会我们使用这个平台搭建一个完成的增删改查例子；
（2）怎样扩展左侧组件，比如用户选择组件、单位选择组件，然后form表单里面使用，拖入这2个控件，可以弹出dialog框选择用户和单位，点击确定后回填到表单上input框上。
无
在当前的引擎当中，如何使用引入其他的UI组件，
如果我想在当前的低代码平台添加 Element-ui 或者 Ant-desgin 或者自己封装的组件改如何添加到 低代码平台的。
恳请出一个示例详情，万分感谢
在当前的引擎当中，如何使用引入其他的UI组件，
如果我想在当前的低代码平台添加 Element-ui 或者 Ant-desgin 或者自己封装的组件改如何添加到 低代码平台的。
恳请出一个示例详情，万分感谢
比如ant-design-vue，引入https://cdn.jsdelivr.net/npm/[email protected]/+esm，还有naive-ui，引入https://unpkg.com/naive-ui@version/dist/index.prod.js，但是组件无法正常展示。
希望能够支持其他的ui组件。
chrome
17
3.1.10
右侧配置面板，给物料设置内外边距时，只有点中中间的数字才能弹出margin框进行设置，建议改成选中该区域就能够弹出来右侧配置面板，给物料设置内外边距时，只有点中中间的数字才能弹出margin框进行设置，建议改成选中该区域就能够弹出来
右侧配置面板，给物料设置内外边距时，只有点中中间的数字才能弹出margin框进行设置，建议改成选中该区域就能够弹出来
建议改成选中该区域就能够弹出来设置边距的面板，提高配置效率
No response
No response
chorme
latest
latest
如题
No response
No response
No response
chrome
latest
latest
按照文档引入ElInput，在设计器中可以显示，点预览时无法显示并有异常信息
No response
No response
No response
ch
17
3.1.10
左侧面板点击弹出代码编辑器进行编写JS脚本后，点击保存，设计器会自动格式化，但一个函数里面结尾的花括号，当大于1个时，花括号被自动挤到同一行，每次进入设计器后都要手动右键进行Prettier一下，不然难以阅读。
左侧面板点击弹出代码编辑器进行编写JS脚本后，点击保存，设计器会自动格式化，但一个函数里面结尾的花括号，当大于1个时，花括号被自动挤到同一行，每次进入设计器后都要手动右键进行Prettier一下，不然难以阅读。
建议优化下编辑器，在点击保存后，下次打开脚本框，不要把结尾的花括号}}}都挤到同一行，能够保存右键prettier后的代码风格。
No response
No response
nodejs v18.18.0
latest
latest
about:srcdoc:160 [Vue warn]: Failed to resolve component: canvas-col
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at
CanvasRowColContainer.vue component cannot find the label when previewing after dragging
No response
No response
No response
重现方法：
这个地方取的是第一个子组件的名字，这种情况下是空的。
mac
16
latest
无
No response
No response
No response
在物料区添加组件是否都要手动在packages/settings/design/src/schemas添加属性配置，能否自动生成？
目前基于Img组件添加了一个简单的自定义组件 我要在bundle.json复制一份img的属性来拓展，这份组件属性配置每次都要手写？
是否项目中有api可以生成组建的配置属性？
很关注本项目，希望尽快出详细的官方文档
chrome 118
node 16.15.0
@opnetiny/vue 3.10.21
拖入对话框，打开插槽
No response
No response
No response
npm ERR! code 1
npm ERR! path /Users/admin/tiny-engine/src/i18n/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh -c -- node install.js
npm ERR! node:internal/errors:857
npm ERR! const err = new Error(message);
npm ERR! ^
npm ERR!
npm ERR! Error: Command failed: /Users/admin/tiny-engine/src/i18n/node_modules/esbuild/bin/esbuild --version
npm ERR! at checkExecSyncError (node:child_process:861:11)
npm ERR! at Object.execFileSync (node:child_process:896:15)
npm ERR! at validateBinaryVersion (/Users/admin/tiny-engine/src/i18n/node_modules/esbuild/install.js:89:32)
npm ERR! at /Users/admin/tiny-engine/src/i18n/node_modules/esbuild/install.js:242:5 {
npm ERR! status: null,
npm ERR! signal: 'SIGKILL',
npm ERR! output: [ null, Buffer(0) [Uint8Array] [], Buffer(0) [Uint8Array] [] ],
npm ERR! pid: 94608,
npm ERR! stdout: Buffer(0) [Uint8Array] [],
npm ERR! stderr: Buffer(0) [Uint8Array] []
npm ERR! }
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/admin/.npm/_logs/2023-09-27T01_12_43_237Z-debug-0.log
node版本v16.20.2
通过组件扩展示例代码，一步一步代码的讲解，让我们可以跟着做下来，能在低代码平台上运行的，这样便于理解。谢谢了！
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.