+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue
new file mode 100644
index 000000000..c3dfa7f81
--- /dev/null
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue
@@ -0,0 +1,408 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/generator/expected/appdemo01/vite.config.js b/packages/vue-generator/test/testcases/generator/expected/appdemo01/vite.config.js
new file mode 100644
index 000000000..e1e57978b
--- /dev/null
+++ b/packages/vue-generator/test/testcases/generator/expected/appdemo01/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src')
+ }
+ },
+ plugins: [vue(), vueJsx()],
+ define: {
+ 'process.env': { ...process.env }
+ },
+ build: {
+ minify: true,
+ commonjsOptions: {
+ transformMixedEsModules: true
+ },
+ cssCodeSplit: false
+ }
+})
diff --git a/packages/vue-generator/test/testcases/generator/generateApp.test.js b/packages/vue-generator/test/testcases/generator/generateApp.test.js
new file mode 100644
index 000000000..8ee64baee
--- /dev/null
+++ b/packages/vue-generator/test/testcases/generator/generateApp.test.js
@@ -0,0 +1,43 @@
+import { expect, test, describe } from 'vitest'
+import path from 'path'
+import fs from 'fs'
+import dirCompare from 'dir-compare'
+import { generateApp } from '@/generator/generateApp'
+import { appSchemaDemo01 } from './mockData'
+import { logDiffResult } from '../../utils/logDiffResult'
+
+describe('generate whole application', () => {
+ test('should not throw error', async () => {
+ const instance = generateApp()
+
+ const res = await instance.generate(appSchemaDemo01)
+ const { genResult } = res
+
+ // 写入文件
+ genResult.forEach(({ fileName, path: filePath, fileContent }) => {
+ fs.mkdirSync(path.resolve(__dirname, `./result/appdemo01/${filePath}`), { recursive: true })
+ fs.writeFileSync(
+ path.resolve(__dirname, `./result/appdemo01/${filePath}/${fileName}`),
+ // 这里需要将换行符替换成 CRLF 格式的
+ fileContent.replace(/\r?\n/g, '\r\n')
+ )
+ })
+
+ const compareOptions = {
+ compareContent: true,
+ ignoreLineEnding: true,
+ ignoreAllWhiteSpaces: true,
+ ignoreEmptyLines: true
+ }
+
+ const path1 = path.resolve(__dirname, './expected/appdemo01')
+ const path2 = path.resolve(__dirname, './result/appdemo01')
+
+ // 对比文件差异
+ const diffResult = dirCompare.compareSync(path1, path2, compareOptions)
+
+ logDiffResult(diffResult)
+
+ expect(diffResult.same).toBe(true)
+ })
+})
diff --git a/packages/vue-generator/test/testcases/generator/mockData.js b/packages/vue-generator/test/testcases/generator/mockData.js
new file mode 100644
index 000000000..6067bbb55
--- /dev/null
+++ b/packages/vue-generator/test/testcases/generator/mockData.js
@@ -0,0 +1,2135 @@
+export const appSchemaDemo01 = {
+ dataSource: {
+ list: [
+ {
+ id: 132,
+ name: 'getAllComponent',
+ data: {
+ data: [],
+ type: 'array'
+ },
+ tpl: null,
+ app: '918',
+ desc: null,
+ created_at: '2022-06-28T06:26:26.000Z',
+ updated_at: '2022-06-28T07:02:30.000Z'
+ },
+ {
+ id: 133,
+ name: 'getAllList',
+ data: {
+ columns: [
+ {
+ name: 'test',
+ title: '测试',
+ field: 'test',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'test1',
+ title: '测试1',
+ field: 'test1',
+ type: 'string',
+ format: {}
+ }
+ ],
+ type: 'array',
+ data: [
+ {
+ test: 'test1',
+ test1: 'test1',
+ _id: '341efc48'
+ },
+ {
+ test: 'test2',
+ test1: 'test1',
+ _id: 'b86b516c'
+ },
+ {
+ test: 'test3',
+ test1: 'test1',
+ _id: 'f680cd78'
+ }
+ ],
+ options: {
+ uri: '',
+ method: 'GET'
+ },
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function dataHandler(data) { \n return data \n}'
+ },
+ willFetch: {
+ type: 'JSFunction',
+ value: 'function willFetch(option) {\n return option \n}'
+ },
+ shouldFetch: {
+ type: 'JSFunction',
+ value: 'function shouldFetch(option) {\n return true \n}'
+ },
+ errorHandler: {
+ type: 'JSFunction',
+ value: 'function errorHandler(err) {}'
+ }
+ },
+ tpl: null,
+ app: '918',
+ desc: null,
+ created_at: '2022-06-28T07:32:16.000Z',
+ updated_at: '2023-01-19T03:29:11.000Z'
+ },
+ {
+ id: 135,
+ name: 'getAllMaterialList',
+ data: {
+ columns: [
+ {
+ name: 'id',
+ title: 'id',
+ field: 'id',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'name',
+ title: 'name',
+ field: 'name',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'framework',
+ title: 'framework',
+ field: 'framework',
+ type: 'string',
+ format: {
+ required: true
+ }
+ },
+ {
+ name: 'components',
+ title: 'components',
+ field: 'components',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'content',
+ title: 'content',
+ field: 'content',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'url',
+ title: 'url',
+ field: 'url',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'published_at',
+ title: 'published_at',
+ field: 'published_at',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'created_at',
+ title: 'created_at',
+ field: 'created_at',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'updated_at',
+ title: 'updated_at',
+ field: 'updated_at',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'published',
+ title: 'published',
+ field: 'published',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'last_build_info',
+ title: 'last_build_info',
+ field: 'last_build_info',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'tenant',
+ title: 'tenant',
+ field: 'tenant',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'version',
+ title: 'version',
+ field: 'version',
+ type: 'string',
+ format: {}
+ },
+ {
+ name: 'description',
+ title: 'description',
+ field: 'description',
+ type: 'string',
+ format: {}
+ }
+ ],
+ type: 'array',
+ data: [
+ {
+ id: 'f37123ec',
+ url: '',
+ name: 'ng-material',
+ tenant: '',
+ content: '',
+ version: '1.0.0',
+ framework: 'Angular',
+ published: '',
+ components: '',
+ created_at: '2021-11-02T11:32:22.000Z',
+ updated_at: '2021-11-02T11:32:22.000Z',
+ description: 'angular组件库物料',
+ published_at: '2021-11-02T11:32:22.000Z',
+ last_build_info: '',
+ _id: '2a23e653'
+ },
+ {
+ id: 'f37123ec',
+ url: '',
+ name: 'ng-material',
+ tenant: '',
+ content: '',
+ version: '1.0.0',
+ framework: 'Angular',
+ published: '',
+ components: '',
+ created_at: '2021-11-02T11:32:22.000Z',
+ updated_at: '2021-11-02T11:32:22.000Z',
+ description: 'angular组件库物料',
+ published_at: '2021-11-02T11:32:22.000Z',
+ last_build_info: '',
+ _id: '06b253be'
+ },
+ {
+ id: 'f37123ec',
+ url: '',
+ name: 'ng-material',
+ tenant: '',
+ content: '',
+ version: '1.0.0',
+ framework: 'Angular',
+ published: '',
+ components: '',
+ created_at: '2021-11-02T11:32:22.000Z',
+ updated_at: '2021-11-02T11:32:22.000Z',
+ description: 'angular组件库物料',
+ published_at: '2021-11-02T11:32:22.000Z',
+ last_build_info: '',
+ _id: 'c55a41ed'
+ },
+ {
+ id: 'f37123ec',
+ url: '',
+ name: 'ng-material',
+ tenant: '',
+ content: '',
+ version: '1.0.0',
+ framework: 'Angular',
+ published: '',
+ components: '',
+ created_at: '2021-11-02T11:32:22.000Z',
+ updated_at: '2021-11-02T11:32:22.000Z',
+ description: 'angular组件库物料',
+ published_at: '2021-11-02T11:32:22.000Z',
+ last_build_info: '',
+ _id: 'f37123ec'
+ },
+ {
+ id: '7a63c1a2',
+ url: '',
+ name: 'tiny-vue',
+ tenant: '',
+ content: 'Tiny Vue物料',
+ version: '1.0.0',
+ framework: 'Vue',
+ published: '',
+ components: '',
+ created_at: '',
+ updated_at: '',
+ description: 'Tiny Vue物料',
+ published_at: '',
+ last_build_info: '',
+ _id: '7a63c1a2'
+ }
+ ],
+ options: {
+ uri: '',
+ method: 'GET'
+ },
+ willFetch: {
+ type: 'JSFunction',
+ value: 'function willFetch(option) {\n return option \n}'
+ },
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function dataHandler(data) { \n return data \n}'
+ },
+ shouldFetch: {
+ type: 'JSFunction',
+ value: 'function shouldFetch(option) {\n return true \n}'
+ },
+ errorHandler: {
+ type: 'JSFunction',
+ value: 'function errorHandler(err) {}'
+ }
+ },
+ tpl: null,
+ app: '918',
+ desc: null,
+ created_at: '2022-06-29T00:57:50.000Z',
+ updated_at: '2023-05-15T02:37:12.000Z'
+ },
+ {
+ id: 139,
+ name: 'treedata',
+ data: {
+ data: [
+ {
+ label: 'level111',
+ value: '111',
+ id: 'f6609643',
+ pid: '',
+ _RID: 'row_4'
+ },
+ {
+ label: 'level1-son',
+ value: '111-1',
+ id: 'af1f937f',
+ pid: 'f6609643',
+ _RID: 'row_5'
+ },
+ {
+ label: 'level222',
+ value: '222',
+ id: '28e3709c',
+ pid: '',
+ _RID: 'row_6'
+ },
+ {
+ label: 'level2-son',
+ value: '222-1',
+ id: '6b571bef',
+ pid: '28e3709c',
+ _RID: 'row_5'
+ },
+ {
+ id: '6317c2cc',
+ pid: 'fdfa',
+ label: 'fsdfaa',
+ value: 'fsadf',
+ _RID: 'row_6'
+ },
+ {
+ id: '9cce369f',
+ pid: 'test',
+ label: 'test1',
+ value: '001'
+ }
+ ],
+ type: 'tree'
+ },
+ tpl: null,
+ app: '918',
+ desc: null,
+ created_at: '2022-06-30T06:13:57.000Z',
+ updated_at: '2022-07-29T03:14:55.000Z'
+ },
+ {
+ id: 150,
+ name: 'componentList',
+ data: {
+ data: [
+ {
+ _RID: 'row_1',
+ name: '表单',
+ isSelected: 'true',
+ description: '由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据'
+ },
+ {
+ name: '按钮',
+ isSelected: 'false',
+ description: '常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型'
+ },
+ {
+ id: '490f8a00',
+ _RID: 'row_3',
+ name: '表单项',
+ framework: '',
+ materials: '',
+ description: 'Form 组件下的 FormItem 配置'
+ },
+ {
+ id: 'c259b8b3',
+ _RID: 'row_4',
+ name: '开关',
+ framework: '',
+ materials: '',
+ description: '关闭或打开'
+ },
+ {
+ id: '083ed9c7',
+ _RID: 'row_5',
+ name: '互斥按钮组',
+ framework: '',
+ materials: '',
+ description: '以按钮组的方式出现，常用于多项类似操作'
+ },
+ {
+ id: '09136cea',
+ _RID: 'row_6',
+ name: '提示框',
+ framework: '',
+ materials: '',
+ description: 'Popover可通过对一个触发源操作触发弹出框,支持自定义弹出内容，延迟触发和渐变动画'
+ },
+ {
+ id: 'a63b57d5',
+ _RID: 'row_7',
+ name: '文字提示框',
+ framework: '',
+ materials: '',
+ description:
+ '动态显示提示信息，一般通过鼠标事件进行响应；提供 warning、error、info、success 四种类型显示不同类别的信'
+ },
+ {
+ id: 'a0f6e8a3',
+ _RID: 'row_8',
+ name: '树',
+ framework: '',
+ materials: '',
+ description:
+ '可进行展示有父子层级的数据，支持选择，异步加载等功能。但不推荐用它来展示菜单，展示菜单推荐使用树菜单'
+ },
+ {
+ id: 'd1aa18fc',
+ _RID: 'row_9',
+ name: '分页',
+ framework: '',
+ materials: '',
+ description: '当数据量过多时，使用分页分解数据，常用于 Grid 和 Repeater 组件'
+ },
+ {
+ id: 'ca49cc52',
+ _RID: 'row_10',
+ name: '表格',
+ framework: '',
+ materials: '',
+ description: '提供了非常强大数据表格功能，可以展示数据列表，可以对数据列表进行选择、编辑等'
+ },
+ {
+ id: '4e20ecc9',
+ name: '搜索框',
+ framework: '',
+ materials: '',
+ description: '指定条件对象进行搜索数据'
+ },
+ {
+ id: '6b093ee5',
+ name: '折叠面板',
+ framework: '',
+ materials: '',
+ description: '内容区可指定动态页面或自定义 html 等，支持展开收起操作'
+ },
+ {
+ id: '0a09abc0',
+ name: '对话框',
+ framework: '',
+ materials: '',
+ description: '模态对话框，在浮层中显示，引导用户进行相关操作'
+ },
+ {
+ id: 'f814b901',
+ name: '标签页签项',
+ framework: '',
+ materials: '',
+ description: 'tab页签'
+ },
+ {
+ id: 'c5ae797c',
+ name: '单选',
+ framework: '',
+ materials: '',
+ description: '用于配置不同场景的选项，在一组备选项中进行单选'
+ },
+ {
+ id: '33d0c590',
+ _RID: 'row_13',
+ name: '弹出编辑',
+ framework: '',
+ materials: '',
+ description:
+ '该组件只能在弹出的面板中选择数据，不能手动输入数据；弹出面板中显示为 Tree 组件或者 Grid 组件'
+ },
+ {
+ id: '16711dfa',
+ _RID: 'row_14',
+ name: '下拉框',
+ framework: '',
+ materials: '',
+ description: 'Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件'
+ },
+ {
+ id: 'a9fd190a',
+ _RID: 'row_15',
+ name: '折叠面板项',
+ framework: '',
+ materials: '',
+ description: '内容区可指定动态页面或自定义 html 等，支持展开收起操作'
+ },
+ {
+ id: 'a7dfa9ec',
+ _RID: 'row_16',
+ name: '复选框',
+ framework: '',
+ materials: '',
+ description: '用于配置不同场景的选项，提供用户可在一组选项中进行多选'
+ },
+ {
+ id: 'd4bb8330',
+ name: '输入框',
+ framework: '',
+ materials: '',
+ description: '通过鼠标或键盘输入字符'
+ },
+ {
+ id: 'ced3dc83',
+ name: '时间线',
+ framework: '',
+ materials: '',
+ description: '时间线'
+ }
+ ],
+ type: 'array',
+ columns: [
+ {
+ name: 'name',
+ type: 'string',
+ field: 'name',
+ title: 'name',
+ format: {
+ max: 0,
+ min: 0,
+ dateTime: false,
+ required: false,
+ stringType: ''
+ }
+ },
+ {
+ name: 'description',
+ type: 'string',
+ field: 'description',
+ title: 'description',
+ format: {
+ max: 0,
+ min: 0,
+ dateTime: false,
+ required: false,
+ stringType: ''
+ }
+ },
+ {
+ name: 'isSelected',
+ type: 'string',
+ field: 'isSelected',
+ title: 'isSelected',
+ format: {
+ max: 0,
+ min: 0,
+ dateTime: false,
+ required: false,
+ stringType: ''
+ }
+ }
+ ],
+ options: {
+ uri: 'http://localhost:9090/assets/json/bundle.json',
+ method: 'GET'
+ },
+ willFetch: {
+ type: 'JSFunction',
+ value: 'function willFetch(option) {\n return option \n}'
+ },
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function dataHandler(data) { \n return data \n}'
+ },
+ shouldFetch: {
+ type: 'JSFunction',
+ value: 'function shouldFetch(option) {\n return true \n}'
+ },
+ errorHandler: {
+ type: 'JSFunction',
+ value: 'function errorHandler(err) {}'
+ }
+ },
+ tpl: null,
+ app: '918',
+ desc: null,
+ created_at: '2022-07-04T02:20:07.000Z',
+ updated_at: '2022-07-04T06:25:29.000Z'
+ },
+ {
+ id: 151,
+ name: 'selectedComponents',
+ data: {
+ columns: [
+ {
+ name: 'name',
+ title: 'name',
+ field: 'name',
+ type: 'string',
+ format: {
+ required: false,
+ stringType: '',
+ min: 0,
+ max: 0,
+ dateTime: false
+ }
+ },
+ {
+ name: 'description',
+ title: 'description',
+ field: 'description',
+ type: 'string',
+ format: {
+ required: false,
+ stringType: '',
+ min: 0,
+ max: 0,
+ dateTime: false
+ }
+ },
+ {
+ name: 'isSelected',
+ title: 'isSelected',
+ field: 'isSelected',
+ type: 'string',
+ format: {
+ required: false,
+ stringType: '',
+ min: 0,
+ max: 0,
+ dateTime: false
+ }
+ }
+ ],
+ type: 'array',
+ data: [
+ {
+ name: '标签页',
+ description: '分隔内容上有关联但属于不同类别的数据集合',
+ isSelected: 'true',
+ _RID: 'row_2'
+ },
+ {
+ name: '布局列',
+ description: '列配置信息',
+ isSelected: 'true',
+ id: '76a7080a',
+ _RID: 'row_4'
+ },
+ {
+ name: '日期选择器',
+ description: '用于设置/选择日期，包括年月/年月日/年月日时分/年月日时分秒日期格式',
+ isSelected: 'true',
+ id: '76b20d73',
+ _RID: 'row_1'
+ },
+ {
+ name: '走马灯',
+ description: '常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现',
+ isSelected: 'true',
+ id: '4c884c3d'
+ }
+ ]
+ },
+ tpl: null,
+ app: '918',
+ desc: null,
+ created_at: '2022-07-04T03:04:05.000Z',
+ updated_at: '2022-07-04T03:43:40.000Z'
+ }
+ ],
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function dataHanlder(res){\n return res;\n}'
+ }
+ },
+ globalState: [],
+ utils: [
+ {
+ name: 'axios',
+ type: 'npm',
+ content: {
+ type: 'JSFunction',
+ value: '',
+ package: 'axios',
+ destructuring: false,
+ exportName: 'axios'
+ }
+ },
+ {
+ name: 'Button',
+ type: 'npm',
+ content: {
+ package: '@opentiny/vue',
+ version: '',
+ exportName: 'Button',
+ subName: '',
+ destructuring: true,
+ main: ''
+ }
+ },
+ {
+ name: 'Menu',
+ type: 'npm',
+ content: {
+ type: 'JSFunction',
+ value: '',
+ package: '@opentiny/vue',
+ exportName: 'NavMenu',
+ destructuring: true
+ }
+ },
+ {
+ name: 'Modal ',
+ type: 'npm',
+ content: {
+ package: '@opentiny/vue',
+ version: '',
+ exportName: 'Modal ',
+ subName: '',
+ destructuring: true,
+ main: ''
+ }
+ },
+ {
+ name: 'npm',
+ type: 'function',
+ content: {
+ type: 'JSFunction',
+ value: "''"
+ }
+ },
+ {
+ name: 'Pager',
+ type: 'npm',
+ content: {
+ package: '@opentiny/vue',
+ version: '',
+ exportName: 'Pager',
+ subName: '',
+ destructuring: true,
+ main: ''
+ }
+ },
+ {
+ name: 'test',
+ type: 'function',
+ content: {
+ type: 'JSFunction',
+ value: "function test() {\r\n return 'test'\r\n}"
+ }
+ },
+ {
+ name: 'util',
+ type: 'function',
+ content: {
+ type: 'JSFunction',
+ value: 'function util () {\r\n console.log(321)\r\n}'
+ }
+ }
+ ],
+ i18n: {
+ en_US: {
+ 'lowcode.c257d5e8': 'search',
+ 'lowcode.61c8ac8c': 'dsdsa',
+ 'lowcode.f53187a0': 'test',
+ 'lowcode.97ad00dd': 'createMaterial',
+ 'lowcode.61dcef52': 'sadasda',
+ 'lowcode.45f4c42a': 'gfdgfd',
+ 'lowcode.c6f5a652': 'fsdafds',
+ 'lowcode.34923432': 'fdsafds',
+ 'lowcode.6534943e': 'fdsafdsa',
+ 'lowcode.44252642': 'aaaa',
+ 'lowcode.2a743651': 'fdsaf',
+ 'lowcode.24315357': 'fsdafds',
+ 'lowcode.44621691': 'sd',
+ 'lowcode.65636226': 'fdsfsd',
+ 'lowcode.6426a4e2': 'fdsafsd',
+ 'lowcode.e41c6636': 'aa',
+ 'lowcode.51c23164': 'aa',
+ 'lowcode.17245b46': 'aa',
+ 'lowcode.4573143c': 'a',
+ 'lowcode.56432442': 'aa',
+ 'lowcode.33566643': 'aa',
+ 'lowcode.565128f3': 'aa',
+ 'lowcode.56643835': 'aa'
+ },
+ zh_CN: {
+ 'lowcode.c257d5e8': '查询',
+ 'lowcode.61c8ac8c': '地方',
+ 'lowcode.f53187a0': '测试',
+ 'lowcode.97ad00dd': '创建物料资产包',
+ 'lowcode.61dcef52': 'terterere',
+ 'lowcode.45f4c42a': 'gdfgdf',
+ 'lowcode.c6f5a652': 'fsdaf',
+ 'lowcode.34923432': 'fdsafdsa',
+ 'lowcode.48521e45': 'fdsfds',
+ 'lowcode.6534943e': 'fdsafds',
+ 'lowcode.44252642': 'fdsafds',
+ 'lowcode.2a743651': 'sda',
+ 'lowcode.24315357': 'fdsafds',
+ 'lowcode.44621691': 'fdsafsd',
+ 'lowcode.65636226': 'fdsaf',
+ 'lowcode.6426a4e2': 'sd',
+ 'lowcode.e41c6636': 'aa',
+ 'lowcode.51c23164': 'aa',
+ 'lowcode.17245b46': 'aa',
+ 'lowcode.4573143c': 'aa',
+ 'lowcode.56432442': 'aa',
+ 'lowcode.33566643': 'aa',
+ 'lowcode.565128f3': 'aa',
+ 'lowcode.56643835': 'aa'
+ }
+ },
+ pageSchema: [
+ {
+ state: {},
+ methods: {},
+ componentName: 'Page',
+ css: '',
+ props: {},
+ lifeCycles: {},
+ children: [
+ {
+ componentName: 'div',
+ props: {},
+ id: '85375559',
+ children: [
+ {
+ componentName: 'TinySwitch',
+ props: {
+ modelValue: ''
+ },
+ id: '33433546'
+ }
+ ]
+ }
+ ],
+ dataSource: {
+ list: []
+ },
+ utils: [],
+ bridge: [],
+ inputs: [],
+ outputs: [],
+ fileName: 'DemoPage',
+ meta: {
+ name: 'DemoPage',
+ id: '5bhD7p5FUsUOTFRN',
+ app: '918',
+ router: 'demopage',
+ tenant: 1,
+ isBody: false,
+ parentId: '0',
+ group: 'staticPages',
+ depth: 0,
+ isPage: true,
+ isDefault: false,
+ occupier: {
+ id: 86,
+ username: '开发者',
+ email: 'developer@lowcode.com',
+ resetPasswordToken: 'developer',
+ confirmationToken: 'dfb2c162-351f-4f44-ad5f-8998',
+ is_admin: true
+ },
+ isHome: false,
+ message: 'Page auto save',
+ _id: '5bhD7p5FUsUOTFRN'
+ }
+ },
+ {
+ state: {
+ dataDisk: [1, 2, 3]
+ },
+ methods: {},
+ componentName: 'Page',
+ css: 'body {\r\n background-color:#eef0f5 ;\r\n margin-bottom: 80px;\r\n}',
+ props: {},
+ children: [
+ {
+ componentName: 'div',
+ props: {
+ style: 'padding-bottom: 10px; padding-top: 10px;'
+ },
+ id: '2b2cabf0',
+ children: [
+ {
+ componentName: 'TinyTimeLine',
+ props: {
+ active: '2',
+ data: [
+ {
+ name: '基础配置'
+ },
+ {
+ name: '网络配置'
+ },
+ {
+ name: '高级配置'
+ },
+ {
+ name: '确认配置'
+ }
+ ],
+ horizontal: true,
+ style: 'border-radius: 0px;'
+ },
+ id: 'dd764b17'
+ }
+ ]
+ },
+ {
+ componentName: 'div',
+ props: {
+ style:
+ 'border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;'
+ },
+ id: '30c94cc8',
+ children: [
+ {
+ componentName: 'TinyForm',
+ props: {
+ labelWidth: '80px',
+ labelPosition: 'top',
+ inline: false,
+ 'label-position': 'left ',
+ 'label-width': '150px',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '计费模式'
+ },
+ children: [
+ {
+ componentName: 'TinyButtonGroup',
+ props: {
+ data: [
+ {
+ text: '包年/包月',
+ value: '1'
+ },
+ {
+ text: '按需计费',
+ value: '2'
+ }
+ ],
+ modelValue: '1'
+ },
+ id: 'a8d84361'
+ }
+ ],
+ id: '9f39f3e7'
+ },
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '区域'
+ },
+ children: [
+ {
+ componentName: 'TinyButtonGroup',
+ props: {
+ data: [
+ {
+ text: '乌兰察布二零一',
+ value: '1'
+ }
+ ],
+ modelValue: '1',
+ style: 'border-radius: 0px; margin-right: 10px;'
+ },
+ id: 'c97ccd99'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '温馨提示：页面左上角切换区域',
+ style: 'background-color: [object Event]; color: #8a8e99; font-size: 12px;'
+ },
+ id: '20923497'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '不同区域的云服务产品之间内网互不相通；请就近选择靠近您业务的区域，可减少网络时延，提高访问速度',
+ style: 'display: block; color: #8a8e99; border-radius: 0px; font-size: 12px;'
+ },
+ id: '54780a26'
+ }
+ ],
+ id: '4966384d'
+ },
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '可用区',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyButtonGroup',
+ props: {
+ data: [
+ {
+ text: '可用区1',
+ value: '1'
+ },
+ {
+ text: '可用区2',
+ value: '2'
+ },
+ {
+ text: '可用区3',
+ value: '3'
+ }
+ ],
+ modelValue: '1'
+ },
+ id: '6184481b'
+ }
+ ],
+ id: '690837bf'
+ }
+ ],
+ id: 'b6a425d4'
+ }
+ ]
+ },
+ {
+ componentName: 'div',
+ props: {
+ style:
+ 'border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;'
+ },
+ children: [
+ {
+ componentName: 'TinyForm',
+ props: {
+ labelWidth: '80px',
+ labelPosition: 'top',
+ inline: false,
+ 'label-position': 'left ',
+ 'label-width': '150px',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: 'CPU架构'
+ },
+ children: [
+ {
+ componentName: 'TinyButtonGroup',
+ props: {
+ data: [
+ {
+ text: 'x86计算',
+ value: '1'
+ },
+ {
+ text: '鲲鹏计算',
+ value: '2'
+ }
+ ],
+ modelValue: '1'
+ },
+ id: '7d33ced7'
+ }
+ ],
+ id: '05ed5a79'
+ },
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '区域'
+ },
+ children: [
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex; justify-content: flex-start; align-items: center;'
+ },
+ id: '606edf78',
+ children: [
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex; align-items: center; margin-right: 10px;'
+ },
+ id: 'f3f98246',
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: 'vCPUs',
+ style: 'width: 80px;'
+ },
+ id: 'c287437e'
+ },
+ {
+ componentName: 'TinySelect',
+ props: {
+ modelValue: '',
+ placeholder: '请选择',
+ options: [
+ {
+ value: '1',
+ label: '黄金糕'
+ },
+ {
+ value: '2',
+ label: '双皮奶'
+ }
+ ]
+ },
+ id: '4c43286b'
+ }
+ ]
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex; align-items: center; margin-right: 10px;'
+ },
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '内存',
+ style: 'width: 80px; border-radius: 0px;'
+ },
+ id: '38b8fa1f'
+ },
+ {
+ componentName: 'TinySelect',
+ props: {
+ modelValue: '',
+ placeholder: '请选择',
+ options: [
+ {
+ value: '1',
+ label: '黄金糕'
+ },
+ {
+ value: '2',
+ label: '双皮奶'
+ }
+ ]
+ },
+ id: 'cd33328e'
+ }
+ ],
+ id: '2b2c678f'
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex; align-items: center;'
+ },
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '规格名称',
+ style: 'width: 80px;'
+ },
+ id: 'd3eb6352'
+ },
+ {
+ componentName: 'TinySearch',
+ props: {
+ modelValue: '',
+ placeholder: '输入关键词'
+ },
+ id: '21cb9282'
+ }
+ ],
+ id: 'b8e0f35c'
+ }
+ ]
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'border-radius: 0px;'
+ },
+ id: '5000c83e',
+ children: [
+ {
+ componentName: 'TinyButtonGroup',
+ props: {
+ data: [
+ {
+ text: '通用计算型',
+ value: '1'
+ },
+ {
+ text: '通用计算增强型',
+ value: '2'
+ },
+ {
+ text: '内存优化型',
+ value: '3'
+ },
+ {
+ text: '内存优化型',
+ value: '4'
+ },
+ {
+ text: '磁盘增强型',
+ value: '5'
+ },
+ {
+ text: '超高I/O型',
+ value: '6'
+ },
+ {
+ text: 'GPU加速型',
+ value: '7'
+ }
+ ],
+ modelValue: '1',
+ style: 'border-radius: 0px; margin-top: 12px;'
+ },
+ id: 'b8724703'
+ },
+ {
+ componentName: 'TinyGrid',
+ props: {
+ editConfig: {
+ trigger: 'click',
+ mode: 'cell',
+ showStatus: true
+ },
+ columns: [
+ {
+ type: 'radio',
+ width: 60
+ },
+ {
+ field: 'employees',
+ title: '规格名称'
+ },
+ {
+ field: 'created_date',
+ title: 'vCPUs | 内存(GiB)',
+ sortable: true
+ },
+ {
+ field: 'city',
+ title: 'CPU',
+ sortable: true
+ },
+ {
+ title: '基准 / 最大带宽\t',
+ sortable: true
+ },
+ {
+ title: '内网收发包',
+ sortable: true
+ }
+ ],
+ data: [
+ {
+ id: '1',
+ name: 'GFD科技有限公司',
+ city: '福州',
+ employees: 800,
+ created_date: '2014-04-30 00:56:00',
+ boole: false
+ },
+ {
+ id: '2',
+ name: 'WWW科技有限公司',
+ city: '深圳',
+ employees: 300,
+ created_date: '2016-07-08 12:36:22',
+ boole: true
+ }
+ ],
+ style: 'margin-top: 12px; border-radius: 0px;',
+ 'auto-resize': true
+ },
+ id: '77701c25'
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'margin-top: 12px; border-radius: 0px;'
+ },
+ id: '3339838b',
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '当前规格',
+ style: 'width: 150px; display: inline-block;'
+ },
+ id: '203b012b'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '通用计算型 | Si2.large.2 | 2vCPUs | 4 GiB',
+ style: 'font-weight: 700;'
+ },
+ id: '87723f52'
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ id: '657fb2fc'
+ }
+ ],
+ id: 'd19b15cf'
+ }
+ ],
+ id: '9991228b'
+ },
+ {
+ componentName: 'div',
+ props: {
+ style:
+ 'border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;'
+ },
+ children: [
+ {
+ componentName: 'TinyForm',
+ props: {
+ labelWidth: '80px',
+ labelPosition: 'top',
+ inline: false,
+ 'label-position': 'left ',
+ 'label-width': '150px',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '镜像',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyButtonGroup',
+ props: {
+ data: [
+ {
+ text: '公共镜像',
+ value: '1'
+ },
+ {
+ text: '私有镜像',
+ value: '2'
+ },
+ {
+ text: '共享镜像',
+ value: '3'
+ }
+ ],
+ modelValue: '1'
+ },
+ id: '922b14cb'
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex; margin-top: 12px; border-radius: 0px;'
+ },
+ id: '6b679524',
+ children: [
+ {
+ componentName: 'TinySelect',
+ props: {
+ modelValue: '',
+ placeholder: '请选择',
+ options: [
+ {
+ value: '1',
+ label: '黄金糕'
+ },
+ {
+ value: '2',
+ label: '双皮奶'
+ }
+ ],
+ style: 'width: 170px; margin-right: 10px;'
+ },
+ id: '4851fff7'
+ },
+ {
+ componentName: 'TinySelect',
+ props: {
+ modelValue: '',
+ placeholder: '请选择',
+ options: [
+ {
+ value: '1',
+ label: '黄金糕'
+ },
+ {
+ value: '2',
+ label: '双皮奶'
+ }
+ ],
+ style: 'width: 340px;'
+ },
+ id: 'a7183eb7'
+ }
+ ]
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'margin-top: 12px;'
+ },
+ id: '57aee314',
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '请注意操作系统的语言类型。',
+ style: 'color: #e37d29;'
+ },
+ id: '56d36c27'
+ }
+ ]
+ }
+ ],
+ id: 'e3b02436'
+ }
+ ],
+ id: '59aebf2b'
+ }
+ ],
+ id: '87ff7b99'
+ },
+ {
+ componentName: 'div',
+ props: {
+ style:
+ 'border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;'
+ },
+ children: [
+ {
+ componentName: 'TinyForm',
+ props: {
+ labelWidth: '80px',
+ labelPosition: 'top',
+ inline: false,
+ 'label-position': 'left ',
+ 'label-width': '150px',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '系统盘',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex;'
+ },
+ id: 'cddba5b8',
+ children: [
+ {
+ componentName: 'TinySelect',
+ props: {
+ modelValue: '',
+ placeholder: '请选择',
+ options: [
+ {
+ value: '1',
+ label: '黄金糕'
+ },
+ {
+ value: '2',
+ label: '双皮奶'
+ }
+ ],
+ style: 'width: 200px; margin-right: 10px;'
+ },
+ id: 'a97fbe15'
+ },
+ {
+ componentName: 'TinyInput',
+ props: {
+ placeholder: '请输入',
+ modelValue: '',
+ style: 'width: 120px; margin-right: 10px;'
+ },
+ id: '1cde4c0f'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: 'GiB \nIOPS上限240，IOPS突发上限5,000',
+ style: 'color: #575d6c; font-size: 12px;'
+ },
+ id: '2815d82d'
+ }
+ ]
+ }
+ ],
+ id: '50239a3a'
+ }
+ ],
+ id: 'e8582986'
+ },
+ {
+ componentName: 'TinyForm',
+ props: {
+ labelWidth: '80px',
+ labelPosition: 'top',
+ inline: false,
+ 'label-position': 'left ',
+ 'label-width': '150px',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyFormItem',
+ props: {
+ label: '数据盘',
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'div',
+ props: {
+ style: 'margin-top: 12px; display: flex;'
+ },
+ id: '728c9825',
+ children: [
+ {
+ componentName: 'Icon',
+ props: {
+ style: 'margin-right: 10px; width: 16px; height: 16px;',
+ name: 'IconPanelMini'
+ },
+ id: 'fded6930'
+ },
+ {
+ componentName: 'TinySelect',
+ props: {
+ modelValue: '',
+ placeholder: '请选择',
+ options: [
+ {
+ value: '1',
+ label: '黄金糕'
+ },
+ {
+ value: '2',
+ label: '双皮奶'
+ }
+ ],
+ style: 'width: 200px; margin-right: 10px;'
+ },
+ id: '62734e3f'
+ },
+ {
+ componentName: 'TinyInput',
+ props: {
+ placeholder: '请输入',
+ modelValue: '',
+ style: 'width: 120px; margin-right: 10px;'
+ },
+ id: '667c7926'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: 'GiB \nIOPS上限600，IOPS突发上限5,000',
+ style: 'color: #575d6c; font-size: 12px; margin-right: 10px;'
+ },
+ id: 'e7bc36d6'
+ },
+ {
+ componentName: 'TinyInput',
+ props: {
+ placeholder: '请输入',
+ modelValue: '',
+ style: 'width: 120px;'
+ },
+ id: '1bd56dc0'
+ }
+ ],
+ loop: {
+ type: 'JSExpression',
+ value: 'this.state.dataDisk'
+ }
+ },
+ {
+ componentName: 'div',
+ props: {
+ style: 'display: flex; margin-top: 12px; border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'Icon',
+ props: {
+ name: 'IconPlus',
+ style: 'width: 16px; height: 16px; margin-right: 10px;'
+ },
+ id: '65c89f2b'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '增加一块数据盘',
+ style: 'font-size: 12px; border-radius: 0px; margin-right: 10px;'
+ },
+ id: 'cb344071'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '您还可以挂载 21 块磁盘（云硬盘）',
+ style: 'color: #8a8e99; font-size: 12px;'
+ },
+ id: '80eea996'
+ }
+ ],
+ id: 'e9e530ab'
+ }
+ ],
+ id: '078e03ef'
+ }
+ ],
+ id: 'ccef886e'
+ }
+ ],
+ id: '0fb7bd74'
+ },
+ {
+ componentName: 'div',
+ props: {
+ style:
+ 'border-width: 1px; border-style: solid; border-color: #ffffff; padding-top: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; position: fixed; inset: auto 0% 0% 0%; height: 80px; line-height: 80px; border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyForm',
+ props: {
+ labelWidth: '80px',
+ labelPosition: 'top',
+ inline: false,
+ 'label-position': 'left ',
+ 'label-width': '150px',
+ style: 'border-radius: 0px;'
+ },
+ children: [],
+ id: '21ed4475'
+ },
+ {
+ componentName: 'TinyRow',
+ props: {
+ style: 'border-radius: 0px; height: 100%;'
+ },
+ children: [
+ {
+ componentName: 'TinyCol',
+ props: {
+ span: '8'
+ },
+ id: 'b9d051a5',
+ children: [
+ {
+ componentName: 'TinyRow',
+ props: {
+ style: 'border-radius: 0px;'
+ },
+ children: [
+ {
+ componentName: 'TinyCol',
+ props: {
+ span: '5',
+ style: 'display: flex;'
+ },
+ id: '02352776',
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '购买量',
+ style: 'margin-right: 10px;'
+ },
+ id: '0cd9ed5c'
+ },
+ {
+ componentName: 'TinyInput',
+ props: {
+ placeholder: '请输入',
+ modelValue: '',
+ style: 'width: 120px; margin-right: 10px;'
+ },
+ id: '2f9cf442'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '台'
+ },
+ id: 'facd4481'
+ }
+ ]
+ },
+ {
+ componentName: 'TinyCol',
+ props: {
+ span: '7'
+ },
+ id: '82b6c659',
+ children: [
+ {
+ componentName: 'div',
+ props: {},
+ id: '9cd65874',
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '配置费用',
+ style: 'font-size: 12px;'
+ },
+ id: 'b5a0a0da'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '¥1.5776',
+ style: 'padding-left: 10px; padding-right: 10px; color: #de504e;'
+ },
+ id: 'd9464214'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '/小时',
+ style: 'font-size: 12px;'
+ },
+ id: 'af7cc5e6'
+ }
+ ]
+ },
+ {
+ componentName: 'div',
+ props: {},
+ id: '89063830',
+ children: [
+ {
+ componentName: 'Text',
+ props: {
+ text: '参考价格，具体扣费请以账单为准。',
+ style: 'font-size: 12px; border-radius: 0px;'
+ },
+ id: 'd8995fbc'
+ },
+ {
+ componentName: 'Text',
+ props: {
+ text: '了解计费详情',
+ style: 'font-size: 12px; color: #344899;'
+ },
+ id: 'b383c3e2'
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ id: '94fc0e43'
+ }
+ ]
+ },
+ {
+ componentName: 'TinyCol',
+ props: {
+ span: '4',
+ style:
+ 'display: flex; flex-direction: row-reverse; border-radius: 0px; height: 100%; justify-content: flex-start; align-items: center;'
+ },
+ id: '10b73009',
+ children: [
+ {
+ componentName: 'TinyButton',
+ props: {
+ text: '下一步: 网络配置',
+ type: 'danger',
+ style: 'max-width: unset;'
+ },
+ id: '0b584011'
+ }
+ ]
+ }
+ ],
+ id: 'd414a473'
+ }
+ ],
+ id: 'e8ec029b'
+ }
+ ],
+ fileName: 'createVm',
+ meta: {
+ name: 'createVm',
+ id: 'NTJ4MjvqoVj8OVsc',
+ app: '918',
+ router: 'createVm',
+ tenant: 1,
+ isBody: false,
+ parentId: '0',
+ group: 'staticPages',
+ depth: 0,
+ isPage: true,
+ isDefault: false,
+ occupier: {
+ id: 86,
+ username: '开发者',
+ email: 'developer@lowcode.com',
+ resetPasswordToken: 'developer',
+ confirmationToken: 'dfb2c162-351f-4f44-ad5f-8998',
+ is_admin: true
+ },
+ isHome: false,
+ _id: 'NTJ4MjvqoVj8OVsc'
+ }
+ }
+ ],
+ componentsMap: [
+ {
+ componentName: 'TinyCarouselItem',
+ package: '@opentiny/vue',
+ exportName: 'CarouselItem',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyCheckboxButton',
+ package: '@opentiny/vue',
+ exportName: 'CheckboxButton',
+ destructuring: true,
+ version: '0.1.17'
+ },
+ {
+ componentName: 'TinyTree',
+ package: '@opentiny/vue',
+ exportName: 'Tree',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyPopover',
+ package: '@opentiny/vue',
+ exportName: 'Popover',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyTooltip',
+ package: '@opentiny/vue',
+ exportName: 'Tooltip',
+ destructuring: true,
+ version: '3.2.0'
+ },
+ {
+ componentName: 'TinyCol',
+ package: '@opentiny/vue',
+ exportName: 'Col',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyDropdownItem',
+ package: '@opentiny/vue',
+ exportName: 'DropdownItem',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyPager',
+ package: '@opentiny/vue',
+ exportName: 'Pager',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyPlusAccessdeclined',
+ package: '@opentiny/vue',
+ exportName: 'AccessDeclined',
+ destructuring: true,
+ version: '3.4.1'
+ },
+ {
+ componentName: 'TinyPlusFrozenPage',
+ package: '@opentiny/vue',
+ exportName: 'FrozenPage',
+ destructuring: true,
+ version: '3.4.1'
+ },
+ {
+ componentName: 'TinyPlusNonSupportRegion',
+ package: '@opentiny/vue',
+ exportName: 'NonSupportRegion',
+ destructuring: true,
+ version: '3.4.1'
+ },
+ {
+ componentName: 'TinyPlusBeta',
+ package: '@opentiny/vue',
+ exportName: 'Beta',
+ destructuring: true,
+ version: '3.4.1'
+ },
+ {
+ componentName: 'TinySearch',
+ package: '@opentiny/vue',
+ exportName: 'Search',
+ destructuring: true,
+ version: '0.1.13'
+ },
+ {
+ componentName: 'TinyRow',
+ package: '@opentiny/vue',
+ exportName: 'Row',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyFormItem',
+ package: '@opentiny/vue',
+ exportName: 'FormItem',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyAlert',
+ package: '@opentiny/vue',
+ exportName: 'Alert',
+ destructuring: true,
+ version: '3.2.0'
+ },
+ {
+ componentName: 'TinyInput',
+ package: '@opentiny/vue',
+ exportName: 'Input',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyTabs',
+ package: '@opentiny/vue',
+ exportName: 'Tabs',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyDropdownMenu',
+ package: '@opentiny/vue',
+ exportName: 'DropdownMenu',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyDialogBox',
+ package: '@opentiny/vue',
+ exportName: 'DialogBox',
+ destructuring: true,
+ version: '3.2.0'
+ },
+ {
+ componentName: 'TinySwitch',
+ package: '@opentiny/vue',
+ exportName: 'Switch',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyTimeLine',
+ package: '@opentiny/vue',
+ exportName: 'TimeLine',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyTabItem',
+ package: '@opentiny/vue',
+ exportName: 'TabItem',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyRadio',
+ package: '@opentiny/vue',
+ exportName: 'Radio',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyForm',
+ package: '@opentiny/vue',
+ exportName: 'Form',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyGrid',
+ package: '@opentiny/vue',
+ exportName: 'Grid',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyNumeric',
+ package: '@opentiny/vue',
+ exportName: 'Numeric',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyCheckboxGroup',
+ package: '@opentiny/vue',
+ exportName: 'CheckboxGroup',
+ destructuring: true,
+ version: '0.1.17'
+ },
+ {
+ componentName: 'TinySelect',
+ package: '@opentiny/vue',
+ exportName: 'Select',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyButtonGroup',
+ package: '@opentiny/vue',
+ exportName: 'ButtonGroup',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyCarousel',
+ package: '@opentiny/vue',
+ exportName: 'Carousel',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyPopeditor',
+ package: '@opentiny/vue',
+ exportName: 'Popeditor',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyDatePicker',
+ package: '@opentiny/vue',
+ exportName: 'DatePicker',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'TinyDropdown',
+ package: '@opentiny/vue',
+ exportName: 'Dropdown',
+ destructuring: true,
+ version: '0.1.20'
+ },
+ {
+ componentName: 'TinyChartHistogram',
+ package: '@opentiny/vue',
+ exportName: 'ChartHistogram',
+ destructuring: true,
+ version: '0.1.16'
+ },
+ {
+ componentName: 'PortalHome',
+ main: 'common/components/home',
+ destructuring: false,
+ version: '1.0.0'
+ },
+ {
+ componentName: 'PreviewBlock1',
+ main: 'preview',
+ destructuring: false,
+ version: '1.0.0'
+ },
+ {
+ componentName: 'PortalHeader',
+ main: 'common',
+ destructuring: false,
+ version: '1.0.0'
+ },
+ {
+ componentName: 'PortalBlock',
+ main: 'portal',
+ destructuring: false,
+ version: '1.0.0'
+ },
+ {
+ componentName: 'PortalPermissionBlock',
+ main: '',
+ destructuring: false,
+ version: '1.0.0'
+ }
+ ],
+ meta: {
+ name: 'portal-app',
+ tenant: 1,
+ git_group: '',
+ project_name: '',
+ description: 'demo应用',
+ branch: 'develop',
+ is_demo: null,
+ global_state: [],
+ appId: '918',
+ creator: '',
+ gmt_create: '2022-06-08 03:19:01',
+ gmt_modified: '2023-08-23 10:22:28'
+ }
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case01/blocks.schema.json b/packages/vue-generator/test/testcases/sfc/case01/blocks.schema.json
new file mode 100644
index 000000000..f6824ce7a
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case01/blocks.schema.json
@@ -0,0 +1,207 @@
+{
+ "componentName": "Block",
+ "fileName": "ImageTitle",
+ "css": ".image-title {\n margin-right: 15px;\ndisplay: flex;\n align-items: center; \n}\n.crm-title {\n margin-left: 8px;\n font-family: PingFangSC-Regular; \nfont-size: 22px; \ncolor: #333333; \nline-height: 30px; \n}\n.split {\r\n align-self: center;\r\n width: 1px;\r\n height: 20px;\r\n background-color: #dddee4;\r\n margin-left: 20px;\r\n}\r\n",
+ "props": {},
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "div",
+ "id": "ImageTitleizk3",
+ "props": {
+ "className": "image-title",
+ "onClick": {
+ "type": "JSExpression",
+ "value": "this.handleClick"
+ }
+ },
+ "children": [
+ {
+ "componentName": "img",
+ "id": "imageizk3",
+ "props": {
+ "src": {
+ "type": "JSExpression",
+ "value": "this.props.src"
+ }
+ }
+ },
+ {
+ "componentName": "span",
+ "id": "spanizk3",
+ "props": {
+ "className": "crm-title"
+ },
+ "children": {
+ "type": "JSExpression",
+ "value": "this.props.text"
+ }
+ },
+ {
+ "componentName": "span",
+ "id": "spanizk4",
+ "condition": {
+ "type": "JSExpression",
+ "value": "this.props.hasSplitLine"
+ },
+ "props": {
+ "className": "split"
+ }
+ }
+ ]
+ }
+ ],
+ "schema": {
+ "properties": [
+ {
+ "label": {
+ "zh_CN": "基础信息"
+ },
+ "description": {
+ "zh_CN": "基础信息"
+ },
+ "collapse": {
+ "number": 6,
+ "text": {
+ "zh_CN": "显示更多"
+ }
+ },
+ "content": [
+ {
+ "property": "handleClick",
+ "type": "Function",
+ "defaultValue": {
+ "type": "Function",
+ "value": "function handleClick(event) { return event }"
+ },
+ "label": {
+ "text": {
+ "zh_CN": "点击Image触发事件"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaCodeEditor",
+ "props": {}
+ }
+ },
+ {
+ "property": "options",
+ "type": "Array",
+ "defaultValue": [],
+ "label": {
+ "text": {
+ "zh_CN": "选项"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaCodeEditor",
+ "props": {
+ "modelValue": []
+ }
+ }
+ },
+ {
+ "property": "src",
+ "type": "string",
+ "defaultValue": "https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/TinyLowCode/crm/img/bussiness/businessmanage.svg",
+ "label": {
+ "text": {
+ "zh_CN": "图片地址"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaInput",
+ "props": {
+ "modelValue": "https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/TinyLowCode/crm/img/bussiness/businessmanage.svg"
+ }
+ }
+ },
+ {
+ "property": "text",
+ "type": "String",
+ "defaultValue": "商务管理",
+ "label": {
+ "text": {
+ "zh_CN": "标题文本"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaInput",
+ "props": {
+ "modelValue": "商务管理"
+ }
+ }
+ },
+ {
+ "property": "hasSplitLine",
+ "type": "Boolean",
+ "defaultValue": true,
+ "label": {
+ "text": {
+ "zh_CN": "是否添加分割线"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaSwitch",
+ "props": {
+ "modelValue": true
+ }
+ }
+ }
+ ]
+ }
+ ],
+ "events": {
+ "onClickLogo": {
+ "label": {
+ "zh_CN": "点击事件"
+ },
+ "description": {
+ "zh_CN": "通常用于配置处理点击跳转"
+ }
+ }
+ }
+ },
+ "state": {
+ "activeMethod": {
+ "type": "JSFunction",
+ "value": "function() {\n return this.props.isEdit;\r\n}"
+ }
+ },
+ "methods": {
+ "handleClick": {
+ "type": "JSFunction",
+ "value": "function() { this.emit('click-logo') }"
+ }
+ }
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case01/case01.test.js b/packages/vue-generator/test/testcases/sfc/case01/case01.test.js
new file mode 100644
index 000000000..22d3c6509
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case01/case01.test.js
@@ -0,0 +1,41 @@
+import { expect, test, beforeEach, afterEach, vi } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './schema.json'
+import blockSchema from './blocks.schema.json'
+import componentsMap from './componentsMap.json'
+import { formatCode } from '@/utils/formatCode'
+
+let count = 0
+const mockValue = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]
+
+beforeEach(() => {
+ // 伪随机数，保证每次快照都一致
+ vi.spyOn(global.Math, 'random').mockImplementation(() => {
+ const res = mockValue[count]
+
+ count++
+ if (count > 10) {
+ count = 0
+ }
+
+ return res
+ })
+})
+
+afterEach(() => {
+ vi.spyOn(global.Math, 'random').mockRestore()
+})
+
+test('should validate tagName', async () => {
+ const res = genSFCWithDefaultPlugin(schema, componentsMap)
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/FormTable.vue')
+})
+
+test('should generate block component correct', async () => {
+ const res = genSFCWithDefaultPlugin(blockSchema, componentsMap)
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/ImageTitle.vue')
+})
diff --git a/packages/vue-generator/test/testcases/sfc/case01/componentsMap.json b/packages/vue-generator/test/testcases/sfc/case01/componentsMap.json
new file mode 100644
index 000000000..2f62c77fb
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case01/componentsMap.json
@@ -0,0 +1,70 @@
+[
+ {
+ "componentName": "TinyButton",
+ "exportName": "Button",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyForm",
+ "exportName": "Form",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyFormItem",
+ "exportName": "FormItem",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyGrid",
+ "exportName": "Grid",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyInput",
+ "exportName": "Input",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinySelect",
+ "exportName": "Select",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinySwitch",
+ "exportName": "Switch",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "Img",
+ "exportName": "",
+ "package": "",
+ "version": "1.0.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "FormTable",
+ "main": "./views"
+ },
+ {
+ "componentName": "ImageTitle",
+ "main": "./components"
+ },
+ {
+ "componentName": "CrmQuoteListGridStatus",
+ "main": "./views/crm/quote-list"
+ }
+]
diff --git a/packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue b/packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue
new file mode 100644
index 000000000..e262db8ce
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue
@@ -0,0 +1,332 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ vCPUs
+
+
+ 内存
+
+
+ 规格名称
+
+
+
+ 当前规格
+ 通用计算型 | Si2.large.2 | 2vCPUs | 4 GiB
+
+
+
+
+
+
+
+
+
+ 请注意操作系统的语言类型。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 购买量
+
+
+
+
+
+
+
+ 配置费用
+ ¥1.5776
+ /小时
+
+
+ 参考价格，具体扣费请以账单为准。
+ 了解计费详情
+
+ 标题区
+ 副标题区
+
+
+
+
+ 城市
+
+
+
+ 搜索
+ {{ t('operation.reset') }}
+
+ +
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case01/expected/ImageTitle.vue b/packages/vue-generator/test/testcases/sfc/case01/expected/ImageTitle.vue
new file mode 100644
index 000000000..48c6f24fd
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case01/expected/ImageTitle.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+ 循环渲染：
+ + +
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case01/schema.json b/packages/vue-generator/test/testcases/sfc/case01/schema.json
new file mode 100644
index 000000000..a0d384e9d
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case01/schema.json
@@ -0,0 +1,716 @@
+{
+ "version": "1.1",
+ "componentName": "Page",
+ "fileName": "FormTable",
+ "css": ".overflow-container .card {\n padding-bottom: 8px;\n}\n.main-body {\n display: flex;\n flex: 1;\n flex-direction: column;\n margin: 20px 20px 9px 20px;\n}\n.card {\n padding: 20px 20px;\n background-color: #ffffff;\n box-shadow: 0 2px 10px 0 rgb(0 0 0 / 6%);\n border-radius: 2px;\n}\n.manage-list {\n margin-bottom: 60px !important;\n} .crm-title-wrapper{\n display: flex;\n justify-content: start;\n align-items: center;\n margin-bottom: 20px;\n gap: 20px;\n}\n .crm-import-button:not(:last-child) {\n margin-right: 10px;\n}",
+ "props": {},
+ "children": [
+ {
+ "componentName": "Text",
+ "props": {
+ "style": "background: url(\"**/public/logo.png\");",
+ "className": "page-header",
+ "text": "标题区"
+ }
+ },
+ {
+ "componentName": "Text",
+ "props": {
+ "style": "background: url('**/public/background.png');",
+ "text": "副标题区"
+ }
+ },
+ {
+ "componentName": "Template",
+ "props": {
+ "text": "空插槽，出码会跳过此节点"
+ },
+ "children": []
+ },
+ {
+ "componentName": "ImageTitle",
+ "fileName": "ImageTitle",
+ "componentType": "Block",
+ "props": {
+ "className": {
+ "type": "JSExpression",
+ "value": "['basic-info', {'form-fixed-layout': this.props.isFixed}, {'form-auto-layout': this.props.isAuto}]"
+ },
+ "text": "配置报价",
+ "hasSplitLine": false,
+ "onClickLogo": {
+ "type": "JSExpression",
+ "value": "this.handleReset",
+ "params": ["state.flag"]
+ }
+ }
+ },
+ {
+ "componentName": "TinyForm",
+ "props": {
+ "inline": true,
+ "style": {
+ "margin": "12px"
+ },
+ "className": "form"
+ },
+ "children": [
+ {
+ "componentName": "TinyFormItem",
+ "props": {
+ "label": {
+ "type": "i18n",
+ "key": "company.name"
+ }
+ },
+ "children": [
+ {
+ "componentName": "TinyInput",
+ "props": {
+ "disabled": false,
+ "value": {
+ "type": "JSExpression",
+ "value": "state.companyName"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "TinyFormItem",
+ "condition": {
+ "type": "JSExpression",
+ "value": "state.cityOptions.length"
+ },
+ "children": [
+ {
+ "componentName": "Template",
+ "props": {
+ "slot": "label"
+ },
+ "children": "城市"
+ },
+ {
+ "componentName": "TinySelect",
+ "props": {
+ "value": {
+ "type": "JSExpression",
+ "value": "state.companyCity"
+ },
+ "options": [
+ {
+ "label": {
+ "type": "i18n",
+ "key": "city.foochow",
+ "zh_CN": "福州",
+ "en_US": "Foochow"
+ },
+ "value": 0
+ },
+ {
+ "label": "深'i'圳",
+ "value": 1
+ },
+ {
+ "label": "中山",
+ "value": 2
+ },
+ {
+ "label": "龙岩",
+ "value": 3
+ },
+ {
+ "label": "韶关",
+ "value": 4
+ },
+ {
+ "label": "黄冈",
+ "value": 5
+ },
+ {
+ "label": "赤壁",
+ "value": 6
+ },
+ {
+ "label": "厦门",
+ "value": 7
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "TinyFormItem",
+ "props": {},
+ "children": [
+ {
+ "componentName": "Text",
+ "props": {
+ "className": "form-footer",
+ "text": "表单提交区"
+ }
+ },
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "type": "primary",
+ "icon": {
+ "componentName": "Icon",
+ "props": {
+ "name": "IconSearch"
+ }
+ },
+ "onClick": {
+ "type": "JSExpression",
+ "value": "this.handleSearch"
+ }
+ },
+ "children": "搜索"
+ },
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "onClick": {
+ "type": "JSExpression",
+ "value": "this.handleReset"
+ }
+ },
+ "children": {
+ "type": "i18n",
+ "key": "operation.reset"
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "componentName": "Collection",
+ "props": {
+ "dataSource": "a5f6ef4f"
+ },
+ "children": [
+ {
+ "componentName": "TinyGrid",
+ "props": {
+ "columns": {
+ "type": "JSExpression",
+ "value": "state.columns"
+ },
+ "data": {
+ "type": "JSExpression",
+ "value": "state.tableData"
+ },
+ "fetchData": {
+ "type": "JSExpression",
+ "value": "{ api: getTableData }"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Collection",
+ "props": {
+ "dataSource": "a5f6ef4f"
+ },
+ "children": [
+ {
+ "componentName": "TinyGrid",
+ "props": {
+ "columns": [
+ { "type": "index", "width": 60, "title": "" },
+ { "type": "selection", "width": 60 },
+ {
+ "field": "employees",
+ "title": "员工数",
+ "slots": {
+ "default": {
+ "type": "JSSlot",
+ "params": ["row", "rowIndex"],
+ "value": [{ "componentName": "TinyInput", "props": {}, "id": "49e232ce" }]
+ }
+ }
+ },
+ { "field": "city", "title": "城市" },
+ {
+ "title": "产品",
+ "slots": {
+ "default": {
+ "type": "JSSlot",
+ "params": ["row"],
+ "value": [
+ {
+ "componentName": "div",
+ "id": "592fbc05",
+ "children": [{ "componentName": "TinySwitch", "props": { "modelValue": "" }, "id": "46a60c6f" }]
+ }
+ ]
+ }
+ }
+ },
+ {
+ "title": "操作",
+ "slots": {
+ "default": {
+ "type": "JSSlot",
+ "value": [
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "text": "删除",
+ "icon": {
+ "componentName": "Icon",
+ "props": {
+ "name": "IconDel"
+ }
+ },
+ "onClick": {
+ "type": "JSExpression",
+ "value": "this.emit",
+ "params": ["row"]
+ }
+ }
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "data": {
+ "type": "JSExpression",
+ "value": "state.tableData"
+ },
+ "fetchData": {
+ "type": "JSExpression",
+ "value": "{ api: getTableData }"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "div",
+ "props": {
+ "style": {
+ "width": {
+ "type": "JSExpression",
+ "value": "this.props.quotePopWidth"
+ }
+ }
+ },
+ "children": "循环渲染："
+ },
+ {
+ "componentName": "Icon",
+ "condition": false,
+ "props": {
+ "name": "TinyIconHelpCircle"
+ }
+ },
+ {
+ "children": [
+ {
+ "componentName": "TinyButton",
+ "loop": {
+ "type": "JSExpression",
+ "value": "state.buttons"
+ },
+ "loopArgs": ["item", "index"],
+ "props": {
+ "key": {
+ "type": "JSExpression",
+ "value": "item.text"
+ },
+ "type": {
+ "type": "JSExpression",
+ "value": "item.type"
+ },
+ "text": {
+ "type": "JSExpression",
+ "value": "index + item.text"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "br"
+ },
+ {
+ "children": [
+ {
+ "componentName": "TinyButton",
+ "loop": [
+ {
+ "type": "primary",
+ "text": "字面量"
+ },
+ {
+ "type": "success",
+ "text": "字面量"
+ },
+ {
+ "type": "danger",
+ "text": "危险操作"
+ }
+ ],
+ "loopArgs": ["item"],
+ "props": {
+ "key": {
+ "type": "JSExpression",
+ "value": "item.text"
+ },
+ "type": {
+ "type": "JSExpression",
+ "value": "item.type"
+ },
+ "text": {
+ "type": "JSExpression",
+ "value": "item.text"
+ }
+ }
+ }
+ ]
+ }
+ ],
+ "state": {
+ "IconPlusSquare": {
+ "type": "JSResource",
+ "value": "this.utils.IconPlusSquare()"
+ },
+ "theme": "{ \"id\": 22, \"name\": \"@cloud/tinybuilder-theme-dark\", \"description\": \"黑暗主题\" }",
+ "companyName": "",
+ "companyOptions": null,
+ "companyCity": "",
+ "cityOptions": [
+ {
+ "label": "福州",
+ "value": 0
+ },
+ {
+ "label": "深圳",
+ "value": 1
+ },
+ {
+ "label": "中山",
+ "value": 2
+ },
+ {
+ "label": "龙岩",
+ "value": 3
+ },
+ {
+ "label": "韶关",
+ "value": 4
+ },
+ {
+ "label": "黄冈",
+ "value": 5
+ },
+ {
+ "label": "赤壁",
+ "value": 6
+ },
+ {
+ "label": "厦门",
+ "value": 7
+ }
+ ],
+ "editConfig": {
+ "trigger": "click",
+ "mode": "cell",
+ "showStatus": true,
+ "activeMethod": {
+ "type": "JSFunction",
+ "value": "function() { return this.props.isEdit }"
+ }
+ },
+ "columns": [
+ {
+ "type": {
+ "type": "JSExpression",
+ "value": "this.props.isEdit ? 'selection' : 'index'"
+ },
+ "width": "60",
+ "title": {
+ "type": "JSExpression",
+ "value": "this.props.isEdit ? '' : '序号'"
+ }
+ },
+ {
+ "field": "status",
+ "title": "状态",
+ "filter": {
+ "layout": "input,enum,default,extends,base",
+ "inputFilter": {
+ "component": {
+ "type": "JSResource",
+ "value": "this.utils.Numeric"
+ },
+ "attrs": { "format": "yyyy/MM/dd hh:mm:ss" },
+ "relation": "A",
+ "relations": [
+ {
+ "label": "小于",
+ "value": "A",
+ "method": {
+ "type": "JSFunction",
+ "value": "function({ value, input }) { return value < input }"
+ }
+ },
+ { "label": "等于", "value": "equals" },
+ { "label": "大于", "value": "greaterThan" }
+ ]
+ },
+ "extends": [
+ {
+ "label": "我要过滤大于800的数",
+ "method": {
+ "type": "JSFunction",
+ "value": "function({ value }) { return value > 800 }"
+ }
+ },
+ {
+ "label": "我要过滤全部的数",
+ "method": {
+ "type": "JSFunction",
+ "value": "function() { return true }"
+ }
+ }
+ ]
+ },
+ "slots": {
+ "default": {
+ "type": "JSSlot",
+ "params": ["row"],
+ "value": [
+ {
+ "componentName": "div",
+ "children": [
+ {
+ "componentName": "Icon",
+ "props": {
+ "name": "IconEdit"
+ }
+ },
+ {
+ "componentName": "CrmQuoteListGridStatus",
+ "componentType": "Block",
+ "condition": {
+ "type": "JSExpression",
+ "value": "this.props.isEdit"
+ },
+ "props": {
+ "isEdit": {
+ "type": "JSExpression",
+ "value": "this.props.isEdit"
+ },
+ "status": {
+ "type": "JSExpression",
+ "value": "row.status"
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+ }
+ },
+ {
+ "type": "index",
+ "width": 60
+ },
+ {
+ "type": "selection",
+ "width": 60
+ },
+ {
+ "field": "name",
+ "title": "公司名称"
+ },
+ {
+ "field": "employees",
+ "title": "员工数"
+ },
+ {
+ "field": "city",
+ "title": "城市"
+ },
+ {
+ "title": "操作",
+ "slots": {
+ "default": {
+ "type": "JSSlot",
+ "value": [
+ {
+ "component": "div",
+ "props": {
+ "style": "color: rgb(94,124, 224);cursor:pointer;",
+ "text": {
+ "type": "i18n",
+ "key": "operation.delete"
+ },
+ "prop1": {
+ "a": 123
+ },
+ "visible": true,
+ "onClick": {
+ "type": "JSExpression",
+ "value": "this.emit"
+ }
+ },
+ "children": [
+ {
+ "componentName": "TinyInput",
+ "props": {
+ "value": {
+ "type": "JSExpression",
+ "value": "row.giveamount",
+ "model": {
+ "prop": ""
+ }
+ }
+ }
+ },
+ {
+ "component": "span",
+ "condition": {
+ "type": "JSExpression",
+ "value": "state.cityOptions.length"
+ },
+ "children": {
+ "type": "i18n",
+ "key": "operation.hello"
+ }
+ },
+ {
+ "componentName": "Icon",
+ "props": {
+ "name": "TinyIconHelpCircle",
+ "style": "margin-left: 6px; cursor: pointer;vertical-align: top;"
+ }
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+ ],
+ "tableData": [
+ {
+ "id": "1",
+ "name": "GFD科技有限公司",
+ "city": "福州",
+ "employees": 800,
+ "boole": false
+ },
+ {
+ "id": "2",
+ "name": "WWW科技有限公司",
+ "city": "深圳",
+ "employees": 300,
+ "boole": true
+ },
+ {
+ "id": "3",
+ "name": "RFV有限责任公司",
+ "city": "中山",
+ "employees": 1300,
+ "boole": false
+ },
+ {
+ "id": "4",
+ "name": "TGB科技有限公司",
+ "city": "龙岩",
+ "employees": 360,
+ "boole": true
+ },
+ {
+ "id": "5",
+ "name": "YHN科技有限公司",
+ "city": "韶关",
+ "employees": 810,
+ "boole": true
+ },
+ {
+ "id": "6",
+ "name": "WSX科技有限公司",
+ "city": "黄冈",
+ "employees": 800,
+ "boole": true
+ },
+ {
+ "id": "7",
+ "name": "KBG物业有限公司",
+ "city": "赤壁",
+ "employees": 400,
+ "boole": false
+ },
+ {
+ "id": "8",
+ "name": "深圳市福德宝网络技术有限公司",
+ "boole": true,
+ "city": "厦门",
+ "employees": 540
+ }
+ ],
+ "status": {
+ "type": "JSExpression",
+ "value": "this.statusData",
+ "computed": true
+ },
+ "buttons": [
+ {
+ "type": "primary",
+ "text": "主要操作"
+ },
+ {
+ "type": "success",
+ "text": "成功操作"
+ },
+ {
+ "type": "danger",
+ "text": {
+ "type": "i18n",
+ "key": "operation.danger"
+ }
+ }
+ ]
+ },
+ "lifeCycles": {
+ "setup": {
+ "type": "JSFunction",
+ "value": "function({ props, watch, onMounted }) {\r\n onMounted(() => {\r\n this.getTableDta()\r\n })\r\n watch(\r\n () => props.load,\r\n (load) => {\r\n if (load.isLoad) {\r\n this.getTableDta()\r\n }\r\n },\r\n {\r\n deep: true\r\n }\r\n )\r\n}"
+ },
+ "onBeforeMount": {
+ "type": "JSFunction",
+ "value": "function() { return '生命周期：onBeforeMount'; }"
+ },
+ "onMounted": {
+ "type": "JSFunction",
+ "value": "function onMounted() { return '生命周期：onMounted'; }"
+ }
+ },
+ "methods": {
+ "getTableData": {
+ "type": "JSFunction",
+ "value": "function getData({ page, filterArgs }) {\n const { curPage, pageSize } = page;\n const offset = (curPage - 1) * pageSize;\n\n return new Promise((resolve) => {\n setTimeout(() => {\n const { tableData } = this.state;\n let result = [...tableData];\n\n if (filterArgs) {\n result = result.filter((item) => item.city === filterArgs);\n }\n\n const total = result.length;\n result = result.slice(offset, offset + pageSize);\n\n resolve({ result, page: { total } });\n }, 500);\n });\n}"
+ },
+ "handleSearch": {
+ "type": "JSFunction",
+ "value": "function(e) { return ['搜索:', this.i18n('operation.search'), e]; }"
+ },
+ "handleReset": {
+ "type": "JSFunction",
+ "value": "function handleReset(e) { return ['重置:', e]; }"
+ },
+ "statusData": {
+ "type": "JSFunction",
+ "value": "function () {\r\n return [\r\n { name: this.i18n('quotes.common.configure_basic_information'), status: 'ready' },\r\n { name: this.i18n('quotes.quote_list.quote'), status: 'wait' },\r\n { name: this.i18n('quotes.common.complete_configuration_quote'), status: 'wait' }\r\n ]\r\n}"
+ }
+ }
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case02/blocks.schema.json b/packages/vue-generator/test/testcases/sfc/case02/blocks.schema.json
new file mode 100644
index 000000000..517e48a73
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case02/blocks.schema.json
@@ -0,0 +1,150 @@
+{
+ "componentName": "Block",
+ "fileName": "PropAccessor",
+ "css": "",
+ "props": {},
+ "state": {
+ "firstName": "",
+ "lastName": ""
+ },
+ "methods": {},
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "TinyForm",
+ "props": {
+ "labelWidth": "80px",
+ "labelPosition": "top"
+ },
+ "children": [
+ {
+ "componentName": "TinyFormItem",
+ "props": {
+ "label": "姓"
+ },
+ "children": [
+ {
+ "componentName": "TinyInput",
+ "props": {
+ "placeholder": "请输入姓氏",
+ "modelValue": {
+ "type": "JSExpression",
+ "value": "this.state.lastName",
+ "model": true
+ }
+ },
+ "id": "acdd0030"
+ }
+ ],
+ "id": "6140da6b"
+ },
+ {
+ "componentName": "TinyFormItem",
+ "props": {
+ "label": "名"
+ },
+ "children": [
+ {
+ "componentName": "TinyInput",
+ "props": {
+ "placeholder": "请输入名字",
+ "modelValue": {
+ "type": "JSExpression",
+ "value": "this.state.firstName",
+ "model": true
+ }
+ },
+ "id": "f029ce23"
+ }
+ ],
+ "id": "3751a68b"
+ },
+ {
+ "componentName": "TinyFormItem",
+ "props": {},
+ "children": [
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "text": "提交",
+ "type": "primary"
+ },
+ "id": "d2b35138"
+ },
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "text": "重置",
+ "style": "margin-left: 10px"
+ },
+ "id": "89f92a92"
+ }
+ ],
+ "id": "2e93998e"
+ }
+ ],
+ "id": "88ecfcff"
+ }
+ ],
+ "schema": {
+ "properties": [
+ {
+ "label": {
+ "zh_CN": "基础信息"
+ },
+ "description": {
+ "zh_CN": "基础信息"
+ },
+ "collapse": {
+ "number": 6,
+ "text": {
+ "zh_CN": "显示更多"
+ }
+ },
+ "content": [
+ {
+ "property": "name",
+ "type": "String",
+ "defaultValue": "",
+ "label": {
+ "text": {
+ "zh_CN": "全名"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "accessor": {
+ "getter": {
+ "type": "JSFunction",
+ "value": "function getter() {\r\n this.emit('update:name', `${this.state.firstName} ${this.state.lastName}`)\r\n}"
+ },
+ "setter": {
+ "type": "JSFunction",
+ "value": "function setter() {\r\n const [firstName, lastName] = this.props.name.split(' ')\r\n this.state.firstName = firstName\r\n this.state.lastName = lastName\r\n}"
+ }
+ },
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaInput",
+ "props": {}
+ }
+ }
+ ]
+ }
+ ],
+ "events": {
+ "onUpdate:name": {
+ "label": {
+ "zh_CN": "双向绑定的name变化时触发"
+ },
+ "description": {
+ "zh_CN": ""
+ }
+ }
+ },
+ "slots": {}
+ }
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case02/case02.test.js b/packages/vue-generator/test/testcases/sfc/case02/case02.test.js
new file mode 100644
index 000000000..c150d463b
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case02/case02.test.js
@@ -0,0 +1,22 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './components-map.json'
+import blockSchema from './blocks.schema.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should generate use prop accessor correctly', async () => {
+ const res = genSFCWithDefaultPlugin(schema, componentsMap)
+
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/UsePropAccessor.vue')
+})
+
+test('should generate prop accessor correctly', async () => {
+ const res = genSFCWithDefaultPlugin(blockSchema, componentsMap)
+
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/PropAccessor.vue')
+})
diff --git a/packages/vue-generator/test/testcases/sfc/case02/components-map.json b/packages/vue-generator/test/testcases/sfc/case02/components-map.json
new file mode 100644
index 000000000..631735610
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case02/components-map.json
@@ -0,0 +1,38 @@
+[
+ {
+ "componentName": "UsePropAccessor",
+ "main": "./views"
+ },
+ {
+ "componentName": "PropAccessor",
+ "main": "./components"
+ },
+ {
+ "componentName": "TinyButton",
+ "exportName": "Button",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyInput",
+ "exportName": "Input",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyForm",
+ "exportName": "Form",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyFormItem",
+ "exportName": "FormItem",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ }
+]
diff --git a/packages/vue-generator/test/testcases/sfc/case02/expected/PropAccessor.vue b/packages/vue-generator/test/testcases/sfc/case02/expected/PropAccessor.vue
new file mode 100644
index 000000000..6a938b7d9
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case02/expected/PropAccessor.vue
@@ -0,0 +1,46 @@
+
+
+ ![]()
+ {{ text }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case02/expected/UsePropAccessor.vue b/packages/vue-generator/test/testcases/sfc/case02/expected/UsePropAccessor.vue
new file mode 100644
index 000000000..69bfc22bc
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case02/expected/UsePropAccessor.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case02/page.schema.json b/packages/vue-generator/test/testcases/sfc/case02/page.schema.json
new file mode 100644
index 000000000..4f60b89ae
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case02/page.schema.json
@@ -0,0 +1,46 @@
+{
+ "componentName": "Page",
+ "fileName": "UsePropAccessor",
+ "css": "",
+ "props": {},
+ "state": {
+ "fullName": ""
+ },
+ "methods": {},
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "TinyForm",
+ "props": {
+ "labelWidth": "80px",
+ "labelPosition": "top"
+ },
+ "children": [
+ {
+ "componentName": "TinyFormItem",
+ "props": {
+ "label": "全名"
+ },
+ "children": [
+ {
+ "componentType": "Block",
+ "componentName": "PropAccessor",
+ "props": {
+ "name": {
+ "type": "JSExpression",
+ "value": "this.state.fullName",
+ "model": {
+ "prop": "name"
+ }
+ }
+ },
+ "id": "acdd0030"
+ }
+ ],
+ "id": "6140da6b"
+ }
+ ],
+ "id": "88ecfcff"
+ }
+ ]
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case03/blocks.schema.json b/packages/vue-generator/test/testcases/sfc/case03/blocks.schema.json
new file mode 100644
index 000000000..8b0c98f28
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case03/blocks.schema.json
@@ -0,0 +1,158 @@
+{
+ "componentName": "Block",
+ "fileName": "StateAccessor",
+ "css": "",
+ "props": {},
+ "state": {
+ "fullName": {
+ "defaultValue": "",
+ "accessor": {
+ "getter": {
+ "type": "JSFunction",
+ "value": "function getter() {\r\n this.state.fullName = `${this.props.firstName} ${this.props.lastName}`\r\n}"
+ },
+ "setter": {
+ "type": "JSFunction",
+ "value": "function setter() {\r\n const [firstName, lastName] = this.state.fullName.split(' ')\r\n this.emit('update:firstName', firstName)\r\n this.emit('update:lastName', lastName)\r\n}"
+ }
+ }
+ }
+ },
+ "methods": {},
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "TinyForm",
+ "props": {
+ "labelWidth": "80px",
+ "labelPosition": "top"
+ },
+ "children": [
+ {
+ "componentName": "TinyFormItem",
+ "props": {
+ "label": "全名"
+ },
+ "children": [
+ {
+ "componentName": "TinyInput",
+ "props": {
+ "placeholder": "请输入全名",
+ "modelValue": {
+ "type": "JSExpression",
+ "value": "this.state.fullName",
+ "model": true
+ }
+ },
+ "id": "acdd0030"
+ }
+ ],
+ "id": "6140da6b"
+ },
+ {
+ "componentName": "TinyFormItem",
+ "props": {},
+ "children": [
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "text": "提交",
+ "type": "primary"
+ },
+ "id": "d2b35138"
+ },
+ {
+ "componentName": "TinyButton",
+ "props": {
+ "text": "重置",
+ "style": "margin-left: 10px"
+ },
+ "id": "89f92a92"
+ }
+ ],
+ "id": "2e93998e"
+ }
+ ],
+ "id": "88ecfcff"
+ }
+ ],
+ "schema": {
+ "properties": [
+ {
+ "label": {
+ "zh_CN": "基础信息"
+ },
+ "description": {
+ "zh_CN": "基础信息"
+ },
+ "collapse": {
+ "number": 6,
+ "text": {
+ "zh_CN": "显示更多"
+ }
+ },
+ "content": [
+ {
+ "property": "firstName",
+ "type": "String",
+ "defaultValue": "",
+ "label": {
+ "text": {
+ "zh_CN": "姓氏"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaInput",
+ "props": {}
+ }
+ },
+ {
+ "property": "lastName",
+ "type": "String",
+ "defaultValue": "",
+ "label": {
+ "text": {
+ "zh_CN": "名字"
+ }
+ },
+ "cols": 12,
+ "rules": [],
+ "hidden": false,
+ "required": true,
+ "readOnly": false,
+ "disabled": false,
+ "widget": {
+ "component": "MetaInput",
+ "props": {}
+ }
+ }
+ ]
+ }
+ ],
+ "events": {
+ "onUpdate:firstName": {
+ "label": {
+ "zh_CN": "firstName变化时触发"
+ },
+ "description": {
+ "zh_CN": ""
+ }
+ },
+ "onUpdate:lastName": {
+ "label": {
+ "zh_CN": "lastName变化时触发"
+ },
+ "description": {
+ "zh_CN": ""
+ }
+ }
+ },
+ "slots": {}
+ }
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case03/case03.test.js b/packages/vue-generator/test/testcases/sfc/case03/case03.test.js
new file mode 100644
index 000000000..3d4cc61a0
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case03/case03.test.js
@@ -0,0 +1,20 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import blockSchema from './blocks.schema.json'
+import componentsMap from './components-map.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should generate useStateAccessor Correct', async () => {
+ const res = genSFCWithDefaultPlugin(schema, componentsMap)
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/UseStateAccessor.vue')
+})
+
+test('should generate block state accessor correct', async () => {
+ const res = genSFCWithDefaultPlugin(blockSchema, componentsMap)
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/StateAccessor.vue')
+})
diff --git a/packages/vue-generator/test/testcases/sfc/case03/components-map.json b/packages/vue-generator/test/testcases/sfc/case03/components-map.json
new file mode 100644
index 000000000..0512382b5
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case03/components-map.json
@@ -0,0 +1,38 @@
+[
+ {
+ "componentName": "UseStateAccessor",
+ "main": "./views"
+ },
+ {
+ "componentName": "StateAccessor",
+ "main": "./components"
+ },
+ {
+ "componentName": "TinyForm",
+ "exportName": "Form",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyFormItem",
+ "exportName": "FormItem",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyButton",
+ "exportName": "Button",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyInput",
+ "exportName": "Input",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ }
+]
diff --git a/packages/vue-generator/test/testcases/sfc/case03/expected/StateAccessor.vue b/packages/vue-generator/test/testcases/sfc/case03/expected/StateAccessor.vue
new file mode 100644
index 000000000..1ecafa5fa
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case03/expected/StateAccessor.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case03/expected/UseStateAccessor.vue b/packages/vue-generator/test/testcases/sfc/case03/expected/UseStateAccessor.vue
new file mode 100644
index 000000000..82302754a
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case03/expected/UseStateAccessor.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case03/page.schema.json b/packages/vue-generator/test/testcases/sfc/case03/page.schema.json
new file mode 100644
index 000000000..6b1ff8dfc
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case03/page.schema.json
@@ -0,0 +1,48 @@
+{
+ "componentName": "Page",
+ "fileName": "UseStateAccessor",
+ "css": "",
+ "props": {},
+ "state": {
+ "firstName": "",
+ "lastName": ""
+ },
+ "methods": {},
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "TinyForm",
+ "props": {
+ "labelWidth": "80px",
+ "labelPosition": "top"
+ },
+ "children": [
+ {
+ "componentName": "TinyFormItem",
+ "props": {
+ "label": "全名"
+ },
+ "children": [
+ {
+ "componentType": "Block",
+ "componentName": "StateAccessor",
+ "props": {
+ "firstName": {
+ "type": "JSExpression",
+ "value": "this.state.firstName"
+ },
+ "lastName": {
+ "type": "JSExpression",
+ "value": "this.state.lastName"
+ }
+ },
+ "id": "acdd0030"
+ }
+ ],
+ "id": "6140da6b"
+ }
+ ],
+ "id": "88ecfcff"
+ }
+ ]
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case04/case04.test.js b/packages/vue-generator/test/testcases/sfc/case04/case04.test.js
new file mode 100644
index 000000000..677b3dd22
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case04/case04.test.js
@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './components-map.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should generate use utils expression Correct', async () => {
+ const res = genSFCWithDefaultPlugin(schema, componentsMap)
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/UseUtils.vue')
+})
diff --git a/packages/vue-generator/test/testcases/sfc/case04/components-map.json b/packages/vue-generator/test/testcases/sfc/case04/components-map.json
new file mode 100644
index 000000000..0512382b5
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case04/components-map.json
@@ -0,0 +1,38 @@
+[
+ {
+ "componentName": "UseStateAccessor",
+ "main": "./views"
+ },
+ {
+ "componentName": "StateAccessor",
+ "main": "./components"
+ },
+ {
+ "componentName": "TinyForm",
+ "exportName": "Form",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyFormItem",
+ "exportName": "FormItem",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyButton",
+ "exportName": "Button",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyInput",
+ "exportName": "Input",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ }
+]
diff --git a/packages/vue-generator/test/testcases/sfc/case04/expected/UseUtils.vue b/packages/vue-generator/test/testcases/sfc/case04/expected/UseUtils.vue
new file mode 100644
index 000000000..7870c86ef
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case04/expected/UseUtils.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case04/page.schema.json b/packages/vue-generator/test/testcases/sfc/case04/page.schema.json
new file mode 100644
index 000000000..053c7cff8
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case04/page.schema.json
@@ -0,0 +1,65 @@
+{
+ "componentName": "Page",
+ "fileName": "UseUtils",
+ "css": "",
+ "props": {},
+ "state": {
+ "firstName": "",
+ "lastName": ""
+ },
+ "methods": {},
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "div",
+ "props": {},
+ "id": "45237635",
+ "children": [
+ {
+ "componentName": "Text",
+ "props": {
+ "text": {
+ "type": "JSExpression",
+ "value": "this.utils.test()"
+ }
+ },
+ "id": "3223a366"
+ }
+ ]
+ },
+ {
+ "componentName": "div",
+ "props": {},
+ "children": [
+ {
+ "componentName": "Text",
+ "props": {
+ "text": {
+ "type": "JSExpression",
+ "value": "`aaaa${this.utils.test()}`"
+ }
+ },
+ "id": "22665633"
+ }
+ ],
+ "id": "24114e53"
+ },
+ {
+ "componentName": "div",
+ "props": {},
+ "children": [
+ {
+ "componentName": "Text",
+ "props": {
+ "text": {
+ "type": "JSExpression",
+ "value": "this.utils.test()"
+ }
+ },
+ "id": "62336681"
+ }
+ ],
+ "id": "4492e386"
+ }
+ ]
+}
diff --git a/packages/vue-generator/test/testcases/sfc/case05/case05.test.js b/packages/vue-generator/test/testcases/sfc/case05/case05.test.js
new file mode 100644
index 000000000..a9353f908
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case05/case05.test.js
@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './components-map.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should auto detect jsx declare on custom method', async () => {
+ const res = genSFCWithDefaultPlugin(schema, componentsMap)
+ const formattedCode = formatCode(res, 'vue')
+
+ await expect(formattedCode).toMatchFileSnapshot('./expected/UseUtils.vue')
+})
diff --git a/packages/vue-generator/test/testcases/sfc/case05/components-map.json b/packages/vue-generator/test/testcases/sfc/case05/components-map.json
new file mode 100644
index 000000000..8cbf6ff6c
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case05/components-map.json
@@ -0,0 +1,30 @@
+[
+ {
+ "componentName": "TinyForm",
+ "exportName": "Form",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyFormItem",
+ "exportName": "FormItem",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyButton",
+ "exportName": "Button",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ },
+ {
+ "componentName": "TinyInput",
+ "exportName": "Input",
+ "package": "@opentiny/vue",
+ "version": "^3.10.0",
+ "destructuring": true
+ }
+]
diff --git a/packages/vue-generator/test/testcases/sfc/case05/expected/UseUtils.vue b/packages/vue-generator/test/testcases/sfc/case05/expected/UseUtils.vue
new file mode 100644
index 000000000..e3e81baf4
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case05/expected/UseUtils.vue
@@ -0,0 +1,34 @@
+
+
+ {{ utils.test() }}
+
+
+ {{ `aaaa${utils.test()}` }}
+
+
+ {{ utils.test() }}
+
+
+
+
+
+
+
diff --git a/packages/vue-generator/test/testcases/sfc/case05/page.schema.json b/packages/vue-generator/test/testcases/sfc/case05/page.schema.json
new file mode 100644
index 000000000..ae628e768
--- /dev/null
+++ b/packages/vue-generator/test/testcases/sfc/case05/page.schema.json
@@ -0,0 +1,37 @@
+{
+ "componentName": "Page",
+ "fileName": "testJsx",
+ "css": "",
+ "props": {},
+ "state": {
+ "firstName": "",
+ "lastName": ""
+ },
+ "methods": {
+ "onClickNew": {
+ "type": "JSFunction",
+ "value": "function onClickNew(event) {\n this.utils.Moddal.alert({\n message: () =>
+ TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。
+
+ testtest
\n })\n}"
+ }
+ },
+ "lifeCycles": {},
+ "children": [
+ {
+ "componentName": "div",
+ "props": {},
+ "id": "3d443c65",
+ "children": [
+ {
+ "componentName": "Text",
+ "props": {
+ "text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。",
+ "onClick": {
+ "type": "JSExpression",
+ "value": "this.onClickNew"
+ }
+ },
+ "id": "34253314"
+ }
+ ]
+ }
+ ]
+}
diff --git a/packages/vue-generator/test/unit/hasJSX.test.js b/packages/vue-generator/test/unit/hasJSX.test.js
new file mode 100644
index 000000000..c66b87f11
--- /dev/null
+++ b/packages/vue-generator/test/unit/hasJSX.test.js
@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest'
+import { hasJsx } from '@/utils/hasJsx'
+
+describe('normal case', () => {
+ test('raw jsx should be true', () => {
+ expect(hasJsx('')).toBe(true)
+ })
+
+ test('fragment jsx should be true', () => {
+ expect(hasJsx('<>')).toBe(true)
+ })
+
+ test('only fragment jsx should be true', () => {
+ expect(hasJsx('<>helloworld')).toBe(true)
+ })
+
+ test('function with jsx should be true', () => {
+ expect(hasJsx('function foo() { return hello world
}')).toBe(true)
+ })
+
+ test('params with anonymous function should be true', () => {
+ expect(
+ hasJsx(
+ 'function message() { this.utils.Modal.alert({ message: () => helloworld
}) }'
+ )
+ ).toBe(true)
+ })
+
+ test('jsx inside script tag should be true', () => {
+ expect(
+ hasJsx(
+ ''
+ )
+ ).toBe(true)
+ })
+
+ test('jsx with custom element should be true', () => {
+ expect(hasJsx('')
+})
+
+test('should generate close tag correctly', () => {
+ expect(generateTag('div', { isStartTag: false })).toBe('
')
+})
+
+test('void element should generate self close tag', () => {
+ expect(generateTag('img')).toBe('') + expect(generateTag('hr')).toBe('
') + expect(generateTag('link')).toBe('') + expect(generateTag('area')).toBe('') + expect(generateTag('base')).toBe('